/**
 * Property Filters Styles
 *
 * Custom styles for advanced property filtering system
 * Includes filter layout, loading states, animations, and responsive design
 *
 * @package Astra Child
 * @version 1.2.0
 */

/* ========================================
ASTRA THEME STYLE RESETS
Prevent Astra theme styles from interfering with filter inputs and buttons
======================================== */

/* Reset ALL Astra button styles on clear buttons */
.filtros-custom .clear-btn,
.filtros-custom .clear-precio-min,
.filtros-custom .clear-precio-max,
.filtros-custom .clear-metros-min,
.filtros-custom .clear-metros-max,
.filtros-custom .filtro-habitaciones-clear,
.filtros-custom .filtro-referencia-clear {
    /* Reset Astra's button base styles */
    all: unset;

    /* Re-apply our specific styles after reset - CRITICAL positioning properties */
    position: absolute !important; /* ⭐ CRITICAL: Must re-apply after all:unset */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 24px !important; /* ⭐ CRITICAL: Button dimensions */
    height: 24px !important; /* ⭐ CRITICAL: Button dimensions */
    padding: 0 !important; /* ⭐ CRITICAL: No padding for clean alignment */
    font-size: 20px !important; /* ⭐ CRITICAL: Ensure × symbol is visible */
    z-index: 2 !important; /* ⭐ CRITICAL: Ensure buttons appear above inputs */
    color: #7a8894 !important; /* ⭐ CRITICAL: Base color for × symbol */
    transition: all 0.2s ease !important; /* ⭐ CRITICAL: Smooth hover/scale animations */
    opacity: 0 !important; /* ⭐ CRITICAL: Hidden by default after reset */
    visibility: hidden !important; /* ⭐ CRITICAL: Not visible by default after reset */

    /* Override any Astra theme button properties */
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;

    /* Prevent Astra's hover/focus/active states */
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
}

/* Override Astra's button pseudo-elements */
.filtros-custom .clear-btn::before,
.filtros-custom .clear-btn::after,
.filtros-custom .clear-precio-min::before,
.filtros-custom .clear-precio-min::after,
.filtros-custom .clear-precio-max::before,
.filtros-custom .clear-precio-max::after,
.filtros-custom .clear-metros-min::before,
.filtros-custom .clear-metros-min::after,
.filtros-custom .clear-metros-max::before,
.filtros-custom .clear-metros-max::after,
.filtros-custom .filtro-habitaciones-clear::before,
.filtros-custom .filtro-habitaciones-clear::after,
.filtros-custom .filtro-referencia-clear::before,
.filtros-custom .filtro-referencia-clear::after {
    display: none !important;
    content: none !important;
}

