/**
 * GO1 TRANSFER SUITE — Frontend Fixes / extras.css v1.4.0
 * ─────────────────────────────────────────────────────────────
 * v1.4.0:
 *  - FIX DEFINITIVO cuadrado: Chauffeur usa display:table-cell +
 *    padding:20px 0px en .chbs-column-1/2/3. Sin resetear display
 *    en las columnas directamente, el flex del li no puede ordenar
 *    los hijos correctamente. Ahora: display:block !important en
 *    column-1/2, display:flex en column-3, padding:0 en todas.
 *
 * v1.3.9:
 *  - FIX: Quitado border + background del wrapper .chbs-quantity-section
 *    en mobile — eliminaba el "cuadrado" visible alrededor del stepper
 *  - FIX: Reforzado flex de .chbs-column-3 (flex: 1 1 0%, width: auto,
 *    float: none) para que ELEGIR permanezca en la misma fila que el stepper
 *  - align-items: center en .chbs-quantity-section (era stretch)
 *
 * v1.3.7:
 *  - Stepper HORIZONTAL en móvil: [−] N [+] en pill rounded
 *  - Stepper y botón ELEGIR comparten fila en móvil
 *  - Label "NÚMERO" oculto en móvil (autoexplicativo)
 *  - Touch targets de 32px en pill de 40px
 *
 * v1.2.4 (anterior):
 *  - Ocultar líneas separadoras en items sin selector de número
 *  - Botón ELEGIR rediseñado igual que el botón de vehículos
 */

/* ── CARD WRAPPER ─────────────────────────────────────────── */
.chbs-booking-extra {
	background: linear-gradient(160deg, #071e3a 0%, var(--go1-bg-2) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 14px !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
	transition: border-color 0.2s !important;
}

.chbs-booking-extra:hover { border-color: rgba(0, 196, 190, 0.25) !important; }

/* ── HEADER de sección ────────────────────────────────────── */
.chbs-booking-extra-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 16px 22px 14px !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--go1-white) !important;
	font-family: var(--go1-font) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.chbs-booking-extra-header .chbs-circle {
	color: var(--go1-teal) !important;
	font-size: 18px !important;
}

