/*
Theme Name: Marilak Propiedades Theme
Theme URI: https://marilakpropiedades.com.ar
Author: Marilak Propiedades
Description: Theme a medida para Marilak Propiedades.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marilak-propiedades-theme
*/

/*
 * Header azul permanente en paginas que no son la home (usa el mismo color que el header
 * "sticky" al hacer scroll: .trheader .rt-sticky.header-menu{background-color:#0e2e50}
 * en styles.css - que ademas es el mismo #0e2e50 que ya usamos como --rt-primary-color).
 * A proposito NO reusamos la clase .rt-sticky entera porque esa tambien trae
 * position:fixed - eso hubiera hecho falta el JS de scroll para el alto del placeholder,
 * que no es lo que se pidio ahora, solo el color.
 */
body.mpt-inner-page #header-menu.header-menu {
	background-color: var(--rt-primary-color);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/*
 * Overlay del panel de filtros mobile (pagina Propiedades). El panel en si
 * (.rtcl-widget-ajax-filter-wrapper, offcanvas fijo + .is-active) y el boton flotante
 * (#homlisti-filter-trigger.rtcl-filter-float) ya tienen TODO su CSS en styles.css -
 * lo unico que faltaba era el overlay (no existe en el original) y el JS que agrega/saca
 * esas clases, ver assets/js/mpt-filter-panel.js.
 */
.mpt-filter-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 99998;
}
.mpt-filter-overlay.is-open {
	display: block;
}
@media (min-width: 992px) {
	.mpt-filter-overlay {
		display: none !important;
	}
}

/*
 * Barra de acciones + filtros activos sobre la grilla de propiedades. La mayor parte
 * del look (chips .afi, .rtcl-clear-filters, .rtcl-ordering select, etc.) ya viene
 * completo en styles.css - esto es solo lo que faltaba para que el layout general
 * (wrap entre chips y boton "Limpiar", el tache para sacar un chip) funcione bien.
 */
.rtcl-active-filters-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px;
}
.rtcl-remove-filter {
	cursor: pointer;
	margin-left: 8px;
	opacity: .6;
}
.rtcl-remove-filter:hover {
	opacity: 1;
}
.rtcl-clear-filters {
	cursor: pointer;
}
.rtcl-view-trigger .v-icon svg {
	color: #b4b4b4;
	transition: color .3s;
}
.rtcl-view-trigger:hover .v-icon svg {
	color: var(--rt-primary-color);
}	
.rtcl-view-trigger.active .v-icon svg{
	color: var(--rtcl-badge-top-color);
}
/*
 * Todo este bloque es la reproduccion fiel de <style id="homlisti-dynamic-inline-css">
 * del maxi.html original: en WordPress ese bloque lo genera el Customizer del theme y se
 * inyecta inline en el <head> (no existe como archivo .css descargable). Lo copiamos
 * completo -variables incluidas- en vez de ir sacando a mano solo lo que "parecia" hacer
 * falta, porque eso fue lo que nos hizo pisar el palito con --rt-primary-light2 y con las
 * variables --e-global-color-* del kit: styles.css/default.css usan variables sueltas por
 * todos lados y sin la definicion original quedan rotas en silencio.
 */
:root {
	--rt-body-font: 'Roboto', sans-serif;
	--rt-heading-font: 'Ubuntu', sans-serif;
	--rt-menu-font: 'Ubuntu', sans-serif;
	/* Paleta azul (antes verde/teal). Base: #0e2e50, el color del menu fijo (sticky). */
	--rt-primary-color: #0e2e50;
	--rt-primary-dark: #0a2340;
	--rt-primary-light: #4f8ecb;
	--rt-primary-light2: #dbe6f0;
	--rt-primary-light3: #eaf2f8;
	--rt-secondary-color: #1c4f7c;
	--rt-primary-rgb: 14, 46, 80;
	--rt-secondary-rgb: 28, 79, 124;
}

