/* ==========================================================================
   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));
}

/* The row over the checkout: "Continue shopping" left, the account right. */
.checkout__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.checkout__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.checkout__back:hover {
  color: var(--color-action);
  text-decoration: none;
}
.checkout__back i {
  font-size: 1.1em;
}

/* The account page's sign-in in a popup: as wide as its two columns need. */
.esim-modal__box.checkout-signin {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  max-width: 820px;
  padding: var(--space-6) var(--space-5);
  text-align: left;
}

/* Stripe injects its responsive box here; hold height so the page doesn't jump.
   Stripe's own frame spaces its form at the sides; a little room below its
   card and slightly rounded corners (owner, 2026-10-19). */
.checkout__embed {
  min-height: 60vh;
  padding-bottom: var(--space-3);
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--stripe-embed-bg);
}

/* The embedded checkout stays at the 1170px container on wide screens too
   (owner, 2026-10-19): two columns at 1480px stretch the form. */
.checkout > .container:has(> .checkout__layout) {
  max-width: var(--container-xl);
}

/* The embedded checkout's two columns: account + payment on the left, the
   order summary, discount code and reassurance on the right. On a phone the
   columns dissolve into one list, summary and code first. */
.checkout__layout {
  /* The panels' inner edge. Controls outside a panel (reassurance, device
     check) sit on it too, so every control on the page shares one width. */
  --checkout-pad: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.checkout__col {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.checkout__panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: var(--checkout-pad);
}
.checkout__panel-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

/* Your account: one line, a convenience rather than a section. */
.checkout__account-card {
  padding-block: var(--space-3);
}
.checkout__account-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.checkout__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-band);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.checkout__account-row .checkout__panel-title {
  flex: 1;
  margin: 0;
}
/* A long address wraps onto a second line rather than being cut; sign-out
   then sits bottom right. */
