/* ==========================================================================
   VISITA VIRTUAL 360º — pop-up
   Hereda el marco de .modalDesign (fondo, backdrop, radio en movil) pero su
   contenido es solo la visita: sin titulo visible, en formato apaisado 16:9,
   con el boton de cierre en la franja superior alineado a la derecha.
   Se carga solo en las paginas que tienen alguna visita virtual publicada.
   ========================================================================== */

/*
   La visita manda sobre el ancho estandar del modal: se estira hasta el 92% de
   la ventana, y si el alto no da para el 16:9 se estrecha en lugar de desbordar
   o dejar franjas vacias. El descuento cubre los margenes del dialogo y la
   franja del boton de cierre.
*/
.virtualTourModal .modal-dialog {
	max-width: min(92vw, calc((100vh - 120px) * 16 / 9));
}

/* Franja del boton arriba y visita ocupando el resto, sin padding lateral */
.virtualTourModal .modal-body {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: inherit;
	overflow: hidden;
}

.virtualTourModal .close {
	align-self: flex-end;
	float: none;
	margin: 8px 12px;
	padding: 0;
}

.virtualTourModal .close span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

/* ESCENARIO APAISADO: misma proporcion que entrega el proveedor (853x480) */
.virtualTourModal .virtualTourStage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--surface-complement-opacity-48);
}

.virtualTourModal .virtualTourFrame,
.virtualTourModal .virtualTourFrame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* AVISO DE CARGA: visible hasta que el iframe termina de cargar */
.virtualTourModal .virtualTourLoader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: var(--text-primary-solid-64);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

.virtualTourModal .virtualTourLoader.is-hidden {
	display: none;
}

/* ==========================================================================
   BOTON DE APERTURA, SUPERPUESTO A LA FOTO DEL LISTADO
   Vive dentro de .rooms-slider (que ya es position:relative), asi que se ancla
   a la propia foto sin depender de la altura del contador que va debajo.
   La esquina inferior izquierda esta libre: las flechas del carrusel quedan
   FUERA de la imagen y el contador, por debajo.
   ========================================================================== */

#listSec .rooms-slider .js-virtual-tour {
	position: absolute;
	z-index: 5;
	left: 32px;
	bottom: 32px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 26px 12px 20px;
	border: none;
	border-radius: 40px;
	background-color: rgb(255 255 255 / 82%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 6px 24px rgb(40 32 22 / 18%);
	color: var(--text-secondary-solid-100);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: .45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   Ruta completa a proposito: el slider fuerza width:100% a sus <img> con
   '#listSec .roomsBox .rooms .image .rooms-slider img', y hay que superarlo.
*/
#listSec .roomsBox .rooms .image .rooms-slider .js-virtual-tour img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: var(--icons-filter-primary);
}

/* El hover generico de .button lo pondria en marron con texto blanco */
#listSec .rooms-slider .js-virtual-tour:hover,
#listSec .rooms-slider .js-virtual-tour:focus {
	border: none;
	background-color: #ffffff;
	box-shadow: 0 10px 30px rgb(40 32 22 / 26%);
	color: var(--text-secondary-solid-100);
	transform: translateY(-2px);
}

/* TABLET Y MOVIL */
@media (max-width: 991px) {

	.virtualTourModal .close {
		margin: 8px 12px;
		font-size: 0.813rem;
	}

	.virtualTourModal .close span {
		width: 32px;
		height: 32px;
	}

	/*
	   En movil lo que sobra es alto, asi que la visita deja de derivar su alto
	   del ancho: ocupa el alto de pantalla que queda tras la franja del boton y
	   los margenes del dialogo. Con aspect-ratio se quedaba en el 62% de la
	   pantalla en vertical y en una tira de 250px en horizontal.
	   dvh descuenta la barra del navegador en movil; vh queda como respaldo.
	*/
	.virtualTourModal .modal-dialog {
		max-width: 96vw;
		margin: 8px auto;
	}

	/*
	   2/3 es el compromiso: da alto suficiente para que sea inmersivo sin que la
	   escena se convierta en una columna de techo y suelo (el visor mantiene el
	   campo de vision horizontal, asi que estirar de alto solo anade techo).
	   El max-height es el que manda en horizontal, donde el alto es lo escaso, y
	   devuelve la visita a una proporcion apaisada sin regla aparte.
	   dvh descuenta la barra del navegador en movil; vh queda como respaldo.
	*/
	.virtualTourModal .virtualTourStage {
		aspect-ratio: 2 / 3;
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
	}

	/*
	   Radio pequeno y propio: el visor del proveedor pone sus controles en la
	   esquina inferior izquierda y los 32px que usa el resto de modales en movil
	   se los comian. Ademas el breakpoint de ese radio es 767px, asi que el
	   mismo telefono lo perdia al girar a horizontal.
	*/
	.virtualTourModal .modal-content {
		border-radius: 12px;
	}

	/* La foto es mas pequena: el boton se pega mas a la esquina y encoge */
	#listSec .rooms-slider .js-virtual-tour {
		left: 16px;
		bottom: 16px;
		gap: 8px;
		padding: 10px 20px 10px 16px;
		font-size: 0.813rem;
		letter-spacing: 1px;
	}

	#listSec .roomsBox .rooms .image .rooms-slider .js-virtual-tour img {
		width: 20px;
		height: 20px;
	}

}