/*
 * Estilos públicos de Paina Connect — grilla de propiedades.
 * Clases prefijadas .paina- para no pisar el tema.
 *
 * Look "naked" estilo marketplace de alquileres: la foto redondeada es la
 * protagonista, el texto va suelto debajo sobre el fondo del tema. Sin
 * contenedor visible (ni borde, ni sombra, ni fondo en la card).
 *
 * Tokens como custom properties (W.7 ola 3b): set único declarado en
 * .paina-listing/.paina-detail/.paina-state (cubre todo el árbol del plugin,
 * incluidos los estados que se renderizan sueltos). La tipografía se hereda
 * del tema. Un futuro panel de apariencia puede setear estos tokens en un solo lugar.
 *
 * Breakpoints (W.7 ola 3b): escala de 3 — sm ≤640 / md 641–1024 / lg ≥1025.
 */

/*
 * ---- Tokens (W.7 ola 3b) ----
 * Se declaran también en .paina-state porque los estados de error/vacío se
 * renderizan FUERA de .paina-listing/.paina-detail (lista vacía/error, error
 * del detalle, 404-fallback). Así el token es la única fuente y no hacen falta
 * fallbacks en cada var().
 */
.paina-listing,
.paina-detail,
.paina-checkout,
.paina-state {
	/* Marca (overridable por el cliente vía el panel de apariencia). Default Wander. */
	--paina-accent: #000000;
	--paina-bg: #ffffff;
	/* Estructurales (remapeados a Wander en la ola A1). */
	--paina-text: #202020;
	--paina-muted: #636363;
	--paina-border: rgba( 0, 0, 0, 0.08 );
	--paina-control-border: rgba( 0, 0, 0, 0.12 );
	--paina-radius: 16px;
	--paina-radius-sm: 8px;
	/* Píldora para chips/botones estilo Wander. Agregado en A1; se consume en olas siguientes. */
	--paina-radius-pill: 999px;
	--paina-gap: 24px;
	--paina-shadow-xs: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	--paina-shadow-sm: 0px 1px 2px rgba( 0, 0, 0, 0.04 ), 0px 2px 8px rgba( 0, 0, 0, 0.04 );
	--paina-shadow-md: 0 4px 6px -1px rgba( 0, 0, 0, 0.08 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.08 );
	--paina-shadow-lg: 0 10px 15px -3px rgba( 0, 0, 0, 0.10 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.10 );
	--paina-available-bg: #f3faf4;
	--paina-available-border: #cfe8d4;
	--paina-booked-bg: #f7f7f7;
	--paina-booked-fg: #b5b9bd;
	/* Banda del rango seleccionado (A5): accent muy diluido sobre el lienzo. */
	--paina-in-range: color-mix( in srgb, var( --paina-accent ) 12%, var( --paina-bg ) );
	--paina-error-fg: #8a1c1d;
	--paina-error-bg: #fcf6f6;
	--paina-error-border: #f0c6c6;
	--paina-placeholder: #f0f0f0;
	--paina-backdrop: rgba( 0, 0, 0, 0.45 );
	--paina-scrim: rgba( 0, 0, 0, 0.92 );
	/* hover sutil de botones outline/píldora (oscurece, no blanquea) */
	--paina-surface-hover: #f0f0f0;
	/*
	 * Lienzo de la página (override por sitio desde el panel de apariencia).
	 * transparent por default = idéntico a hoy (se ve el fondo del tema).
	 */
	--paina-canvas: transparent;
	/*
	 * Nav sticky del detalle (A2b). nav-top: offset si el sitio tiene header
	 * sticky propio en Elementor (default 0; sin config aún, queda preparado).
	 * nav-height: altura NOMINAL del nav; el JS mide la real con offsetHeight.
	 * Alimenta el scroll-margin de las anclas y el top de la booking card sticky.
	 */
	--paina-nav-top: 0px;
	--paina-nav-height: 52px;
}

/*
 * El lienzo se pinta SOLO en los wrappers de página (listado/detalle). Los
 * estados sueltos (.paina-state de error/vacío/404) NO reciben fondo a propósito.
 */
.paina-listing,
.paina-detail {
	background-color: var( --paina-canvas );
}

/*
 * ---- Blindaje vs tema del cliente (W.7 ola 3a) ----
 * El plugin se instala en un WP con tema arbitrario. Scopeamos resets defensivos
 * a nuestro árbol para que el tema no nos rompa ni nosotros pisemos lo que no toca.
 */

/* box-sizing en todo el árbol del plugin: nada desborda por el default del tema. */
.paina-listing,
.paina-listing *,
.paina-listing *::before,
.paina-listing *::after,
.paina-detail,
.paina-detail *,
.paina-detail *::before,
.paina-detail *::after,
.paina-checkout,
.paina-checkout *,
.paina-checkout *::before,
.paina-checkout *::after {
	box-sizing: border-box;
}

/* Listas (amenities): ganarle a .entry-content ul/li del tema (0,2,0 > 0,1,1). */
.paina-detail .paina-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
}

.paina-detail .paina-amenity {
	margin: 0;
}

/* Headings dentro del plugin: sin márgenes raros heredados de .entry-content h*. */
.paina-listing .paina-card-title,
.paina-detail .paina-detail-title,
.paina-detail .paina-detail-subtitle {
	margin: 0;
}

/*
 * Blindaje COMPLETO de botones (v0.21.0): neutraliza de raíz el reset del tema
 * (Hello Elementor mete border/color/background #c36 en base + text-decoration:none
 * en hover/focus). El blanket va a (0,1,1) [base] y (0,1,2) [hover/focus] → le gana
 * al tema (0,1,0 / 0,1,1) sin depender del orden de carga ni de !important.
 *
 * REQUISITO: cada componente re-declara lo suyo (background/color/border/
 * text-decoration) con su base SCOPEADA a (0,2,0) (.paina-detail .X / .paina-listing
 * .X), que gana a este blanket. NO tocamos `font` (la tipografía se hereda del tema).
 */
.paina-listing button,
.paina-detail button,
.paina-checkout button {
	appearance: none;
	-webkit-appearance: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: none;
}

/* Estados (0,1,2): neutraliza el text-decoration:none del tema en hover/focus.
   Los botones que quieren underline (Read more) lo re-declaran en su base (0,2,0). */
.paina-detail button:hover,
.paina-detail button:focus,
.paina-listing button:hover,
.paina-listing button:focus,
.paina-checkout button:hover,
.paina-checkout button:focus {
	text-decoration: none;
}

/* Foco accesible propio (anillo accent), solo en navegación por teclado. */
.paina-detail button:focus-visible,
.paina-listing button:focus-visible,
.paina-checkout button:focus-visible {
	outline: 2px solid var( --paina-accent );
	outline-offset: 2px;
}

.paina-detail button:focus:not( :focus-visible ),
.paina-listing button:focus:not( :focus-visible ),
.paina-checkout button:focus:not( :focus-visible ) {
	outline: none;
}

.paina-grid {
	display: grid;
	/* row 32px / column 24px (A3): más aire vertical entre cards (mobile apilado +
	   filas en desktop) sin abrir el gutter horizontal. No toca el token. */
	gap: 32px var( --paina-gap );
	/* minmax(0,1fr) y NO 1fr a secas: 1fr = minmax(auto,1fr), y el min-content
	   de la card lo infla el título nowrap (v0.31.0) → tracks desiguales +
	   overflow horizontal. Con min 0, el ellipsis recorta y las columnas son
	   realmente iguales. Aplica a TODOS los templates de la grilla. */
	grid-template-columns: minmax( 0, 1fr );
	/* Alto natural por card: no forzamos misma altura entre cards. */
	align-items: start;
	margin: 0;
	padding: 0;
}

