/*
 * La ficha de reserva.
 *
 * Este componente se instala en veinte tiendas con veinte temas distintos, así
 * que lo que gobierna el archivo no es la estética: es el aislamiento.
 *
 * 1. **El tema no entra.** Todo cuelga de `.cp-ficha` y arriba hay un reset
 *    acotado que neutraliza lo que los temas heredan y descoloca: tamaños,
 *    `text-transform`, `letter-spacing`, y los estilos que le ponen a `input` y
 *    `button`. Es el problema que teníamos al revés de como suele plantearse: no
 *    hay que imponerle nada al tema, hay que dejar de recibir lo suyo.
 * 2. **Nosotros tampoco salimos.** Ni un selector fuera de `.cp-ficha`, así que
 *    el resto del sitio queda como estaba. Por eso no se usa un framework
 *    global: Bootstrap reescribiría `body`, los encabezados y los botones de
 *    toda la tienda.
 * 3. **Hereda color, no lo fija.** `currentColor` con transparencias y los
 *    colores del sistema para lo que tiene que ser opaco. Un tema oscuro no
 *    rompe nada porque no hay ningún blanco escrito.
 * 4. **Primero el teléfono.** Una columna, objetivos de 44px y el resumen fijo
 *    abajo. El escritorio es la excepción, al final.
 */

.cp-ficha {
	/* --- tokens --------------------------------------------------------- */

	/* Escala tipográfica de cuatro pasos. Ni uno más: lo que hace que algo se
	   vea prolijo es la repetición, no la variedad. */
	--cp-titulo: 1.0625rem;
	--cp-cuerpo: 0.9375rem;
	--cp-menor: 0.8125rem;
	--cp-destacado: 1.375rem;

	/* Rejilla de 8. */
	--cp-1: .25rem;
	--cp-2: .5rem;
	--cp-3: .75rem;
	--cp-4: 1rem;
	--cp-6: 1.5rem;
	--cp-8: 2rem;

	--cp-radio: .625rem;
	--cp-radio-chico: .375rem;

	--cp-borde: color-mix(in srgb, currentColor 16%, transparent);
	--cp-borde-fuerte: color-mix(in srgb, currentColor 42%, transparent);
	--cp-suave: color-mix(in srgb, currentColor 5%, transparent);
	--cp-atenuado: color-mix(in srgb, currentColor 62%, transparent);
	--cp-toque: 44px;

	display: grid;
	gap: var(--cp-4);
	margin-block: var(--cp-6);
	font-size: var(--cp-cuerpo);
	line-height: 1.5;
}

/* --- reset acotado ------------------------------------------------------ */

/*
 * Lo que los temas heredan y rompe este componente. En Atromax, `text-transform`
 * convertía el botón en "Completá El Nombre De Cada P…" y los `<span>` de precio
 * salían en tamaño de titular.
 *
 * **Sin `:where()` y con `!important`, las dos cosas a propósito.**
 *
 * `:where()` no suma especificidad, así que cualquier regla del tema le gana.
 * Pero subir la especificidad tampoco alcanza: Atromax pone
 * `.woocommerce button.button.alt { text-transform: capitalize }`, que son tres
 * clases, y el próximo tema va a usar cuatro. Es una carrera que se pierde
 * siempre, porque el tema se escribe después.
 *
 * Así que estas tres propiedades —y sólo estas tres— van marcadas. No son
 * decisiones de diseño que un tema pueda querer cambiar: son la diferencia entre
 * que el botón diga "Completá el nombre de cada pasajero" o "Completá El Nombre
 * De Cada P…". Todo lo demás —colores, tipografía, tamaños— se hereda y el tema
 * manda.
 */
.cp-ficha span,
.cp-ficha small,
.cp-ficha label,
.cp-ficha button,
.cp-ficha input,
.cp-ficha p,
.cp-ficha h3,
.cp-ficha div,
.cp-ficha li,
.cp-ficha ul {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-style: normal !important;
	font-family: inherit;
}

.cp-ficha :where(ul, li) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-ficha :where(p) {
	margin: 0;
}

.cp-ficha :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	/* Los temas suelen darles sombras y degradados que acá desentonan. */
	box-shadow: none;
	text-shadow: none;
}

.cp-ficha :where(input[type="text"], input[type="number"]) {
	font: inherit;
	color: inherit;
	background: none;
	box-shadow: none;
	max-width: 100%;
}

/* --- pasos -------------------------------------------------------------- */

.cp-paso {
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio);
	padding: var(--cp-4);
}

.cp-paso[hidden] {
	display: none;
}

.cp-paso__titulo {
	margin: 0 0 var(--cp-3);
	font-size: var(--cp-titulo);
	font-weight: 600;
	line-height: 1.25;
}

.cp-ayuda {
	margin-top: var(--cp-2);
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
}

.cp-error {
	margin-top: var(--cp-2);
	font-size: var(--cp-menor);
	font-weight: 600;
}

