/**
 * FlexModifier - Advanced Search Bar Styles
 * Barra de búsqueda avanzada con filtros múltiples
 * Version: 1.1.2
 * 
 * Desarrollado por: Branditorio Grupo Creativo
 * Lead Developer: Gabriel Medina
 * Website: https://branditorio.com.mx/
 */

/* ========================================
   SOBRESCRIBIR ESTILOS GLOBALES DEL TEMA
======================================== */

/* Asegurar que NINGÚN botón dentro del formulario tenga estilos rosa del tema */
.flexmodifier-search-wrapper button,
.flexmodifier-search-wrapper [type="button"],
.flexmodifier-search-wrapper [type="submit"],
.flexmodifier-search-form button,
.flexmodifier-search-form [type="button"],
.flexmodifier-search-form [type="submit"] {
    border-color: transparent !important;
    color: inherit !important;
    background-color: transparent !important;
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */

.flexmodifier-search-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #2c3e50; /* Fondo oscuro full width */
}

.flexmodifier-search-form {
    background: transparent; /* Transparent - background comes from parent section */
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
    width: 100%;
}

/* ========================================
   SEARCH CONTAINER - HORIZONTAL EN DESKTOP
======================================== */

.search-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center; /* ✅ Centrado horizontal */
    width: auto; /* ✅ Ancho automático en lugar de 100% */
    max-width: 100%; /* ✅ No exceder el contenedor */
    margin: 0 auto; /* ✅ Centrar horizontalmente */
    padding: 2rem 1.5rem;
    background: transparent; /* Transparent - el wrapper tiene el fondo */
    border-radius: 0;
    box-shadow: none;
    min-height: 90px;
}

#searchbuttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    flex: 0 1 auto; /* ✅ No crece, se ajusta al contenido */
    align-items: center;
}

/* ========================================
   INPUT WRAPPERS - AJUSTADOS PARA HORIZONTAL
======================================== */

.search-input-wrapper {
    position: relative;
    flex: 0 0 auto; /* ✅ No crece, tamaño fijo */
    min-width: 140px; /* ✅ Ancho mínimo más generoso */
    width: 160px; /* ✅ Ancho base para dropdowns */
    display: flex;
    align-items: stretch;
}

.search-input-wrapper:first-child {
    width: 220px; /* ✅ Input de búsqueda más ancho */
    min-width: 200px;
}

.search-submit-wrapper {
    flex: 0 0 auto;
    width: 120px; /* ✅ Ancho fijo para botón */
    min-width: 120px;
}

/* ========================================
   INPUTS Y SELECTS - BASE STYLES
======================================== */

/* INPUT DE TEXTO (Name, keyword...) */
.search-input {
    width: 100%;
    height: 100%;
    min-height: 50px; /* ✅ Altura aumentada */
    padding: 0.875rem 1rem;
    border: 1px solid #495057;
    border-radius: 0.375rem;
    font-size: 0.9375rem; /* ✅ Fuente ligeramente más grande */
    font-weight: 400;
    color: #1a1a1a !important; /* ✅ TEXTO NEGRO */
    background-color: #ffffff; /* ✅ FONDO BLANCO */
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: #1D305E; /* ✅ Borde azul oscuro en focus */
    box-shadow: 0 0 0 3px rgba(29, 48, 94, 0.1);
    background-color: #ffffff;
    color: #1a1a1a !important;
}

.search-input::placeholder {
    color: #6b7280; /* ✅ Placeholder gris oscuro */
}

/* BOTONES DROPDOWN - SOBRESCRIBIR ESTILOS DEL TEMA */
.dropdown-btn,
button.dropdown-btn,
.dropdown-btn[type="button"] {
    width: 100%;
    height: 100%;
    min-height: 50px;
    padding: 0.875rem 2.5rem 0.875rem 1rem !important;
    border: 1px solid #495057 !important; /* ✅ Sobrescribe el borde rosa del tema */
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #ffffff !important; /* ✅ Sobrescribe el color rosa del tema */
    background-color: #3d4d5c !important; /* ✅ Sobrescribe el fondo transparente del tema */
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
}

