/* inteli·one - Checkout branded surface kit + journey ribbon
   Shared surface for the checkout gate, blocked modals, and confirmation
   screen (57.10/57.11/57.13). Mirrors frontend/assets/css/components/login.css
   (gradient/glass/border-bottom inputs) so checkout ⇄ login ⇄ first-run read
   as one continuous branded surface. All values on the 57.8-replicated
   landing token layer (frontend/landing/css/style.css :root). */

/* Visually-hidden utility (replicated from frontend/assets/css/core/reset.css
   .sr-only — the landing deploy does not include the app reset stylesheet). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icon sizing (replicated from frontend/assets/css/utils/icons.css .icon —
   the landing deploy does not ship the app icon stylesheet). The catalog SVG
   bodies (frontend/landing/js/checkout/icons.js) carry a viewBox but no
   width/height, so without this they render at the 300×150 replaced-element
   default. currentColor keeps them theme-aware onto the branded surface. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: currentColor;
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.checkout-screen {
  /* Full-screen overlay — mirrors app login.css (position:fixed/inset:0/z-index).
     Without this the gate mounts in-flow at the bottom of the long landing and
     clicking a pricing button looks like nothing happens. Above the landing
     (max z-index 1000), below the blocked-outcome modals (z-index 2000). */
  position: fixed;
  inset: 0;
  z-index: 1500;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Shared brand backdrop — the 3-stop off-centre radial, tokenised in
     variables.css and reused by app login.css (checkout ⇄ login = one surface). */
  background: var(--brand-gradient);
  padding: var(--space-6) var(--space-4);
}

/* Vertical stack on the gradient: ribbon (outside the card) then the card. */
.checkout-gate__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 460px;
}

.checkout-gate__ribbon {
  width: 100%;
}

.checkout-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: rgba(var(--color-white-rgb), var(--opacity-10));
  border: 1px solid rgba(var(--color-white-rgb), var(--opacity-25));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-gate);
  /* No backdrop-filter blur — it is forbidden (and a per-frame CPU sink behind
     an animated spinner). The translucent glass reads correctly at --opacity-10
     on the branded gradient exactly as the app's login card does (no blur). */
  padding: var(--space-8) var(--space-8) var(--space-6);
  overflow: hidden;
}

/* Thin gradient accent along the card's top edge (accepted mockup). */
.checkout-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(var(--color-white-rgb), var(--opacity-90)),
    rgba(var(--color-white-rgb), var(--opacity-25))
  );
}

/* The confirmation card's top strip tracks setup completion:
   - in progress: green fading to transparent (partial — still working);
   - complete (email_sent): a full solid green bar.
   This is what visually changes when setup finishes — not just the rows. */
.checkout-confirm.checkout-card::before {
  background: linear-gradient(90deg, var(--success-400), transparent);
}

.checkout-confirm--complete.checkout-card::before {
  background: var(--success-400);
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-confirm.checkout-card::before {
    transition: background var(--motion-duration-medium) ease;
  }
}

/* Border-bottom text inputs — mirrors login.css form-group input. Scoped to
   NOT([type=checkbox]) so the consent checkbox keeps its native box instead of
   being stretched into a full-width 44px bordered field. */
.checkout-card input:not([type='checkbox']) {
  border: none;
  border-bottom: 1px solid rgba(var(--color-white-rgb), var(--opacity-25));
  background: transparent;
  padding: var(--space-3) 0;
  font-size: var(--font-size-base);
  color: white;
  outline: none;
  width: 100%;
  min-height: 44px;
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-card input {
    transition: border-color var(--motion-duration-fast);
  }
}

/* Focus = the underline itself turns white (doubled via an inset shadow) — no
   rectangle, matching login.css / the accepted mockup. Scoped off the checkbox
   so it keeps its native focus ring. */
.checkout-card input:not([type='checkbox']):focus,
.checkout-card input:not([type='checkbox']):focus-visible,
.checkout-card input:not([type='checkbox']):active {
  outline: none;
  border-bottom-color: white;
  box-shadow: inset 0 -1px 0 0 white;
}

