/* =========================================================
   SKI SCHOOL — BOOKING CONFIGURATOR UI

   Scope: single-product pages of the "clases-reservables"
   category only (enqueue guard in ski-school-booking-ui.php).

   This file styles the CONTROLS that ThemeComplete Extra
   Product Options renders, plus the date-range trigger and
   popover that assets/js/booking-ui.js injects. It never
   changes a field id, a field name, a conditional, a lookup
   table or a price. Presentation only.

   Selector policy: plugin markup classes (.cpf-element,
   .tm-epo-field-label, .tc-epo-totals …) and ThemeComplete
   stable Unique Element IDs via [data-uniqid]. No Divi
   generated ids, no nth-child, no deep structural chains.

   Colours and metrics come from the Divi global colour /
   design variables so the booking UI cannot drift from the
   design system; each carries a literal fallback so the file
   still renders correctly if Divi's variable stylesheet is
   ever deferred.

   Breakpoints follow the project rule: <=980 / >=981.
   ========================================================= */

.ski-product-config,
#tm-extra-product-options {
	--ssbu-deep:   var(--gcid-secondary-color, #214A5E);
	--ssbu-blue:   var(--gcid-primary-color, #26ADE2);
	--ssbu-ink:    var(--gcid-heading-color, #0F2430);
	--ssbu-muted:  var(--gcid-d3ecea35-9f0c-4157-8b9e-f29501786d17, #5A6B75);
	--ssbu-snow:   #FFFFFF;
	--ssbu-ice:    var(--gcid-9806f6e3-daa3-4d8b-9846-2bf013d9f564, #E8F1F5);
	--ssbu-line:   var(--gcid-1d626195-6183-42c5-aff5-91da7c5b3953, #DCE6EB);
	--ssbu-error:  var(--gcid-4b6ab156-5907-4aff-a898-57d3d36fbe4a, #D94747);

	--ssbu-r-sm:   var(--gvid-ada98279-c036-428f-b47c-da3b7e6990e3, 6px);
	--ssbu-r-md:   var(--gvid-7fbb9a60-64e7-4080-b0ad-7d7940939a61, 10px);
	--ssbu-r-btn:  var(--gvid-f5b5fe8b-ccfe-427c-9602-03fd3bd6667e, 12px);
	--ssbu-r-card: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);

	--ssbu-tech:   var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b, Orbitron), system-ui, sans-serif;

	/* One touch target size for every control in the booking form. */
	--ssbu-tap:    46px;
	--ssbu-group:  var(--gvid-384aa6a5-658b-469b-9fcc-bd48f7728abb, 24px);
}


/* =========================================================
   1. TECHNICAL FIELDS THAT MUST STAY IN THE DOM BUT NOT ON SCREEN

   "Días calculados" is written by booking-ui.js and read by
   ThemeComplete's price maths. It is machinery, not a
   customer decision, so it is hidden visually while remaining
   present and submitted exactly as the plugin expects.
   ========================================================= */

#tm-extra-product-options [data-uniqid="6a9ec232a47083.78275278"] {
	display: none !important;
}

/* Defensive: WooCommerce's raw base price is not the booking price.
   ThemeComplete's own "hide price html" setting already suppresses it;
   this keeps a stray echo out of the configurator column if that
   setting is ever changed. */
.ski-product-config > .price,
.ski-product-config p.price {
	display: none;
}


/* =========================================================
   2. FORM RHYTHM AND GROUP LABELS

   Every ThemeComplete element is one decision. Consistent
   vertical spacing plus one strong question label per group
   is what stops a 15-field configurator reading as a wall.
   ========================================================= */

#tm-extra-product-options .cpf-element {
	margin-bottom: var(--ssbu-group);
}

#tm-extra-product-options .cpf-element:last-child {
	margin-bottom: 0;
}

#tm-extra-product-options .tc-epo-label {
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ssbu-ink);
}

/* The required marker is a real character in the label, not colour alone. */
#tm-extra-product-options .tm-epo-required {
	color: var(--ssbu-blue);
	font-weight: 700;
}

#tm-extra-product-options .tmcp-ul-wrap {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* =========================================================
   3. RADIO GROUPS AS SELECTABLE TILES

   The native radio dot is removed visually but the input
   itself stays focusable and checkable, so keyboard and
   assistive technology behaviour is unchanged.
   ========================================================= */

#tm-extra-product-options .tm-extra-product-options-radio {
	display: grid;
	gap: 10px;
	width: 100%;
}

