/* ============================================================================
   CHECKOUT DESIGN SYSTEM — Confirmia / DoctorTrotineta
   ============================================================================
   ETAPA 1 — FUNDAȚIE VIZUALĂ (NU modifică layout-ul existent).

   Toate stilurile de mai jos sunt IZOLATE sub namespace-ul `.checkout-page`.
   Nu afectează restul site-ului (homepage, produse, coș, conturi etc.).

   Reguli:
   - Nu modifică markup-ul existent; doar pregătește componentele reutilizabile.
   - Clasele `checkout-*` existente (stepper, form card, items) sunt RĂSPUNSE
     de styles.css/mobile.css globale — aici definim variantele pregătite pentru
     viitorul design, scoped și neinvazive.
   - Verde = culoare principală (CTA, succes, selectat). Albastru = doar info/linkuri.
   ============================================================================ */


/* ── 1. DESIGN TOKENS ──────────────────────────────────────────────────────── */
.checkout-page,
.cart-page {
    /* Background / Surface */
    --checkout-bg:            #0B0D10;
    --checkout-surface:       #15181E;
    --checkout-surface-2:     #101318;
    --checkout-border:        #2A2F38;

    /* Text */
    --checkout-text:          #F5F5F5;
    --checkout-text-secondary:#9CA3AF;
    --checkout-text-muted:    #6B7280;

    /* Brand / Primary (galben — armonizat cu storefront-ul) */
    --checkout-primary:       #FFD200;
    --checkout-primary-hover: #E6BD00;
    --checkout-primary-soft:  rgba(255, 210, 0, 0.12);
    --checkout-on-primary:    #0D0D0D;  /* text pe galben */

    /* Semantic */
    --checkout-info:          #60A5FA;
    --checkout-warning:       #F59E0B;
    --checkout-error:         #EF4444;

    /* Spacing system */
    --checkout-space-1: 4px;
    --checkout-space-2: 8px;
    --checkout-space-3: 12px;
    --checkout-space-4: 16px;
    --checkout-space-5: 20px;
    --checkout-space-6: 24px;
    --checkout-space-7: 32px;
    --checkout-space-8: 40px;
    --checkout-space-9: 48px;

    /* Radius */
    --checkout-radius-sm:   6px;
    --checkout-radius-md:   8px;
    --checkout-radius-lg:   12px;

    /* Borders */
    --checkout-border-width: 1px;

    /* Type scale */
    --checkout-font-body:   15px;
    --checkout-font-body-lg:16px;
    --checkout-font-label:  13px;
    --checkout-font-small:  13px;
    --checkout-font-price:  17px;
    --checkout-font-total:  26px;
    --checkout-line-height: 1.5;

    /* Controls */
    --checkout-input-height:     52px;
    --checkout-input-padding-x:  15px;
    --checkout-input-bg:         #101318;
    --checkout-button-height:    54px;
    --checkout-card-padding:     24px;
}


/* ── 2. TIPOGRAFIE (scoped) ───────────────────────────────────────────────── */
.checkout-page,
.checkout-page * {
    font-size: var(--checkout-font-body);
    line-height: var(--checkout-line-height);
    -webkit-font-smoothing: antialiased;
}

.checkout-page h1,
.checkout-page .checkout-h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--checkout-text);
}

.checkout-page h2,
.checkout-page .checkout-h2 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--checkout-text);
}

.checkout-page h3,
.checkout-page .checkout-h3 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--checkout-text);
}

.checkout-page .checkout-label {
    font-size: var(--checkout-font-label);
    font-weight: 600;
    color: var(--checkout-text);
}

.checkout-page .checkout-text-secondary { color: var(--checkout-text-secondary); }
.checkout-page .checkout-text-muted     { color: var(--checkout-text-muted); }

.checkout-page .checkout-price {
    font-size: var(--checkout-font-price);
    font-weight: 600;
    color: var(--checkout-text);
}

.checkout-page .checkout-total {
    font-size: var(--checkout-font-total);
    font-weight: 700;
    color: var(--checkout-text);
}


/* ── 3. SPACING (utilitare scoped) ────────────────────────────────────────── */
.checkout-page .co-space-1 { margin-bottom: var(--checkout-space-1); }
.checkout-page .co-space-2 { margin-bottom: var(--checkout-space-2); }
.checkout-page .co-space-3 { margin-bottom: var(--checkout-space-3); }
.checkout-page .co-space-4 { margin-bottom: var(--checkout-space-4); }
.checkout-page .co-space-5 { margin-bottom: var(--checkout-space-5); }
.checkout-page .co-space-6 { margin-bottom: var(--checkout-space-6); }
.checkout-page .co-space-7 { margin-bottom: var(--checkout-space-7); }
.checkout-page .co-space-8 { margin-bottom: var(--checkout-space-8); }
.checkout-page .co-space-9 { margin-bottom: var(--checkout-space-9); }


/* ── 4. CONTAINER & PAGE ──────────────────────────────────────────────────── */
.checkout-page {
    background: var(--checkout-bg);
    color: var(--checkout-text);
}

.checkout-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--checkout-space-6) var(--checkout-space-4);
}


/* ── 5. CARD SYSTEM ───────────────────────────────────────────────────────── */
.checkout-page .checkout-card {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-lg);
    padding: var(--checkout-card-padding);
    box-shadow: none; /* fără efecte glossy */
}


/* ── 6. BORDERS ───────────────────────────────────────────────────────────── */
.checkout-page .checkout-border {
    border: var(--checkout-border-width) solid var(--checkout-border);
}
.checkout-page .checkout-border-light {
    border-color: var(--checkout-border);
}
.checkout-page .checkout-border-hover:hover {
    border-color: #3A4150; /* border mai luminos la hover */
}


/* ── 7. INPUT SYSTEM (pregătit, scoped) ──────────────────────────────────── */
.checkout-page .checkout-input,
.checkout-page .checkout-select,
.checkout-page .checkout-textarea {
    display: block;
    width: 100%;
    height: var(--checkout-input-height);
    padding: 0 var(--checkout-input-padding-x);
    background: var(--checkout-input-bg);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-md);
    color: var(--checkout-text);
    font-size: var(--checkout-font-body);
    line-height: var(--checkout-line-height);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.checkout-page .checkout-textarea {
    height: auto;
    min-height: 90px;
    padding-top: var(--checkout-space-3);
    padding-bottom: var(--checkout-space-3);
    resize: vertical;
}

.checkout-page .checkout-input::placeholder,
.checkout-page .checkout-select::placeholder,
.checkout-page .checkout-textarea::placeholder {
    color: var(--checkout-text-muted);
}

.checkout-page .checkout-input:hover,
.checkout-page .checkout-select:hover,
.checkout-page .checkout-textarea:hover {
    border-color: #3A4150;
}

.checkout-page .checkout-input:focus,
.checkout-page .checkout-select:focus,
.checkout-page .checkout-textarea:focus {
    outline: none;
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px var(--checkout-primary-soft);
}

.checkout-page .checkout-input:disabled,
.checkout-page .checkout-select:disabled,
.checkout-page .checkout-textarea:disabled {
    background: var(--checkout-surface-2);
    color: var(--checkout-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select: săgeată nativă discretă */
.checkout-page .checkout-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CA3AF' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--checkout-space-4) center;
    padding-right: var(--checkout-space-7);
}

/* Checkbox / Radio (custom controls pregătite) */
.checkout-page .checkout-check,
.checkout-page .checkout-radio-input {
    width: 18px;
    height: 18px;
    accent-color: var(--checkout-primary);
    cursor: pointer;
}

.checkout-page .checkout-check-label {
    font-size: var(--checkout-font-label);
    color: var(--checkout-text);
    cursor: pointer;
}

/* Validation */
.checkout-page .checkout-input.checkout-invalid,
.checkout-page .checkout-select.checkout-invalid,
.checkout-page .checkout-textarea.checkout-invalid {
    border-color: var(--checkout-error);
}
.checkout-page .checkout-input.checkout-invalid:focus,
.checkout-page .checkout-select.checkout-invalid:focus,
.checkout-page .checkout-textarea.checkout-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.checkout-page .checkout-error-text {
    font-size: var(--checkout-font-small);
    color: var(--checkout-error);
}

.checkout-page .checkout-input.checkout-valid,
.checkout-page .checkout-select.checkout-valid,
.checkout-page .checkout-textarea.checkout-valid {
    border-color: var(--checkout-primary);
}
.checkout-page .checkout-valid-text {
    font-size: var(--checkout-font-small);
    color: var(--checkout-primary);
}


/* ── 8. BUTTON SYSTEM (scoped) ────────────────────────────────────────────── */
.checkout-page .checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--checkout-space-2);
    height: var(--checkout-button-height);
    padding: 0 var(--checkout-space-6);
    border-radius: var(--checkout-radius-md);
    font-weight: 700;
    font-size: var(--checkout-font-body);
    line-height: 1;
    cursor: pointer;
    border: var(--checkout-border-width) solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.checkout-page .checkout-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--checkout-primary-soft);
}

.checkout-page .checkout-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* PRIMARY — CTA principal (galben, text închis) */
.checkout-page .checkout-button-primary {
    background: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: var(--checkout-on-primary, #0D0D0D);
    font-weight: 800;
}
.checkout-page .checkout-button-primary:hover {
    background: var(--checkout-primary-hover);
    border-color: var(--checkout-primary-hover);
    color: var(--checkout-on-primary, #0D0D0D);
}

/* SECONDARY — outline discret */
.checkout-page .checkout-button-secondary {
    background: transparent;
    border-color: var(--checkout-border);
    color: var(--checkout-text);
}
.checkout-page .checkout-button-secondary:hover {
    border-color: #3A4150;
    color: var(--checkout-text);
}

/* TERTIARY — text link, fără border */
.checkout-page .checkout-button-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--checkout-text-secondary);
    padding: 0 var(--checkout-space-3);
    height: auto;
}
.checkout-page .checkout-button-tertiary:hover {
    color: var(--checkout-text);
}

/* Block (width 100%) */
.checkout-page .checkout-button-block {
    width: 100%;
}


/* ── 9. ALERT / INFORMATION SYSTEM ────────────────────────────────────────── */
.checkout-page .checkout-alert {
    display: flex;
    gap: var(--checkout-space-3);
    align-items: flex-start;
    padding: var(--checkout-space-4) var(--checkout-space-5);
    border-radius: var(--checkout-radius-md);
    border: var(--checkout-border-width) solid var(--checkout-border);
    background: var(--checkout-surface-2);
    color: var(--checkout-text);
    font-size: var(--checkout-font-body);
}

.checkout-page .checkout-alert .checkout-alert-icon {
    flex-shrink: 0;
    line-height: 1.4;
}

.checkout-page .checkout-alert-info {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.08);
    color: var(--checkout-text);
}
.checkout-page .checkout-alert-info .checkout-alert-icon { color: var(--checkout-info); }