.checkout-card input::placeholder {
  color: rgba(var(--color-white-rgb), var(--opacity-50));
}

/* Autofill tuning — Chrome/Safari paint a UA background-color that cannot be
   overridden directly; overpaint via a huge inset box-shadow + force the text
   colour. The 5000s transition defers the UA repaint so it never flashes. */
.checkout-card input:-webkit-autofill,
.checkout-card input:-webkit-autofill:hover,
.checkout-card input:-webkit-autofill:focus,
.checkout-card input:-webkit-autofill:active {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  caret-color: white;
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox residual: Firefox has no :-webkit-autofill equivalent; it exposes
   only :autofill with limited styling (no box-shadow overpaint) — it keeps a
   faint, non-removable background tint on autofilled inputs. We style what
   it honours (border colour reset) and accept the residual tint (documented,
   not pixel-perfect — see story 57.9 Dev Notes / Completion Notes). */
.checkout-card input:autofill {
  border-bottom-color: rgba(var(--color-white-rgb), var(--opacity-25));
  -webkit-text-fill-color: white;
  caret-color: white;
}

/* Solid-white CTA */
.checkout-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: white;
  color: var(--primary-500);
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  min-height: 52px;
  width: 100%;
}

/* Arrow nudges right on hover — a small "go" affordance. */
.checkout-cta__icon {
  font-size: 1.0625rem;
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-cta__icon {
    transition: transform var(--motion-duration-fast);
  }

  @media (hover: hover) {
    .checkout-cta:hover:not(:disabled) .checkout-cta__icon {
      transform: translateX(2px);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-cta {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (hover: hover) {
  .checkout-cta:hover:not(:disabled) {
    background: rgba(var(--color-white-rgb), var(--opacity-90));
  }
}

.checkout-cta:disabled {
  background: rgba(var(--color-white-rgb), var(--opacity-50));
  cursor: not-allowed;
}

/* Journey ribbon — 4 fixed steps, current step highlighted, done steps carry
   the app-catalog check icon (never hand-drawn — frontend/landing/js/checkout/icons.js). */
.journey-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each step is an inline pill; the current step is a solid-white pill with
   brand ink (the "you are here" marker), done steps brighten + carry an inline
   check, upcoming steps stay faint. Mirrors the accepted v2 mockup ribbon. */
.journey-ribbon__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(var(--color-white-rgb), var(--opacity-50));
}

.journey-ribbon__step--done {
  color: rgba(var(--color-white-rgb), var(--opacity-75));
}

.journey-ribbon__step--active {
  color: var(--primary-500);
  background: white;
  box-shadow: var(--shadow-md);
}

/* Short connector line between steps (decorative; aria-hidden in the markup). */
.journey-ribbon__link {
  flex: none;
  width: 16px;
  height: 1px;
  background: rgba(var(--color-white-rgb), var(--opacity-25));
}

.journey-ribbon__check {
  font-size: 0.875rem;
}

/* Light landing-native modals (blocked booking-check outcomes + the interim
   email prompt — story 57.10). Dim-only scrim, no obscuring visual effect on
   the scrim: the gradient gate (checkout-screen above) is reserved for the
   COMMITTING surface; these stay on the light, pre-commitment landing
   (epics.md:1423). */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.checkout-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--opacity-50));
}

.checkout-modal__dialog {
  position: relative;
  background: var(--color-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--space-10) var(--space-8) var(--space-8);
  width: 100%;
  max-width: 440px;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-modal__dialog {
    animation: checkout-modal-pop var(--motion-duration-medium) cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes checkout-modal-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.checkout-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
}

@media (hover: hover) {
  .checkout-modal__close:hover {
    color: var(--color-text);
  }
}

.checkout-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.checkout-modal__icon {
  font-size: 2rem;
  color: var(--primary-500);
}

.checkout-modal__header h2 {
  font-size: 1.5rem;
  margin: 0;
}

.checkout-modal__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

/* Modal actions reuse the tokenised landing buttons (.btn / .btn-primary /
   .btn-secondary from style.css) — NOT a bespoke button. Here we only own the
   layout: stacked, full-width, comfortable tap targets. */
.checkout-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkout-modal__actions .btn,
.checkout-modal__form .btn {
  width: 100%;
  min-height: 44px;
}

/* Disabled-button convention (all checkout surfaces): a disabled control is
   visibly inert — dimmed + not-allowed cursor + no pointer events — never a
   pressable button that shows an error. Consistent for mouse AND touch (a
   press-then-error pattern has no hover affordance on touch). Mirrors
   .checkout-cta:disabled / .checkout-ghost-btn:disabled. */
.checkout-modal__actions .btn:disabled,
.checkout-modal__form .btn:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.checkout-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.checkout-modal__form input[type='email'] {
  border: 1px solid rgba(0, 0, 0, var(--opacity-25));
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
  min-height: 44px;
  width: 100%;
}

.checkout-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: left;
}