/*
 * Reproduccion de <style id="rtcl-public-inline-css">, el bloque dinamico que el plugin
 * Classified Listing inyecta en paginas propias (archivo de propiedades, single listing,
 * etc.) con SUS PROPIAS variables --rtcl-* (no confundir con --rt-* de arriba, que son del
 * theme). Sin esto rtcl-public.min.css cae en sus defaults de fabrica (#3232ff / #81d742),
 * que no tienen nada que ver con nuestra paleta. Los colores de badges (nuevo/destacado/
 * top/popular/bump-up) son semanticos, no de marca, asi que esos los dejamos igual.
 */
:root {
	--rtcl-primary-color: var(--rt-primary-color);
	--rtcl-primary-rgb: var(--rt-primary-rgb);
	--rtcl-primary-tint: rgba(var(--rt-primary-rgb), 0.08);
	--rtcl-primary-soft: rgba(var(--rt-primary-rgb), 0.04);
	--rtcl-primary-dark: var(--rt-primary-dark);
	--rtcl-secondary-color: var(--rt-secondary-color);
	--rtcl-link-color: var(--rt-primary-color);
	--rtcl-link-hover-color: var(--rt-secondary-color);
	--rtcl-button-bg-color: var(--rt-primary-color);
	--rtcl-button-color: #ffffff;
	--rtcl-button-hover-bg-color: var(--rt-secondary-color);
	--rtcl-badge-new-bg-color: #b20cf7;
	--rtcl-badge-featured-bg-color: #ff9642;
	--rtcl-badge-featured-color: #ffffff;
	--rtcl-badge-top-bg-color: #17a2b8;
	--rtcl-badge-top-color: #ffffff;
	--rtcl-badge-popular-bg-color: #b20cf7;
	--rtcl-badge-popular-color: #ffffff;
	--rtcl-badge-bump_up-bg-color: #5f40fb;
	--rtcl-badge-bump_up-color: #17a2b8;
}
.rtcl .rtcl-icon,
.rtcl-chat-form button.rtcl-chat-send,
.rtcl-chat-container a.rtcl-chat-card-link .rtcl-cc-content .rtcl-cc-listing-amount,
.rtcl-chat-container ul.rtcl-messages-list .rtcl-message span.read-receipt-status .rtcl-icon.rtcl-read {
	color: var(--rtcl-badge-featured-color);
}
#rtcl-chat-modal {
	background-color: var(--rtcl-primary-color);
	border-color: var(--rtcl-primary-color);
}
#rtcl-compare-btn-wrap a.rtcl-compare-btn,
.rtcl-btn,
#rtcl-compare-panel-btn,
.rtcl-chat-container ul.rtcl-messages-list .rtcl-message-wrap.own-message .rtcl-message-text,
.rtcl-sold-out {
	background: var(--rtcl-primary-color);
}
.rtcl a {
	color: var(--rtcl-link-color);
}
.rtcl a:hover {
	color: var(--rtcl-link-hover-color);
}
.rtcl .rtcl-btn {
	background-color: var(--rtcl-button-bg-color);
	border-color: var(--rtcl-button-bg-color);
	color: var(--rtcl-button-color);
}
[class*="rtcl-slider"] [class*="swiper-button-"],
.rtcl-carousel-slider [class*="swiper-button-"] {
	color: var(--rtcl-button-color);
}
.rtcl-pagination ul.page-numbers li span.page-numbers.current,
.rtcl-pagination ul.page-numbers li a.page-numbers:hover {
	background-color: var(--rtcl-button-hover-bg-color);
}
.rtcl .rtcl-btn:hover {
	background-color: var(--rtcl-button-hover-bg-color);
	border-color: var(--rtcl-button-hover-bg-color);
}

