/* ============================================
   Checkout skeleton — layout only.

   The shimmer wave, #d8dadf base, keyframes, reduced-motion and the
   .skeleton-block--* modifiers are global (skeleton-shimmer.css, loaded
   site-wide). This file only sizes/positions the checkout skeleton that
   lives inside #checkout-loader until the Knockout app is ready, and is
   loaded on the checkout page only (checkout_index_index).

   The 3-column shape, card chrome and 1024px breakpoint mirror the live
   restyle (checkout-restyle.css) so the Knockout reveal does not shift:
   white 16px panels, grey option chips with a top-right corner radio, dash
   eyebrows, method title/price rows, left-aligned totals and pill CTAs.
   ============================================ */

/* #checkout-loader ships as .loading-mask — normally an absolutely positioned
   translucent overlay with a centred spinner. For a full skeleton it must sit
   in normal flow and hold real height; the node is still removed wholesale by
   checkoutLoader, so these resets vanish with it. */
#checkout-loader {
    position: static;
    background: transparent;
    opacity: 1;
}

/* The skeleton must REPLACE the Knockout app, not stack above it. #checkout-loader
   sits in flow and the KO app renders as its next sibling, so without this the app
   appears *below* the skeleton until it's cleared. The reveal script adds
   .checkout-revealed to #checkout the instant the app's main container renders:
   until then the app (and trailing init scripts) are lifted out of flow + hidden
   so only the skeleton shows; once ready the app reveals and the skeleton is
   hidden. The skeleton node is NOT removed here — Magento's checkout-loader.js
   removes it later via rjsResolver (removing it early throws in hideLoader). */
#checkout {
    position: relative;
}

#checkout:not(.checkout-revealed) #checkout-loader ~ * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
}

#checkout.checkout-revealed #checkout-loader {
    display: none;
}

.checkout-skeleton-shell {
    display: block;
    padding: 0 0 40px;
}

/* ---- Eyebrow: real (constant) section text — the column titles never change,
   so they render as live text, not shimmer. Mirrors the live .step-title head
   (dash + FA glyph + uppercase label) in checkout-restyle.css. */
.checkout-skeleton-shell .cks-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #777;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-skeleton-shell .cks-eyebrow--gap {
    margin-top: 26px;
}

.checkout-skeleton-shell .cks-eyebrow::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    color: #111;
    flex: 0 0 auto;
    padding-left: 34px; /* 26px dash + 8px gap before the glyph */
    background: linear-gradient(#111, #111) left center / 26px 1px no-repeat;
}

.checkout-skeleton-shell .cks-eyebrow--address::before { content: "\f3c5"; } /* map-marker-alt */
.checkout-skeleton-shell .cks-eyebrow--method::before  { content: "\f0d1"; } /* truck */
.checkout-skeleton-shell .cks-eyebrow--payment::before { content: "\f09d"; } /* credit-card */
.checkout-skeleton-shell .cks-eyebrow--summary::before { content: "\f543"; } /* receipt */

/* ---- Panel: the white .block-card (matches the real 16px padding/radius). */
.checkout-skeleton-shell .cks-panel {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: var(--card-radius, 16px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
    padding: 16px;
}

/* ---- Chip: grey selectable option (address card + method row) with a
   top-right corner radio; the selected one turns white + black border. */
.checkout-skeleton-shell .cks-chip {
    position: relative;
    background: #f6f7f9;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    padding: 16px 46px 16px 16px;
    margin: 0 0 10px;
}

.checkout-skeleton-shell .cks-chip:last-child {
    margin-bottom: 0;
}

.checkout-skeleton-shell .cks-chip--selected {
    background: #fff;
    border-color: #111;
}

.checkout-skeleton-shell .cks-chip-radio {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid #c9ccd2;
    border-radius: 50%;
}

.checkout-skeleton-shell .cks-chip--selected .cks-chip-radio {
    border-color: #111;
    background: #111;
}

.checkout-skeleton-shell .cks-chip > .skeleton-block {
    display: block;
    margin-bottom: 10px;
}

.checkout-skeleton-shell .cks-chip > .skeleton-block:last-child {
    margin-bottom: 0;
}

/* Method chip: title on line 1, price on its own right-aligned line below. */
.checkout-skeleton-shell .cks-method .cks-method-title {
    display: block;
    margin-bottom: 10px;
}

.checkout-skeleton-shell .cks-method .cks-method-price {
    display: block;
    width: 64px;
    margin-left: auto;
    margin-bottom: 0;
}

/* ---- Pill CTAs: New Address (in the address panel) + Pay Now (below the
   summary panel) — full pill, 50px, matching the real buttons. */
.checkout-skeleton-shell .cks-pill-btn {
    display: block;
    height: 50px;
    border-radius: 999px;
}

.checkout-skeleton-shell .cks-new-address {
    width: 140px;
    margin-top: 14px;
}

.checkout-skeleton-shell .cks-pay {
    width: 100%;
    margin-top: 14px;
}

/* ---- Payment / inline field placeholders. */
.checkout-skeleton-shell .cks-field {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

.checkout-skeleton-shell .cks-panel .cks-field:last-child {
    margin-bottom: 0;
}

/* ---- Summary internals. The head mirrors the real "N Items in Cart"
   review-stat tile (bordered #fafafa box, qty over a small label). */
.checkout-skeleton-shell .cks-summary-head {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eee;
}

.checkout-skeleton-shell .cks-stat-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #ececec;
    border-radius: var(--radius-control, 8px);
    background: #fafafa;
}

.checkout-skeleton-shell .cks-stat-num {
    width: 28px;
    height: 22px;
}

/* "Items in Cart" is constant text — only the qty above it shimmers. */
.checkout-skeleton-shell .cks-stat-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
}