.cp-estado {
	margin-top: var(--cp-2);
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
}

.cp-aviso {
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio);
	padding: var(--cp-4);
	background: var(--cp-suave);
}

/* --- calendario --------------------------------------------------------- */

.cp-calendario__mes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-2);
	margin-bottom: var(--cp-3);
	font-weight: 600;
}

.cp-calendario__mover {
	min-width: var(--cp-toque);
	min-height: var(--cp-toque);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	font-size: 1.125rem;
}

.cp-calendario__mover[disabled] {
	opacity: .3;
	cursor: default;
}

.cp-calendario__grilla {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--cp-1);
}

.cp-calendario__encabezado {
	text-align: center;
	font-size: .6875rem;
	color: var(--cp-atenuado);
	padding-bottom: var(--cp-1);
}

.cp-dia {
	min-height: var(--cp-toque);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border: 1px solid transparent;
	border-radius: var(--cp-radio-chico);
	padding: var(--cp-1);
	font-variant-numeric: tabular-nums;
}

.cp-dia--vacio {
	visibility: hidden;
}

.cp-dia[disabled] {
	opacity: .28;
	cursor: default;
}

.cp-dia--libre {
	border-color: var(--cp-borde);
	background: var(--cp-suave);
	font-weight: 600;
}

.cp-dia--elegido {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.cp-dia__cupo {
	font-size: .625rem;
	line-height: 1;
	color: var(--cp-atenuado);
	font-weight: 400;
}

/* --- opciones (franjas, pickups) ---------------------------------------- */

.cp-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-2);
}

.cp-opcion {
	display: flex;
	align-items: center;
	gap: var(--cp-2);
	min-height: var(--cp-toque);
	padding: var(--cp-2) var(--cp-3);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	cursor: pointer;
}

.cp-opcion:has(input:checked) {
	border-color: var(--cp-borde-fuerte);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.cp-opcion:has(input:disabled) {
	opacity: .45;
	cursor: default;
}

/*
 * La hora arriba y el cupo debajo, no pegados en una línea: se leía
 * "11:0014 lugares".
 */
.cp-opcion > span {
	display: grid;
	gap: 1px;
	line-height: 1.25;
}

.cp-opcion__hora {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cp-opcion__cupo {
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
}

.cp-opcion--suelta {
	margin-top: var(--cp-2);
}

/* --- tipos de pasajero -------------------------------------------------- */

.cp-tipos {
	display: grid;
	gap: var(--cp-3);
}

/*
 * Nombre y precio a la izquierda, contador a la derecha, en una sola línea.
 * Antes el precio se llevaba un renglón entero en tamaño de titular y empujaba
 * el contador fuera de lugar.
 */
.cp-tipo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-4);
	min-height: var(--cp-toque);
}

