/**
 * Cart Hopper — inline bundle-size swap (chips + ledger + states).
 *
 * Extends cart-hopper-bundle-item.css. Design tokens fall back to hex so the
 * block renders correctly outside a .cfe token scope (per CFE token rules).
 * Ink #1B2A3B / sky #3E8AB8 / mint #0F7A2A / ember #B85C0A / fog #E8EAED.
 */

.cfe-line__swap {
    font-family: var(--cfe-ds-font-sans, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.cfe-line__swap-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin-top: 4px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--cfe-ds-sky, #3E8AB8);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cfe-line__swap-toggle:hover,
.cfe-line__swap-toggle:focus {
    color: #000;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    text-decoration: underline !important;
}

/* Animated open/close. The panel is a 1-row grid collapsed to 0fr; animating
   the track to 1fr eases to the real content height (no max-height guess). The
   panel clips, the inner carries the visual box. */
.cfe-line__swap-panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows .28s ease, opacity .18s ease, margin-top .28s ease;
}
.cfe-line__swap.is-open .cfe-line__swap-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 8px;
}
.cfe-line__swap-panel-inner {
    min-height: 0;
    overflow: hidden;
    padding: 10px;
    border: 1px solid var(--cfe-ds-fog, #E8EAED);
    border-radius: 10px;
    background: var(--cfe-ds-paper, #fff);
}
@media (prefers-reduced-motion: reduce) {
    .cfe-line__swap-panel { transition: none; }
}

.cfe-line__swap-nudge {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--cfe-ds-color-mint-text, #0F7A2A);
}

.cfe-line__swap-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cfe-ds-slate, #5B6573);
}

/* Tier chip strip — horizontal scroll, never wraps. */
.cfe-line__rchips {
    display: flex;
    gap: 5px;
    padding-top: 12px;
    padding-bottom: 2px;
}

.cfe-line__rchip {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 4px;
    border: 1px solid var(--cfe-ds-fog, #E8EAED);
    border-radius: 9px;
    background: var(--cfe-ds-paper, #fff);
    color: var(--cfe-ds-ink, #1B2A3B);
    font: inherit;
    line-height: 1.1;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.cfe-line__rchip:hover:not(.is-active) { border-color: var(--cfe-ds-sky, #3E8AB8); }
.cfe-line__rchip-n {
    font-family: var(--cfe-ds-font-display, "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 16px;
    font-weight: 700;
}
.cfe-line__rchip.is-active {
    background: var(--cfe-ds-ink, #1B2A3B);
    border-color: var(--cfe-ds-ink, #1B2A3B);
    color: #fff;
    cursor: default;
}

/* Savings ledger. */
.cfe-line__ledger { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.cfe-line__ledger-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--cfe-ds-slate, #5B6573);
}
.cfe-line__ledger-row s { color: var(--cfe-ds-slate, #5B6573); }
.cfe-line__ledger-row--total {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--cfe-ds-fog, #E8EAED);
    color: var(--cfe-ds-ink, #1B2A3B);
    font-weight: 600;
}
.cfe-line__ledger-row--total strong { color: var(--cfe-ds-mint, #0F7A2A); }

/* Loading + error states (server round-trip per swap). */
.cfe-line__swap.is-loading { pointer-events: none; opacity: .6; }
.cfe-line__rchip.is-pending {
    background: var(--cfe-ds-sky, #3E8AB8);
    border-color: var(--cfe-ds-sky, #3E8AB8);
    color: #fff;
}
.cfe-line__swap-error {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cfe-ds-ember, #B85C0A);
}

/* Recommended tier — MINT tint + a "Covers all" tab. No ring (a ring reads as
   a selection affordance) and never orange (ember is reserved for the overflow
   warning). Reads as a positive suggestion, distinct from the solid-ink
   "selected" chip. */
.cfe-line__rchip { position: relative; }
.cfe-line__rchip.is-recommended,
.cfe-line__rchip.is-recommended:hover {
    background: var(--cfe-ds-color-mint-bg, #ECFDF5);
    border-color: var(--cfe-ds-color-mint-border, #6EE7B7);
    box-shadow: none;
    color: var(--cfe-ds-color-mint-text, #0F7A2A);
}
.cfe-line__rchip.is-recommended .cfe-line__rchip-n {
    color: var(--cfe-ds-color-mint-text, #0F7A2A);
}

/* "Covers all" tab floating above the recommended chip. */
.cfe-line__rchip-tab {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--cfe-ds-color-mint-text, #0F7A2A);
    color: #fff;
    font-family: var(--cfe-ds-font-sans, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(15, 122, 42, .28);
}

/* Combined: the recommended tier is also the selection. Solid ink wins (white
   number); the mint tab stays as a standing label above the dark chip. */
.cfe-line__rchip.is-active.is-recommended,
.cfe-line__rchip.is-active.is-recommended:hover {
    background: var(--cfe-ds-color-ink, #1B2A3B);
    border-color: var(--cfe-ds-color-ink, #1B2A3B);
}
.cfe-line__rchip.is-active.is-recommended .cfe-line__rchip-n {
    color: #fff;
}

/* Plain-language coverage line below the ledger: mint when the selected tier
   covers the cart, ember (warning) on a shortfall. */
.cfe-line__coverage {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}
.cfe-line__coverage svg,
.cfe-line__coverage i { flex: 0 0 auto; margin-top: 1px; }
.cfe-line__coverage--ok { color: var(--cfe-ds-color-mint-text, #0F7A2A); }
.cfe-line__coverage--short { color: var(--cfe-ds-ember, #B85C0A); }