.checkout-page .checkout-alert-success {
    border-color: rgba(34, 197, 94, 0.45);
    background: var(--checkout-primary-soft);
    color: var(--checkout-text);
}
.checkout-page .checkout-alert-success .checkout-alert-icon { color: var(--checkout-primary); }

.checkout-page .checkout-alert-warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
    color: var(--checkout-text);
}
.checkout-page .checkout-alert-warning .checkout-alert-icon { color: var(--checkout-warning); }

.checkout-page .checkout-alert-error {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
    color: var(--checkout-text);
}
.checkout-page .checkout-alert-error .checkout-alert-icon { color: var(--checkout-error); }


/* ── 10. STEPPER SYSTEM (pregătit, compact) ──────────────────────────────── */
.checkout-page .checkout-stepper {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-2);
    padding: var(--checkout-space-3) 0;
}

.checkout-page .checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--checkout-space-2);
    flex: 0 0 auto;
}

.checkout-page .checkout-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--checkout-surface-2);
    border: var(--checkout-border-width) solid var(--checkout-border);
    color: var(--checkout-text-muted);
}

.checkout-page .checkout-step-label {
    font-size: 12px;
    color: var(--checkout-text-muted);
    white-space: nowrap;
}

.checkout-page .checkout-step-line {
    flex: 1;
    height: 2px;
    background: var(--checkout-border);
    border-radius: 2px;
    min-width: 24px;
}

/* Pending (implicit) — gri */
.checkout-page .checkout-step.pending .checkout-step-circle {
    background: var(--checkout-surface-2);
    border-color: var(--checkout-border);
    color: var(--checkout-text-muted);
}
.checkout-page .checkout-step.pending .checkout-step-label { color: var(--checkout-text-muted); }

/* Current — verde discret */
.checkout-page .checkout-step.current .checkout-step-circle {
    border-color: var(--checkout-primary);
    color: var(--checkout-primary);
    background: var(--checkout-primary-soft);
}
.checkout-page .checkout-step.current .checkout-step-label {
    color: var(--checkout-text);
    font-weight: 600;
}

/* Completed — verde */
.checkout-page .checkout-step.completed .checkout-step-circle {
    background: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: #ffffff;
}
.checkout-page .checkout-step.completed .checkout-step-label { color: var(--checkout-primary); }
.checkout-page .checkout-step-line.completed { background: var(--checkout-primary); }


/* ── 11. RADIO / PAYMENT / SHIPPING OPTION CARDS ─────────────────────────── */
.checkout-page .checkout-option {
    display: flex;
    align-items: flex-start;
    gap: var(--checkout-space-3);
    padding: var(--checkout-space-4) var(--checkout-space-5);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-md);
    background: var(--checkout-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkout-page .checkout-option:hover {
    border-color: #3A4150;
}

.checkout-page .checkout-option.selected {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary-soft);
}

.checkout-page .checkout-option-title {
    font-weight: 600;
    color: var(--checkout-text);
}
.checkout-page .checkout-option-desc {
    font-size: var(--checkout-font-small);
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-option-price {
    font-weight: 700;
    color: var(--checkout-text);
    margin-left: auto;
    white-space: nowrap;
}


/* ── 12. ORDER SUMMARY SYSTEM ────────────────────────────────────────────── */
.checkout-page .checkout-order-summary {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-lg);
    padding: var(--checkout-card-padding);
}

.checkout-page .checkout-summary-item {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-3);
    padding: var(--checkout-space-3) 0;
    border-bottom: var(--checkout-border-width) solid var(--checkout-border);
}

.checkout-page .checkout-summary-item:last-child { border-bottom: none; }

.checkout-page .checkout-summary-img {
    width: 56px;
    height: 56px;
    border-radius: var(--checkout-radius-sm);
    object-fit: cover;
    background: var(--checkout-surface-2);
    flex-shrink: 0;
}

.checkout-page .checkout-summary-name {
    font-weight: 600;
    color: var(--checkout-text);
    font-size: var(--checkout-font-body);
}

.checkout-page .checkout-summary-qty {
    font-size: var(--checkout-font-small);
    color: var(--checkout-text-secondary);
}

.checkout-page .checkout-summary-price {
    margin-left: auto;
    font-weight: 600;
    color: var(--checkout-text);
    white-space: nowrap;
}

/* Rows: subtotal / transport / voucher / total */
.checkout-page .checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--checkout-space-2) 0;
    font-size: var(--checkout-font-body);
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-summary-row .co-label { color: var(--checkout-text-secondary); }
.checkout-page .checkout-summary-row .co-value { color: var(--checkout-text); font-weight: 500; }

.checkout-page .checkout-summary-voucher .co-value { color: var(--checkout-primary); }

.checkout-page .checkout-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--checkout-space-4);
    margin-top: var(--checkout-space-2);
    border-top: var(--checkout-border-width) solid var(--checkout-border);
}
.checkout-page .checkout-summary-total .co-label {
    font-size: var(--checkout-font-body-lg);
    font-weight: 700;
    color: var(--checkout-text);
}
.checkout-page .checkout-summary-total .checkout-total { color: var(--checkout-primary); }


/* ── 13. RESPONSIVE TOKENS ───────────────────────────────────────────────── */
/* Doar câteva breakpoint-uri rezonabile; layout-ul NU este modificat aici.   */

/* Tablet (≤ 991px — Bootstrap lg) */
@media (max-width: 991px) {
    .checkout-page {
        --checkout-card-padding: 20px;
        --checkout-input-height: 50px;
        --checkout-button-height: 52px;
    }
    .checkout-page .checkout-container { padding: var(--checkout-space-5) var(--checkout-space-4); }

    /* Evită overflow: sub lg, coloanele devin full-width (layout single column). */
    .checkout-page .checkout-layout {
        flex-direction: column;
        gap: var(--checkout-space-6);
    }
    .checkout-page .checkout-form-col,
    .checkout-page .checkout-summary-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Dezactivez sticky pe mobil/tablet pentru a evita probleme. */
    .checkout-page .checkout-summary-col {
        position: static;
    }
}

/* Mobile (≤ 576px) */
@media (max-width: 576px) {
    .checkout-page {
        --checkout-card-padding: 16px;
        --checkout-font-body: 15px;
        --checkout-font-total: 24px;
        --checkout-input-height: 50px;
        --checkout-button-height: 52px;
    }
    .checkout-page h1 { font-size: 28px; }
    .checkout-page h2 { font-size: 21px; }
    .checkout-page h3 { font-size: 18px; }
    .checkout-page .checkout-container { padding: var(--checkout-space-4); }
    .checkout-page .checkout-option { flex-direction: column; }
    .checkout-page .checkout-option-price { margin-left: 0; }
    .checkout-page .checkout-step-label { font-size: 10px; }
}


/* ============================================================================
   ETAPA 2 — CHECKOUT DESKTOP: STRUCTURĂ ȘI LAYOUT
   ============================================================================
   Toate stilurile rămân SCOPED sub `.checkout-page` / `body.checkout-page`
   (clasa `checkout-page` e adăugată pe <body> DOAR pe checkout în header.php).
   NU modifică celelalte pagini, header-ul global sau footer-ul global.
   ============================================================================ */


/* ── 2.1 ASCUNDERE NAVBAR + COMPENSARE PADDING ───────────────────────────── */
/* Pe checkout nu mai afișăm navigarea completă a magazinului.               */
.checkout-body .navbar {
    display: none;
}
/* Body-ul global are padding-top:70px pentru navbar-ul fixed; îl anulăm pe checkout. */
body.checkout-page {
    padding-top: 0;
}


/* ── 2.2 HEADER CHECKOUT (minimalist) ────────────────────────────────────── */
.checkout-page .checkout-header {
    background: var(--checkout-surface-2);
    border-bottom: var(--checkout-border-width) solid var(--checkout-border);
}

.checkout-page .checkout-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--checkout-space-4);
}

.checkout-page .checkout-header-logo {
    display: inline-flex;
    align-items: center;
    color: var(--checkout-text);
    text-decoration: none;
}

.checkout-page .checkout-header-logo-img {
    max-height: 40px;
    width: auto;
    display: block;
}

.checkout-page .checkout-header-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--checkout-text);
}

.checkout-page .checkout-header-right {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-4);
}

.checkout-page .checkout-secure {
    display: inline-flex;
    align-items: center;
    gap: var(--checkout-space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--checkout-text-secondary);
    white-space: nowrap;
}
.checkout-page .checkout-secure i { color: var(--checkout-primary); }

.checkout-page .checkout-help {
    display: inline-flex;
    align-items: center;
    gap: var(--checkout-space-2);
    font-size: 13px;
    color: var(--checkout-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.checkout-page .checkout-help:hover { color: var(--checkout-text); }
.checkout-page .checkout-help i { color: var(--checkout-info); }


/* ── 2.3 CONTAINER PRINCIPAL ─────────────────────────────────────────────── */
.checkout-page .checkout-container {
    max-width: 1240px;          /* 1200-1280px conform cerinței */
    margin: 0 auto;
    padding: var(--checkout-space-6) 24px;
}


/* ── 2.4 TITLU ───────────────────────────────────────────────────────────── */
.checkout-page .checkout-title {
    font-size: 34px;
    font-weight: 700;
    color: var(--checkout-text);
    margin: 0 0 var(--checkout-space-7);
    letter-spacing: -0.01em;
}


/* ── 2.5 LAYOUT DESKTOP — DOUĂ COLOANE (65% / 35%) ──────────────────────── */
.checkout-page .checkout-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    margin: 0;
}

.checkout-page .checkout-form-col {
    flex: 0 0 65%;
    max-width: 65%;
    padding: 0;
}

.checkout-page .checkout-summary-col {
    flex: 0 0 calc(35% - 32px);
    max-width: calc(35% - 32px);
    padding: 0;
}


/* ── 2.6 CARD FORMULAR ───────────────────────────────────────────────────── */
.checkout-page .checkout-form-card {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-lg);
    box-shadow: none;
}
.checkout-page .checkout-form-card .card-body {
    padding: var(--checkout-card-padding);
}


/* ── 2.7 STEPPER — compact, păstrează stările current/completed/pending ── */
.checkout-page .checkout-progress {
    margin-bottom: var(--checkout-space-5);
}

.checkout-page .checkout-steps {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-2);
    padding: var(--checkout-space-3) 0;
}

.checkout-page .checkout-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--checkout-space-2);
    flex: 0 0 auto;
}

.checkout-page .checkout-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--checkout-surface-2);
    border: var(--checkout-border-width) solid var(--checkout-border);
    color: var(--checkout-text-muted);
    line-height: 1;
}
.checkout-page .checkout-step-circle .step-num { line-height: 1; }
.checkout-page .checkout-step-circle .step-check { font-size: 12px; }

/* Pending (implicit) — gri */
.checkout-page .checkout-step-item .checkout-step-label {
    font-size: 12px;
    color: var(--checkout-text-muted);
    white-space: nowrap;
}

/* Current (active) — verde discret */
.checkout-page .checkout-step-item.active .checkout-step-circle {
    border-color: var(--checkout-primary);
    background: var(--checkout-primary-soft);
    color: var(--checkout-primary);
}
.checkout-page .checkout-step-item.active .checkout-step-label {
    color: var(--checkout-text);
    font-weight: 600;
}

