/* Custom CSS del sitio (fuera del tema RealPress vendor).
   Antes vivía repartido entre functions.php (rk_custom_head_styles) y el
   CSS Adicional del Customizer; se consolidó acá en un único archivo.
   Toda regla custom nueva va en este archivo, no en el Customizer. */

/* === Meta de las cards de listado (dormitorios/baños/superficie) === */

/* Se oculta siempre, en toda card de listado, sin excepción de idioma ni
   tipo de propiedad. Antes esto lo decidía JS por card (mostraba en
   listados urbanos en español, ocultaba en inglés/rural) - pero las cards
   de los listados con búsqueda se cargan por AJAX después de la carga
   inicial, y el JS dependía de un MutationObserver con un freno de
   emergencia que podía cortarse antes de que esas cards llegaran a
   procesarse, dejando el bloque visible cuando no debía. Ocultarlo acá,
   siempre, con CSS, no depende de cuándo ni cómo se inserten las cards.
   Este dato (dormitorios/baños/superficie) sigue mostrándose en la página
   de detalle de la propiedad, para las que no son rurales - ver
   hideSingleSections() en rk-frontend-runtime.js. */
.realpress-property-item-meta {
	display: none !important;
}

/* === Botón de búsqueda === */

.button-submit.realpress-search {
	transition: transform 0.75s cubic-bezier(.68,-0.55,.27,1.55), background 0.15s ease, color 0.15s ease;
	transform-origin: center center;
	background: #54c239 !important;
	color: #fff !important;
	font-weight: 600;
	cursor: pointer;
}

.button-submit.realpress-search:hover {
	transform: scale(1.035);
	background: #fff !important;
	color: #000 !important;
	border: 1.5px dashed #000 !important;
	border-radius: 5px !important;
}

/* === Precio de propiedad + botón de contacto === */

.realpress-property-item-price {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.realpress-single-property-header .realpress-property-item-price {
	min-height: 44px;
}

.realpress-text-after-price {
	padding-right: 0;
	display: inline-block;
	order: 1;
}

.realpress-formated-price {
	display: inline-block;
	order: 2;
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 8px;
	row-gap: 10px;
	width: max-content;
	max-width: 100%;
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .realpress-text-after-price {
	grid-column: 1;
	grid-row: 1;
	white-space: nowrap;
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .realpress-formated-price {
	grid-column: 2;
	grid-row: 1;
	white-space: nowrap;
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button-wrap {
	display: none;
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	min-width: 210px;
	margin-top: 2px;
	justify-content: flex-end;
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: 100%;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	background: #54c239;
	color: #fff;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
	box-shadow: 0 6px 18px rgba(84,194,57,.22);
}

.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button:hover,
.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button:focus {
	background: #46ad2d;
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button-wrap {
		justify-content: flex-start;
	}

	.realpress-single-property-header .realpress-property-item-price.rk-price-with-button .rk-contact-button {
		width: 100%;
	}
}

/* === Sección y popup de contacto rural === */

.rk-rural-contact-section {
	margin-top: 32px;
	padding: 24px 20px;
	border-radius: 12px;
	background: #f5f5f5;
	scroll-margin-top: 99px;
}

.rk-rural-contact-text p {
	margin-bottom: 16px;
}

#rk-rural-cf7-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

#rk-rural-cf7-popup.is-open {
	display: flex;
}

#rk-rural-cf7-popup .rk-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
}

#rk-rural-cf7-popup .rk-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	background: #fff;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	overflow: hidden;
	animation: rkPopupIn .2s ease-out;
	font-family: inherit;
}

#rk-rural-cf7-popup .rk-modal-header {
	background: #54c239;
	color: #fff;
	padding: 16px 20px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

#rk-rural-cf7-popup .rk-modal-body {
	padding: 24px 20px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

#rk-rural-cf7-popup .rk-modal-body p {
	margin: 0 0 14px;
	text-align: center;
}

#rk-rural-cf7-popup .rk-modal-body p:last-child {
	margin-bottom: 0;
}

