/* Guided, card-by-card onboarding (plan & top-up -> account -> business &
   tax -> payment), one step visible at a time inside a single card.
   Behavior: assets/checkout-form.js; the Stripe Checkout Session is created
   server-side in worker/src/checkout.js (see kb/apps/registry.md). Tokens,
   buttons and field primitives come from assets/site.css. */

.checkout-form { padding: 1.25rem 1.25rem 1.5rem; }

/* ---- Selected plan, pinned above the steps ---- */
.checkout-plan-strip {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.625rem;
	row-gap: 0.125rem;
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}
.checkout-plan-strip-name { font-weight: 600; color: var(--ink); }
.checkout-plan-strip-price { font-size: 0.875rem; color: var(--muted); }
.checkout-plan-strip-change {
	margin-left: auto;
	padding: 0.25rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.checkout-plan-strip-change:hover { text-decoration: underline; }

/* ---- Progress ---- */
.checkout-progress {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.375rem;
	margin-bottom: 1.75rem;
}
.checkout-progress-step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted);
}
.checkout-progress-step::before {
	content: '';
	height: 4px;
	border-radius: 999px;
	background: var(--line);
	transition: background-color 0.25s ease;
}
.checkout-progress-step.is-complete::before { background: rgba(255, 122, 0, 0.45); }
.checkout-progress-step.is-active::before { background: var(--orange); }
.checkout-progress-step.is-active { color: var(--ink); font-weight: 600; }

/* ---- Steps ---- */
.checkout-step { display: none; }
.checkout-step.is-active { display: block; animation: checkout-step-in 0.25s var(--ease); }
@keyframes checkout-step-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.checkout-step-title {
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ink);
}
.checkout-step-title:focus { outline: none; }

