/**
 * accommodation.css — Estilos para la Página de Alojamiento Estilo Airbnb
 * Machupicchu Travel Narcy
 *
 * Contenido:
 * 1. Variables y Reset del Layout
 * 2. Cabecera del Alojamiento & Breadcrumbs
 * 3. Galería Fotográfica Mosaico Airbnb (5 Fotos)
 * 4. Distribución Principal (Contenido 65% + Sidebar Sticky 35%)
 * 5. Columna izquierda: información, destacados y garantía de estancia
 * 6. Distribución de Dormitorios ("Dónde vas a dormir")
 * 7. Comodidades y Servicios (Amenities Grid)
 * 8. Calendario de Disponibilidad
 * 9. Ubicación y Puntos de Interés
 * 10. Desglose de Evaluaciones & Reseñas de Huéspedes
 * 11. Perfil del Anfitrión & Reglas de la Casa
 * 12. Widget Sticky de Reserva Directa (Columna Derecha)
 * 13. Modales (Lightbox de Galería Completa y Servicios Totales)
 * 14. Barra Flotante Inferior Móvil (Mobile Sticky Booking Bar)
 * 15. Soporte para Modo Oscuro ([data-theme="dark"] / .dark-mode)
 * 16. Responsividad Móvil y Tablet
 */

/* ==========================================================================
   1. VARIABLES Y RESET DEL LAYOUT
   ========================================================================== */
