/* ==========================================================================
   Checkout — pure Stripe Embedded Checkout + the order-received page. The
   checkout page is just a frame around Stripe's box; the return/confirmed pages
   render in a grey rounded card. Both use the minimal (centered-logo) shell.
   ========================================================================== */

.checkout {
  background-color: var(--color-bg);
}

.checkout__card {
  background-color: var(--color-bg-alt);
  border-radius: 20px;
  padding: clamp(var(--space-4), 4vw, var(--space-6));
}

.checkout__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.checkout__back:hover {
  color: var(--color-action);
  text-decoration: none;
}
.checkout__back i {
  font-size: 1.1em;
}

/* Stripe injects its responsive box here; hold height so the page doesn't jump. */
.checkout__embed {
  min-height: 60vh;
}

.checkout__notice {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-soft);
}

/* --- Return (payment not completed) --------------------------------------- */
.checkout__return {
  max-width: var(--container-sm);
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}
.checkout__return-icon {
  font-size: 3rem;
}
.checkout__return-icon--ok {
  color: var(--color-sale);
}
.checkout__return-icon--err {
  color: var(--color-danger);
}
.checkout__return-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-primary);
}
.checkout__return-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* --- Order received (confirmation) ---------------------------------------- */
.confirmed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  align-items: center;
}
@media (max-width: 768px) {
  .confirmed {
    grid-template-columns: 1fr;
  }
}

.confirmed__intro {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-3) var(--space-4);
}
.confirmed__thanks {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h1);
  color: var(--color-primary);
}
.confirmed__lead {
  margin: 0;
  color: var(--color-primary);
}
.confirmed__note {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-style: italic;
}
.confirmed__note a {
  font-style: normal;
  color: var(--color-action);
}
.confirmed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.confirmed__back {
  margin-top: var(--space-2);
}
.confirmed__actions .confirmed__back {
  margin-top: 0;
}

.confirmed__summary {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.confirmed__order-no {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
}
/* Emphasis without bold: the brand heading font (Bouygues Speak, weight 400) a
   touch larger — applied to the order number + the total value only. */
.confirmed__order-no-value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15em;
}

.confirmed__cols,
.confirmed__line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
}
.confirmed__cols {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}
.confirmed__cols :nth-child(2),
.confirmed__cols :nth-child(3) {
  text-align: right;
}
.confirmed__line {
  padding-block: var(--space-3);
}
.confirmed__product {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.confirmed__logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.confirmed__product-titles {
  display: flex;
  flex-direction: column;
}
.confirmed__kind {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}
.confirmed__name {
  color: var(--color-primary);
}
.confirmed__operator {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}
.confirmed__qty {
  text-align: right;
  color: var(--color-primary);
}
.confirmed__unit {
  text-align: right;
  color: var(--color-primary);
}
.confirmed__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-lg);
  color: var(--color-primary);
}
.confirmed__total-value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15em;
}
.confirmed__meta {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-primary);
  display: grid;
  gap: var(--space-1);
}
.confirmed__meta p {
  margin: 0;
}

/* Delivered eSIM(s): scannable LPA QR + PDF download, full-width under the grid. */
.confirmed__esims {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.confirmed__esims-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h3);
  color: var(--color-primary);
}
.confirmed__esims-lead {
  margin: 0 0 var(--space-4);
  color: var(--color-text-soft);
}
/* Single eSIM — a flavorful "activation card": framed QR beside the details,
   softly brand-tinted so it reads as a card, not a full-width bar. */
