/* ============================================================
   BYGPAS · CHECKOUT (Stripe Embedded Checkout) — v2 redesign
   ------------------------------------------------------------
   Editorial wrapper around Stripe's embedded payment widget.
   The actual payment form (kort / MobilePay / Apple Pay tabs)
   is rendered by Stripe inside #checkout — we never build a
   custom card/MobilePay form. We own ONLY the page chrome
   (header, order-summary sidebar, fortrydelsesret note).

   v2 (2026-06-07): ported the external "Bygpas Checkout"
   handoff chrome — "Sikker betaling" nav badge, unified
   sectioned order-summary card ("Det får du" → prisopdeling →
   tillidsbadges), card elevation. Opt-in via <body class="v2">
   so the shared v2 radius tokens + wider .wrap apply. The
   mockup's custom payment form + success overlay are NOT ported:
   Stripe owns the payment UI inside #checkout, and the kvittering
   page owns the post-payment success state.

   Token-contract: reads from bygpas-editorial.css. Adds no new
   globals — only checkout-* scoped classes.

   Created 2026-04-29 — the live checkout flow is
   opslag → /checkout.html → Stripe Embedded → /kvittering.html.
   ============================================================ */

.checkout-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.checkout-body main {
  flex: 1;
}

/* Mockup --max is 1020px (`:root`), not body.v2's wider 1180px reading-measure.
   Checkout is a focused two-equal-column composition — the tighter measure is
   what gives it the contained magazine balance. Higher specificity than
   `body.v2 .wrap` (which is 0,2,1) via the .checkout-body.v2 compound (0,3,0). */
.checkout-body.v2 .wrap { max-width: 1020px; }

/* ----------------------------------------------------------------
   Product-aware visibility (F-CODE-DS-2 fix, 2026-05-04).
   Single template serves both /checkout.html?product=report
   (default) and ?product=chat10. JS sets body[data-product].
   Elements with data-product-only="x" are visible only when
   body[data-product]=x.
   ---------------------------------------------------------------- */
.checkout-body[data-product="report"] [data-product-only]:not([data-product-only="report"]) {
  display: none !important;
}
.checkout-body[data-product="chat10"] [data-product-only]:not([data-product-only="chat10"]) {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--ink-1);
  color: var(--paper);
  z-index: 1000;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== NAV (secure lock badge only — mockup nav-right) =====
   The back-action is NOT in the nav; it lives below the H1 as a crumb pill
   (mockup parity). */
.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-weight: 400;
}
.checkout-secure svg {
  color: var(--accent-2);
  flex-shrink: 0;
}

/* ===== HEAD (crumb pill + display title + deck) ===== */
.checkout-head {
  padding-block: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 44px);
}

/* Crumb pill — mockup's .crumb back-affordance above the H1. */
.checkout-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  margin-bottom: 24px;
  transition: background 0.15s, border-color 0.12s;
  text-decoration: none;
}
.checkout-crumb svg { flex-shrink: 0; }
.checkout-crumb:hover {
  background: var(--paper-2);
}
.checkout-crumb:focus-visible {
  outline: none;
  border-color: var(--ink-1);
  background: var(--paper-2);
}

.checkout-h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--ink-1);
}
.checkout-h1 em {
  font-style: italic;
  color: var(--accent-2);
}
.checkout-head-deck {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 12px 0 0;
  max-width: 48ch;
}

/* ===== GRID ===== */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(24px, 3.5vw, 44px);
  padding-bottom: 96px;
  align-items: start;
}
@media (max-width: 860px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Mockup parity: payment card first, summary second on mobile. */
  .checkout-form-col { order: 1; }
  .checkout-summary-col { order: 2; }
}

/* ===== PANELS (form column) ===== */
.checkout-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 40px 80px -54px rgba(30, 26, 22, 0.5);
}

/* Mockup .pay h2 — serif, 19px, weight 600 (no step badge). */
.checkout-panel-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0;
  margin: 0 0 12px;
  line-height: 1.2;
  color: var(--ink-1);
}

.checkout-panel-deck {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 50ch;
}

/* ===== "Betal med kort" divider — static chrome above the Stripe iframe.
   Recovers the mockup's wallet-button / "ELLER BETAL MED KORT" rhythm so the
   left column reads as a real payment panel, not a bare loading box. We do NOT
   build card-number inputs here (PCI — Stripe Embedded owns card entry). ===== */
.checkout-pay-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 20px;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.checkout-pay-divider::before,
.checkout-pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ===== STRIPE MOUNT (Stripe.js renders the payment form here) =====
   min-height tuned so the mounted Stripe form fills a panel comparable to the
   sticky summary card height — the two columns read as balanced, not lopsided. */
.checkout-stripe-mount {
  min-height: 480px;
  border-radius: var(--r-sm);
  background: var(--bg);
  position: relative;
}
.checkout-stripe-mount[data-stripe-status="ready"] {
  background: transparent;
}
.checkout-stripe-mount[data-stripe-status="error"] {
  display: none;
}

.checkout-stripe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.checkout-stripe-mount[data-stripe-status="ready"] .checkout-stripe-loading {
  display: none;
}

.checkout-stripe-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-hard);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: checkout-spin 0.7s linear infinite;
}
@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-stripe-spinner { animation: none; }
}