.alojamiento-page {
	--ab-green: var(--mtn-green, #1a7a3c);
	--ab-green-dark: var(--mtn-green-dark, #14612f);
	--ab-green-light: var(--mtn-green-light, #f0f8f2);
	--ab-orange: var(--mtn-orange, #f4611e);
	--ab-orange-dark: var(--mtn-orange-dark, #dc4f10);
	--ab-yellow: var(--mtn-yellow, #f2c230);
	--ab-gold: var(--mtn-gold, #d4a329);
	--ab-wa: #25d366;
	--ab-wa-dark: #1ebc57;
	--ab-heading: var(--mtn-heading, #142016);
	--ab-text: var(--mtn-text, #2c352e);
	--ab-muted: var(--mtn-muted, #5b665b);
	--ab-border: var(--mtn-border, #e8ebe8);
	--ab-border-light: var(--mtn-border-light, #f0f3f0);
	--ab-bg: var(--mtn-bg, #ffffff);
	--ab-bg-alt: var(--mtn-bg-alt, #f8faf8);
	--ab-card-bg: var(--mtn-bg-card, #ffffff);
	--ab-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--ab-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--ab-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
	--ab-radius-sm: 8px;
	--ab-radius-md: 14px;
	--ab-radius-lg: 20px;
	--ab-radius-full: 9999px;
	--ab-max-w: 1280px;

	background-color: var(--ab-bg);
	color: var(--ab-text);
	font-family: var(--mtn-font-body, "Inter", sans-serif);
	padding-top: 24px;
	padding-bottom: 80px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.alojamiento-container {
	max-width: var(--ab-max-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

/* ==========================================================================
   2. CABECERA DEL ALOJAMIENTO & BREADCRUMBS
   ========================================================================== */
.ab-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--ab-muted);
	margin-bottom: 14px;
}

.ab-breadcrumbs a {
	color: var(--ab-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.ab-breadcrumbs a:hover {
	color: var(--ab-green);
}

.ab-breadcrumbs .separator {
	color: #adb5bd;
	font-size: 11px;
}

.ab-breadcrumbs .current {
	color: var(--ab-heading);
	font-weight: 600;
}

.ab-header-top {
	margin-bottom: 20px;
}

.ab-title {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ab-heading);
	margin: 0 0 10px 0;
	letter-spacing: -0.2px;
}

.ab-header-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14.5px;
}

.ab-meta-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ab-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ab-heading);
	font-weight: 600;
}

.ab-rating-badge {
	color: var(--ab-heading);
}

.ab-star-icon {
	color: var(--ab-orange);
	display: inline-flex;
}

.ab-meta-reviews {
	color: var(--ab-muted);
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

.ab-meta-dot {
	color: #ced4da;
}

.ab-badge-superhost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(244, 97, 30, 0.1);
	color: var(--ab-orange);
	padding: 3px 10px;
	border-radius: var(--ab-radius-full);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.ab-meta-location {
	color: var(--ab-muted);
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

.ab-meta-location:hover,
.ab-meta-reviews:hover {
	color: var(--ab-green);
}

.ab-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ab-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-sm);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-heading);
	cursor: pointer;
	transition: all 0.2s ease;
}

.ab-action-btn:hover {
	background: var(--ab-bg-alt);
	border-color: #adb5bd;
}

.ab-action-btn.is-saved {
	color: #e63946;
	border-color: #ffccd5;
	background: #fff0f3;
}

.ab-action-btn.is-saved svg {
	fill: #e63946;
	stroke: #e63946;
}

/* ==========================================================================
   3. GALERÍA FOTOGRÁFICA MOSAICO AIRBNB (5 FOTOS)
   ========================================================================== */
.ab-gallery-wrap {
	position: relative;
	margin-bottom: 36px;
	border-radius: var(--ab-radius-lg);
	overflow: hidden;
}

.ab-gallery-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 210px 210px;
	gap: 8px;
	height: 428px;
}

.ab-photo-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--ab-bg-alt);
}

.ab-photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.ab-photo-item:hover img {
	transform: scale(1.04);
	filter: brightness(0.94);
}

/* Posiciones de las 5 fotos clásicas de Airbnb */
.ab-photo-main {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

.ab-photo-top-mid {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.ab-photo-top-right {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}

.ab-photo-bot-mid {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.ab-photo-bot-right {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

/* Botón "Mostrar todas las fotos" */
.ab-btn-show-all-photos {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--ab-radius-sm);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #142016;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	z-index: 5;
}

.ab-btn-show-all-photos:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
	background: #fdfdfd;
}

/* Etiquetas en las fotos del Mosaico */
.ab-photo-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(14, 43, 23, 0.88);
	backdrop-filter: blur(4px);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 6px;
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ab-photo-tag.is-hotel {
	background: rgba(244, 97, 30, 0.92);
}

/* ==========================================================================
   3.1 ESCAPARATE DE MODALIDADES (HOTEL & DEPARTAMENTO)
   ========================================================================== */
.ab-options-showcase {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.ab-option-card {
	background: var(--ab-card-bg);
	border: 1.5px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
	padding: 26px;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	position: relative;
	overflow: hidden;
}

.ab-option-card:hover {
	transform: translateY(-3px);
	border-color: var(--ab-green);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

.ab-option-card.is-hotel:hover {
	border-color: var(--ab-orange);
}

.ab-option-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: rgba(22, 101, 52, 0.1);
	color: var(--ab-green);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--ab-radius-full);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.ab-option-badge.is-hotel {
	background: rgba(244, 97, 30, 0.12);
	color: var(--ab-orange);
}

.ab-option-card h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 10px 0;
}

.ab-option-card p {
	font-size: 14.5px;
	color: var(--ab-muted);
	line-height: 1.55;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.ab-option-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ab-option-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ab-text);
}

.ab-option-list li svg {
	color: var(--ab-green);
	flex-shrink: 0;
}

.ab-option-card.is-hotel .ab-option-list li svg {
	color: var(--ab-orange);
}

.ab-option-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid var(--ab-border);
	gap: 12px;
	flex-wrap: wrap;
}

.ab-option-quote-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ab-option-quote-status {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ab-green);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.ab-option-card.is-hotel .ab-option-quote-status {
	color: var(--ab-orange);
}

.ab-option-quote-lbl {
	font-size: 13.5px;
	color: var(--ab-muted);
}

.ab-option-quote-lbl strong {
	font-size: 18px;
	color: var(--ab-heading);
	font-weight: 700;
}

.ab-option-price {
	font-size: 14px;
	color: var(--ab-muted);
}

.ab-option-price strong {
	font-size: 20px;
	color: var(--ab-heading);
}

.ab-btn-filter-photos {
	background: transparent;
	border: 1.5px solid var(--ab-border);
	border-radius: var(--ab-radius-sm);
	padding: 8px 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--ab-heading);
	cursor: pointer;
	transition: all 0.2s ease;
}

.ab-btn-filter-photos:hover {
	background: var(--ab-green);
	border-color: var(--ab-green);
	color: #ffffff;
}

.ab-option-card.is-hotel .ab-btn-filter-photos:hover {
	background: var(--ab-orange);
	border-color: var(--ab-orange);
	color: #ffffff;
}

/* ==========================================================================
   4. DISTRIBUCIÓN PRINCIPAL (65% IZQUIERDA + 35% DERECHA STICKY)
   ========================================================================== */
.ab-layout-grid {
	display: grid;
	grid-template-columns: 1fr 390px;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.ab-main-column {
	min-width: 0;
}

.ab-sidebar-column {
	position: relative;
}

.ab-section-divider {
	border: none;
	border-top: 1px solid var(--ab-border);
	margin: 32px 0;
}

/* ==========================================================================
   5. COLUMNA IZQUIERDA: INFORMACIÓN, DESTACADOS Y GARANTÍA DE ESTANCIA
   ========================================================================== */
.ab-summary-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-bottom: 24px;
}

.ab-summary-title {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 6px 0;
}

.ab-summary-specs {
	color: var(--ab-muted);
	font-size: 15px;
	margin: 0;
	line-height: 1.5;
}

.ab-host-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.ab-host-avatar {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ab-green);
	display: block;
}

.ab-host-badge-icon {
	position: absolute;
	bottom: -2px;
	right: -2px;
	background: var(--ab-orange);
	color: #ffffff;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	font-size: 11px;
}

/* Lista de destacados (Airbnb Highlights) */
.ab-highlights-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ab-highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.ab-highlight-icon {
	width: 28px;
	height: 28px;
	color: var(--ab-green);
	flex-shrink: 0;
	margin-top: 2px;
}

.ab-highlight-content h4 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 3px 0;
}

.ab-highlight-content p {
	font-size: 14.5px;
	color: var(--ab-muted);
	margin: 0;
	line-height: 1.45;
}

/* Garantía de estancia */
.ab-stay-guarantee-box {
	background: linear-gradient(135deg, rgba(26, 122, 60, 0.07) 0%, rgba(244, 97, 30, 0.06) 100%);
	border: 1px solid var(--ab-border);
	border-left: 4px solid var(--ab-green);
	border-radius: var(--ab-radius-md);
	padding: 24px;
	margin: 28px 0;
}

.ab-stay-guarantee-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ab-stay-logo-brand {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-green);
}

.ab-stay-logo-brand span {
	color: var(--ab-orange);
}

.ab-stay-guarantee-desc {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ab-text);
	margin: 0 0 16px 0;
}

.ab-stay-guarantee-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 14px;
}

.ab-stay-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ab-heading);
}

.ab-stay-feature svg {
	color: var(--ab-green);
	flex-shrink: 0;
}

/* Descripción / El espacio */
.ab-description-wrap h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 16px 0;
}

.ab-description-content {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ab-text);
}

