/*
 * Voucher modal — the four things the booking modal has no equivalent of.
 * design/DESIGN-SYSTEM.md §4.16 ("Selectable option card" voucher variant,
 * "Delivery toggle") and §12 of design/PAGE-STRUCTURE.md.
 *
 * Everything else the flow needs is already in the cascade and is used
 * unchanged: modal.css for the shell, option-card.css for the amount cards,
 * form.css and booking-form.css for the fields, summary-panel.css for step 4,
 * payment-choice.css for the Stripe strip, done-screen.css for the tick. This
 * file loads after all of them (components are enqueued in filename order, and
 * `voucher-modal` sorts last), so the two overrides below win without a single
 * `!important`.
 *
 * Square corners throughout. The only circle in the design is the done tick,
 * and it belongs to done-screen.css.
 *
 * TODO token: the 28px voucher amount and the 13px voucher subtitle have no
 * names in tokens.css (which jumps 26px -> 30px and 13px is --sp-fs-xs only
 * where it means body copy, not a card sub-label).
 */

/* --------------------------------------------------- amount option card */

/*
 * §4.16: a voucher amount is 28px where a plan duration is 24px, and its
 * sub-label is quiet white rather than the plan card's red price.
 */
[data-sp-voucher-panel="1"] .sp-choice__title {
	font-size: 28px; /* TODO token */
}

.sp-choice__sub--quiet {
	font-size: var(--sp-fs-xs);
	color: var(--sp-text-55);
}

/* ------------------------------------------------------- delivery toggle */

/*
 * The one control in the design whose selected state is a SOLID red fill
 * rather than the 16% tint every other selectable carries (§4.16). It is a
 * two-way switch, not one card among several, and the design draws it as one.
 *
 * §4.16 gives the resting border as rgba(255,255,255,0.22), which is a fourth
 * value for the same hairline. It collapses to the 0.20 ghost token, the same
 * normalisation modal.css already applies to the "Späť" button's 0.24
 * (DESIGN-SYSTEM §8).
 */
.sp-delivery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-delivery__opt {
	padding: var(--sp-3) var(--sp-8);
	background: transparent;
	border: var(--sp-border-ghost);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease);
}

.sp-delivery__opt:hover,
.sp-delivery__opt:focus-visible {
	border-color: var(--sp-red);
}

.sp-delivery__opt.is-selected {
	background: var(--sp-red);
	border-color: var(--sp-red);
}

.sp-delivery__hint {
	margin: var(--sp-3) 0 0;
}

/* ------------------------------------------------- the printable link row */

.sp-done__print {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-6) 0 0;
}

.sp-done__print-note {
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}