/*
 * Gift card amount cards (single product page). They replace WooCommerce's variation
 * <select>, which stays in the form for WooCommerce's script.
 * Colours come from the Breakdance palette variables (Accent, Line, Background Darker).
 */

/* The select and Breakdance's arrow next to it stay in the DOM but out of sight. */
.hos-amount-cards__select,
.hos-amount-cards + .bde-woo-select__arrow {
	display: none !important;
}

/* At least 5.5rem per card: one row of five on desktop, three per row on phones. */
.hos-amount-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: 0.75rem;
	width: 100%;
}

/* Beats Breakdance's `table.variations label` (block, margin-bottom, line-height 1). */
.variations .hos-amount-cards label.hos-amount-card {
	position: relative;
	display: block;
	margin: 0;
	line-height: 1.2;
	cursor: pointer;
}

/* Hidden but still focusable, so the cards work with the keyboard like radio buttons. */
.hos-amount-card__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.hos-amount-card__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 0.5rem;
	border: 1px solid var(--bde-palette-line-ad87f5e9-5a36-4ea8-8b77-ef573e0496da-3, #d8cfb8);
	background-color: var(--bde-palette-color-1-0b07a66c-5fa0-47fe-8fed-1c765ad7b090, #ebe4d3);
	color: var(--bde-headings-color);
	font-family: var(--bde-body-font-family);
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.hos-amount-card:hover .hos-amount-card__label {
	border-color: var(--bde-palette-color-1-b4e44aa7-068a-4996-b6b5-fd9c3d101e4b, #94763c);
}

/* Selected: 2px Accent border (the inset shadow adds the second pixel without
 * shifting the layout) and Accent text. */
.hos-amount-card__input:checked + .hos-amount-card__label {
	border-color: var(--bde-palette-color-1-b4e44aa7-068a-4996-b6b5-fd9c3d101e4b, #94763c);
	box-shadow: inset 0 0 0 1px var(--bde-palette-color-1-b4e44aa7-068a-4996-b6b5-fd9c3d101e4b, #94763c);
	color: var(--bde-palette-color-1-b4e44aa7-068a-4996-b6b5-fd9c3d101e4b, #94763c);
}

.hos-amount-card__input:focus-visible + .hos-amount-card__label {
	outline: 2px solid var(--bde-palette-color-1-b4e44aa7-068a-4996-b6b5-fd9c3d101e4b, #94763c);
	outline-offset: 2px;
}

.hos-amount-card__input:disabled + .hos-amount-card__label {
	opacity: 0.4;
	cursor: not-allowed;
}