.ab-description-content p {
	margin: 0 0 14px 0;
}

.ab-btn-read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--ab-green);
	text-decoration: underline;
	cursor: pointer;
	margin-top: 4px;
}

.ab-btn-read-more:hover {
	color: var(--ab-orange);
}

/* ==========================================================================
   6. DISTRIBUCIÓN DE DORMITORIOS ("DÓNDE VAS A DORMIR")
   ========================================================================== */
.ab-beds-section h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 18px 0;
}

.ab-beds-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}

.ab-bed-card {
	background: var(--ab-card-bg);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
	padding: 20px 18px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ab-bed-card:hover {
	border-color: var(--ab-green);
	transform: translateY(-2px);
}

.ab-bed-card-icon {
	width: 32px;
	height: 32px;
	color: var(--ab-green);
	margin-bottom: 14px;
}

.ab-bed-card h4 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 6px 0;
}

.ab-bed-card p {
	font-size: 14px;
	color: var(--ab-muted);
	margin: 0;
	line-height: 1.4;
}

.ab-beds-group-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 14px 0;
}

.ab-beds-group-header h4 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0;
}

.ab-beds-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border-radius: 4px;
	background: rgba(22, 101, 52, 0.12);
	color: var(--ab-green);
}

.ab-beds-tag.is-hotel {
	background: rgba(244, 97, 30, 0.12);
	color: var(--ab-orange);
}

