/*
 * V3 "Ivory & Navy" - cart / checkout page rules
 * Step rail, item rows, order-summary panel, address grid, disclosures +
 * address recap, payment method list + FPX bank grid, countdown, complete
 * panel, and this page's own copy of the .v3-pdp-modal-* backdrop pattern.
 * Loaded only on /shop/cart, on top of core.css.
 *
 * Deliberately does NOT load product.css: its .v3-pdp-modal-* classes are
 * page-scoped by name only, not by file scope, so this file copies the
 * modal-backdrop pattern this page needs, verbatim, under the same class
 * names - same convention listing.css already uses for .v3-pdp-breadcrumb
 * (see listing.css:6-15).
 *
 * .v3-btn*, .v3-field, .v3-input, .v3-select, .v3-textarea, .v3-check,
 * .v3-pill-*, .v3-segmented, .v3-table*, .v3-alert*, .v3-section* are
 * already in core.css (Phase 2) - not redefined here.
 */

/* ============================================================
   MODALS - copied verbatim from product.css's .v3-pdp-modal-* pattern
   under the same class names, since cart.css does not load product.css.
   ============================================================ */
.v3-pdp-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.v3-pdp-modal-backdrop.is-hidden { display: none; }
.v3-pdp-modal {
    background: var(--plate); border: 1px solid var(--line); border-top: 2px solid var(--accent);
    border-radius: 14px; padding: 26px; max-width: 420px; width: 100%; position: relative;
    box-shadow: 0 24px 48px var(--shadow);
}
.v3-pdp-modal h3 { display: flex; align-items: center; gap: 8px; font-size: 21px; color: var(--accent); margin: 0 0 14px; }
.v3-pdp-modal p { color: var(--ink); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; }
.v3-pdp-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-pdp-modal-close {
    position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--ink-soft);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
}
.v3-pdp-modal-close:hover { color: var(--accent); }

/* ============================================================
   DISCLOSURE - native details/summary, same mechanism as the header's
   member-account menu, just a block instead of a floating panel.
   ============================================================ */