body {
	font-family: var(--rt-body-font);
	font-size: 16px;
	line-height: 30px;
	font-weight: normal;
	font-style: normal;
	color: #686868;
}
.header-menu, .header-menu .navigation-area nav {
	font-family: var(--rt-menu-font);
}
.navigation-area nav > ul > li > a {
	line-height: 20px;
	font-weight: normal;
}
.navigation-area nav.template-main-menu > ul > li > a {
	font-size: 16px;
}
.navigation-area nav > ul > li ul.sub-menu li a {
	font-size: 15px;
	line-height: 22px;
	color: #3a3a3a;
}
.rtcl h1, .rtcl h2, .rtcl h3, .rtcl h4, .rtcl h5, .rtcl h6,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--rt-heading-font);
	font-weight: 500;
	font-style: normal;
}
h1 { font-size: 32px; line-height: 42px; }
h2 { font-size: 28px; line-height: 40px; }
h3 { font-size: 22px; line-height: 32px; }
h4 { font-size: 20px; line-height: 30px; }
h5 { font-size: 18px; line-height: 28px; }
h6 { font-size: 16px; line-height: 26px; }

body {
	--rtcl-button-bg-color: var(--rt-primary-color);
	--rtcl-button-hover-bg-color: var(--rt-secondary-color);
}

a:active, .rtcl a:hover, a:hover, a:focus {
	color: var(--rt-secondary-color);
}

.header-add-property-btn .item-btn {
	background-color: var(--rt-primary-color);
}
.header-add-property-btn .item-btn::after {
	background-color: var(--rt-secondary-color);
}
.mean-container a.meanmenu-reveal span {
	background-color: var(--rt-primary-color);
}
.header-mobile-icons a.header-btn {
	background-color: var(--rt-primary-color);
}
.header-mobile-icons a.header-btn:hover {
	background-color: var(--rt-secondary-color);
}
.mean-container .mean-nav ul li a.mean-expand,
.mean-container a.meanmenu-reveal {
	color: var(--rt-primary-color);
}
.header-style-4 .header-add-property-btn .item-btn,
.header-icon-round .header-action ul li.button a,
.navigation-area nav > ul > li > a {
	color: #000000;
}
.header-icon-round .header-action ul li.button a:hover,
.navigation-area nav > ul > li ul.sub-menu li a:hover,
.header-menu .navigation-area nav ul li.current-menu-item a,
.header-menu .navigation-area nav > ul > li > a:hover {
	color: var(--rt-primary-color);
}
.header-icon-round .header-action ul li.button a i {
	color: var(--rt-primary-color);
}
.header-icon-round .header-action ul li.button a:hover .icon-round {
	background-color: var(--rt-secondary-color);
	border-color: var(--rt-secondary-color);
}
.trheader .header-icon-round .header-action ul li.button a:hover .icon-round {
	background-color: var(--rt-primary-color);
	border-color: var(--rt-primary-color);
}
.header-topbar .topbar-right .social-icon a:hover {
	color: var(--rt-primary-light);
}
.trheader .site-header::before {
	background: linear-gradient(to bottom, rgba(12, 12, 12, 0) 0%, rgba(0, 0, 0, 0) 100%);
}
.navigation-area nav > ul li.page_item_has_children > a:after,
.navigation-area nav > ul li.menu-item-has-children > a:after {
	border-color: #000000;
}

/* elementor-shapes.css (assets/css/elementor-shapes.css, enqueued en inc/enqueue.php) trae
 * las reglas reales de .elementor-shape/.elementor-shape-bottom/.elementor-shape-fill. */
.elementor-top-section,
.mpt-hero-section {
	position: relative;
}