/* ==========================================================================
   7. COMODIDADES Y SERVICIOS (AMENITIES GRID)
   ========================================================================== */
.ab-amenities-section h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 20px 0;
}

.ab-amenities-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
	margin-bottom: 24px;
}

.ab-amenity-item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 15px;
	color: var(--ab-heading);
	font-weight: 500;
}

.ab-amenity-item svg {
	width: 24px;
	height: 24px;
	color: var(--ab-heading);
	flex-shrink: 0;
}

.ab-btn-all-amenities {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--ab-heading);
	border-radius: var(--ab-radius-sm);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ab-heading);
	cursor: pointer;
	transition: all 0.2s ease;
}

.ab-btn-all-amenities:hover {
	background: var(--ab-heading);
	color: var(--ab-bg);
}

/* ==========================================================================
   8. CALENDARIO DE DISPONIBILIDAD
   ========================================================================== */
.ab-calendar-section h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 6px 0;
}

.ab-calendar-subtitle {
	font-size: 14.5px;
	color: var(--ab-muted);
	margin: 0 0 20px 0;
}

.ab-calendar-card {
	background: var(--ab-card-bg);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
	padding: 24px;
}

.ab-calendar-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.ab-calendar-month-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ab-heading);
}

.ab-calendar-nav-btn {
	background: none;
	border: 1px solid var(--ab-border);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ab-heading);
	transition: background 0.2s;
}

.ab-calendar-nav-btn:hover {
	background: var(--ab-bg-alt);
}

.ab-calendar-grid-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ab-muted);
	margin-bottom: 10px;
}

.ab-calendar-grid-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.ab-cal-day {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.15s ease;
	position: relative;
}

.ab-cal-day:hover:not(.is-disabled):not(.is-empty) {
	background: var(--ab-border-light);
}

.ab-cal-day.is-selected {
	background: var(--ab-green) !important;
	color: #ffffff !important;
	font-weight: 700;
}

.ab-cal-day.is-in-range {
	background: rgba(26, 122, 60, 0.12);
	border-radius: 0;
	color: var(--ab-green);
	font-weight: 600;
}

.ab-cal-day.is-disabled {
	color: #ced4da;
	text-decoration: line-through;
	cursor: not-allowed;
}

.ab-cal-day.is-today::after {
	content: "";
	position: absolute;
	bottom: 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ab-orange);
}

.ab-calendar-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--ab-border-light);
	font-size: 13.5px;
}

.ab-cal-legend {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ab-cal-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ab-muted);
}

.ab-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.ab-legend-dot.available { background: var(--ab-green); }
.ab-legend-dot.reserved { background: #ced4da; }

.ab-cal-clear-btn {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ab-heading);
	text-decoration: underline;
	cursor: pointer;
}

/* ==========================================================================
   9. UBICACIÓN Y PUNTOS DE INTERÉS
   ========================================================================== */
.ab-location-section h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 6px 0;
}

.ab-location-subtitle {
	font-size: 14.5px;
	color: var(--ab-muted);
	margin: 0 0 20px 0;
}

.ab-map-card {
	position: relative;
	border-radius: var(--ab-radius-md);
	overflow: hidden;
	height: 280px;
	background: #e9ecef;
	margin-bottom: 22px;
	border: 1px solid var(--ab-border);
}

.ab-map-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ab-map-overlay-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #ffffff;
	color: var(--ab-heading);
	padding: 12px 20px;
	border-radius: var(--ab-radius-full);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 14px;
	border: 2px solid var(--ab-green);
}

.ab-map-overlay-badge svg {
	color: var(--ab-orange);
}

.ab-distances-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.ab-distance-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--ab-bg-alt);
	border-radius: var(--ab-radius-sm);
	font-size: 14px;
	color: var(--ab-heading);
	font-weight: 500;
}

.ab-distance-item svg {
	color: var(--ab-green);
	flex-shrink: 0;
}

