/**
 * Pale — B2B Variable Product Options (layout)
 *
 * Works for both the split-column layout (one attribute per table cell + a buy
 * cell) and the legacy single-cell control. Custom props and the Add-button
 * styling are defined on both wrappers so they apply in either case.
 * Intentionally light-touch: inherits the theme's fonts/colours otherwise.
 */

.pale-var,
.pale-var-cell {
	/* Accents now follow the theme palette (Poolrooms child theme) instead of a
	   fixed gold, so these controls stay in sync with the theme automatically.
	   Var names kept unchanged so nothing that references them has to move. */
	--pale-gold: var(--wp--preset--color--primary);        /* was #e3a52b — teal accent: radio dots, priced options */
	--pale-gold-hover: var(--wp--preset--color--primary);  /* was #f0b431 */
	--pale-gold-ink: var(--wp--preset--color--foreground); /* was #1e1710 — ink */
	/* Add button: theme-teal fill with a cream label, matching the theme buttons. */
	--pale-btn-bg: var(--wp--preset--color--primary);      /* was #575044 (grey-brown) */
	--pale-btn-ink: var(--wp--preset--color--background);  /* cream label on the teal fill */
	font-size: 0.95em;
	line-height: 1.3;
}

/* Legacy single-cell control wraps everything in a column. */
.pale-var {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* Legacy: attribute groups stack (priced on top, plain below). Not used by the
   split layout, where each attribute is already in its own table column. */
.pale-var__cols {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	align-items: flex-start;
}

.pale-var__col {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
}

/* An attribute group reads as a clean stack of options. */
.pale-var__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0; /* allow flex children to shrink */
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

/* Each radio option is a row: [radio] [label] ....... [price] */
.pale-var__opt {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	padding: 0.15em 0;
	margin: 0;
}

.pale-var__opt input[type="radio"] {
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--pale-gold);
	width: 0.95em;
	height: 0.95em;
}

/* Options that carry a price get room so the price sits neatly to the right.
   (:has is a progressive nicety — where unsupported, the price still floats right.) */
.pale-var__opt:has(.pale-var__opt-price) {
	min-width: 11em;
}

.pale-var__opt-price {
	margin-left: auto;
	padding-left: 1em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Buy cell: quantity stacked above Add, to keep the column narrow. */
.pale-var__buy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
}

.pale-var__qty {
	width: 4.5em;
	text-align: center;
}

/* Add-to-cart — theme-teal fill, cream label. */
.pale-var__add {
	background-color: var(--pale-btn-bg) !important;
	color: var(--pale-btn-ink) !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 0.45em 1.25em !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

.pale-var__add:hover:not([disabled]):not(.is-loading) {
	color: var(--pale-btn-ink) !important;
	box-shadow: inset 0 0 0 1px rgba(95, 224, 238, 0.55); /* aqua neon ring on hover */
}

/* All coffees in the table are purchasable once options are picked (stock is managed
   upstream), so a not-yet-ready button looks identical — only the not-allowed cursor
   (crossed circle) signals "choose an option first". */
.pale-var__add[disabled] {
	cursor: not-allowed;
	opacity: 1 !important;
}

.pale-var__add.is-loading {
	opacity: 0.85;
	pointer-events: none;
}

.pale-var__notice {
	font-size: 0.85em;
	margin-top: 0.25em;
}

.pale-var__notice.is-err {
	color: #b3261e;
}

.pale-var__notice.is-ok {
	color: #146c2e;
}

/* ---------------------------------------------------------------------------
   Guest mode — browsable offer, no prices or buy controls
--------------------------------------------------------------------------- */

/* "Login to order" hint in the buy column. Muted but visible — enough to tell
   the guest what's behind the login, not so loud it shouts. */
.pale-var__guest-hint {
	display: inline-block;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.6;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

/* "Login for pricing" label that replaces the native price column content. */
.pale-var__guest-price {
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.6;
	color: var(--wp--preset--color--primary);
}

/* Guest cells keep the same layout but radios are view-only feeling. The accent
   colour shifts to a softer tone so it reads as a preview, not an active control. */
.pale-var-cell--guest .pale-var__opt input[type="radio"] {
	accent-color: color-mix(in srgb, var(--pale-gold) 60%, transparent);
}

/* On narrow screens release the priced-option min-width. */
@media (max-width: 600px) {
	.pale-var__cols {
		gap: 1em;
	}
	.pale-var__opt:has(.pale-var__opt-price) {
		min-width: 0;
	}
}