.confirmed__esim--single {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 42rem;
  background: linear-gradient(150deg, #fff 55%, rgba(12, 123, 145, 0.06) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.confirmed__esim-qr {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(37, 70, 95, 0.12);
}
.confirmed__esim-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.confirmed__esim-body {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
/* Product image + title — human context for the raw ICCID (single card). */
.confirmed__esim-product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.confirmed__esim-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.confirmed__esim-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--color-primary);
  /* If a long title must wrap, balance the lines so it never orphans a lone
     word (e.g. "…· 7 / jours"); the wider card keeps most titles on one line. */
  text-wrap: pretty;
}
.confirmed__esim-id {
  margin: 0;
  display: grid;
  gap: 2px;
}
.confirmed__esim-id span:first-child {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.confirmed__esim-code {
  justify-self: start;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--color-primary);
  background: rgba(37, 70, 95, 0.05);
  border-radius: 6px;
  padding: 5px 10px;
  word-break: break-all;
  line-height: 1.3;
}
@media (max-width: 520px) {
  .confirmed__esim--single {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Several eSIMs — a numbered list; each row carries the product image + title
   beside its ICCID (human context) with per-row QR + PDF actions. */
.esim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.esim-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: linear-gradient(150deg, #fff 60%, rgba(12, 123, 145, 0.045) 100%);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
}
.esim-list__num {
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 123, 145, 0.1);
  color: var(--color-action);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  line-height: 1;
}
.esim-list__logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.esim-list__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.esim-list__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--color-primary);
  line-height: 1.2;
}
.esim-list__iccid {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-soft);
  word-break: break-all;
  line-height: 1.3;
}
.esim-list__actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
@media (max-width: 560px) {
  .esim-list__row {
    flex-wrap: wrap;
  }
  .esim-list__actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}
.esim-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.esim-btn:hover,
.esim-btn:focus {
  border-color: var(--color-accent, var(--color-primary));
  color: var(--color-accent, var(--color-primary));
  text-decoration: none;
}
/* One-tap install (iOS / Android universal links) — the primary install action. */
.esim-install {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--space-2) 0;
}
.esim-install--modal {
  align-items: center;
  margin-top: var(--space-3);
}
.esim-install__label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #6b7c88);
}
.esim-install__btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.esim-btn--os {
  border-color: var(--color-accent, var(--color-primary));
  color: #fff;
  background: var(--color-accent, var(--color-primary));
}
.esim-btn--os:hover,
.esim-btn--os:focus {
  color: #fff;
  filter: brightness(1.07);
}
/* The product block spaces the list header; inside the single card the grid gap does. */
.confirmed__esim-body > .confirmed__esim-product {
  margin-bottom: 0;
}
.esim-list__all {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}

/* QR scan popup. */
.esim-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 35, 49, 0.55);
}
.esim-modal__box {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: var(--radius-card, 16px);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}
.esim-modal__close {
  position: absolute;
  top: 6px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-soft);
}
.esim-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-primary);
}
.esim-modal__qr {
  width: 220px;
  height: 220px;
}
.esim-modal__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.esim-modal__iccid {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-xs);
  color: var(--color-primary);
  word-break: break-all;
}
/* Fallback for shoppers who can't scan: a muted hint + a clean download pill. */
.esim-modal__hint {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  line-height: 1.4;
}
.esim-modal__manual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-action);
  background: rgba(12, 123, 145, 0.06);
  text-decoration: none;
}
.esim-modal__manual:hover,
.esim-modal__manual:focus {
  border-color: var(--color-action);
  background: rgba(12, 123, 145, 0.1);
  text-decoration: none;
}
.esim-modal__manual:hover {
  text-decoration: none;
  color: var(--color-action-hover, var(--color-action));
}


/* ==========================================================================
   Elements (classic) checkout — custom form + Stripe Payment Element.
   Desktop: two columns (form + summary). Mobile: a collapsible summary card,
   a progress stepper, and the sections become steps.
   ========================================================================== */
.checkout-el { display: grid; gap: clamp(var(--space-4), 4vw, var(--space-6)); }
.checkout-el__main { display: grid; gap: var(--space-5); }

.checkout-el__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h3);
  color: var(--color-primary);
}
.checkout-el__hint { font-size: var(--text-xs); color: var(--color-text-soft); }

/* Row-gap is a touch wider than the column-gap so the absolutely-positioned
   inline error (see .ff-err) has room to sit under a field without colliding
   with the row below. */
.checkout-el__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3); row-gap: var(--space-4);
}
.checkout-el__wide { grid-column: 1 / -1; }

/* Floating-label fields for the contact + billing steps — the shared form
   standard (docs/FORM-GUIDE.md) in storefront tokens: the label rests inside the
   control like a placeholder and floats to a border notch on focus/value; the
   label (with its required "*") and the field border turn red once the field is
   touched while empty/invalid; the error sits below-right, never overlapping the
   border. */