.ab-distance-item strong {
	color: var(--ab-orange);
	margin-left: auto;
}

/* ==========================================================================
   10. DESGLOSE DE EVALUACIONES & RESEÑAS DE HUÉSPEDES
   ========================================================================== */
.ab-reviews-section h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 24px 0;
}

.ab-reviews-score-badge {
	color: var(--ab-orange);
}

.ab-ratings-breakdown-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 40px;
	margin-bottom: 32px;
}

.ab-rating-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14.5px;
	color: var(--ab-heading);
}

.ab-rating-bar-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 50%;
}

.ab-rating-bar {
	height: 5px;
	flex-grow: 1;
	background: var(--ab-border);
	border-radius: 99px;
	overflow: hidden;
}

.ab-rating-bar-fill {
	height: 100%;
	background: var(--ab-heading);
	border-radius: 99px;
}

.ab-rating-number {
	font-size: 13.5px;
	font-weight: 700;
	min-width: 24px;
	text-align: right;
}

.ab-reviews-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ab-review-card {
	padding: 20px;
	background: var(--ab-card-bg);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
}

.ab-review-user {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.ab-review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: #e2e8f0;
}

.ab-review-meta h4 {
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 2px 0;
}

.ab-review-meta span {
	font-size: 13px;
	color: var(--ab-muted);
}

.ab-review-stars {
	color: var(--ab-orange);
	margin-bottom: 10px;
	font-size: 13px;
	display: flex;
	gap: 3px;
}

.ab-review-text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ab-text);
	margin: 0;
}

/* ==========================================================================
   11. PERFIL DEL ANFITRIÓN & REGLAS DE LA CASA
   ========================================================================== */
.ab-host-full-card {
	background: var(--ab-bg-alt);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-lg);
	padding: 28px;
	margin-bottom: 36px;
}

.ab-host-full-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.ab-host-full-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ab-green);
}

.ab-host-full-header h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 4px 0;
}

.ab-host-full-header p {
	font-size: 14px;
	color: var(--ab-muted);
	margin: 0;
}

.ab-host-full-stats {
	display: flex;
	gap: 32px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ab-border);
}

.ab-host-stat-item strong {
	display: block;
	font-size: 18px;
	color: var(--ab-heading);
}

.ab-host-stat-item span {
	font-size: 13px;
	color: var(--ab-muted);
}

.ab-host-full-bio {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ab-text);
	margin-bottom: 20px;
}

.ab-host-contact-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--ab-heading);
	color: var(--ab-bg);
	border-radius: var(--ab-radius-sm);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: background 0.2s;
}

.ab-host-contact-cta:hover {
	background: var(--ab-green);
	color: #ffffff;
}

/* Reglas de la casa */
.ab-rules-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ab-rules-col h4 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 12px 0;
}

.ab-rules-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: var(--ab-muted);
}

/* ==========================================================================
   12. WIDGET STICKY DE RESERVA DIRECTA (COLUMNA DERECHA)
   ========================================================================== */
.ab-booking-card {
	position: sticky;
	top: 100px;
	background: var(--ab-card-bg);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-lg);
	padding: 24px;
	box-shadow: var(--ab-shadow-md);
	transition: box-shadow 0.3s ease;
	z-index: 10;
}

.ab-booking-card:hover {
	box-shadow: var(--ab-shadow-lg);
}

/* Conmutador de Modalidad (Departamento vs Hotel) */
.ab-booking-type-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	background: var(--ab-bg-alt);
	padding: 4px;
	border-radius: var(--ab-radius-sm);
	margin-bottom: 18px;
}

.ab-type-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 9px 6px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: calc(var(--ab-radius-sm) - 2px);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.ab-type-btn .ab-type-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ab-muted);
}

.ab-type-btn .ab-type-sub {
	font-size: 11px;
	color: var(--ab-muted);
	opacity: 0.85;
}

.ab-type-btn.is-active {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ab-type-btn.is-active .ab-type-name {
	color: var(--ab-green);
}

.ab-type-btn.is-active[data-service-type="hotel"] .ab-type-name {
	color: var(--ab-orange);
}

.ab-type-btn.is-active .ab-type-sub {
	color: var(--ab-heading);
	opacity: 1;
	font-weight: 600;
}

.ab-booking-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ab-border-light);
}

