/* ============================================================================
   Shared cart styles — single source of truth for the persistent cart.
   Used by the landing wizard (index.html) AND the global cart widget
   (cart-widget.js) on every other page, so the badge + mini-cart look
   identical everywhere.

   Extracted from templates/index.html (was inline). Width/overflow fixes were
   added here so long routes/dates truncate instead of overflowing narrow
   phone screens (Android + iOS), and the sheet honors side safe-area insets.
   ============================================================================ */

/* Scroll-root guard. cart.css is the one shared stylesheet included on the
   cart-bearing pages that don't load main/skylight (e.g. billing, profile), so
   the sideways-overflow guard lives here too. `clip` keeps vertical scroll. */
html, body { overflow-x: clip; max-width: 100%; }

/* Compact cart row — a dated flight collapsed to one line */
.cart-row {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--rule); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px;
}
.cart-row-main {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    min-width: 0;
}
.cart-row-line { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.cart-row-flight {
    font-weight: 700; color: var(--ink); font-size: 15px;
    flex: 0 0 auto; min-width: 0;
}
.cart-row-route {
    color: var(--ink-3); font-size: 13px; white-space: nowrap;
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cart-row-legchip { font-size: 11px; font-weight: 600; color: var(--accent-ink);
    background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    flex: 0 0 auto; }
.cart-row-date   { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 600;
    white-space: nowrap; flex: 0 0 auto; }
.cart-row-date.missing { color: var(--ink-3); font-weight: 500; }
.cart-row-legsub { font-size: 12px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inline "add another flight" — sits right under the cart rows */
.cart-add-row {
    display: block; width: 100%; margin-top: 2px;
    background: none; border: 1px dashed var(--rule); border-radius: 12px;
    padding: 11px 12px; cursor: pointer;
    color: var(--accent); font-weight: 600; font-size: 14px; text-align: center;
}
.cart-add-row:hover { border-color: var(--accent); background: rgba(67,56,202,.04); }

/* ── Persistent cart button + badge ── */
.nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ink);
    background: transparent; color: var(--ink); cursor: pointer; flex: 0 0 auto; padding: 0;
    transition: background .15s, color .15s; }
.nav-cart:hover { background: var(--ink); color: #fff; }
.nav-cart-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
    box-shadow: 0 0 0 2px #f4f8ff; }

/* Remove (×) button on a cart row */
.btn-remove-leg { flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--ink-3); padding: 0 4px; }
.btn-remove-leg:hover { color: var(--ink); }

/* ── Mini-cart bottom sheet ── */
.mini-cart-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.42);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1300; }
.mini-cart-backdrop.open { opacity: 1; pointer-events: auto; }
.mini-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1310;
    margin: 0 auto;
    /* Pin to the true *visual* viewport width (--app-w, set in JS). Guards the
       mobile bug where position:fixed sizes against a wider *layout* viewport
       when the page overflows sideways, clipping the sheet's right edge (price). */
    width: min(560px, var(--app-w, 100vw)); max-width: 100%; box-sizing: border-box;
    background: #fff; border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(15,23,42,.18); max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden;
    padding: 8px calc(16px + env(safe-area-inset-right, 0px))
             calc(env(safe-area-inset-bottom, 0px) + 16px)
             calc(16px + env(safe-area-inset-left, 0px));
    transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.mini-cart.open { transform: translateY(0); }
.mini-cart-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--rule); margin: 6px auto 10px; }
.mini-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mini-cart-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.mini-cart-head-actions { display: flex; align-items: center; gap: 14px; }
.mini-cart-clear { background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; padding: 0; }
.mini-cart-clear:hover { color: #dc2626; }
.mini-cart-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 4px; }
.mini-cart-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mini-cart-empty { text-align: center; color: var(--ink-3); font-size: 14px; padding: 26px 8px; }
.mini-cart-subtotal { display: flex; align-items: baseline; justify-content: space-between;
    border-top: 1px solid var(--rule); padding-top: 12px; margin-bottom: 12px; }
.mini-cart-subtotal .mc-label { color: var(--ink-3); font-size: 14px; }
.mini-cart-subtotal .mc-amount { font-size: 18px; font-weight: 800; color: var(--ink); }
.mini-cart-actions { display: flex; flex-direction: column; gap: 8px; }
.mini-cart-actions .btn-full { margin: 0; }
.mini-cart-add { background: none; border: 1px dashed var(--rule); border-radius: 12px;
    padding: 12px; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
.mini-cart-add:hover { border-color: var(--accent); }