/* Tablet: 2 columnas. */
@media ( min-width: 641px ) {
	.paina-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Desktop: respeta el atributo columns como máximo. */
@media ( min-width: 1025px ) {
	.paina-cols-1 {
		grid-template-columns: minmax( 0, 1fr );
	}

	.paina-cols-2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.paina-cols-3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.paina-cols-4 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/*
 * Card cohesiva estilo Wander: naked (sin contenedor) pero compacta. La foto
 * es el ancla; el texto va pegado debajo y se lee como un solo bloque.
 */
.paina-card {
	display: flex;
	flex-direction: column;
	/* gap:0 — el espaciado foto→texto vive en .paina-card-body margin-top (único
	   lugar). Sigue flex column por el fallback sin-link (img+body hijos directos). */
	gap: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Card clickeable: el link envuelve foto + texto sin romper el layout. */
.paina-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.paina-card-link:hover,
.paina-card-link:focus {
	color: inherit;
	text-decoration: none;
}

/*
 * La foto. El aspect-ratio sobre el <img> reserva el alto antes de que la
 * imagen lazy cargue, así no hay layout shift. El placeholder usa las mismas
 * reglas para ocupar exactamente el mismo lugar cuando no hay foto.
 */
.paina-card-img {
	display: block;
	width: 100%;
	/* Cuadrada SIEMPRE en el listado (con y sin mapa) — pasada de diseño v0.31.0.
	   El radius !important y el margin-top de .paina-card-body no dependen del
	   aspect: siguen funcionando igual. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.25s ease;
}

/*
 * El radius va en la imagen misma: con object-fit:cover recorta las esquinas
 * sin necesitar overflow:hidden en un padre. Selector con especificidad alta
 * (.paina-card .paina-card-img) e !important para ganarle a temas que aplican
 * un border-radius sobre `img` (a veces con !important).
 */
.paina-card .paina-card-img,
.paina-card .paina-card-img-placeholder {
	border-radius: var( --paina-radius ) !important;
}

.paina-card:hover .paina-card-img {
	transform: scale( 1.02 );
}

.paina-card-img-placeholder {
	background: linear-gradient( 135deg, #e8e8ea 0%, #f3f3f4 100% );
}

/* El hover de escala no aplica al placeholder (no es una foto real). */
.paina-card:hover .paina-card-img-placeholder {
	transform: none;
}

.paina-card-body {
	display: flex;
	flex-direction: column;
	gap: 3px; /* texto apretado: se lee como un bloque */
	/* Espacio foto→texto (foto y body son hermanos dentro de a.paina-card-link,
	   que es display:block → el gap del padre no aplica). Knob afinable. */
	margin-top: 16px; /* espacio foto→texto; subir a 18/20 si se ve pegado */
	text-align: left;
}

/* Guests desagregados (v0.38.0, fix visual): Adults y Children son celdas
 * HERMANAS de Location/Bedrooms (un solo nivel de labels). Solo necesitan un
 * ancho mínimo cómodo: el select nativo dimensiona por su option más ancha
 * ("16"/"10") y quedaba apretado contra el chevron. */
.paina-filter-control--compact {
	min-width: 96px;
}

/* Ubicación como eyebrow: línea chica gris ENCIMA del título. */

/* Filtrado en vivo a UNA sola ciudad (v0.37.0): el JS de filtros pone
 * .paina-single-city en el listing y el eyebrow repetido se oculta. */
.paina-listing.paina-single-city .paina-card-location {
	display: none;
}
.paina-card-location {
	margin: 0;
	font-size: 0.8125rem; /* ~13px */
	line-height: 1.3;
	color: var( --paina-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Scopeado a 0,2,0 (como el blindaje de márgenes) para ganarle a .entry-content h3. */
.paina-listing .paina-card-title {
	margin: 0;
	font-size: 1rem; /* ~16px */
	line-height: 1.35;
	letter-spacing: -0.01rem;
	font-weight: 600;
	color: var( --paina-text );

	/* Clamp a UNA línea + ellipsis (pasada de diseño v0.31.0): los nombres
	   estilo OTA rompen la uniformidad de la grilla; con 1 línea todas las
	   cards miden igual (efecto Wander). El nombre completo vive en el detalle
	   y en el popup del mapa. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.paina-card-specs {
	margin: 0;
	font-size: 0.875rem; /* ~14px */
	line-height: 1.3;
	color: var( --paina-muted );
}

/* Fila del precio: precio a la izquierda, rating a la derecha. Sin altura extra
   respecto del precio suelto anterior; el rating es co-inquilino de esta fila. */
.paina-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

/* Precio integrado: mismo registro que los specs, sobrio. */
.paina-card-price {
	margin: 0;
	font-size: 0.875rem; /* ~14px */
	line-height: 1.3;
	font-weight: 550; /* medium Wander */
	color: var( --paina-text );
}

/* Rating de la card: discreto, mismo registro que specs/precio. Star + número. */
.paina-card-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto; /* no se comprime; el precio cede antes. */
	font-size: 0.875rem; /* ~14px */
	line-height: 1.3;
	color: var( --paina-text );
}

/*
 * Barra de filtros (W.4). Barra principal: location/guests/bedrooms + botón
 * "Filters" (abre el modal). Lo poco usado (search) y lo futuro (amenities,
 * price range) viven en el modal.
 */
.paina-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin: 0 0 10px;
}

.paina-filter {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.paina-filter-label {
	font-size: 0.8125rem; /* ~13px */
	font-weight: 550; /* medium Wander */
	color: var( --paina-muted );
}

.paina-filter-control {
	font: inherit;
	font-size: 0.9375rem; /* ~15px */
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	padding: 9px 12px;
	line-height: 1.3;
	box-sizing: border-box;
}

.paina-filter-control:focus {
	outline: none;
	border-color: var( --paina-accent );
	box-shadow: 0 0 0 1px var( --paina-accent );
}

/* Botón "Filters" que abre el modal. */
.paina-filter-more {
	justify-content: flex-end;
}

.paina-listing .paina-filters-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.9375rem; /* ~15px */
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	padding: 9px 14px;
	line-height: 1.3;
	cursor: pointer;
}

.paina-listing .paina-filters-open:hover {
	background: var( --paina-surface-hover );
	color: var( --paina-text );
	border-color: var( --paina-accent );
}

.paina-filters-badge {
	color: var( --paina-muted );
	font-size: 0.875rem;
}

/* Fila de meta: contador + acciones (toggle del mapa + clear). */
.paina-listing-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px;
}

.paina-listing-meta-actions {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

/* Toggle "Show/Hide map" (nace scopeado — ★ regla del reset de Hello Elementor). */
.paina-listing .paina-map-toggle {
	font: inherit;
	font-size: 0.875rem; /* ~14px */
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-pill );
	padding: 6px 14px;
	line-height: 1.3;
	cursor: pointer;
}

.paina-listing .paina-map-toggle:hover {
	background: var( --paina-surface-hover );
	color: var( --paina-text );
	border-color: var( --paina-accent );
}

/* ---- Mapa del listado (Ola 2) ----
 *
 * Estados del panel SIN clase explícita (default por breakpoint): desktop
 * abierto / mobile cerrado. El toggle del huésped fija .paina-map-open /
 * .paina-map-closed en el root (0,3,0) → gana al default en cualquier
 * breakpoint. Base mobile-first: oculto.
 */
.paina-listing--map .paina-map-panel {
	display: none;
}

.paina-map-canvas {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: var( --paina-radius );
}

/* Mobile/tablet abierto (elección explícita): bloque arriba de la grilla. */
.paina-listing--map.paina-map-open .paina-listing-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.paina-listing--map.paina-map-open .paina-map-panel {
	display: block;
	order: -1;
	height: 60vh;
}

/* Pins del mapa: divIcon de 0x0 anclado al punto; la píldora se centra con
   transform. La píldora es neutra (blanca) como la referencia; el estado
   activo/hover usa el accent del cliente. */
.paina-map-pin-wrap {
	background: none;
	border: 0;
}

.paina-map-pin {
	position: absolute;
	transform: translate( -50%, -50% );
	display: inline-block;
	white-space: nowrap;
	background: var( --paina-bg );
	color: var( --paina-text );
	font-size: 0.8125rem; /* ~13px */
	font-weight: 600;
	line-height: 1;
	padding: 7px 10px;
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-pill );
	box-shadow: var( --paina-shadow-sm );
	cursor: pointer;
}

/* Sin precio publicado → punto (nunca invisible; criterio ★ del filtro). */
.paina-map-pin--dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border-radius: 50%;
}

.paina-map-pin:hover,
.paina-map-pin.is-active {
	background: var( --paina-accent );
	color: var( --paina-bg );
	border-color: var( --paina-accent );
}

/* Card resaltada desde el mapa (click en su pin): anillo accent. */
.paina-listing .paina-card.is-map-active {
	outline: 2px solid var( --paina-accent );
	outline-offset: 4px;
	border-radius: var( --paina-radius-sm );
}

/* Popup del pin (componente propio, NO reusa .paina-modal*). */
.paina-map-popup .leaflet-popup-content-wrapper {
	border-radius: var( --paina-radius-sm );
	box-shadow: var( --paina-shadow-md );
	padding: 0;
	overflow: hidden;
}

.paina-map-popup .leaflet-popup-content {
	margin: 0;
	width: 200px;
}

.paina-map-popup-link {
	display: block;
	text-decoration: none;
	color: var( --paina-text );
}

.paina-map-popup-img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
}

.paina-map-popup-name {
	display: block;
	padding: 10px 12px 2px;
	font-size: 0.875rem;
	font-weight: 550;
	line-height: 1.35;
	color: var( --paina-text );
}

.paina-map-popup-price {
	display: block;
	padding: 0 12px 12px;
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

/* Desktop: dos paneles (grilla + mapa sticky) salvo cierre explícito. */
@media ( min-width: 1025px ) {
	.paina-listing--map:not( .paina-map-closed ) .paina-listing-body {
		display: grid;
		/* Mapa subordinado a la grilla (~70/30, cap 380px — iteración de
		   densidad v0.31.0, elegida con screenshots sobre data real). */
		grid-template-columns: minmax( 0, 1fr ) clamp( 320px, 30%, 380px );
		gap: 24px;
		align-items: start;
	}

	.paina-listing--map:not( .paina-map-closed ) .paina-map-panel {
		display: block;
		order: 0;
		position: sticky;
		top: 24px;
		height: calc( 100vh - 48px );
	}

	/* Con el mapa al lado, la grilla baja a 3 columnas (el default sin mapa es
	   4). Con el mapa cerrado, NO aplica → vuelven las columnas del shortcode. */
	.paina-listing--map:not( .paina-map-closed ) .paina-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.paina-count {
	margin: 0;
	font-size: 0.875rem; /* ~14px */
	color: var( --paina-muted );
}

.paina-listing .paina-clear {
	font: inherit;
	font-size: 0.875rem; /* ~14px */
	color: var( --paina-muted );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.paina-listing .paina-clear:hover {
	color: var( --paina-text );
	background: none;
}

/* ---- Componente de estado unificado (loading / error / empty) ---- */
.paina-state[hidden] {
	display: none;
}

.paina-state {
	padding: 16px 18px;
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius );
	color: var( --paina-muted );
	background: #fbfbfc;
}

.paina-state--empty {
	text-align: center;
	padding: 28px 18px;
}

.paina-state--loading {
	border-style: dashed;
}

.paina-state--error {
	border-color: var( --paina-error-border );
	background: var( --paina-error-bg );
	color: var( --paina-error-fg );
}

/* Aviso NEUTRO (A5): reglas de negocio accionables por el huésped (min-stay,
   fechas ocupadas). Tono neutro del sistema — NO error. Mensaje legible. */
.paina-state--notice {
	color: var( --paina-text );
}

.paina-state-message {
	margin: 0;
}

.paina-support-id {
	display: inline-block;
	margin-top: 4px;
	color: var( --paina-muted );
	font-size: 0.85em;
}

.paina-detail .paina-state-retry {
	margin-top: 10px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --paina-error-fg );
	background: var( --paina-bg );
	border: 1px solid #e0a3a4;
	border-radius: var( --paina-radius-sm );
	padding: 7px 14px;
	cursor: pointer;
}

.paina-state-retry:hover {
	background: #fbeeee;
}

/* Filtrado client-side: oculta las cards que no matchean. */
.paina-hidden {
	display: none;
}

/* Modal "Filters". */
.paina-modal[hidden] {
	display: none;
}

.paina-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.paina-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var( --paina-backdrop );
}

.paina-modal-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Base compartida de los 4 modales (Filters/Amenities/Reviews/Rules). En
	   mobile (≤640) el override existente lo lleva a full-width. */
	max-width: 740px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: var( --paina-bg );
	border-radius: 12px; /* literal: radio propio del modal (no es --paina-radius) */
	box-shadow: var( --paina-shadow-lg );
	overflow: hidden;
}