/* Reset Astra input styles on filter inputs */
.filtros-custom input[type="text"],
.filtros-custom .filtro-input,
.filtros-custom .filtro-input-precio,
.filtros-custom .filtro-input-metros,
.filtros-custom .filtro-input-referencia {
    /* Reset Astra's input styles */
    box-sizing: border-box !important;

    /* Override Astra's border/shadow styles */
    box-shadow: none !important;
    outline-offset: 0 !important;

    /* Prevent Astra's focus outline */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Override Astra's focus states on inputs */
.filtros-custom input[type="text"]:focus,
.filtros-custom .filtro-input:focus,
.filtros-custom .filtro-input-precio:focus,
.filtros-custom .filtro-input-metros:focus,
.filtros-custom .filtro-input-referencia:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Reset Astra select styles */
.filtros-custom select,
.filtros-custom .filtro-select {
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Override Astra's select focus states */
.filtros-custom select:focus,
.filtros-custom .filtro-select:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Prevent Astra from adding margins/padding to wrappers */
.filtros-custom .input-with-clear,
.filtros-custom .filtro-precio-wrapper,
.filtros-custom .filtro-metros-wrapper,
.filtros-custom .filtro-habitaciones-wrapper,
.filtros-custom .filtro-referencia-wrapper {
    margin: 0 !important;
    position: relative !important; /* ⭐ CRITICAL: Ensure relative positioning for absolute children */
}

/* Override Astra's form field spacing */
.filtros-custom .filtro-item {
    margin: 0 !important;
}

/* Prevent Astra from modifying button hover states */
.filtros-custom button:hover,
.filtros-custom .clear-btn:hover,
.filtros-custom .clear-precio-min:hover,
.filtros-custom .clear-precio-max:hover,
.filtros-custom .clear-metros-min:hover,
.filtros-custom .clear-metros-max:hover {
    background-image: none !important;
    box-shadow: none !important;
}

/* Prevent Astra from modifying button active states */
.filtros-custom button:active,
.filtros-custom .clear-btn:active,
.filtros-custom .clear-precio-min:active,
.filtros-custom .clear-precio-max:active,
.filtros-custom .clear-metros-min:active,
.filtros-custom .clear-metros-max:active {
    background-image: none !important;
    box-shadow: none !important;
}

/* Override any Astra color schemes */
.filtros-custom input[type="text"],
.filtros-custom select {
    color: inherit !important;
    background-color: inherit !important;
}

/* ========================================
STICKY FILTERS CONFIGURATION
========================================

This section controls the sticky behavior of the filters container.
The filters will "stick" to the top of the viewport when scrolling down.

CONFIGURATION LOCATION:
→ Line ~172 (below): --filtros-sticky-offset: 150px;

To change the sticky distance from top:
1. Find the line with "--filtros-sticky-offset: 150px;"
2. Change the value (e.g., 100px, 200px, 250px)
3. Save the file

======================================== */

/* CSS Custom Property - CONFIGURABLE OFFSET */
/* Change this value to adjust the distance from top when sticky (default: 150px) */
:root {
    --filtros-sticky-offset: 100px;
}

/* Apply sticky behavior to filters container */
#area-filtros {
    position: sticky;
    top: var(--filtros-sticky-offset);
    z-index: 99; /* Ensures filters stay above content but below modals (1000+) and below header (100+) */
    background-color: #f8f8f8; /* Prevents content from showing through filters */
    padding-bottom: 0px; /* Visual separation from scrolling content */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Fallback for browsers without sticky support (IE11 and older) */
@supports not (position: sticky) {
    #area-filtros {
        position: relative;
        top: auto;
    }
}

/* Responsive: Disable sticky on mobile devices (optional - better UX) */
@media (max-width: 768px) {
    #area-filtros {
        position: relative; /* Disable sticky on mobile */
        top: auto;
        background-color: transparent !important;
    }
}

/* ========================================
FILTROS CUSTOM - NUEVO LAYOUT 2 FILAS x 2 COLUMNAS
======================================== */

.filtros-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Karla', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
}

/* ========================================
   FILAS (ROWS)
   ======================================== */

.filtros-row {
    display: flex;
    gap: 30px; /* Gap entre columnas: 30px */
    align-items: stretch;
}

/* ========================================
   COLUMNAS (COLUMNS)
   ======================================== */

/* Columna flexible (ocupa todo el ancho disponible) */
.filtros-col-flexible {
    flex: 1; /* Ocupa todo el espacio disponible */
    display: flex;
    gap: 15px; /* Gap entre filtros dentro de la columna */
    align-items: stretch;
}

/* Todos los filtros dentro de columna flexible tienen el mismo ancho */
.filtros-col-flexible .filtro-item {
    flex: 1; /* Distribución equitativa */
    min-width: 0; /* Permite shrink si es necesario */
}

/* Columna fija (210px) */
.filtros-col-fixed {
    width: 300px;
    flex-shrink: 0; /* No se reduce nunca */
}

/* ========================================
   FILA 1 - COLUMNA 2: BOTONES + RESET ICON
   ======================================== */

.filtros-row-1 .filtros-col-fixed {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
}

/* Grupo de botones: Aplicar + Reset Icon en horizontal */
.filtros-button-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre botón y icono */
    width: 100%;
}

/* Botón Aplicar ocupa el espacio disponible */
.filtros-button-group .filtro-apply-btn {
    flex: 1;
    min-width: 0; /* Permite shrink si es necesario */
}

/* ========================================
   FILA 2 - COLUMNA 2: REFERENCIA MINIMALISTA
   ======================================== */

/* Contenedor de referencia */
.filtro-referencia-minimalista {
    width: 100%;
}

.filtro-referencia-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.filtro-referencia-icon {
    position: absolute;
    color: #2A353F;
    pointer-events: none;
    z-index: 1;
}

.filtro-referencia-lupa {
    left: 12px;
}

/* Input de referencia MINIMALISTA (sin borde, sin sombra, solo línea bottom) */
.filtro-input-referencia {
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 8px 40px 8px 40px !important;
    width: 100% !important;
    background-color: transparent !important;
    font-size: 13px !important;
    transition: border-color 0.25s ease !important;
}

.filtro-input-referencia:hover {
    border-bottom-color: #999 !important;
    background-color: transparent !important;
}