/* Completed — galben (bifă închisă) */
.checkout-page .checkout-step-item.completed .checkout-step-circle {
    background: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: var(--checkout-on-primary, #0D0D0D);
}
.checkout-page .checkout-step-item.completed .checkout-step-label { color: var(--checkout-primary); }

.checkout-page .checkout-step-line {
    flex: 1;
    height: 2px;
    background: var(--checkout-border);
    border-radius: 2px;
    min-width: 24px;
}
.checkout-page .checkout-step-line.completed { background: var(--checkout-primary); }


/* ── 2.8 REZUMAT COMANDĂ (sticky, vizual separat) ────────────────────────── */
.checkout-page .checkout-order-summary {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-lg);
    box-shadow: none;
}
.checkout-page .checkout-summary-col {
    position: sticky;
    top: 24px;
}
.checkout-page .checkout-order-summary .card-header {
    background: var(--checkout-surface-2);
    border-bottom: var(--checkout-border-width) solid var(--checkout-border);
    padding: var(--checkout-space-4) var(--checkout-card-padding);
}
.checkout-page .checkout-order-summary .card-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--checkout-text);
}
.checkout-page .checkout-order-summary .card-body { padding: var(--checkout-card-padding); }

/* Produs */
.checkout-page .checkout-order-summary .checkout-items .list-group-item {
    background: transparent;
    border: none;
    border-bottom: var(--checkout-border-width) solid var(--checkout-border);
    padding: var(--checkout-space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--checkout-space-3);
}
.checkout-page .checkout-order-summary .checkout-items .list-group-item:last-child { border-bottom: none; }
.checkout-page .checkout-order-summary .checkout-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--checkout-radius-sm);
    background: var(--checkout-surface-2);
    margin: 0;
}
.checkout-page .checkout-order-summary .checkout-items .list-group-item small,
.checkout-page .checkout-order-summary .checkout-items .list-group-item .text-muted { color: var(--checkout-text-secondary); }
.checkout-page .checkout-order-summary .checkout-items .list-group-item strong { color: var(--checkout-text); font-size: var(--checkout-font-price); }

/* Coupon section */
.checkout-page .checkout-order-summary #couponSection {
    border-top: var(--checkout-border-width) solid var(--checkout-border);
    border-bottom: var(--checkout-border-width) solid var(--checkout-border);
    padding: var(--checkout-space-4) 0;
}

/* Rows: subtotal / transport / reducere / total */
.checkout-page .checkout-order-summary .card-body .d-flex {
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-order-summary .card-body .d-flex strong { color: var(--checkout-text); font-weight: 600; }
.checkout-page .checkout-order-summary .card-body .text-success { color: var(--checkout-primary); }
.checkout-page .checkout-order-summary .card-body hr {
    border-top-color: var(--checkout-border);
}

/* Total dominant */
.checkout-page .checkout-order-summary .card-body .h5 {
    font-size: var(--checkout-font-total);
    font-weight: 700;
    color: var(--checkout-text);
}
.checkout-page .checkout-order-summary .card-body .d-flex:last-child .h5 { color: var(--checkout-primary); }


/* ── 2.9 ASCUNDERE FOOTER DOAR PE CHECKOUT (nu modifică footer-ul global) ── */
.checkout-body .site-footer {
    display: none;
}


/* ============================================================================
   ETAPA 3 — FACTURARE + INPUTURI
   ============================================================================
   Toate stilurile rămân SCOPED sub `.checkout-page`. Vizează exclusiv zona de
   facturare (STEP 1) și câmpurile formularului. NU modifică Bootstrap global,
   alte pagini sau alte zone ale checkout-ului.
   ============================================================================ */


/* ── 3.1 SECȚIUNI (Date de contact / Adresa de livrare) ─────────────────── */
.checkout-page .checkout-billing-section {
    display: block;
}

.checkout-page .checkout-section-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--checkout-text);
    margin: 0 0 var(--checkout-space-5);
    letter-spacing: -0.01em;
}

.checkout-page .checkout-section-divider {
    border: 0;
    border-top: var(--checkout-border-width) solid var(--checkout-border);
    margin: var(--checkout-space-7) 0;   /* 28-32px */
}


/* ── 3.2 GRID CÂMPURI ───────────────────────────────────────────────────── */
.checkout-page .checkout-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--checkout-space-4);        /* 16px */
    margin: 0 0 var(--checkout-space-2);
}

/* Bootstrap coloane din interiorul checkout-field-row: folosim gap, anulăm padding-ul default */
.checkout-page .checkout-field-row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.checkout-page .checkout-field {
    margin-bottom: var(--checkout-space-4); /* 16px */
}

.checkout-page .checkout-field-full {
    width: 100%;
}


/* ── 3.3 LABELS ─────────────────────────────────────────────────────────── */
.checkout-page .checkout-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--checkout-text);
    margin-bottom: var(--checkout-space-2);  /* 8px */
    line-height: 1.4;
}

.checkout-page .checkout-field label small {
    font-size: 12px;
    font-weight: 400;
    color: var(--checkout-text-muted);
}


/* ── 3.4 INPUTURI — aplică design system pe .form-control (scoped) ─────── */
.checkout-page .checkout-field .form-control,
.checkout-page .checkout-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 15px;
    background: var(--checkout-surface-2);   /* #101318 — nu alb */
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-md); /* 8px */
    color: var(--checkout-text);
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Valori introduse: text clar, nu gri */
.checkout-page .checkout-field .form-control,
.checkout-page .checkout-input {
    color: var(--checkout-text);
}

/* Placeholder */
.checkout-page .checkout-field .form-control::placeholder,
.checkout-page .checkout-input::placeholder {
    color: var(--checkout-text-muted);
    opacity: 1;
}

/* Hover subtil — doar border ușor mai vizibil */
.checkout-page .checkout-field .form-control:hover,
.checkout-page .checkout-input:hover {
    border-color: #3A4150;
}

/* Focus — verde + shadow discret, fără outline albastru */
.checkout-page .checkout-field .form-control:focus,
.checkout-page .checkout-input:focus {
    outline: none;
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
    background: var(--checkout-surface-2);
}

/* Disabled */
.checkout-page .checkout-field .form-control:disabled,
.checkout-page .checkout-input:disabled {
    background: var(--checkout-surface-2);
    color: var(--checkout-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}


/* ── 3.5 SELECT (Județ / Localitate) — aceeași identitate vizuală ──────── */
.checkout-page .checkout-field select.form-control,
.checkout-page .checkout-select {
    background-color: var(--checkout-surface-2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CA3AF' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 34px;
}

.checkout-page .checkout-field select.form-control option,
.checkout-page .checkout-select option {
    background: var(--checkout-surface);
    color: var(--checkout-text);
}


/* ── 3.6 TEXTAREA (Adresă) ──────────────────────────────────────────────── */
.checkout-page .checkout-field textarea.form-control,
.checkout-page .checkout-textarea {
    height: auto;
    min-height: 100px;
    padding: 14px 15px;
    resize: vertical;
}


/* ── 3.7 VALIDARE (doar vizual — logica rămâne neschimbată) ────────────── */
.checkout-page .checkout-field .form-control.checkout-invalid,
.checkout-page .checkout-input.checkout-invalid {
    border-color: var(--checkout-error);
}
.checkout-page .checkout-field .form-control.checkout-invalid:focus,
.checkout-page .checkout-input.checkout-invalid:focus {
    border-color: var(--checkout-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.checkout-page .checkout-field-error {
    font-size: 12px;
    color: var(--checkout-error);
    margin-top: var(--checkout-space-2);
}

.checkout-page .checkout-field .form-control.checkout-valid,
.checkout-page .checkout-input.checkout-valid {
    border-color: var(--checkout-primary);
}
.checkout-page .checkout-field-valid {
    font-size: 12px;
    color: var(--checkout-primary);
    margin-top: var(--checkout-space-2);
}


/* ── 3.8 AUTOFILL — păstrează tema dark, fără alb/albastru ─────────────── */
.checkout-page .checkout-field .form-control:-webkit-autofill,
.checkout-page .checkout-field .form-control:-webkit-autofill:hover,
.checkout-page .checkout-field .form-control:-webkit-autofill:focus,
.checkout-page .checkout-input:-webkit-autofill,
.checkout-page .checkout-input:-webkit-autofill:hover,
.checkout-page .checkout-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--checkout-text);
    -webkit-box-shadow: 0 0 0 1000px var(--checkout-surface-2) inset;
    box-shadow: 0 0 0 1000px var(--checkout-surface-2) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--checkout-text);
}


/* ── 3.9 CHECKBOX / RADIO — dark + verde la selecție (doar vizual) ─────── */
.checkout-page .checkout-field .custom-checkbox .custom-control-input,
.checkout-page .checkout-field .custom-radio .custom-control-input {
    width: 18px;
    height: 18px;
    accent-color: var(--checkout-primary);
}

.checkout-page .checkout-field .custom-control-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--checkout-text);
    cursor: pointer;
    line-height: 1.5;
}

.checkout-page .checkout-field .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.checkout-page .checkout-field .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}

.checkout-page .checkout-field .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}


/* ── 3.10 REZOLVARE CONFLICT LEGACY: form-control Bootstrap albastru ────── */
/* Bootstrap 4 `.form-control:focus` folosește albastru; aici îl înlocuim scoped. */
.checkout-page .checkout-field .form-control:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}
.checkout-page .checkout-field select.form-control:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}


/* ── 3.11 CHECKBOX „Doresc date facturare diferite" + blocul de facturare ── */
.checkout-page .checkout-billing-diff {
    margin-top: var(--checkout-space-5);
}
.checkout-page .checkout-billing-diff .custom-control-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--checkout-text);
}

/* Blocul de facturare separată — suprascrie stilul inline albastru cu unul dark discret */
.checkout-page .checkout-billing-fields {
    border-left: 3px solid var(--checkout-border);
    padding-left: 15px;
    margin-bottom: 15px;
}
.checkout-page .checkout-billing-fields h6 {
    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--checkout-space-4);
}
.checkout-page .checkout-billing-fields h6 i {
    color: var(--checkout-info);
}

/* ============================================================================
   ETAPA 4 — TRANSPORT + METODE DE LIVRARE
   ============================================================================
   Refacere EXCLUSIV vizuală a pasului Transport (STEP 2): carduri de selecție
   pentru metodele de livrare, ierarhie clară (nume / descriere / preț), badge
   „Gratuit", mesaj informativ și zona de adresă de livrare condiționată.
   Toate stilurile rămân SCOPED sub `.checkout-page`. NU modifică logica
   (id/name/onchange/JS rămân intacte — se păstrează `.custom-control`,
   `.custom-radio`, `.custom-control-input/label` de care depinde JS-ul).
   ============================================================================ */


/* ── 4.1 SECȚIUNE + TITLU TRANSPORT ───────────────────────────────────────── */
.checkout-page .checkout-shipping-section {
    display: block;
}