.checkout__account-who {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-soft);
}
.checkout__account-who a {
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.checkout__account-out {
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-end;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.checkout__account-out:hover,
.checkout__account-out:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* The terms under the order total; until they are accepted the payment box
   is locked. */
.checkout__terms {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  cursor: pointer;
}
.checkout__terms input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  accent-color: var(--color-primary);
}
.checkout__terms a {
  color: var(--color-primary);
}
.checkout__pay-box--locked {
  opacity: 0.45;
  /* `inert` locks it where the browser knows it; this, where it does not. */
  pointer-events: none;
}

/* Optional upgrade: the ordered plan and the bigger ones as one row of small
   tiles; the radio itself is hidden, the tile's border shows the choice. */
.checkout__plans {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.checkout__plan {
  position: relative;
  display: grid;
  align-content: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
}
.checkout__plan--on {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.checkout__plan:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.checkout__plan input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkout__plan-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.checkout__plan-text span {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}
.checkout__plan-price {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Order summary */
.checkout__product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.checkout__flag {
  width: 2.375rem;
  height: 1.75rem;
  border-radius: var(--r-xs);
}
/* An MNO eSIM's operator logo in the flag's place, whole. */
.checkout__logo {
  object-fit: contain;
}
.checkout__product-name {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.checkout__product-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}
.checkout__facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.checkout__facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.checkout__facts dt {
  color: var(--color-text-soft);
}
.checkout__facts dd {
  margin: 0;
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  text-align: right;
}
.checkout__facts dd small {
  display: block;
  font-size: var(--text-xs);
  font-weight: normal;
  color: var(--color-text-soft);
}
/* The quantity row holds the stepper (the Elements checkout's `.checkout-el__qty`),
   so its label centres on it instead of sitting on a text baseline. */
.checkout__facts .checkout__qty {
  align-items: center;
}
.checkout__facts .checkout__discount dd {
  color: var(--color-sale);
}
.checkout__coupon-remove {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.checkout__total-label {
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.checkout__total-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

/* Have a discount code? */
.checkout__coupon-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  cursor: pointer;
}
/* The search bar's box (`.dest-search`), with Apply inside it. */
.checkout__coupon-form {
  margin-top: var(--space-3);
}
/* One line with its button inside: the button's pill, not the field's. */
.checkout__coupon-form .dest-search__field { border-radius: var(--radius-btn); }
/* The slide clips its content; room for the field's focus ring and shadow. */
.checkout__coupon .account-slide__inner { padding: 0 3px 3px; margin: 0 -3px -3px; }
.checkout__coupon.is-open .account-slide { grid-template-rows: 1fr; }
.checkout__coupon-toggle i { transition: transform 0.3s; }
.checkout__coupon.is-open .checkout__coupon-toggle i { transform: rotate(180deg); }
.checkout__coupon-form .dest-search__submit {
  border: 0;
  cursor: pointer;
}
.checkout__coupon-error {
  margin: var(--space-2) 0 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* Reassurance under the summary */
.checkout__trust {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--checkout-pad);
  list-style: none;
  font-size: var(--text-sm);
}
.checkout__trust li {
  display: flex;
  gap: var(--space-2);
}
.checkout__trust li::before {
  content: "✓";
  flex: none;
  color: var(--color-sale);
  font-weight: var(--weight-bold);
}

/* The device check and the PayPal button share one width: the panel's inner
   width, capped at 25rem (full width read far too large on a wide screen). On
   a phone the verdict pill that replaces the button keeps that width too. */
.checkout__col .compat-check {
  width: min(25rem, 100% - 2 * var(--checkout-pad));
  margin-inline: auto;
}
.checkout__col .compat-check__btn,
.checkout__col .compat-check__banner {
  width: 100%;
}

/* Order summary: open on a wide screen; on a phone folded to one line
   (destination + total) that the chevron opens. */
.checkout__summary-toggle {
  display: none;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.checkout__summary-total {
  margin-left: auto;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.checkout__summary-toggle i { transition: transform 0.3s; }
.checkout__summary.is-open .checkout__summary-toggle i { transform: rotate(180deg); }
.checkout__summary .account-slide { grid-template-rows: 1fr; }

@media (max-width: 860px) {
  .checkout__layout {
    --checkout-pad: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .checkout__col {
    display: contents;
  }
  .checkout__summary { order: 1; }
  .checkout__coupon { order: 2; }
  .checkout__account-card { order: 3; }
  .checkout__upgrade { order: 4; }
  .checkout__topup { order: 4; }
  .checkout__pay { order: 5; }
  .checkout__trust { order: 6; }
  .checkout__col--side .compat-check { order: 7; }
  .checkout__summary-toggle { display: flex; }
  .checkout__summary .checkout__panel-title,
  .checkout__summary .checkout__product { display: none; }
  .checkout__summary .account-slide { grid-template-rows: 0fr; }
  .checkout__summary.is-open .account-slide { grid-template-rows: 1fr; }
  /* Shut: out of the tab order too, once the slide has closed. */
  .checkout__summary:not(.is-open) .account-slide__inner {
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }
}

/* Top-up checkout: the eSIM the payment loads onto, above the payment box. */
.checkout__topup-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
}
.checkout__topup-facts div {
  display: flex;
  gap: var(--space-1);
}
.checkout__topup-facts dt {
  color: var(--color-text-soft);
}
.checkout__topup-facts dt::after {
  content: ":";
}
.checkout__topup-facts dd {
  margin: 0;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.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) ----------------------------------------
   One column of cards on the grey page: the heading, the top-up banner, then
   the install steps beside the order details + data usage, the folded full
   guide, the app promo and the way back. Logical properties throughout, so the
   RTL languages mirror it. */
.confirmed {
  display: grid;
  gap: var(--space-4);
  max-width: 64rem;
}
.confirmed__intro {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
.confirmed__thanks {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  color: var(--color-heading);
}
.confirmed__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--tint-2);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.confirmed__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-sale);
}
.confirmed__lead {
  margin: 0;
  color: var(--so-ink-body);
}
.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);
}
/* The invitation to sign in; its first words open the sign-in. */
.confirmed__account {
  margin: 0;
  color: var(--color-text);
}
.confirmed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.confirmed__main,
.confirmed__side {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
@media (max-width: 860px) {
  .confirmed__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Chevrons point the way the text reads. */
[dir="rtl"] .confirmed .icon-chevron-left,
[dir="rtl"] .confirmed .icon-chevron-right {
  transform: scaleX(-1);
}
.confirmed__back {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

/* A white card: the steps, the order details, the data usage. */
.confirmed-card {
  background: var(--color-surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.confirmed-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.confirmed-card__head .confirmed-card__title {
  margin: 0;
  margin-inline-end: auto;
}
/* A card's heading: an h2 at the site's h3 size. */
.confirmed-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
}

/* Order details: label left, value right. */
.confirmed-details__list {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.confirmed-details__list dt {
  color: var(--so-ink-muted);
}
.confirmed-details__list dd {
  margin: 0;
  text-align: end;
  color: var(--so-ink-strong);
  overflow-wrap: anywhere;
}
.confirmed-details__product {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}
.confirmed-details__product img {
  flex: none;
  object-fit: contain;
}
.confirmed-details__product small {
  display: block;
  color: var(--so-ink-muted);
  font-size: var(--text-xs);
}
.confirmed-details__total {
  font-weight: var(--weight-bold);
}
.confirmed-details__mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.confirmed-details__track {
  margin-top: var(--space-3);
  width: 100%;
}

/* Data usage: the check-usage card inside, a minute's rest on Refresh. */
.confirmed-usage__updated {
  font-size: var(--text-2xs);
  color: var(--so-ink-meta);
}
.confirmed-usage__refresh {
  font-size: var(--text-xs);
  padding: 2px 10px;
}
.confirmed-usage__refresh:disabled {
  opacity: 0.6;
  cursor: default;
}
.confirmed-card .usage-result {
  margin-top: 0;
}
.confirmed-usage__waiting {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--so-ink-muted);
}

/* "Need more data on this eSIM?" */
.confirmed-topup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--tint-2);
  border: 1px solid var(--line-tinted);
  border-radius: var(--r-2xl);
  padding: var(--space-3) var(--space-4);
}
.confirmed-topup__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-primary);
}
.confirmed-topup__text {
  flex: 1 1 14rem;
}
.confirmed-topup__text p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--so-ink-muted);
}
.confirmed-topup__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--so-ink-strong);
}