.checkout-el .ff { position: relative; display: flex; flex-direction: column; min-width: 0; }
.checkout-el .ff-ctl {
  width: 100%;
  /* Fixed control height so the resting label anchors to the input, not to the
     .ff column — otherwise the error row grows the column and drags a top:50%
     label downward on blur. 3em ≈ the previous padded height (0.65em + 1.6 line). */
  height: 3em;
  padding: 0 1em;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-body);
}
.checkout-el .ff-ctl:focus { outline: none; border-color: var(--color-action); }
.checkout-el select.ff-ctl {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
    linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.checkout-el .ff-label {
  position: absolute; left: 0.6em; top: 1.5em; transform: translateY(-50%);
  padding: 0 0.35em; max-width: calc(100% - 1.6em);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-soft); font-size: var(--text-body);
  pointer-events: none;
  transition: top 0.13s ease, font-size 0.13s ease, color 0.13s ease;
}
.checkout-el .ff-ctl:focus ~ .ff-label,
.checkout-el input.ff-ctl:not(:placeholder-shown) ~ .ff-label,
.checkout-el .ff-label.float {
  top: 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary);
  /* lower half matches the field background so the label notches the border */
  background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--color-surface) calc(50% - 1px));
}
.checkout-el .ff-ctl:focus ~ .ff-label { color: var(--color-action); }
/* the "*" is plain (follows the label) until the field is touched-and-invalid */
.checkout-el .ff-req { color: inherit; }
/* Error state: the whole label (and its "*", which inherits) + the border go red. */
.checkout-el .ff.invalid .ff-label { color: var(--color-danger); }
.checkout-el .ff.invalid .ff-ctl { border-color: var(--color-danger); }
/* Disabled: the country doesn't use this field (state / zip) — greyed, inert. */
.checkout-el .ff-off .ff-ctl { background: var(--color-bg-alt); cursor: not-allowed; }
.checkout-el .ff-off .ff-label { opacity: 0.55; }
/* Read-only: a filled, non-editable field (e.g. the agency name from the
   logged-in session). Its fill matches the card background (bg-alt) so it reads
   as inert/locked (only the border delineates it), and the floated label's notch
   background must match too — otherwise it paints a white rectangle behind the
   label text. */
.checkout-el .ff-ro .ff-ctl { background: var(--color-bg-alt); cursor: default; }
.checkout-el .ff-ro .ff-ctl:not(:placeholder-shown) ~ .ff-label,
.checkout-el .ff-ro .ff-label.float {
  background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--color-bg-alt) calc(50% - 1px));
}
/* Absolutely positioned just under the control (bottom-right, snug to the box)
   so revealing it never reflows the field or pushes the rows below down. */
.checkout-el .ff-err {
  position: absolute; top: calc(100% + 1px); right: 0;
  color: var(--color-danger); font-size: var(--text-xs); line-height: 1.2;
  pointer-events: none;
}

/* Searchable "chosen"-style select (country / state): the .ff floating-label
   shell + a themed dropdown with type-to-search + keyboard nav. */
.checkout-el .ss-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  cursor: pointer; text-align: left;
}
.checkout-el .ss-trigger:disabled { cursor: not-allowed; opacity: 0.55; }
.checkout-el .ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-el .ss-caret {
  flex: none; font-size: 0.7em; color: var(--color-action); transition: transform 0.13s;
}
.checkout-el .ss-trigger[aria-expanded="true"] .ss-caret { transform: rotate(180deg); }
.checkout-el .ss-menu {
  position: absolute; top: calc(3em + 4px); left: 0; right: 0; z-index: 30;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-btn);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.checkout-el .ss-search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.55em 1em; border-bottom: 1px solid var(--color-border);
  color: var(--color-text-soft);
}
.checkout-el .ss-search input {
  flex: 1; min-width: 0; border: 0; outline: none; font: inherit;
  background: none; color: var(--color-primary);
}
.checkout-el .ss-opts { max-height: 15rem; overflow-y: auto; }
.checkout-el .ss-opt {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 0.5em 1em; border: 0; background: none; font: inherit; text-align: left;
  color: var(--color-primary); cursor: pointer;
}
.checkout-el .ss-opt:hover, .checkout-el .ss-opt.hi { background: var(--color-bg-alt); }
.checkout-el .ss-opt.sel { color: var(--color-action); }
.checkout-el .ss-opt .icon-check { flex: none; color: var(--color-action); }
.checkout-el .ss-empty { padding: 0.7em 1em; color: var(--color-text-soft); font-size: var(--text-xs); }