/* Titlul folosește deja stilul .checkout-section-title (Etapa 3); aici adăugăm
   doar alinierea cu iconița de transport. */
.checkout-page .checkout-shipping-heading {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-2);
}
.checkout-page .checkout-shipping-heading i {
    color: var(--checkout-primary);
}


/* ── 4.2 CARDURI METODE DE LIVRARE ───────────────────────────────────────── */
/* Păstrăm `.custom-control` + `.custom-radio` (JS folosește closest('.custom-radio')
   pentru a marca `.selected-shipping`). Paddingul stânga păstrează spațiul pentru
   indicatorul radio Bootstrap (padding-left: 1.5rem). */
.checkout-page .checkout-shipping-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 18px 16px 1.5rem;
    margin-bottom: var(--checkout-space-3);          /* 12px */
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: var(--checkout-radius-lg);        /* 12px */
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-page .checkout-shipping-option:hover {
    border-color: var(--checkout-primary);
    background: var(--checkout-surface-2);
}

/* Stare SELECTATĂ: `:has()` acoperă selecția inițială (render server), iar
   `.selected-shipping` (adăugat de JS la schimbare) o menține sincronizată. */
.checkout-page .checkout-shipping-option:has(.custom-control-input:checked),
.checkout-page .checkout-shipping-option.selected-shipping {
    border-color: var(--checkout-primary);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02)), var(--checkout-surface-2);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}


/* ── 4.3 LABEL + IERARHIA INFORMAȚIILOR ──────────────────────────────────── */
.checkout-page .checkout-shipping-option .custom-control-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--checkout-space-4);
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--checkout-text);
    cursor: pointer;
}

/* Coloana informațiilor (nume + descriere) */
.checkout-page .checkout-shipping-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
.checkout-page .checkout-shipping-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--checkout-text);
    line-height: 1.35;
}
.checkout-page .checkout-shipping-desc {
    font-size: var(--checkout-font-small);           /* 13px */
    color: var(--checkout-text-secondary);
    line-height: 1.45;
}

/* Coloana prețului (dreapta) */
.checkout-page .checkout-shipping-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    text-align: right;
}
.checkout-page .checkout-shipping-cost {
    font-size: var(--checkout-font-price);           /* 17px */
    font-weight: 700;
    color: var(--checkout-text);
    white-space: nowrap;
}
.checkout-page .checkout-shipping-sub {
    font-size: 12px;
    color: var(--checkout-text-muted);
    white-space: nowrap;
}

/* Badge „Gratuit" */
.checkout-page .checkout-free-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--checkout-primary);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 999px;
    white-space: nowrap;
}


/* ── 4.4 INDICATOR RADIO (dark + verde la selecție) ──────────────────────── */
/* Stare ne-selectată: cerc dark, discret. */
.checkout-page .checkout-shipping-option .custom-control-label::before {
    background-color: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
}
/* Stare selectată: cerc verde. */
.checkout-page .checkout-shipping-option .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}
/* Centrare verticală a indicatorului față de conținutul cardului. */
.checkout-page .checkout-shipping-option .custom-control-label::before,
.checkout-page .checkout-shipping-option .custom-control-label::after {
    top: 50%;
    transform: translateY(-50%);
}
/* Focus vizibil, în tema verde. */
.checkout-page .checkout-shipping-option .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}


/* ── 4.5 MESAJ INFORMATIV ─────────────────────────────────────────────────── */
.checkout-page .checkout-shipping-note {
    display: flex;
    align-items: flex-start;
    gap: var(--checkout-space-2);
    margin-top: var(--checkout-space-4);
    padding: var(--checkout-space-3) var(--checkout-space-4);
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: var(--checkout-radius-md);
    font-size: 13px;
    line-height: 1.5;
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-shipping-note i {
    color: var(--checkout-info);
    margin-top: 1px;
}


/* ── 4.6 ADRESĂ DE LIVRARE DIFERITĂ (opțiune condiționată de transport) ──── */
.checkout-page .checkout-shipping-diff {
    margin-top: var(--checkout-space-5);
}
.checkout-page .checkout-shipping-diff .custom-control-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--checkout-text);
    cursor: pointer;
}
.checkout-page .checkout-shipping-diff .custom-control-label i {
    color: var(--checkout-primary);
}

/* Blocul de date de livrare — card dark, fără bordurile albastre/verzi inline
   din markup-ul vechi. */
.checkout-page .checkout-shipping-fields {
    margin-top: var(--checkout-space-2);
    padding: var(--checkout-space-4);
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-left: 3px solid var(--checkout-primary);
    border-radius: var(--checkout-radius-md);
}
.checkout-page .checkout-shipping-fields-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--checkout-text);
    margin-bottom: var(--checkout-space-4);
}
.checkout-page .checkout-shipping-fields-title i {
    color: var(--checkout-info);
}


/* ── 4.7 RESPONSIVE (doar rafinare vizuală; nu schimbă logica) ───────────── */
@media (max-width: 575.98px) {
    .checkout-page .checkout-shipping-label {
        flex-wrap: wrap;
    }
    .checkout-page .checkout-shipping-price {
        align-items: flex-start;
        width: 100%;
        margin-top: var(--checkout-space-2);
    }
    .checkout-page .checkout-shipping-note {
        font-size: 12px;
    }
}

/* ============================================================================
   ETAPA 5 — PLATĂ + METODE DE PLATĂ
   ============================================================================
   Refacere EXCLUSIV vizuală a pasului Plată (STEP 3): carduri premium de
   selecție pentru metodele de plată, ierarhie clară (iconiță discretă / titlu /
   descriere), radio dark care devine verde la selecție, focus discret.
   Toate stilurile rămân SCOPED sub `.checkout-page`.
   Se păstrează INTACTE clasele funcționale folosite de JS:
   `.payment-method-option`, `data-payment-id`, `.custom-control`,
   `.custom-radio`, `.custom-control-input`, `.custom-control-label`,
   `#paymentMethodsSection`.
   ============================================================================ */


/* ── 5.1 SECȚIUNE + TITLU PLATĂ ──────────────────────────────────────────── */
.checkout-page .checkout-payment-section {
    display: block;
}

/* Titlul folosește .checkout-section-title (Etapa 3); aici doar alinierea cu iconița. */
.checkout-page .checkout-payment-heading {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-2);
}
.checkout-page .checkout-payment-heading i {
    color: var(--checkout-primary);
}


/* ── 5.2 CARDURI METODE DE PLATĂ ─────────────────────────────────────────── */
/* Se păstrează `.custom-control` + `.custom-radio` (necesare pentru indicatorul
   radio Bootstrap). Paddingul stânga 1.5rem păstrează spațiul radio-ului. */
.checkout-page .checkout-payment-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 18px 16px 1.5rem;
    margin-bottom: var(--checkout-space-3);       /* 12px */
    background: var(--checkout-surface);          /* #15181E */
    border: var(--checkout-border-width) solid var(--checkout-border); /* #2A2F38 */
    border-radius: var(--checkout-radius-lg);     /* 12px */
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-page .checkout-payment-option:hover {
    border-color: var(--checkout-primary);
    background: var(--checkout-surface-2);
}

/* Stare SELECTATĂ: derivată pur din radio-ul real (:checked). Nu există clasă
   JS dedicată pentru plată, deci `:has()` este sursa unică și corectă. */
.checkout-page .checkout-payment-option:has(.custom-control-input:checked) {
    border-color: var(--checkout-primary);        /* #22C55E */
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}


/* ── 5.3 LABEL + STRUCTURA INTERNĂ (radio | iconiță | titlu + descriere) ─── */
.checkout-page .checkout-payment-option .custom-control-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    line-height: 1.5;
    color: var(--checkout-text);
    cursor: pointer;
}

.checkout-page .checkout-payment-option-content {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-3);                 /* 12px */
    flex: 1 1 auto;
    min-width: 0;
}

/* Iconița decorativă discretă (din Font Awesome, prin getPaymentIcon) */
.checkout-page .checkout-payment-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--checkout-radius-md);     /* 8px */
    background: var(--checkout-surface-2);
    border: var(--checkout-border-width) solid var(--checkout-border);
    color: var(--checkout-primary);
    font-size: 16px;
}

.checkout-page .checkout-payment-option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.checkout-page .checkout-payment-option-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--checkout-text);
    line-height: 1.35;
}
.checkout-page .checkout-payment-option-description {
    font-size: 13px;
    color: var(--checkout-text-secondary);        /* #9CA3AF */
    line-height: 1.45;
}


/* ── 5.4 RADIO (dark normal / verde selectat, centrat vertical) ──────────── */
.checkout-page .checkout-payment-option .custom-control-label::before {
    background-color: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
}
.checkout-page .checkout-payment-option .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}
.checkout-page .checkout-payment-option .custom-control-label::before,
.checkout-page .checkout-payment-option .custom-control-label::after {
    top: 50%;
    transform: translateY(-50%);
}
.checkout-page .checkout-payment-option .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}


/* ── 5.5 RESPONSIVE — doar prevenire overflow; redesign mobil separat ────── */
@media (max-width: 575.98px) {
    .checkout-page .checkout-payment-option-content {
        flex-wrap: wrap;
    }
    .checkout-page .checkout-payment-option-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .checkout-page .checkout-payment-option-title {
        font-size: 15px;
    }
}

/* ============================================================================
   ETAPA 6 — SUMMARY + VOUCHER + CTA
   ============================================================================
   Refacere vizuală a coloanei drepte (rezumat comandă) și a butoanelor CTA.
   Toate stilurile rămân SCOPED sub `.checkout-page`. Se păstrează ID-urile și
   clasele folosite de JS: `#shippingCostDisplay`, `#totalCostDisplay`,
   `#couponForm`, `#coupon_code`, `#applyCouponBtn`, `#couponMessage`,
   `#couponApplied`, `#appliedCouponCode`, `#removeCouponBtn`,
   `#couponDiscountRow`, `#couponDiscountDisplay`, `#couponLabelDisplay`,
   `#hidden_coupon_code`, `#placeOrderBtn`, `#euplatesc-pay-btn`.
   ============================================================================ */


/* ── 6.1 CARD REZUMAT ─────────────────────────────────────────────────────── */
.checkout-page .checkout-order-summary {
    border-radius: 14px;                 /* față de 12px din Etapa 2 */
    box-shadow: none;
}

/* Header rezumat: titlu + număr produse */
.checkout-page .checkout-summary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--checkout-space-2);
}
.checkout-page .checkout-order-summary .card-header .checkout-summary-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--checkout-text);
    letter-spacing: -0.01em;
}
.checkout-page .checkout-order-summary .card-header .checkout-summary-count {
    font-size: 14px;
    color: var(--checkout-text-secondary);
}

/* Totals body: elimin dublarea de padding (cardul are deja padding 24px) */
.checkout-page .checkout-order-summary .card-body.checkout-totals {
    padding: var(--checkout-space-4) 0 0;
}


