/**
 * Custom Checkout - Stile Step
 * File: your-child-theme/css/custom-checkout.css
 */

/* ============================================
   VARIABLES
   ============================================ */
:root {
    --cc-primary:      #2c7be5;
    --cc-primary-dark: #1a5fbe;
    --cc-success:      #28a745;
    --cc-warning:      #f59e0b;
    --cc-danger:       #dc3545;
    --cc-discount:     #e53e3e;
    --cc-bg:           #f8fafc;
    --cc-card-bg:      #ffffff;
    --cc-border:       #e2e8f0;
    --cc-text:         #2d3748;
    --cc-text-muted:   #718096;
    --cc-radius:       12px;
    --cc-shadow:       0 2px 8px rgba(0,0,0,.08);
    --cc-shadow-hover: 0 6px 20px rgba(44,123,229,.18);
    --cc-transition:   all .25s ease;
}

/* ============================================
   WRAPPER
   ============================================ */
.custom-checkout-wrapper {
    max-width: 820px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: inherit;
    color: var(--cc-text);
}

.cc-hidden { display: none !important; }

/* ============================================
   PROGRESS BAR
   ============================================ */
.cc-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--cc-card-bg);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}

.cc-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    cursor: default;
}

.cc-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cc-border);
    color: var(--cc-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    transition: var(--cc-transition);
}

.cc-step-label {
    font-size: .75rem;
    color: var(--cc-text-muted);
    font-weight: 500;
    transition: var(--cc-transition);
    white-space: nowrap;
}

.cc-step-connector {
    flex: 1;
    height: 2px;
    background: var(--cc-border);
    margin: 0 .5rem;
    margin-bottom: 1.2rem;
    max-width: 80px;
    transition: var(--cc-transition);
}

/* Active step */
.cc-step-indicator.active .cc-step-number {
    background: var(--cc-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(44,123,229,.2);
}
.cc-step-indicator.active .cc-step-label {
    color: var(--cc-primary);
    font-weight: 600;
}

/* Completed step */
.cc-step-indicator.completed .cc-step-number {
    background: var(--cc-success);
    color: #fff;
}
.cc-step-indicator.completed .cc-step-label {
    color: var(--cc-success);
}

.cc-step-indicator.completed + .cc-step-connector {
    background: var(--cc-success);
}

/* ============================================
   STEP PANELS
   ============================================ */
.cc-step {
    display: none;
    background: var(--cc-card-bg);
    border-radius: var(--cc-radius);
    padding: 2rem;
    box-shadow: var(--cc-shadow);
    animation: ccFadeIn .3s ease;
}

.cc-step--active { display: block; }

@keyframes ccFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cc-step-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cc-step-icon { font-size: 1.5rem; }

.cc-step-subtitle {
    color: var(--cc-text-muted);
    margin-bottom: 1.8rem;
    font-size: .92rem;
}

/* ============================================
   FORM FIELDS
   ============================================ */
.cc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.cc-col-full { grid-column: 1 / -1; }

.cc-field-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.cc-field-group label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cc-text);
}

.cc-field-group label .required {
    color: var(--cc-danger);
    margin-left: 2px;
}

.cc-field-group input,
.cc-field-group select,
.cc-field-group textarea {
    padding: .65rem .9rem;
    border: 1.5px solid var(--cc-border);
    border-radius: 8px;
    font-size: .95rem;
    color: var(--cc-text);
    background: #fff;
    transition: var(--cc-transition);
    width: 100%;
    box-sizing: border-box;
}

.cc-field-group input:focus,
.cc-field-group select:focus,
.cc-field-group textarea:focus {
    outline: none;
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px rgba(44,123,229,.12);
}

.cc-field-group input[readonly] {
    background: var(--cc-bg);
    cursor: not-allowed;
    color: var(--cc-text-muted);
}

