/*
 * 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);
}

/* La hora del punto de recogida, separada del lugar y destacada. Antes iba
   pegada al final del nombre —«Hotel NH … · 11:05»— donde nadie la lee, y es
   justamente el dato con el que alguien se da cuenta de que le están ofreciendo
   el punto de otra salida. */
.cp-opcion__lugar {
	display: block;
}

.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);
}

/* `[hidden]` sólo lo declara la hoja del navegador, así que cualquier regla del
   tema que le fije un `display` a este div le gana y el mapa aparece antes de
   tiempo. Declararlo acá —regla de autor, que pesa más— hace que las veinte
   tiendas de la red se comporten igual. */
.cp-mapa[hidden] {
	display: none;
}

.cp-mapa {
	height: 15rem;
	/* Por si un tema le pone `height: auto` a los contenedores: sin alto, Leaflet
	   mide cero y no dibuja ni una tesela. */
	min-height: 15rem;
	margin-top: var(--cp-3);
	border: 1px solid var(--cp-borde);
	border-radius: var(--cp-radio-chico);
	overflow: hidden;

	/* Y acá vive su propio contexto de apilado.
	   Leaflet usa z-index de 200 a 1000 en sus paneles y controles, contra el 30
	   de la lista de sugerencias: el desplegable del buscador quedaba **debajo**
	   del mapa y no se podía elegir el alojamiento tapado. Aislarlo encierra esos
	   valores adentro de esta caja en vez de competir con el resto de la página,
	   que es lo que evita la carrera de números con el próximo plugin. */
	isolation: isolate;
}

/* El aviso de cuando el mapa no se puede cargar. Va al lado y no encima: el
   buscador por nombre sigue funcionando, y eso es lo que hay que decir. */
.cp-mapa__aviso {
	margin-top: var(--cp-2);
	font-size: var(--cp-menor);
	color: var(--cp-atenuado);
}

/* --- 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;
	}
}

/* El motivo de un precio propio de la tienda: una preventa, un lanzamiento.
   Va debajo del importe y en tono menor — explica, no compite con la cifra. */
.cp-resumen__motivo {
	font-size: 0.85em;
	opacity: 0.8;
	font-style: italic;
}