/* ── 6.2 PRODUSE ──────────────────────────────────────────────────────────── */
.checkout-page .checkout-order-summary .checkout-item-info {
    min-width: 0;
}
.checkout-page .checkout-order-summary .checkout-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--checkout-text);
    line-height: 1.4;
}
.checkout-page .checkout-order-summary .checkout-item-qty {
    font-size: 13px;
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-order-summary .checkout-items .checkout-item-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--checkout-text);
    white-space: nowrap;
}


/* ── 6.3 VOUCHER / CUPON ──────────────────────────────────────────────────── */
.checkout-page .checkout-coupon-input {
    height: 46px;
    background: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
    border-right: 0;
    border-radius: var(--checkout-radius-md) 0 0 var(--checkout-radius-md);
    color: var(--checkout-text);
    font-size: 14px;
    box-shadow: none;
}
.checkout-page .checkout-coupon-input::placeholder {
    color: var(--checkout-text-muted);
}
.checkout-page .checkout-coupon-input:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
    color: var(--checkout-text);
}
.checkout-page .checkout-coupon-btn {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--checkout-primary);
    border-radius: 0 var(--checkout-radius-md) var(--checkout-radius-md) 0;
    color: var(--checkout-primary);
    font-weight: 600;
    white-space: nowrap;
}
.checkout-page .checkout-coupon-btn:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: var(--checkout-primary);
    color: var(--checkout-primary);
}

/* Mesaj voucher: JS înlocuiește className (`w-100 mt-1 small` + text-success/danger),
   deci folosesc id + !important punctual pentru a bate utilitarul Bootstrap. */
.checkout-page #couponMessage {
    font-size: 13px;
    margin-top: var(--checkout-space-2);
    color: var(--checkout-text-muted);
}
.checkout-page #couponMessage.text-success { color: var(--checkout-primary) !important; }
.checkout-page #couponMessage.text-danger  { color: var(--checkout-error) !important; }

.checkout-page .checkout-coupon-applied {
    font-size: 14px;
    color: var(--checkout-text);
}
.checkout-page .checkout-coupon-applied .text-success { color: var(--checkout-primary); }


/* ── 6.4 SUBTOTAL / TRANSPORT / REDUCERE ──────────────────────────────────── */
.checkout-page .checkout-order-summary .card-body .checkout-total-row {
    font-size: 14px;
    color: var(--checkout-text-secondary);
    margin-bottom: var(--checkout-space-2);
}
.checkout-page .checkout-order-summary .card-body .checkout-total-row strong {
    color: var(--checkout-text);
    font-weight: 600;
}
/* `text-success` Bootstrap folosește !important → avem nevoie de !important
   punctual (scoped) pentru a păstra verdele din design tokens. */
.checkout-page .checkout-order-summary .card-body .checkout-coupon-discount {
    color: var(--checkout-primary) !important;
}
.checkout-page .checkout-order-summary .card-body .checkout-coupon-discount strong {
    color: var(--checkout-primary) !important;
}


/* ── 6.5 DIVIDER + TOTAL ──────────────────────────────────────────────────── */
.checkout-page .checkout-order-summary .checkout-total-divider {
    border: 0;
    border-top: 1px solid var(--checkout-border);
    margin: var(--checkout-space-4) 0;
}
.checkout-page .checkout-order-summary .card-body .checkout-total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--checkout-text);
}
.checkout-page .checkout-order-summary .card-body .checkout-total-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--checkout-primary);
    letter-spacing: -0.01em;
}


/* ── 6.6 CTA — BUTOANE ────────────────────────────────────────────────────── */
/* Butoanele de navigare din pași (Înapoi / Continuă). */
.checkout-page .checkout-step-nav .btn {
    height: 52px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 50px;
}
.checkout-page .checkout-step-nav .btn-primary {
    background: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: #07100A;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.15);
}
.checkout-page .checkout-step-nav .btn-primary:hover,
.checkout-page .checkout-step-nav .btn-primary:focus {
    background: var(--checkout-primary-hover);
    border-color: var(--checkout-primary-hover);
    color: #07100A;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.15);
}
.checkout-page .checkout-step-nav .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--checkout-border);
    color: #D1D5DB;
    box-shadow: none;
}
.checkout-page .checkout-step-nav .btn-outline-secondary:hover {
    border-color: var(--checkout-text-muted);
    background: rgba(255, 255, 255, 0.03);
    color: #D1D5DB;
}

/* CTA final — „Plasează comanda" + „Mergi la plată securizată" (doar styling,
   flow-ul EuPlătesc rămâne intact). */
.checkout-page #placeOrderBtn,
.checkout-page #euplatesc-pay-btn {
    height: 54px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    background: var(--checkout-primary);
    border: none;
    color: #07100A;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.checkout-page #placeOrderBtn:hover,
.checkout-page #placeOrderBtn:focus,
.checkout-page #euplatesc-pay-btn:hover,
.checkout-page #euplatesc-pay-btn:focus {
    background: var(--checkout-primary-hover);
    border-color: transparent;
    color: #07100A;
}


/* ── 6.7 CONFIRMARE WHATSAPP (STEP 4) — premium, non-agresiv ─────────────── */
.checkout-page .checkout-confirm-notice {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 10px;
    padding: 16px;
    color: var(--checkout-text-secondary);
}
.checkout-page .checkout-confirm-notice-title {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--checkout-text);
    margin-bottom: 4px;
}
.checkout-page .checkout-confirm-notice-title i {
    color: var(--checkout-info);
}
.checkout-page .checkout-confirm-notice-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--checkout-text-secondary);
}


/* ── 6.8 RESPONSIVE — fără regresii; polish mobil separat ────────────────── */
@media (max-width: 991.98px) {
    .checkout-page .checkout-summary-col {
        position: static;               /* sticky doar pe desktop */
    }
    .checkout-page .checkout-order-summary {
        margin-top: var(--checkout-space-6);
    }
}
@media (max-width: 575.98px) {
    .checkout-page .checkout-order-summary {
        padding: 16px;
    }
    .checkout-page .checkout-order-summary .card-header {
        padding: var(--checkout-space-3) 0;
    }
    .checkout-page .checkout-total-amount {
        font-size: 22px;
    }
}

/* ============================================================================
   ETAPA 7 — MOBILE + RESPONSIVE + POLISH FINAL
   ============================================================================
   Polish responsive: desktopul rămâne sursa de adevăr (toate regulile de mai jos
   sunt IZOLATE în media queries, nu afectează desktopul). Breakpoint-uri minime:
   991px / 767px / 575px / 400px. Fără JS, fără PHP, fără business logic.
   Layout single-column + summary static la ≤991px există deja (Etapa 1/6) —
   NU se duplică.
   ============================================================================ */


/* ── 7.1 TABLET (≤ 991px) ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .checkout-page .checkout-title { font-size: 30px; }
    .checkout-page .checkout-header-inner { padding: 10px 20px; }
    .checkout-page .checkout-layout { gap: var(--checkout-space-6); }
}


/* ── 7.2 MOBILE MARE / TABLET MIC (≤ 767px) ──────────────────────────────── */
@media (max-width: 767.98px) {
    /* Siguranță anti-overflow (scoped pe checkout). */
    .checkout-page { overflow-x: hidden; }
    .checkout-page .checkout-layout,
    .checkout-page .checkout-form-col,
    .checkout-page .checkout-summary-col,
    .checkout-page .checkout-form-card,
    .checkout-page .checkout-order-summary { min-width: 0; }

    /* Header minimalist, fără overflow */
    .checkout-page .checkout-header-inner {
        flex-wrap: wrap;
        padding: 10px 16px;
    }
    .checkout-page .checkout-header-logo-img { max-height: 34px; }
    .checkout-page .checkout-header-right { gap: var(--checkout-space-2); }

    .checkout-page .checkout-title {
        font-size: 28px;
        margin-bottom: var(--checkout-space-5);
    }

    /* Stepper compact, fără overflow */
    .checkout-page .checkout-steps { gap: var(--checkout-space-1); }
    .checkout-page .checkout-step-line { min-width: 14px; }
    .checkout-page .checkout-step-label { font-size: 11px; }

    /* Form: rânduri mai strânse */
    .checkout-page .checkout-field-row { gap: var(--checkout-space-3); }

    /* Fix mobil: regula inline din template forțează `padding:14px 12px !important`
       pe .custom-radio, ceea ce taie indicatorul radio (::before la -1.5rem).
       Restaurez padding-left-ul doar pe cardurile checkout (specificitate + !important). */
    .checkout-page .checkout-step .checkout-shipping-option,
    .checkout-page .checkout-step .checkout-payment-option {
        padding-left: 1.5rem !important;
    }
}


/* ── 7.3 MOBILE (≤ 575px) ────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .checkout-page .checkout-title { font-size: 26px; }

    .checkout-page .checkout-secure { font-size: 12px; }
    .checkout-page .checkout-help { font-size: 12px; }
    .checkout-page .checkout-header-logo-img { max-height: 30px; }

    /* Stepper: cercuri ~28px, linii flexibile, text 10px */
    .checkout-page .checkout-steps { gap: 2px; }
    .checkout-page .checkout-step-circle { width: 28px; height: 28px; font-size: 12px; }
    .checkout-page .checkout-step-line { min-width: 8px; }
    .checkout-page .checkout-step-label { font-size: 10px; }

    /* CTA: Înapoi / Continuă → coloană full-width (ordinea DOM păstrată) */
    .checkout-page .checkout-step-nav {
        flex-direction: column;
        gap: var(--checkout-space-3);
        justify-content: flex-start !important;   /* bate .justify-content-between !important */
    }
    .checkout-page .checkout-step-nav .btn { width: 100%; }

    /* Summary: imagine fluidă, total lizibil, fără tăiere */
    .checkout-page .checkout-order-summary .checkout-item-img { width: 56px; height: 56px; }
    .checkout-page .checkout-order-summary .card-body .checkout-total-amount { font-size: 24px; }

    /* Voucher: input flex, buton fix — fără overflow */
    .checkout-page .checkout-coupon-input { min-width: 0; }
    .checkout-page .checkout-coupon-btn { flex-shrink: 0; }
}


/* ── 7.4 ECRANE MICI (≤ 400px — 360/375/390px) ───────────────────────────── */
@media (max-width: 400px) {
    .checkout-page .checkout-title { font-size: 24px; }

    .checkout-page .checkout-header-inner { gap: var(--checkout-space-2); }
    .checkout-page .checkout-header-right { flex-wrap: wrap; justify-content: flex-end; }
    .checkout-page .checkout-help { white-space: normal; text-align: right; }

    .checkout-page .checkout-order-summary { padding: 14px; }
    .checkout-page .checkout-order-summary .checkout-item-img { width: 52px; height: 52px; }
    .checkout-page .checkout-order-summary .card-body .checkout-total-amount { font-size: 22px; }
}