/* The numbered steps, each on a lilac panel. */
.confirmed-steps {
  display: grid;
  gap: var(--space-3);
}
.confirmed-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  background: var(--tint-1);
  border: 1px solid var(--line-tinted);
  border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-4);
}
.confirmed-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--so-grad-btn);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.confirmed-step__body {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  min-width: 0;
}
.confirmed-step__kicker {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.confirmed-step__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--so-ink-strong);
}
.confirmed-step__must {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-xs);
  background: rgba(224, 0, 67, 0.08);
  color: var(--color-danger);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.confirmed-step__path {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--so-ink-body);
}
.confirmed-setup__name {
  margin: 0;
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary-deep);
}

/* Step 1: the QR and its notes, centred in the panel. */
.confirmed-step--install .confirmed-step__body {
  justify-items: stretch;
  text-align: center;
}
.confirmed-step--install .confirmed-step__title,
.confirmed-step--install .confirmed-step__kicker {
  text-align: start;
}
.confirmed-install__qr {
  justify-self: center;
  width: 11rem;
  background: #fff;
  border-radius: var(--r-md);
  padding: 10px;
}
.confirmed-install__qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.confirmed-install__note,
.confirmed-install__hint,
.confirmed-install__aside,
.confirmed-install__how {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--so-ink-muted);
}
.confirmed-install__note {
  font-size: var(--text-sm);
  color: var(--so-ink-body);
}
.confirmed-step--install .esim-install {
  align-items: center;
}
.confirmed-install__toggle {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-action);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.confirmed-install__manual {
  display: grid;
  gap: var(--space-2);
  text-align: start;
}
.confirmed-install__manual [role="tabpanel"] {
  display: grid;
  gap: var(--space-2);
}
.confirmed-install__tabs {
  display: flex;
  gap: var(--space-1);
}
.confirmed-install__tab {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 4px 16px;
  background: var(--color-surface);
  color: var(--so-ink-body);
  font-size: var(--text-sm);
  cursor: pointer;
}
.confirmed-install__tab.is-active {
  background: var(--color-primary);
  color: #fff;
}
.confirmed-install__manual .esim-modal__code {
  background: var(--color-surface);
}
.confirmed-install__iccid {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--so-ink-meta);
  text-align: start;
  overflow-wrap: anywhere;
}
.confirmed-step--install .btn {
  justify-self: start;
}

