/* 
 * Archive Filters CSS - Estilos para la funcionalidad de toggle
 * Version compatible con Elementor - NO interferir con layout existente
 */

/* Solo aplicar flexbox si es necesario para el toggle */
.mps-archive-layout .elementor-container {
	transition: all 0.3s ease;
}

/* Asegurar que los dropdowns de archive-filters se superpongan correctamente */
.mps-archive-layout .elementor-section,
.mps-archive-layout .elementor-container,
.mps-archive-layout .elementor-column {
	overflow: visible !important;
	z-index: auto; /* Permitir que los hijos controlen el apilamiento si es posible */
}

/* Elevar el z-index de la columna/widget que contiene los filtros de archivo */
.elementor-column:has(.mps-archive-filters__wrapper),
.elementor-widget:has(.mps-archive-filters__wrapper) {
	z-index: 1000 !important;
	position: relative;
}

/* Asegurar que el sidebar tenga menor z-index */
.elementor-column:has(.mattis-prop-filters),
.elementor-widget:has(.mattis-prop-filters) {
	z-index: 10 !important;
	position: relative;
}

/* Columnas específicas por clase - Los filtros PUEDEN ocultarse */
.mps-filters-column,
#sidebar-filters {
	transition: all 0.3s ease;
	min-width: 280px; /* Ancho mínimo para estabilidad cuando está visible */
}

.mps-grid-column,
#property-grid {
	transition: all 0.3s ease;
}

.mps-map-column,
#sidebar-maps {
	transition: all 0.3s ease;
}

/* Mapa oculto por defecto - aplicar solo a las columnas del mapa */
.mps-map-column,
#sidebar-maps {
	opacity: 0;
	visibility: hidden;
	max-width: 0;
	overflow: hidden;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Estados de visibilidad: TANTO FILTROS COMO MAPA PUEDEN OCULTARSE */

/* Los filtros SÍ se pueden ocultar ahora */
.mps-filters-column.is-hidden,
#sidebar-filters.is-hidden {
	opacity: 0 !important;
	visibility: hidden !important;
	max-width: 0 !important;
	overflow: hidden !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex: 0 0 0 !important;
	width: 0 !important;
}

/* Elementos de filtros dentro de las columnas */
.elementor-column.is-hidden .mattis-prop-filters,
.elementor-column.is-hidden .mps-property-filters,
.elementor-column.is-hidden [data-mattis-filters] {
	display: none !important;
}

/* Solo el mapa se puede ocultar */
.mps-map-column.is-hidden,
#sidebar-maps.is-hidden {
	opacity: 0 !important;
	visibility: hidden !important;
	max-width: 0 !important;
	overflow: hidden !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Estados de visibilidad: cuando el mapa ESTÁ VISIBLE */
.mps-map-column:not(.is-hidden),
#sidebar-maps:not(.is-hidden) {
	opacity: 1 !important;
	visibility: visible !important;
	max-width: none !important;
}

/* Contenedor del mapa */
#mps-map-container {
	top: 0;
	width: 100%;
	height: 600px;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}

#mps-map-container.is-hidden {
	display: none;
}

#mps-google-map {
	width: 100%;
	height: 100%;
}

/* Placeholder cuando el mapa no está cargado */
#mps-map-container:empty::before {
	content: '🗺️ Cargando mapa...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
	color: #6c757d;
	text-align: center;
}

/* Responsive - NO interferir con el layout de Elementor */
@media (max-width: 1024px) {
	.mps-map-column,
	#sidebar-maps {
		display: none !important; /* Ocultar mapa en tablets y móviles */
	}
}

@media (max-width: 768px) {
	/* Permitir que Elementor maneje el responsive naturalmente */
}

/* Mejoras para los botones en mobile */
@media (max-width: 480px) {
	.mps-archive-filters__button--map {
		display: none; /* Ocultar botón del mapa en móviles */
	}
}