/* Hero (antes cubierto por elementor-page-home.css via #elementor-element-014c6b6) */
.mpt-hero-section {
	background-color: #cbc8c8;
	background-image: url('assets/img/hero-banner-placeholder.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 732px;
}
.mpt-hero-section .elementor-shape-bottom svg {
	width: calc(139% + 1.3px);
	height: 500px;
}
.mpt-hero-section > .elementor-container {
	min-height: 732px;
}
@media (max-width: 992px) {
	.mpt-hero-section {
		min-height: auto;
		padding: 60px 0;
	}
	.mpt-hero-section .elementor-shape-bottom svg {
		height: 149px;
	}
}
@media (max-width: 768px) {
	.mpt-hero-section .elementor-shape-bottom svg {
		height: 0;
	}
	.section-title-wrapper {
		text-align: center;
	}
	.section-title-wrapper .main-title {
		font-size: 30px;
	}
}

/*
 * Barra mobile (#meanmenu / .mean-bar). El CSS original de styles.css solo trae el fondo
 * oscuro (.mean-bar{background:rgba(0,0,0,.8)}) pero no el layout ni el boton de hamburguesa
 * (no existen .mean-nav/.meanmenu-reveal en el CSS del theme original), asi que el layout
 * de esta barra y el panel offcanvas (activado via JS, ver assets/js/mpt-mobile-menu.js)
 * los armamos nosotros. El panel .rt-slide-nav y su acordeon de submenus (.pointer) SI
 * vienen completos en styles.css, solo faltaba activarlos.
 */
.mean-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
}
.mobile-logo a {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}
.mpt-mobile-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mpt-mobile-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.mpt-mobile-add-btn {
	background: var(--rt-primary-color);
}
.mpt-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rt-primary-color);
	color: #fff;
	cursor: pointer;
	border: none;
}

/* Overlay detras del panel offcanvas */
.mpt-offcanvas-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 99998;
}
.mpt-offcanvas-overlay.is-open {
	display: block;
}
body.mpt-noscroll {
	overflow: hidden;
}

/* Client logos gallery (widget image-gallery, ver front-page.php seccion B) */
.mpt-client-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.mpt-client-logos img {
	max-width: 140px;
	opacity: .6;
	margin: 10px 20px;
}

/* Formulario de contacto (pagina Contacto). Placeholder sin backend todavia. */
.mpt-contact-form .ff-el-group {
	margin-bottom: 20px;
}
.mpt-contact-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 8px;
	color: #212121;
}
.mpt-contact-form .form-control {
	width: 100%;
	border: 1px solid #e1e5ee;
	border-radius: 4px;
	padding: 10px 15px;
	height: 50px;
}
.mpt-contact-form textarea.form-control {
	height: auto;
}
.mpt-contact-form .rtcl-btn {
	border: none;
	padding: 12px 30px;
}

/* Formulario de newsletter (pagina Nosotros). Placeholder sin backend todavia, mismo
   criterio que .mpt-contact-form. Vive sobre fondo oscuro (#0E2E50, ver post-3941.css). */
