/*
 * Cart page + account-area shell. Two scopes in this one file:
 *   - Cart body only (item list + order summary), under .tw-cart — new
 *     markup added directly in cart.blade.php, not used by any other page.
 *   - Account-area shell (header card + sidebar), under `.settings-container`
 *     — the wrapper cart.blade.php, account.blade.php, wallet.blade.php,
 *     orders.blade.php, notifications.blade.php, rank.blade.php,
 *     t-points.blade.php, cards-history.blade.php,
 *     saved-validation-accounts/index.blade.php and
 *     wheelOfFortune/index.blade.php all render around
 *     web.layouts.account-info + web.layouts.aside. Scoping to that shared
 *     class reskins the header card and sidebar on all of them at once,
 *     without editing either partial's markup.
 * Colour tokens (--tw-*) come from twelve-ui.css, which every page already
 * loads, so body.darkMode re-themes all of this for free.
 *
 * Several rules below carry !important. The legacy stylesheet
 * (style.rtl.min.css / custom.min.css) styles the same classes this page
 * keeps for JS/markup compatibility (.cart-box, .checkOut, .not-found,
 * .add-minus-card, .summary, .discount, .pay.summary …) with selectors that
 * chain 2-4 classes under `.settings-container` — equal or higher
 * specificity than a single new class name. Rather than guess at exact
 * specificity, !important is used wherever a legacy rule sets the same
 * property (verified by parsing both stylesheets) — confirmed none of
 * those legacy rules use !important themselves, so this always wins.
 */

@keyframes tw-cart-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes tw-cart-pop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

.tw-cart {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
    font-family: var(--tw-font);
    color: var(--tw-ink);
}

.tw-cart *,
.tw-cart *::before,
.tw-cart *::after {
    box-sizing: border-box;
}

.tw-cart__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Head row ───────────────────────────────────────────────────────── */

.tw-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-cart__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-cart__title b {
    font-size: 19px;
    font-weight: 800;
}

.tw-cart__count {
    background: var(--tw-brand-soft);
    color: var(--tw-brand);
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.tw-cart__continue {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tw-ink);
    white-space: nowrap;
}

.tw-cart__continue:hover {
    color: var(--tw-brand);
}

/* ── Item list ──────────────────────────────────────────────────────── */