.dropdown-btn:focus,
button.dropdown-btn:focus,
.dropdown-btn[type="button"]:focus {
    outline: none !important;
    border-color: #6c757d !important;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.1) !important;
    background-color: #495057 !important;
    color: #ffffff !important;
}

/* ========================================
   DROPDOWNS
======================================== */

.dropdown {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Botones dropdown - FLECHA A LA DERECHA */
.dropdown-btn {
    text-align: left;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 1rem center; /* ✅ Posición fija a la derecha */
    background-size: 0.875rem; /* ✅ Tamaño consistente */
}

/* Hover state - SOBRESCRIBIR ESTILOS DEL TEMA */
.dropdown-btn:hover,
button.dropdown-btn:hover,
.dropdown-btn[type="button"]:hover {
    border-color: #1D305E !important; /* ✅ NO rosa del tema */
    background-color: #1D305E !important;
    color: #ffffff !important; /* ✅ NO rosa del tema */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
    background-position: right 1rem center;
}

/* Flecha invertida cuando el dropdown está abierto - SOBRESCRIBIR ESTILOS DEL TEMA */
.dropdown-btn.active,
button.dropdown-btn.active,
.dropdown-btn[type="button"].active {
    border-color: #1D305E !important;
    background-color: #1D305E !important;
    color: #ffffff !important; /* ✅ NO rosa del tema */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 15 12 9 18 15"%3e%3c/polyline%3e%3c/svg%3e');
    background-position: right 1rem center;
}

/* ========================================
   DROPDOWN CONTENT - SIN RECORTES
======================================== */

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: auto;
    min-width: 280px;
    width: max-content;
    max-width: 400px;
    background: #2c3e50;
    border: 2px solid #495057;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    padding: 1.25rem;
    animation: dropdownSlide 0.3s ease;
    box-sizing: border-box;
    word-wrap: break-word;
    pointer-events: all !important;
}

.dropdown-content * {
    pointer-events: all !important;
}

.dropdown-content.show {
    display: block;
}

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

/* ========================================
   BOTONES DE CONTROL
======================================== */

/* BOTÓN UNSELECT ALL - SOBRESCRIBIR ESTILOS DEL TEMA */
.unselect-all-btn,
button.unselect-all-btn,
.unselect-all-btn[type="button"] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem !important;
    background: #495057 !important; /* ✅ NO rosa del tema */
    background-color: #495057 !important;
    border: 1px solid #6c757d !important;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff !important; /* ✅ NO rosa del tema */
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.unselect-all-btn:hover,
button.unselect-all-btn:hover,
.unselect-all-btn[type="button"]:hover {
    background: #1D305E !important; /* ✅ NO rosa del tema */
    background-color: #1D305E !important;
    color: #ffffff !important;
    border-color: #1D305E !important;
}

.unselect-all-btn:focus,
button.unselect-all-btn:focus,
.unselect-all-btn[type="button"]:focus {
    background: #495057 !important;
    background-color: #495057 !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
    outline: none !important;
}

.selected-count {
    font-size: 0.875rem;
    color: #ffffff;
    text-align: center;
    padding: 0.75rem;
    background: #1a252f;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-weight: 600;
    border: 1px solid #495057;
}

/* ========================================
   LISTA SIMPLE DE UBICACIONES (SIN CATEGORÍAS)
======================================== */

.simple-locations-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.simple-location-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    margin: 0;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.15s ease;
    position: relative;
}

.simple-location-item:hover {
    background: rgba(29, 48, 94, 0.3);
}

/* Mantener compatibilidad con código viejo */
.locations-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
    position: relative;
    z-index: 1;
}

.item:hover {
    background: rgba(29, 48, 94, 0.3);
}

.item-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    border: 2px solid #6c757d;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #3d4d5c;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    pointer-events: all !important;
}

.item-checkbox:hover {
    border-color: #1D305E;
    background: #4a5a6c;
}

.item-checkbox:checked {
    background: #1D305E;
    border-color: #1D305E;
    box-shadow: 0 0 0 2px rgba(29, 48, 94, 0.2);
}

.item-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: bold;
}

.item-label {
    display: block;
    padding: 0 0 0 0.75rem;
    flex: 1;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #ffffff;
    line-height: 1.4;
    user-select: none;
    pointer-events: all !important;
}

