/* ==========================================================================
   Solo Baja · Ficha de propiedad Flexmls IDX  (/idx/<slug>-mls_<id>)

   Acompaña a style.css, que hace lo propio con la página de resultados.
   Se cargan por separado porque las dos vistas nunca coinciden.

   Selectores adaptados al markup real de flexmls-idx v3.18.2
   (views/v2/fmcListingDetails.php). Ojo con dos cosas que no son evidentes:

   1. El legend de la ficha usa clases DISTINTAS a las de resultados:
      .disclosure-section / .disclosure-text, no .flexmls_connect__idx_*.
   2. Las flechas del carrusel las descoloca essential-real-estate, no el tema
      ni Flexmls (ver el bloque del carrusel más abajo).
   ========================================================================== */

:root{
	--sb-yellow:#FFD000;
	--sb-yellow-soft:#FFE86A;
	--sb-ink:#3F3F3E;
	--sb-mute:#8A8A86;
	--sb-line:#E6E6E1;
}

/* --------------------------------------------------------------------------
   Aire bajo el header del sitio

   El plugin no pone ningún espacio superior: la fila de acciones es el primer
   hijo del wrapper y solo lleva margin-bottom. Encima, flexmls-idx oculta el
   título de la entrada (.flexmls_connect__listing_details_page .entry-title
   {display:none}), que es lo que normalmente separaba del header.
   -------------------------------------------------------------------------- */
.flexmls-listing-details.flexmls-v2-widget{
	padding-top:40px;
}

.flexmls-listing-details.flexmls-v2-widget .flexmls-actions-wrapper.listing-section{
	margin-bottom:32px;
	gap:16px;
	/* Sin ?search_referral_url= no hay enlace de vuelta y la fila solo lleva el
	   botón; el min-height evita que colapse. */
	min-height:40px;
}

.flexmls-listing-details.flexmls-v2-widget .flexmls-actions-wrapper .back-to-search-link{
	font-size:15px;
	font-weight:500;
	text-decoration:none;
}

/* --------------------------------------------------------------------------
   Galería

   Ancho: ningún contenedor de la galería tiene max-width, así que la foto se
   estiraba a todo el ancho disponible (~1320px). Se acota a 1000px centrada.

   Deformación: el tema recarga su propio Owl CSS DESPUÉS del de Flexmls, con
   el mismo selector y misma especificidad —
     plugins/flexmls-idx/assets/css/style.css  .owl-carousel .owl-item img{width:auto}
     themes/shina/assets/css/owl.css:38-41     .owl-carousel .owl-item img{width:100%}
   y gana el tema. Como el stage tiene altura fija, se resuelve con object-fit
   en vez de devolver el width:auto (que dejaría franjas blancas a los lados).
   -------------------------------------------------------------------------- */
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper{
	max-width:1000px;
	margin-inline:auto;
	position:relative;
}

.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-item img{
	width:100%;
	height:100%;
	object-fit:cover;
	max-height:none;
}

/* --------------------------------------------------------------------------
   Flechas del carrusel

   Estaban invisibles por dos motivos que se suman:

   a) POSICIÓN. essential-real-estate define en
      public/assets/scss/main/main.min.css reglas GLOBALES sin acotar
        .owl-nav .owl-prev{left:-80px}   .owl-nav .owl-next{right:-80px}
      que se filtran a cualquier carrusel Owl del sitio. Esa hoja carga después
      de la de Flexmls, así que ganaba: los botones acababan 80px FUERA del
      carrusel, sobre el fondo blanco de la página.

   b) COLOR. Nadie declara `color` en .owl-prev/.owl-next, así que heredaban el
      #777 del body del tema, sobre un círculo blanco al 70%.

   Se corrige con especificidad (0-5-0), sin !important: basta para ganar a los
   selectores globales de ERE, que son 0-2-0.
   -------------------------------------------------------------------------- */
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next{
	position:absolute;
	top:auto;
	width:40px;
	height:40px;
	border:0;
	border-radius:100%;
	background-color:rgba(0,0,0,.45);
	color:#fff;
	font-size:22px;
	line-height:1;
	z-index:2;
	transition:background-color .15s ease;
}