.tw-cart-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* !important: this element also keeps the legacy `.cart-box` class for the
   page's existing dark theme fallback, and `.settings-container .cart
   .cart-box` (3 classes) outranks a single `.tw-cart-item` class on
   specificity alone — without !important the legacy flex-direction:column/
   align-items:flex-start/background-color win and the row layout collapses
   into a stacked legacy card. */
.tw-cart-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px;
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-line);
    border-radius: 16px;
    padding: 13px 15px;
    animation: tw-cart-in 0.3s ease-out;
}

/* .tw-cart-item__top/__bottom exist purely so the mobile breakpoint can
   regroup [art, body, delete] and [qty, price] into two independent flex
   rows (see below) — a single grid sharing column tracks between a 3-cell
   top row and a 2-cell bottom row sized the columns wrong and left a big
   gap between the name and the product art. On this (desktop) layout both
   wrappers are display:contents, so their children act as direct flex
   items of .tw-cart-item, same as if the wrappers weren't there; `order`
   keeps them in the original visual sequence regardless of the DOM order
   the wrappers now require (art, body, delete, qty, price). */
.tw-cart-item__top,
.tw-cart-item__bottom {
    display: contents;
}

.tw-cart-item__art { order: 1; }
.tw-cart-item__body { order: 2; }
.tw-cart-item__qty { order: 3; }
.tw-cart-item__price { order: 4; }
.tw-cart-item__del { order: 5; }

.tw-cart-item__art {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--tw-chip);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.tw-cart-item__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.tw-cart-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tw-cart-item__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tw-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-cart-item__name:hover {
    color: var(--tw-brand);
}

.tw-cart-item__meta {
    color: var(--tw-ink2);
    font-size: 11px;
}

.tw-cart-item__meta b {
    color: var(--tw-ink);
    font-weight: 700;
}

.tw-cart-item__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.tw-cart-item__field {
    background: var(--tw-surface2);
    border: 1px solid var(--tw-line);
    border-radius: 8px;
    padding: 2px 10px;
    color: var(--tw-ink2);
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tw-cart-item__field b {
    color: var(--tw-ink);
    font-weight: 700;
}

.tw-cart-item__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.tw-cart-item__badges:empty {
    display: none;
}

.tw-cart-item__cashback {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(34, 197, 94, 0.12);
    color: var(--tw-good);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 800;
}

.tw-cart-item__cashback svg {
    flex-shrink: 0;
}

/* Existing coupon-per-item badge (.item-coupon-discount-badge) keeps its own
   markup/classes for the JS that shows/hides it — only its look is adjusted
   here so it fits the new card instead of the legacy dark cart. */
.tw-cart-item__badges .item-coupon-discount-badge {
    margin: 0;
    background: rgba(255, 182, 64, 0.15) !important;
    color: #c07f1d !important;
    border: 1px solid rgba(255, 182, 64, 0.4);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 800;
}

/* ── Qty stepper ────────────────────────────────────────────────────── */

.tw-cart-item__qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* !important: `.add-minus-card` keeps the legacy `.add` class (JS/markup
   compatibility), and `.settings-container .cart .cart-box .add`/`.add i`
   chain 4-5 classes deep — comfortably outranking these 2-class selectors. */
.tw-cart-item__qty .add-minus-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: var(--tw-surface2);
    border: 1px solid var(--tw-line);
    border-radius: 999px;
    padding: 4px 6px;
}

.tw-cart-item__qty .add-minus-card i {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--tw-chip) !important;
    border: none !important;
    display: grid !important;
    place-items: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--tw-ink);
    transition: background 0.2s, color 0.2s;
}

.tw-cart-item__qty .add-minus-card i:hover {
    background: var(--tw-brand) !important;
    color: #fff;
}

.tw-cart-item__qty .add-minus-card i.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.tw-cart-item__qty input.quantity-input {
    width: 22px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--tw-ink);
    padding: 0;
    font-family: inherit;
}

.tw-cart-item__qty .error-element {
    font-size: 10px;
    margin: 0;
    text-align: center;
}

/* ── Price ──────────────────────────────────────────────────────────── */

.tw-cart-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 92px;
    flex-shrink: 0;
}

.tw-cart-item__price .cart-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--tw-ink);
    direction: ltr;
}

.tw-cart-item__unit {
    color: var(--tw-ink2);
    font-size: 10px;
    direction: ltr;
}

/* ── Delete ─────────────────────────────────────────────────────────── */

.tw-cart-item__del {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--tw-line);
    display: grid;
    place-items: center;
    color: var(--tw-ink2);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}

.tw-cart-item__del:hover {
    color: var(--tw-brand);
    border-color: var(--tw-brand);
}

/* ── Empty state ────────────────────────────────────────────────────── */

/* !important: this element keeps the legacy `.not-found` class, whose
   `.settings-container .not-found` rule (2 classes + min-height:80vh) would
   otherwise force a near-viewport-tall box and its own flex layout. */
.tw-cart-empty {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 0 !important;
    width: 100%;
    gap: 12px;
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: 18px;
    padding: 52px 20px;
    text-align: center;
    animation: tw-cart-pop 0.3s ease-out;
}

.tw-cart-empty__icon {
    font-size: 44px;
}

.tw-cart-empty__title {
    font-size: 15px;
    font-weight: 800;
}

.tw-cart-empty__sub {
    color: var(--tw-ink2);
    font-size: 12px;
    max-width: 320px;
}

/* !important: `.settings-container .not-found a` (2 classes + the `a` type)
   outranks `.tw-cart-empty .tw-cart-empty__cta` (2 classes, no type). */
.tw-cart-empty .tw-cart-empty__cta {
    background: linear-gradient(110deg, var(--tw-brand), var(--tw-brand-2)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 9px 26px !important;
    font-size: 12.5px;
    font-weight: 800;
    margin-top: 4px;
}

.tw-cart-empty .tw-cart-empty__cta:hover {
    opacity: 0.92;
    color: #fff !important;
}

/* ── Summary sidebar ────────────────────────────────────────────────── */

.tw-cart__aside {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* `.tw-cart-summary` (id="mainSidebar") is a plain structural wrapper —
   deliberately no background/border/padding of its own. The actual card
   chrome lives on the `.summary` div one level in (see below): giving both
   elements a visible box drew two nested cards instead of one. */
.tw-cart-summary {
    display: block;
}

/* The actual coupon/rank/lines/total/button pieces are children of the
   legacy `.summary` div (kept for JS/markup compatibility) — this is the
   ONE visible card (background/border/padding), with a flex column + gap so
   its sections space out. `width: 100%` beats the legacy `.settings-container
   .summary { width: 240px }` rule (equal 2-class specificity, but !important
   removes any doubt about load order), and also the even higher
   `#mainSidebar>.summary{width:340px}` id-based rule in custom.min.css. */
