/*
 * The checkout page. Tickets 06 to 13 of `.scratch/simpulse-booking-page/`.
 *
 * Almost everything the five panels need already exists as a component,
 * because the panels are the modal's panels re-housed: `.sp-cal` is
 * components/calendar.css, `.sp-field` and `.sp-input` are components/form.css,
 * `.sp-hold` and `.sp-alert` are components/booking-form.css, `.sp-summary` is
 * components/summary-panel.css, `.sp-pay-method` is
 * components/payment-choice.css and `.sp-steps` is components/steps.css. What
 * is left is what is genuinely new.
 *
 * Progressive selection (ADR-0005): compact Rider choices, a month picker,
 * start/length buttons and a sticky Selection alongside the revealed panels.
 * Details and payment keep their screens and the shared payment button.
 *
 * The head's own contents are `components/selection.css`; what lives here is
 * the pinning, the breakpoint at which its two readings swap, and the
 * `scroll-padding-top` that keeps the browser from scrolling things underneath
 * it. See `.scratch/simpulse-checkout-selection/spec.md`.
 *
 * Radius is 0 everywhere, per design/DESIGN-SYSTEM.md. Every colour, size and
 * gap below is a token; nothing here invents one.
 *
 * Mobile first, and 320 px is a real target: it is the width the whole "the
 * popup is not ideal on mobile" complaint was made about.
 */

/* ------------------------------------------------------------------ shell */

.sp-checkout__lede {
	max-width: 46ch;
	margin: 0 0 var(--sp-9);
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-checkout__shell {
	display: flex;
	flex-direction: column;
	gap: var(--sp-11);
}

/*
 * Two sticky things now cover the top of this page and the browser knows about
 * neither, so anything it scrolls to on its own — a field taking focus on the
 * details step, an anchor — lands underneath them. `--sp-pinned-h` is published
 * by `assets/js/pages/rezervacia.js`, exactly as `--sp-header-h` is by
 * `assets/js/nav.js`, because a sticky thing's height is not knowable here.
 *
 * Scoped by the file it lives in: `inc/assets.php` loads `pages/rezervacia.css`
 * on this view and no other.
 */
html {
	scroll-padding-top: calc(
		var(--sp-header-h, 76px) + var(--sp-pinned-h, 0px) + var(--sp-3)
	);
}

/* ---------------------------------------------------------- the pinned head */

/*
 * The step indicator and the Selection, pinned as one block.
 *
 * One block and not two, because "where am I" and "what did I say" are the same
 * question — and because a phone already carrying a sticky header above and a
 * sticky footer below can afford one more bar, not two.
 *
 * `--sp-z-pinned` sits above the page and below both the header (60) and the
 * nav drawer (70), which have to cover it. The offset is the header's measured
 * height, with the design system's own 76px standing in until nav.js publishes
 * it — the same fallback `components/header.css` uses for the drawer.
 */
.sp-checkout__head {
	position: sticky;
	top: var(--sp-header-h, 76px);
	z-index: var(--sp-z-pinned);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	/*
	 * The chrome a pinned block needs and a static one did not: clearance from
	 * the header above, clearance before the panel slides under, and the
	 * hairline that says the cut is deliberate — the same edge the footer bar
	 * draws for the same reason. 21px in total, and it buys no extra ROW: at
	 * 320 px the block is still bars plus one line of words.
	 */
	padding: var(--sp-2) 0 var(--sp-3);
	background: var(--sp-bg);
	border-bottom: 1px solid var(--sp-line);
}

/*
 * The countdown, hard against the right edge and out of the answers' way. It
 * lost its bottom margin coming here: that margin spaced it above a form it no
 * longer stands on.
 */
.sp-checkout__head .sp-hold {
	margin: 0 0 0 auto;
}

/* --------------------------------------------------------- step indicator */

/*
 * Under 480 px five labels cannot all be read, so only the one being answered
 * is shown, on a row of its own. The bars stay: five of them is the map, and
 * knowing how far in you are matters more than four words you are not on.
 */
@media (max-width: 30em) {
	.sp-checkout__steps {
		flex-wrap: wrap;
	}

	.sp-checkout__steps .sp-step__label,
	.sp-checkout__steps .sp-step__index {
		display: none;
	}

	.sp-checkout__steps .sp-step.is-active .sp-step__label,
	.sp-checkout__steps .sp-step.is-active .sp-step__index {
		display: block;
	}

	.sp-checkout__steps .sp-step.is-active {
		flex-basis: 100%;
	}

	/*
	 * Once there IS an answer it takes the active label's row rather than
	 * adding one: "2 jazdci · 17. október 2026" says everything "Dátum" says
	 * and more. Before the first answer the label stays, because otherwise the
	 * bars would be a map with nothing named on it.
	 */
	.sp-checkout__head.has-answers .sp-checkout__steps .sp-step.is-active .sp-step__label,
	.sp-checkout__head.has-answers .sp-checkout__steps .sp-step.is-active .sp-step__index {
		display: none;
	}

	.sp-checkout__head.has-answers .sp-checkout__steps .sp-step.is-active {
		flex-basis: 0;
	}
}

/* ------------------------------------------------------- the answers' reading */

/*
 * Wide: every bar carries the answer given on its own step, so the map and the
 * Selection are one object and there is no second row to pay for.
 */
.sp-checkout__head .sp-selection {
	display: none;
}

/*
 * Narrow: five columns cannot hold "17. október 2026", so the answers collapse
 * to one line under the bars.
 *
 * The breakpoint is where the COLUMNS give out, not where a phone begins —
 * which is why it is 48em and not the 30em above, and why it will still be the
 * right rule when somebody adds a sixth step.
 */
@media (max-width: 48em) {
	.sp-checkout__head .sp-selection__ans {
		display: none;
	}

	.sp-checkout__head .sp-selection {
		display: flex;
	}
}

/* ----------------------------------------------------------------- panels */

.sp-checkout__step {
	display: flex;
	flex-direction: column;
	gap: var(--sp-7);
	padding: var(--sp-9);
	border: 1px solid var(--sp-line-field);
	background: var(--sp-surface);
}

.sp-checkout__step-number {
	margin: 0;
	font-size: var(--sp-fs-tiny);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-muted-l);
}