.item-checkbox:checked + .item-label {
    color: #ffffff;
    font-weight: 600;
}

/* ========================================
   TIPOS DE PROPIEDAD
======================================== */

.types-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #495057;
    transition: all 0.2s ease;
}

.types-item:last-child {
    border-bottom: none;
}

.types-item:hover {
    background: #1D305E; /* ✅ Azul oscuro en hover */
}

.types-item-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #6c757d;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #3d4d5c;
    flex-shrink: 0;
}

.types-item-checkbox:checked {
    background: #1D305E; /* ✅ Azul oscuro cuando está checked */
    border-color: #1D305E;
    box-shadow: 0 0 0 2px rgba(29, 48, 94, 0.2);
}

.types-item label {
    font-size: 0.9375rem;
    color: #ffffff;
    cursor: pointer;
    flex: 1;
    line-height: 1.4;
}

.types-item-checkbox:checked + label {
    color: #ffffff;
    font-weight: 600;
}

/* ========================================
   OPCIONES SIMPLES (Bedrooms & Bathrooms)
======================================== */

.simple-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer; /* ✅ Solo aquí el cursor pointer */
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}

.option-item:hover {
    background: #1D305E; /* ✅ Azul oscuro en hover */
    border-color: #1D305E;
}

.option-radio {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #6c757d;
    border-radius: 50%;
    cursor: inherit;
    transition: all 0.2s ease;
    background: #3d4d5c;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.option-radio:checked {
    background: #1D305E; /* ✅ Azul oscuro cuando está checked */
    border-color: #1D305E;
    box-shadow: 0 0 0 2px rgba(29, 48, 94, 0.2);
}

/* Punto interior del radio button */
.option-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

.option-item span {
    font-size: 0.9375rem;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    flex: 1;
    cursor: inherit; /* ✅ Hereda el cursor del padre */
    user-select: none; /* ✅ Evita selección de texto */
}

.option-radio:checked + span {
    color: #ffffff;
    font-weight: 600;
}

/* ========================================
   BOTONES DE ACCIÓN
======================================== */

/* BOTÓN SEARCH - SOBRESCRIBIR ESTILOS DEL TEMA */
.search-submit-btn,
button.search-submit-btn,
.search-submit-btn[type="submit"] {
    padding: 0.875rem 2.5rem !important;
    background: #1D305E !important; /* ✅ NO rosa del tema */
    background-color: #1D305E !important;
    color: #ffffff !important; /* ✅ NO rosa del tema */
    border: none !important; /* ✅ NO borde rosa del tema */
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    height: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit-btn:hover,
button.search-submit-btn:hover,
.search-submit-btn[type="submit"]:hover {
    background: #2a4a8e !important; /* ✅ NO rosa del tema */
    background-color: #2a4a8e !important;
    color: #ffffff !important;
    border: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 48, 94, 0.3);
}

.search-submit-btn:active,
button.search-submit-btn:active,
.search-submit-btn[type="submit"]:active {
    background: #1D305E !important;
    background-color: #1D305E !important;
    color: #ffffff !important;
    border: none !important;
    transform: translateY(0);
}

.search-submit-btn:focus,
button.search-submit-btn:focus,
.search-submit-btn[type="submit"]:focus {
    background: #1D305E !important;
    background-color: #1D305E !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
}

/* Botón "Más Filtros" - REMOVIDO del HTML por solicitud del usuario */
.advanced-filters-btn {
    display: none !important; /* Botón eliminado - sin funcionalidad */
}

/* ========================================
   CONTENEDOR DE RESULTADOS
======================================== */

.flexmodifier-results {
    margin-top: 2rem;
    min-height: 400px;
}

.flexmodifier-results .no-results {
    text-align: center;
    padding: 4rem 2rem;
    font-size: 1.125rem;
    color: #6b7280;
}

.flexmodifier-results .loading {
    text-align: center;
    padding: 4rem 2rem;
    font-size: 1.125rem;
    color: #1D305E;
}

.flexmodifier-results .loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

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

/* ========================================
   SELECT DISABLED OPTIONS Y MEJORAS
======================================== */

.dropdowndisabledline {
    color: #6c757d;
    font-size: 0.625rem;
    user-select: none;
    background: #2c3e50;
    padding: 0.25rem 0.5rem;
}