/* The drawn phone screens of steps 2 and 3. */
.confirmed-phone {
  width: 12rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--so-ink-strong);
}
.confirmed-phone__bar {
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-bold);
}
.confirmed-phone__bar i {
  color: var(--color-secondary);
}
.confirmed-phone__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border-radius: var(--r-sm);
}
.confirmed-phone__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 8px;
  border-bottom: 1px solid var(--line-hair);
}
.confirmed-phone__list li:last-child {
  border-bottom: 0;
}
.confirmed-phone__list .is-dim {
  color: var(--so-ink-meta);
}
.confirmed-phone__list .icon-check {
  color: var(--color-primary);
}
.confirmed-phone__switch {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.confirmed-phone__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}

/* The full guide, folded under one line. */
.confirmed-guide {
  background: var(--color-surface);
  border: 1px solid var(--line-card);
  border-radius: var(--r-2xl);
  padding: var(--space-3) var(--space-4);
}
.confirmed-guide__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--so-ink-strong);
  cursor: pointer;
  list-style: none;
}
.confirmed-guide__summary::-webkit-details-marker {
  display: none;
}
.confirmed-guide__summary i {
  color: var(--so-ink-meta);
  transition: transform 0.2s;
}
.confirmed-guide[open] .confirmed-guide__summary i {
  transform: rotate(45deg);
}
.confirmed-guide__before {
  margin-top: var(--space-3);
  background: var(--tint-1);
  border: 1px solid var(--line-tinted);
  border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-4);
}
.confirmed-guide__before ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--so-ink-body);
  display: grid;
  gap: var(--space-1);
}
.confirmed-guide__before li::marker {
  color: var(--color-primary);
}
.confirmed-guide__grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 680px) {
  .confirmed-guide__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.confirmed-guide__card {
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: var(--space-3);
}
.confirmed-guide__title {
  margin: 0 0 var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--so-ink-strong);
}
.confirmed-guide__title span {
  font-size: var(--text-2xs);
  font-weight: var(--weight-body);
  color: var(--so-ink-meta);
}
.confirmed-guide__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--so-ink-body);
}
.confirmed-guide__steps li {
  counter-increment: guide;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
}
.confirmed-guide__steps li::before {
  content: counter(guide);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--tint-3);
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.confirmed-guide__steps a {
  color: var(--color-action);
}

/* The app promo. */
.confirmed-app {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  background: linear-gradient(120deg, var(--tint-2) 0%, var(--color-surface) 70%);
  border: 1px solid var(--line-tinted);
  border-radius: var(--r-2xl);
  padding: var(--space-4);
}
.confirmed-app__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--so-ink-strong);
}
.confirmed-app__sub {
  margin: 0;
  color: var(--so-ink-body);
}
.confirmed-app__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.confirmed-app__badges img {
  display: block;
  height: 2.75rem;
  width: auto;
}

/* 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-code {
  width: 100%;
  height: 100%;
}
.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);
}
.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);
  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;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  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;
}
/* Manual install codes (account page): label, the code, a copy button. */
.esim-modal__codes {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
}
.esim-modal__code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.esim-modal__code-label { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-soft); }
.esim-modal__code-value {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-xs);
  color: var(--color-primary);
  word-break: break-all;
  user-select: 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-2xl);
  box-shadow: var(--shadow-pop);
}
.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);
}
/* The title is the theme's h2; the page's own headings sit below it. */
.checkout-modal__title { margin: 0; }
.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; }
/* Page headings sized for a dialog, not a page. */
.checkout-modal__body h2 { margin: 1.5em 0 0.5em; font-size: var(--text-lg); }
.checkout-modal__body h3 { margin: 1.25em 0 0.4em; font-size: var(--text-md); }
.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
   PayPal button as wide as the panel (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. */
.checkout__alt {
  max-width: 25rem;
  margin-inline: auto;
}
.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 panel's own background behind it. */
.checkout__alt-divider span {
  position: relative;
  padding: 0 var(--space-4);
  background: var(--color-surface);
}
/* PayPal renders an iframe that respects the container's width, not its own. */
.checkout__paypal {
  width: 100%;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Reduced motion: the panel chevrons turn at once. */
@media (prefers-reduced-motion: reduce) {
  .checkout__coupon-toggle i,
  .checkout__summary-toggle i { transition: none; }
}