/**
 * Denomination pills - progressive enhancement over the WooCommerce
 * variation attribute <select> on variable gift card products.
 *
 * Styled from the active theme's own design tokens where available (Ecomus
 * exposes --em-input-*/--em-button-* custom properties, for example), with
 * plain fallback values for themes that don't define them - so this looks
 * native without needing per-theme overrides.
 */

.sgc-denomination-label {
	display: block;
	font-family: var(--em-font__main, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--em-input-color, #666666);
	margin-bottom: 0.6em;
}

.sgc-denomination-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1.4em;
	margin: 0 0 1em;
}

/* Deliberately understated: plain text by default, no button chrome. A
   border only appears to preview the hover target and to mark the
   selected amount - the amount list should read like the theme's other
   attribute values (e.g. size/colour), not like a row of buttons.
   It's a real <button>, and themes commonly style buttons broadly (e.g.
   filling them solid on hover) with more specificity than a bare class
   selector can beat - background is pinned with !important on every
   interactive state so it can never inherit that fill. */
.sgc-denomination-pill,
.sgc-denomination-pill:hover,
.sgc-denomination-pill:focus,
.sgc-denomination-pill:active,
.sgc-denomination-pill.is-selected {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-family: var(--em-font__main, inherit);
	font-size: var(--em-input-font-size, inherit);
	line-height: 1.2;
	color: var(--em-input-color, #1a1a1a);
	border: 1px solid transparent;
	border-radius: var(--em-input-rounded, 4px);
	padding: 0.5em 0.85em;
	cursor: pointer;
	transition: border-color 0.15s ease, font-weight 0.15s ease;
}

.sgc-denomination-pill:hover {
	border-color: var(--em-input-border-color, #cccccc) !important;
}

.sgc-denomination-pill.is-selected {
	border-color: var(--em-button-bg-color, #1a1a1a) !important;
	font-weight: 600;
}

.sgc-denomination-pill:focus-visible {
	outline: 2px solid var(--em-button-bg-color, #1a1a1a);
	outline-offset: 2px;
}

.sgc-denomination-pill:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Keep the original <select> operable (keyboard/screen reader fallback)
   while visually replaced by the pills. */
.sgc-denomination-pills-active {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}