/* Estilos obsoletos de selects eliminados - ahora todo son dropdowns */

/* ========================================
   COLORES PERSONALIZADOS
======================================== */

.bg-main-blue {
    background-color: #1D305E !important;
}

.text-main-yellow {
    color: #FDB913 !important;
}

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

/* Desktop - Layout horizontal por defecto */
@media (min-width: 1025px) {
    .search-container {
        flex-wrap: nowrap;
    }
    
    #searchbuttons {
        flex-wrap: nowrap;
    }
    
    .search-input-wrapper {
        flex: 1;
        min-width: 0;
    }
    
    /* Ajustar ancho de botones de acción */
    .search-input-wrapper:has(.search-submit-btn),
    .search-input-wrapper:has(.advanced-filters-btn) {
        flex: 0 0 auto;
        min-width: auto;
    }
}

/* Tablet - Semi horizontal */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-container {
        flex-wrap: wrap;
        padding: 1.25rem;
        width: auto; /* ✅ Mantener centrado */
        justify-content: center;
    }
    
    #searchbuttons {
        flex-wrap: wrap;
        justify-content: center; /* ✅ Centrar elementos */
    }
    
    .search-input-wrapper {
        flex: 0 0 auto;
        width: 180px; /* ✅ Ancho fijo más generoso en tablet */
        min-width: 160px;
    }
    
    .search-input-wrapper:first-child {
        width: 100%; /* ✅ Input de búsqueda full width en tablet */
        margin-bottom: 0.5rem;
    }
    
    .search-submit-wrapper {
        width: 140px; /* ✅ Botón un poco más ancho en tablet */
    }
}

/* ========================================
   CAMPOS DE PRECIO Y ÁREA
======================================== */

.price-input-field,
.area-input-field {
    font-size: 0.9375rem !important;
}

.price-input-field:focus,
.area-input-field:focus {
    outline: none;
    border-color: #1D305E !important;
}

.price-inputs label,
.area-inputs label {
    font-weight: 500;
}

/* Mobile - Layout VERTICAL */
@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1.5rem 1rem;
        border-radius: 0.375rem;
        min-height: auto;
        width: 100%; /* ✅ Full width en móvil */
        margin: 0; /* ✅ Sin márgenes en móvil */
    }
    
    #searchbuttons {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
        align-items: stretch;
        flex: 1; /* ✅ Ocupa todo el ancho disponible */
    }
    
    .search-input-wrapper,
    .search-submit-wrapper {
        width: 100% !important; /* ✅ Full width en móvil */
        min-width: 100%;
        flex: none;
    }
    
    .dropdown-content {
        max-height: 300px;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
    }
    
    .search-submit-btn {
        width: 100%;
        min-height: 50px;
    }
    
    .search-input,
    .dropdown-btn {
        width: 100%;
        min-height: 50px;
        font-size: 0.9375rem;
    }
}

/* ========================================
   SCROLLBAR PERSONALIZADA
======================================== */

.dropdown-content::-webkit-scrollbar {
    width: 10px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #1a252f;
    border-radius: 5px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 5px;
    border: 2px solid #1a252f;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* Scrollbar para Firefox */
.dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: #495057 #1a252f;
}

/* ========================================
   ANIMACIONES ADICIONALES
======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.flexmodifier-results > * {
    animation: fadeIn 0.5s ease;
}

/* ========================================
   ESTADOS DE CARGA
======================================== */

.flexmodifier-search-form.loading {
    pointer-events: none;
    opacity: 0.6;
}

.flexmodifier-search-form.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #1D305E;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========================================
   DARK MODE (opcional)
======================================== */

@media (prefers-color-scheme: dark) {
    .flexmodifier-search-form {
        background: #1f2937;
        border-color: #374151;
    }
    
    .search-input,
    .w-select,
    .dropdown-btn,
    .dropdown-types-btn {
        background: #374151;
        color: #f3f4f6;
        border-color: #4b5563;
    }
    
    .dropdown-content,
    .dropdown-types-content {
        background: #374151;
        border-color: #4b5563;
    }
    
    .item-label {
        color: #e5e7eb;
    }
    
    .item-label:hover {
        background: #4b5563;
    }
}