/* Date picker (Havas "Date de départ"): the .ff floating-label shell + a themed
   month-grid calendar popup — the native date input renders inconsistently and
   is awkward to use, so we drive it in JS (see DateField.tsx). */
.checkout-el .dp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  cursor: pointer; text-align: left;
}
.checkout-el .dp-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-el .dp-caret { flex: none; color: var(--color-action); }
.checkout-el .dp-menu {
  position: absolute; top: calc(3em + 4px); left: 0; z-index: 30;
  width: 18rem; max-width: calc(100vw - 2rem);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
}
.checkout-el .dp-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.checkout-el .dp-title { font-weight: 600; color: var(--color-primary); text-transform: capitalize; }
.checkout-el .dp-nav {
  flex: none; width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-btn);
  background: var(--color-surface); color: var(--color-action); cursor: pointer;
}
.checkout-el .dp-nav:hover:not(:disabled) { background: var(--color-bg-alt); }
.checkout-el .dp-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.checkout-el .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.checkout-el .dp-weekdays { margin-bottom: 4px; }
.checkout-el .dp-wd {
  text-align: center; font-size: var(--text-xs); color: var(--color-text-soft);
  text-transform: capitalize; padding: 2px 0;
}
.checkout-el .dp-day {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--radius-btn);
  color: var(--color-primary); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.checkout-el .dp-day:hover:not(:disabled) { background: var(--color-bg-alt); }
.checkout-el .dp-day:disabled { color: var(--color-text-soft); opacity: 0.35; cursor: not-allowed; }
.checkout-el .dp-day.today { box-shadow: inset 0 0 0 1px var(--color-border-input); }
.checkout-el .dp-day.sel { background: var(--color-action); color: #fff; }
.checkout-el .dp-day.dp-empty { cursor: default; }

.checkout-el__datanote {
  margin: var(--space-4) 0 0;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.checkout-el__secured {
  display: flex; gap: var(--space-2); margin: var(--space-3) 0;
  color: var(--color-text-soft); font-size: var(--text-xs); line-height: 1.5;
}
.checkout-el__secured i { flex: none; margin-top: 0.1em; }
.checkout-el__pe { margin-bottom: var(--space-4); }

.checkout-el__consents { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.checkout-el__consent {
  display: flex; gap: var(--space-2); align-items: flex-start;
  color: var(--color-primary); font-size: var(--text-xs); font-style: italic; line-height: 1.5; cursor: pointer;
}
.checkout-el__consent input {
  flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.05em;
  accent-color: var(--color-action); cursor: pointer;
}
.checkout-el__consent-link { color: var(--color-action); text-decoration: none; cursor: pointer; }
.checkout-el__consent-link:hover { text-decoration: none; }

/* Blocking payment-processing overlay — covers the whole viewport while Stripe
   settles the charge + we navigate to the confirmation, so the shopper isn't
   left staring at a frozen button. */
.checkout-loading {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}
@supports not (background: color-mix(in srgb, white, black)) {
  .checkout-loading { background: rgba(255, 255, 255, 0.85); }
}
.checkout-loading__box {
  display: grid; justify-items: center; gap: var(--space-3);
  text-align: center; color: var(--color-primary);
}
.checkout-loading__spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--color-border-input);
  border-top-color: var(--color-action);
  animation: checkout-spin 0.7s linear infinite;
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.checkout-loading__title { margin: 0; font-size: var(--text-lg); }
.checkout-loading__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-soft); }

/* Terms & conditions modal — the CMS terms page shown inline over the checkout
   so the shopper isn't navigated away mid-flow. */
