/**
 * Page Paiement (checkout) — templates/template-checkout.php only.
 *
 * Reused as-is: tokens, .container, .section, .page-header/.breadcrumb,
 * .card, .form-label/.form-input/.form-error, .btn, .link-arrow. Only
 * this page's own layout (form + sticky order summary) lives here.
 */

/* Two-column layout — form and summary side by side from tablet width up
   (sticky summary on the right); stacked on phones with the summary
   first (same `order` technique as contact.css). */

.checkout-layout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.checkout-summary {
	order: -1;
}

@media (min-width: 768px) {
	.checkout-layout__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}

	.checkout-summary {
		order: 0;
		position: sticky;
		top: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.checkout-layout__grid {
		gap: var(--space-10);
	}
}

/* Form */

.checkout-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.checkout-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0; /* fieldset's default min-inline-size breaks grid/flex shrinking */
	margin: 0;
}

.checkout-form__legend {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	float: left; /* pulls the legend inside the card instead of onto its border */
	width: 100%;
	margin-bottom: var(--space-2);
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--color-text);
}

.checkout-form__legend + * {
	clear: both;
}

.checkout-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 600px) and (max-width: 767px), (min-width: 1024px) {
	.checkout-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Native <select> rendering ignores part of .form-input's padding, so it
   comes out a different height than the text inputs beside it (Pays vs
   Région). Pin both to the text input's natural height: one line of
   body text + vertical padding + 1px border top and bottom. */
.checkout-form input.form-input,
.checkout-form select.form-input {
	height: calc(var(--fs-base) * var(--lh-base) + 2 * var(--space-3) + 2px);
}

.checkout-form__hint {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
}

.checkout-form__hint + .form-error {
	margin-top: var(--space-1);
}

.checkout-form__required-note {
	margin-bottom: var(--space-5);
	color: var(--color-text-faint);
	font-size: var(--fs-xs);
}

.checkout-form__submit {
	width: 100%;
}

.checkout-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Status banner — filled + revealed by assets/js/checkout.js. */

.checkout-form__status {
	display: none;
	margin-bottom: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.checkout-form__status.is-visible {
	display: block;
}

.checkout-form__status--error {
	border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
	background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

/* Honeypot — off-screen, same technique as contact.css. */
.checkout-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Order summary */

.checkout-summary__title {
	margin-bottom: var(--space-5);
	font-size: var(--fs-xl);
}

.checkout-summary__plan {
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.checkout-summary__plan-name {
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.checkout-summary__meta {
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.checkout-summary__features {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-4) 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.checkout-summary__features li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.checkout-summary__features svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

.checkout-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-md);
}

.checkout-summary__total strong {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	color: var(--color-text);
}

.checkout-summary__change {
	display: inline-flex;
	margin-top: var(--space-4);
	font-size: var(--fs-sm);
}