/* ───────────────────────────────────────────────────────────
   FlipR — Cart & Checkout
   Inherits landing.css tokens (black · mint-green · Archivo/Mono).
   Stripe Payment Element mock styled into the FlipR system.
   ─────────────────────────────────────────────────────────── */

/* the [hidden] attribute must win over the display rules below */
[hidden] { display:none !important; }

/* ── Page shell ──────────────────────────────────── */
.co-page { min-height:100vh; padding-bottom:clamp(3rem,6vw,6rem); }
.co-head {
  position:relative; overflow:hidden;
  padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.6rem,3vw,2.4rem);
}
.co-head .eyebrow { margin-bottom:.9rem; }
.co-title {
  font-size:clamp(2.4rem,6vw,4.2rem); font-weight:900; line-height:.92;
  letter-spacing:-.04em;
}
.co-title .green { color:var(--green); }
.co-sub {
  margin-top:.9rem; font-family:"IBM Plex Mono", monospace;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid);
  display:flex; gap:1.2rem; flex-wrap:wrap;
}
.co-sub span { display:inline-flex; align-items:center; gap:.45rem; }
.co-sub .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

/* slim checkout topbar */
.co-bar { border-bottom:1px solid transparent; }
.co-bar .secure {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"IBM Plex Mono", monospace; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mid);
}
.co-bar .secure svg { width:13px; height:13px; }
.co-bar .secure .lock-arc { stroke:var(--green); }

/* ── Layout grid ─────────────────────────────────── */
.co-grid {
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1rem,2.4vw,1.6rem);
  align-items:start;
}
.co-grid.summary-right { grid-template-columns:1.05fr 1fr; }
.co-grid.summary-right .co-summary { order:2; }
.co-grid.summary-right .co-pay { order:1; }
.co-grid.stacked { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
.co-grid.stacked .co-summary,
.co-grid.stacked .co-pay { order:0; }

.co-card {
  border:1px solid var(--line); border-radius:18px; background:var(--panel);
  padding:clamp(1.4rem,2.6vw,2rem);
}
.co-card.is-pay { background:linear-gradient(180deg, rgba(56,236,160,.04), var(--panel) 42%); }
.card-label {
  font-family:"IBM Plex Mono", monospace; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.1rem;
  display:flex; align-items:center; gap:.5rem;
}
.card-label::after { content:""; flex:1; height:1px; background:var(--line); }

/* ── Plan switcher (segmented) ───────────────────── */
.plan-switch {
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.4rem;
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2); margin-bottom:1.3rem;
}
.plan-switch button {
  position:relative; text-align:left; border:1px solid transparent; border-radius:10px;
  padding:.85rem .9rem; background:transparent; color:var(--ink-soft);
  display:grid; gap:.2rem; transition:border-color .18s, background-color .18s, color .18s;
}
.plan-switch button:hover { color:var(--ink); }
.plan-switch button.on { background:rgba(56,236,160,.07); border-color:var(--green); color:var(--ink); }
.plan-switch .ps-term { font-size:.92rem; font-weight:800; letter-spacing:-.01em; }
.plan-switch .ps-price {
  font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.06em; color:var(--ink-mid);
}
.plan-switch button.on .ps-price { color:var(--green); }
.plan-switch .ps-save {
  position:absolute; top:-.55rem; right:.6rem;
  font-family:"IBM Plex Mono", monospace; font-size:.52rem; letter-spacing:.12em; text-transform:uppercase;
  color:#04130c; background:var(--green); border-radius:999px; padding:.16rem .5rem; font-weight:700;
}