/* Small, fixed checkbox aligned to the first text line (the generic modal input
   rule would otherwise leave it browser-default-sized and baseline-misaligned). */
.checkout-modal__consent input[type='checkbox'] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  cursor: pointer;
}

.checkout-modal__status {
  font-size: 0.875rem;
}

/* Collapse when empty so the at-capacity modal (one button, no reserved status
   line) doesn't carry a block of dead space below the button; it appears only
   once there's a message to show. */
.checkout-modal__status:empty {
  display: none;
}

.checkout-modal__status--success {
  color: var(--primary-500);
}

.checkout-modal__status--error {
  color: var(--agent-500);
}

/* --- The full-screen branded checkout gate (57.11) -----------------------
   Layout only — the surface primitives (.checkout-screen gradient,
   .checkout-card glass, .checkout-card input, .checkout-cta, .journey-ribbon*)
   are the 57.9 kit above; do not duplicate them here. */

.checkout-gate__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Eyebrow + plan-name + price hero (accepted mockup) — left-aligned card head. */
.checkout-gate__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), var(--opacity-50));
  margin: 0 0 var(--space-2);
}

.checkout-gate__plan-name {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-6);
}

.checkout-gate__plan-name span {
  color: rgba(var(--color-white-rgb), var(--opacity-75));
  font-weight: 400;
  font-size: 0.9375rem;
}

/* Price hero (accepted mockup): small currency symbol raised to the top, a big
   bold amount, a small muted period — baseline-aligned in one row. */
.checkout-gate__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  color: white;
  font-variant-numeric: tabular-nums;
}

.checkout-gate__price-cur {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: 1.625rem;
  /* Synthesised oblique 400 on the price figure — matches the autonomous-bar
     counts verbatim (autonomous-bar.css .autobar-num): normal-weight italic
     digits with tabular-nums. */
  font-weight: 400;
  font-style: italic;
}

.checkout-gate__price-amt {
  font-size: 3.625rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  font-style: italic; /* Autobar-count oblique 400 (see currency rule above). */
}

.checkout-gate__price-per {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(var(--color-white-rgb), var(--opacity-75));
}

/* Paddle trust row under the CTA. Inline flow (not flex) so the lock glyph
   stays glued to "Secured by" on the first line and wraps with the text —
   a flex row would vertically-centre the small icon against the 2-line block
   and leave it floating. */
.checkout-gate__trust {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(var(--color-white-rgb), var(--opacity-50));
}

.checkout-gate__trust b {
  color: rgba(var(--color-white-rgb), var(--opacity-75));
  font-weight: 600;
}

.checkout-gate__trust-icon {
  font-size: 0.8125rem;
  vertical-align: -0.15em;
  margin-inline-end: var(--space-1);
}

/* One tokenised rhythm for the form — a single gap between every row (fields, legal,
   consent, CTA, error, trust), so the reserved error line sits in the same rhythm as
   everything else instead of stacking its own margins. */
[data-gate-form] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.checkout-gate__field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-white-rgb));
  margin-bottom: var(--space-1);
}

.checkout-gate__legal {
  font-size: 0.75rem;
  text-align: center;
  color: rgba(var(--color-white-rgb), var(--opacity-50));
  margin: 0;
}