.paina-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var( --paina-border );
}

.paina-modal-title {
	margin: 0;
	font-size: 1.0625rem; /* ~17px */
	font-weight: 600;
	color: var( --paina-text );
}

.paina-detail .paina-modal-close,
.paina-listing .paina-modal-close {
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --paina-muted );
	background: none;
	border: 0;
	padding: 0 4px;
	cursor: pointer;
}

/* modal-close vive en ambos wrappers (modal de amenities en detalle, modal de filtros en listado). */
.paina-detail .paina-modal-close:hover,
.paina-listing .paina-modal-close:hover {
	color: var( --paina-text );
	background: none;
}

.paina-modal-body {
	padding: 18px;
	overflow-y: auto;
}

.paina-modal-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.paina-modal-section + .paina-modal-section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var( --paina-border );
}

.paina-modal-section .paina-filter-control {
	width: 100%;
}

/* Price range del modal: Min/Max lado a lado (W.4 ola 2). */
.paina-filter-range {
	display: flex;
	gap: 10px;
}

.paina-filter-range .paina-filter {
	flex: 1 1 0;
	min-width: 0;
}

/* Amenities del modal: grid de checkboxes (W.4 ola 2). */
.paina-filter-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin-top: 4px;
}

.paina-filter-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem; /* ~15px */
	color: var( --paina-text );
	cursor: pointer;
}

.paina-filter-check input[type='checkbox'] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: var( --paina-accent );
	cursor: pointer;
}

.paina-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var( --paina-border );
}

.paina-listing .paina-modal-done {
	font: inherit;
	font-size: 0.9375rem; /* ~15px */
	color: var( --paina-bg );
	background: var( --paina-accent );
	border: 0;
	border-radius: var( --paina-radius-sm );
	padding: 9px 18px;
	cursor: pointer;
}

.paina-listing .paina-modal-done:hover {
	background: color-mix( in srgb, var( --paina-accent ) 80%, white );
	color: var( --paina-bg );
}

/* Mobile: los controles se apilan a todo el ancho; modal full-width. */
@media ( max-width: 640px ) {
	.paina-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.paina-filter {
		flex: 1 1 auto;
		min-width: 0;
	}

	.paina-filter-more {
		justify-content: stretch;
	}

	.paina-filters-open {
		justify-content: center;
		width: 100%;
	}

	.paina-modal-panel {
		max-width: none;
		max-height: 92vh;
	}

	.paina-filter-checks {
		grid-template-columns: 1fr;
	}
}

/* ---- Checkout nativo (escalera 4b, Ola 1) ----
 *
 * Página virtual → el plugin fija el ancho (patrón .paina-detail). Tokens
 * --paina-* para todo; tipografía heredada del tema (jamás font-family).
 * Botones nacidos scopeados a .paina-checkout (★ regla del reset de Hello
 * Elementor). Sin !important.
 */
.paina-checkout {
	max-width: 1120px;
	margin: 0 auto;
	padding: calc( var( --paina-gap ) * 2 ) 32px calc( var( --paina-gap ) * 2.5 );
}

.paina-checkout .paina-checkout-back {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 0.9375rem;
	color: var( --paina-muted );
	text-decoration: none;
}

.paina-checkout .paina-checkout-back:hover {
	color: var( --paina-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.paina-checkout .paina-checkout-title {
	margin: 0 0 28px;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var( --paina-text );
}

.paina-checkout-cols {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) clamp( 320px, 38%, 420px );
	gap: 48px;
	align-items: start;
}

/* -- Columna izquierda: form -- */
.paina-checkout-section + .paina-checkout-section {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var( --paina-border );
}

.paina-checkout .paina-checkout-heading {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --paina-text );
}

.paina-checkout-fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
}

.paina-checkout-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.paina-checkout-field--wide {
	grid-column: 1 / -1;
}

.paina-checkout-label {
	font-size: 0.8125rem;
	font-weight: 550;
	color: var( --paina-muted );
}

.paina-checkout .paina-checkout-input {
	font: inherit;
	font-size: 0.9375rem;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	padding: 10px 12px;
	line-height: 1.3;
	width: 100%;
}

.paina-checkout .paina-checkout-input:focus {
	outline: none;
	border-color: var( --paina-accent );
	box-shadow: 0 0 0 1px var( --paina-accent );
}

/* Grupo de teléfono (v0.36.0): un solo "campo" al ojo — el borde y el focus
 * ring viven en el WRAPPER (focus-within); las piezas internas van desnudas.
 * El select es NATIVO a propósito (accesibilidad gratis, cero JS). */
.paina-checkout-phone {
	display: flex;
	align-items: stretch;
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	overflow: hidden;
}

.paina-checkout-phone:focus-within {
	border-color: var( --paina-accent );
	box-shadow: 0 0 0 1px var( --paina-accent );
}

.paina-checkout .paina-checkout-phone-code {
	font: inherit;
	font-size: 0.9375rem;
	color: var( --paina-text );
	background: transparent;
	border: 0;
	border-right: 1px solid var( --paina-control-border );
	border-radius: 0;
	padding: 10px 4px 10px 10px;
	/* Ancho COMPACTO fijo (v0.36.0 fix): el intrínseco del select nativo se
	 * infla por la option más ancha y comía ~40% del grupo. 96px = bandera +
	 * dial de hasta 3 dígitos (+506) + chevron; el número toma todo el resto. */
	flex: 0 0 auto;
	width: 96px;
}