.cc-hint {
    font-size: .83rem;
    color: var(--cc-text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cc-hint::before { content: 'ℹ️'; }

.cc-notes-group { margin-top: 1.5rem; }

/* ============================================
   DELIVERY CARDS
   ============================================ */
.cc-delivery-options,
.cc-payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cc-delivery-card,
.cc-payment-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius);
    cursor: pointer;
    transition: var(--cc-transition);
    background: #fff;
    position: relative;
    outline: none;
}

.cc-delivery-card:hover,
.cc-payment-card:hover {
    border-color: var(--cc-primary);
    box-shadow: var(--cc-shadow-hover);
    transform: translateY(-2px);
}

.cc-delivery-card.selected,
.cc-payment-card.selected {
    border-color: var(--cc-primary);
    background: rgba(44,123,229,.04);
}

.cc-delivery-icon,
.cc-payment-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.cc-delivery-info strong,
.cc-payment-info strong {
    display: block;
    font-weight: 700;
    margin-bottom: .2rem;
}

.cc-delivery-info p,
.cc-payment-info p {
    font-size: .83rem;
    color: var(--cc-text-muted);
    margin: 0;
}

.cc-delivery-check,
.cc-payment-check {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--cc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: var(--cc-transition);
}

.cc-delivery-card.selected .cc-delivery-check,
.cc-payment-card.selected .cc-payment-check {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    color: #fff;
}

/* Badge sconto */
.cc-payment-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .5rem;
    border-radius: 20px;
    flex-shrink: 0;
}

.cc-badge--discount {
    background: #fff5f5;
    color: var(--cc-discount);
    border: 1px solid #feb2b2;
}

/* ============================================
   SHIPPING FIELDS SECTION
   ============================================ */
.cc-shipping-fields {
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cc-shipping-fields h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* ============================================
   SHIPPING METHODS
   ============================================ */
.cc-shipping-methods {
    margin-top: 1.5rem;
}

.cc-shipping-methods h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.cc-shipping-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.cc-radio-label {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1.5px solid var(--cc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--cc-transition);
}

.cc-radio-label:hover {
    border-color: var(--cc-primary);
    background: rgba(44,123,229,.03);
}

.cc-radio-label input[type="radio"] { display: none; }

.cc-radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--cc-border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: var(--cc-transition);
}

.cc-radio-label input[type="radio"]:checked + .cc-radio-custom {
    border-color: var(--cc-primary);
    background: var(--cc-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.cc-shipping-name { flex: 1; font-weight: 500; }

.cc-shipping-cost {
    font-weight: 700;
    color: var(--cc-primary);
}

/* ============================================
   DISCOUNT BANNER
   ============================================ */
.cc-discount-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #fff5f5, #fff);
    border: 1px solid #feb2b2;
    border-radius: var(--cc-radius);
    margin-bottom: 1.5rem;
    animation: ccFadeIn .3s ease;
}

.cc-discount-icon { font-size: 1.8rem; }

.cc-discount-banner strong {
    display: block;
    color: var(--cc-discount);
    font-weight: 700;
}

.cc-discount-banner p {
    font-size: .85rem;
    color: var(--cc-text-muted);
    margin: 0;
}

.cc-discount-amount {
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cc-discount);
    white-space: nowrap;
}

/* ============================================
   STEP ACTIONS (BUTTONS)
   ============================================ */
.cc-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cc-border);
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.8rem;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--cc-transition);
    text-decoration: none;
    line-height: 1;
}

.cc-btn--next,
.cc-btn--submit {
    background: var(--cc-primary);
    color: #fff;
    margin-left: auto;
}

.cc-btn--next:hover,
.cc-btn--submit:hover {
    background: var(--cc-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44,123,229,.3);
}

.cc-btn--prev {
    background: transparent;
    color: var(--cc-text-muted);
    border: 1.5px solid var(--cc-border);
}

.cc-btn--prev:hover {
    border-color: var(--cc-text-muted);
    color: var(--cc-text);
    background: var(--cc-bg);
}

.cc-btn--submit {
    background: var(--cc-success);
    padding: .9rem 2.2rem;
    font-size: 1rem;
}