#tm-extra-product-options .tm-extra-product-options-radio > .tmcp-field-wrap {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: var(--ssbu-tap);
	margin: 0 !important;
	padding: 10px 12px;
	background: var(--ssbu-snow);
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-md);
	box-shadow: none;
	color: var(--ssbu-ink);
	text-align: center !important;
	cursor: pointer;
	transition:
		background-color 140ms ease,
		border-color 140ms ease,
		box-shadow 140ms ease;
}

/* ThemeComplete nests several wrappers between the label and its text.
   They all become full-size flex boxes so the whole tile is clickable
   and the text is optically centred. */
#tm-extra-product-options .tm-extra-product-options-radio .tc-label-wrap,
#tm-extra-product-options .tm-extra-product-options-radio .tm-label,
#tm-extra-product-options .tm-extra-product-options-radio .tc-label,
#tm-extra-product-options .tm-extra-product-options-radio .tc-label-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

#tm-extra-product-options .tm-extra-product-options-radio .tc-label-text {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: inherit;
}

/* Remove the plugin's drawn radio circle and its decorative pseudo-elements,
   without touching the input's own semantics. */
#tm-extra-product-options .tm-extra-product-options-radio .tc-input-wrap,
#tm-extra-product-options .tm-extra-product-options-radio .tc-label.tm-epo-style {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
	background: none !important;
}

#tm-extra-product-options .tm-extra-product-options-radio .tc-input-wrap::before,
#tm-extra-product-options .tm-extra-product-options-radio .tc-input-wrap::after {
	content: none !important;
}

/* Hover only where a real pointer exists. */
@media (hover: hover) and (pointer: fine) {
	#tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:hover {
		border-color: var(--ssbu-blue);
		background: var(--ssbu-ice);
	}
}

/* Selected state: colour AND weight, never colour alone. Deliberately
   NOT a second inset ring — a doubled border reads as a heavy card and
   fights the calm the booking panel needs. */
#tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:has(input:checked) {
	background: var(--ssbu-ice);
	border-color: var(--ssbu-blue);
	box-shadow: none;
	color: var(--ssbu-deep);
}

#tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:has(input:checked) .tc-label-text {
	font-weight: 700;
}

/* Keyboard focus is carried by the label because the input is visually hidden. */
#tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:has(input:focus-visible) {
	outline: 3px solid var(--ssbu-blue);
	outline-offset: 2px;
}


/* =========================================================
   4. PER-GROUP COLUMN COUNTS

   Addressed by ThemeComplete Unique Element IDs, which are
   preserved when a product is duplicated — so a new bookable
   service built from an existing one inherits these layouts
   with no extra CSS.
   ========================================================= */

/* ¿Cuántos días quieres reservar?  (2 choices) */
#tm-extra-product-options [data-uniqid="6a9ebde9070070.52203745"] .tm-extra-product-options-radio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Personas (5 choices) */
#tm-extra-product-options [data-uniqid="6a9eaf67cb4c02.01287450"] .tm-extra-product-options-radio {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Nivel (3 choices) */
#tm-extra-product-options [data-uniqid="6a9eb285b25776.62631965"] .tm-extra-product-options-radio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Duración (3 choices) */
#tm-extra-product-options [data-uniqid="6a9ebb200d8209.19554136"] .tm-extra-product-options-radio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Horario — three conditional variants, each with its own number of
   choices, so they size themselves rather than being pinned. */
#tm-extra-product-options [data-uniqid="6a9ebb200d8213.35212621"] .tm-extra-product-options-radio,
#tm-extra-product-options [data-uniqid="6a9ebb200d8222.18893257"] .tm-extra-product-options-radio,
#tm-extra-product-options [data-uniqid="6a9ebb200d8230.44974440"] .tm-extra-product-options-radio {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}


/* =========================================================
   5. DATE FIELD AND DATE-RANGE TRIGGER

   The single date input (ThemeComplete) and the range trigger
   (booking-ui.js) are deliberately identical, because to the
   customer they are the same decision in two modes.
   ========================================================= */

#tm-extra-product-options .cpf-type-date .tmcp-date,
#tm-extra-product-options .ssbu-range-display {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ssbu-tap);
	margin: 0;
	padding: 10px 14px;
	background: var(--ssbu-snow);
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-md);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ssbu-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
	#tm-extra-product-options .cpf-type-date .tmcp-date:hover,
	#tm-extra-product-options .ssbu-range-display:hover {
		border-color: var(--ssbu-blue);
	}
}

#tm-extra-product-options .cpf-type-date .tmcp-date:focus,
#tm-extra-product-options .cpf-type-date .tmcp-date:focus-visible,
#tm-extra-product-options .ssbu-range-display:focus-visible {
	outline: 3px solid var(--ssbu-blue);
	outline-offset: 2px;
	border-color: var(--ssbu-blue);
}