.v3-disclosure { border: 1px solid var(--line); border-radius: 14px; background: var(--plate); margin-bottom: 16px; overflow: hidden; }
.v3-disclosure summary {
    list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.v3-disclosure summary::-webkit-details-marker { display: none; }
.v3-disclosure-title { font-family: Newsreader, serif; font-size: 17px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.v3-disclosure-title small { font-family: Manrope, sans-serif; font-size: 13px; color: var(--gold); font-weight: 700; }
.v3-disclosure-right { display: flex; align-items: center; gap: 14px; flex: none; }
.v3-disclosure-edit { font-size: 12.5px; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; }
.v3-disclosure-edit:hover { text-decoration: underline; }
.v3-disclosure-icon { color: var(--ink-soft); font-size: 13px; transition: transform .2s ease; }
.v3-disclosure[open] .v3-disclosure-icon { transform: rotate(180deg); }
.v3-disclosure-body { padding: 0 20px 20px; border-top: 1px solid var(--line); }

/* address recap: name, each address line, phone all on their own line
   instead of one middot-joined paragraph. */
.v3-address-recap { margin-top: 14px; }
.v3-address-recap p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.v3-address-recap p:last-child { margin-bottom: 0; }
.v3-address-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.v3-address-phone { color: var(--ink-soft) !important; margin-top: 8px !important; display: flex; align-items: center; gap: 8px; }
.v3-address-tag {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
    background: var(--panel); padding: 2px 8px; border-radius: 999px;
}

/* ============================================================
   CART / CHECKOUT - page-specific rules
   ============================================================ */
.v3-cart-top { padding-top: 32px; }

/* Each step's content lives in a shared .v3-section (core.css), which carries
   a generous 72px top/bottom padding meant for standalone marketing sections.
   The top value stacks directly under the step rail's own 32px padding-top
   (big gap above the step title); the bottom value stacks with
   .v3-cart-shell's own bottom margin (big gap before the footer). Scoped to
   cart's step sections only -- .v3-section keeps its normal 72px everywhere
   else (home/listing/PDP). */
#cart_progress_content > .tab-accordion > .v3-section { padding-top: 16px; padding-bottom: 24px; }

/* step rail */
.v3-cart-steps { list-style: none; margin: 0 0 32px; padding: 0; display: flex; align-items: center; }
.v3-cart-steps li {
    flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    position: relative; padding-bottom: 14px; border-bottom: 3px solid var(--line);
}
.v3-cart-steps li:not(:last-child) { margin-right: 4px; }
.v3-cart-step-num {
    width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--plate);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; color: var(--ink-soft);
}
.v3-cart-steps li.is-done { border-bottom-color: var(--accent); color: var(--ink); }
.v3-cart-steps li.is-done .v3-cart-step-num { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.v3-cart-steps li.is-current { border-bottom-color: var(--gold); color: var(--ink); }
.v3-cart-steps li.is-current .v3-cart-step-num { background: var(--gold); border-color: var(--gold); color: #FBF8F2; }

/* completed steps can be clicked to jump back and edit (see wireStepRailClicks
   in cart.js). Surface that on hover/focus: pointer cursor + a pencil glyph
   that fades in after the label. */
.v3-cart-steps li.is-done { cursor: pointer; }
.v3-cart-steps li.is-done .v3-cart-step-label::after {
    content: "\f044"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: 7px; font-size: 11px; color: var(--gold);
    opacity: 0; transition: opacity .12s ease;
}
.v3-cart-steps li.is-done:hover .v3-cart-step-label,
.v3-cart-steps li.is-done:focus-visible .v3-cart-step-label { color: var(--gold); }
.v3-cart-steps li.is-done:hover .v3-cart-step-label::after,
.v3-cart-steps li.is-done:focus-visible .v3-cart-step-label::after { opacity: 1; }

/* desktop: the rail carries its own labels, caption is redundant */
.v3-cart-steps-caption { display: none; }

@media (max-width: 640px) {
    .v3-cart-steps li span.v3-cart-step-label { display: none; }
    .v3-cart-steps li { justify-content: center; }
    /* rail sits tight against the caption, which then carries the gap down to
       the step content. */
    .v3-cart-steps { margin-bottom: 10px; }
    .v3-cart-steps-caption {
        display: block; margin: 0 0 18px;
        font-size: 15px; font-weight: 700; color: var(--ink);
    }
}

/* layout - items + sticky summary */
.v3-cart-shell { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; margin: 8px 0 56px; }
@media (max-width: 1023px) {
    .v3-cart-shell { grid-template-columns: 1fr; }
    .v3-cart-shell .v3-cart-summary { position: static; }
    /* 56px bottom margin was sized for the desktop 2-column layout; stacked on
       top of .v3-section's own bottom padding it read as a big empty gap
       before "As Featured On". */
    .v3-cart-shell { margin-bottom: 24px; }
}

.v3-cart-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v3-cart-items { display: flex; flex-direction: column; gap: 16px; }
.v3-cart-row {
    display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; align-items: center;
    padding: 18px; background: var(--plate); border: 1px solid var(--line); border-radius: 14px;
    transition: opacity .25s ease, transform .25s ease;
}
.v3-cart-row.is-removing { opacity: 0; transform: translateX(12px); }
.v3-cart-row.is-warn { border-color: var(--down); }
.v3-cart-row-media .v3-card-plate { padding: 8px; }

/* step 3 (Order Summary & Payment) item table — product thumbnail beside the
   name, mirroring the step-1 review row's .v3-cart-row-media/.v3-card-plate. */
.v3-co-item { display: flex; align-items: center; gap: 12px; }
.v3-co-item-media { flex: none; width: 64px; }
.v3-co-item-media .v3-card-plate { padding: 6px; }
.v3-co-item-text { min-width: 0; }
.v3-cart-row-name { font-family: Newsreader, serif; font-size: 16px; color: var(--ink); margin: 0 0 6px; line-height: 1.35; }
/* Listing/PDP explicitly reset their card-name links (.v3-card-plate-link,
   .v3-card-name-link in core.css); this row's link never got that treatment
   and fell back to the browser's default underline. */
.v3-cart-row-name a { text-decoration: none; color: inherit; }
.v3-cart-row-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.v3-cart-row-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    /* border-color matches the text color (--ink-soft), not --line -- in dark
       mode --line (#2E2F36) sits almost on top of --plate (#24252B), reading
       as no border at all. */
    padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ink-soft); color: var(--ink-soft); white-space: nowrap;
}
.v3-cart-row-badge.is-locked { border-color: var(--accent); color: var(--accent); }
.v3-cart-row-badge.is-lnpl { border-color: var(--accent); color: var(--accent); background: var(--panel); }
/* Shipping badges are filled so they stand out from the outlined bundle /
   max-order pills alongside them. */
.v3-cart-row-badge.is-free-ship { border-color: var(--up); background: var(--up); color: #fff; }
.v3-cart-row-badge.is-no-ship { border-color: var(--down); background: var(--down); color: #fff; }
.v3-cart-row-unit { font-size: 13px; color: var(--ink-soft); }
.v3-cart-row-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.v3-cart-row-meta.is-warn { color: var(--down); font-weight: 700; }
.v3-cart-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.v3-cart-row-total { font-family: Manrope, sans-serif; font-weight: 800; font-size: 17px; color: var(--gold); }
.v3-cart-qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.v3-cart-qty button { background: var(--accent); color: var(--accent-text); border: 0; width: 30px; font-size: 14px; font-weight: 700; cursor: pointer; }
.v3-cart-qty button:hover { filter: brightness(.82); }
.v3-cart-qty button:disabled { opacity: .5; cursor: not-allowed; }
.v3-cart-qty input {
    width: 42px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    background: var(--plate); color: var(--ink); font-family: Manrope, sans-serif; font-size: 14px;
}
.v3-cart-row-remove {
    background: none; border: 0; color: var(--ink-soft); font-size: 12.5px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; padding: 0;
}
.v3-cart-row-remove:hover { color: var(--down); }
/* Icon-only below 380px (foldable cover screens, ~280-344px) -- at 640px the
   qty stepper + total + remove button already share one row (below), and
   "Remove" text on top of that is one crowded element too many at these
   widths. The button keeps its aria-label so screen readers still announce
   "Remove"; this only drops the visible text. */
@media (max-width: 380px) {
    .v3-cart-row-remove-label { display: none; }
}
@media (max-width: 640px) {
    .v3-cart-row { grid-template-columns: 64px 1fr; }
    .v3-cart-row-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 4px; }
    /* Unit price reads too faint at this width (13px, ink-soft) once the row
       collapses to two columns and everything sits closer together - bumped
       weight + full-ink color so it's not lost next to the badges below it. */
    .v3-cart-row-unit { font-weight: 600; color: var(--ink); }
}

.v3-cart-note {
    display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px;
}
.v3-cart-note i { color: var(--accent); margin-top: 1px; }

.v3-cart-empty { text-align: center; padding: 72px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.v3-cart-empty i { font-size: 34px; color: var(--ink-soft); margin-bottom: 18px; }
.v3-cart-empty h2 { font-size: 24px; margin-bottom: 10px; }
.v3-cart-empty p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 24px; }

/* summary panel */
.v3-cart-summary {
    position: sticky; top: 110px; /* clears the sticky header (price strip + brand row + nav) */
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.v3-cart-summary h2 { font-size: 19px; margin-bottom: 16px; }
.v3-cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-soft); padding: 9px 0; border-bottom: 1px solid var(--line); }
.v3-cart-summary-row.is-total { border-bottom: 0; padding-top: 14px; font-size: 17px; font-weight: 800; color: var(--ink); }
/* Keep the amount ("RM 999,999.99") on one line; let the label text wrap to
   take the freed space instead of the price breaking after "RM". */
.v3-cart-summary-row > :first-child { min-width: 0; }
.v3-cart-summary-amt { font-family: Manrope, sans-serif; flex: none; white-space: nowrap; text-align: right; }
.v3-cart-summary-row.is-total .v3-cart-summary-amt { color: var(--gold); font-weight: 800; }
.v3-cart-summary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.v3-cart-bottombar { display: none; }
@media (max-width: 1023px) {
    .v3-cart-bottombar {
        /* sticky, not fixed - contained by its own parent section so it
           un-pins once that section scrolls out of view. */
        display: flex; position: sticky; bottom: 0; z-index: 55;
        background: var(--plate); border-top: 1px solid var(--line); padding: 12px 16px;
        align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 -8px 24px var(--shadow);
        margin: 16px -24px 0;
    }
    .v3-cart-bottombar-amt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .v3-cart-bottombar-label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
    .v3-cart-bottombar-total { font-family: Manrope, sans-serif; font-weight: 800; font-size: 17px; color: var(--gold); }
    .v3-cart-bottombar .v3-btn { flex: none; }
    /* Hidden once the Order Summary card (with its own Checkout button) is on
       screen -- see wireBottomBarVisibility() in cart.js. Without this the bar
       un-pins from sticky into normal flow and sits directly under the
       summary's own button, reading as a duplicate CTA. */
    .v3-cart-bottombar.is-summary-visible { display: none; }
}

/* step footer actions (Back to Shopping / Continue to Payment, Place
   Order): side-by-side auto-width buttons look cramped on a phone. Below
   640px they go full width and stack. column-reverse, not plain column -
   the site's button-ordering rule wants the positive action (Continue to
   Payment/Member Checkout) on the RIGHT in a side-by-side row (already
   true here: it's last in DOM/source order) and on TOP when stacked full-
   width; those are opposite DOM positions (last vs first), so matching
   both requires reversing the stack order rather than keeping it visually
   consistent with the row's left-to-right order. */
.v3-cart-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .v3-cart-actions { flex-direction: column-reverse; }
    .v3-cart-actions .v3-btn { width: 100%; justify-content: center; }
}