/* ============================================================================
   ETAPA 9 — DESKTOP POLISH + PROPORȚII PREMIUM
   ============================================================================
   Corectare proporții/iERARHIE/tipografie/spațiere pe DESKTOP (≥992px).
   - Toate regulile sunt în media query `min-width:992px` → NU afectează
     tablet/mobil (Etapa 7 rămâne intactă) și nici alte pagini.
   - Zero modificări de logică / markup / JS / PHP. Doar CSS scoped.
   - Fără transform/zoom. Fără !important (specificity corectă + cascade).
   ============================================================================ */

@media (min-width: 992px) {

    /* ── Container: mai lat, aerisit, centrat ── */
    .checkout-page .checkout-container {
        max-width: 1300px;              /* 1280–1320px */
        padding: 32px 32px;             /* margini elegante la 1366px */
    }

    /* ── Header: aerisit, dar minimalist ── */
    .checkout-page .checkout-header-inner {
        padding: 16px 32px;
    }

    /* ── Titlu: element vizual principal ── */
    .checkout-page .checkout-title {
        font-size: 36px;                /* 32–36px */
        margin: 0 0 32px;
    }

    /* ── Stepper: vizibil, citibil imediat ── */
    .checkout-page .checkout-steps { gap: 12px; }
    .checkout-page .checkout-step-item { gap: 10px; }
    .checkout-page .checkout-step-circle {
        width: 34px;                    /* 32–36px */
        height: 34px;
        font-size: 14px;
    }
    .checkout-page .checkout-step-label { font-size: 13px; }
    .checkout-page .checkout-step-line { min-width: 32px; }

    /* ── Layout: două coloane echilibrate (form ~67% / summary ~33%) ── */
    .checkout-page .checkout-layout { gap: 32px; }
    .checkout-page .checkout-form-col {
        flex: 0 0 67%;
        max-width: 67%;
    }
    .checkout-page .checkout-summary-col {
        flex: 0 0 calc(33% - 32px);
        max-width: calc(33% - 32px);
    }

    /* ── Card formular: mai mult respiro ── */
    .checkout-page .checkout-form-card .card-body { padding: 32px; }

    /* ── Secțiuni: ierarhie + spațiere ── */
    .checkout-page .checkout-section-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .checkout-page .checkout-section-divider { margin: 40px 0; }

    /* ── Inputuri & labels: lizibile, fără gigantism ── */
    .checkout-page .checkout-field .form-control,
    .checkout-page .checkout-input { font-size: 16px; }
    .checkout-page .checkout-field label { font-size: 14px; }
    .checkout-page .checkout-field-row { gap: 20px; }
    .checkout-page .checkout-field { margin-bottom: 20px; }

    /* ── CTA navigare: dominant dar curat ── */
    .checkout-page .checkout-step-nav .btn {
        height: 54px;
        font-size: 16px;
        line-height: 52px;
    }

    /* ── Summary: mai lat și lizibil ── */
    .checkout-page .checkout-order-summary { padding: 28px; }
    .checkout-page .checkout-order-summary .card-header .checkout-summary-title { font-size: 20px; }
    .checkout-page .checkout-order-summary .checkout-item-img { width: 68px; height: 68px; }
    .checkout-page .checkout-order-summary .checkout-item-name { font-size: 15px; }
    .checkout-page .checkout-order-summary .checkout-item-qty { font-size: 13px; }
    .checkout-page .checkout-order-summary .checkout-items .checkout-item-price { font-size: 16px; }
    .checkout-page .checkout-order-summary .card-body .checkout-total-amount { font-size: 28px; }

    /* ── CTA final: Plasează comanda / Mergi la plată ── */
    .checkout-page #placeOrderBtn,
    .checkout-page #euplatesc-pay-btn {
        height: 56px;
        font-size: 16px;
    }
}

/* ============================================================================
   ETAPA 10 — FORM GRID + FINAL VISUAL POLISH (DESKTOP)
   ============================================================================
   Doar optimizare vizuală DESKTOP (min-width:992px). Fără logică/markup
   funcțional/JS/PHP. Se păstrează paleta și token-urile existente.
   ============================================================================ */

@media (min-width: 992px) {

    /* ── 10.1–10.3 GRID FORMULAR — corectare wrap ─────────────────────────────
       `.checkout-field-row` folosea `gap` flex împreună cu coloane Bootstrap
       (`flex-basis:%`) → 50%+50%+gap depășeau 100% și câmpurile se rupeau pe
       rânduri (înguste + spațiu gol în dreapta). Restaurăm gutters Bootstrap
       (padding pe coloane) și anulăm gap-ul, doar pe desktop. */
    .checkout-page .checkout-field-row {
        gap: 0;
        margin-left: -10px;      /* aliniere edge-to-edge cu câmpurile full-width */
        margin-right: -10px;
    }
    .checkout-page .checkout-field-row > [class*="col-"] {
        padding-left: 10px;      /* gutter ≈20px între coloane */
        padding-right: 10px;
    }

    /* Accent verde pentru blocul „facturare diferită" (consistent cu livrarea).
       Borderul inline albastru a fost eliminat din markup; aici doar accentul. */
    .checkout-page #billingFields { border-left: 3px solid var(--checkout-primary); }

    /* ── 10.8 STEP 4 — confirmare ca info-card dark, discret ─────────────── */
    .checkout-page #noncard-confirm-container .alert-info {
        background: var(--checkout-surface);
        border: var(--checkout-border-width) solid var(--checkout-border);
        border-left: 3px solid var(--checkout-info);
        border-radius: var(--checkout-radius-lg);
        color: var(--checkout-text-secondary);
    }
    .checkout-page #noncard-confirm-container .alert-info strong { color: var(--checkout-text); }
    .checkout-page #noncard-confirm-container .alert-info hr { border-top-color: var(--checkout-border); }
    /* Iconițele Bootstrap folosesc utilitare cu !important → avem nevoie de
       !important punctual (scoped) pentru a le recolorii în tema dark. */
    .checkout-page #noncard-confirm-container .alert-info .text-primary   { color: var(--checkout-info) !important; }
    .checkout-page #noncard-confirm-container .alert-info .text-success   { color: var(--checkout-primary) !important; }
    .checkout-page #noncard-confirm-container .alert-info .text-secondary { color: var(--checkout-text-muted) !important; }
    .checkout-page #noncard-confirm-container .alert-info .text-muted     { color: var(--checkout-text-muted) !important; }
    .checkout-page #noncard-confirm-container .alert-info .text-info      { color: var(--checkout-info) !important; }
}

/* ============================================================================
   ETAPA 11 — CART / COȘ DE CUMPĂRĂTURI (aceeași familie vizuală ca checkout)
   ============================================================================
   Toate regulile sunt SCOPED sub `.cart-page` (clasa e adăugată pe <body> DOAR
   pe /cart, în header.php). Aceeași paletă/tipografie/radius/spațiere ca
   checkout-ul. Zero modificări de logică/JS/PHP/DB.
   Se PĂSTREAZĂ clasele funcționale de care depinde JS-ul din theme.js:
   `.cart-item-row`(+data-cart-item-id), `.qty-group`, `.qty-btn`(+data-action),
   `.qty-input`(+data-cart-item-id/data-price), `.cart-remove`(+data-cart-item-id),
   `.cart-item-total`, `#clearCartBtn`, `#cartSubtotal`, `#cartTotal`.
   ============================================================================ */


/* ── 11.1 PAGINĂ + CONTAINER ─────────────────────────────────────────────── */
body.cart-page,
.cart-page {
    background: var(--checkout-bg);
    color: var(--checkout-text);
    font-size: var(--checkout-font-body);
    line-height: var(--checkout-line-height);
}
.cart-page .cart-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}


/* ── 11.2 TITLU ──────────────────────────────────────────────────────────── */
.cart-page .cart-title {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-3);
    font-size: 36px;
    font-weight: 700;
    color: var(--checkout-text);
    letter-spacing: -0.01em;
    margin: 0 0 var(--checkout-space-7);
}
.cart-page .cart-title i {
    color: var(--checkout-primary);
}


/* ── 11.3 LAYOUT — două coloane ──────────────────────────────────────────── */
.cart-page .cart-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.cart-page .cart-items-col {
    flex: 0 0 68%;
    max-width: 68%;
    min-width: 0;
}
.cart-page .cart-summary-col {
    flex: 0 0 calc(32% - 32px);
    max-width: calc(32% - 32px);
    min-width: 0;
    position: sticky;
    top: 24px;
}


/* ── 11.4 CARD PRODUS ────────────────────────────────────────────────────── */
.cart-page .cart-item {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: 14px;
    box-shadow: none;
}
.cart-page .cart-item .card-body {
    padding: 20px 24px;
}
.cart-page .cart-item-grid {
    display: flex;
    align-items: center;
    gap: var(--checkout-space-5);          /* 20px */
}

/* Imagine */
.cart-page .cart-item-thumb {
    flex: 0 0 92px;
}
.cart-page .cart-item-thumb img,
.cart-page .cart-item-img-fluid {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;                   /* fundal alb unde produsul are nevoie */
}
.cart-page .cart-item-img-placeholder {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
    border-radius: 10px;
    color: var(--checkout-text-muted);
    font-size: 22px;
}

/* Nume + SKU */
.cart-page .cart-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.cart-page .cart-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--checkout-text);
    line-height: 1.35;
}
.cart-page .cart-item-name a {
    color: var(--checkout-text);
    text-decoration: none;
}
.cart-page .cart-item-name a:hover { color: var(--checkout-primary); }
.cart-page .cart-item-sku {
    font-size: 12px;
    color: var(--checkout-text-muted);
}

/* Cantitate */
.cart-page .cart-item-qty { flex: 0 0 auto; }
.cart-page .qty-group { flex-wrap: nowrap; }
.cart-page .qty-btn {
    width: 42px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
    border-radius: 0;
    color: var(--checkout-text);
    font-size: 18px;
    line-height: 1;
}
.cart-page .qty-group .input-group-prepend .qty-btn { border-radius: 8px 0 0 8px; }
.cart-page .qty-group .input-group-append .qty-btn { border-radius: 0 8px 8px 0; }
.cart-page .qty-btn:hover {
    border-color: var(--checkout-primary);
    color: var(--checkout-primary);
}
.cart-page .qty-input {
    height: 44px;
    width: 56px;
    background: var(--checkout-surface-2);
    border: 1px solid var(--checkout-border);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.cart-page .qty-input::-webkit-outer-spin-button,
.cart-page .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-page .qty-input:focus {
    border-color: var(--checkout-primary);
    box-shadow: none;
}

/* Preț + Total */
.cart-page .cart-item-prices {
    flex: 0 0 auto;
    min-width: 96px;
}
.cart-page .cart-item-price {
    font-size: 13px;
    color: var(--checkout-text-muted);
}
.cart-page .cart-item-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--checkout-text);
}

/* Ștergere */
.cart-page .cart-item-remove { flex: 0 0 auto; }
.cart-page .cart-remove {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--checkout-border);
    border-radius: 8px;
    color: var(--checkout-error);
}
.cart-page .cart-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--checkout-error);
    color: var(--checkout-error);
}


