/*
 * Selectable option card and hour chip. design/DESIGN-SYSTEM.md §4.16,
 * grids §3.4 (plan picker: minmax(160px,1fr) / 10px), badge §4.19.
 *
 * Used by booking step 1 for the Pricing Plan picker and the hour ladder of an
 * extendable plan. Adopted RECOMMEND from §8 item 6: the selected fill is
 * rgba(236,28,36,0.16) for both, not 0.14 / 0.16.
 *
 * TODO token: the 24px option title has no font-size token (tokens.css jumps
 * 22px -> 26px).
 */

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

.sp-choice {
	position: relative;
	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-choice:hover,
.sp-choice:focus-visible {
	border-color: var(--sp-red);
}

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

/*
 * The badge is flush in the corner (§4.19), so a badged card starts its title
 * below it -- at the narrowest track (160px) an "AKCIA!" flag and a "30 MIN"
 * title would otherwise share the same line.
 */
.sp-choice--badged {
	padding-top: var(--sp-11);
}

.sp-choice__badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px var(--sp-5);
	background: var(--sp-red);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-sm);
	letter-spacing: var(--sp-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-choice__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-choice__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: var(--sp-1);
	font-size: var(--sp-fs-sm);
	color: var(--sp-red);
}

.sp-choice__old {
	color: var(--sp-text-40);
	text-decoration: line-through;
}

/* ------------------------------------------------------------- hour chips */

.sp-hours {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.sp-hour {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 76px;
	padding: 13px var(--sp-6);
	background: var(--sp-bg-deep);
	border: var(--sp-border-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	cursor: pointer;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease);
}

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

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

.sp-hour__label {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md-lg);
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
}

.sp-hour__price {
	margin-top: var(--sp-1);
	font-size: var(--sp-fs-micro);
	color: var(--sp-red);
}

.sp-hours__note {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}