/* ===== ERROR STATE ===== */
.checkout-error {
  background: var(--risk-soft);
  border: 1px solid var(--risk);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  margin-top: 22px;
  font-family: var(--f-serif);
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.5;
}
.checkout-error strong {
  display: block;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 4px;
  color: var(--risk);
}

/* CTA i fejlboksen (checkout.js → showError(msg, cta)). Uden et link var
   "kør en analyse først" en blindgyde med browserens tilbage-knap som
   eneste vej videre. */
.checkout-error-cta {
  display: inline-block;
  margin-top: 10px;
  font-weight: 500;
  color: var(--accent-2, #3d5128);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkout-error-cta:hover { text-decoration-thickness: 2px; }

/* ===== PAY FINE-PRINT (mockup .pay-fine — terms + privacy) ===== */
.checkout-pay-fine {
  font-family: var(--f-sans);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  margin: 16px 0 0;
  line-height: 1.5;
}
.checkout-pay-fine a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-pay-fine a:hover,
.checkout-pay-fine a:focus-visible {
  color: var(--ink-1);
  outline: none;
}

/* ===== TRUST ROW (under the Stripe mount) ===== */
.checkout-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.checkout-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 500;
}
.checkout-trust-item svg {
  color: var(--accent-2);
  flex-shrink: 0;
}
.checkout-trust-stripe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink-3);
}
.checkout-trust-stripe::before {
  content: '';
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #635BFF 0%, #4F46E5 100%);
  border-radius: 3px;
  flex-shrink: 0;
}

/* ===== SUMMARY (sticky right column — unified sectioned card) =====
   Mockup ports the order summary as ONE bordered card with
   internal sections divided by hairlines (product → "Det får
   du" → prisopdeling → tillidsbadges). overflow:hidden clips
   the section backgrounds to the rounded corners. No box-shadow:
   in the mockup ONLY the payment panel carries elevation — the
   summary card is flat, which is what gives the two-column
   hierarchy (design-review 2026-06-10). */
.checkout-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: sticky;
  top: 96px;
}
@media (max-width: 920px) {
  .checkout-summary {
    position: static;
  }
}

/* --- product header section --- */
.checkout-sum-prod {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.checkout-sum-prod-text {
  min-width: 0;
}
.checkout-sum-prod-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 6px;
  font-weight: 600;
}
.checkout-summary-h2 {
  font-family: var(--f-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
  color: var(--ink-1);
}
.checkout-summary-h2 em {
  font-style: italic;
  color: var(--accent-2);
}
.checkout-target-name {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.checkout-sum-prod-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 5px 0 0;
}
.checkout-target-meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  margin: 7px 0 0;
}

/* Target firm monogram (gradient mark, matches mockup .sum-mono) */
.checkout-target-mark {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  flex-shrink: 0;
}
/* Chat10 has no target firm — a chat-bubble mark instead of a monogram. */
.checkout-chat-mono {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* --- "Det får du" includes section --- */
.checkout-sum-incl {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.checkout-sum-incl-head {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  font-weight: 600;
}
.checkout-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
  font-family: var(--f-serif);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.checkout-includes li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 11px;
  align-items: start;
}
.checkout-includes li::before {
  content: '+';
  color: var(--accent-2);
  font-weight: 700;
  font-family: var(--f-sans);
  line-height: 1.4;
}

/* --- price breakdown section --- */
.checkout-sum-price {
  padding: 20px 24px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.checkout-summary-rows {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
}
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-2);
}
.checkout-summary-row b {
  font-family: var(--f-sans);
  font-weight: 500;
  color: var(--ink-1);
}
.checkout-summary-row-muted {
  font-size: 13px;
  color: var(--ink-3);
}

.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
}
.checkout-summary-total b {
  font-family: var(--f-display);
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Unit inherits the display serif (mockup .pr-total .v small) — not mono. */
.checkout-summary-unit {
  font-style: normal;
  font-size: 16px;
  color: var(--ink-3);
  font-family: var(--f-display);
  letter-spacing: 0;
}

/* --- trust footer section — inline chips (mockup .sum-trust / .tr) --- */
.checkout-summary-foot {
  padding: 16px 24px;
  background: var(--paper-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.checkout-summary-tr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.checkout-summary-tr svg {
  color: var(--accent-2);
  flex-shrink: 0;
}

/* Fortrydelsesret — now an in-card fine-print section (last child of the
   summary card), not a standalone paragraph. Sits on the same paper-2 footer
   tone as the trust chips, separated by a hairline, small + muted. */
.checkout-fortrydelsesret {
  font-family: var(--f-serif);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
  padding: 14px 24px 16px;
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
  font-style: italic;
}

/* Page footer removed (2026-06-08 audit): the mockup is deliberately
   chrome-free. Vilkår/Privatliv now live only in the in-panel fine-print. */

/* ===== COOKIE BANNER (checkout-scoped) =====
   The shared banner is a fixed centered floating card; on checkout it could
   visually overlap the sticky summary. Anchor it as a flush full-width bottom
   bar so it reads as page chrome and never covers the order summary. Reserve
   scroll room at the bottom of the grid so content clears it on first paint. */
.checkout-body #cookie-banner.cookie-banner {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  z-index: 200;
}
.checkout-body:has(#cookie-banner.cookie-banner:not(.hidden)) .checkout-grid {
  padding-bottom: clamp(140px, 18vh, 200px);
}