/* ---- Payment panel — mirrors the real Braintree hosted-fields card. Constant
   text (labels) is live; only the 3 hosted-field inputs and the card-type icon
   strip shimmer. */
.checkout-skeleton-shell .cks-pay-label {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.checkout-skeleton-shell .cks-pay-sameaddr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.checkout-skeleton-shell .cks-pay-checkbox {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #c9ccd2;
    border-radius: 2px;
    background: #fff;
}

.checkout-skeleton-shell .cks-pay-sameaddr-text {
    font-size: 13px;
    color: #555;
}

.checkout-skeleton-shell .cks-pay-fieldset-title {
    display: block;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #777;
}

.checkout-skeleton-shell .cks-pay-field {
    margin-bottom: 12px;
}

.checkout-skeleton-shell .cks-pay-field:last-child {
    margin-bottom: 0;
}

.checkout-skeleton-shell .cks-pay-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #333;
}

/* Card-type brand strip — sits below the number field (matches the live order:
   label -> input -> accepted-brand icons). 7 icons (prod drops Amex). */
.checkout-skeleton-shell .cks-pay-icons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.checkout-skeleton-shell .cks-pay-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 20px;
    border-radius: 3px;
}

/* Field bars track the real hosted-field widths (number wide, exp ~120px, CVV
   ~80px) so the swap to the real inputs barely shifts. */
.checkout-skeleton-shell .cks-field--cc-number {
    max-width: 280px;
}

.checkout-skeleton-shell .cks-field--cc-exp {
    width: 120px;
}

/* CVV bar + its "?" help, sitting side by side like the real CVV row. */
.checkout-skeleton-shell .cks-cvv-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-skeleton-shell .cks-field--cc-cvv {
    width: 80px;
    margin-bottom: 0;
}

.checkout-skeleton-shell .cks-cvv-help::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f059";
    font-size: 16px;
    line-height: 1;
    color: #bfc3c9;
}

.checkout-skeleton-shell .cks-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.checkout-skeleton-shell .cks-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.checkout-skeleton-shell .cks-item-lines {
    flex: 1 1 auto;
    min-width: 0;
}

.checkout-skeleton-shell .cks-item-lines .skeleton-block {
    display: block;
    margin-bottom: 8px;
}

/* Totals: label left + amount in a fixed left-aligned right column, mirroring
   the real left-aligned amount column so the reveal doesn't shift. */
.checkout-skeleton-shell .cks-totals {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #eee;
}

.checkout-skeleton-shell .cks-trow {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.checkout-skeleton-shell .cks-trow .skeleton-block:first-child {
    flex: 1 1 auto;
}

.checkout-skeleton-shell .cks-amt {
    flex: 0 0 130px;
    width: 60px;
}

.checkout-skeleton-shell .cks-trow--grand {
    padding-top: 12px;
    margin-top: 4px;
    margin-bottom: 0;
    border-top: 1px solid #eee;
}

.checkout-skeleton-shell .cks-amt--grand {
    width: 80px;
    height: 18px;
}

/* "Order Total" is constant text — render it live, shimmer only the amount. */
.checkout-skeleton-shell .cks-trow-label--grand {
    flex: 1 1 auto;
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}

.checkout-skeleton-shell .cks-fields {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #eee;
}

.checkout-skeleton-shell .cks-fields .cks-field:last-child {
    margin-bottom: 0;
}

/* The Order / Shipping Note is a 2-row textarea — match its real ~64px height. */
.checkout-skeleton-shell .cks-field--note {
    height: 64px;
}

/* ---- Dark Order Summary skeleton — mirrors the inverted loaded summary card
   (checkout-restyle.css). Only the summary panel goes dark; the Pay Now pill
   sits outside it on the light page, so scope to .cks-panel and use translucent
   light placeholders that read on the dark surface. */
.checkout-skeleton-shell .cks-col--summary .cks-panel {
    background: linear-gradient(150deg, #3d434d 0%, #282d35 100%);
    border-color: transparent;
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .skeleton-block {
    background-color: rgba(255, 255, 255, 0.12);
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-stat-tile {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-trow-label--grand {
    color: #fff;
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-pay-field-label {
    color: rgba(255, 255, 255, 0.85);
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-summary-head {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-totals,
.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-trow--grand,
.checkout-skeleton-shell .cks-col--summary .cks-panel .cks-fields {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ---- Three columns on desktop; summary tracks the real sticky column. The
   1024px breakpoint matches Amasty's modern 3-column flip. */
@media (min-width: 1024px) {
    .checkout-skeleton-shell {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .checkout-skeleton-shell .cks-col {
        flex: 1 1 0;
        min-width: 0;
    }

    .checkout-skeleton-shell .cks-col--summary {
        position: sticky;
        top: 20px;
    }

    .checkout-skeleton-shell .cks-col--address {
        min-height: 520px;
    }
}

/* Mobile: single column, stacked in COL1 → COL2 → COL3 order. */
@media (max-width: 1023px) {
    .checkout-skeleton-shell .cks-col + .cks-col {
        margin-top: 24px;
    }
}