.filtro-input-referencia:focus {
    border: none !important;
    border-bottom: 1px solid #2A353F !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

.filtro-input-referencia::placeholder {
    color: #9BA3AB;
    font-size: 12px;
    font-weight: 300;
}

/* Botón clear de referencia */
.filtro-referencia-clear {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto !important;
}

.filtro-referencia-clear.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.filtro-referencia-clear svg {
    color: #7a8894;
    display: block;
    width: 16px;
    height: 16px;
}

.filtro-referencia-clear:hover {
    background-color: rgba(42, 53, 63, 0.1);
    transform: translateY(-50%) scale(1.1) !important;
}

.filtro-referencia-clear:hover svg {
    color: #2A353F;
}

.filtro-referencia-clear:active {
    transform: translateY(-50%) scale(0.95) !important;
}

.filtro-referencia-clear:focus {
    outline: none;
    background-color: rgba(42, 53, 63, 0.15);
}

/* ========================================
   FILTRO ITEMS GENERALES
   ======================================== */

.filtro-item {
    position: relative;
}

/* SELECTS E INPUTS BASE - OUTLINED MINIMALISTA */
.filtro-select,
.filtro-input {
    width: 100%;
    padding: 5px 20px;
    border: 1px solid #E1E4E8;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    background-color: #FFFFFF !important;
    color: #2A353F;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Karla', 'Montserrat', sans-serif;
}

.filtro-select-small,
.filtro-input-small {
    padding: 5px 16px;
    font-size: 13px;
}

.filtro-input {
    cursor: text;
}

.filtro-input::placeholder {
    color: #9BA3AB;
    font-size: 13px;
    font-weight: 300;
}

/* DROPDOWN ICON */
.filtro-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232A353F' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 45px;
}

.filtro-separador {
    color: #2A353F;
    font-weight: 300;
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0.4;
}

/* HOVER STATES - Cambio de borde a azul marino */
.filtro-select:hover,
.filtro-input:hover {
    border-color: #2A353F;
    background-color: #FAFBFC;
}

/* FOCUS STATES - Borde azul marino más prominente */
.filtro-select:focus,
.filtro-input:focus {
    outline: none;
    border-color: #2A353F;
    border-width: 1.5px;
    background-color: #FFFFFF;
}

.filtro-input-referencia:focus + .filtro-referencia-icon,
.filtro-referencia-wrapper:focus-within .filtro-referencia-icon {
    color: #2A353F;
}

/* BOTÓN APLICAR - Sólido minimalista */
.filtro-apply-btn {
    width: 100%;
    padding: 12px 32px !important;
    background: #2A353F !important;
    background-color: #2A353F !important;
    color: #FFFFFF !important;
    border: 1px solid #2A353F !important;
    border-color: #2A353F !important;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Karla', 'Montserrat', sans-serif;
}

.filtro-apply-btn:hover {
    background: #1F2933 !important;
    background-color: #1F2933 !important;
    border-color: #1F2933 !important;
    color: #FFFFFF !important;
}

.filtro-apply-btn:active {
    background: #16202A !important;
    background-color: #16202A !important;
    border-color: #16202A !important;
    color: #FFFFFF !important;
    transform: scale(0.98);
}

.filtro-apply-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 53, 63, 0.2);
}

/* ========================================
   LOADING STATE FOR APPLY BUTTON
   ======================================== */

/* Loading state - disabled and grayed out */
.filtro-apply-btn.is-loading {
    background: #9BA3AB !important;
    background-color: #9BA3AB !important;
    border-color: #9BA3AB !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
}

/* Flexbox layout for spinner + text */
.filtro-apply-btn.is-loading {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Spinner SVG animation */
.button-loading-spinner {
    display: inline-block;
    animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading text styling */
.button-loading-text {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Ensure no hover effects during loading */
.filtro-apply-btn.is-loading:hover {
    background: #9BA3AB !important;
    background-color: #9BA3AB !important;
    border-color: #9BA3AB !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* Mobile adjustments for loading state */
@media (max-width: 768px) {
    .filtro-apply-btn.is-loading {
        gap: 8px !important;
    }

    .button-loading-spinner {
        width: 14px;
        height: 14px;
    }

    .button-loading-text {
        font-size: 13px;
    }
}

/* ICONO RESET (× symbol) - A la derecha del botón Aplicar */
.filtro-reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0; /* No se reduce */
    background-color: transparent;
    border: 1px solid #E1E4E8;
    border-radius: 3px;
    color: #7a8894;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0.8;
}

.filtro-reset-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: transform 0.2s ease;
}

.filtro-reset-icon:hover {
    background-color: rgba(122, 136, 148, 0.1);
    border-color: #7a8894;
    color: #2A353F;
    opacity: 1;
    transform: scale(1.05);
}

.filtro-reset-icon:hover svg {
    transform: rotate(90deg);
}

.filtro-reset-icon:active {
    background-color: rgba(122, 136, 148, 0.2);
    transform: scale(0.95);
}

.filtro-reset-icon:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 136, 148, 0.2);
}