#rk-rural-cf7-popup .rk-modal-actions {
	padding: 0 20px 22px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

#rk-rural-cf7-popup .rk-modal-btn {
	border: 0;
	border-radius: 8px;
	padding: 11px 18px;
	font-size: 15px;
	cursor: pointer;
	min-width: 140px;
	transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}

#rk-rural-cf7-popup .rk-modal-btn:hover {
	transform: translateY(-1px);
}

#rk-rural-cf7-popup .rk-modal-btn--primary {
	background: #54c239;
	color: #fff;
}

#rk-rural-cf7-popup .rk-modal-btn--secondary {
	background: #e9e9e9;
	color: #222;
}

@keyframes rkPopupIn {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* El mensaje de éxito/error de CF7 se reemplaza por el modal propio
   (rk-rural-cf7-popup / rk-cf7-popup), así que se oculta el bloque
   default de Contact Form 7 en todos los formularios del sitio. */
.wpcf7-response-output {
	display: none !important;
}

#rk-rural-contact-section .wpcf7-not-valid-tip {
	display: block !important;
	margin-top: 6px;
	text-align: left;
	color: #c0392b;
	font-size: 13px;
	font-weight: 600;
}

#rk-rural-contact-section .wpcf7-not-valid {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 1px rgba(192,57,43,.15);
}

#rk-rural-contact-section .campo-propiedad-wrap {
	width: 100%;
	max-width: 560px;
	margin: 0 auto 25px;
}

#rk-rural-contact-section .campo-label {
	display: block;
	width: 100%;
	text-align: left;
}

#rk-rural-contact-section .campo-titulo,
#rk-rural-contact-section .campo-meta,
#rk-rural-contact-section .campo-valor-propiedad {
	text-align: left;
}

#rk-rural-contact-section input[type="text"],
#rk-rural-contact-section input[type="email"],
#rk-rural-contact-section input[type="tel"],
#rk-rural-contact-section input[type="url"],
#rk-rural-contact-section textarea,
#rk-rural-contact-section select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}

#rk-rural-contact-section .campo-meta {
	display: block;
	margin-top: 4px;
}

#rk-rural-contact-section .rk-form-actions {
	width: 100%;
	max-width: 560px;
	margin: 18px auto 0;
}

#rk-rural-contact-section .rk-captcha-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto 12px;
}

#rk-rural-contact-section .submit-centro {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#rk-rural-contact-section .submit-centro input[type="submit"] {
	display: block;
	width: 100%;
	max-width: 330px;
	min-height: 48px;
	margin: 0 auto;
}

/* === Menú principal === */

/* La sección del header del Home (logo + botón de menú mobile,
   elementor-element-86bc068) no tiene activado el "Sticky" propio de
   Elementor, así que se desplaza con el resto de la página en vez de
   quedar fija arriba como en el resto de las páginas (que usan el header
   del theme, ese sí sticky). Se deja fija acá por CSS - con
   position:sticky en vez de position:fixed no hace falta compensar el
   espacio que deja la sección al sacarla del flujo normal - en vez de
   activarlo desde el editor de Elementor, porque tocar esta sección
   puntual ahí ya rompió otras cosas antes. El z-index queda por debajo
   del panel del menú mobile (99999/999999) para que ese siga tapándola
   al abrirse, pero por encima del contenido normal de la página. */
.elementor-element-86bc068 {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
}

/* El navbar del Home usa un widget de Elementor aparte (nav-menu),
   no el header estándar del tema (.main-navigation) que arma el resto
   de las páginas vía thim_ekit/header_footer, así que no hereda la
   tipografía del menú (Poppins 20px/600) y queda con la fuente de
   cuerpo del sitio (Quicksand 18px) por defecto. Se iguala a mano. */
.elementor-widget-thim-ekits-nav-menu .navbar-main-menu > li > a,
.elementor-widget-thim-ekits-nav-menu .navbar-main-menu > li > span {
	font-family: var(--thim-font_title-font-family) !important;
	font-size: 20px !important;
	font-weight: var(--thim-main_menu_font_weight) !important;
}