.paina-checkout .paina-checkout-phone-code:focus {
	outline: none;
}

/* El input dentro del grupo pierde su borde/ring propio (los pone el wrapper). */
.paina-checkout .paina-checkout-phone .paina-checkout-input {
	border: 0;
	border-radius: 0;
	flex: 1;
	min-width: 0;
}

.paina-checkout .paina-checkout-phone .paina-checkout-input:focus {
	border: 0;
	box-shadow: none;
}

.paina-checkout-trust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 20px;
}

.paina-checkout-secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var( --paina-muted );
}

.paina-checkout-secure .paina-icon {
	width: 16px;
	height: 16px;
}

.paina-checkout-brands {
	display: inline-flex;
	gap: 6px;
}

.paina-checkout-brand {
	font-size: 0.75rem;
	color: var( --paina-muted );
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius-sm );
	padding: 3px 8px;
	transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* Detección BIN cosmética (v0.36.0): la marca detectada se resalta con el
 * accent suave (color-mix, sin token nuevo — patrón del círculo del mapa);
 * las otras se atenúan. Sin estado de error: la validación es de Accept.js. */
.paina-checkout-brand.is-active {
	border-color: var( --paina-accent );
	background: color-mix( in srgb, var( --paina-accent ) 10%, transparent );
	color: var( --paina-text );
}

.paina-checkout-brand.is-dimmed {
	opacity: 0.45;
}

/* CTA de pago (nace scopeado; disabled en esta ola). */
.paina-checkout .paina-checkout-pay {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	font-weight: 550;
	color: var( --paina-bg );
	background: var( --paina-accent );
	border: 0;
	border-radius: var( --paina-radius-sm );
	padding: 14px 18px;
	cursor: pointer;
}

.paina-checkout .paina-checkout-pay:hover {
	background: color-mix( in srgb, var( --paina-accent ) 80%, white );
	color: var( --paina-bg );
}

.paina-checkout .paina-checkout-pay:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.paina-checkout .paina-checkout-pay:focus-visible {
	outline: 2px solid var( --paina-accent );
	outline-offset: 2px;
}

.paina-checkout-terms {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --paina-muted );
}

.paina-checkout .paina-checkout-terms a {
	color: var( --paina-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- Columna derecha: resumen -- */
.paina-checkout-aside {
	position: sticky;
	top: 24px;
}

.paina-checkout-summary {
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius );
	background: var( --paina-bg );
	box-shadow: var( --paina-shadow-sm );
	overflow: hidden;
}

/* En desktop el resumen no se colapsa: summary oculto, contenido siempre a la
   vista (el details llega con [open] del SSR). */
.paina-checkout-summary-toggle {
	display: none;
}

.paina-checkout-card {
	padding: 20px;
}

.paina-checkout-prop {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --paina-border );
}

.paina-checkout .paina-checkout-prop-img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var( --paina-radius-sm );
	flex: none;
}

.paina-checkout-prop-name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var( --paina-text );
}

.paina-checkout-prop-city {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

.paina-checkout-stay {
	padding: 14px 0;
	border-bottom: 1px solid var( --paina-border );
}

.paina-checkout-stay-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 0.875rem;
	color: var( --paina-text );
}

.paina-checkout-stay-row + .paina-checkout-stay-row {
	margin-top: 6px;
}

.paina-checkout-stay-row span:first-child {
	color: var( --paina-muted );
}

.paina-checkout-breakdown {
	margin: 14px 0 0;
	padding: 0 0 14px;
	border-bottom: 1px solid var( --paina-border );
}

.paina-checkout-breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.paina-checkout-breakdown-row + .paina-checkout-breakdown-row {
	margin-top: 6px;
}

.paina-checkout-breakdown dt {
	font-size: 0.875rem;
	color: var( --paina-muted );
	font-weight: 400;
}

.paina-checkout-breakdown dd {
	margin: 0;
	font-size: 0.875rem;
	color: var( --paina-text );
}

.paina-checkout-muted {
	color: var( --paina-muted );
	font-size: 0.8125rem;
}

.paina-checkout-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	font-size: 1rem;
	font-weight: 600;
	color: var( --paina-text );
}