/* ── 11.5 ACȚIUNI (Continuă cumpărăturile / Golește coșul) ──────────────── */
.cart-page .cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--checkout-space-4);
    flex-wrap: wrap;
    margin-top: var(--checkout-space-6);
}
.cart-page .cart-continue-btn {
    height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--checkout-border);
    border-radius: 10px;
    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 600;
}
.cart-page .cart-continue-btn:hover {
    border-color: var(--checkout-text-muted);
    background: rgba(255, 255, 255, 0.03);
    color: var(--checkout-text);
}
.cart-page .cart-clear-btn {
    height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--checkout-border);
    border-radius: 10px;
    color: var(--checkout-error);
    font-size: 15px;
    font-weight: 600;
}
.cart-page .cart-clear-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: var(--checkout-error);
    color: var(--checkout-error);
}


/* ── 11.6 SUMMARY ────────────────────────────────────────────────────────── */
.cart-page .cart-summary-card {
    background: var(--checkout-surface);
    border: var(--checkout-border-width) solid var(--checkout-border);
    border-radius: 14px;
    box-shadow: none;
}
.cart-page .cart-summary-header {
    background: transparent;
    border-bottom: 1px solid var(--checkout-border);
    padding: var(--checkout-space-5) var(--checkout-space-6);
}
.cart-page .cart-summary-header h5 {
    font-size: 19px;
    font-weight: 700;
    color: var(--checkout-text);
}
.cart-page .cart-summary-body { padding: var(--checkout-space-5) var(--checkout-space-6); }
.cart-page .cart-summary-row {
    font-size: 14px;
    color: var(--checkout-text-secondary);
}
.cart-page .cart-summary-row strong {
    color: var(--checkout-text);
    font-weight: 600;
}
.cart-page .cart-shipping-note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--checkout-text-secondary);
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: var(--checkout-space-3);
}
.cart-page .cart-shipping-note--free {
    color: var(--checkout-primary);
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}
.cart-page .cart-summary-divider {
    border: 0;
    border-top: 1px solid var(--checkout-border);
    margin: var(--checkout-space-4) 0;
}
.cart-page .cart-summary-total { align-items: center; }
.cart-page .cart-summary-total .h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--checkout-text);
}
.cart-page .cart-total-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--checkout-primary);
    letter-spacing: -0.01em;
}

/* CTA principal */
.cart-page .cart-checkout-btn {
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--checkout-primary);
    border: none;
    border-radius: 10px;
    color: #07100A;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.15);
}
.cart-page .cart-checkout-btn:hover {
    background: var(--checkout-primary-hover);
    color: #07100A;
}


/* ── 11.7 COȘ GOL ────────────────────────────────────────────────────────── */
.cart-page .cart-empty {
    max-width: 480px;
    margin: 40px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--checkout-surface);
    border: 1px solid var(--checkout-border);
    border-radius: 14px;
}
.cart-page .cart-empty-icon {
    font-size: 44px;
    color: var(--checkout-text-muted);
    margin-bottom: var(--checkout-space-4);
}
.cart-page .cart-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--checkout-text);
    margin-bottom: var(--checkout-space-2);
}
.cart-page .cart-empty-text {
    font-size: 14px;
    color: var(--checkout-text-secondary);
    margin-bottom: var(--checkout-space-6);
}
.cart-page .cart-empty-btn {
    height: 50px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--checkout-primary);
    border: none;
    border-radius: 10px;
    color: #07100A;
    font-weight: 700;
}


/* ── 11.8 RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .cart-page .cart-layout {
        flex-direction: column;
    }
    .cart-page .cart-items-col,
    .cart-page .cart-summary-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .cart-page .cart-summary-col { position: static; }
    .cart-page .cart-title { font-size: 30px; }
    .cart-page .cart-container { padding: 24px 20px; }
}

@media (max-width: 767.98px) {
    .cart-page .cart-title { font-size: 28px; }
    .cart-page .cart-item-grid {
        flex-wrap: wrap;
        gap: var(--checkout-space-4);
    }
    .cart-page .cart-item-thumb { flex-basis: 72px; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 72px; height: 72px; }
    .cart-page .qty-btn,
    .cart-page .qty-input,
    .cart-page .cart-remove,
    .cart-page #clearCartBtn { min-height: 44px; }
    .cart-page .cart-actions { flex-direction: column; }
    .cart-page .cart-continue-btn,
    .cart-page .cart-clear-btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .cart-page .cart-title { font-size: 26px; }
    .cart-page .cart-container { padding: 16px; }
    .cart-page .cart-item .card-body { padding: 16px; }
    .cart-page .cart-item-grid { gap: 14px; }
    .cart-page .cart-item-prices { min-width: 80px; }
    .cart-page .cart-summary-header,
    .cart-page .cart-summary-body { padding: 16px; }
}

@media (max-width: 400px) {
    .cart-page .cart-item-thumb { flex-basis: 60px; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 60px; height: 60px; }
    .cart-page .qty-input { width: 48px; }
}

/* ============================================================================
   ETAPA 12 — RESPONSIVE QA + VISUAL POLISH (CART + CHECKOUT)
   ============================================================================
   QA + polish, NU redesign. Toate regulile SCOPED sub `.cart-page`/`.checkout-page`.
   CART: corectare scală/proporții desktop — folosește lățimea disponibilă,
   card produs + summary + CTA mai mari, fără a umple forțat ecranul.
   CHECKOUT: tablet 768–991 — extind fix-ul de grid (Etapa 10 era doar ≥992px),
   astfel câmpurile 50%/33% nu se mai rup pe rânduri. Mobile (≤767) rămâne
   single-column, neschimbat.
   ============================================================================ */


/* ── 12.1 CART — scală desktop ───────────────────────────────────────────── */
@media (min-width: 992px) {
    .cart-page .cart-container { max-width: 1300px; }

    .cart-page .cart-items-col { flex: 0 0 65%; max-width: 65%; }
    .cart-page .cart-summary-col { flex: 0 0 calc(35% - 32px); max-width: calc(35% - 32px); }

    .cart-page .cart-item .card-body { padding: 24px 28px; }
    .cart-page .cart-item-grid { gap: 24px; }
    .cart-page .cart-item-thumb { flex-basis: 96px; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 96px; height: 96px; }
    .cart-page .cart-item-name { font-size: 17px; }
    .cart-page .cart-item-sku { font-size: 13px; }
    .cart-page .qty-btn { width: 44px; height: 46px; }
    .cart-page .qty-input { height: 46px; }
    .cart-page .cart-item-prices { min-width: 104px; }
    .cart-page .cart-item-total { font-size: 17px; }
    .cart-page .cart-remove { width: 42px; height: 42px; }

    .cart-page .cart-summary-header,
    .cart-page .cart-summary-body { padding: 24px 28px; }
    .cart-page .cart-summary-header h5 { font-size: 20px; }
    .cart-page .cart-total-amount { font-size: 28px; }

    .cart-page .cart-checkout-btn { height: 56px; }
    .cart-page .cart-continue-btn,
    .cart-page .cart-clear-btn { height: 52px; }
}

/* ── 12.2 CART — hover premium (înlocuiește hover-ul albastru din styles.css) ── */
.cart-page .cart-item:hover { border-color: var(--checkout-primary); }


/* ── 12.3 CHECKOUT — grid formular la tablet (768–991) ──────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .checkout-page .checkout-field-row {
        gap: 0;
        margin-left: -10px;
        margin-right: -10px;
    }
    .checkout-page .checkout-field-row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================================================
   ETAPA 14 — MOBILE OPTIMIZATION CART + CHECKOUT (FINAL)
   ============================================================================
   MOBILE = reorganizare + claritate + touch usability (NU „micșorăm desktop").
   Toate regulile SCOPED sub `.cart-page`/`.checkout-page`, în media queries
   mobile/tablet (≤767 / ≤575 / ≤400). Desktop ≥992 rămâne neschimbat.
   Se PĂSTREAZĂ fixul Etapa 13 (<strong> în cardurile transport/plată).
   Fără JS/PHP/DB/payment flow. Fără !important (specificitate + cascade).
   ============================================================================ */


/* ── 14.1 CART — card produs mobil ──────────────────────────────────────────
   Structură:
     rând 1: [imagine] [nume produs]
     sub nume: SKU
     rând 2: [−] [cantitate] [+]      [preț] [ștergere]            */
@media (max-width: 575.98px) {
    .cart-page .cart-item-grid {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 14px;
    }
    .cart-page .cart-item-thumb { order: 1; flex: 0 0 64px; }
    .cart-page .cart-item-main  { order: 2; flex: 1 1 0; min-width: 0; }
    .cart-page .cart-item-qty   { order: 3; flex: 0 0 auto; }
    .cart-page .cart-item-prices{ order: 4; flex: 0 0 auto; margin-left: auto; }
    .cart-page .cart-item-remove{ order: 5; flex: 0 0 auto; }
}
@media (max-width: 400px) {
    .cart-page .cart-item-thumb { flex-basis: 56px; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 56px; height: 56px; }
}


/* ── 14.2 TOUCH TARGETS MOBILE — minimum ~44px (cart + checkout) ─────────── */
@media (max-width: 767.98px) {
    .cart-page .qty-btn,
    .cart-page .qty-input,
    .cart-page .cart-remove,
    .cart-page #clearCartBtn,
    .cart-page .cart-continue-btn,
    .cart-page .cart-clear-btn,
    .cart-page .cart-checkout-btn,
    .checkout-page .checkout-step-nav .btn,
    .checkout-page #placeOrderBtn,
    .checkout-page #euplatesc-pay-btn,
    .checkout-page .checkout-coupon-btn,
    .checkout-page .checkout-coupon-input { min-height: 44px; }
}


/* ── 14.3 CHECKOUT — stepper foarte mic (360/375/390) ────────────────────── */
@media (max-width: 400px) {
    .checkout-page .checkout-steps { gap: 2px; }
    .checkout-page .checkout-step-circle { width: 26px; height: 26px; font-size: 11px; }
    .checkout-page .checkout-step-line { min-width: 6px; }
    .checkout-page .checkout-step-label { font-size: 9px; }
}


/* ── 14.4 CHECKOUT — form single-column garantat + ritm vertical (≤767) ──── */
@media (max-width: 767.98px) {
    .checkout-page .checkout-field-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .checkout-page .checkout-field { margin-bottom: var(--checkout-space-4); }
}


/* ── 14.5 CHECKOUT — transport/plată pe mobil (preț nu se suprapune) ─────── */
@media (max-width: 575.98px) {
    .checkout-page .checkout-shipping-label,
    .checkout-page .checkout-payment-label {
        flex-wrap: wrap;
    }
    .checkout-page .checkout-shipping-info,
    .checkout-page .checkout-payment-option-content { flex: 1 1 100%; }
    .checkout-page .checkout-shipping-price,
    .checkout-page .checkout-payment-option-text { flex: 1 1 100%; }
}


/* ── 14.6 SUMMARY CHECKOUT mobil — full width, static (siguranță) ────────── */
@media (max-width: 991.98px) {
    .checkout-page .checkout-summary-col,
    .cart-page .cart-summary-col { position: static; }
}