.ab-booking-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.ab-booking-price {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--ab-heading);
}

.ab-booking-price-unit {
	font-size: 15px;
	color: var(--ab-muted);
}

.ab-booking-badge-discount {
	display: inline-block;
	background: rgba(26, 122, 60, 0.12);
	color: var(--ab-green);
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	margin-top: 4px;
}

.ab-booking-rating-meta {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ab-heading);
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Selector de fechas y huéspedes estilo Airbnb */
.ab-picker-box {
	border: 1px solid #ced4da;
	border-radius: var(--ab-radius-sm);
	margin-bottom: 18px;
	overflow: hidden;
}

.ab-picker-dates-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #ced4da;
}

.ab-picker-item {
	padding: 10px 12px;
	background: var(--ab-card-bg);
	cursor: pointer;
	position: relative;
	transition: background 0.15s;
}

.ab-picker-item:first-child {
	border-right: 1px solid #ced4da;
}

.ab-picker-item:hover {
	background: var(--ab-bg-alt);
}

.ab-picker-label {
	display: block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--ab-heading);
	letter-spacing: 0.5px;
	margin-bottom: 3px;
}

.ab-picker-value {
	font-size: 14px;
	color: var(--ab-heading);
	font-weight: 500;
	display: block;
}

.ab-picker-guests {
	padding: 10px 12px;
	background: var(--ab-card-bg);
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ab-picker-guests:hover {
	background: var(--ab-bg-alt);
}

/* Dropdown de Huéspedes */
.ab-guests-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--ab-card-bg);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-md);
	padding: 18px;
	z-index: 20;
	margin-top: 6px;
}

.ab-guests-dropdown.is-open {
	display: block;
}

.ab-guest-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}

.ab-guest-row:not(:last-child) {
	border-bottom: 1px solid var(--ab-border-light);
}

.ab-guest-info h5 {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ab-heading);
	margin: 0;
}

.ab-guest-info span {
	font-size: 12.5px;
	color: var(--ab-muted);
}

.ab-guest-counter {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ab-counter-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #ced4da;
	background: transparent;
	color: var(--ab-heading);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: all 0.15s;
}

.ab-counter-btn:hover:not(:disabled) {
	border-color: var(--ab-heading);
}

.ab-counter-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.ab-counter-val {
	font-size: 15px;
	font-weight: 600;
	min-width: 16px;
	text-align: center;
}

/* Botón CTA Reserva WhatsApp */
.ab-btn-booking-wa {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--ab-wa) 0%, var(--ab-wa-dark) 100%);
	color: #ffffff !important;
	border: none;
	border-radius: var(--ab-radius-sm);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
	transition: all 0.25s ease;
	margin-bottom: 10px;
}

.ab-btn-booking-wa:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
	background: linear-gradient(135deg, #2ae06d 0%, #17a94d 100%);
}

.ab-btn-booking-secondary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	background: transparent;
	color: var(--ab-heading);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-sm);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	margin-bottom: 16px;
}

.ab-btn-booking-secondary:hover {
	background: var(--ab-bg-alt);
	border-color: #adb5bd;
}

.ab-booking-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--ab-muted);
	margin: 0 0 18px 0;
}

/* Resumen de Cotización Personalizada */
.ab-quote-summary {
	background: var(--ab-bg-alt);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-sm);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
	margin-bottom: 14px;
}

.ab-quote-summary-header {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ab-heading);
	font-size: 13.5px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ab-border);
}

.ab-quote-summary-header svg {
	color: var(--ab-green);
	flex-shrink: 0;
}

.ab-quote-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	gap: 8px;
}

.ab-quote-label {
	color: var(--ab-muted);
}

.ab-quote-val {
	font-weight: 600;
	color: var(--ab-heading);
	text-align: right;
}

.ab-quote-guarantees {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--ab-border);
}

.ab-quote-guarantee-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--ab-muted);
}

.ab-quote-guarantee-item svg {
	color: var(--ab-green);
	flex-shrink: 0;
	margin-top: 1px;
}