#thim-ekits-menu-main-menu,
nav.width-navigation.table-cell.main-navigation {
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* === Migrado del CSS Adicional del Customizer (post 27043) === */

#back-to-top {
	position: fixed;
	top: 50%;
	right: 15px;
}

.realpress-rating,
.realpress-group-status-rating > div:last-child {
	display: none;
}

.realpress-property-review-wrap {
	display: none;
}

#realpress-property-review-form {
	display: none;
}

.realpress-breadcrumb {
	display: none !important;
}

.realpress-compare-box > .notice {
	display: none !important;
}

.realpress-property-item-meta li:empty {
	display: none;
}

.realpress-property-overview-data li div span:empty::after {
	content: "sin info";
	color: grey;
}

.realpress-detail-section li div span:empty::after {
	content: "sin info";
	color: grey;
}

.realpress-property-container > p, h1 {
	display: none !important;
}

.realpress-from-to {
	display: none !important;
}

.realpress-property-header-right .realpress-area-size {
	display: none;
}

.realpress-wishlist-title {
	display: none;
}

.realpress-similar-property-section {
	display: none;
}

.realpress-control-group {
	padding-top: 25px;
}

.main-navigation a {
	font-size: 20px !important;
	font-weight: normal;
}

.sub-menu a {
	font-size: 18px !important;
	font-weight: normal;
}

.realpress-property-description {
	font-size: 1.3em;
}

.realpress-address-name {
	font-size: 1.3em;
}

/* La flecha pulsante era un parche para que el usuario le acertara al único
   punto que respondía al tap (el ícono). Con wireMenuParentTaps()
   (rk-frontend-runtime.js) el link del ítem de menú ya despliega el submenú
   por sí solo, así que el ícono no hace falta más - se oculta del todo. */
.icon-toggle {
	display: none !important;
}

/* Angosta a la mitad de la PANTALLA tanto el panel principal (Inicio /
   Propiedades / Nosotros / Contacto) como el submenú que se despliega al
   tocar Propiedades - antes solo se había angostado el submenú.

   Ojo con esto: el submenú está anidado DENTRO del panel principal, y el
   panel principal tiene `transform` aplicado (para poder deslizarlo al
   abrir/cerrar). Cualquier elemento con `transform` pasa a comportarse
   como el "contenedor" de sus descendientes position:fixed - por eso un
   ancho en % en el submenú terminaba midiéndose contra el ANCHO DEL PANEL
   PRINCIPAL (320px) en vez de contra la pantalla real. Usando `vw` en vez
   de `%` en el ancho de los dos paneles se evita ese problema, ya que vw
   siempre es relativo al viewport sin importar el contenedor.

   El "oculto" de cada panel usa translate(-100%) (relativo a su propio
   ancho) en vez de un valor fijo en px, así no hay que recalcular esa
   transformación si el ancho (66.6667vw) se vuelve a ajustar a futuro.

   Los selectores usan el ID del contenedor (#menu-main-menu / #masthead /
   #thim-ekits-menu-main-menu) en vez de solo la clase: LiteSpeed combina
   todos los CSS del sitio en un único archivo, y en ese bundle una regla
   del vendor con igual especificidad y también !important puede terminar
   quedando después de esta - con !important empatado, gana la que aparece
   último. Subir la especificidad con el ID evita depender del orden en que
   LiteSpeed decida combinar los archivos.

   Todo esto va envuelto en el mismo @media (max-width:1024px) que usa el
   propio vendor para estas reglas - en desktop .width-navigation y
   .thim-ekits-menu__container son la barra de navegación normal, sin
   position:fixed ni transform; sin este media query, el ancho/transform de
   acá se les aplica igual y corre el header entero fuera de pantalla. */