.checkout-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
}
.checkout-modal__panel {
  display: flex; flex-direction: column;
  width: min(760px, 100%); max-height: 85vh;
  background: var(--color-surface); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.checkout-modal__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.checkout-modal__title { margin: 0; font-size: var(--text-lg); color: var(--color-primary); }
.checkout-modal__close {
  flex: none; border: 0; background: none; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--color-text-soft);
}
.checkout-modal__body { padding: var(--space-4); overflow-y: auto; }
/* The embedded legal body drops its own page-level top offset inside the modal. */
.checkout-modal__body > :first-child { margin-top: 0; }
.checkout-el__error { margin: 0 0 var(--space-2); color: var(--color-danger); font-size: var(--text-xs); }
.checkout-el__advance, .checkout-el__pay { width: 100%; margin-top: var(--space-3); }
.checkout-el__advance:disabled, .checkout-el__pay:disabled { opacity: 0.5; cursor: not-allowed; }

/* Summary */
.checkout-el__summary {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.checkout-el__summary-head {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: 0; background: none; cursor: pointer; text-align: left;
}
.checkout-el__summary-title {
  flex: 1; display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 400; font-size: var(--text-h3); color: var(--color-primary);
}
.checkout-el__summary-total { display: grid; justify-items: end; font-size: var(--text-lg); font-weight: 400; color: var(--color-primary); }
.checkout-el__summary-total-label { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-soft); }
.checkout-el__summary-caret { color: var(--color-action); transition: transform 0.2s; }
.checkout-el__summary.is-open .checkout-el__summary-caret { transform: rotate(180deg); }
.checkout-el__summary-body { padding: 0 var(--space-4) var(--space-4); }

.checkout-el__cols, .checkout-el__line { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; }
.checkout-el__cols { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text-soft); font-size: var(--text-xs); }
.checkout-el__cols :nth-child(2), .checkout-el__cols :nth-child(3) { text-align: right; }
.checkout-el__line { padding-block: var(--space-3); }
.checkout-el__product { display: flex; align-items: center; gap: var(--space-2); }
.checkout-el__logo { flex: none; width: 40px; height: 40px; object-fit: contain; }
.checkout-el__product-titles { display: flex; flex-direction: column; }
.checkout-el__kind { color: var(--color-text-soft); font-size: var(--text-xs); }
.checkout-el__name { color: var(--color-primary); font-weight: 400; }
.checkout-el__operator { color: var(--color-text-soft); font-size: var(--text-xs); }
.checkout-el__qty { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-pill); padding: var(--space-1); }
.checkout-el__qty-btn { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-primary); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.checkout-el__qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.checkout-el__qty-value { min-width: 1.25rem; text-align: center; font-weight: 600; }
.checkout-el__unit { text-align: right; font-weight: 400; color: var(--color-primary); }
/* Promo: one bordered box with the submit button embedded on the right edge
   (the input is borderless inside; the wrapper carries the border/radius). */