.paina-checkout-held {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

.paina-checkout-back-cta {
	margin: 16px 0 0;
	font-size: 0.9375rem;
}

.paina-checkout .paina-checkout-back-cta a {
	color: var( --paina-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Aviso inline del pago (dentro de [data-paina-pay-notice], reusa .paina-state). */
.paina-checkout [data-paina-pay-notice] .paina-state {
	margin: 0 0 16px;
}

.paina-checkout-notice-detail {
	font-size: 0.8125rem;
	color: var( --paina-muted );
	margin-top: 4px;
}

.paina-checkout .paina-checkout-notice-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.875rem;
	color: var( --paina-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- Thank-you (4b Ola 4: diseño final) --
 *
 * Composición centrada, jerarquía tranquila: check en accent + título + nota
 * honesta, y la CARD de la reserva como pieza central (foto grande full-bleed,
 * eyebrow de ciudad, nombre linkeado al detalle, fechas/guests/total del
 * superset). Sin sticky (no hay resumen paralelo). Reusa .paina-checkout-stay-row
 * para las filas (mismo lenguaje visual que el resumen del checkout).
 */
.paina-thankyou {
	max-width: 560px;
	text-align: center;
}

.paina-thankyou-check {
	width: 52px;
	height: 52px;
	color: var( --paina-accent );
}

.paina-thankyou .paina-thankyou-title {
	margin: 12px 0 6px;
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var( --paina-text );
}

.paina-thankyou-note {
	margin: 0 0 28px;
	font-size: 0.9375rem;
	color: var( --paina-muted );
}

.paina-thankyou-card {
	text-align: left;
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius );
	background: var( --paina-bg );
	box-shadow: var( --paina-shadow-sm );
	/* La foto full-bleed se recorta al radius de la card (la sombra es de la
	 * card misma, no de hijos — no aplica la lección del overflow del mosaico). */
	overflow: hidden;
}

.paina-thankyou .paina-thankyou-img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.paina-thankyou-body {
	padding: 20px;
}

.paina-thankyou-city {
	margin: 0 0 2px;
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

.paina-thankyou-name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var( --paina-text );
}

.paina-thankyou .paina-thankyou-name a {
	color: var( --paina-text );
	text-decoration: none;
}

.paina-thankyou .paina-thankyou-name a:hover,
.paina-thankyou .paina-thankyou-name a:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.paina-thankyou-stay {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var( --paina-border );
}

.paina-thankyou-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var( --paina-border );
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --paina-text );
}

/* Superset parcial: si el total es la única fila, no duplica el divider del
 * contenedor (.paina-thankyou-stay ya lo puso). */
.paina-thankyou-total:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.paina-thankyou-ref {
	margin: 18px 0 0;
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

.paina-thankyou-back {
	margin: 14px 0 0;
}

.paina-thankyou .paina-thankyou-back a {
	font-size: 0.9375rem;
	color: var( --paina-text );
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media ( max-width: 640px ) {
	.paina-thankyou .paina-thankyou-img {
		height: 190px;
	}

	.paina-thankyou-body {
		padding: 16px;
	}
}

/* -- Mobile/tablet: apilado, resumen ARRIBA y colapsable -- */
@media ( max-width: 1024px ) {
	.paina-checkout-cols {
		display: flex;
		flex-direction: column;
		gap: 28px;
		/* stretch explícito (v0.37.0): el align-items:start del grid DESKTOP
		 * persiste al cambiar display, y sin stretch el aside toma ancho
		 * max-content (el nombre nowrap del toggle lo inflaba a ~420px en
		 * viewports de 375) — desbordando la página. Con stretch el aside mide
		 * el contenedor y el ellipsis del summary-name puede actuar. */
		align-items: stretch;
	}

	.paina-checkout-aside {
		position: static;
		order: -1;
	}

	.paina-checkout-summary-toggle {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 14px 16px;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var( --paina-text );
		cursor: pointer;
		list-style: none;
	}

	.paina-checkout-summary-toggle::-webkit-details-marker {
		display: none;
	}

	.paina-checkout-summary[open] .paina-checkout-summary-toggle {
		border-bottom: 1px solid var( --paina-border );
	}

	.paina-checkout-summary-name {
		/* min-width:0 (v0.37.0): sin esto el flex item no shrinkea bajo su
		 * min-content (min-width:auto) y el ellipsis de abajo NUNCA actúa —
		 * un nombre largo desbordaba el toggle en viewports angostos. */
		flex: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.paina-checkout-summary-total {
		flex: none;
	}
}

@media ( max-width: 640px ) {
	.paina-checkout {
		padding-left: 20px;
		padding-right: 20px;
	}

	.paina-checkout-fields {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ---- Detalle de propiedad (W.5 + rediseño Wander W.7) ---- */
.paina-detail {
	/* Contenedor ancho centrado estilo Wander (NO full-bleed): aire lateral
	   siempre. Solo .paina-detail — el listado lo controla Elementor. */
	max-width: 1280px;
	margin: 0 auto;
	/*
	 * Aire arriba (bajo el header/menú del tema) y abajo (sobre el footer): la
	 * página de detalle es virtual, Elementor no la toca, así que el espaciado
	 * lo aporta el plugin. Derivado de --paina-gap para venir bien "de fábrica".
	 */
	padding-top: calc( var( --paina-gap ) * 2.5 );    /* ~60px */
	padding-bottom: calc( var( --paina-gap ) * 2.5 );
	padding-left: 32px;
	padding-right: 32px;
}

/* ---- Nav sticky con scroll-spy (A2b) ---- */
/*
 * Barra de secciones (Photos · About · Amenities · Location) que se pega arriba
 * al scrollear. Fondo OPACO (--paina-bg, NO --paina-canvas que es transparente)
 * para que el contenido no se vea detrás. z-index modesto: por encima del
 * contenido pero MUY por debajo de los overlays (modales/lightbox/popover en
 * 100000+), que deben poder taparlo al abrirse. Scopeado 0,2,0 para ganarle al
 * tema. En mobile permite scroll horizontal (pulido fino = A3).
 */

/* Admin bar de wp-admin (v0.37.0 — solo DX con sesión iniciada; el huésped
 * nunca la ve y sin la clase body.admin-bar nada de esto aplica): corre el
 * token --paina-nav-top para que el nav sticky (y el booking-card sticky +
 * scroll-margin-top, que lo consumen vía calc) queden bajo la barra. Alturas
 * estándar de WP: 32px desktop / 46px ≤782px; en ≤600px la barra pasa a
 * position:absolute (scrollea fuera de pantalla) → offset 0, o quedaría un
 * hueco fijo sin barra encima. */
body.admin-bar .paina-detail {
	--paina-nav-top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .paina-detail {
		--paina-nav-top: 46px;
	}
}

@media ( max-width: 600px ) {
	body.admin-bar .paina-detail {
		--paina-nav-top: 0px;
	}
}
.paina-detail .paina-detail-nav {
	position: sticky;
	top: var( --paina-nav-top );
	z-index: 50;
	display: flex;
	gap: 24px;
	align-items: center;
	min-height: var( --paina-nav-height );
	/* Vive bajo la galería (A2b v0.22.1): aire arriba; abajo lo da el margin-top
	   del header. Sin margen negativo que asuma "nav primero". */
	margin: 16px 0 0;
	background: var( --paina-bg );
	border-bottom: 1px solid var( --paina-border );
	box-shadow: var( --paina-shadow-xs );
	overflow-x: auto;
	scrollbar-width: none;
}

.paina-detail .paina-detail-nav::-webkit-scrollbar {
	display: none;
}

/*
 * Links del nav: son <a> (no <button>), pero igual fijamos text-decoration en
 * base y estados — misma lección del reset.css de Hello Elementor. El subrayado
 * activo usa --paina-accent (coherente con el resto de estados activos; respeta
 * el accent del cliente). El borde inferior transparente reserva el espacio.
 */
.paina-detail .paina-detail-nav-link {
	flex: 0 0 auto;
	padding: 14px 0;
	color: var( --paina-muted );
	font-size: 0.9375rem;
	font-weight: 450;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.paina-detail .paina-detail-nav-link:hover {
	color: var( --paina-text );
	text-decoration: none;
}

.paina-detail .paina-detail-nav-link.is-active {
	color: var( --paina-text );
	border-bottom-color: var( --paina-accent );
}

/*
 * Offset de las anclas bajo el nav sticky. Selector por prefijo: cualquier
 * sección futura con id="paina-*" hereda el offset sola (cero re-cableado).
 */
.paina-detail [id^="paina-"] {
	scroll-margin-top: calc( var( --paina-nav-height ) + var( --paina-nav-top ) + 16px );
}

/* Cabecera: eyebrow city + título, arriba de la galería. */
.paina-detail-header {
	margin: 28px 0 16px;
}

.paina-detail-eyebrow {
	margin: 0 0 4px;
	font-size: 0.875rem;
	color: var( --paina-muted );
}

/* Escala Wander. Scopeado a 0,2,0 para ganarle a .entry-content h1 del tema. */
.paina-detail .paina-detail-title {
	margin: 0;
	font-size: 2.25rem;
	line-height: 2.625rem;
	letter-spacing: -0.045rem;
	font-weight: 600;
	color: var( --paina-text );
}

/* Rating + specs en una fila (Wander/Airbnb). El gap del flex hace de separador
   (specs ya usa " · " internamente → no meter otro dot literal). */
.paina-detail-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 8px;
}

/* Specs bajo el título (A2a): gris muted, peso normal. Scope 0,2,0. */
.paina-detail .paina-detail-specs {
	margin: 8px 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var( --paina-muted );
}

/* Dentro de la fila meta el margin del specs se neutraliza (la fila ya da el aire). */
.paina-detail .paina-detail-meta .paina-detail-specs {
	margin: 0;
}

/* Rating del detalle: star + número, mismo tamaño que los specs. */
.paina-detail-meta .paina-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 550; /* medium Wander: el rating pesa un toque más que el specs muted. */
	color: var( --paina-text );
}

/* Star inline del rating (card + detalle). Filled, hereda el color del contenedor. */
.paina-rating-star {
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.paina-card-rating .paina-rating-star {
	width: 14px;
	height: 14px;
}

/* ---- Galería mosaico ---- */
/*
 * El radio va en cada CELDA (estilo Wander: las 4 esquinas de cada tile), no en
 * el bloque, para que las celdas internas también queden redondeadas. El bloque
 * mantiene overflow:hidden pero sin border-radius (evita doble-redondeo en las
 * esquinas externas).
 */
.paina-gallery {
	display: grid;
	gap: 8px;
	/* position:relative para el botón "Show all" (absolute). Sin overflow:hidden:
	   era vestigial (el radius del bloque se quitó en 0.16.1) y recortaría las
	   sombras de las celdas del borde externo. */
	position: relative;
}

.paina-detail .paina-gallery-cell {
	position: relative;
	/* overflow:hidden imprescindible: clipa el hover scale(1.03) de la img.
	   La sombra de la celda NO la recorta su propio overflow (se pinta fuera
	   del border-box). */
	overflow: hidden;
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: var( --paina-radius-sm );
	background: var( --paina-placeholder );
	box-shadow: var( --paina-shadow-sm );
	cursor: pointer;
}

.paina-gallery-cell img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.paina-gallery-cell:hover img {
	transform: scale( 1.03 );
}

/* Fallbacks por cantidad de fotos (sin huecos). */
.paina-gallery--1 {
	grid-template-columns: 1fr;
}

.paina-gallery--1 .paina-gallery-cell,
.paina-gallery--empty .paina-gallery-cell {
	aspect-ratio: 16 / 9;
}

.paina-gallery--2 {
	grid-template-columns: repeat( 2, 1fr );
}

.paina-gallery--3 {
	grid-template-columns: repeat( 3, 1fr );
}

.paina-gallery--4 {
	grid-template-columns: repeat( 2, 1fr );
}

.paina-gallery--2 .paina-gallery-cell,
.paina-gallery--3 .paina-gallery-cell,
.paina-gallery--4 .paina-gallery-cell {
	aspect-ratio: 4 / 3;
}

/* 5+ : mosaico (1 grande 2×2 + 4 chicas). */
/*
 * 5+ : hero apaisada a la izquierda (~55%) + 2×2 de cuadradas a la derecha.
 * La altura la fijan las celdas cuadradas (no un ratio de banda): la columna
 * 2×2 y la hero ocupan las mismas 2 filas con el mismo gap → mismo alto exacto.
 */
.paina-gallery--5plus {
	grid-template-columns: 2.5fr 1fr 1fr;
	grid-template-rows: repeat( 2, 1fr );
}

.paina-gallery--5plus .paina-gallery-cell:first-child {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

.paina-gallery--5plus .paina-gallery-cell:not( :first-child ) {
	aspect-ratio: 1 / 1;
}

.paina-gallery--empty {
	grid-template-columns: 1fr;
}

.paina-detail .paina-gallery-all {
	position: absolute;
	right: 14px;
	bottom: 14px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius-pill );
	padding: 10px 18px;
	cursor: pointer;
	box-shadow: var( --paina-shadow-sm );
}

.paina-detail .paina-gallery-all:hover {
	background: var( --paina-surface-hover );
	color: var( --paina-text );
	border-color: var( --paina-border );
}

/* Píldoras Video / 3D tour: anchor links arriba-izquierda de la galería (mismo
   estilo píldora que "Show all photos"). Navegan a las secciones (cero JS). */
.paina-detail .paina-gallery-jumps {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	gap: 8px;
}

.paina-detail .paina-gallery-jump {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius-pill );
	padding: 8px 14px;
	text-decoration: none;
	box-shadow: var( --paina-shadow-sm );
}

.paina-detail .paina-gallery-jump:hover,
.paina-detail .paina-gallery-jump:focus {
	background: var( --paina-surface-hover );
	color: var( --paina-text );
	text-decoration: none;
}

/*
 * Galería en pantallas chicas: foto grande full-width arriba + el resto como
 * una tira sin huecos (columnas = nº de thumbs). Evita las fotos diminutas del
 * mosaico 4×2 en mobile; el resto se ve con "Show all photos".
 */
@media ( max-width: 640px ) {
	.paina-gallery--3,
	.paina-gallery--4,
	.paina-gallery--5plus {
		grid-template-rows: none;
		aspect-ratio: auto;
	}

	.paina-gallery--3 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.paina-gallery--4 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.paina-gallery--5plus {
		grid-template-columns: repeat( 4, 1fr );
	}

	.paina-gallery--3 .paina-gallery-cell:first-child,
	.paina-gallery--4 .paina-gallery-cell:first-child,
	.paina-gallery--5plus .paina-gallery-cell:first-child {
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}

	.paina-gallery--3 .paina-gallery-cell:first-child {
		grid-column: span 2;
	}

	.paina-gallery--4 .paina-gallery-cell:first-child {
		grid-column: span 3;
	}

	.paina-gallery--5plus .paina-gallery-cell:first-child {
		grid-column: span 4;
	}

	/* Las chicas: cuadradas, en una sola tira bajo la grande. */
	.paina-gallery--3 .paina-gallery-cell,
	.paina-gallery--4 .paina-gallery-cell,
	.paina-gallery--5plus .paina-gallery-cell {
		aspect-ratio: 1 / 1;
	}
}

/* ---- Layout 2 columnas ---- */
.paina-detail-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: 28px;
}

@media ( min-width: 1025px ) {
	.paina-detail-layout {
		grid-template-columns: minmax( 0, 1.7fr ) minmax( 280px, 1fr );
	}
}

/*
 * Tablet/mobile (1 columna): la booking card (precio + CTA) sube ARRIBA, justo
 * bajo la galería, para que el "Check availability" sea visible sin scrollear
 * toda la descripción. En ≥1025 vuelve al orden natural (card a la derecha).
 */
@media ( max-width: 1024px ) {
	.paina-detail-aside {
		order: -1;
	}
}

.paina-detail-main {
	min-width: 0;
}

.paina-detail-section {
	margin-top: 0;
}

.paina-detail-section + .paina-detail-section {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var( --paina-border );
}

/* Escala Wander. Scopeado a 0,2,0 para ganarle a .entry-content h2 del tema. */
.paina-detail .paina-detail-subtitle {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: -0.01rem;
	font-weight: 600;
	color: var( --paina-text );
}

/* ---- Read more / less ---- */
/* Body de descripción: tamaño propio (antes heredaba del tema). Scopeado a 0,2,0
   para ganarle a .entry-content p. */
.paina-detail .paina-readmore-content {
	font-size: 1rem;
	line-height: 1.375rem;
	color: var( --paina-text );
}

.paina-readmore-content p {
	margin: 0 0 1em;
}

.paina-readmore-content p:last-child {
	margin-bottom: 0;
}

.paina-readmore-collapsed .paina-readmore-content {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.paina-detail .paina-readmore-toggle {
	margin-top: 8px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --paina-text );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var( --paina-text );
	text-underline-offset: 2px;
}

/* :hover propio para NO heredar el color de hover del tema. */
/* hover Y focus: re-declarar la LÍNEA del underline (el blanket de estados la borra
   con text-decoration:none). text-decoration-line (no shorthand) para no pisar el color. */
.paina-detail .paina-readmore-toggle:hover,
.paina-detail .paina-readmore-toggle:focus {
	color: var( --paina-muted );
	text-decoration-line: underline;
	text-decoration-color: var( --paina-muted );
	background: none;
}

/* ---- Card sticky (molde del futuro widget de reserva) ---- */
.paina-detail-aside {
	min-width: 0;
}

.paina-booking-card {
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius );
	padding: 20px;
	box-shadow: var( --paina-shadow-sm );
}

@media ( min-width: 1025px ) {
	.paina-booking-card {
		position: sticky;
		/* Se pega DEBAJO del nav sticky (A2b), no solapado. + 24px de aire. */
		top: calc( var( --paina-nav-height ) + var( --paina-nav-top ) + 24px );
	}
}

/* Bloque de precio: contenedor (default / loading / total del quote / error). */
.paina-booking-price {
	margin: 0 0 8px;
}

/* Línea "from $X/night" (default) y monto del total (quote): mismo registro grande.
   Scopeado 0,2,0 por consistencia con el resto de la tipografía del detalle. */
.paina-detail .paina-booking-price-line,
.paina-detail .paina-booking-total-amount {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: -0.01rem;
	font-weight: 600;
	color: var( --paina-text );
}

.paina-booking-price-line {
	margin: 0;
}

/* Total del quote: monto grande + "for N nights (before taxes)" chico gris al lado. */
.paina-booking-total {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.paina-booking-total-nights {
	font-size: 0.875rem;
	font-weight: 450;
	color: var( --paina-muted );
}

/* Desglose del quote (informativo; el total de arriba es autoritativo — sin subtotal). */
.paina-booking-breakdown {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var( --paina-border );
}

.paina-booking-breakdown[hidden] {
	display: none;
}

.paina-quote-lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.paina-quote-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 0.9rem;
	color: var( --paina-text );
}

.paina-quote-note {
	color: var( --paina-muted );
	font-size: 0.85em;
}

.paina-quote-notincluded-title {
	margin: 12px 0 4px;
	font-size: 0.8rem;
	font-weight: 550;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --paina-muted );
}

.paina-quote-lines--muted .paina-quote-line {
	color: var( --paina-muted );
}

/* ---- Botones ---- */
.paina-detail .paina-btn-primary {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var( --paina-bg );
	background: var( --paina-accent );
	border: 0;
	border-radius: var( --paina-radius-sm );
	padding: 12px 16px;
	cursor: pointer;
}

/* Scope a (0,3,0) + las 3 propiedades, para ganarle al :hover del tema sin !important. */
.paina-detail .paina-btn-primary:hover {
	/* Aclarar el accent (20% blanco): el default es negro → oscurecer no se vería.
	   Respeta el accent override del cliente. */
	background: color-mix( in srgb, var( --paina-accent ) 80%, white );
	color: var( --paina-bg );
}

/* Reserve deshabilitado (A5): atenuado y sin aclarar en hover (rango incompleto). */
.paina-detail .paina-btn-primary:disabled {
	opacity: 0.4;
	cursor: default;
}

.paina-detail .paina-btn-primary:disabled:hover {
	background: var( --paina-accent );
	color: var( --paina-bg );
}

/* ---- Booking card Wander (A5): campos + guests + Reserve ---- */
.paina-booking-form {
	margin-top: 16px;
}

/* Caja de fechas: dos campos con divisor. El wrapper abre el popover al tocarlo. */
.paina-booking-dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	overflow: hidden;
}

.paina-booking-dates:focus-visible {
	outline: 2px solid var( --paina-accent );
	outline-offset: 2px;
}

.paina-booking-field-wrap {
	position: relative;
}

.paina-booking-field-wrap + .paina-booking-field-wrap {
	border-left: 1px solid var( --paina-control-border );
}

/* Campo tipo input (label chico arriba, valor abajo). Scopeado a .paina-detail
   para re-declarar sobre el blanket del reset de Hello Elementor. */
.paina-detail .paina-booking-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	color: var( --paina-text );
	background: none;
	border: 0;
	cursor: pointer;
}