/* ── Line item ───────────────────────────────────── */
.li {
  display:grid; grid-template-columns:54px 1fr auto; gap:1rem; align-items:start;
  padding:1.1rem 0; border-top:1px solid var(--line);
}
.li-thumb {
  width:54px; height:54px; border-radius:12px; overflow:hidden; position:relative;
  background:radial-gradient(120% 120% at 30% 20%, rgba(56,236,160,.22), transparent 60%), #0c100d;
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
}
.li-thumb img { width:34px; height:34px; }
.li-body .li-name { font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.li-body .li-meta {
  margin-top:.3rem; font-family:"IBM Plex Mono", monospace; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.li-feats { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.li-feats span {
  font-family:"IBM Plex Mono", monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:.24rem .55rem;
}
.li-right { text-align:right; display:grid; gap:.5rem; justify-items:end; }
.li-price { font-size:1.05rem; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.li-remove {
  width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--ink-mute); font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;
}
.li-remove:hover { border-color:var(--red); color:var(--red); }

/* ── Promo ───────────────────────────────────────── */
.promo { margin-top:1.1rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.promo-row { display:flex; gap:.5rem; }
.promo-row input {
  flex:1; min-width:0; height:46px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--ink); padding:0 .95rem; font:inherit; font-size:.9rem;
  letter-spacing:.06em;
}
.promo-row input::placeholder { color:var(--ink-mute); letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; }
.promo-row input:focus { outline:none; border-color:var(--green); }
.promo-apply {
  height:46px; padding:0 1.1rem; border-radius:10px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); font-weight:700; font-size:.82rem;
  transition:border-color .15s, background-color .15s, color .15s; white-space:nowrap;
}
.promo-apply:hover { border-color:#fff; }
.promo-msg {
  margin-top:.6rem; font-family:"IBM Plex Mono", monospace; font-size:.64rem;
  letter-spacing:.1em; min-height:1em; display:none;
}
.promo-msg.ok { color:var(--green); display:block; }
.promo-msg.err { color:var(--red); display:block; }
.promo-tag {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; white-space:nowrap;
  font-family:"IBM Plex Mono", monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); border:1px dashed var(--green); border-radius:999px; padding:.32rem .7rem;
}
.promo-tag button { background:none; border:none; color:var(--ink-mute); font-size:.9rem; line-height:1; padding:0; }
.promo-tag button:hover { color:var(--red); }

/* ── Totals ──────────────────────────────────────── */
.totals { margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); display:grid; gap:.65rem; }
.totals .t-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; white-space:nowrap;
  font-family:"IBM Plex Mono", monospace; font-size:.8rem; color:var(--ink-soft);
}
.totals .t-row .lbl { letter-spacing:.06em; }
.totals .t-row.muted { color:var(--ink-mute); font-size:.72rem; }
.totals .t-row.discount b { color:var(--green); }
.totals .t-row b { color:var(--ink); font-variant-numeric:tabular-nums; }
.totals .t-grand {
  margin-top:.5rem; padding-top:1rem; border-top:1px dashed var(--dash);
  display:flex; justify-content:space-between; align-items:baseline;
}
.totals .t-grand .lbl { font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.totals .t-grand b { font-size:1.9rem; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.totals .t-grand b .cur { color:var(--green); }

/* ── Empty cart ──────────────────────────────────── */
.co-empty { display:none; text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem; }
.co-empty.show { display:block; }
.co-empty .ec-mark {
  width:66px; height:66px; margin:0 auto 1.3rem; border-radius:16px;
  border:1px dashed var(--dash); display:flex; align-items:center; justify-content:center;
  color:var(--ink-mute);
}
.co-empty .ec-mark svg { width:30px; height:30px; }
.co-empty h3 { font-size:1.4rem; font-weight:900; letter-spacing:-.02em; }
.co-empty p { margin-top:.6rem; color:var(--ink-mid); font-size:.92rem; font-weight:600; }
.co-empty .btn { margin-top:1.4rem; }
.co-summary.is-empty .summary-body { display:none; }
.co-summary.is-empty .co-empty { display:block; }

/* ── Payment / Stripe Element mock ───────────────── */
.express { display:grid; gap:.55rem; margin-bottom:1.2rem; }
.express-row { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.wallet {
  height:48px; border-radius:10px; border:1px solid transparent; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:.45rem; font-size:.95rem;
  letter-spacing:.01em; transition:transform .14s ease, box-shadow .14s ease, filter .14s;
}
.wallet:hover { transform:translateY(-1px); }
.wallet.apple { background:#fff; color:#000; }
.wallet.apple:hover { box-shadow:0 10px 26px rgba(255,255,255,.16); }
.wallet.gpay { background:#fff; color:#3c4043; }
.wallet.gpay:hover { box-shadow:0 10px 26px rgba(255,255,255,.16); }
.wallet.link {
  grid-column:1 / -1; background:#00d66f; color:#06231a;
}
.wallet.link:hover { filter:brightness(1.05); }
.wallet .alogo { font-size:1.15rem; line-height:1; transform:translateY(-1px); }
.wallet .gb { color:#4285f4; } .wallet .gr { color:#ea4335; } .wallet .gy { color:#fbbc04; } .wallet .gg { color:#34a853; }
.wallet .lk-mark { font-weight:900; letter-spacing:-.02em; }

.pay-or {
  display:flex; align-items:center; gap:1rem; margin:1.1rem 0;
  font-family:"IBM Plex Mono", monospace; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pay-or::before, .pay-or::after { content:""; flex:1; height:1px; background:var(--line); }

/* Stripe-style field group */
.field { margin-bottom:.8rem; }
.field > label {
  display:block; font-size:.78rem; font-weight:700; color:var(--ink-soft);
  margin-bottom:.45rem; letter-spacing:.01em;
}
.s-input {
  width:100%; height:48px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--ink); padding:0 .95rem; font:inherit; font-size:.95rem;
  transition:border-color .16s, box-shadow .16s;
}
.s-input::placeholder { color:var(--ink-mute); }
.s-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(56,236,160,.16); }
.s-input.invalid { border-color:var(--red); box-shadow:0 0 0 3px rgba(255,69,58,.14); }

/* grouped card box — Stripe Payment Element card tab */
.card-box { border:1px solid var(--line-2); border-radius:10px; background:var(--bg-2); overflow:hidden; transition:border-color .16s, box-shadow .16s; }
.card-box.focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(56,236,160,.16); }
.card-box.invalid { border-color:var(--red); box-shadow:0 0 0 3px rgba(255,69,58,.14); }
.card-line { display:flex; align-items:center; }
.card-line + .card-line { border-top:1px solid var(--line); }
.card-cell { flex:1; display:flex; align-items:center; }
.card-cell + .card-cell { border-left:1px solid var(--line); }
.card-box input {
  width:100%; height:48px; border:none; background:transparent; color:var(--ink);
  padding:0 .95rem; font:inherit; font-size:.95rem; letter-spacing:.02em;
}
.card-box input:focus { outline:none; }
.card-box input::placeholder { color:var(--ink-mute); letter-spacing:.06em; }
.card-brands { display:flex; align-items:center; gap:.3rem; padding-right:.8rem; }
.brand-chip {
  font-family:"IBM Plex Mono", monospace; font-size:.5rem; font-weight:700; letter-spacing:.04em;
  padding:.18rem .32rem; border-radius:4px; color:#fff; opacity:.32; transition:opacity .18s; line-height:1;
}
.brand-chip.visa { background:#1434cb; }
.brand-chip.mc { background:#eb001b; }
.brand-chip.amex { background:#1f72cd; }
.brand-chip.on { opacity:1; }

/* card hand-off explainer (real Stripe collects the card) */
.card-handoff {
  display:flex; align-items:center; gap:.75rem;
  border:1px solid var(--line-2); border-radius:10px; background:var(--bg-2); padding:.85rem .95rem;
}
.card-handoff .ch-ic { color:var(--green); flex-shrink:0; }
.card-handoff .ch-ic svg { width:22px; height:22px; }
.card-handoff .ch-tx { font-size:.78rem; color:var(--ink-soft); line-height:1.45; }
.card-handoff .card-brands { margin-left:auto; padding-right:0; }
.pay-promo-note {
  margin-top:.7rem; text-align:center; font-family:"IBM Plex Mono", monospace;
  font-size:.6rem; letter-spacing:.1em; color:var(--ink-mute);
}

.field-err {
  font-family:"IBM Plex Mono", monospace; font-size:.62rem; letter-spacing:.06em;
  color:var(--red); margin-top:.5rem; min-height:1em; display:none;
}
.field-err.show { display:block; }

/* declined banner */
.pay-banner {
  display:none; align-items:flex-start; gap:.7rem; padding:.85rem 1rem; margin-bottom:1.1rem;
  border:1px solid var(--red); border-radius:10px; background:rgba(255,69,58,.08);
}
.pay-banner.show { display:flex; }
.pay-banner .pb-ic { color:var(--red); flex-shrink:0; margin-top:.05rem; }
.pay-banner .pb-tx b { display:block; font-size:.86rem; font-weight:800; color:#ffd9d6; }
.pay-banner .pb-tx span { font-size:.78rem; color:var(--ink-soft); }

/* pay button + spinner */
.pay-btn { width:100%; height:56px; margin-top:.5rem; font-size:1rem; }
.pay-btn:disabled { opacity:.7; cursor:default; transform:none; }
.pay-btn .spin {
  width:17px; height:17px; border-radius:50%; border:2px solid rgba(4,19,12,.35);
  border-top-color:#04130c; animation:cospin .7s linear infinite; display:none;
}
.pay-btn.busy .spin { display:inline-block; }
.pay-btn.busy .lbl { opacity:.85; }
@keyframes cospin { to { transform:rotate(360deg); } }

.pay-foot {
  margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace; font-size:.62rem; letter-spacing:.1em; color:var(--ink-mute);
}
.pay-foot .powered { display:inline-flex; align-items:center; gap:.4rem; }
.pay-foot .powered b { color:var(--ink-soft); letter-spacing:.02em; font-weight:700; text-transform:none; font-size:.74rem; }
.pay-foot .powered .stripe-mark { color:#a6b6ff; font-weight:800; letter-spacing:-.01em; font-size:.78rem; }
.test-hint {
  margin-top:.8rem; padding:.7rem .85rem; border:1px dashed var(--line-2); border-radius:9px;
  font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.06em; color:var(--ink-mute); line-height:1.6;
}
.test-hint b { color:var(--ink-soft); }
.test-hint .ok { color:var(--green); cursor:pointer; }
.test-hint .no { color:var(--red); cursor:pointer; }

/* ── Success screen ──────────────────────────────── */
.co-success { display:none; }
.co-page.is-success .co-grid { display:none; }
.co-page.is-success .co-success { display:block; }
.success-card {
  max-width:560px; margin:0 auto; text-align:center;
  border:1px solid var(--line); border-radius:22px; background:var(--panel);
  padding:clamp(2rem,5vw,3.4rem); position:relative; overflow:hidden;
}
.success-card .glow { position:absolute; inset:auto 0 auto 0; top:-30%; height:60%; background:radial-gradient(50% 100% at 50% 0%, var(--green-glow), transparent 70%); opacity:.6; pointer-events:none; }
.succ-check {
  position:relative; width:74px; height:74px; margin:0 auto 1.4rem; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(56,236,160,.12), 0 14px 40px var(--green-glow);
}
.succ-check svg { width:36px; height:36px; }
.succ-check svg path { stroke:#04130c; }
.co-success h2 { position:relative; font-size:clamp(1.9rem,4.5vw,2.8rem); font-weight:900; letter-spacing:-.03em; line-height:.98; }
.co-success h2 .green { color:var(--green); }
.co-success .succ-sub { position:relative; margin-top:.8rem; color:var(--ink-soft); font-size:1rem; font-weight:600; }
.co-success .succ-sub b { color:var(--ink); }

.license-box {
  position:relative; margin:1.8rem auto 0; max-width:420px;
  border:1px dashed var(--dash); border-radius:14px; background:var(--bg-2);
  padding:1.2rem 1.3rem; text-align:left;
}
.license-box .lk-lbl { font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.license-box .lk-key {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.6rem;
}
.license-box .lk-key code {
  font-family:"IBM Plex Mono", monospace; font-size:1.02rem; letter-spacing:.08em; color:var(--green); font-weight:600;
  word-break:break-all;
}
.lk-copy {
  flex-shrink:0; height:34px; padding:0 .8rem; border-radius:8px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); font-family:"IBM Plex Mono", monospace; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; transition:border-color .15s, color .15s;
}
.lk-copy:hover { border-color:var(--green); color:var(--green); }
.lk-copy.done { border-color:var(--green); color:var(--green); }

.succ-meta {
  position:relative; margin-top:1.6rem; display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace; font-size:.64rem; letter-spacing:.1em; color:var(--ink-mute);
}
.succ-meta .v { display:block; color:var(--ink); font-size:.86rem; letter-spacing:.02em; margin-top:.25rem; font-weight:600; }
.succ-actions { position:relative; margin-top:1.9rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

/* ── Reassurance strip under grid ───────────────── */
.co-assure {
  margin-top:clamp(1.4rem,3vw,2rem); display:flex; gap:2rem; flex-wrap:wrap; justify-content:center;
  font-family:"IBM Plex Mono", monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.co-assure span { display:inline-flex; align-items:center; gap:.5rem; }
.co-assure .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width:860px) {
  .co-grid, .co-grid.summary-right { grid-template-columns:1fr; }
  .co-grid.summary-right .co-summary { order:0; }
  .co-grid.summary-right .co-pay { order:0; }
}
@media (max-width:440px) {
  .express-row { grid-template-columns:1fr; }
  .li { grid-template-columns:44px 1fr; }
  .li-right { grid-column:1 / -1; flex-direction:row; justify-items:stretch; }
}
@media (prefers-reduced-motion:reduce) {
  .pay-btn .spin { animation:none; }
}