.sp-checkout__step-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-checkout__step-lede {
	margin: 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-50);
}

.sp-checkout__field-label {
	margin: var(--sp-5) 0 0;
}

/* ------------------------------------------------------ step 1: the cards */

.sp-rider-grid {
	display: grid;
	gap: var(--sp-grid-gap-sm);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * The WHOLE card is the target. A button inside a card is a smaller thing to
 * hit than the card containing it, and a thumb is wider than either.
 */
.sp-rider-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	min-width: 0;
	padding: var(--sp-7) var(--sp-2);
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--sp-dur-fast) var(--sp-ease);
}

.sp-rider-card:hover,
.sp-rider-card:focus-visible {
	border-color: var(--sp-line-hover);
}

.sp-rider-card.is-chosen {
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
}

.sp-rider-card__group {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.sp-rider-card__count {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-3xl);
	line-height: var(--sp-lh-display);
}

.sp-rider-card__unit {
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sp-text-50);
}

.sp-rider-card__price {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-display);
	color: var(--sp-text);
}

.sp-rider-card__per {
	font-size: var(--sp-fs-tiny);
	color: var(--sp-text-45);
}

/* ------------------------------------------------ step 3: visual choices */

.sp-when {
	display: grid;
	gap: var(--sp-grid-gap-sm);
	grid-template-columns: 1fr;
}

.sp-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: var(--sp-2);
}

.sp-choice {
	min-height: 48px;
	padding: var(--sp-3) var(--sp-2);
	background: var(--sp-bg-deep);
	border: 1px solid var(--sp-line-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.sp-choice:hover:not(:disabled) { border-color: var(--sp-red); }
.sp-choice[aria-pressed="true"] {
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
	box-shadow: inset 0 -3px var(--sp-red);
}
.sp-choice:disabled { color: var(--sp-text-disabled); cursor: not-allowed; }
.sp-when .sp-field__label { margin: 0 0 var(--sp-3); }
.sp-when__status { margin: 0; color: var(--sp-text-muted-l); }

.sp-when__summary {
	min-height: 1.5em;
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-lg);
	line-height: var(--sp-lh-snug);
	color: var(--sp-text);
}

.sp-when__full {
	margin: 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-50);
}

/* ------------------------------------------------------------ step 4 form */

.sp-form__grid--checkout {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sp-form__grid--checkout .sp-field--full {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------- footer bar */

/* Alongside selection on desktop; below it on mobile, never covering fields. */
.sp-checkout__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-7);
	padding: var(--sp-9);
	background: var(--sp-surface);
	border: 1px solid var(--sp-line-field);
	border-top: 3px solid var(--sp-red);
}

.sp-checkout__note {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-20);
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

/* Under the active step: the way forward is the question's own footer, a
   full-width hero button naming the next step, with Back as the quieter way
   out beneath it. DOM order is reversed so the primary button comes first. */
