/**
 * Estilos del front de Reservalia (catálogo + ficha).
 *
 * Diseño = design/ficha-prototipo.html (acento verde petróleo). TODO el color/
 * tipografía/radio pasa por tokens --rsv-* (mismos nombres que el prototipo) con
 * sus valores como fallback, de modo que se ve bien sin ajustes guardados; el
 * panel de Apariencia reescribe esos tokens en :root vía un <style> en wp_head.
 */

:root {
	/* Tokens de Apariencia (reescritos por el panel) — defaults del prototipo. */
	--rsv-ink: #1b1f24;
	--rsv-muted: #6c7280;
	--rsv-faint: #9aa0a8;
	--rsv-canvas: #f2f3ef;
	--rsv-card: #ffffff;
	--rsv-line: #e7e7e0;
	--rsv-accent: #15605a;
	--rsv-accent-strong: #0f4a45;
	--rsv-accent-soft: #e7f1ee;
	--rsv-free-bg: #e7f1ee;
	--rsv-free-ink: #15605a;
	--rsv-occ-bg: #f6e8d8;
	--rsv-occ-ink: #9a5b2b;
	--rsv-block-bg: #ececed;
	--rsv-block-ink: #9aa0a8;
	/* Franja seleccionada en el calendario interactivo (por defecto = acento). */
	--rsv-selected: var(--rsv-accent);
	--rsv-radius: 14px;
	--rsv-shadow: 0 1px 2px rgba( 20, 30, 40, 0.04 ), 0 10px 30px rgba( 20, 30, 40, 0.06 );
	--rsv-font-title: 'Bricolage Grotesque', system-ui, sans-serif;
	--rsv-font-body: 'Inter', system-ui, sans-serif;
}

.reservalia {
	color: var(--rsv-ink);
	font-family: var(--rsv-font-body);
	line-height: 1.5;
}

.reservalia h1,
.reservalia h2,
.reservalia h3,
.reservalia h4 {
	font-family: var(--rsv-font-title);
	letter-spacing: -0.01em;
}

.reservalia .num {
	font-variant-numeric: tabular-nums;
}

/* Marco "lienzo" con tarjetas (ficha y catálogo). */
.reservalia-single,
.reservalia-catalog {
	background: var(--rsv-canvas);
	padding: clamp( 16px, 3vw, 32px );
	border-radius: var(--rsv-radius);
}

/* --- Tarjeta / chips compartidos ----------------------------------------- */
.reservalia-card {
	background: var(--rsv-card);
	border: 1px solid var(--rsv-line);
	border-radius: var(--rsv-radius);
	box-shadow: var(--rsv-shadow);
	padding: 22px;
}

.reservalia-card--flush {
	padding: 0;
	overflow: hidden;
}

.reservalia-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.reservalia-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--rsv-line);
	border-radius: 999px;
	background: var(--rsv-canvas);
	font-size: 13px;
}

.reservalia-chip span {
	color: var(--rsv-muted);
}

.reservalia-chip strong {
	font-weight: 600;
}