#tm-extra-product-options .tmcp-date::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}

#tm-extra-product-options .ssbu-range-icon {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
	filter: grayscale(1);
	opacity: 0.7;
}

#tm-extra-product-options .ssbu-range-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* JS swaps Fecha <-> Rango de fechas with this class. Never restyle or
   rename it: booking-ui.js depends on it. */
.cpf-element.ssbu-force-hide {
	display: none !important;
}

/* The underlying ThemeComplete text input for the range stays in the DOM
   (its value is what reaches the cart); only its box is invisible. */
.ssbu-range-wrap .tmcp-field.tmcp-textfield {
	display: none;
}


/* =========================================================
   6. DATE-RANGE POPOVER
   ========================================================= */

#tm-extra-product-options .ssbu-picker {
	position: absolute;
	z-index: 60;
	display: none;
	width: min(320px, calc(100vw - 48px));
	margin-top: 8px;
	padding: 14px;
	background: var(--ssbu-snow);
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-card);
	box-shadow: 0 14px 36px rgba(15, 36, 48, 0.10);
}

#tm-extra-product-options .ssbu-picker.ssbu-open {
	display: block;
}

#tm-extra-product-options .ssbu-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

#tm-extra-product-options .ssbu-month-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--ssbu-deep);
}

#tm-extra-product-options .ssbu-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--ssbu-ice);
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-sm);
	font-size: 17px;
	line-height: 1;
	color: var(--ssbu-deep);
	cursor: pointer;
}

#tm-extra-product-options .ssbu-nav:focus-visible,
#tm-extra-product-options .ssbu-clear:focus-visible,
#tm-extra-product-options .ssbu-day:focus-visible {
	outline: 3px solid var(--ssbu-blue);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	#tm-extra-product-options .ssbu-nav:hover {
		border-color: var(--ssbu-blue);
	}
}

#tm-extra-product-options .ssbu-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
	font-family: var(--ssbu-tech);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--ssbu-muted);
}

#tm-extra-product-options .ssbu-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

#tm-extra-product-options .ssbu-day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ssbu-r-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--ssbu-ink);
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	#tm-extra-product-options .ssbu-day:not(.ssbu-past):not(.ssbu-empty):hover {
		background: var(--ssbu-ice);
	}
}

#tm-extra-product-options .ssbu-day.ssbu-empty {
	visibility: hidden;
	cursor: default;
}

#tm-extra-product-options .ssbu-day.ssbu-past {
	color: var(--ssbu-muted);
	opacity: 0.45;
	cursor: not-allowed;
}

#tm-extra-product-options .ssbu-day.ssbu-in-range {
	background: var(--ssbu-ice);
}

#tm-extra-product-options .ssbu-day.ssbu-selected {
	background: var(--ssbu-blue);
	color: #FFFFFF;
	font-weight: 700;
}

#tm-extra-product-options .ssbu-picker-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ssbu-line);
}

#tm-extra-product-options .ssbu-clear {
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--ssbu-deep);
	cursor: pointer;
}

#tm-extra-product-options .ssbu-hint {
	flex: 1 1 auto;
	font-size: 12px;
	line-height: 1.35;
	text-align: right;
	color: var(--ssbu-muted);
}


/* =========================================================
   7. FREE TEXT
   ========================================================= */

#tm-extra-product-options .tmcp-textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 104px;
	padding: 12px 14px;
	background: var(--ssbu-snow);
	border: 1px solid var(--ssbu-line);
	border-radius: var(--ssbu-r-md);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ssbu-ink);
	resize: vertical;
}

#tm-extra-product-options .tmcp-textarea::placeholder {
	color: var(--ssbu-muted);
	opacity: 1;
}

#tm-extra-product-options .tmcp-textarea:focus,
#tm-extra-product-options .tmcp-textarea:focus-visible {
	outline: 3px solid var(--ssbu-blue);
	outline-offset: 2px;
	border-color: var(--ssbu-blue);
}


/* =========================================================
   8. TOTAL

   The figures are ThemeComplete's own live output. Nothing
   here creates, formats or recalculates a value; the block
   only gives the real total a calm surface and a clear
   hierarchy against the option subtotal above it.
   ========================================================= */

.ski-product-config .tc-totals-form {
	margin-top: 4px;
}

