/* ==========================================================================
   CHECKOUT — 2026 layer                                        (2026-08-11)
   Loaded LAST, after cart.css and dashboard.css, so it settles the cascade
   without editing either of them.

   Everything here is scoped under .checkout-page on purpose:
     · .contact-form-*  is shared with Home/ContactUs
     · .cart-summary-box / .summary-row are shared with Cart and
       Dashboard/OrderDetail
   Unscoped rules would reskin those pages too. Only Checkout may change.

   Tokens come from base-2026.css. No new colour is invented here.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. SECTION RHYTHM  — onto the 4px grid (was 26px / 20px)
   ───────────────────────────────────────────────────────────────────────── */
.checkout-page .checkout-section {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.checkout-page .checkout-section-title {
    font-size: var(--fs-h5);
    line-height: var(--lh-heading);
    margin-bottom: var(--space-4);
    gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. FORM FIELDS
   .contact-form-* lives in dashboard.css and hardcodes #e0e0e0 / #fafafa /
   #333 / #b42a41. dashboard.css loads AFTER cart.css, so equal-weight rules
   lose to it — these are deliberately one class more specific and win
   regardless of load order. dashboard.css itself stays untouched.

   Before this block the cascade was split: <input> took base-2026.css while
   <textarea> and <select> took dashboard.css, so the address box and the
   city dropdown did not match the text fields.
   ───────────────────────────────────────────────────────────────────────── */
.checkout-page .contact-form-group label {
    font-size: var(--fs-body-sm);
    color: var(--text-2);
    font-weight: var(--fw-medium);
}

.checkout-page .contact-form-group input,
.checkout-page .contact-form-group select,
.checkout-page .contact-form-group textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-pad-y) var(--input-pad-x);
    font-family: var(--ff-fa);
    font-size: var(--input-fs);
    line-height: var(--lh-snug);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.checkout-page .contact-form-group input,
.checkout-page .contact-form-group select {
    min-height: var(--input-h);   /* 44px touch target */
}

.checkout-page .contact-form-group input:focus,
.checkout-page .contact-form-group select:focus,
.checkout-page .contact-form-group textarea:focus {
    border-color: var(--focus-color);
    background: var(--surface);
    outline: var(--focus-width) solid transparent;   /* Windows High Contrast */
    outline-offset: var(--focus-offset);
    box-shadow: var(--input-focus-ring);
}

.checkout-page .contact-form-group input::placeholder,
.checkout-page .contact-form-group textarea::placeholder {
    color: var(--text-muted-aa);
}

/* The phone / postal / national-code fields carry dir="ltr" in the markup,
   but dashboard.css sets `direction: rtl` on every field and author CSS
   beats the dir attribute — so the explicit intent was being overridden. */
.checkout-page .contact-form-group input[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. ORDER SUMMARY — item list
   Replaces the inline styles that used to build this list in the view.
   ───────────────────────────────────────────────────────────────────────── */
.checkout-summary-items {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.checkout-summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.checkout-summary-item:last-child { margin-bottom: 0; }

.checkout-summary-item .cart-product-img {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: var(--r-xs);
    object-fit: cover;
}

.checkout-summary-item-body { flex: 1; min-width: 0; }

.checkout-summary-item-name {
    font-size: var(--fs-body-sm);
    color: var(--text);
    display: block;
}

.checkout-summary-item-qty {
    font-size: var(--fs-caption);
    color: var(--text-muted-aa);
    display: block;
}

/* Line price uses --price, the same orange as the payable total.
   It used to be hardcoded #b42a41, which put two different "price"
   colours inside one box. */
.checkout-summary-item-price {
    font-size: var(--fs-body-sm);
    color: var(--price);
    font-weight: var(--fw-semi);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. ORDER SUMMARY — box
   ───────────────────────────────────────────────────────────────────────── */
.checkout-page .cart-summary-box {
    padding: var(--card-pad);
    /* clears the sticky header (8rem) instead of hiding under it */
    top: calc(var(--nav-h) + var(--space-4));
}

.checkout-page .cart-summary-title {
    font-size: var(--fs-h6);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
}

.checkout-trust-note {
    text-align: center;
    font-size: var(--fs-caption);
    color: var(--text-muted-aa);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. PAYMENT / WALLET DETAILS
   ───────────────────────────────────────────────────────────────────────── */
.checkout-wallet-body { flex: 1; min-width: 0; }

.checkout-wallet-icon { color: var(--text-success); }

.checkout-note-field { margin-top: var(--space-4); }

/* The gateway list is indented to sit under its parent option. It used a
   physical margin-left, which mirrors to the wrong side in an RTL page. */
.checkout-page .gateway-list {
    margin: var(--space-1) 0 var(--space-2);
    margin-inline-start: 34px;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. MOBILE ACTION BAR
   Below lg the two columns stack, which puts the payable total and the pay
   button underneath every form section — the user could not see what they
   were about to pay while filling the form. This pins both to the bottom.

   position: sticky (not fixed) so the bar sits inside the form's flow: it
   pins while the form extends past the viewport and releases at the end,
   instead of permanently covering the footer.
   ───────────────────────────────────────────────────────────────────────── */
.checkout-mobile-bar { display: none; }

@media (max-width: 991.98px) {
    .checkout-mobile-bar {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 900;                 /* under the header (99999), over content */
        align-items: center;
        gap: var(--space-4);
        margin-top: var(--space-4);
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(12,31,63,.10);
    }

    .checkout-mobile-bar-amount {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .checkout-mobile-bar-label {
        font-size: var(--fs-caption);
        color: var(--text-muted-aa);
    }

    .checkout-mobile-bar-value {
        font-size: var(--fs-body-lg);
        font-weight: var(--fw-bold);
        color: var(--price);
        white-space: nowrap;
    }

    .checkout-mobile-bar .checkout-btn {
        width: auto;
        flex: 1;
        margin-top: 0;
        min-height: var(--btn-h);
        padding: var(--btn-pad-y) var(--space-4);
    }

    /* room so the pinned bar never sits on top of the last field */
    .checkout-page { padding-bottom: var(--space-8); }

    /* the in-summary button is redundant once the bar is pinned */
    .checkout-page .cart-summary-box .checkout-btn { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. KEYBOARD VISIBILITY
   The option cards are <label>s; make the focused radio inside them show a
   ring on the card, so keyboard users can see where they are.
   ───────────────────────────────────────────────────────────────────────── */
.checkout-page .delivery-option:focus-within,
.checkout-page .payment-option:focus-within,
.checkout-page .wallet-use-box:focus-within,
.checkout-page .gateway-option:focus-within {
    border-color: var(--focus-color);
    box-shadow: var(--focus-ring);
}

/* cart.css hides the gateway radio with display:none, which removes it from
   the tab order and from the accessibility tree — the gateway could only be
   picked with a mouse. Hidden visually, still focusable. */
.checkout-page .gateway-option { position: relative; }

.checkout-page .gateway-option input {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* fieldset carries the radio-group semantics; it must not draw anything. */
.checkout-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;   /* fieldset defaults to min-content and breaks flex/grid */
}

/* ─────────────────────────────────────────────────────────────────────────
   8. VALIDATION / ERROR / LOADING STATES
   ───────────────────────────────────────────────────────────────────────── */
.checkout-page .contact-form-group input.has-error,
.checkout-page .contact-form-group select.has-error,
.checkout-page .contact-form-group textarea.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}

.checkout-page .field-error {
    font-size: var(--fs-caption);
    line-height: var(--lh-snug);
    color: var(--text-danger);
    margin-top: var(--space-1);
}

.checkout-error {
    display: none;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid #FECDCA;
    border-radius: var(--r-md);
    background: #FEF3F2;
    color: #B42318;              /* 6.2:1 on #FEF3F2 */
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
}

/* Submitting: the button says what is happening instead of just greying out. */
.checkout-btn.is-loading {
    cursor: progress;
    opacity: .9;
}

.checkout-btn.is-loading .js-submit-icon {
    animation: checkout-spin .7s linear infinite;
}

@keyframes checkout-spin {
    to { transform: rotate(360deg); }
}

.checkout-btn:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-btn.is-loading .js-submit-icon { animation: none; }
}

.checkout-page .addr-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.checkout-page .addr-pick-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.checkout-page .addr-pick-card:hover { background: var(--surface-2); }
.checkout-page .addr-pick-card.selected {
    border-color: var(--primary);
    background: var(--primary-50);
}

.checkout-page .addr-pick-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.checkout-page .addr-pick-card:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.checkout-page .addr-pick-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.checkout-page .addr-pick-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-h6);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.checkout-page .addr-pick-badge {
    padding: 2px var(--space-2);
    border-radius: var(--r-pill);
    background: var(--primary);
    color: var(--on-brand);
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
}

.checkout-page .addr-pick-line,
.checkout-page .addr-pick-meta {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text-2);
}
.checkout-page .addr-pick-meta { color: var(--muted); }

.checkout-page .addr-pick-check {
    margin-inline-start: auto;
    color: transparent;
    font-size: 1.6rem;
}
.checkout-page .addr-pick-card.selected .addr-pick-check { color: var(--primary); }

.checkout-page .addr-pick-new { border-style: dashed; }

.checkout-page .addr-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.checkout-page .addr-edit-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.checkout-page .addr-book-link {
    font-size: var(--fs-body);
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.checkout-page .addr-save-box {
    display: flex;
    /* flex-direction صریح است چون این جعبه **هم** .contact-form-group است و
       آن یکی ستونی‌اش می‌کند؛ بدونِ این، `flex: 1 1 220px` روی محورِ عمودی
       می‌نشست و ورودیِ «عنوان آدرس» ۲۲۰ پیکسل **بلند** می‌شد (یک کادرِ خالیِ
       بزرگ زیرِ چک‌باکس، که هیچ‌کس نمی‌فهمید چیست). */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.checkout-page .addr-save-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-body);
    color: var(--text-2);
    cursor: pointer;
}
.checkout-page .addr-save-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
/* عنوانِ آدرس کنارِ یک چک‌باکسِ ۱۸px می‌نشیند، پس ارتفاعِ پیش‌فرضِ فیلدهای
   فرم (padding 1.15rem) اینجا درشت به نظر می‌رسد. فقط همین یک فیلد کوتاه می‌شود. */
.checkout-page .addr-save-box input[type="text"] {
    flex: 1 1 220px;
    padding: .65rem 1rem;
    font-size: 1.3rem;
}

/* Required-field marker. The form already enforces `required`, but until the
   browser refuses to submit, nothing on screen says which fields are optional —
   and two of them (land line, national code) genuinely are. */
.contact-form-group label .req {
    color: #e11d2a;
    font-weight: 700;
    margin-inline-start: .3rem;
}