.mpt-newsletter-form {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
.mpt-newsletter-form .form-control {
	flex: 1 1 260px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 4px;
	padding: 10px 15px;
	height: 50px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.mpt-newsletter-form .form-control::placeholder {
	color: rgba(255, 255, 255, .7);
}
.mpt-newsletter-form .rtcl-btn {
	border: none;
	padding: 12px 30px;
	flex: 0 0 auto;
}

/* Columna de tarjetas de la pagina Mapas: el bundle original (rtcl-public.min.css/styles.css)
   solo le pone padding horizontal por debajo de 1199px - a resoluciones de escritorio quedaba
   pegada al borde izquierdo/derecho. Agregamos el padding que falta a todos los anchos. */
.homlisti-listing-map-wrapper .rtcl-listings-wrapper {
	padding: 40px 30px 50px;
}

/* Orden mobile/tablet (< 992px) de la pagina Mapas: el mapa primero, las tarjetas despues -
   es lo mas importante de esta vista y antes quedaba al final, obligando a scrollear toda la
   grilla de tarjetas para llegar a el. "order:-1" alcanza sin tocar el DOM (el mapa sigue
   siendo el segundo hijo en el markup) porque flex-direction:column hace que el orden visual
   dependa solo de la propiedad "order" de cada hijo, no de su posicion real.
   flex-direction:column reemplaza al flex-wrap:wrap que traia styles.css: con wrap, "order"
   no reordena de forma confiable si el navegador decide acomodar ambos items en la misma fila
   segun su ancho: column fuerza una columna real, un hijo por fila, sin ambiguedad.
 */
@media (max-width: 991px) {
	.homlisti-listing-map-wrapper .rtcl-listings-sc-wrapper.has-map {
		flex-direction: column;
		align-items: stretch;
	}
	.homlisti-listing-map-wrapper .rtcl-listings-sc-wrapper.has-map .rtcl-search-map {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 20px;
		position: static;
		height: auto;
	}
	.homlisti-listing-map-wrapper .rtcl-listings-sc-wrapper.has-map .rtcl-listings-wrapper {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
	.homlisti-listing-map-wrapper .rtcl-listings-sc-wrapper.has-map .rtcl-search-map .rtcl-map-view {
		width: 100%;
		height: 60vh;
		min-height: 360px;
	}
}

/* Alto del thumbnail en las tarjetas de las paginas Propiedades y Mapas (vista grilla). La
   causa real de que las fotos no se vieran: .thumbnail-bg es un div vacio, solo tiene alto
   propio si algun CSS se lo da (background-image sin contenido = 0px por si solo). El bundle
   original SI le da altura, pero solo con ancestros que nosotros no tenemos: el widget de
   Elementor .rt-el-listing-wrapper (eso lo usa la Home, por eso ahi nunca fallo) o clases de
   body de un archive/CPT real (.page-template-listing-map, .archive) que no aplican porque
   estas son paginas estaticas, no un archivo real de WordPress. En vista "lista" se ve bien
   de casualidad: esa vista tiene su propia regla, mucho mas generica (.rtcl .rtcl-list-view
   .product-box .product-thumb .thumbnail-bg{height:100%}), que si matchea. */
.rtcl-grid-view .product-box .product-thumb .thumbnail-bg {
	position: relative;
	padding-top: 60%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: all 0.3s ease-in-out;
}

/* Carousel de fotos en las tarjetas de propiedad (paginas Propiedades y Mapas). A proposito
   NO se llama "listing-archive-carousel" (la clase que trae el bundle original): esa depende
   de que homlisti-main.js la inicialice, y no logramos que ande de forma confiable - lo
   inicializa nuestro propio mpt-card-gallery.js. Estas dos reglas son un espejo de las unicas
   dos que styles.css tenia atadas a esa clase vieja (altura del contenedor + no re-agrandar
   la foto al hover, ya que adentro del carousel esa animacion no combina con las flechas). */
.mpt-card-gallery {
	height: 100%;
}
.product-box:hover .product-thumb .mpt-card-gallery .thumbnail-bg {
	transform: scale(1);
}

/* Pin personalizado de los mapas (Leaflet DivIcon, ver mpt-map-marker.js): la gota clasica
   se logra rotando -45deg un cuadrado con un borde SIN redondear en una sola esquina (asi
   queda la "punta" apuntando abajo despues de rotar). assets/img/marilak_icon.png es un
   isotipo claro (casi blanco) pensado para verse sobre el fondo de color del pin, no un
   circulo blanco - por eso no le ponemos fondo propio, solo se contra-rota +45deg para que
   quede derecho. Es bien apaisado (1156x482px), asi que va con ancho fijo y alto automatico
   (nunca recortado) en vez de un recuadro cuadrado. */
.mpt-map-pin-wrap {
	background: transparent;
	border: none;
}
.mpt-map-pin {
	width: 42px;
	height: 42px;
	background: var(--rt-primary-color);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid white;
}
.mpt-map-pin img {
	width: 26px !important;
	height: auto !important;
	max-width: 26px !important;
	max-height: 26px !important;
	transform: rotate(45deg);
}

/* Tarjetas de "Propiedades relacionadas" (single de Propiedad) parejas en altura, sin
   importar si el titulo de una ocupa una linea o dos. Bootstrap ya estira las columnas
   (.row es flex con align-items:stretch por defecto), pero la tarjeta de adentro no seguia
   esa altura por si sola - el titulo mas largo empujaba el boton "Ver detalle" mas abajo. */
.related-product .product-box {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.related-product .product-box .product-content {
	flex: 1;
	display: flex;
    flex-direction: column;
}
.related-product .product-box .product-bottom-content {
	margin-top: auto;
}

.rtcl-grid-view .product-box {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.rtcl-grid-view .product-box .product-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.rtcl-grid-view .product-box .product-bottom-content {
	margin-top: auto;
}

/* Mismo criterio de tarjetas parejas que .related-product/.rtcl-grid-view de arriba, para
   las grillas de propiedades del home (front-page.php: "Propiedades destacadas" y la
   seccion de mas abajo) - el contenido varia bastante de una propiedad a otra (categoria,
   cantidad de datos en dormitorios/baños/m²), asi que sin esto el boton "Ver detalle" queda
   a distinta altura en cada tarjeta. */
.rt-el-listing-wrapper.product-grid .product-box {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.rt-el-listing-wrapper.product-grid .product-box .product-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.rt-el-listing-wrapper.product-grid .product-box .product-bottom-content {
	margin-top: auto;
}

/* Badge de venta/alquiler en el widget "Ultimos anuncios" (sidebar del single de Propiedad).
   La regla base de .listing-type-badge en styles.css viene con display:none y
   position:absolute!important por defecto (solo se activa en los contextos especificos que
   ya trae el bundle - la tarjeta grande .product-type, o el primer item del widget en modo
   "sticky"). Este widget nuestro es compacto (miniatura de 80x60), asi que en vez de
   reusar el overlay absoluto lo mostramos como una etiqueta chica arriba del titulo. */
.rtcl-widget-listing-item .item-content .listing-type-badge {
	display: inline-block;
	position: static !important;
	margin-bottom: 4px;
	padding: 2px 8px;
	font-size: 1rem;
	line-height: 1.6;
	border-radius: 2px;
}

/* Tarjeta elegida desde el mapa (ver mpt-listing-map.js: click en un marcador). */
.product-box.mpt-is-active {
	box-shadow: 0 0 0 3px var(--rt-primary-color);
}

/* Flechita para abrir/cerrar las ciudades de una provincia en el filtro "Ubicacion"
   (page-propiedades.php + mpt-filter-accordion.js). El bundle del tema ya trae la
   transicion y el layout (.rtcl-load-sub-list) para este patron "has-sub"/"sub-list", solo
   falta la rotacion al abrir. */
.rtcl-ajax-filter-data-item.has-sub.is-open > .rtcl-ajax-filter-diiWrap .rtcl-load-sub-list {
	transform: rotate(180deg);
}

/* Popup de los marcadores del mapa (pagina Mapas). Leaflet no trae look propio para el
   contenido del popup, solo el globo/flechita - el resto es nuestro. Usamos divs en bloque
   (no flex-column anidado) para que el texto se apile sin depender de que el flex interno
   se calcule bien dentro del ancho, a veces angosto, que Leaflet le da al popup. */
.mpt-map-popup {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	flex-direction: column;
    width: max-content;
    padding: 10px;
}
.mpt-map-popup img {
	width: 100%;
	height: 55px;
	object-fit: cover;
	border-radius: 4px;
	flex: 0 0 auto;
}
.mpt-map-popup-body {
	min-width: 0;
}
.mpt-map-popup-title {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	margin: 0 0 3px;
}
.mpt-map-popup-price {
	display: block;
	color: var(--rt-primary-color);
	font-weight: 600;
	font-size: 13px;
	margin: 0 0 4px;
}
.mpt-map-popup-link {
	font-size: 12px;
}

/* Video de YouTube inline (pagina property, galeria y widget "Video de la propiedad") */
.mpt-video-iframe {
	display: block;
	width: 100%;
	border: 0;
}
.product-video .item-img .mpt-video-iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Mega-menu desktop: auto-balancear en 2 columnas los links de una de las "columnas"
   intermedias del mega-menu (ej. "Por tipo"), sin importar cuantos termine teniendo -
   column-count reparte automaticamente entre las 2 sub-columnas (5 items = 3+2, 8 = 4+4,
   etc), gracias al algoritmo nativo de CSS multi-columna. Se activa agregando la clase
   "mega-menu-balance-columns" a ESE item intermedio en Apariencia > Menus > Clases CSS
   (igual que "mega-menu"/"mega-menu-col-2" en el item de arriba) - no hace falta tocar
   codigo si mañana se agregan o sacan "Tipos". Solo en desktop (min-width:992px, mismo
   breakpoint que el resto del header): en el acordeon offcanvas mobile la lista tiene que
   seguir siendo una sola columna vertical normal. */
@media (min-width: 992px) {
	.navigation-area nav li.mega-menu > ul.sub-menu > li.mega-menu-balance-columns > ul.sub-menu {
		column-count: 2;
		column-gap: 15px;
	}
	.navigation-area nav li.mega-menu > ul.sub-menu > li.mega-menu-balance-columns > ul.sub-menu > li {
		break-inside: avoid;
	}
	.navigation-area nav li.mega-menu > ul.sub-menu > li.mega-menu-balance-columns > ul.sub-menu > li > a {
		white-space: normal;
		overflow: visible;
	}
}

.select2-container--disabled{
	background-color: #f4f4f4e3;
}
.select2-container--disabled .select2-selection--single{
	background-color: #f4f4f4e3;
}
.select2-container--disabled .select2-selection--single .select2-selection__arrow b{
	display: none;
}

/*
 * Fila de "Tipos" del buscador del home (front-page.php, .listing-category-list): son
 * <a> sueltos (no radios) que van directo a /propiedades/?filter_tipo=<slug>. El icono
 * fa-arrow-right replica la animacion de .link-icon en la seccion "Grid de ubicaciones"
 * (assets/css/styles.css:8697-8730): arranca en diagonal (-45deg) y al hacer hover se
 * endereza a horizontal (0deg) mientras cambia de color - clase propia porque .link-icon
 * esta pensado para .category-browse.style2, una tarjeta distinta a esta fila sobre fondo
 * oscuro. El circulo (30x30, fondo semitransparente) ya viene de
 * .advance-search-form .search-radio li i en styles.css, aca solo agregamos la rotacion.
 */
.advance-search-form .search-radio li i.fa-arrow-right {
	transform: rotate(-45deg);
	transition: 0.4s ease-in-out;
}
.advance-search-form .search-radio li a {
	display: flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
}
.advance-search-form .search-radio li a:hover i.fa-arrow-right {
	background-color: var(--rt-primary-dark) !important;
	color: #fff !important;
	transform: rotate(0deg);
}

/*
 * Grid de ubicaciones del home ("Encontra tu zona", front-page.php seccion E). 
 */
.category-cities .item-img {
	height: 240px;
}

/*
 * Permite linkear directo a /propiedades/#ubicaciones (filtro "Ubicacion" del sidebar,
 * page-propiedades.php) y que el scroll nativo del navegador no la deje tapada debajo del
 * header fijo (.rt-sticky, ~90px de alto) - scroll-margin-top corre el punto de destino esa
 * distancia hacia abajo antes de frenar el scroll. En mobile el filtro vive en un panel
 * offcanvas oculto (position:fixed) hasta que se abre - eso lo maneja
 * assets/js/mpt-filter-panel.js, que detecta el hash y abre el panel solo.
 */
#ubicaciones {
	scroll-margin-top: 120px;
}

.elementor-2308 .elementor-element.elementor-element-a2a1a1d > .elementor-widget-container {
	margin: 0 !important;
}

/*
 * Filtros AJAX de /propiedades (ver assets/js/mpt-ajax-filters.js): mientras espera la
 * respuesta del servidor, atenua la grilla de resultados y bloquea clicks para que no se
 * puedan disparar dos pedidos pisandose (ej. tocar dos checkboxes muy rapido).
 */
#mpt-properties-results.is-loading {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s;
}