.tw-cart-summary .summary {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-line);
    border-radius: 18px !important;
    padding-inline: 1em !important;
    padding-bottom: 1em !important;
    padding-top: 1em;
    color: var(--tw-ink);
}

.tw-cart-summary__title {
    font-size: 14.5px;
    font-weight: 800;
}

.tw-cart-coupon {
    display: flex;
    gap: 7px;
}

/* Legacy coupon markup (.pay.summary / .inp / .coupon-code) keeps its exact
   ids and classes for cart.blade.php's JS — this only restyles it to sit
   inside the new card. */
.tw-cart-coupon .pay.summary {
    padding: 0 !important;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

/* !important throughout this rule: `.settings-container .pay .inp` (3
   classes) was giving `.inp` its OWN visible background/padding/radius —
   turning it into an outer box wrapping the input's own box, which is
   exactly the "box inside a box" look. `.inp` needs to be a plain, invisible
   flex row so only the input and the button (each styled on their own
   below) are visible. */
.tw-cart-coupon .inp {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* !important throughout: `.settings-container .pay .inp input` (3 classes +
   `input` type) zeroes the field's own left/right padding and makes its
   background transparent — with `.inp` behind it now also transparent (see
   above), the field had no visible fill of its own at all, just a border
   floating over the summary card's background. */
/* Input renders first in DOM (the row's inline-start side, i.e. the right
   edge in RTL) with the button right after it — rounding only the outer
   (start) corners and dropping the border on the shared (end) edge is what
   makes the two read as one connected pill instead of two separate ones
   with a gap. */
.tw-cart-coupon .inp input,
.tw-cart-coupon .inp #discount_code_inp {
    flex: 1;
    min-width: 0;
    width: 100% !important;
    height: 40px !important;
    background: var(--tw-surface2) !important;
    border: 1px solid var(--tw-line);
    border-inline-end: none !important;
    border-radius: 0 !important;
    border-start-start-radius: 11px !important;
    border-end-start-radius: 11px !important;
    padding: 0 12px !important;
    color: var(--tw-ink) !important;
    font-size: 11.5px !important;
    font-family: inherit;
    transition: border-color 0.25s;
}

.tw-cart-coupon .inp input:focus {
    outline: none;
    border-color: var(--tw-brand);
}

/* !important on padding: `.settings-container .pay .inp button` (3 classes)
   zeroes button padding, collapsing it to the size of its icon+label alone. */
/* height matches the input exactly (40px, border-box) instead of relying on
   padding to happen to add up the same — the button has no text baseline/
   line-height in common with the input, so padding alone left it visibly
   shorter than the field next to it. */
.tw-cart-coupon .inp button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    border-start-end-radius: 11px !important;
    border-end-end-radius: 11px !important;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid var(--tw-line);
    border-inline-start: none !important;
    background: var(--tw-chip);
    color: var(--tw-ink);
    font-family: inherit;
    white-space: nowrap;
}

/* Apply-coupon arrow only — follows active site theme brand (e.g. national day green). */
.tw-cart-coupon .inp #apply-coupon svg {
    color: var(--tw-brand);
}

.tw-cart-coupon .inp #cancel-coupon,
.tw-cart-coupon .inp #cancel-invalid-coupon {
    background: rgba(var(--tw-brand-rgb), 0.1);
    color: var(--tw-brand);
    border-color: rgba(var(--tw-brand-rgb), 0.3);
}

/* `.settings-container .pay.summary span` (3 classes + `span` type) forces
   width:40%/padding:5px/font-size:13px on ANY span inside .pay.summary —
   including these badge/label spans — so it's reset first before the more
   specific rules below style each one on purpose. */
.tw-cart-coupon .pay.summary span {
    width: auto !important;
    padding: 0 !important;
    font-size: inherit !important;
}