.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev{
	left:16px;
	right:auto;
}

.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next{
	right:16px;
	left:auto;
}

.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev:hover,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next:hover,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev:focus,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next:focus{
	/* El tema pone un amarillo con !important en .owl-nav .owl-prev:hover
	   (shina/assets/css/custom.css:474); aquí hay que igualarlo para mantener
	   el tratamiento oscuro elegido. */
	background-color:rgba(0,0,0,.7) !important;
	color:#fff;
}

.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev:focus-visible,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next:focus-visible{
	outline:2px solid var(--sb-yellow);
	outline-offset:2px;
}

/* essential-real-estate inyecta triángulos decorativos con ::after que no
   pintan nada bueno sobre un botón redondo. */
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev::after,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next::after{
	display:none;
}

/* .owl-nav es una franja de 100% de ancho sobre la foto; sin esto se come los
   clics en la imagen. */
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav{
	pointer-events:none;
}
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev,
.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next{
	pointer-events:auto;
}

/* --------------------------------------------------------------------------
   Legend / disclaimer  — mismo tratamiento que en la página de resultados
   -------------------------------------------------------------------------- */
.flexmls-listing-details.flexmls-v2-widget .disclosure-section.listing-section{
	margin:40px auto 0;
	padding:34px 20px 30px;
	max-width:820px;
	border-top:1px solid var(--sb-line);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	text-align:center;
}

.flexmls-listing-details.flexmls-v2-widget .disclosure-section.listing-section::before{
	content:"";
	width:56px;
	height:2px;
	background:var(--sb-yellow);
	flex:none;
}

.flexmls-listing-details.flexmls-v2-widget .disclosure-text{
	margin:0;
	font-size:12.5px;
	line-height:1.75;
	color:var(--sb-mute);
	text-wrap:pretty;
}

.flexmls-listing-details.flexmls-v2-widget .disclosure-section .listing-req,
.flexmls-listing-details.flexmls-v2-widget .disclosure-section .compensation-disclaimer{
	font-size:12.5px;
	line-height:1.75;
	color:var(--sb-mute);
}

.flexmls-listing-details.flexmls-v2-widget .disclosure-section hr{
	display:none;
}

.flexmls-listing-details.flexmls-v2-widget .fbs-branding{
	font-size:12.5px;
	color:var(--sb-mute);
}

.flexmls-listing-details.flexmls-v2-widget .fbs-branding a{
	font-weight:600;
	color:var(--sb-ink);
	text-decoration:none;
	border-bottom:2px solid var(--sb-yellow);
	padding-bottom:1px;
}

.flexmls-listing-details.flexmls-v2-widget .fbs-branding a:hover{
	color:#000;
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width:640px){
	.flexmls-listing-details.flexmls-v2-widget{ padding-top:24px; }
	.flexmls-listing-details.flexmls-v2-widget .flexmls-actions-wrapper.listing-section{
		margin-bottom:24px;
	}
	.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-prev{ left:8px; }
	.flexmls-listing-details.flexmls-v2-widget .slideshow-wrapper .owl-nav .owl-next{ right:8px; }
}

/* ==========================================================================
   Modal "Contactar al asesor"

   El formulario lo genera flexmls-idx en JS (contactForm() en su main.js) y lo
   mete en un colorbox con prefijo propio: #flexmls_connect__colorbox. La
   reestructuración del markup la hace assets/detail-modal.js; aquí solo va el
   aspecto. Los selectores del colorbox necesitan !important puntual porque
   colorbox escribe estilos inline al abrir.
   ========================================================================== */

#flexmls_connect__cboxContent{
	border-top:4px solid var(--sb-yellow);
}

#flexmls_connect__cboxLoadedContent{
	margin-bottom:0 !important;
}

#flexmls_connect__cboxClose{
	top:22px !important;
	right:22px !important;
	width:34px;
	height:34px;
	border:1px solid var(--sb-line);
	background:#fff;
	color:var(--sb-ink);
	font-size:0;                 /* el botón trae el texto "close" */
	/* colorbox le aplica text-indent:-9999px para ocultar ese texto, pero eso
	   se lleva por delante también nuestro ::before. */
	text-indent:0;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease;
}
#flexmls_connect__cboxClose::before{
	content:"\00d7";
	font-size:18px;
	line-height:1;
}
#flexmls_connect__cboxClose:hover{
	border-color:var(--sb-ink);
	background:#FAFAF8;
}