/* --- Botones ------------------------------------------------------------- */
.reservalia-btn {
	display: inline-block;
	padding: 0.6em 1.1em;
	border: 1px solid var(--rsv-line);
	border-radius: 11px;
	background: var(--rsv-card);
	color: var(--rsv-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.reservalia-btn--primary {
	background: var(--rsv-button-bg, var(--rsv-accent));
	border-color: var(--rsv-button-bg, var(--rsv-accent));
	color: var(--rsv-button-text, #fff);
}

.reservalia-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Blindaje frente al <button> global del tema (Elementor kit / Hello pintan fondo,
   padding, borde, radio, min-height... en todos los estados). Repite los valores
   propios del botón con especificidad 0,2,0 / 0,3,0 (> kit 0,1,1 / 0,2,1). El
   principal los recolorea más abajo con 0,2,1 / 0,3,1. */
.reservalia .reservalia-btn,
.reservalia .reservalia-btn:hover,
.reservalia .reservalia-btn:focus,
.reservalia .reservalia-btn:active {
	padding: 0.6em 1.1em;
	border: 1px solid var(--rsv-line);
	border-radius: 11px;
	background: var(--rsv-card);
	color: var(--rsv-ink);
	box-shadow: none;
	min-height: 0;
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/* Especificidad reforzada para que el color de enlace del tema no pise el botón. */
.reservalia a.reservalia-btn,
.reservalia button.reservalia-btn {
	text-decoration: none;
	color: var(--rsv-ink);
}

.reservalia a.reservalia-btn--primary,
.reservalia button.reservalia-btn--primary,
.reservalia a.reservalia-btn--primary:hover,
.reservalia a.reservalia-btn--primary:focus,
.reservalia a.reservalia-btn--primary:active,
.reservalia button.reservalia-btn--primary:hover,
.reservalia button.reservalia-btn--primary:focus,
.reservalia button.reservalia-btn--primary:active {
	color: var(--rsv-button-text, #fff);
	background: var(--rsv-button-bg, var(--rsv-accent));
	border-color: var(--rsv-button-bg, var(--rsv-accent));
}

.reservalia a.reservalia-btn--primary:hover,
.reservalia button.reservalia-btn--primary:hover {
	background: var(--rsv-button-strong, var(--rsv-accent-strong));
	border-color: var(--rsv-button-strong, var(--rsv-accent-strong));
}

/* Foco visible por teclado: contorno en el acento FUERTE (no accent-soft, que es
   casi blanco y se usa para fondos suaves).
   MEJORA PENDIENTE: si una instalación elige un acento muy claro en Apariencia,
   este contorno vuelve a verse poco. Blindarlo del todo pediría un contorno de dos
   capas (claro + oscuro, p. ej. outline + box-shadow) que destaque sobre cualquier
   fondo. Ver README, "Mejoras pendientes". */
.reservalia a:focus-visible,
.reservalia button:focus-visible,
.reservalia input:focus-visible,
.reservalia select:focus-visible,
.reservalia textarea:focus-visible {
	outline: 2px solid var(--rsv-accent);
	outline-offset: 2px;
}

/* --- Catálogo ------------------------------------------------------------ */
.reservalia-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--rsv-card);
	border: 1px solid var(--rsv-line);
	border-radius: var(--rsv-radius);
}

.reservalia-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.reservalia-filter--check {
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
}

.reservalia-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
	gap: 24px;
}

.reservalia-grid .reservalia-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.reservalia-card__media img,
.reservalia-card__noimage {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.reservalia-card__noimage {
	background: var(--rsv-canvas);
}

.reservalia-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 18px;
	/* Crece para llenar la tarjeta: así el botón (margin-top:auto) queda pegado
	   abajo y todas las cajas alinean su botón a la misma altura. */
	flex: 1 1 auto;
}

.reservalia-card__title {
	margin: 0;
	font-size: 1.15rem;
}

.reservalia-card__title a {
	color: inherit;
	text-decoration: none;
}

.reservalia-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.reservalia-card__prices {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.reservalia-grid .reservalia-card__body .reservalia-btn {
	margin-top: auto;
	text-align: center;
}

/* --- Catálogo: vista de disponibilidad ----------------------------------- */
/* Sin marco "lienzo": esta vista se integra directamente en la página. */
.reservalia-catalog--availability {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* Nº de columnas del escaparate (atributo "columnas" -> --reservalia-cols),
   responsive: baja a 2 en tablet y 1 en móvil para no apretar las tarjetas. */
.reservalia-catalog--availability .reservalia-grid {
	grid-template-columns: repeat( var( --reservalia-cols, 3 ), minmax( 0, 1fr ) );
}

@media screen and ( max-width: 900px ) {
	.reservalia-catalog--availability .reservalia-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media screen and ( max-width: 600px ) {
	.reservalia-catalog--availability .reservalia-grid {
		grid-template-columns: 1fr;
	}
}

.reservalia-catalog__intro {
	margin-bottom: 1.25rem;
}

.reservalia-catalog__title {
	margin: 0;
	font-family: var(--rsv-font-title);
	font-size: 1.5rem;
}

.reservalia-avail {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.reservalia-avail__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.reservalia-avail__badge.is-free {
	background: var(--rsv-free-bg);
	color: var(--rsv-free-ink);
}

.reservalia-avail__badge.is-occupied {
	background: var(--rsv-occ-bg);
	color: var(--rsv-occ-ink);
}

.reservalia-avail__badge.is-blocked {
	background: var(--rsv-block-bg);
	color: var(--rsv-block-ink);
}

.reservalia-avail__next {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--rsv-muted);
}

.reservalia-avail__next strong {
	color: var(--rsv-ink);
	font-weight: 600;
}

/* --- Ficha: cabecera y rejilla ------------------------------------------- */
.reservalia-single__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.reservalia-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rsv-muted);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}

.reservalia-back:hover {
	color: var(--rsv-ink);
}

.reservalia-eyebrow {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rsv-accent);
	font-weight: 600;
}

.reservalia-single__title {
	margin: 0 0 24px;
	font-weight: 600;
	font-size: clamp( 1.9rem, 4vw, 2.8rem );
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.reservalia-single__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media screen and ( min-width: 900px ) {
	.reservalia-single__grid {
		grid-template-columns: 1.62fr 1fr;
		gap: 30px;
		align-items: start;
	}
}

.reservalia-single__left > .reservalia-card {
	margin-bottom: 24px;
}

/* --- Galería ------------------------------------------------------------- */
/* Contenedor fijo en 3:2 (la proporción de los tamaños registrados): al cambiar
   de foto la altura no salta. Las fotos van apiladas y solo una está visible. */
.reservalia-gallery__main {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--rsv-canvas);
}

.reservalia-gallery__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Blindado frente a temas que redefinen [hidden]. */
.reservalia-gallery__slide[hidden] {
	display: none !important;
}

/* WebP Express (u otro plugin) puede envolver el <img> en un <picture>: que ocupe
   la diapositiva y centre, para que los max-* del <img> se resuelvan contra ella. */
.reservalia-gallery__slide picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* max-* y no width/height:100%: una foto más pequeña que la caja se ve a su
   tamaño real y centrada, nunca ampliada y borrosa. */
.reservalia-gallery__slide img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* Tira de miniaturas en rejilla: se reparten el ancho de la columna (en la de
   752px salen 5 por fila de ~140px) y se reajustan solas en móvil. */
.reservalia .reservalia-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
	gap: 8px;
	padding: 12px;
}

/* Reseteo frente al estilo global de <button> del tema (Elementor kit / Hello:
   fondo, padding, borde, radio...). Especificidad 0,2,0 / 0,3,0 para ganar a
   `.elementor-kit-N button` (0,1,1) y a su :hover/:focus (0,2,1); incluye todos
   los estados porque el tema pinta fondo también en hover y focus. */
.reservalia .reservalia-gallery__thumb,
.reservalia .reservalia-gallery__thumb:hover,
.reservalia .reservalia-gallery__thumb:focus,
.reservalia .reservalia-gallery__thumb:active {
	background: transparent;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: inherit;
	min-height: 0;
	line-height: 0;
}

/* Caja 3:2 (la proporción del archivo de miniatura): sin recorte de CSS encima.
   Las no activas van atenuadas; la activa (y la que está bajo el ratón), a 1. */
.reservalia .reservalia-gallery__thumb {
	display: block;
	width: auto;
	max-width: none;
	height: auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

/* WebP Express (u otros) envuelven el <img> en un <picture> display:inline con
   width:auto; sin esta regla el width:100% del <img> se resuelve contra el
   propio <picture> y no limita nada. */
.reservalia-gallery__thumb picture {
	display: block;
	width: 100%;
	height: 100%;
}

.reservalia-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reservalia .reservalia-gallery__thumb:hover,
.reservalia .reservalia-gallery__thumb.is-active {
	opacity: 1;
}

/* opacity atenúa también el outline: al enfocar con teclado, la miniatura pasa a
   opacidad 1 aunque no sea la activa, para que el contorno se vea entero. */
.reservalia .reservalia-gallery__thumb:focus-visible {
	opacity: 1;
	outline: 2px solid var(--rsv-accent);
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.reservalia .reservalia-gallery__thumb {
		transition: none;
	}
}

/* --- Info del aula ------------------------------------------------------- */
.reservalia-single__desc {
	color: var(--rsv-muted);
	margin: 0 0 14px;
	max-width: 54ch;
}

.reservalia-prices {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--rsv-line);
}

.reservalia-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.reservalia-price em {
	font-style: normal;
	font-size: 12px;
	color: var(--rsv-muted);
}

.reservalia-price strong {
	font-family: var(--rsv-font-title);
	font-weight: 600;
	font-size: 1.15rem;
}

/* --- Etiqueta de sección (01 / 02 / 03) ---------------------------------- */
.reservalia-seclabel {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
}

.reservalia-seclabel__k {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rsv-faint);
	font-weight: 600;
}