.ski-product-config .tc-epo-totals {
	margin: 0;
	padding: 20px 22px;
	background: var(--ssbu-snow);
	border: 1px solid var(--ssbu-line);
	border-top: 3px solid var(--ssbu-blue);
	border-radius: var(--ssbu-r-card);
	/* No shadow: the blue rule and the figure size already make this the
	   strongest element in the panel, and a lifted card would reintroduce
	   the heaviness this pass is removing. */
	box-shadow: none;
}

.ski-product-config .tm-extra-product-options-totals {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 6px;
	margin: 0;
}

.ski-product-config .tm-extra-product-options-totals dt,
.ski-product-config .tm-extra-product-options-totals dd {
	margin: 0;
	padding: 0;
}

/* Option subtotal — supporting information. */
.ski-product-config .tm-extra-product-options-totals dt {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ssbu-muted);
}

.ski-product-config .tm-extra-product-options-totals dd {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ssbu-deep);
	text-align: right;
}

/* Final total — the one figure the customer is deciding on, so it is
   the largest thing in the panel after the product title itself. */
.ski-product-config dt.tm-final-totals {
	align-self: center;
	font-family: var(--ssbu-tech);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ssbu-deep);
}

.ski-product-config dd.tm-final-totals,
.ski-product-config dd.tm-final-totals .price,
.ski-product-config dd.tm-final-totals .amount,
.ski-product-config dd.tm-final-totals bdi {
	font-size: clamp(28px, 2.2vw, 34px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ssbu-ink);
	font-variant-numeric: tabular-nums;
}

/* The final row sits apart from the option subtotal above it. */
.ski-product-config .tm-extra-product-options-totals dt.tm-final-totals,
.ski-product-config .tm-extra-product-options-totals dd.tm-final-totals {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--ssbu-line);
}

/* A deposit / down-payment plugin, when one is active, prints its own
   breakdown rows inside this same totals block. These rules give those
   REAL rows the same calm hierarchy — they never invent a figure, and
   they simply match nothing while no such plugin is installed. */
.ski-product-config .wc-deposits-wrapper,
.ski-product-config .yith-wcdp-message,
.ski-product-config .wc-deposits-deposit-amount,
.ski-product-config .wc-deposits-second-payment {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ssbu-line);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ssbu-deep);
}


/* =========================================================
   9. PRIMARY BOOKING ACTION

   Same anatomy as the approved Button / Primary system:
   solid Ski School Blue, no gradient, 12px radius, 48px+.
   ========================================================= */

/* Divi styles WooCommerce buttons from #page-container, and its Woo
   Add To Cart module ships a transparent/outline default — which is why
   the primary booking action was rendering as an outline button. The
   #page-container prefix is what lets the approved Primary Button win;
   it is the same device the approved Clases de esqui CTA uses. This is a
   specificity fix, NOT a second button variant: every value below is the
   Primary Button system's own. */
#page-container .ski-product-config .single_add_to_cart_button.button,
#page-container .ski-product-config .single_add_to_cart_button.button.alt {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin-top: 16px;
	padding: 15px 24px !important;
	background: var(--ssbu-blue) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--ssbu-r-btn) !important;
	color: #FFFFFF !important;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-transform: none;
	opacity: 1 !important;
	cursor: pointer;
	transition: background-color 140ms ease, box-shadow 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
	#page-container .ski-product-config .single_add_to_cart_button.button:hover,
	#page-container .ski-product-config .single_add_to_cart_button.button.alt:hover {
		background: var(--ssbu-deep) !important;
		box-shadow: 0 8px 22px rgba(15, 36, 48, 0.14);
	}
}

#page-container .ski-product-config .single_add_to_cart_button.button:focus-visible {
	outline: 3px solid var(--ssbu-deep) !important;
	outline-offset: 3px;
}

/* Divi's Woo add-to-cart module appends a decorative arrow glyph via
   ::after; the booking action reads better as a plain label. */
#page-container .ski-product-config .single_add_to_cart_button.button::after,
#page-container .ski-product-config .single_add_to_cart_button.button::before {
	display: none !important;
	content: none !important;
}


/* =========================================================
   10. VALIDATION

   ThemeComplete owns validation logic. These rules only make
   its real messages legible, and never signal an error by
   colour alone — the plugin's own message text is the primary
   cue and a left rule reinforces it.
   ========================================================= */

#tm-extra-product-options .tc-epo-error,
#tm-extra-product-options .tm-error,
#tm-extra-product-options .cpf-error {
	display: block;
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(217, 71, 71, 0.08);
	border-left: 3px solid var(--ssbu-error);
	border-radius: var(--ssbu-r-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ssbu-error);
}

#tm-extra-product-options .cpf-element.tc-has-error .tm-epo-field-label,
#tm-extra-product-options .tmcp-field.tc-has-error {
	border-color: var(--ssbu-error);
}