/* Text links on the branded (gradient) checkout surfaces — gate legal links +
   confirmation support link. The global reset strips link styling, so scope a
   distinguishable treatment here: white with a faint underline that brightens
   on hover. Excludes the CTA/ghost anchors (those are buttons, not text links). */
.checkout-screen a:not(.checkout-cta):not(.checkout-ghost-btn),
.checkout-gate__legal a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(var(--color-white-rgb), var(--opacity-50));
}

@media (hover: hover) {
  .checkout-screen a:not(.checkout-cta):not(.checkout-ghost-btn):hover,
  .checkout-gate__legal a:hover {
    text-decoration-color: white;
  }
}

/* Text links on the light booking-outcome modals (e.g. the at-capacity consent
   Privacy Policy link) — primary ink, underlined; excludes the .btn anchors. */
.checkout-modal a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 0, 0, var(--opacity-25));
}

@media (hover: hover) {
  .checkout-modal a:not(.btn):hover {
    text-decoration-color: var(--color-primary);
  }
}

/* Boxed-glass consent row (accepted v2 mockup). No min-height — the row is
   sized by its content + padding, not stretched. */
.checkout-gate__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), var(--opacity-75));
  background: rgba(var(--color-white-rgb), var(--opacity-10));
  border: 1px solid rgba(var(--color-white-rgb), var(--opacity-25));
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
}

/* Native checkbox, small + fixed — overrides the text-input rule above so it is
   not stretched to a full-width box. */
.checkout-gate__consent input[type='checkbox'] {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin-top: 2px;
  accent-color: white;
  cursor: pointer;
}

.checkout-gate__error {
  display: block;
  font-size: 0.875rem;
  text-align: center;
  color: var(--error-500);
}

/* The live form error is OUT of the flow until it has a message (display:none) — so an empty
   error adds ZERO gap (no placeholder; cta→trust is one plain form gap). When a message
   arrives it becomes a grid row and glides open (0fr→1fr + fade) via a reflow in JS, so it's
   still smooth. Scoped to the form error; the static price-unavailable message is unaffected. */
[data-gate-error] {
  grid-template-rows: 0fr;
  opacity: 0;
}

[data-gate-error]:not(.checkout-gate__error--visible) {
  display: none;
}

[data-gate-error].checkout-gate__error--visible {
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  [data-gate-error].checkout-gate__error--visible {
    transition:
      grid-template-rows var(--motion-duration-medium) var(--ease-organic-out),
      opacity var(--motion-duration-medium);
  }
}

[data-gate-error].checkout-gate__error--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.checkout-gate__error-inner {
  overflow: hidden;
  min-height: 0;
}

/* --- Post-payment confirmation screen (57.13) -----------------------------
   Mounts on the 57.9 kit (.checkout-screen gradient, .checkout-card glass,
   .journey-ribbon*). Matches the accepted confirmation mockup: success check,
   a 3-row setup-progress box, a ghost resend, a support line. */
/* One tokenised vertical rhythm for the whole card — no per-child margins. Sections
   (head, status box, follow-ups) are evenly separated; the title + sub-line form a tight
   `head` group. Every gap is a spacing token, so all states share the same spacing. */
.checkout-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.checkout-confirm__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Success check circle at the top (green tint). corner-shape:round keeps it a
   true circle — the global squircle default would otherwise square it off. */
.checkout-confirm__check {
  width: 62px;
  height: 62px;
  border-radius: var(--radius-full);
  corner-shape: round;
  background: rgba(var(--color-success-rgb), var(--opacity-10));
  border: 1px solid rgba(var(--color-success-rgb), var(--opacity-50));
  display: grid;
  place-items: center;
  color: var(--success-400);
}

.checkout-confirm__check-icon {
  font-size: 1.75rem;
}

.checkout-confirm__heading {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.checkout-confirm__lead {
  color: rgba(var(--color-white-rgb), var(--opacity-75));
  font-size: var(--font-size-base);
  margin: 0;
  line-height: 1.5;
}

.checkout-confirm__email {
  color: white;
  font-weight: 600;
}

/* Setup-progress box: three rows, each a dot + label. */
.checkout-confirm__status-box {
  display: grid;
  gap: var(--space-3);
  text-align: left;
  background: rgba(var(--color-white-rgb), var(--opacity-10));
  border: 1px solid rgba(var(--color-white-rgb), var(--opacity-25));
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  width: 100%;
}

.checkout-confirm__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
}