@media (max-width: 1024px) {
	/* Con el menú abierto, el theme le sube el z-index a #wrapper-container
	   (el contenedor de todo el contenido de la página) a 99999 con su
	   propio fondo oscurecido semitransparente. #masthead - que contiene
	   el panel del menú (.width-navigation) - se queda con su z-index
	   normal (1000, o 9999 ya scrolleado con el header sticky), muy por
	   debajo de esos 99999. Como el panel vive DENTRO de #masthead, queda
	   atrapado en su nivel de apilado y termina renderándose por detrás
	   del contenido de la página - se ve el fondo oscurecido pero no el
	   panel. Subir el z-index de #masthead por encima de 99999 mientras
	   el menú está abierto lo soluciona sin importar el mecanismo exacto
	   de apilado en juego. */
	.mobile-menu-open #masthead {
		z-index: 999999 !important;
	}

	/* El "sticky" del theme para #masthead lo maneja JS (thim-custom.js),
	   agregando la clase .affix que cambia el header a position:fixed al
	   scrollear. Confirmado por inspección en vivo: con el header en ese
	   estado .affix, el panel del menú (adentro de #masthead) queda
	   renderizado por detrás del contenido de la página al abrirlo - el
	   subir el z-index de arriba no alcanzó a arreglarlo del todo. En vez
	   de seguir peleando contra ese mecanismo, se reemplaza directamente
	   por position:sticky nativo (la misma técnica que ya usamos para la
	   sección del Home) - sticky no saca al header del flujo normal como sí
	   hace fixed, así que el panel del menú (que vive adentro) nunca queda
	   atrapado en un stacking context distinto al del resto de la página,
	   en ningún estado de scroll. */
	#masthead,
	#masthead.affix,
	#masthead.affix-top {
		position: sticky !important;
		top: 0 !important;
	}

	#masthead .width-navigation {
		width: 66.6667vw !important;
		-webkit-transform: translate(-100%) !important;
		-moz-transform: translate(-100%) !important;
		-ms-transform: translate(-100%) !important;
		-o-transform: translate(-100%) !important;
		transform: translate(-100%) !important;
	}
	.mobile-menu-open #masthead .width-navigation {
		-webkit-transform: translate(0) !important;
		-moz-transform: translate(0) !important;
		-ms-transform: translate(0) !important;
		-o-transform: translate(0) !important;
		transform: translate(0) !important;
	}
	#masthead .width-navigation ul.sub-menu {
		width: 66.6667vw !important;
		-webkit-transform: translate(-100%) !important;
		-moz-transform: translate(-100%) !important;
		-ms-transform: translate(-100%) !important;
		-o-transform: translate(-100%) !important;
		transform: translate(-100%) !important;
	}
	#masthead .width-navigation ul.sub-menu.show {
		-webkit-transform: translate(0) !important;
		-moz-transform: translate(0) !important;
		-ms-transform: translate(0) !important;
		-o-transform: translate(0) !important;
		transform: translate(0) !important;
	}

	#thim-ekits-menu-main-menu.thim-ekits-menu__container {
		width: 66.6667vw !important;
		transform: translate3d(-100%, 0, 0) !important;
	}
	.thim-ekits-menu--mobile-open #thim-ekits-menu-main-menu.thim-ekits-menu__container {
		transform: none !important;
	}
	#menu-main-menu ul.sub-menu {
		width: 66.6667vw !important;
		-webkit-transform: translateX(-100%) !important;
		-moz-transform: translateX(-100%) !important;
		-ms-transform: translateX(-100%) !important;
		-o-transform: translateX(-100%) !important;
		transform: translateX(-100%) !important;
	}
	#menu-main-menu ul.sub-menu.show {
		-webkit-transform: translateX(0) !important;
		-moz-transform: translateX(0) !important;
		-ms-transform: translateX(0) !important;
		-o-transform: translateX(0) !important;
		transform: translateX(0) !important;
	}
}

/* En pantallas tipo tablet (768–1024px) el panel a 2/3 de pantalla se ve
   demasiado ancho - se angosta a 1/3 acá. Alcanza con pisar `width`: como
   el "oculto" ya usa translate(-100%) (relativo al ancho propio del
   elemento, no un valor fijo), no hace falta tocar la transformación en
   paralelo - se recalcula sola contra el nuevo ancho. En celulares más
   chicos (<768px) se sigue usando el 2/3 de siempre. */