.checkout-el__promo {
  display: flex; align-items: stretch; margin-top: var(--space-3);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-btn);
  background: var(--color-surface); overflow: hidden;
}
.checkout-el__promo .field {
  flex: 1; border: 0; border-radius: 0; background: transparent;
}
.checkout-el__promo .field:focus { outline: none; }
.checkout-el__promo-apply {
  flex: none; width: 2.75rem;
  border: 0; border-left: 1px solid var(--color-border-input);
  background: var(--color-bg-alt); color: var(--color-action); cursor: pointer;
}
.checkout-el__promo-apply:disabled { opacity: 0.45; cursor: not-allowed; }
.checkout-el__promo-note { margin: var(--space-1) 0 0; color: var(--color-text-soft); font-size: var(--text-xs); }
.checkout-el__promo-note--err { color: #b91c1c; }
/* Applied promo: a discount line in the summary (label + code left, −amount right). */
.checkout-el__discount {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-3); font-size: var(--text-sm);
}
.checkout-el__discount-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-soft); }
.checkout-el__discount-code { color: var(--color-primary); font-weight: 600; letter-spacing: 0.02em; }
.checkout-el__discount-amount { color: var(--color-action); font-weight: 600; white-space: nowrap; }
.checkout-el__promo-remove {
  border: 0; background: none; padding: 0 var(--space-1); cursor: pointer;
  color: var(--color-text-soft); font-size: 1.1em; line-height: 1;
}
.checkout-el__promo-remove:hover { color: #b91c1c; }

/* Stepper (mobile) */
.checkout-el__stepper { display: none; }
.checkout-el__stepper-step {
  flex: 1; position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: none; border: 0; padding: 0; cursor: pointer; align-items: flex-start;
}
.checkout-el__stepper-step:last-child { flex: 0 0 auto; align-items: flex-end; }
.checkout-el__stepper-step:not(:last-child)::after {
  content: ""; position: absolute; top: 8px; left: 18px; right: 0; height: 2px; background: var(--color-border-input);
}
.checkout-el__stepper-step.is-done::after { background: var(--color-primary); }
.checkout-el__stepper-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--color-border-input); position: relative; z-index: 1; }
.checkout-el__stepper-step.is-active .checkout-el__stepper-dot,
.checkout-el__stepper-step.is-done .checkout-el__stepper-dot { background: var(--color-primary); }
.checkout-el__stepper-label { font-size: var(--text-xs); color: var(--color-primary); white-space: nowrap; }

/* Desktop: two columns, everything visible, summary not collapsible. */
@media (min-width: 769px) {
  .checkout-el { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .checkout-el__main { grid-column: 1; grid-row: 1; }
  .checkout-el__summary { grid-column: 2; grid-row: 1; }
  .checkout-el__advance { display: none; }
  .checkout-el__summary-head { pointer-events: none; }
  .checkout-el__summary-caret { display: none; }
  .checkout-el__summary-body { display: block; }
}

/* Mobile: collapsible summary on top, stepper, one step at a time. */
@media (max-width: 768px) {
  .checkout-el__grid { grid-template-columns: 1fr; }
  .checkout-el__stepper { display: flex; margin: var(--space-2) 0 var(--space-3); }
  .checkout-el__summary-body { display: none; }
  .checkout-el__summary.is-open .checkout-el__summary-body { display: block; }
  .checkout-el__step { display: none; }
  .checkout-el[data-step="0"] .checkout-el__step--contact,
  .checkout-el[data-step="1"] .checkout-el__step--billing,
  .checkout-el[data-step="2"] .checkout-el__step--payment { display: block; }
}

/* Card-only Elements: single-line Card Element + left-aligned pay button. */
.checkout-el__card {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.checkout-el__card-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: var(--color-primary);
}
.checkout-el__card-field {
  padding: 0.85em 1em;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
}
.checkout-el__consents {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.checkout-el__advance { width: 100%; }
.checkout-el__pay { width: auto; min-width: 220px; }
@media (max-width: 768px) {
  .checkout-el__pay { width: 100%; }
}

.checkout-el__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.checkout-el__card-label { margin-bottom: 0; }
.checkout-el__card-brands { display: inline-flex; align-items: center; gap: var(--space-2); }
.checkout-el__card-brands img { height: 22px; width: auto; display: block; }

/* Apple / Google Pay wallet button + divider (Elements). */
.checkout-el__wallet { margin: var(--space-3) 0 var(--space-4); }
.checkout-el__or {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}
.checkout-el__or::before, .checkout-el__or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* Havas agency checkout — no payment on the page (see HavasCheckoutForm.tsx):
   the confirmation-info modal is a smaller, centered dialog with a plain
   bullet list of what happens next, instead of the wide terms-page modal. */
.checkout-modal__panel--sm { width: min(420px, 100%); }
.checkout-modal__panel--sm .checkout-modal__head {
  justify-content: center;
  position: relative;
}
.checkout-modal__panel--sm .checkout-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}
.checkout-el__confirm-list {
  margin: 0 0 var(--space-4);
  padding-left: 1.2em;
  display: grid;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: var(--text-body);
  line-height: 1.4;
}
.checkout-el__confirm-ok { width: 100%; }
/* Havas confirmation modal: a larger title than the shared modal default. */
.checkout-modal__title.checkout-el__confirm-title { font-size: 1.375rem; }