/*
 * Booking step 4 — how the customer pays.
 * design/DESIGN-SYSTEM.md §4.16 (selectable option card, payment strip),
 * §3.4 (the modal's option grid: auto-fit minmax(160px,1fr), gap 10px).
 *
 * The two method cards are the same object as the plan picker on step 1 --
 * same ground, same border, same selected tint (§8 item 6's standardised
 * rgba(236,28,36,0.16)), same 24px Barlow title over a 14px red sub-line. They
 * are a different class only because they live in a different file; visually
 * there is one option card in this design and this is it.
 *
 * Cash carries no restriction of any kind: no rider ceiling, no duration
 * ceiling, no warning about group size, no visual demotion against the card.
 * That is ticket 21's whole point, and it is a styling decision as much as a
 * logic one -- so the two cards are identical in weight.
 *
 * Nothing here styles the inside of `#sp-stripe-element`. That mount belongs
 * to assets/js/booking-payment.js and its own stylesheet
 * (design/API-CONTRACT.md, "Front-end udalosti pokladne").
 *
 * TODO token: the 24px option title has no font-size token (tokens.css jumps
 * 22px -> 26px); the 10px option-grid gap and the 84px Stripe logo are the
 * design's own literals.
 */

/* ------------------------------------------------------------ method cards */

.sp-pay-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

.sp-pay-method {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--sp-6);
	background: var(--sp-bg-deep);
	border: var(--sp-border-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	text-align: left;
	cursor: pointer;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease);
}

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

.sp-pay-method.is-selected {
	border-color: var(--sp-red);
	background: var(--sp-tint-red-16);
}

/* §8 item 24's convention for a control that is out of reach right now. */
.sp-pay-method[disabled],
.sp-pay-method[aria-disabled="true"] {
	opacity: .4;
	cursor: not-allowed;
}

.sp-pay-method[disabled]:hover,
.sp-pay-method[aria-disabled="true"]:hover {
	border-color: var(--sp-line-field);
}

.sp-pay-method__title {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: 24px; /* TODO token */
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-pay-method__sub {
	margin-top: var(--sp-1);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-red);
}

/* ------------------------------------------------------------- card region */

.sp-pay__card {
	margin-top: var(--sp-7);
}

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

.sp-pay__status.is-error {
	color: var(--sp-red);
}

.sp-pay__retry {
	margin-top: var(--sp-4);
}

/* §4.16 payment strip. */
.sp-pay__stripe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-7);
	padding: var(--sp-5);
	border: 1px solid var(--sp-line);
}

.sp-pay__stripe img {
	width: 84px;
	height: auto;
}

.sp-pay__terms {
	flex: 1;
	min-width: 200px;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

/* ------------------------------------------------------------- cash region */

/*
 * Framed exactly like the Stripe strip so neither path looks like the poor
 * relation of the other.
 */
.sp-pay__cash {
	margin: var(--sp-7) 0 0;
	padding: var(--sp-5);
	border: 1px solid var(--sp-line);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}