.sp-checkout__actions {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: var(--sp-3);
}
.sp-checkout__actions .sp-checkout__back { align-self: center; min-height: 44px; }

.sp-checkout__layout { display: grid; gap: var(--sp-9); align-items: start; }
.sp-checkout__body { display: grid; gap: var(--sp-9); min-width: 0; }
.sp-checkout__preview { display: grid; gap: var(--sp-5); margin: 0; }
.sp-checkout__preview dt { font-size: var(--sp-fs-xs); color: var(--sp-text-muted-l); }
.sp-checkout__preview dd { margin: var(--sp-1) 0 0; font-weight: 700; overflow-wrap: anywhere; }

.sp-step__link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-height: 44px;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sp-step__link:disabled { cursor: not-allowed; }

/* Pencil + "Zmeniť" under a filled-in step: quiet until hovered, because the
   answer above it is the thing that matters and the way back is the offer. */
.sp-step__edit {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--sp-2);
	min-height: 24px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sp-text-78);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-tiny);
	letter-spacing: var(--sp-ls-eyebrow-lg);
	text-transform: uppercase;
	cursor: pointer;
}
.sp-step__edit[hidden] { display: none; }
.sp-step__edit:hover,
.sp-step__edit:focus-visible { color: var(--sp-red); }
.sp-step__edit svg { flex: 0 0 auto; }
.sp-checkout button:focus-visible,
.sp-checkout summary:focus-visible {
	outline: 2px solid var(--sp-text);
	outline-offset: 3px;
}
.sp-checkout [tabindex="-1"]:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 3px; }
.sp-checkout .sp-cal__head { display: block; }
.sp-checkout .sp-cal__nav { align-items: flex-start; }
.sp-checkout .sp-cal__arrow { flex: 0 0 44px; height: 48px; }
.sp-cal__picker { flex: 1; min-width: 0; }
.sp-cal__picker summary {
	min-width: 0;
	min-height: 48px;
	padding: var(--sp-4) var(--sp-2);
	border: 1px solid var(--sp-line-field);
	list-style: none;
	cursor: pointer;
}
.sp-cal__picker summary::-webkit-details-marker { display: none; }
.sp-cal__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding-top: var(--sp-3); }
.sp-cal__months .sp-choice { font-size: var(--sp-fs-xs); padding-inline: var(--sp-1); }
.sp-checkout .sp-cal__cell { aspect-ratio: auto; min-height: 56px; }
.sp-checkout .sp-cal__free {
	width: var(--sp-1);
	height: var(--sp-1);
	border-radius: var(--sp-radius-circle);
	background: var(--sp-green);
}

@media (min-width: 58em) {
	.sp-checkout__layout { grid-template-columns: minmax(0, 1fr) 20rem; }
	.sp-checkout__foot { position: sticky; top: calc(var(--sp-header-h, 76px) + var(--sp-pinned-h, 0px) + var(--sp-5)); }
}
@media (max-width: 30em) {
	.sp-checkout__step, .sp-checkout__foot { padding: var(--sp-5); }
	.sp-rider-grid { gap: var(--sp-2); }
	.sp-rider-card__group { flex-direction: column; align-items: center; }
	.sp-rider-card__unit { font-size: var(--sp-fs-tiny); }
	.sp-rider-card__price { font-size: var(--sp-fs-sm); white-space: nowrap; }
	.sp-cal__picker summary { font-size: var(--sp-fs-md); }
	.sp-cal__months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- nothing on sale */

.sp-checkout__closed {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-7);
	max-width: 46ch;
}

.sp-checkout__closed-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-checkout__closed-body,
.sp-checkout__closed-phone {
	margin: 0;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

/*
 * A payment method that has already been bought.
 *
 * `aria-disabled` rather than `disabled`, so the button keeps its place in the
 * tab order and still announces why it does nothing — the same choice the
 * stepper made at its bounds.
 */
.sp-checkout .sp-pay-method.is-settled {
	cursor: default;
	opacity: .55;
}

.sp-checkout .sp-pay-method.is-settled.is-selected {
	opacity: 1;
}

/*
 * "You have just booked this."
 *
 * Shown when a tab that finished a checkout is reloaded into one — Back out of
 * the confirmation, on a document the browser has since discarded. It is a
 * notice and not an alarm: the Booking is fine, and this is the way back to it.
 */
.sp-checkout__recent {
	margin: 0 0 var(--sp-7);
	padding: var(--sp-5);
	background: var(--sp-tint-red-8);
	border-left: 2px solid var(--sp-red);
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-82);
}