.cp-tipo__quien {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cp-tipo__nombre {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cp-tipo__precio {
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cp-contador {
	display: flex;
	align-items: center;
	gap: var(--cp-1);
	flex: none;
}

.cp-contador__boton {
	min-width: var(--cp-toque);
	min-height: var(--cp-toque);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	font-size: 1.25rem;
	line-height: 1;
}

.cp-contador__boton[disabled] {
	opacity: .28;
	cursor: default;
}

.cp-contador__valor {
	width: 3rem;
	min-height: var(--cp-toque);
	text-align: center;
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	font-variant-numeric: tabular-nums;
	/* Las flechitas del navegador chocan con los botones de al lado. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.cp-contador__valor::-webkit-outer-spin-button,
.cp-contador__valor::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* --- nombres ------------------------------------------------------------ */

.cp-nombres {
	display: grid;
	gap: var(--cp-3);
}

.cp-pasajero__quien {
	display: block;
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
	margin-bottom: var(--cp-1);
}

.cp-pasajero__campos {
	display: grid;
	gap: var(--cp-2);
	grid-template-columns: 1fr;
}

.cp-ficha input[type="text"] {
	min-height: var(--cp-toque);
	width: 100%;
	padding: var(--cp-2) var(--cp-3);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
}

/* --- buscador de alojamiento -------------------------------------------- */

.cp-buscador {
	position: relative;
}

.cp-sugerencias {
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	max-height: 16rem;
	overflow-y: auto;
	border: 1px solid var(--cp-borde);
	border-top: none;
	border-radius: 0 0 var(--cp-radio-chico) var(--cp-radio-chico);
	/* Colores del sistema: el desplegable tiene que ser opaco sobre cualquier
	   fondo, y esto funciona igual en claro y en oscuro. */
	background: Canvas;
	color: CanvasText;
}

.cp-sugerencia {
	padding: var(--cp-2) var(--cp-3);
	min-height: var(--cp-toque);
	cursor: pointer;
	display: grid;
	align-content: center;
}

.cp-sugerencia--activa,
.cp-sugerencia:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.cp-mapa {
	height: 15rem;
	margin-top: var(--cp-3);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	overflow: hidden;
}

/* --- adicionales -------------------------------------------------------- */

.cp-extras {
	display: grid;
	gap: var(--cp-3);
}

.cp-extra__fila {
	display: flex;
	align-items: center;
	gap: var(--cp-3);
	min-height: var(--cp-toque);
	cursor: pointer;
}

.cp-extra__nombre {
	flex: 1;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cp-extra__precio {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--cp-atenuado);
	font-size: var(--cp-menor);
}

.cp-extra__precio small {
	display: block;
	font-size: .6875rem;
}

.cp-extra__mas {
	margin-left: calc(var(--cp-4) + var(--cp-1));
	padding: 0;
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
	text-decoration: underline;
}

.cp-extra__detalle {
	margin: var(--cp-2) 0 0 calc(var(--cp-4) + var(--cp-1));
	padding: var(--cp-3);
	border-radius: var(--cp-radio-chico);
	background: var(--cp-suave);
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
}

/* --- resumen ------------------------------------------------------------ */

/*
 * El resumen se pega abajo mientras se baja por el formulario, pero dentro de su
 * columna: anclarlo a la ventana entera es cosa del teléfono, no de una pantalla
 * grande donde el formulario ocupa una franja al costado de las fotos.
 */
.cp-resumen {
	position: sticky;
	bottom: var(--cp-2);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-4);
	padding: var(--cp-3) var(--cp-4);
	background: Canvas;
	color: CanvasText;
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio);
}

/* Teléfono: anclado abajo del todo, donde cae el pulgar. */
@media (max-width: 47.9375em) {
	.cp-ficha {
		/* Deja lugar para la barra fija. */
		padding-bottom: 7.5rem;
	}

	.cp-resumen {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		border: 0;
		border-top: 1px solid var(--cp-borde);
		border-radius: 0;
	}
}

.cp-resumen__cifras {
	display: grid;
	gap: 2px;
	min-width: 0;
}

/*
 * Etiqueta a la izquierda, importe a la derecha, sin cortar el número. Antes se
 * leía "Pagás ahora $ 38.00 / 0,00" porque el importe se partía en dos renglones.
 */
.cp-resumen__linea {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cp-3);
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
	white-space: nowrap;
}

.cp-resumen__linea strong {
	font-size: var(--cp-destacado);
	font-weight: 700;
	color: currentColor;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.cp-resumen__cargando {
	opacity: .45;
}

/*
 * El botón es el que más pelea da: los temas le ponen su propio
 * `text-transform`, su tamaño y su tipografía con selectores bien específicos
 * —`.single_add_to_cart_button` entre ellos—. Acá se gana por especificidad, no
 * con `!important`, que es lo que después nadie puede corregir desde un tema
 * hijo.
 */
.cp-ficha button.cp-reservar {
	min-height: 48px;
	padding-inline: var(--cp-4);
	flex: none;
	max-width: 60%;
	white-space: normal;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--cp-cuerpo);
}

.cp-ficha button.cp-reservar[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* --- foco --------------------------------------------------------------- */

.cp-ficha :where(button, input, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cp-opcion:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- escritorio --------------------------------------------------------- */

/*
 * El ancho que importa es el de la ficha, no el de la ventana.
 *
 * Los temas de WooCommerce meten el formulario en la columna de resumen, al
 * lado de las fotos: en Atromax mide 391px con la ventana en 1280px. Con
 * `@media (min-width: 62em)` las dos columnas se activaban igual, partían esos
 * 391px en 181px + 320px, y el calendario terminaba en 159px — días de 21px de
 * ancho. Se veía como un error de diseño porque lo era.
 *
 * `@container` pregunta por el espacio que la ficha realmente tiene. Donde no
 * haya soporte —anterior a 2023— la regla se ignora y queda una columna, que es
 * justo lo que corresponde en una columna angosta.
 */
.cp-marco {
	container-type: inline-size;
	container-name: cp-ficha;
}

@container cp-ficha (min-width: 46em) {
	/*
	 * Dos columnas: los pasos a la izquierda, el resumen al costado y siempre a
	 * la vista.
	 *
	 * 46em son los 20rem del resumen más una columna de pasos que dé para el
	 * calendario sin apretarlo.
	 */
	.cp-ficha {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
		gap: var(--cp-6) var(--cp-4);
	}

	.cp-paso {
		grid-column: 1;
	}

	.cp-pasajero__campos {
		grid-template-columns: 1fr 1fr;
	}

	.cp-resumen {
		position: sticky;
		top: var(--cp-4);
		bottom: auto;
		grid-column: 2;
		grid-row: 1 / -1;
		display: grid;
		gap: var(--cp-3);
		border: 1px solid var(--cp-borde);
		border-radius: var(--cp-radio);
		padding: var(--cp-4);
	}

	.cp-ficha button.cp-reservar {
		max-width: none;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-ficha * {
		transition: none !important;
		animation: none !important;
	}
}