/* Okonome company formation funnel */
.formation-page {
	--formation-gold: #d4af37;
	--formation-gold-light: #f5e6a3;
	--formation-gold-dark: #c9a227;
	--formation-border: var(--color-line);
	--formation-muted: var(--color-content-dimmed);
	color-scheme: light dark;
}

/* Form controls — theme vars are already full rgb() values */
.formation-page .input,
.formation-page input.input,
.formation-page .formation-field input,
.formation-page .formation-field select,
.formation-page .formation-name-row input {
	background-color: var(--color-intermediate);
	color: var(--color-content);
	border-color: var(--color-line);
}

.formation-page .input::placeholder,
.formation-page input::placeholder {
	color: var(--color-content-super-dimmed);
	opacity: 1;
}

.formation-page .input:focus,
.formation-page input.input:focus,
.formation-page .formation-field input:focus,
.formation-page .formation-name-row input:focus {
	outline: none;
	border-color: var(--color-content-dimmed);
}

.formation-page input[type='date'] {
	color-scheme: light dark;
}

:root[data-mode='dark'] .formation-page {
	color-scheme: dark;
}

:root[data-mode='dark'] .formation-page input[type='date'] {
	color-scheme: dark;
}

.formation-page input[type='date']::-webkit-calendar-picker-indicator {
	opacity: 0.65;
	cursor: pointer;
}

:root[data-mode='dark'] .formation-page input[type='date']::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.75;
}

.formation-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
}

.formation-hero {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 2.5rem;
}

.formation-hero h1 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.formation-hero p {
	font-size: 1.0625rem;
	color: var(--formation-muted);
	line-height: 1.6;
}

.formation-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.formation-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.formation-summary-sticky {
		position: sticky;
		top: 1.5rem;
	}
}

.formation-card {
	background: var(--color-main);
	border: 1px solid var(--formation-border);
	border-radius: 1.25rem;
	padding: 1.25rem;
}

@media (min-width: 768px) {
	.formation-card {
		padding: 1.5rem;
		border-radius: 1.5rem;
	}
}

.formation-card + .formation-card {
	margin-top: 1rem;
}

.formation-card h2 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.formation-name-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.formation-name-row {
		flex-direction: row;
	}
}

.formation-name-row input {
	flex: 1;
}

.formation-status {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	border-radius: 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-top: 0.875rem;
}

.formation-status.is-available {
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.2);
	color: rgb(21, 128, 61);
}

.formation-status.is-unavailable {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: rgb(185, 28, 28);
}

.formation-packages {
	display: grid;
	gap: 0.875rem;
}

@media (min-width: 768px) {
	.formation-packages {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.formation-package {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.125rem;
	border: 2px solid var(--formation-border);
	border-radius: 1rem;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background: var(--color-main);
	text-align: left;
}

.formation-package:hover {
	border-color: rgba(212, 175, 55, 0.45);
}

.formation-package.is-selected {
	border-color: var(--formation-gold);
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}

.formation-package.is-recommended {
	border-color: rgba(212, 175, 55, 0.35);
}

.formation-package-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	width: fit-content;
}

.formation-package-badge.basic { background: rgba(234, 179, 8, 0.15); color: #a16207; }
.formation-package-badge.starter { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.formation-package-badge.plus { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.formation-package-badge.recommended { background: linear-gradient(90deg, var(--formation-gold-light), var(--formation-gold)); color: #26282b; }

.formation-package-price {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.formation-package-tagline {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.formation-package-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--formation-muted);
	line-height: 1.45;
}

.formation-package-list li {
	display: flex;
	gap: 0.375rem;
}

.formation-package-list li::before {
	content: '✓';
	color: var(--formation-gold-dark);
	font-weight: 700;
	flex-shrink: 0;
}

.formation-fields {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.formation-fields.two-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.formation-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	margin-bottom: 0.375rem;
	color: var(--color-content);
}

.formation-field input,
.formation-field select {
	width: 100%;
}

.formation-included-banner {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	border-radius: 0.875rem;
	background: linear-gradient(90deg, rgba(245, 230, 163, 0.25), rgba(212, 175, 55, 0.12));
	border: 1px solid rgba(212, 175, 55, 0.25);
	font-size: 0.875rem;
}

.formation-summary-card {
	border: 2px solid var(--color-content);
	border-radius: 1.25rem;
	padding: 1.25rem;
	background: var(--color-main);
}

.formation-summary-card h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.formation-summary-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	padding: 0.375rem 0;
}

.formation-summary-line.total {
	border-top: 1px solid var(--formation-border);
	margin-top: 0.5rem;
	padding-top: 0.875rem;
	font-size: 1rem;
	font-weight: 700;
}

.formation-summary-includes {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--formation-border);
}

.formation-summary-includes ul {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--formation-muted);
}

.formation-summary-includes li::before {
	content: '• ';
	color: var(--formation-gold-dark);
}

.formation-pay-btn {
	width: 100%;
	margin-top: 1.25rem;
}

.formation-pay-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.formation-legal {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--formation-border);
	font-size: 0.75rem;
	color: var(--formation-muted);
	line-height: 1.6;
}

.formation-legal ul {
	margin: 0.5rem 0 0;
	padding-left: 1rem;
}

.formation-alert {
	padding: 0.875rem 1rem;
	border-radius: 0.875rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.formation-alert.error {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: rgb(185, 28, 28);
}

.formation-alert.info {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.15);
	color: rgb(29, 78, 216);
}

.formation-header-minimal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0 0.5rem;
	max-width: 1120px;
	margin: 0 auto;
}

.formation-header-minimal img {
	max-height: 2rem;
}

.formation-success {
	max-width: 36rem;
	margin: 0 auto;
	padding: 3rem 1rem 4rem;
	text-align: center;
}

.formation-success h1 {
	font-size: 1.75rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.formation-progress {
	margin: 2rem 0;
	text-align: left;
}

.formation-progress-step {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 0;
	font-size: 0.9375rem;
	color: var(--formation-muted);
}

.formation-progress-step.is-active {
	color: var(--color-content);
	font-weight: 500;
}

.formation-progress-step.is-done {
	color: rgb(21, 128, 61);
}

.formation-progress-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	border: 2px solid var(--formation-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.75rem;
}

.formation-progress-step.is-active .formation-progress-icon {
	border-color: var(--formation-gold);
	background: linear-gradient(135deg, var(--formation-gold-light), var(--formation-gold));
	color: #26282b;
}

.formation-progress-step.is-done .formation-progress-icon {
	border-color: rgb(34, 197, 94);
	background: rgb(34, 197, 94);
	color: white;
}

.formation-spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(212, 175, 55, 0.25);
	border-top-color: var(--formation-gold);
	border-radius: 50%;
	animation: formation-spin 0.7s linear infinite;
}

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