.checkout-confirm__row--done {
  color: white;
}

.checkout-confirm__row--active {
  color: white;
}

.checkout-confirm__row--pending {
  color: rgba(var(--color-white-rgb), var(--opacity-50));
}

.checkout-confirm__dot {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
}

.checkout-confirm__row--done .checkout-confirm__dot {
  color: var(--success-400);
}

.checkout-confirm__dot-icon {
  font-size: 1.125rem;
}

/* Active-step spinner + pending-step ring (small, inside the 18px dot). Even
   size centres cleanly on the 18px grid cell (no sub-pixel offset).
   corner-shape:round keeps them true circles — the global squircle default
   would square off a spinning ring (mirrors the app excluding true dots). */
.checkout-confirm__spinner {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  corner-shape: round;
  border: 2px solid rgba(var(--color-white-rgb), var(--opacity-25));
  border-top-color: white;
}

.checkout-confirm__ring {
  display: block;
  corner-shape: round;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  /* Match the spinner's faint track (opacity-25) minus the white arc — a pending step reads
     as "not started yet", fainter than the active spinner. */
  border: 2px solid rgba(var(--color-white-rgb), var(--opacity-25));
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-confirm__spinner {
    /* 1s matches the app's calm spinner cadence (--motion-duration-slow at
       500ms spins too fast for a "waiting" indicator). A plain transform:rotate
       is pure GPU compositing — cheap now that the card carries no backdrop blur
       (the blur was what made this spinner expensive). */
    animation: checkout-confirm-spin 1s linear infinite;
  }

  @keyframes checkout-confirm-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* Resend is a quiet fallback ("didn't get it?"), NOT the primary action — a subtle
   underlined text link, not a filled button, so it never competes with the heading +
   set-password instruction for the eye. (A filled glass button here read as the CTA.) */
.checkout-ghost-btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  color: rgba(var(--color-white-rgb), var(--opacity-75));
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-ghost-btn {
    transition: color var(--motion-duration-fast);
  }
}

@media (hover: hover) {
  .checkout-ghost-btn:hover:not(:disabled) {
    color: white;
  }
}

.checkout-ghost-btn:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

/* Resend + support follow-ups — shown on email_sent (hidden during provisioning). */
.checkout-confirm__followups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.checkout-confirm__followups[hidden] {
  display: none;
}

/* Two mutually-exclusive recovery branches inside the follow-ups — one shown at a time.
   Each stacks its own action + line; the child elements carry their own vertical rhythm
   (the extra block's margins / the support paragraph's margin-top). */
.checkout-confirm__resend-block,
.checkout-confirm__timeout-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.checkout-confirm__resend-block[hidden],
.checkout-confirm__timeout-actions[hidden] {
  display: none;
}

.checkout-confirm__timeout-actions [data-confirm-refresh][hidden] {
  display: none;
}

/* No reserved space: the "sent" status + support start collapsed and glide open on the
   resend click (grid-rows 0fr→1fr to the exact height), growing the card smoothly. */
.checkout-confirm__followups-extra {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .checkout-confirm__followups-extra {
    transition:
      grid-template-rows var(--motion-duration-medium) var(--ease-organic-out),
      opacity var(--motion-duration-medium);
  }
}

.checkout-confirm__followups-extra--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.checkout-confirm__followups-extra-inner {
  overflow: hidden;
  min-height: 0;
}

.checkout-confirm__resend-status {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: white;
}

.checkout-confirm__resend-status--error {
  color: var(--error-500);
}

.checkout-confirm__support {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: rgba(var(--color-white-rgb), var(--opacity-50));
}

/* Mobile: full-screen, one-column, comfortable inputs (AC e). */
@media (max-width: 480px) {
  .checkout-screen {
    padding: 0;
    align-items: flex-start;
  }

  .checkout-card {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    padding: var(--space-8) var(--space-6);
  }

  [data-gate-form] {
    gap: var(--space-6);
  }
}