.cc-btn--submit:hover {
    background: #218838;
    box-shadow: 0 4px 12px rgba(40,167,69,.35);
}

.cc-btn--submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   SUMMARY (STEP 4)
   ============================================ */
.cc-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cc-summary-block {
    background: var(--cc-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 1.2rem;
}

.cc-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--cc-border);
}

.cc-summary-header h3 {
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-text-muted);
}

.cc-edit-btn {
    background: none;
    border: none;
    color: var(--cc-primary);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.cc-summary-content {
    font-size: .9rem;
    line-height: 1.6;
}

.cc-summary-content p { margin: .2rem 0; }

/* Tabella prodotti */
.cc-order-items {
    margin-bottom: 2rem;
}

.cc-order-items h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.cc-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.cc-items-table th,
.cc-items-table td {
    padding: .7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--cc-border);
}

.cc-items-table thead th {
    background: var(--cc-bg);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-text-muted);
}

.cc-items-table tfoot td {
    font-size: .92rem;
}

.cc-total-row td {
    font-size: 1.05rem;
    padding-top: 1rem;
    border-top: 2px solid var(--cc-text);
    border-bottom: none;
}

.cc-discount-value { color: var(--cc-discount); font-weight: 700; }

/* ============================================
   PRIVACY CHECKBOX
   ============================================ */
.cc-privacy-check {
    margin-bottom: 1.5rem;
}

.cc-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1.5;
}

.cc-checkbox-label input[type="checkbox"] { display: none; }

.cc-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--cc-border);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--cc-transition);
    position: relative;
}

.cc-checkbox-label input[type="checkbox"]:checked + .cc-checkbox-custom {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
}

.cc-checkbox-label input[type="checkbox"]:checked + .cc-checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.cc-checkbox-label a {
    color: var(--cc-primary);
    text-decoration: underline;
}

/* ============================================
   MESSAGES
   ============================================ */
.cc-messages {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    font-size: .9rem;
}

.cc-messages.cc-error {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    color: var(--cc-danger);
}

.cc-messages.cc-success {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: var(--cc-success);
}

/* Login notice */
.cc-login-notice {
    text-align: center;
    padding: 2rem;
    background: var(--cc-card-bg);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 680px) {

    .cc-progress-bar { padding: 1rem .5rem; }

    .cc-step-label { font-size: .68rem; }

    .cc-step-connector { max-width: 30px; }

    .cc-step { padding: 1.3rem; }

    .cc-form-grid,
    .cc-delivery-options,
    .cc-payment-options,
    .cc-summary-grid {
        grid-template-columns: 1fr;
    }

    .cc-step-actions { flex-wrap: wrap; gap: .8rem; }

    .cc-btn--next,
    .cc-btn--submit { width: 100%; justify-content: center; }

    .cc-btn--prev { width: 100%; justify-content: center; order: 2; }

    .cc-items-table th:nth-child(2),
    .cc-items-table td:nth-child(2) { display: none; }
}

/* ============================================
   PORTO FRANCO BANNER
   ============================================ */
.cc-porto-franco-banner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-size: .9rem;
    border: 1.5px solid;
    animation: ccFadeIn .3s ease;
    transition: var(--cc-transition);
}

.cc-porto-franco-banner.cc-banner--almost {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.cc-porto-franco-banner.cc-banner--free {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

.cc-pf-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.cc-pf-text {
    margin: 0;
    line-height: 1.5;
}

.cc-pf-text strong { font-weight: 700; }
.cc-pf-text em     { font-style: normal; font-weight: 600; }

/* ============================================
   SHIPPING METHODS - AJAX LOADER
   ============================================ */
.cc-shipping-loading {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 0;
    color: var(--cc-text-muted);
    font-size: .9rem;
}

.cc-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cc-border);
    border-top-color: var(--cc-primary);
    border-radius: 50%;
    animation: ccSpin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes ccSpin {
    to { transform: rotate(360deg); }
}

.cc-shipping-error {
    color: var(--cc-danger);
    font-size: .88rem;
    padding: .6rem 0;
    margin: 0;
}