.tw-cart-coupon .coupon-code {
    align-items: center;
    gap: 7px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 10px;
    padding: 6px 11px;
    color: var(--tw-good);
    font-size: 11px;
    font-weight: 700;
    animation: tw-cart-pop 0.3s ease-out;
}

.tw-cart-coupon .coupon-code.active {
    display: flex;
    justify-content: space-between;
}

.tw-cart-coupon .coupon-code .main {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tw-cart-coupon .coupon-code .main i {
    color: var(--tw-good);
}

.tw-cart-coupon .coupon-code .main span.remove {
    color: var(--tw-brand);
    cursor: pointer;
    font-weight: 700;
}

.tw-cart-coupon .coupon-code .disc {
    color: var(--tw-good);
    font-weight: 800;
}

#discount_code {
    color: #ef4444;
    font-size: 11px;
    text-align: start !important;
    margin: 0 !important;
}

.tw-cart-rank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tw-cart-rank .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    color: #fff;
}

.tw-cart-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
    border-top: 1px dashed var(--tw-line);
    padding-top: 12px;
}

/* !important on font-size/margin only: `.settings-container .summary
   .discount` (3 classes) still matches this row (the `.discount` class is
   kept for JS-free styling continuity) and outranks these 2-class rules on
   font-size/margin-bottom, even though display/justify-content already
   agree with it. */
.tw-cart-lines .discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 !important;
    font-size: 12.5px !important;
}

.tw-cart-lines .discount > span:first-child {
    color: var(--tw-ink2);
}

.tw-cart-lines .rank-cashback-note {
    color: var(--tw-ink2);
    font-size: 11px;
    opacity: 0.85;
    margin-top: -2px;
}

.tw-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1.5px dashed var(--tw-line);
    padding-top: 10px;
    width: 100%;
}

.tw-cart-total b:first-child {
    font-size: 14px;
    font-weight: 800;
}

.tw-cart-total .total-price {
    color: var(--tw-brand);
    font-size: 19px;
    font-weight: 800;
    direction: ltr;
}

/* !important: the checkout CTA keeps the legacy `.checkOut` class (the GTM
   script selects the payment-modal trigger by a data attribute, not this
   class, but the class stays for continuity) — `.settings-container
   .checkOut` (2 classes) otherwise wins on background/width/padding/border. */