.reservalia-seclabel h3 {
	margin: 0;
	font-size: 1.12rem;
	font-weight: 600;
}

/* --- Calendario ---------------------------------------------------------- */
.reservalia-cal-scroll {
	overflow-x: auto;
}

.reservalia-cal-scroll .reservalia-cal__grid {
	min-width: 460px;
}

.reservalia-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--rsv-muted);
}

.reservalia-legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.reservalia-legend__dot {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	display: inline-block;
}

.reservalia-legend__dot.is-free {
	background: var(--rsv-free-bg);
	border: 1px solid var(--rsv-free-ink);
}

.reservalia-legend__dot.is-occupied {
	background: var(--rsv-occ-bg);
	border: 1px solid var(--rsv-occ-ink);
}

.reservalia-legend__dot.is-blocked {
	background: var(--rsv-block-bg);
	border: 1px solid var(--rsv-block-ink);
}

/* --- Panel de reserva (sticky en escritorio) ----------------------------- */
@media screen and ( min-width: 900px ) {
	.reservalia-panel {
		position: sticky;
		top: 18px;
	}
}

.reservalia-formsection + .reservalia-formsection {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--rsv-line);
}

.reservalia-field {
	display: block;
}

.reservalia-field + .reservalia-field,
.reservalia-field-row + .reservalia-field,
.reservalia-field + .reservalia-field-row {
	margin-top: 14px;
}