.paina-booking-field-label {
	font-size: 0.7rem;
	font-weight: 550;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --paina-muted );
}

.paina-booking-field-value {
	font-size: 0.95rem;
	font-weight: 450;
	color: var( --paina-muted ); /* placeholder "Add date" */
}

.paina-booking-field--filled .paina-booking-field-value {
	color: var( --paina-text );
}

/* × para limpiar cada campo (aparece solo con valor). Hermano del <button> del
   campo (no anidado) → HTML válido. */
.paina-detail .paina-booking-field-clear {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 1rem;
	line-height: 1;
	color: var( --paina-muted );
	background: var( --paina-bg );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.paina-detail .paina-booking-field-clear:hover {
	color: var( --paina-text );
	background: var( --paina-surface-hover );
}

.paina-booking-guests {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
}

/* <select> nativo estilable. font:inherit → hereda la fuente del tema (no se toca). */
.paina-detail .paina-booking-guests-select {
	font: inherit;
	font-size: 0.95rem;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	padding: 10px 12px;
	cursor: pointer;
}

.paina-booking-reserve {
	margin-top: 16px;
}

/* "Clear dates": link sobrio. Re-declara text-decoration en hover (el blanket de
   estados la borra). */
.paina-detail .paina-booking-clear {
	display: block;
	margin: 12px auto 0;
	padding: 4px;
	font-size: 0.85rem;
	color: var( --paina-muted );
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.paina-detail .paina-booking-clear:hover {
	color: var( --paina-text );
	background: none;
	text-decoration: underline;
}

.paina-detail .paina-btn-outline {
	margin-top: 14px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-border );
	border-radius: var( --paina-radius-pill );
	padding: 10px 18px;
	cursor: pointer;
	box-shadow: var( --paina-shadow-sm );
}

.paina-detail .paina-btn-outline:hover {
	background: var( --paina-surface-hover );
	color: var( --paina-text );
	border-color: var( --paina-border );
}

/* ---- Lightbox ---- */
.paina-lightbox {
	background: var( --paina-scrim );
}

.paina-lightbox-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.paina-lightbox-stage {
	width: 100%;
	max-width: 1100px;
	max-height: 86vh;
	margin: 0 56px;
}

.paina-lightbox-slide {
	margin: 0;
	display: none;
}

.paina-lightbox-slide-active {
	display: block;
}

.paina-lightbox-slide img {
	width: 100%;
	max-height: 86vh;
	object-fit: contain;
	display: block;
}

.paina-detail .paina-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
	color: var( --paina-text );
	background: rgba( 255, 255, 255, 0.92 );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.paina-lightbox-prev {
	left: 16px;
}

.paina-lightbox-next {
	right: 16px;
}

/* :hover propio (no heredar tema): círculo a blanco sólido para feedback. */
.paina-detail .paina-lightbox-nav:hover {
	background: rgba( 255, 255, 255, 1 );
	color: var( --paina-text );
}

.paina-detail .paina-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	font-size: 2rem;
	line-height: 1;
	color: var( --paina-bg );
	background: none;
	border: 0;
	cursor: pointer;
}