/* ── RESET lista — SOLO dentro del extra ──────────────────── */
.chbs-booking-extra .chbs-booking-extra-list { padding: 0 !important; margin: 0 !important; }
.chbs-booking-extra .chbs-list-reset {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* ── CADA EXTRA (li) ─────────────────────────────────────── */
.chbs-booking-extra .chbs-list-reset > li {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 18px 22px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.chbs-booking-extra .chbs-list-reset > li:last-child {
	border-bottom: none !important;
}

/* ── Ocultar separador en items SIN selector de número ──────
   Cuando .chbs-column-2 está vacío (extras sin cantidad),
   el item no necesita el divisor inferior de 1px.
   ─────────────────────────────────────────────────────────── */
.chbs-booking-extra .chbs-list-reset > li .chbs-column-2:empty {
	display: none !important;
}

/* ── COLUMNAS ─────────────────────────────────────────────── */
.chbs-booking-extra .chbs-list-reset > li .chbs-column-1 {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.chbs-booking-extra .chbs-list-reset > li .chbs-column-2,
.chbs-booking-extra .chbs-list-reset > li .chbs-column-3 {
	flex: 0 0 auto !important;
}

/* ── TEXTOS ────────────────────────────────────────────────── */
.chbs-booking-form-extra-name {
	display: block !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--go1-white) !important;
	font-family: var(--go1-font) !important;
}

.chbs-booking-form-extra-price {
	display: inline-block !important;
	color: var(--go1-teal) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	margin-top: 2px !important;
}

.chbs-booking-form-extra-description {
	display: block !important;
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	margin-top: 4px !important;
	font-family: var(--go1-font) !important;
	line-height: 1.4 !important;
}

/* ── BOTÓN "Elegir" ──────────────────────────────────────────
   No sobreescribimos el estado por defecto — Chauffeur lo estila
   igual que el botón de vehículos (dark). Solo ajustamos fuente.
   ─────────────────────────────────────────────────────────── */
.chbs-booking-extra .chbs-button.chbs-button-style-2,
.chbs-booking-extra a.chbs-button.chbs-button-style-2 {
	font-family: var(--go1-font) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
}

/* ── CONTADOR DESKTOP: grid input + botones +/- (vertical) ─── */
.chbs-booking-extra .chbs-quantity-section {
	display: grid !important;
	grid-template-areas:
		"num plus"
		"num minus" !important;
	grid-template-columns: 48px 30px !important;
	grid-template-rows: 1fr 1fr !important;
	gap: 2px !important;
	width: 82px !important;
	padding: 0 !important;
}

.chbs-booking-extra .chbs-quantity-section input[type="text"] {
	grid-area: num !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 54px !important;
	text-align: center !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 8px 0 0 8px !important;
	color: var(--go1-white) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	padding: 4px !important;
	font-family: var(--go1-font) !important;
	box-sizing: border-box !important;
}

.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-plus  { grid-area: plus  !important; }
.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-minus { grid-area: minus !important; }

.chbs-booking-extra .chbs-quantity-section-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 25px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	background: rgba(0, 196, 190, 0.1) !important;
	border: 1px solid rgba(0, 196, 190, 0.2) !important;
	color: var(--go1-teal) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	transition: all 0.15s !important;
	box-sizing: border-box !important;
}

.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-plus  { border-radius: 0 8px 0 0 !important; }
.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-minus { border-radius: 0 0 8px 0 !important; }

.chbs-booking-extra .chbs-quantity-section-button:hover {
	background: rgba(0, 196, 190, 0.25) !important;
	border-color: var(--go1-teal) !important;
}

.chbs-booking-extra .chbs-column-2 .chbs-form-field > label {
	font-size: 9px !important;
	font-weight: 700 !important;
	color: rgba(255, 255, 255, 0.4) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-bottom: 4px !important;
	display: block !important;
	font-family: var(--go1-font) !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — STEPPER HORIZONTAL [−] N [+]
   ──────────────────────────────────────────────────────────
   Cambio total respecto al grid vertical de desktop:
   - column-1 (descripción) → fila 1, 100% ancho
   - column-2 (stepper)     → fila 2, 124px fijo
   - column-3 (ELEGIR)      → fila 2, resto del ancho
   - Stepper se transforma en pill horizontal: [−] N [+]
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* Wrapping del item — fila 1 = descripción, fila 2 = stepper + botón */
	.chbs-booking-extra .chbs-list-reset > li {
		flex-wrap: wrap !important;
		gap: 12px !important;
		padding: 16px !important;
		align-items: center !important;
	}

	/* Descripción ocupa toda la fila 1
	   display:block override table-cell de Chauffeur */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-1 {
		display: block !important;
		flex: 1 1 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		vertical-align: unset !important;
		order: 1 !important;
	}

	/* Stepper: ancho fijo 124px en fila 2
	   ─────────────────────────────────────────────────────────
	   CRÍTICO: Chauffeur usa display:table-cell + padding:20px 0px
	   en .chbs-column-2. Sin resetear estos, el flex no funciona
	   y el padding crea espacio visible (las "líneas" del cuadrado).
	   Hay que resetear directamente en .chbs-column-2, NO solo en
	   .chbs-form-field (que es el hijo). */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-2 {
		display: block !important;        /* override table-cell de Chauffeur */
		flex: 0 0 124px !important;
		width: 124px !important;
		max-width: 124px !important;
		padding: 0 !important;            /* override padding:20px 0px */
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		vertical-align: unset !important;
		order: 2 !important;
		align-self: center !important;
	}

	.chbs-booking-extra .chbs-list-reset > li .chbs-column-2 .chbs-form-field {
		width: 124px !important;
		max-width: 124px !important;
		margin: 0 !important;
		/* Quitar border/background que Chauffeur aplica al .chbs-form-field
		   — ESE es el "cuadrado" visible alrededor del stepper */
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	/* Iconos de los botones +/− son ::before de Chauffeur icon font.
	   Si tienen position: absolute heredado no se centran con flex.
	   Resetear a static + block para que el flex del botón los centre. */
	.chbs-booking-extra .chbs-quantity-section-button::before {
		position: static !important;
		display: block !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: auto !important;
		height: auto !important;
	}

	/* Ocultar label "NÚMERO" — el stepper es autoexplicativo */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-2 .chbs-form-field > label {
		display: none !important;
	}

	/* ELEGIR: toma el resto del ancho en fila 2 — reforzado para que
	   no baje a una tercera fila si Chauffeur aplica width/float propios.
	   display:flex override table-cell de Chauffeur. */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-3 {
		display: flex !important;         /* override table-cell */
		flex: 1 1 0% !important;
		min-width: 80px !important;
		width: auto !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		float: none !important;
		vertical-align: unset !important;
		order: 3 !important;
		align-items: center !important;
	}

	/* ─── STEPPER HORIZONTAL ─── */
	/* Sin border ni background en el contenedor: el "cuadrado" visible
	   era la border del wrapper. Cada botón tiene su propio estilo circular.  */
	.chbs-booking-extra .chbs-quantity-section {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0 !important;
		grid-template-areas: none !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		width: 124px !important;
		height: 40px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	/* Botón menos: a la izquierda */
	.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-minus {
		order: 1 !important;
		grid-area: auto !important;
		flex: 0 0 32px !important;
		width: 32px !important;
		height: 32px !important;
		min-height: 32px !important;
		min-width: 32px !important;
		border-radius: 50% !important;
		background: rgba(0, 196, 190, 0.1) !important;
		border: 1px solid rgba(0, 196, 190, 0.25) !important;
		color: var(--go1-teal) !important;
		font-size: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 1 !important;
	}

	/* Input número: en el medio, sin borde, transparente */
	.chbs-booking-extra .chbs-quantity-section input[type="text"] {
		order: 2 !important;
		grid-area: auto !important;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 4px !important;
		text-align: center !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		color: var(--go1-white) !important;
		box-sizing: border-box !important;
	}

	/* Botón más: a la derecha */
	.chbs-booking-extra .chbs-quantity-section-button.chbs-meta-icon-plus {
		order: 3 !important;
		grid-area: auto !important;
		flex: 0 0 32px !important;
		width: 32px !important;
		height: 32px !important;
		min-height: 32px !important;
		min-width: 32px !important;
		border-radius: 50% !important;
		background: rgba(0, 196, 190, 0.1) !important;
		border: 1px solid rgba(0, 196, 190, 0.25) !important;
		color: var(--go1-teal) !important;
		font-size: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 1 !important;
	}

	/* Hover/active state de los botones del stepper */
	.chbs-booking-extra .chbs-quantity-section-button:hover,
	.chbs-booking-extra .chbs-quantity-section-button:active {
		background: rgba(0, 196, 190, 0.25) !important;
		border-color: var(--go1-teal) !important;
	}

	/* Botón ELEGIR: misma altura 40px que el stepper */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-3 .chbs-button {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		display: flex !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		padding: 8px 16px !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	/* Items SIN contador (column-2 vacía): ELEGIR ocupa todo el ancho */
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-2:empty {
		display: none !important;
	}

	.chbs-booking-extra .chbs-list-reset > li:has(.chbs-column-2:empty) .chbs-column-3 {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}


/* ── Issue 3 (v2.3.24): quitar lineas separadoras entre extras en DESKTOP ──
   Sin divisores en la version ordenador: se eliminan border-bottom de cada
   <li>, del header y de las columnas. ─────────────────────────────────────── */
@media (min-width: 769px) {
	.chbs-booking-extra .chbs-list-reset > li { border-bottom: none !important; }
	.chbs-booking-extra-header { border-bottom: none !important; }
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-1,
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-2,
	.chbs-booking-extra .chbs-list-reset > li .chbs-column-3 { border: none !important; }
}