/* ---- Step 1: plan summary ---- */
.checkout-plan-card {
	padding: 1.125rem;
	border-radius: var(--radius-lg);
	background: var(--surface-soft);
	border: 1px solid var(--line);
}
.plan-summary-top { display: flex; flex-direction: column; gap: 0.75rem; }
.plan-summary-name { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.plan-summary-tagline { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.plan-summary-price { font-size: 1.5rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.plan-summary-price span { margin-left: 0.125rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan-summary-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0.875rem 0;
	border-block: 1px solid var(--line);
}
.plan-summary-stats dt { font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.plan-summary-stats dd { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.plan-summary-included { margin-top: 0.875rem; font-size: 0.875rem; line-height: 1.55; }
.plan-summary-included .checkout-form-plan-included-text { margin-top: 0.5rem; }

/* ---- Step 1: top-up ---- */
.checkout-topup-section { margin-top: 1.5rem; }
.checkout-topup-section > .form-label { margin-bottom: 0.625rem; }
.checkout-topup-tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
.checkout-topup-tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 3.75rem;
	padding: 0.5rem 0.25rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-control);
	background: var(--surface);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.checkout-topup-tier:hover { border-color: #94A3B8; }
.checkout-topup-tier.is-selected { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 1px var(--orange); }
.checkout-topup-tier-amount { font-size: 1rem; font-weight: 600; color: var(--ink); }
.checkout-topup-tier-tokens { font-size: 0.75rem; color: var(--muted); }
.checkout-topup-custom-row { margin-top: 0.625rem; }
.checkout-topup-section > .form-hint { margin-top: 0.625rem; }

.input-prefix { position: relative; }
.input-prefix-symbol {
	position: absolute;
	left: 0.875rem; top: 50%;
	transform: translateY(-50%);
	font-weight: 500;
	color: var(--muted);
	pointer-events: none;
}
.input-prefix .form-input { padding-left: 1.75rem; }

.checkout-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-top: 1.5rem;
	padding: 1rem 1.125rem;
	border-radius: var(--radius-lg);
	background: var(--orange-soft);
	border: 1px solid rgba(255, 122, 0, 0.25);
	transition: transform 0.2s ease;
}
.checkout-total.is-updated { transform: scale(1.015); }
.checkout-total-label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.checkout-total-value { font-size: 1.125rem; font-weight: 700; color: var(--ink); }

.checkout-plan-footnotes { margin-top: 1rem; font-size: 0.75rem; line-height: 1.55; color: var(--muted); }
.checkout-plan-footnotes p + p { margin-top: 0.25rem; }

/* ---- Step 2: password ---- */
.input-reveal { position: relative; }
.input-reveal .form-input { padding-right: 4.5rem; }
.input-reveal-toggle {
	position: absolute;
	right: 0.375rem; top: 50%;
	transform: translateY(-50%);
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted);
}
.input-reveal-toggle:hover { color: var(--ink); background: var(--surface-soft); }

.password-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem 0.75rem;
	margin-top: 0.375rem;
}
.password-checklist li {
	position: relative;
	padding-left: 1.375rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--muted);
	transition: color 0.15s ease;
}
.password-checklist li::before {
	content: '';
	position: absolute;
	left: 0.25rem; top: 0.5em;
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	background: var(--line-strong);
	transition: background-color 0.15s ease;
}
.password-checklist li.is-met { color: var(--success); }
.password-checklist li.is-met::before {
	left: 0; top: 0.2em;
	width: 1rem; height: 1rem;
	background: var(--success-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2315803D" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12.5 4 4 8-9"/></svg>') center / 0.6875rem no-repeat;
}

/* ---- Step 3: country pickers & phone ---- */
.picker { position: relative; }
.picker-trigger {
	display: flex;
	align-items: center;
	text-align: left;
	padding-right: 2.5rem;
	background: var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2364748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') right 0.75rem center / 1.125rem no-repeat;
	cursor: pointer;
}
.picker-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-trigger-label.is-placeholder { color: #94A3B8; }
.picker-dropdown {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	z-index: 20;
	width: 100%;
	min-width: 16rem;
	padding: 0.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.picker-search { min-height: 2.75rem; }
.picker-list { max-height: 15rem; margin-top: 0.375rem; overflow-y: auto; overscroll-behavior: contain; }
.picker-list li[data-code] {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
}
.picker-list li[data-code]:hover, .picker-list li.is-active { background: var(--surface-soft); }
.picker-list li[aria-selected="true"] { font-weight: 600; color: var(--orange-ink); }
.picker-option-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.picker-empty { padding: 0.75rem; font-size: 0.875rem; color: var(--muted); text-align: center; }

.phone-field { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; }
/* First + last name: stacked on phones, side by side from 420px. The pair
   owns the spacing around and inside it -- .form-row + .form-row would
   otherwise push the second column down and leave no gap above or below. */
.checkout-form-row-pair { display: grid; gap: 1.25rem 1rem; align-items: start; }
.checkout-form-row-pair > .form-row + .form-row { margin-top: 0; }
.form-row + .checkout-form-row-pair,
.checkout-form-row-pair + .form-row { margin-top: 1.25rem; }
.checkout-dial-picker .picker-dropdown { width: min(20rem, calc(100vw - 3rem)); }

/* ---- Step 4: payment ---- */
.checkout-stripe-loading {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 22rem;
}
.skeleton {
	display: block;
	border-radius: var(--radius-control);
	background: linear-gradient(90deg, var(--surface-soft) 0%, var(--line) 50%, var(--surface-soft) 100%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-label { width: 7rem; height: 0.75rem; margin-top: 0.625rem; border-radius: 999px; }
.skeleton-field { height: var(--control-h); }
.skeleton-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.skeleton-button { height: 3rem; margin-top: 1rem; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.checkout-stripe-embed:empty { display: none; }
/* Stripe's iframe loads here out of sight while the session is created. */
.checkout-stripe-embed.is-pending { height: 0; overflow: hidden; }

/* ---- Navigation ---- */
.checkout-nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}
/* Tax step: VAT number, or (UK) "My business isn't VAT-registered" and a
   company registration number instead. */
.checkout-tax-id-field,
.checkout-company-number-field { display: flex; flex-direction: column; gap: 0.375rem; }
.checkout-tax-id-row > * + * { margin-top: 0.875rem; }
.checkout-tax-id-row > .checkout-tax-id-field[hidden] + .form-check { margin-top: 0; }
.form-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.75rem; /* a full-size tap target on phones */
	width: fit-content;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.form-check-input {
	flex: 0 0 auto;
	display: grid;
	place-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	border: 1.5px solid var(--line-strong);
	border-radius: 0.375rem;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.form-check-input::after {
	content: "";
	width: 0.6875rem;
	height: 0.6875rem;
	background: var(--surface);
	clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 20%, 84% 4%, 41% 68%);
	transform: scale(0);
	transition: transform 0.15s var(--ease);
}
.form-check:hover .form-check-input { border-color: #94A3B8; }
.form-check-input:checked { border-color: var(--orange); background: var(--orange); }
.form-check-input:checked::after { transform: scale(1); }
.form-check-input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--orange-ring); }

.checkout-nav-back { flex: 0 0 auto; }
.checkout-nav-next { flex: 1 1 auto; }
.checkout-nav .btn { padding-inline: 1.25rem; }

@media (min-width: 420px) {
	.checkout-topup-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.checkout-form-row-pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 480px) {
	.plan-summary-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

@media (min-width: 640px) {
	.checkout-form { padding: 2rem; }
	.checkout-plan-card { padding: 1.25rem 1.375rem; }
	.checkout-nav { justify-content: space-between; }
	.checkout-nav-next { flex: 0 0 auto; min-width: 11rem; }
	.checkout-progress-step { font-size: 0.8125rem; }
}