.tw-cart-checkout {
    display: block !important;
    width: auto;
    text-align: center;
    background: linear-gradient(110deg, var(--tw-brand), var(--tw-brand-2)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800;
    border-radius: 999px !important;
    padding: 12px !important;
    font-size: 13.5px !important;
    box-shadow: 0 12px 28px rgba(var(--tw-brand-rgb), 0.3);
    transition: transform 0.15s, opacity 0.15s;
}

.tw-cart-checkout:hover {
    opacity: 0.94;
    color: #fff !important;
}

.tw-cart-gift {
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: 16px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-cart-gift__icon {
    font-size: 20px;
}

.tw-cart-gift__title {
    font-size: 12px;
    font-weight: 700;
}

.tw-cart-gift__sub {
    color: var(--tw-ink2);
    font-size: 10.5px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .tw-cart {
        flex-direction: column;
    }

    .tw-cart__aside {
        width: 100%;
        position: static;
    }

    .tw-cart-item {
        flex-wrap: wrap;
    }

    .tw-cart-item__price {
        align-items: flex-start;
    }
}

/* Mobile mockup: art + name/meta + delete on one row, qty stepper + price
   on a second row below a dashed divider. __top/__bottom stop being
   display:contents here and become two independent flex rows instead — a
   single grid sharing column tracks between the 3-cell top row and the
   2-cell bottom row sized the columns wrong (the "auto" art/delete columns
   and the "1fr" body column fought with the differently-shaped qty/price
   row sharing the same tracks), leaving a large gap between the name and
   the product art. Two separate flex rows have no such shared-track
   constraint — each sizes itself from only its own two or three children. */
@media (max-width: 560px) {
    .tw-cart-item {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        row-gap: 10px;
    }

    .tw-cart-item__top,
    .tw-cart-item__bottom {
        display: flex;
        width: 100%;
    }

    .tw-cart-item__top {
        align-items: flex-start;
        gap: 14px;
    }

    .tw-cart-item__bottom {
        align-items: center;
        justify-content: space-between;
        border-top: 1px dashed var(--tw-line);
        padding-top: 9px;
    }

    .tw-cart-item__price {
        align-items: flex-end;
    }
}

/* ── Mobile: hide the account sidebar site-wide ────────────────────────
   Applies to every account-area page (account, wallet, cart, orders,
   notifications, my-cards, rank, t-points, saved-validation-accounts,
   wheel of fortune) via the shared .settings-container wrapper — the
   bottom nav bar's own "My Account"/cart links stay the primary mobile
   navigation instead. */
@media (max-width: 767.98px) {
    .settings-container .settings-row-container > .main-sideBar:not(.cart-summary-con) {
        display: none;
    }
}

/* ── Mobile: fixed bar replaces the inline total/checkout ──────────────── */
@media (max-width: 767.98px) {
    .tw-cart-summary__pay {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--tw-mnav-h, 0px);
        z-index: 1020;
        display: flex;
        flex-direction: column;
        gap: 9px;
        background: var(--tw-surface);
        border-top: 1px solid var(--tw-line);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .tw-cart-summary__pay .tw-cart-total {
        border-top: none;
        padding-top: 0;
    }

    .tw-cart-summary__pay .tw-cart-checkout {
        box-shadow: none;
    }

    /* Leaves room at the bottom of the page for the fixed pay bar sitting
       above the site's own bottom nav bar, so the last card (the gift
       teaser) never ends up hidden behind either of them. Generous on
       purpose — a little extra scroll space is harmless, a hidden card
       under two stacked fixed bars is not. */
    .tw-cart__aside {
        padding-bottom: 190px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Page shell + account sidebar — reskin applied site-wide.
   `.settings-container` is the shared wrapper every account-area page
   renders (cart, account, wallet, orders, notifications, my-cards, rank,
   t-points, saved-validation-accounts, wheel of fortune, commission
   marketer, …) around `web.layouts.account-info` + `web.layouts.aside`, so
   scoping these rules to it reskins the header card and sidebar the same
   way everywhere those partials appear, without touching either partial's
   markup — every link, icon and badge stays exactly as it is.
   ══════════════════════════════════════════════════════════════════════ */

.settings-container {
    width: 1280px !important;
    max-width: calc(100vw - 2rem) !important;
}

.settings-container .settings-nav {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-line);
    border-radius: 18px;
    padding: 10px !important;
    gap: 3px !important;
    box-shadow: var(--tw-shadow);
}

/* Legacy collapses the sidebar to 150px/100% below 650px (see
   style.rtl.min.css breakpoints) — this only widens it back to the mockup's
   228px on desktop, so the mobile stacked layout stays intact.
   `.settings-nav`'s OWN wrapper (`.main-sideBar`, from aside.blade.php) is a
   flex item pinned to a 210px flex-basis by custom.min.css
   (`.settings-row-container>.main-sideBar:not(.cart-summary-con)`) — widening
   only the inner `.settings-nav` without this made it overflow its 210px-wide
   flex item and bleed into the item list next to it. `:not(.cart-summary-con)`
   keeps this off the order-summary card, which also carries `.main-sideBar`. */
@media (min-width: 651px) {
    .settings-container .settings-row-container > .main-sideBar:not(.cart-summary-con) {
        flex: 0 0 228px !important;
        width: 228px !important;
    }

    .settings-container .settings-nav {
        width: 228px !important;
    }
}

.settings-container .settings-nav .box {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    gap: 9px !important;
    font-size: 12.5px;
    font-weight: 700;
    transition: background 0.25s;
}

.settings-container .settings-nav .box:hover {
    background: var(--tw-chip);
}

.settings-container .settings-nav .box span,
.settings-container .settings-nav .box i {
    color: var(--tw-ink2);
}

.settings-container .settings-nav .box svg {
    flex-shrink: 0;
}

/* Active row is a filled brand gradient (white labels). Staging tinted
   these SVGs with --primary, which disappears on that background. */
.settings-container .settings-nav .box.active:not(.commission-marketer-nav) svg:not(.rank-icon):not(.nav-icon) path {
    fill: #fff !important;
}

.settings-container .settings-nav .box.active:not(.commission-marketer-nav) svg:not(.rank-icon):not(.nav-icon) circle,
.settings-container .settings-nav .box.active:not(.commission-marketer-nav) svg:not(.rank-icon):not(.nav-icon) path[stroke] {
    stroke: #fff !important;
}

/* :not(.commission-marketer-nav) leaves that item's own gradient (set in
   custom.min.css) alone — this only reskins the plain nav rows. */
.settings-container .settings-nav .box.active:not(.commission-marketer-nav) {
    background: linear-gradient(110deg, var(--tw-brand), var(--tw-brand-2)) !important;
    box-shadow: 0 8px 20px rgba(var(--tw-brand-rgb), 0.25);
}

.settings-container .settings-nav .box.active:not(.commission-marketer-nav) span,
.settings-container .settings-nav .box.active:not(.commission-marketer-nav) i {
    color: #fff !important;
}

.settings-container .settings-nav .box .dot {
    background-color: var(--tw-brand) !important;
}

.settings-container .settings-nav .box.active:not(.commission-marketer-nav) .dot {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Toast reskin — cart page only ─────────────────────────────────────
   #response-message (web.layouts.response-message) is shared site-wide and
   sits outside .settings-container in the DOM (fixed position), so it can't be
   reached with a descendant selector — :has() scopes it to pages that
   render the cart body/empty-state without touching the shared partial or
   any other page. Falls back to Bootstrap's own alert look on browsers
   without :has() support. */
body:has(.settings-container) #response-message {
    background: var(--tw-surface) !important;
    color: var(--tw-ink) !important;
    border: 1px solid var(--tw-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--tw-pop-shadow) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 18px !important;
}

body:has(.settings-container) #response-message.alert-success {
    border-inline-start: 4px solid var(--tw-good) !important;
}

body:has(.settings-container) #response-message.alert-danger {
    border-inline-start: 4px solid var(--tw-brand) !important;
}

/* ── Account-info top bar — every account-area page ────────────────────
   Legacy hides this strip only on the cart page specifically
   (`.settings-container.cart-container .account-info{display:none}` — a
   cart-only rule, untouched); this reskin's `display:flex !important` below
   un-hides it there too, so cart now shows the same header card as every
   other account page instead of nothing. web.layouts.account-info renders
   the wallet/T-Points chips + "member since" line by default now (see its
   $showWalletPoints flag) — this CSS is what makes that card look right,
   here on every page that shares `.settings-container`. */
/* margin-top replaces the legacy `.settings-container{margin-top:10em}` —
   sized for the fixed header (--tw-header-h) instead of the arbitrary 160px
   the legacy rule uses, which read as a big empty gap above this card.
   margin-bottom cancels the legacy `.account-info{margin-bottom:2em}` so it
   doesn't stack with `.settings-container`'s own `gap:2em` and double the
   space below the card too. */
.settings-container {
    margin-top: calc(var(--tw-header-h) + 24px) !important;
}

.settings-container .account-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: 18px;
    padding: 14px 20px;
    box-shadow: var(--tw-shadow);
}