.reservalia-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Dentro de la fila Desde/Hasta los campos van en rejilla: sin margen entre
   ellos (si no, "Hasta" se descuadra hacia abajo). */
.reservalia-field-row > .reservalia-field + .reservalia-field {
	margin-top: 0;
}

.reservalia-flabel {
	display: block;
	font-size: 12.5px;
	color: var(--rsv-muted);
	font-weight: 500;
	margin-bottom: 6px;
}

.reservalia-field input,
.reservalia-field select,
.reservalia-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--rsv-ink);
	background: var(--rsv-card);
	border: 1px solid var(--rsv-line);
	border-radius: 10px;
	padding: 10px 12px;
}

/* Solo el borde: el foco de teclado lo da el contorno genérico (no se anula). */
.reservalia-field input:focus,
.reservalia-field select:focus,
.reservalia-field textarea:focus {
	border-color: var(--rsv-accent);
}

.reservalia-field textarea {
	resize: vertical;
	min-height: 64px;
}

/* Días de la semana como chips (el checkbox queda accesible, oculto). */
.reservalia-weekdays {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.reservalia-dchip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 7px 0;
	border: 1px solid var(--rsv-line);
	border-radius: 9px;
	background: var(--rsv-card);
	color: #5a626b;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.reservalia-dchip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.reservalia-dchip:has( input:checked ) {
	background: var(--rsv-accent);
	border-color: var(--rsv-accent);
	color: #fff;
}

/* La casilla está oculta: el foco de teclado se marca en el chip (solo teclado). */
.reservalia-dchip:has( input:focus-visible ) {
	outline: 2px solid var(--rsv-accent);
	outline-offset: 2px;
}

.reservalia-extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--rsv-line);
}

.reservalia-extra input {
	width: 80px;
}