/* Desglose de Precios (Retrocompatibilidad) */
.ab-price-breakdown {
	border-top: 1px solid var(--ab-border-light);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14.5px;
}

.ab-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--ab-heading);
}

.ab-price-row.discount {
	color: var(--ab-green);
	font-weight: 600;
}

.ab-price-total {
	border-top: 1px solid var(--ab-border);
	padding-top: 14px;
	margin-top: 4px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--ab-heading);
}

/* Tarjeta de Beneficio Exclusivo Directo */
.ab-exclusive-perk {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(244, 97, 30, 0.08);
	border: 1px solid rgba(244, 97, 30, 0.2);
	border-radius: var(--ab-radius-sm);
	padding: 14px;
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ab-heading);
}

.ab-exclusive-perk svg {
	color: var(--ab-orange);
	flex-shrink: 0;
	margin-top: 2px;
}

.ab-exclusive-perk strong {
	color: var(--ab-orange-dark);
}

/* ==========================================================================
   13. MODALES (LIGHTBOX DE FOTOS Y SERVICIOS TOTALES)
   ========================================================================== */
.ab-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ab-modal-overlay.is-active {
	display: flex;
	opacity: 1;
}

/* Modal Lightbox de Fotos */
.ab-lightbox-container {
	width: 95vw;
	max-width: 1180px;
	height: 90vh;
	background: #121914;
	color: #ffffff;
	border-radius: var(--ab-radius-md);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ab-lightbox-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.4);
	gap: 16px;
	flex-wrap: wrap;
}

.ab-lightbox-filters {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ab-filter-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #e0e0e0;
	padding: 6px 14px;
	border-radius: var(--ab-radius-full);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ab-filter-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.ab-filter-btn.is-active {
	background: var(--ab-green);
	border-color: var(--ab-green);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(30, 138, 70, 0.4);
}

.ab-lightbox-counter {
	font-size: 15px;
	font-weight: 600;
	color: #d8e2d9;
}

.ab-lightbox-close {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #ffffff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.ab-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.ab-lightbox-body {
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 20px;
}

.ab-lightbox-img-wrap {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ab-lightbox-img {
	max-width: 100%;
	max-height: calc(90vh - 200px);
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: opacity 0.2s ease;
}

.ab-lightbox-caption {
	margin-top: 12px;
	font-size: 14.5px;
	color: #e2e8f0;
	text-align: center;
}

.ab-lightbox-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	z-index: 10;
}

.ab-lightbox-nav-btn:hover {
	background: var(--ab-green);
	border-color: var(--ab-green);
}

.ab-lightbox-prev { left: 20px; }
.ab-lightbox-next { right: 20px; }

/* Miniaturas en el Lightbox */
.ab-lightbox-thumbs {
	display: flex;
	gap: 10px;
	padding: 14px 24px;
	background: rgba(0, 0, 0, 0.5);
	overflow-x: auto;
	justify-content: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-lightbox-thumb {
	width: 64px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	border: 2px solid transparent;
	transition: all 0.2s;
	flex-shrink: 0;
}

.ab-lightbox-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-lightbox-thumb.is-active {
	opacity: 1;
	border-color: var(--ab-green);
}

/* Modal de Todos los Servicios */
.ab-amenities-modal-card {
	width: 90vw;
	max-width: 680px;
	max-height: 85vh;
	background: var(--ab-card-bg);
	color: var(--ab-text);
	border-radius: var(--ab-radius-lg);
	overflow-y: auto;
	box-shadow: var(--ab-shadow-lg);
	padding: 32px;
	position: relative;
}

.ab-amenities-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ab-border);
}

.ab-amenities-modal-header h3 {
	font-family: var(--mtn-font-heading, "Merriweather", serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0;
}

.ab-amenities-group {
	margin-bottom: 28px;
}

.ab-amenities-group h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ab-heading);
	margin: 0 0 14px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ab-border-light);
}

.ab-amenities-group-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Toast de Enlace Copiado */
.ab-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: var(--ab-heading);
	color: #ffffff;
	padding: 12px 24px;
	border-radius: var(--ab-radius-full);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 100000;
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.ab-toast.is-show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* ==========================================================================
   14. BARRA FLOTANTE INFERIOR MÓVIL (MOBILE STICKY BOOKING BAR)
   ========================================================================== */