/* =========================================================
   11. <= 980px

   Mobile is a primary booking channel, so this is a
   recomposition, not a shrink: touch targets grow rather than
   shrink, and any grid that would produce unreadable labels
   wraps instead.
   ========================================================= */

@media (max-width: 980px) {
	.ski-product-config,
	#tm-extra-product-options {
		--ssbu-tap: 48px;
	}

	#tm-extra-product-options .tc-epo-label {
		font-size: 15.5px;
	}

	#tm-extra-product-options .tm-extra-product-options-radio {
		gap: 8px;
	}

	#tm-extra-product-options .tm-extra-product-options-radio .tc-label-text {
		font-size: 14px;
	}

	/* Five numerals still read cleanly in one row at 360px; longer
	   labels do not, so every other group is allowed to wrap. */
	#tm-extra-product-options [data-uniqid="6a9eaf67cb4c02.01287450"] .tm-extra-product-options-radio {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	#tm-extra-product-options [data-uniqid="6a9eb285b25776.62631965"] .tm-extra-product-options-radio,
	#tm-extra-product-options [data-uniqid="6a9ebb200d8209.19554136"] .tm-extra-product-options-radio {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	}

	#tm-extra-product-options [data-uniqid="6a9ebb200d8213.35212621"] .tm-extra-product-options-radio,
	#tm-extra-product-options [data-uniqid="6a9ebb200d8222.18893257"] .tm-extra-product-options-radio,
	#tm-extra-product-options [data-uniqid="6a9ebb200d8230.44974440"] .tm-extra-product-options-radio {
		grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	}

	.ski-product-config .tc-epo-totals {
		padding: 16px;
	}

	.ski-product-config dd.tm-final-totals,
	.ski-product-config dd.tm-final-totals .price,
	.ski-product-config dd.tm-final-totals .amount {
		font-size: 24px;
	}

	#tm-extra-product-options .ssbu-picker {
		width: min(300px, calc(100vw - 56px));
	}
}

@media (max-width: 420px) {
	#tm-extra-product-options .tm-extra-product-options-radio .tc-label-text {
		font-size: 13.5px;
	}
}


/* =========================================================
   12. MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	#tm-extra-product-options *,
	.ski-product-config * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* The date-range popover is injected by booking-ui.js next to the hidden
   ThemeComplete input, so give its field row an explicit containing block.
   Without this the popover resolves against whatever ancestor happens to be
   positioned, which is exactly the kind of accidental dependency that breaks
   on a plugin update. */
#tm-extra-product-options .ssbu-range-wrap .tmcp-field-wrap,
#tm-extra-product-options .ssbu-range-wrap .tmcp-field-wrap-inner {
	position: relative;
}


/* =========================================================
   9b. PAGAR AHORA + ANADIR AL CARRITO

   "Pagar ahora" (.ssbu-buy-now) is the primary action and inherits the
   Primary Button rules of section 9 (it carries the same WooCommerce
   class). When it is present, the native button becomes the secondary
   action: outline in Ski School Deep, same size/radius. The form is a
   column so the primary can sit first visually while the native button
   stays first in the DOM (Enter key keeps adding to cart). Stacked and
   full width at every viewport, which is also the mobile layout.
   ========================================================= */

#page-container .ski-product-config form.cart:has(.ssbu-buy-now) {
	display: flex;
	flex-direction: column;
}

#page-container .ski-product-config form.cart .ssbu-buy-now {
	order: 1;
}

#page-container .ski-product-config form.cart .single_add_to_cart_button.button:has(~ .ssbu-buy-now) {
	order: 2;
	margin-top: 12px;
	background: transparent !important;
	border: 2px solid var(--ssbu-deep) !important;
	color: var(--ssbu-deep) !important;
}

@media (hover: hover) and (pointer: fine) {
	#page-container .ski-product-config form.cart .single_add_to_cart_button.button:has(~ .ssbu-buy-now):hover {
		background: var(--ssbu-ice) !important;
		color: var(--ssbu-deep) !important;
		box-shadow: none;
	}
}

#page-container .ski-product-config form.cart .single_add_to_cart_button.button:has(~ .ssbu-buy-now):focus-visible {
	outline: 3px solid var(--ssbu-blue) !important;
}

/* ThemeComplete marks both buttons .disabled until the form is valid. */
#page-container .ski-product-config form.cart .single_add_to_cart_button.button.disabled,
#page-container .ski-product-config form.cart .single_add_to_cart_button.button[disabled] {
	cursor: not-allowed;
	opacity: .55 !important;
}