/* :hover propio (no heredar tema): dim sutil, sigue visible sobre fondo oscuro. */
.paina-detail .paina-lightbox-close:hover {
	color: rgba( 255, 255, 255, 0.7 );
	background: none;
}

.paina-lightbox-counter {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	color: var( --paina-bg );
	font-size: 0.9rem;
}

/*
 * Mobile (A3): la foto a ancho casi completo y las flechas a una fila ABAJO
 * (centradas, lado a lado) en vez de a los costados — así no le comen ~112px de
 * ancho a la imagen. Solo cambia DÓNDE se ven los botones; el JS de prev/next y
 * el blindaje (color/bg/border) quedan intactos. El × y el contador siguen arriba.
 */
@media ( max-width: 640px ) {
	.paina-lightbox-stage {
		margin: 0 12px;
		max-height: 78vh;
	}

	.paina-lightbox-slide img {
		max-height: 78vh;
	}

	.paina-detail .paina-lightbox-nav {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.paina-lightbox-prev {
		left: calc( 50% - 52px );
		right: auto;
	}

	.paina-lightbox-next {
		left: calc( 50% + 8px );
		right: auto;
	}
}

/* Bloquea el scroll del body con un modal abierto. */
body.paina-modal-open {
	overflow: hidden;
}

/* Amenities (lista). */
.paina-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 8px 24px;
}

.paina-amenity {
	font-size: 0.95rem;
	color: var( --paina-text );
	padding-left: 18px;
	position: relative;
}

/* Bullet "·" para las listas de TEXTO (modal). Las destacadas lo apagan (icono). */
.paina-amenity::before {
	content: "·";
	position: absolute;
	left: 4px;
	color: var( --paina-muted );
}

/* ---- Destacadas con icono (A4) ---- */
/* Icono Lucide + label alineados. El icono hereda currentColor y reemplaza el bullet. */
.paina-amenities-featured {
	gap: 14px 24px;
}

.paina-amenities-featured .paina-amenity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 0;
}

.paina-amenities-featured .paina-amenity::before {
	content: none;
}

.paina-amenity-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --paina-muted );
}

.paina-amenity-icon .paina-icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* ---- Modal agrupado por categoría (A4) ---- */
.paina-amenity-group + .paina-amenity-group {
	margin-top: 24px;
}

/* Título de categoría: escala Wander, scopeado 0,2,0 para ganarle a .entry-content h3. */
.paina-detail .paina-amenity-group-title {
	margin: 0 0 12px;
	font-size: 1.0625rem;
	line-height: 1.4;
	font-weight: 550;
	color: var( --paina-text );
}

.paina-amenities-group {
	grid-template-columns: 1fr;
}

/* ---- Reviews (sección + grilla + estrellas per-review) ---- */
/* Header del bloque: "★ 4.8 · 5 reviews" (reusa .paina-rating de v0.26.0). */
.paina-reviews-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.paina-reviews-title .paina-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --paina-text );
}

.paina-reviews-title .paina-rating-star {
	width: 18px;
	height: 18px;
}

.paina-reviews-sep {
	color: var( --paina-muted );
}

/* Grilla 2 col; colapsa a 1 col en mobile (breakpoint sm existente). */
.paina-reviews-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px 28px;
}

.paina-review-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.paina-review-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.paina-review-name {
	font-size: 0.9375rem;
	font-weight: 550;
	color: var( --paina-text );
}

.paina-review-date {
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

/* Texto de la card: clamp a ~4 líneas (el \n colapsa a espacio → truncado). */
.paina-review-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var( --paina-text );
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.paina-detail-reviews .paina-btn-outline {
	margin-top: 20px;
}

/* Estrellas per-review: llena/media/vacía, misma geometría, media clipeada al 50%. */
.paina-review-stars {
	display: inline-flex;
	gap: 2px;
	color: var( --paina-text );
}

.paina-review-star {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 0;
}

.paina-review-star .paina-star-svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* La mitad llena: overlay clipeado al 50% del ancho sobre el outline. */
.paina-review-star-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

.paina-review-star-fill .paina-star-svg {
	width: 15px; /* ancho FIJO (no 50%): el overflow:hidden del padre lo clipea. */
	max-width: none;
}

/* Modal de reviews: lista apilada, texto COMPLETO con párrafos (pre-line). */
.paina-review-modal-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.paina-review-modal-item + .paina-review-modal-item {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var( --paina-border );
}

.paina-review-modal-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var( --paina-text );
	white-space: pre-line; /* respeta los \n\n como párrafos. */
	/* Medida de lectura: con el panel a 740px, el texto corrido a todo el ancho
	   daría líneas de ~100 caracteres. El cap aplica al TEXTO, no al panel. */
	max-width: 65ch;
}

@media ( max-width: 640px ) {
	.paina-reviews-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Media (Video / 3D tour): iframe responsive 16/9 ---- */
.paina-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var( --paina-radius );
	overflow: hidden;
	background: var( --paina-surface-hover );
}

.paina-media-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Video de dominio no whitelisteado: link estilizado (reusa .paina-btn-outline). */
.paina-detail .paina-media-link {
	display: inline-flex;
	text-decoration: none;
}

/* ---- Good to know (horas + flags derivados) ---- */
.paina-gtk-times {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 40px;
}

.paina-gtk-times li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.paina-gtk-label {
	font-size: 0.8125rem;
	color: var( --paina-muted );
}

.paina-gtk-value {
	font-size: 1rem;
	font-weight: 550;
	color: var( --paina-text );
}

.paina-gtk-flags {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px 28px;
}

.paina-gtk-flag {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9375rem;
	color: var( --paina-text );
}

.paina-gtk-flag-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.paina-gtk-flag-icon .paina-icon {
	width: 20px;
	height: 20px;
}

/* not allowed: atenuado (icono x + texto muted); on_request: neutro. */
.paina-gtk-flag--not_allowed {
	color: var( --paina-muted );
}

.paina-gtk-flag--not_allowed .paina-gtk-flag-icon {
	color: var( --paina-muted );
}

/* Modal de house rules: texto COMPLETO con párrafos (pre-line), esc_html siempre. */
.paina-rules-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var( --paina-text );
	white-space: pre-line;
	/* Medida de lectura (ver .paina-review-modal-text): cap al texto, no al panel. */
	max-width: 65ch;
}

