/* ==========================================================================
   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: var(--r-2xl);
  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. */
/* Stripe's iframe filled this box edge to edge, so the payment form sat flush
   against the container on every storefront. The padding is painted in Stripe's
   own frame colour, so it extends the embed instead of framing it. */
.checkout__embed {
  min-height: 60vh;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background-color: var(--stripe-embed-bg);
}

.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-text);
}
.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-bg);
  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-heading);
}
/* Emphasis without bold: the brand heading font 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;
  color: var(--color-primary);
}

.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-heading);
  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-heading);
}
.confirmed__operator {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}
.confirmed__qty {
  text-align: right;
  color: var(--color-text);
}
.confirmed__unit {
  text-align: right;
  color: var(--color-text);
}
.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-heading);
}
.confirmed__total-value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15em;
  color: var(--color-primary);
}
.confirmed__meta {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  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-heading);
}
.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: var(--r-md);
  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;
}
.confirmed__esim-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--color-heading);
  /* 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-text);
  background: rgba(37, 70, 95, 0.05);
  border-radius: var(--r-sm);
  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: var(--r-md);
  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;
}
.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) — plain links, a glyph and the
   platform name; the PDF button beside them is the one button (owner). */
.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__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.esim-install__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-action);
  text-decoration: none;
}
.esim-install__link:hover,
.esim-install__link:focus {
  text-decoration: underline;
}
/* 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-input);
  background-color: var(--color-surface);
  /* Typed text is black here too — the checkout keeps its own copy of .ff. */
  color: var(--ink-900);
  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; }
/* 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-bg);
  /* The menu belongs to the select above it, so it follows the field radius. */
  border: 1px solid var(--color-border-input); border-radius: var(--radius-input);
  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(--ink-900);
}
.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); }

.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: var(--r-md);
  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-bg);
  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);
  /* The wrapper IS the input's box (the field inside is borderless). */
  border: 1px solid var(--color-border-input); border-radius: var(--radius-input);
  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-bg);
}
.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);
}

/* --- PayPal, the alternative rail ------------------------------------------
   The live site's shape: the Stripe box, a centred "OR" rule, then one
   full-width PayPal button (see the legacy `#checkout-alt-divider` /
   `#paypal-checkout-button`). The block is hidden until the SDK has actually
   rendered a button, so the rule never floats above nothing. */
/* --space-8 (56-96px) left a hand's width of empty page between the PayPal
   button and the end of the checkout panel, on top of the section's own bottom
   padding (owner, 2026-09-18). The button is the last thing on the page; it
   needs clearance, not a field. */
.checkout__alt {
  max-width: 18.75rem;
  margin: 0 auto var(--space-5);
}
.checkout__alt-divider {
  position: relative;
  text-align: center;
  margin: var(--space-6) 0 var(--space-5);
  color: var(--color-text-soft);
}
.checkout__alt-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-border);
}
/* The label sits ON the rule, so it needs the page's own background behind it. */
.checkout__alt-divider span {
  position: relative;
  padding: 0 var(--space-4);
  background: var(--color-bg);
}
/* PayPal renders an iframe that respects the container's width, not its own. */
.checkout__paypal {
  width: 100%;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
@media (max-width: 36rem) {
  .checkout__alt { max-width: 100%; }
}