/**
 * NADIOL Multi-Buy — front-end styles.
 *
 * Deliberately minimal: no gradients, no box-shadows beyond a hairline
 * border, no animation beyond a fast colour/border transition. Colours are
 * expressed as CSS custom properties with sane fallbacks so a theme can
 * override them globally (e.g. from a parent stylesheet) without touching
 * this file:
 *
 *   --nadiol-mb-accent, --nadiol-mb-text, --nadiol-mb-muted,
 *   --nadiol-mb-border, --nadiol-mb-bg, --nadiol-mb-radius
 */

.nadiol-multibuy {
	/* NADIOL uses WPBakery (Visual Composer), not Elementor, so there is no
	   --e-global-color-primary variable on this site for the old fallback
	   chain to ever resolve — it was silently always falling through to the
	   hex value below. Set the resolved value directly; a theme can still
	   override any of these custom properties globally (e.g. from a parent
	   stylesheet) exactly as before. */
	--nadiol-mb-accent: #1a1a1a;
	--nadiol-mb-text: inherit;
	--nadiol-mb-muted: #6b6b6b;
	--nadiol-mb-border: #dcdcdc;
	--nadiol-mb-bg: #ffffff;
	--nadiol-mb-radius: 2px;

	margin: 0 0 1.25em;
	max-width: 100%;
}

.nadiol-multibuy__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.nadiol-multibuy__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.75em;
	align-items: stretch;
}

@media ( max-width: 640px ) {
	.nadiol-multibuy__grid {
		grid-template-columns: 1fr;
	}
}

.nadiol-multibuy__card {
	position: relative;
	min-width: 0;
}

.nadiol-multibuy__card-label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	height: 100%;
	box-sizing: border-box;
	padding: 1em 1em 1.1em;
	border: 1px solid var( --nadiol-mb-border );
	border-radius: var( --nadiol-mb-radius );
	background: var( --nadiol-mb-bg );
	cursor: pointer;
	color: var( --nadiol-mb-text );
	transition: border-color 120ms ease, background-color 120ms ease;
}

.nadiol-multibuy__card:hover .nadiol-multibuy__card-label {
	border-color: var( --nadiol-mb-accent );
}

.nadiol-multibuy__radio {
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.5em 0 0;
	accent-color: var( --nadiol-mb-accent );
	flex: 0 0 auto;
}

.nadiol-multibuy__radio:focus-visible {
	/* A plain single-colour outline in --nadiol-mb-accent is hard to see
	   against the featured/checked card, which already uses that same
	   colour for its own border and radio fill — a keyboard user gets
	   little visual difference between "focused" and "checked". A white
	   ring followed by a dark ring reads clearly against any card state
	   (white background, black border, or both). */
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var( --nadiol-mb-accent );
	border-radius: 1px;
}

.nadiol-multibuy__card:has( .nadiol-multibuy__radio:checked ) .nadiol-multibuy__card-label {
	border-color: var( --nadiol-mb-accent );
	border-width: 2px;
	padding: calc( 1em - 1px ) calc( 1em - 1px ) calc( 1.1em - 1px );
}

.nadiol-multibuy__card--featured .nadiol-multibuy__card-label {
	border-color: var( --nadiol-mb-accent );
	/* A faint tint (not a new colour — just the accent at low opacity) so
	   the recommended card reads as the obvious choice even before it's
	   hovered, focused or selected, without introducing a bright/gradient
	   "discount plugin" look. */
	background: rgba( 0, 0, 0, 0.025 );
}

.nadiol-multibuy__card--disabled .nadiol-multibuy__card-label {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Badges default to a quiet, outlined treatment. Only the featured
   (3-month/"Recommended") card below gets the solid, high-contrast
   treatment — otherwise a badge on every card (e.g. 6-month's "Maximum
   Saving") reads with equal or greater weight than the one card that's
   actually meant to be the obvious choice, per NADIOL's requirement that
   the 6-month option not visually overpower the middle one. */
.nadiol-multibuy__badge {
	position: absolute;
	top: -0.65em;
	left: 1em;
	background: var( --nadiol-mb-bg );
	color: var( --nadiol-mb-muted );
	border: 1px solid var( --nadiol-mb-border );
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: calc( 0.3em - 1px ) calc( 0.6em - 1px );
	border-radius: var( --nadiol-mb-radius );
	line-height: 1;
}

.nadiol-multibuy__card--featured .nadiol-multibuy__badge {
	background: var( --nadiol-mb-accent );
	border-color: var( --nadiol-mb-accent );
	color: #fff;
}

.nadiol-multibuy__card-header {
	display: flex;
	align-items: center;
}

.nadiol-multibuy__card-title {
	font-weight: 600;
	font-size: 1em;
}

.nadiol-multibuy__card-bottles,
.nadiol-multibuy__card-per-month {
	font-size: 0.85em;
	color: var( --nadiol-mb-muted );
}

.nadiol-multibuy__card-percent {
	font-size: 0.8em;
	font-weight: 600;
	color: var( --nadiol-mb-accent );
}

.nadiol-multibuy__card-price {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-top: 0.15em;
}

.nadiol-multibuy__card-original {
	color: var( --nadiol-mb-muted );
	font-size: 0.85em;
	text-decoration: line-through;
}

.nadiol-multibuy__card-adjusted {
	font-size: 1.15em;
	font-weight: 600;
	text-decoration: none;
}

.nadiol-multibuy__card-saving {
	font-size: 0.8em;
	color: var( --nadiol-mb-muted );
}

.nadiol-multibuy__card-stock-note {
	font-size: 0.8em;
	color: #a94442;
}

.nadiol-multibuy__note {
	margin: 0.6em 0 0;
	font-size: 0.85em;
	color: var( --nadiol-mb-muted );
}

.nadiol-multibuy__variation-hint {
	margin: 0;
	font-size: 0.9em;
	color: var( --nadiol-mb-muted );
}

.nadiol-multibuy__live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Basket / mini-cart upgrade prompt. */
.nadiol-multibuy-upgrade-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.4em;
	padding: 0.5em 0.75em;
	border: 1px solid var( --nadiol-mb-border, #dcdcdc );
	border-radius: 2px;
	font-size: 0.85em;
}

.nadiol-multibuy-upgrade-prompt__button {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.25em 0.75em;
	font-size: 0.85em;
	cursor: pointer;
}

.nadiol-multibuy-upgrade-prompt__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nadiol-multibuy-upgrade-prompt.is-loading {
	opacity: 0.6;
	pointer-events: none;
}