.tw-account-info__sub {
    color: var(--tw-ink2);
    font-size: 11px;
    margin-top: 2px;
}

.tw-account-info__chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-account-info__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tw-chip);
    border: 1px solid var(--tw-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11.5px;
    color: var(--tw-ink2);
    white-space: nowrap;
}

.tw-account-info__chip-icon {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 15px;
    object-fit: contain;
}

.tw-account-info__chip-ic {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background-color: rgba(244, 63, 94, .15);
    color: #f43f5e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.tw-account-info__chip--tpoints .tw-account-info__chip-icon,
.tw-account-info__chip--tpoints svg.tw-account-info__chip-icon {
    width: 14px;
    height: 14px;
    color: inherit;
}

.tw-account-info__chip b {
    color: var(--tw-ink);
    font-weight: 800;
}

.tw-account-info__chip--tpoints {
    background: rgba(255, 182, 64, 0.1);
    border-color: rgba(255, 182, 64, 0.3);
    color: #c07f1d;
}

.tw-account-info__chip--tpoints b {
    color: #c07f1d;
}

@media (max-width: 560px) {
    .settings-container .account-info {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* `#cart-form` also carries Bootstrap's `.row` class (a leftover from
   before this redesign — nothing inside it uses Bootstrap's column grid
   any more), whose negative left/right margins push the row wider than its
   flex slot in `.settings-row-container`. That extra width is what made the
   order-summary card's outer edge sit further out than the account-info
   card's edge above it, instead of the two lining up. */
.cart-container #cart-form.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}