/* step 2 - address */
.v3-cart-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .v3-cart-address-grid { grid-template-columns: 1fr; } }
.v3-cart-address-col h3 { font-size: 19px; margin-bottom: 4px; }
.v3-cart-address-col > p.v3-field-hint { margin: 0 0 16px; }
.v3-cart-pickup {
    border: 1px solid var(--accent); border-radius: 14px; background: var(--panel); padding: 18px 20px; margin-top: 12px;
}
.v3-cart-pickup h4 { font-size: 13.5px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: var(--accent); }
.v3-cart-pickup p { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }
.v3-cart-pickup p:last-child { margin-bottom: 0; }

/* Required consent gate (step 2): the checkbox that actually blocks Continue,
   plus 2 paragraphs of legal text. Was styled identically to a passive
   .v3-alert-info hint (self-collect notices etc), so it read as one more
   ambient box on the page instead of the one interactive thing standing
   between the customer and checkout. Bolder left accent stripe marks it as
   a gate, not a notice; the actionable label is bumped up in size/weight so
   it outranks the two supporting legal paragraphs, which step back in size
   and color since they're fine print, not the primary action. */
.v3-consent-gate {
    border-left-width: 4px; padding: 18px 20px; margin: 24px 0;
}
.v3-consent-gate-label { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.v3-consent-gate-label:last-child { margin-bottom: 0; }
.v3-consent-gate i { font-size: 19px; }
.v3-consent-gate p { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 6px; }
.v3-consent-gate p:last-child { margin-bottom: 0; }

/* step 3 - payment method list */
.v3-payment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.v3-payment-option {
    display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.v3-payment-option:has(input:checked) { border-color: var(--accent); background: var(--panel); }
.v3-payment-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.v3-payment-option input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.v3-payment-option-name { font-weight: 700; font-size: 14px; }
.v3-payment-option-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.v3-payment-option-icon { margin-left: auto; color: var(--ink-soft); font-size: 20px; }
/* Logo-forward icon grid at every width - tight 3-up on a phone, a single
   full-width row on desktop, no separate mobile/desktop chip styles. */
/* Personal / Business are two separate collapsed disclosures (matching
   legacy's two accordions) so a customer sees both bank-account types are
   supported before opening either -- .v3-bank-categories is the outer
   show/hide wrapper (tied to the FPX payment option, same as before),
   .v3-bank-list is the actual chip grid inside each disclosure's body. */
.v3-bank-categories { display: none; flex-direction: column; gap: 10px; padding: 8px 0 16px; }
.v3-payment-option.is-fpx.is-open + .v3-bank-categories { display: flex; }
/* .v3-disclosure-body has 0 top padding by design -- the other disclosures'
   content (.v3-address-recap, .v3-table-wrap) each carry their own
   margin-top:14px to compensate; the bank grid/empty-state message need the
   same treatment or they sit flush against the summary's border-top. */
.v3-bank-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.v3-disclosure-body > .v3-field-hint { margin-top: 14px; }
.v3-bank-chip {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
    background: var(--plate); color: var(--ink); transition: border-color .2s ease, background-color .2s ease;
}
.v3-bank-chip-mark {
    /* fixed white plate + border, not just background:#fff - some bank
       logos are themselves white/transparent and would bleed into the tile. */
    width: 36px; height: 36px; border-radius: 8px; flex: none; padding: 4px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line);
}
.v3-bank-chip-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v3-bank-chip.is-selected { border-color: var(--accent); background: var(--panel); }
.v3-bank-chip.is-selected .v3-bank-chip-mark { box-shadow: 0 0 0 2px var(--accent); }

/* step 4 - countdown */
.v3-cart-countdown { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 22px 0 28px; }
.v3-cart-countdown-box { text-align: center; }
.v3-cart-countdown-digits {
    background: var(--accent); color: var(--accent-text); border-radius: 10px; padding: 12px 18px;
    font-family: Manrope, sans-serif; font-weight: 800; font-size: 24px; min-width: 64px;
}
.v3-cart-countdown-label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.v3-cart-countdown-sep { font-size: 22px; font-weight: 800; color: var(--ink-soft); }

.v3-cart-complete-panel { padding: 32px; background: var(--plate); border: 1px solid var(--line); border-radius: 14px; max-width: 640px; margin: 0 auto; }
.v3-cart-complete-panel h2 { font-size: 24px; margin-bottom: 14px; }
.v3-cart-complete-panel > p { font-size: 14.5px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }

/* Bank-logo cell: the JS-injected <img> is display:block (global img rule), so
   the cell's own text-align:right (.v3-num) can't shift it -- make it inline so
   it right-aligns like every other value in the table. */
#complete-bank-name img { display: inline-block; }

/* Copy-to-clipboard icon: cart.js tags it `ms-2`, a Bootstrap spacing class
   that does nothing here (no Bootstrap on V3), so it sat flush against the
   value. */
.copyIcon { margin-left: 8px; color: var(--ink-soft); }
.copyIcon:hover { color: var(--accent); }

.v3-cart-status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.v3-cart-status-badge.is-up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.v3-cart-status-badge.is-down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }

/* Screen 6 (payment result) - success/fail is just one panel per real
   render (not side by side like the mockup's 2-up preview), but the grid
   class is kept so a future two-column use (if any) is a one-line add. */
.v3-cart-return-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) {
    .v3-cart-return-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .v3-cart-shell { gap: 28px; }
    .v3-cart-summary { top: auto; }
}