.ab-mobile-sticky-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--ab-card-bg);
	border-top: 1px solid var(--ab-border);
	padding: 14px 20px;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	align-items: center;
	justify-content: space-between;
}

.ab-mobile-price-wrap {
	display: flex;
	flex-direction: column;
}

.ab-mobile-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--ab-heading);
}

.ab-mobile-dates {
	font-size: 12.5px;
	color: var(--ab-muted);
	text-decoration: underline;
}

.ab-btn-mobile-reserve {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: linear-gradient(135deg, var(--ab-wa) 0%, var(--ab-wa-dark) 100%);
	color: #ffffff;
	border: none;
	border-radius: var(--ab-radius-sm);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* ==========================================================================
   15. SOPORTE PARA MODO OSCURO ([data-theme="dark"] / .dark-mode)
   ========================================================================== */
[data-theme="dark"] .alojamiento-page,
.dark-mode .alojamiento-page {
	--ab-heading: #f3f7f4;
	--ab-text: #d8e2d9;
	--ab-muted: #8fa091;
	--ab-border: #233126;
	--ab-border-light: #1b261e;
	--ab-bg: #101512;
	--ab-bg-alt: #161e19;
	--ab-card-bg: #18221b;
	--ab-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
	--ab-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
	--ab-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .ab-btn-show-all-photos,
.dark-mode .ab-btn-show-all-photos {
	background: #18221b;
	color: #f3f7f4;
	border-color: #233126;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ab-picker-box,
.dark-mode .ab-picker-box {
	border-color: #233126;
}

[data-theme="dark"] .ab-picker-dates-row,
.dark-mode .ab-picker-dates-row {
	border-bottom-color: #233126;
}

[data-theme="dark"] .ab-picker-item:first-child,
.dark-mode .ab-picker-item:first-child {
	border-right-color: #233126;
}

[data-theme="dark"] .ab-counter-btn,
.dark-mode .ab-counter-btn {
	border-color: #233126;
}

[data-theme="dark"] .ab-map-overlay-badge,
.dark-mode .ab-map-overlay-badge {
	background: #18221b;
	color: #f3f7f4;
	border-color: var(--ab-green);
}

[data-theme="dark"] .ab-rating-bar,
.dark-mode .ab-rating-bar {
	background: #233126;
}

[data-theme="dark"] .ab-rating-bar-fill,
.dark-mode .ab-rating-bar-fill {
	background: #3ec774;
}

/* ==========================================================================
   16. RESPONSIVIDAD MÓVIL Y TABLET
   ========================================================================== */
@media (max-width: 1024px) {
	.ab-layout-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ab-booking-card {
		position: static;
		max-width: 500px;
		margin: 0 auto;
	}

	.ab-ratings-breakdown-grid {
		gap: 14px 20px;
	}
}

@media (max-width: 768px) {
	.alojamiento-page {
		padding-top: 12px;
		padding-bottom: 100px;
	}

	/* Galería móvil: estilo carrusel o foto principal con botón */
	.ab-gallery-mosaic {
		grid-template-columns: 1fr;
		grid-template-rows: 280px;
		height: 280px;
	}

	.ab-photo-item:not(.ab-photo-main) {
		display: none;
	}

	.ab-btn-show-all-photos {
		bottom: 14px;
		right: 14px;
		padding: 8px 14px;
		font-size: 13px;
	}

	.ab-header-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.ab-ratings-breakdown-grid,
	.ab-reviews-cards-grid,
	.ab-amenities-grid,
	.ab-rules-grid,
	.ab-stay-guarantee-grid {
		grid-template-columns: 1fr;
	}

	.ab-beds-grid {
		grid-template-columns: 1fr 1fr;
	}

	.ab-mobile-sticky-bar {
		display: flex;
	}

	.ab-booking-card {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.ab-beds-grid {
		grid-template-columns: 1fr;
	}

	.ab-summary-header {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.ab-host-full-stats {
		flex-direction: column;
		gap: 12px;
	}
}