/* Hidden state for reset icon (no filters applied) */
.filtro-reset-icon.hidden {
    display: none !important;
}

/* OPTIONS */
.filtro-select option {
    padding: 12px;
    font-size: 14px;
    color: #2A353F;
    background: #FFFFFF;
}

/* NÚMEROS - OCULTAR FLECHAS (YA NO SE USA type="number") */
/* Estilos para inputs de precio y metros */
.filtro-input-precio,
.filtro-input-metros {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
/* Símbolo del euro con color diferente (opcional) */
.filtro-input-precio {
    position: relative;
}

/* Si quieres que el € sea de color gris (opcional) */
.filtro-input-precio::after {
    /* Este approach no funciona directamente en inputs */
    /* Pero podemos usar letter-spacing para dar espacio visual */
}


/* Placeholder más visible */
.filtro-input-precio::placeholder,
.filtro-input-metros::placeholder {
    color: #9BA3AB;
    font-size: 13px;
    font-weight: 300;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .filtros-row {
        flex-direction: column;
        gap: 20px;
    }

    .filtros-col-fixed {
        width: 100%;
    }

    .filtros-col-flexible {
        flex-wrap: wrap;
    }

    /* Fila 1, Col 2: Mantener layout horizontal del grupo de botones */
    .filtros-row-1 .filtros-col-fixed {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .filtros-button-group {
        max-width: 400px;
        width: 100%;
    }
}

/* MOBILE (< 768px) */
@media (max-width: 768px) {
    .filtros-custom-mobile {
        gap: 16px;
    }

    /* Filas apiladas verticalmente */
    .filtros-custom-mobile .filtros-row {
        flex-direction: column;
        gap: 16px;
    }

    /* Columnas ocupan 100% */
    .filtros-custom-mobile .filtros-col-fixed {
        width: 100%;
    }

    /* Columna flexible: filtros apilados verticalmente */
    .filtros-custom-mobile .filtros-col-flexible {
        flex-direction: column;
        gap: 12px;
    }

    .filtros-custom-mobile .filtro-item {
        width: 100%;
    }

    /* Inputs y selects más grandes en mobile */
    .filtros-custom-mobile .filtro-select,
    .filtros-custom-mobile .filtro-input {
        padding: 12px 18px;
        font-size: 15px;
    }

    .filtros-custom-mobile .filtro-apply-btn {
        padding: 14px 32px;
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    /* Reset icon más grande en mobile para mejor toque */
    .filtros-custom-mobile .filtro-reset-icon {
        width: 44px;
        height: 44px;
        min-width: 44px; /* Touch target size mínimo recomendado */
    }

    .filtros-custom-mobile .filtro-reset-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Mantener gap adecuado en mobile */
    .filtros-custom-mobile .filtros-button-group {
        gap: 10px;
    }

    /* Referencia minimalista en mobile */
    .filtros-custom-mobile .filtro-input-referencia {
        padding: 10px 45px 10px 45px !important;
        font-size: 14px !important;
    }

    .filtros-custom-mobile .filtro-referencia-clear {
        right: 12px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .filtros-custom-mobile .filtro-referencia-clear svg {
        width: 14px;
        height: 14px;
    }
}

/* DESKTOP WIDE (>1200px) */
@media (min-width: 1200px) {
    .filtros-row {
        gap: 35px; /* Más separación entre columnas */
    }

    .filtros-col-flexible {
        gap: 18px; /* Más separación entre filtros */
    }
}

/* SUAVIDAD EN TODAS LAS TRANSICIONES */
.filtro-select,
.filtro-input,
.filtro-apply-btn {
    transition: all 0.25s ease;
}

/* DISABLED STATE */
.filtro-select:disabled,
.filtro-input:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background-color: #F5F7FA !important;
    border-color: #E1E4E8 !important;
    pointer-events: none;
}

.filtro-apply-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #F5F7FA !important;
    background-color: #F5F7FA !important;
    border-color: #E1E4E8 !important;
    color: #94A3B8 !important;
    pointer-events: none;
}



/* INDICADOR DE BÚSQUEDA EN REFERENCIA */
.filtro-referencia-wrapper {
    position: relative;
}

.filtro-referencia-wrapper.searching::after {
    content: '';
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #2A353F;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .filtros-custom-mobile .filtro-referencia-wrapper.searching::after {
        right: 50px;
    }

    .filtros-custom-mobile .filtro-referencia-wrapper.searching .filtro-input-referencia {
        padding-right: 75px !important;
    }
}

/* ========================================
LOADER AJAX - SOLO EN LISTING GRID
======================================== */

/* Contenedor del grid con posición relativa */
.jet-listing-grid {
    position: relative;
    transition: min-height 0.3s ease;
}

/* Cuando está cargando, forzar altura mínima */
.jet-listing-grid.is-loading {
    min-height: 600px; /* ⭐ Fuerza altura mínima cuando carga */
}

/* Overlay del loader (solo sobre el grid) */
.grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px !important; /* ⭐ Fixed height - prevents overlay from extending beyond viewport */
    max-height: 400px !important; /* ⭐ Safety constraint to ensure visibility */
    min-height: 300px; /* ⭐ Minimum height for consistency */
    background: rgba(255, 255, 255, 0.98); /* ⭐ Increased opacity to fully hide old content */
    backdrop-filter: blur(5px); /* ⭐ Stronger blur for cleaner look */
    -webkit-backdrop-filter: blur(5px);
    z-index: 10; /* ⭐ Above grid items but below modals */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* ⭐ Prevent content overflow for clean appearance */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.grid-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Contenedor del loader */
.grid-loader-content {
    text-align: center;
    padding: 40px;
    max-width: 300px; /* ⭐ Ensure content fits within 400px overlay */
    animation: loaderFadeIn 0.4s ease-out;
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner principal */
.grid-loader-spinner {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 24px;
}

/* Anillos del spinner */
.grid-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: gridSpinRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.grid-spinner-ring:nth-child(1) {
    border-top-color: #2A353F;
    animation-delay: -0.45s;
}

.grid-spinner-ring:nth-child(2) {
    border-top-color: rgba(42, 53, 63, 0.5);
    animation-delay: -0.3s;
}

.grid-spinner-ring:nth-child(3) {
    border-top-color: rgba(42, 53, 63, 0.25);
    animation-delay: -0.15s;
}

@keyframes gridSpinRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Texto del loader */
.grid-loader-text {
    font-family: 'Karla', 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2A353F;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.grid-loader-subtext {
    font-family: 'Karla', 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #7a8894;
    letter-spacing: 0.2px;
}

/* Puntos animados en el subtexto */
.grid-loader-subtext::after {
    content: '';
    animation: loaderDots 1.5s steps(4, end) infinite;
}

@keyframes loaderDots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

/* Variante para móvil */
@media (max-width: 768px) {
    .grid-loader-content {
        padding: 30px 20px;
    }

    .grid-loader-spinner {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .grid-loader-text {
        font-size: 15px;
    }

    .grid-loader-subtext {
        font-size: 12px;
    }

    /* ⭐ Fixed height for mobile (smaller than desktop) */
    .grid-loading-overlay {
        height: 300px !important; /* ⭐ Smaller fixed height on mobile */
        max-height: 300px !important; /* ⭐ Safety constraint */
        min-height: 250px; /* ⭐ Minimum for consistency */
    }

    /* ⭐ Adjust grid minimum height for mobile */
    .jet-listing-grid.is-loading {
        min-height: 400px; /* Smaller on mobile to prevent excessive scrolling */
    }
}

/* ========================================
HIDE GRID COMPLETELY DURING LOADING
Users should ONLY see the loader overlay, not old content
======================================== */

/* Hide grid items completely when loading (smooth fade out) */
.jet-listing-grid.is-loading .jet-listing-grid__items {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}

/* Show grid items when NOT loading (smooth fade in) */
.jet-listing-grid:not(.is-loading) .jet-listing-grid__items {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-out 0.1s; /* Delay fade-in slightly for smoother UX */
}

/* Hide "no results" message during loading */
.jet-listing-grid.is-loading .jet-listing-grid__not-found,
.jet-listing-grid.is-loading .jet-listing-not-found {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide pagination during loading */
.jet-listing-grid.is-loading .jet-listing-grid__pagination,
.jet-listing-grid.is-loading .jet-filters-pagination,
.jet-listing-grid.is-loading .custom-pagination {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ========================================
FILTROS SECUNDARIOS - FONDO GRIS
======================================== */

/* SELECT DE HABITACIONES - FILTRO SECUNDARIO */
select[name="custom-habitaciones"] {
    background-color: #F8F9FA !important; /* ⭐ Gris para filtro secundario */
}

/* INPUTS DE PRECIO - FILTROS SECUNDARIOS */
input[name="custom-precio-min"],
input[name="custom-precio-max"] {
    background-color: #F8F9FA !important; /* ⭐ Gris para filtros secundarios */
}

/* INPUTS DE METROS - FILTROS SECUNDARIOS */
input[name="custom-metros-min"],
input[name="custom-metros-max"] {
    background-color: #F8F9FA !important; /* ⭐ Gris para filtros secundarios */
}

/* Mantener borde consistente en filtros secundarios */
select[name="custom-habitaciones"],
input[name="custom-precio-min"],
input[name="custom-precio-max"],
input[name="custom-metros-min"],
input[name="custom-metros-max"] {
    border: 1px solid #DDE3E9;
}

/* Focus en filtros secundarios */
select[name="custom-habitaciones"]:focus,
input[name="custom-precio-min"]:focus,
input[name="custom-precio-max"]:focus,
input[name="custom-metros-min"]:focus,
input[name="custom-metros-max"]:focus {
    background-color: #F8F9FA; /* ⭐ Mantener gris al hacer focus */
    border-color: #2A353F;
    outline: none;
}

/* ========================================
HABITACIONES CON BOTÓN LIMPIAR
======================================== */

/* Wrapper para el select de habitaciones */
.filtro-habitaciones-wrapper {
    position: relative !important; /* ⭐ CRITICAL: Establece contexto de posicionamiento */
    width: 100% !important;
    display: inline-block !important;
}

/* Asegurar que el select dentro mantenga su ancho */
.filtro-habitaciones-wrapper .filtro-select {
    width: 100% !important;
    box-sizing: border-box !important; /* ⭐ CRITICAL: Include padding in width calculation */
}

/* Select de habitaciones con espacio para la cruz */
.filtro-select-con-clear {
    padding-right: 70px !important; /* ⭐ Espacio para cruz (30px) + flecha (40px) */
}

/* Botón de limpiar habitaciones */
.filtro-habitaciones-clear {
    position: absolute !important; /* ⭐ CRITICAL: Absolutamente posicionado dentro del wrapper */
    right: 40px !important; /* ⭐ CRITICAL: 40px desde borde derecho (antes de la flecha) */
    top: 50% !important; /* ⭐ CRITICAL: Centrado verticalmente */
    transform: translateY(-50%) !important; /* ⭐ CRITICAL: Centrado perfecto */
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Botón visible cuando hay valor */
.filtro-habitaciones-clear.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover en el botón */
.filtro-habitaciones-clear:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

/* Active (click) en el botón */
.filtro-habitaciones-clear:active {
    transform: translateY(-50%) scale(0.95);
}

/* Focus en el botón */
.filtro-habitaciones-clear:focus {
    outline: none;
    color: #2A353F;
}

/* Ajuste en mobile */
@media (max-width: 768px) {
    .filtro-select-con-clear {
        padding-right: 65px !important;
    }

    .filtro-habitaciones-clear {
        right: 36px;
        width: 22px;
        height: 22px;
    }
}

/* ========================================
PRECIO CON BOTONES LIMPIAR INDIVIDUALES
======================================== */

/* Wrapper para los inputs de precio - mantener layout horizontal */
.filtro-precio-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrapper individual para cada input con su botón clear */
.filtro-precio-wrapper .input-with-clear {
    position: relative !important; /* ⭐ CRITICAL: Establishes positioning context */
    display: block !important; /* ⭐ CRITICAL: Block (not flex) so button can overlay input */
    flex: 1; /* ⭐ Still respects parent flex layout */
}

/* Inputs dentro del wrapper mantienen 100% de ancho */
.filtro-precio-wrapper .input-with-clear input {
    width: 100% !important; /* ⭐ CRITICAL: Input fills wrapper horizontally */
    box-sizing: border-box !important; /* ⭐ CRITICAL: Include padding in width calculation */
    padding-right: 36px !important; /* ⭐ CRITICAL: Space for the × button on the right */
    display: block !important; /* ⭐ CRITICAL: Ensure block-level element */
}

/* Botones de limpiar precio individuales */
.clear-precio-min,
.clear-precio-max {
    position: absolute !important; /* ⭐ CRITICAL: Absolutely positioned within .input-with-clear */
    right: 8px !important; /* ⭐ CRITICAL: 8px from right edge (inside input border) */
    top: 50% !important; /* ⭐ CRITICAL: Vertically centered */
    transform: translateY(-50%) !important; /* ⭐ CRITICAL: Perfect vertical centering */
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important; /* ⭐ CRITICAL: No margins that could displace button */
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important; /* ⭐ CRITICAL: Above input but below overlays */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: auto !important; /* ⭐ CRITICAL: Ensure button is clickable */
}

/* Botón visible cuando hay valor */
.clear-precio-min.visible,
.clear-precio-max.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover en el botón */
.clear-precio-min:hover,
.clear-precio-max:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

/* Active (click) en el botón */
.clear-precio-min:active,
.clear-precio-max:active {
    transform: translateY(-50%) scale(0.95);
}

/* Focus en el botón */
.clear-precio-min:focus,
.clear-precio-max:focus {
    outline: none;
    color: #2A353F;
}

/* Ajuste en mobile */
@media (max-width: 768px) {
    .clear-precio-min,
    .clear-precio-max {
        right: 10px !important; /* ⭐ Slightly more room on mobile */
        width: 22px !important;
        height: 22px !important;
    }

    /* En mobile, los inputs se apilan verticalmente */
    .filtro-precio-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ========================================
METROS CON BOTONES LIMPIAR INDIVIDUALES
======================================== */

/* Wrapper para los inputs de metros - mantener layout horizontal */
.filtro-metros-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrapper individual para cada input con su botón clear */
.filtro-metros-wrapper .input-with-clear {
    position: relative !important; /* ⭐ CRITICAL: Establishes positioning context */
    display: block !important; /* ⭐ CRITICAL: Block (not flex) so button can overlay input */
    flex: 1; /* ⭐ Still respects parent flex layout */
}

/* Inputs dentro del wrapper mantienen 100% de ancho */
.filtro-metros-wrapper .input-with-clear input {
    width: 100% !important; /* ⭐ CRITICAL: Input fills wrapper horizontally */
    box-sizing: border-box !important; /* ⭐ CRITICAL: Include padding in width calculation */
    padding-right: 36px !important; /* ⭐ CRITICAL: Space for the × button on the right */
    display: block !important; /* ⭐ CRITICAL: Ensure block-level element */
}

/* Botones de limpiar metros individuales */
.clear-metros-min,
.clear-metros-max {
    position: absolute !important; /* ⭐ CRITICAL: Absolutely positioned within .input-with-clear */
    right: 8px !important; /* ⭐ CRITICAL: 8px from right edge (inside input border) */
    top: 50% !important; /* ⭐ CRITICAL: Vertically centered */
    transform: translateY(-50%) !important; /* ⭐ CRITICAL: Perfect vertical centering */
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important; /* ⭐ CRITICAL: No margins that could displace button */
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important; /* ⭐ CRITICAL: Above input but below overlays */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: auto !important; /* ⭐ CRITICAL: Ensure button is clickable */
}

/* Botón visible cuando hay valor */
.clear-metros-min.visible,
.clear-metros-max.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover en el botón */
.clear-metros-min:hover,
.clear-metros-max:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

/* Active (click) en el botón */
.clear-metros-min:active,
.clear-metros-max:active {
    transform: translateY(-50%) scale(0.95);
}

/* Focus en el botón */
.clear-metros-min:focus,
.clear-metros-max:focus {
    outline: none;
    color: #2A353F;
}

/* Ajuste en mobile */
@media (max-width: 768px) {
    .clear-metros-min,
    .clear-metros-max {
        right: 10px !important; /* ⭐ Slightly more room on mobile */
        width: 22px !important;
        height: 22px !important;
    }

    /* En mobile, los inputs se apilan verticalmente */
    .filtro-metros-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ========================================
   SELECT LOADING STATE (FOR DYNAMIC FILTER OPTIONS)
   ======================================== */

/* Select loading state - visual feedback while AJAX loads options */
.filtros-custom select.is-loading {
    background-color: #f5f5f5 !important;
    cursor: wait !important;
    opacity: 0.7 !important;
    position: relative !important;
}

/* Loading option styling (option element with emoji) */
.filtros-custom select.is-loading option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #7a8894 !important;
}

/* Spinner SVG inside select (displayed inline with option text) */
.select-loading-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
    animation: select-spin 1s linear infinite !important;
}

/* Spinner rotation animation (same as button spinner) */
@keyframes select-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Prevent select from being clicked while loading */
.filtros-custom select.is-loading:hover {
    background-color: #f5f5f5 !important;
    border-color: #E1E4E8 !important;
    cursor: wait !important;
}

/* Ensure consistent styling across browsers */
.filtros-custom select.is-loading:focus {
    background-color: #f5f5f5 !important;
    outline: none !important;
    border-color: #E1E4E8 !important;
}

/* ========================================
   REDUCE SPACING BETWEEN FILTERS AND GRID
   ======================================== */

/* Target only the Elementor container that wraps filters shortcode */
[data-id="b6399de"] .e-con-inner,
.elementor-element-b6399de .e-con-inner {
    padding-block-end: 0 !important;
}

/* ========================================
   CLEAR BUTTONS - FILTROS PRIMARIOS (TIPO, CIUDAD, ZONA)
   ======================================== */

/* Tipo de Inmueble - Clear Button */
.filtro-tipo-wrapper {
    position: relative !important; /* CRITICAL: Establece contexto de posicionamiento */
}

.filtro-tipo-clear {
    position: absolute !important; /* CRITICAL: Absolutamente posicionado dentro del wrapper */
    right: 40px !important; /* CRITICAL: 40px desde borde derecho (antes de la flecha dropdown) */
    top: 50% !important; /* CRITICAL: Centrado verticalmente */
    transform: translateY(-50%) !important; /* CRITICAL: Centrado perfecto */
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Botón visible cuando hay valor */
.filtro-tipo-clear.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover en el botón */
.filtro-tipo-clear:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

/* Active (click) en el botón */
.filtro-tipo-clear:active {
    transform: translateY(-50%) scale(0.95);
}

/* Focus en el botón */
.filtro-tipo-clear:focus {
    outline: none;
    color: #2A353F;
}

/* Ciudad - Clear Button (mismo estilo) */
.filtro-ciudad-wrapper {
    position: relative !important;
}

.filtro-ciudad-clear {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.filtro-ciudad-clear.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.filtro-ciudad-clear:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

.filtro-ciudad-clear:active {
    transform: translateY(-50%) scale(0.95);
}

.filtro-ciudad-clear:focus {
    outline: none;
    color: #2A353F;
}

/* Zona - Clear Button (mismo estilo) */
.filtro-zona-wrapper {
    position: relative !important;
}

.filtro-zona-clear {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #7a8894 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.filtro-zona-clear.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.filtro-zona-clear:hover {
    color: #2A353F;
    transform: translateY(-50%) scale(1.1);
}

.filtro-zona-clear:active {
    transform: translateY(-50%) scale(0.95);
}

.filtro-zona-clear:focus {
    outline: none;
    color: #2A353F;
}

/* Ajuste en mobile */
@media (max-width: 768px) {
    .filtro-tipo-clear,
    .filtro-ciudad-clear,
    .filtro-zona-clear {
        right: 36px !important;
        width: 22px !important;
        height: 22px !important;
    }
}

/* ============================================================================
   ZONA DISABLED STATE (sin ciudad seleccionada)
   Implementado: 2025-11-07
   ============================================================================ */

.filtros-custom select.filter-disabled {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    color: #999 !important;
    pointer-events: none !important;
}

.filtros-custom select.filter-disabled:hover {
    background-color: #f5f5f5 !important;
    border-color: #E1E4E8 !important;
    cursor: not-allowed !important;
}

.filtros-custom select.filter-disabled:focus {
    background-color: #f5f5f5 !important;
    outline: none !important;
    border-color: #E1E4E8 !important;
}

.filtros-custom select.filter-disabled option {
    color: #999 !important;
}

/* Placeholder específico para zona disabled */
.filtros-custom select.filter-disabled option[disabled][selected] {
    color: #999 !important;
    font-style: italic !important;
}

/* ========================================
FULLSCREEN LOADER (para redirecciones de página)
======================================== */

/* Loader fullscreen usado antes de redirecciones completas */
.grid-loading-overlay-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999; /* Above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-loading-overlay-fullscreen.active {
    opacity: 1;
    visibility: visible;
}

/* Reutiliza los estilos de .grid-loader-content, .grid-loader-spinner, etc. */