/* =========================================================
   SKI SCHOOL — RENTAL / EXTRAS REFINEMENT

   Loaded after booking-ui.css on bookable-service product
   pages only. Presentation of the ThemeComplete rental group
   (Unique ID 6aa1c979e1c0c8.41114313) and its "¿Necesita
   alquilar material?" toggle.

   DELIBERATELY NARROW. The child theme already owns the
   approved treatment for two things and both are LEFT ALONE:

     .ski-rental-options .tm-quantity      — the "Personas"
       stepper: its two-line placement, 44px touch targets,
       ETmodules +/- glyphs and focus ring.
     .ski-rental-options .ski-rental-question-*-div — the
       question / "Sí" control sitting on one line.

   This file only removes the card-like treatment that was
   sitting on top of them and restores the circular selector.
   No field id, name, rule, conditional or price is touched.
   ========================================================= */

#tm-extra-product-options .ski-rental-options {
	--ssbu-rental-circle: 24px;
}

/* One left edge for the whole form: a ThemeComplete section can carry its
   own inset, which would make the rental block start a few pixels in from
   every other question. */
#tm-extra-product-options .cpf-section,
#tm-extra-product-options .tc-section-inner-wrap,
#tm-extra-product-options .tc-element-inner-wrap,
#tm-extra-product-options .tc-element-container {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}


/* ---------------------------------------------------------
   1. THE QUESTION ROW — exempt from the tile grid

   The "¿Necesita alquilar material?" control is a radio group,
   so the universal full-width tile grid in booking-ui.css
   catches it and stretches it. This is the one intentional
   exception: it stays a small inline control on the question's
   own line, which is what the child theme lays out.
   --------------------------------------------------------- */

#tm-extra-product-options .ski-rental-question-control-ul.tm-extra-product-options-radio {
	display: inline-flex !important;
	width: auto !important;
	gap: 8px;
}

#tm-extra-product-options .ski-rental-question-control-ul .tm-epo-field-label {
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--ssbu-r-btn);
}

#tm-extra-product-options .ski-rental-question-control-ul .tc-label-text {
	font-size: 15px;
}

/* A yes/no toggle reads best as a filled state rather than a tinted one.
   It is still quieter than the total and the primary action, which are
   both larger and sit lower in the panel. */
#tm-extra-product-options
.ski-rental-question-control-ul
.tm-epo-field-label:has(input:checked) {
	background: var(--ssbu-blue);
	border-color: var(--ssbu-blue);
}

#tm-extra-product-options
.ski-rental-question-control-ul
.tm-epo-field-label:has(input:checked) .tc-label-text {
	color: #FFFFFF;
	font-weight: 700;
}

/* The "Sí" option carries no price; the empty price span would otherwise
   add dead width inside a compact control. */
#tm-extra-product-options
.ski-rental-question-control-ul
.tc-price-wrap:empty,
#tm-extra-product-options
.ski-rental-question-control-ul
.tc-price-wrap .amount:empty {
	display: none;
}

/* Keep the question and its control on one line and vertically centred. */
#tm-extra-product-options .ski-rental-options .tc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#tm-extra-product-options .ski-rental-options .ski-rental-question-label-div .tc-epo-label {
	margin: 0 !important;
}


/* ---------------------------------------------------------
   2. THE CONDITIONAL LIST READS AS A SUBSECTION

   A small gap and one hairline, not a second panel inside the
   panel.
   --------------------------------------------------------- */

#tm-extra-product-options [data-uniqid="6aa1c979e1c0c8.41114313"] {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--ssbu-line);
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-ul-wrap {
	display: block;
	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------------
   3. ONE OPTION = ONE ROW

   No card, no border box, no shadow. A hairline between rows
   is the only structure.
   --------------------------------------------------------- */

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap {
	margin: 0;
	padding: 6px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ssbu-line);
	border-radius: 0;
	box-shadow: none;
	transition: background-color 140ms ease;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap:last-child {
	border-bottom: 0;
}

/* The child theme owns .tmcp-field-wrap-inner (flex-wrap + align-items:
   flex-start) so the quantity can drop to its own line. Nothing is set
   here beyond the row's minimum height. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-field-label-wrap {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tm-epo-field-label {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	cursor: pointer;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}

/* Name left, live price right, on one baseline. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label-inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	min-height: 0;
	padding: 0;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ssbu-ink);
	text-align: left;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-price-wrap {
	flex: 0 0 auto;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ssbu-blue);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------
   4. THE CIRCLE

   ThemeComplete already marks this wrapper .circle; we keep
   its own element as the visible control rather than drawing
   a replacement. The real checkbox stays in the DOM, stays
   focusable and stays the thing that toggles — it is only
   made transparent and stretched to a 44px hit area.
   --------------------------------------------------------- */

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-epo-style-wrapper {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ssbu-rental-circle);
	height: var(--ssbu-rental-circle);
	margin: 0;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-input-wrap {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
input.tmcp-checkbox {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label.tm-epo-style {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: var(--ssbu-rental-circle);
	height: var(--ssbu-rental-circle);
	margin: 0;
	padding: 0;
	background: var(--ssbu-snow);
	border: 1.5px solid rgba(33, 74, 94, 0.32);
	border-radius: 50%;
	box-shadow: none;
	pointer-events: none;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* Checked: a filled blue dot inside the ring, plus heavier label text —
   two cues, so selection never rests on colour alone. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap:has(input:checked) .tc-label.tm-epo-style {
	border-color: var(--ssbu-blue);
	box-shadow: inset 0 0 0 5px var(--ssbu-snow), inset 0 0 0 12px var(--ssbu-blue);
}

#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap:has(input:checked) .tc-label-text {
	font-weight: 700;
	color: var(--ssbu-deep);
}

/* A whisper of Ice on the selected row — no border, no card. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap:has(input:checked) {
	background: rgba(232, 241, 245, 0.55);
}

@media (hover: hover) and (pointer: fine) {
	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tmcp-field-wrap:hover .tc-label.tm-epo-style {
		border-color: var(--ssbu-blue);
	}
}

/* Keyboard focus lands on the circle, because the real input is
   transparent. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tmcp-field-wrap:has(input:focus-visible) .tc-label.tm-epo-style {
	outline: 3px solid var(--ssbu-blue);
	outline-offset: 3px;
}

/* ThemeComplete can draw its own decoration on these elements; the ring
   above is the only mark we want. */
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-input-wrap::before,
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-input-wrap::after,
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label.tm-epo-style::before,
#tm-extra-product-options
[data-uniqid="6aa1c979e1c0c8.41114313"]
.tc-label.tm-epo-style::after {
	content: none !important;
}


/* ---------------------------------------------------------
   5. <= 980px

   Same row, same circle. The name gets the room; the price
   stays right-aligned; the stepper keeps the child theme's
   own second-line placement.
   --------------------------------------------------------- */

@media (max-width: 980px) {
	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-label-wrap {
		gap: 12px;
	}

	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-label-text {
		font-size: 14.5px;
	}

	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-price-wrap {
		font-size: 14.5px;
	}
}

@media (max-width: 420px) {
	#tm-extra-product-options .ski-rental-options {
		--ssbu-rental-circle: 22px;
	}

	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-label-wrap {
		gap: 10px;
	}

	/* Long names wrap rather than shrinking the price off the row. */
	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-label-inner {
		gap: 8px;
	}

	#tm-extra-product-options
	[data-uniqid="6aa1c979e1c0c8.41114313"]
	.tc-label-text {
		font-size: 14px;
	}
}