/* ============================================================================
   ETAPA 17 — FIX REAL MOBILE UI (CART + CHECKOUT)
   ============================================================================
   ROOT CAUSE: `.checkout-layout` și `.cart-layout` au `align-items: flex-start`
   (setat pentru desktop, 2 coloane). La ≤991 devin `flex-direction: column`,
   DAR `align-items: flex-start` PERSISTĂ → coloanele NU se întind pe toată
   lățimea → conținutul / numele produsului ajunge într-o coloană îngustă,
   cu wrap caracter-cu-caracter.
   Fix: `align-items: stretch` + `width:100%` pe coloane, la ≤991.
   ============================================================================ */

/* ── 17.1 LAYOUT — coloane full-width pe mobil/tablet (ROOT CAUSE) ───────── */
@media (max-width: 991.98px) {
    .checkout-page .checkout-layout,
    .cart-page .cart-layout {
        align-items: stretch;
    }
    .checkout-page .checkout-form-col,
    .checkout-page .checkout-summary-col,
    .cart-page .cart-items-col,
    .cart-page .cart-summary-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ── 17.2 CONTAINER + COLOANE CHECKOUT mobil ─────────────────────────────── */
@media (max-width: 767.98px) {
    .checkout-page .checkout-container {
        width: 100%;
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .checkout-page .checkout-form-col,
    .checkout-page .checkout-summary-col {
        width: 100%;
        min-width: 0;
    }
}

/* ── 17.3 SUMMARY CHECKOUT mobil — card full-width, text wrap normal ─────── */
@media (max-width: 767.98px) {
    .checkout-page .checkout-summary-col {
        position: static;
        margin-top: 24px;
    }
    .checkout-page .checkout-summary-header {
        flex-wrap: wrap;
        align-items: baseline;
    }
    .checkout-page .checkout-order-summary .checkout-item {
        flex-wrap: wrap;
        gap: 10px;
    }
    .checkout-page .checkout-order-summary .checkout-item-info {
        flex: 1 1 0;
        min-width: 0;
    }
    .checkout-page .checkout-order-summary .checkout-item-price {
        margin-left: auto;
    }
    .checkout-page .checkout-order-summary .checkout-item-name,
    .checkout-page .checkout-order-summary .checkout-item-price,
    .checkout-page .checkout-summary-title,
    .checkout-page .checkout-summary-count {
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }
}

/* ── 17.4 CART — card produs mobil: rând1 [img][nume], rând2 SKU, rând3 controale ── */
@media (max-width: 767.98px) {
    .cart-page .cart-item-grid {
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 14px;
        row-gap: 14px;
    }
    .cart-page .cart-item-thumb { flex: 0 0 76px; order: 1; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 76px; height: 76px; }
    .cart-page .cart-item-main { flex: 1 1 0; min-width: 0; order: 2; }
    .cart-page .cart-item-name {
        font-size: 16px;
        line-height: 1.35;
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }
    .cart-page .cart-item-sku {
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }
    .cart-page .cart-item-qty { flex: 0 0 auto; order: 3; margin-right: auto; }
    .cart-page .cart-item-prices { flex: 0 0 auto; order: 4; margin-left: 0; }
    .cart-page .cart-item-remove { flex: 0 0 auto; order: 5; }
}

/* ── 17.5 CHECKOUT STEP 1 — fiecare câmp 100% (siguranță, single-column) ─── */
@media (max-width: 767.98px) {
    .checkout-page .checkout-field-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================================================
   ETAPA 17.1 — FIX FINAL CART MOBILE + HEADER LOGO
   ============================================================================
   Cart: controalele (cantitate/preț/ștergere) sunt izolate într-un sub-rând
   propriu `.cart-item-controls` (markup cart.php) → NU mai pot comprima zona
   numelui. Numele: min-width:0, width:100%, wrap normal (fără caracter-cu-caracter).
   Header: logo-ul (img din .navbar-brand, inline max-height:34px) mărit pe mobil
   DOAR pe cart (.cart-page). `!important` necesar pentru a bate stilul inline.
   ============================================================================ */

/* ── 17.1.1 CONTROALE CART — sub-rând flex (desktop + mobil) ─────────────── */
.cart-page .cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cart-page .cart-item-qty { margin-right: auto; }   /* qty stânga, preț+ștergere dreapta */
.cart-page .cart-item-prices { margin-left: 0; }

/* ── 17.1.2 CART MOBILE — nume full width, wrap normal; controale pe rând separat ── */
@media (max-width: 767.98px) {
    .cart-page .cart-item-thumb { flex: 0 0 76px; order: 1; }
    .cart-page .cart-item-thumb img,
    .cart-page .cart-item-img-fluid,
    .cart-page .cart-item-img-placeholder { width: 76px; height: 76px; }
    .cart-page .cart-item-main { flex: 1 1 0; min-width: 0; width: auto; max-width: none; order: 2; }
    .cart-page .cart-item-controls {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        margin-top: 6px;
    }
    .cart-page .cart-item-name,
    .cart-page .cart-item-name a {
        width: 100%;
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        font-size: 16px;
        line-height: 1.35;
    }
    .cart-page .cart-item-sku {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* ── 17.1.3 HEADER LOGO MOBIL (doar pe cart; navbar ascuns pe checkout) ──── */
@media (max-width: 767.98px) {
    .cart-page .navbar-brand img {
        max-height: 52px !important;   /* override inline max-height:34px (necesar) */
        width: auto;
    }
}

/* ============================================================================
   ETAPA 18 — FIX FINAL HEADER + CART MOBILE
   ============================================================================
   CART MOBILE: `.cart-item-grid` devine GRID cu arii explicite →
   rând 1 = [imagine][nume + SKU], rând 2 = controale (cantitate/preț/ștergere).
   Astfel cantitatea NU mai poate apărea în stânga imaginii — ordine deterministă.
   Header/logo: fix-urile globale sunt în styles.css / mobile.css / header.php.
   ============================================================================ */

/* ── 18.1 CART MOBILE — grid explicit (ordine garantată) ─────────────────── */
@media (max-width: 767.98px) {
    .cart-page .cart-item-grid {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-areas:
            "thumb main"
            "controls controls";
        column-gap: 14px;
        row-gap: 12px;
        align-items: start;
    }
    .cart-page .cart-item-thumb { grid-area: thumb; }
    .cart-page .cart-item-main { grid-area: main; min-width: 0; }
    .cart-page .cart-item-controls { grid-area: controls; width: 100%; margin-top: 0; }
    .cart-page .cart-item-name,
    .cart-page .cart-item-name a {
        width: 100%;
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        font-size: 16px;
        line-height: 1.35;
    }
    .cart-page .cart-item-sku {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* ============================================================================
   ETAPA 13 (30.08.2026) — VERDE -> GALBEN. Armonizare cu storefront-ul.
   ============================================================================ */
:root { --co-brand: #FFD200; --co-brand-h: #E6BD00; --co-ink: #0D0D0D; }

.cart-page .btn-success,
.checkout-page .btn-success,
.cart-page .cart-checkout-btn,
.checkout-page .checkout-place-order,
.checkout-page button[type="submit"].btn-success {
    background-color: var(--co-brand) !important;
    border-color: var(--co-brand) !important;
    color: var(--co-ink) !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 22px rgba(255, 210, 0, 0.22) !important;
}
.cart-page .btn-success:hover,
.checkout-page .btn-success:hover,
.cart-page .cart-checkout-btn:hover {
    background-color: var(--co-brand-h) !important;
    border-color: var(--co-brand-h) !important;
    color: var(--co-ink) !important;
}
.cart-page .btn-success i,
.checkout-page .btn-success i { color: var(--co-ink) !important; }

.checkout-page .checkout-nav-next,
.checkout-page .btn-checkout-next,
.checkout-page .checkout-continue,
.checkout-page form .btn-primary {
    background: var(--co-brand) !important;
    border-color: var(--co-brand) !important;
    color: var(--co-ink) !important;
    font-weight: 800 !important;
}

.cart-page .text-success,
.checkout-page .text-success,
.cart-page .text-green,
.checkout-page .text-green { color: var(--co-brand) !important; }

.cart-page .badge-success,
.checkout-page .badge-success {
    background-color: var(--co-brand) !important;
    color: var(--co-ink) !important;
}
.cart-page .border-success,
.checkout-page .border-success,
.checkout-page .border-primary { border-color: var(--co-brand) !important; }

.checkout-page .checkout-step.completed .checkout-step-circle,
.checkout-page .checkout-step-item.completed .checkout-step-circle,
.checkout-page .checkout-step.active .checkout-step-circle,
.checkout-page .checkout-step-line.completed,
.checkout-page .checkout-step-item.completed .checkout-step-line,
.checkout-page .step.completed,
.checkout-page .step.active .step-number {
    background: #FFD200 !important;
    border-color: #FFD200 !important;
    color: #0D0D0D !important;
}
.checkout-page .checkout-step.completed .checkout-step-label,
.checkout-page .checkout-step-item.completed .checkout-step-label,
.checkout-page .checkout-step.active .checkout-step-label { color: #FFD200 !important; }
.checkout-page [class*="step"] .fa-check,
.checkout-page [class*="step"] svg path { color: #0D0D0D !important; fill: #0D0D0D !important; }

.checkout-page .checkout-input:focus,
.checkout-page .form-control:focus,
.checkout-page input:focus,
.checkout-page select:focus,
.checkout-page textarea:focus,
.cart-page .form-control:focus {
    border-color: #FFD200 !important;
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.15) !important;
    outline: none !important;
}

.checkout-page .payment-method.selected,
.checkout-page .shipping-method.selected,
.checkout-page .checkout-radio-card.selected,
.checkout-page label.selected,
.checkout-page .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #FFD200 !important;
    background-color: rgba(255, 210, 0, 0.10) !important;
}
.checkout-page input[type="radio"],
.checkout-page input[type="checkbox"],
.cart-page input[type="radio"],
.cart-page input[type="checkbox"] { accent-color: #FFD200 !important; }

.cart-page .cart-total-amount,
.cart-page .cart-total-value,
.checkout-page .checkout-total,
.checkout-page .order-total-value,
.checkout-page .checkout-summary-total .checkout-total {
    color: #FFD200 !important;
}

/* Butoane „Continua" din wizard-ul de checkout (btn-primary) -> galben */
.checkout-page .checkout-step-nav .btn-primary,
.checkout-page .btn.btn-primary,
.checkout-page #checkoutForm .btn-primary {
    background-color: #FFD200 !important;
    border-color: #FFD200 !important;
    color: #0D0D0D !important;
    font-weight: 800 !important;
}
.checkout-page .checkout-step-nav .btn-primary:hover,
.checkout-page .btn.btn-primary:hover {
    background-color: #E6BD00 !important;
    border-color: #E6BD00 !important;
    color: #0D0D0D !important;
}
.checkout-page .checkout-step-nav .btn-outline-secondary {
    border-color: rgba(255,255,255,0.22) !important;
    color: #cbd5e1 !important;
}