/* Checkout page. The embedded Stripe iframe styles itself; we only style the
   wrapper, loading state, and error message. */

.checkout-section {
	padding-block: 32px 96px;
}

.checkout-section .container {
	max-width: 760px;
}

#kohlisys-checkout {
	min-height: 480px; /* Reserve space so Stripe iframe doesn't cause layout shift. */
	margin-block: 16px;
}

.checkout-loading {
	color: var(--text-muted, #6b6b6b);
	font-size: 0.95rem;
	padding: 24px 0;
}

.checkout-error {
	color: var(--coral, #ff5a4e);
	background: rgba(255, 90, 78, 0.06);
	padding: 16px 20px;
	border-radius: 8px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.checkout-billing-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 24px;
}
.billing-option {
	padding: 16px 20px;
	border: 1px solid var(--ink-200, #e3e1dc);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.billing-option:hover { border-color: var(--ink-400, #a39e93); }
.billing-option.active {
	border-color: var(--accent-coral, #ff5a4e);
	background: rgba(255, 90, 78, 0.04);
}
.billing-option strong {
	font-size: 15px;
	color: var(--ink-900, #131313);
	font-weight: 600;
}
.billing-option .billing-meta {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--ink-500, #6b6b6b);
}
.billing-option .billing-save { color: var(--accent-coral, #ff5a4e); }

@media (max-width: 560px) {
	.checkout-billing-toggle { grid-template-columns: 1fr; }
}

/* ────────── Thanks page ────────── */
.thanks-timeline {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 40px;
	max-width: 640px;
}
.thanks-step {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 14px 16px;
	border-left: 3px solid var(--accent-coral, #ff5a4e);
	background: rgba(255, 90, 78, 0.04);
	border-radius: 4px;
	align-items: baseline;
}
.thanks-step-when {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink-700, #3a3a3a);
	text-transform: uppercase;
}
.thanks-step-what {
	font-size: 15px;
	color: var(--ink-900, #131313);
}
@media (max-width: 640px) {
	.thanks-step { grid-template-columns: 1fr; gap: 4px; }
}

/* Migration intake form */
.intake-section {
	padding: 64px 0 32px;
	background: var(--ink-50, #f6f5f1);
}
.intake-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}
.intake-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	padding: 28px;
	border-radius: 12px;
	border: 1px solid var(--ink-200, #e3e1dc);
}
.intake-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}
.intake-form label > span {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink-700, #3a3a3a);
	text-transform: uppercase;
}
.intake-form input,
.intake-form select,
.intake-form textarea {
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid var(--ink-200, #e3e1dc);
	border-radius: 8px;
	font-family: inherit;
}
.intake-form textarea { resize: vertical; }
.intake-form .btn { margin-top: 8px; align-self: flex-start; }
.intake-success {
	max-width: 640px;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--ink-200, #e3e1dc);
	border-radius: 12px;
}
@media (max-width: 720px) {
	.intake-grid { grid-template-columns: 1fr; gap: 32px; }
}