/* --- Cabecera --- */
.flexmls_connect__contact_form.sb-modal{
	background:#fff;
	color:var(--sb-ink);
}

.sb-modal .sb-modal__cab{
	padding:26px 76px 20px 26px;
	border-bottom:1px solid var(--sb-line);
}

.sb-modal .sb-modal__marca{
	margin:0 0 6px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--sb-mute);
}

.sb-modal .sb-modal__titulo{
	margin:0;
	font-size:26px;
	font-weight:700;
	line-height:1.2;
	color:#1A1A19;
}

.sb-modal .sb-modal__sub{
	margin:8px 0 0;
	font-size:14px;
	color:var(--sb-mute);
}
.sb-modal .sb-modal__sub:empty{ display:none; }

/* --- Cuerpo --- */
.sb-modal .sb-modal__cuerpo{
	padding:22px 26px 26px;
}

/* Chip con la propiedad (sale del campo "asunto") */
.sb-modal .sb-prop{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:4px 12px;
	margin:0 0 16px;
	padding:12px 16px;
	background:#FFFBEA;
	border-left:3px solid var(--sb-yellow);
}
.sb-modal .sb-prop__etq{
	font-size:11px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--sb-mute);
}
.sb-modal .sb-prop__val{
	font-size:14px;
	font-weight:500;
	color:var(--sb-ink);
}
.sb-modal .sb-prop__mls{
	margin-left:8px;
	font-weight:400;
	color:var(--sb-mute);
}

.sb-modal .sb-error{
	margin:0 0 16px;
	font-size:13px;
	color:#C0392B;
}
.sb-modal .sb-error:empty{ display:none; }

/* --- Campos --- */
.sb-modal .sb-fila{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

.sb-modal .sb-campo{
	margin:0 0 16px;
}

.sb-modal .sb-campo label{
	display:block;
	margin:0 0 6px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--sb-mute);
}

.sb-modal .sb-campo input,
.sb-modal .sb-campo textarea{
	display:block;
	width:100%;
	max-width:100%;
	padding:11px 14px;
	border:1px solid var(--sb-line);
	border-radius:0;
	background:#fff;
	font:400 14px/1.4 inherit;
	color:var(--sb-ink);
	box-shadow:none;
	transition:border-color .15s ease, box-shadow .15s ease;
}

.sb-modal .sb-campo textarea{
	min-height:118px;
	resize:vertical;
}

.sb-modal .sb-campo input::placeholder,
.sb-modal .sb-campo textarea::placeholder{
	color:#B6B6B0;
}

.sb-modal .sb-campo input:focus,
.sb-modal .sb-campo textarea:focus{
	outline:none;
	border-color:var(--sb-yellow);
	box-shadow:inset 0 0 0 1px var(--sb-yellow);
}

/* --- Botón --- */
.sb-modal .sb-acciones{
	margin-top:8px;
}

.sb-modal input.sb-enviar{
	display:block;
	width:100%;
	padding:15px 20px;
	border:0;
	border-radius:0;
	background:var(--sb-yellow);
	color:#1A1A19;
	font-size:14px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	cursor:pointer;
	transition:background-color .15s ease;
}
.sb-modal input.sb-enviar:hover{ background:var(--sb-yellow-soft); }
.sb-modal input.sb-enviar:disabled{
	background:#E9E9E4;
	color:#9C9C97;
	cursor:default;
}

/* Campos que el plugin necesita al enviar pero no deben verse. */
.sb-modal .sb-oculto{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

@media (max-width:480px){
	.sb-modal .sb-fila{ grid-template-columns:1fr; gap:0; }
	.sb-modal .sb-modal__cab{ padding:22px 20px 16px; }
	.sb-modal .sb-modal__cuerpo{ padding:18px 20px 22px; }
	.sb-modal .sb-modal__titulo{ font-size:22px; }
}