@media (min-width: 768px) and (max-width: 1024px) {
	#masthead .width-navigation,
	#masthead .width-navigation ul.sub-menu,
	#thim-ekits-menu-main-menu.thim-ekits-menu__container,
	#menu-main-menu ul.sub-menu {
		width: 33.3333vw !important;
	}
}

.e-n-accordion-item-title {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 15px;
	box-shadow: 0 4px 30px rgba(0,0,0,0.07);
	border: 1px solid rgba(255,255,255,0.3);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(15px);
}

/* Ocultar sidebar de propiedad individual RealPress */
.realpress-single-property-sidebar {
	display: none !important;
}

/* Hacer que el contenido principal ocupe las 12 columnas */
.realpress-single-property-main-content.col-md-9 {
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

/* Botones del home (ancho fijo en desktop, unificado en mobile). */

/* Campos y Estancias / Urbanas y Suburbanas */
#goto_rural_props .thim-ekits-button a[role="button"],
#goto_urban_props .thim-ekits-button a[role="button"] {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 360px !important;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Alquilar / Comprar / Vender */
.elementor-element-93400c4 .thim-ekits-button a[role="button"],
.elementor-element-17bdc24 .thim-ekits-button a[role="button"],
.elementor-element-f03734b .thim-ekits-button a[role="button"] {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 200px !important;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Mensaje de WhatsApp / Correo Electrónico */
#btn_whatsapp,
#btn_e-mail {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 360px !important;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Achica el zoom del hover "Bounce In" propio de Elementor (animations.min.css,
   vendor) de scale(1.2) a scale(1.1) solo para estos dos botones - se
   sobreescribe acá en vez de tocar el archivo de Elementor porque esa
   clase (.elementor-animation-bounce-in) la puede estar usando cualquier
   otro botón del sitio, y no queremos afectarlos a todos. */
#btn_whatsapp:hover, #btn_whatsapp:focus, #btn_whatsapp:active,
#btn_e-mail:hover, #btn_e-mail:focus, #btn_e-mail:active {
	transform: scale(1.1) !important;
}

/* En mobile los tres grupos tenían anchos fijos distintos (280/200/260px)
   y quedaban desparejos al apilarse. Se unifican al mismo comportamiento:
   ancho completo hasta un tope común, centrados. */
@media (max-width: 767px) {
	#goto_rural_props .thim-ekits-button a[role="button"],
	#goto_urban_props .thim-ekits-button a[role="button"],
	.elementor-element-93400c4 .thim-ekits-button a[role="button"],
	.elementor-element-17bdc24 .thim-ekits-button a[role="button"],
	.elementor-element-f03734b .thim-ekits-button a[role="button"],
	#btn_whatsapp,
	#btn_e-mail {
		width: 100% !important;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Paginación de listados: "< actual/total >" en vez de la fila de
   números (que se desbordaba en mobile: 44px fijos por número, sin
   flex-wrap, en el CSS del propio plugin). Se centra en toda la fila:
   el wrapper del plugin usa space-between (resultados a la izquierda,
   paginación a la derecha), así que sin flex-wrap + width:100% acá,
   la paginación queda pegada al costado en vez de centrada. */
.realpress-pagination-wrapper {
	flex-wrap: wrap;
}

.realpress-pagination {
	width: 100%;
}

.realpress-pagination ul.realpress-pagination-compact {
	justify-content: center;
}

.realpress-pagination ul.realpress-pagination-compact li.realpress-pagination-current {
	width: auto;
	min-width: 44px;
	padding: 0 10px;
}

.realpress-pagination ul.realpress-pagination-compact li.disable {
	opacity: 0.35;
}

.realpress-pagination ul.realpress-pagination-compact li.disable .page-numbers {
	cursor: default;
	pointer-events: none;
}

/* === Switcher de idioma del navbar (ver rk-lang-switch en rk-frontend-runtime.js) === */

img.rk-lang-switch-flag {
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	vertical-align: middle;
}