@media ( max-width: 640px ) {
	.paina-gtk-flags {
		grid-template-columns: 1fr;
	}
}

/* Mapa "Where you'll be" (W.7 ola 3a): zona aproximada vía iframe OSM. */
.paina-map-place {
	margin: 0 0 12px;
	font-size: 0.95rem;
	color: var( --paina-muted );
}

.paina-map {
	position: relative; /* ancla del overlay de zona (.paina-map-zone). */
	width: 100%;
	height: 320px;
	border-radius: var( --paina-radius );
	overflow: hidden; /* el radius + overflow viven acá → clipean el iframe Y el círculo. */
}

.paina-map-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/*
 * Círculo de zona aproximada (overlay). Centrado en el contenedor = correcto sin
 * matemática (el bbox de osm_embed_url() siempre se centra en lat/lng). Sizing por
 * el alto (dimensión chica) + aspect-ratio → círculo perfecto y responsive. Color:
 * --paina-accent translúcido (color-mix, sin token nuevo) → hereda el accent del
 * cliente; con el default negro se lee como zona gris neutra (aceptado). El borde
 * apenas más marcado que el relleno (estilo Airbnb). pointer-events:none → el drag/
 * zoom del iframe sigue intacto.
 */
.paina-detail .paina-map-zone {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	height: 70%; /* knob: se afina con los ojos en la validación. */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	pointer-events: none;
	background: color-mix( in srgb, var( --paina-accent ) 14%, transparent );
	border: 1.5px solid color-mix( in srgb, var( --paina-accent ) 42%, transparent );
}

/* Calendario de disponibilidad (W.6). El estado loading/error usa .paina-state. */
.paina-detail-availability .paina-state {
	margin-top: 10px;
}

/* Contenedor del par de meses (A5). Relative para anclar las flechas absolutas. */
.paina-cal {
	position: relative;
}

.paina-cal-months {
	display: flex;
	gap: 20px;
}

.paina-cal-month-block {
	flex: 1 1 0;
	min-width: 0;
}

.paina-cal-month-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px; /* alinea con las flechas de 36px en las esquinas */
	margin-bottom: 8px;
	font-size: 0.95rem;
	font-weight: 550; /* Wander: nunca 700 */
	color: var( --paina-text );
}

/* Flechas ‹ › absolutas en las esquinas del par (Wander). Reusan .paina-cal-nav. */
.paina-detail .paina-cal-nav-prev {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.paina-detail .paina-cal-nav-next {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.paina-detail .paina-cal-nav {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
	color: var( --paina-text );
	background: var( --paina-bg );
	border: 1px solid var( --paina-control-border );
	border-radius: var( --paina-radius-sm );
	cursor: pointer;
}

.paina-detail .paina-cal-nav:hover {
	border-color: var( --paina-accent );
	background: var( --paina-bg );
	color: var( --paina-text );
}

.paina-cal-nav[disabled] {
	opacity: 0.4;
	cursor: default;
}

.paina-cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	/* gap:0 → celdas contiguas: la banda in-range del rango queda CONTINUA (el aire
	   entre días lo da el padding de la celda + el círculo interno). */
	gap: 0;
}

.paina-cal-weekday {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --paina-muted );
	padding: 4px 0;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Celda pelada Wander: sin borde ni fondo por celda; el número va en un círculo
   interno (.paina-cal-num). position:relative ancla la diagonal del tachado. */
.paina-cal-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 2px;
	box-sizing: border-box;
	cursor: default;
}

.paina-cal-day-empty {
	border: 0;
}

/* El número vive en un círculo de 34px (transparente por default). Sobre esta
   base se pintan el hover (gris suave) y la selección (accent). */
.paina-cal-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 450; /* Wander */
	color: var( --paina-text );
}

/* Día disponible: clickeable. El verde (--paina-available-*) ya NO se aplica. */
.paina-cal-available {
	cursor: pointer;
}

/* Hover del círculo en días disponibles NO seleccionados: gris muy suave. */
.paina-cal-available:not( .paina-cal-selected-start ):not( .paina-cal-selected-end ):hover .paina-cal-num {
	background: var( --paina-surface-hover );
}

/* Día ocupado: número atenuado + tachado diagonal (sin fondo, pelado). */
.paina-cal-booked .paina-cal-num {
	color: var( --paina-booked-fg );
}

/*
 * Tachado Wander: línea diagonal de esquina a esquina sobre la celda ocupada.
 * pointer-events:none → la capa decorativa NUNCA roba clicks.
 */
.paina-cal-booked::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top right,
		transparent calc( 50% - 0.75px ),
		var( --paina-booked-fg ) calc( 50% - 0.75px ),
		var( --paina-booked-fg ) calc( 50% + 0.75px ),
		transparent calc( 50% + 0.75px )
	);
}

/*
 * Selección de rango (A5 sub-tarea 3). La BANDA va en la CELDA (contigua, sin
 * gap → continua, cruza el borde de semana y de mes). El CÍRCULO va en el número.
 */
.paina-cal-in-range {
	background: var( --paina-in-range );
}

/* Media-banda hacia adentro del rango en cada extremo → se une con la banda. */
.paina-cal-range-start {
	background: linear-gradient( to right, transparent 50%, var( --paina-in-range ) 50% );
}

.paina-cal-range-end {
	background: linear-gradient( to left, transparent 50%, var( --paina-in-range ) 50% );
}

/* Extremos: círculo relleno con el accent + número invertido. */
.paina-cal-selected-start .paina-cal-num,
.paina-cal-selected-end .paina-cal-num {
	background: var( --paina-accent );
	color: var( --paina-bg );
}

@media ( max-width: 640px ) {
	.paina-detail {
		padding-top: calc( var( --paina-gap ) * 1.5 ); /* ~36px */
		padding-bottom: calc( var( --paina-gap ) * 1.5 );
		padding-left: 20px;
		padding-right: 20px;
	}

	/* 0,2,0 para ganarle al base scopeado (el bare 0,1,0 perdería). */
	.paina-detail .paina-detail-title {
		font-size: 1.75rem;
	}

	.paina-amenities {
		grid-template-columns: 1fr;
	}

	.paina-cal-day {
		min-height: 44px;
	}

	/* Bottom-sheet mobile: los dos meses se APILAN vertical (scroll dentro del
	   panel via el max-height:80vh que ya existe), no lado a lado. */
	.paina-cal-months {
		flex-direction: column;
		gap: 24px;
	}
}

/* ---- Popover del calendario (anclado a la card, Wander-style) ---- */
.paina-popover[hidden] {
	display: none;
}

/* Desktop: panel fixed posicionado por JS, sin backdrop. */
.paina-popover-backdrop {
	display: none;
}

.paina-popover-panel {
	position: fixed;
	z-index: 100001;
	width: 660px; /* dos meses lado a lado (A5); el JS clampea a vw-2*MARGIN */
	max-height: calc( 100vh - 24px );
	overflow-y: auto;
	background: var( --paina-bg );
	border: 1px solid var( --paina-border );
	border-radius: 14px; /* literal: radio propio del popover (no es --paina-radius) */
	box-shadow: var( --paina-shadow-md );
	padding: 16px;
	box-sizing: border-box;
	outline: none;
}

.paina-detail .paina-popover-close {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 1.4rem;
	line-height: 1;
	color: var( --paina-muted );
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
}

.paina-detail .paina-popover-close:hover {
	color: var( --paina-text );
	background: none;
}

/*
 * Mobile: el popover cae a BOTTOM-SHEET (sube desde abajo, full-width). El slide-up
 * usa @starting-style (CSS puro, compatible con el toggle de `hidden`); si el
 * navegador no lo soporta, el sheet simplemente aparece (la animación es opcional).
 *
 * ★ 640px = el breakpoint ÚNICO del popover (v0.37.0), compartido con el
 * MOBILE_MQ de public-detail.js (comentario espejo allá). Cambiar uno = cambiar
 * el otro.
 */
@media ( max-width: 640px ) {
	.paina-popover-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: var( --paina-backdrop );
	}

	.paina-popover-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: none;
		max-height: 80vh;
		overflow-y: auto;
		border-radius: 16px 16px 0 0;
		padding-top: 24px;
		transform: translateY( 0 );
		transition: transform 0.25s ease;
	}

	/* Handle visual del sheet. */
	.paina-popover-panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX( -50% );
		width: 36px;
		height: 4px;
		border-radius: 999px;
		background: var( --paina-control-border );
	}

	/* Slide-up de entrada (degrada a "aparece" sin soporte de @starting-style). */
	@starting-style {
		.paina-popover-panel {
			transform: translateY( 100% );
		}
	}
}

body.paina-popover-open {
	overflow: hidden;
}