/* --- Recibo de presupuesto ----------------------------------------------- */
.reservalia-quotecard {
	margin-top: 20px;
	padding: 18px;
	background: linear-gradient( 180deg, #fbfcfa, #f6f8f4 );
	border: 1px solid var(--rsv-line);
	border-radius: 12px;
}

.reservalia-jornadas {
	font-size: 13px;
	color: var(--rsv-muted);
	margin: 0 0 6px;
}

.reservalia-jornadas:empty {
	display: none;
}

.reservalia-quote-empty {
	margin: 0;
	color: var(--rsv-muted);
	font-size: 13.5px;
	text-align: center;
	padding: 8px 4px;
}

.reservalia-quote {
	width: 100%;
	border-collapse: collapse;
}

.reservalia-quote td {
	padding: 5px 0;
	font-size: 14px;
}

.reservalia-quote td:first-child {
	color: var(--rsv-muted);
}

.reservalia-quote td:last-child {
	text-align: right;
}

.reservalia-quote__disc td:last-child {
	color: var(--rsv-accent);
	font-weight: 600;
}

.reservalia-quote__total td {
	padding-top: 12px;
	border-top: 1px solid var(--rsv-line);
}

.reservalia-quote__total td:first-child {
	color: var(--rsv-ink);
	font-weight: 600;
}

.reservalia-quote__total td:last-child {
	font-family: var(--rsv-font-title);
	font-weight: 700;
	font-size: 1.9rem;
	letter-spacing: -0.02em;
}

/* --- Envío --------------------------------------------------------------- */
.reservalia-submit {
	width: 100%;
	margin-top: 18px;
	padding: 14px;
	font-size: 15px;
}

.reservalia-fineprint {
	font-size: 12px;
	color: var(--rsv-faint);
	text-align: center;
	margin: 10px 0 0;
}

.reservalia-submit-result:not(:empty) {
	margin-top: 1rem;
}

.reservalia-warn {
	color: #b3261e;
}

.reservalia-success {
	padding: 1rem;
	border: 1px solid var(--rsv-accent);
	border-radius: var(--rsv-radius);
	background: var(--rsv-accent-soft);
}

/* --- Avisos -------------------------------------------------------------- */
.reservalia-empty {
	color: var(--rsv-muted);
}

.reservalia-notice {
	padding: 1rem;
	border: 1px solid var(--rsv-line);
	border-radius: var(--rsv-radius);
	background: var(--rsv-card);
}

.reservalia-notice p {
	margin: 0 0 0.5rem;
}

/* --- Página del cliente -------------------------------------------------- */
.reservalia-account__slots,
.reservalia-account__extras {
	padding-left: 1.2rem;
}

/* --- Cuestionario (flujo B) ---------------------------------------------- */
.reservalia-questionnaire {
	background: var(--rsv-canvas);
	padding: clamp( 16px, 3vw, 32px );
	border-radius: var(--rsv-radius);
}

.reservalia-q-equip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.reservalia-q-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--rsv-line);
	border-radius: 999px;
	background: var(--rsv-card);
	cursor: pointer;
}

.reservalia-q-check:has( input:checked ) {
	background: var(--rsv-accent-soft);
	border-color: var(--rsv-accent);
}

.reservalia-q-submit {
	margin: 1rem 0 0;
}

.reservalia-q-results {
	margin-top: 1.5rem;
}

.reservalia-q-results__title {
	margin: 0 0 1rem;
}

.reservalia-q-lowmatch {
	margin: 0 0 1rem;
	padding: 12px 14px;
	background: var(--rsv-occ-bg);
	color: var(--rsv-occ-ink);
	border-radius: 12px;
}

.reservalia-q-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 1.25rem;
}

.reservalia-q-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.reservalia-q-card.is-recommended {
	border-color: var(--rsv-accent);
	box-shadow: 0 0 0 2px var(--rsv-accent-soft), var(--rsv-shadow);
}

.reservalia-q-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--rsv-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.reservalia-q-card__media img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.reservalia-q-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 16px;
}

.reservalia-q-card__title {
	margin: 0;
	font-size: 1.1rem;
}

.reservalia-q-reasons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85rem;
}

.reservalia-q-reason {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.reservalia-q-reason::before {
	font-weight: 700;
}

.reservalia-q-reason.is-ok {
	color: var(--rsv-accent);
}

.reservalia-q-reason.is-ok::before {
	content: '\2713'; /* ✓ */
}

.reservalia-q-reason.is-partial {
	color: var(--rsv-occ-ink);
}

.reservalia-q-reason.is-partial::before {
	content: '\007E'; /* ~ */
}

.reservalia-q-reason.is-missing {
	color: var(--rsv-muted);
}

.reservalia-q-reason.is-missing::before {
	content: '\2715'; /* ✕ */
}

.reservalia-q-go {
	margin-top: auto;
	text-align: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.reservalia-btn,
	.reservalia-back {
		transition: none;
	}
}