/**
 * FlexModifier - Estilos para Widget Nativo de FlexMLS
 * Aplica el estilo visual de FlexModifier al widget nativo de FlexMLS en Elementor
 * Version: 1.0.0
 * 
 * Desarrollado por: Branditorio Grupo Creativo
 * Lead Developer: Gabriel Medina
 */

/* ========================================
   CONTENEDOR PRINCIPAL DEL WIDGET FLEXMLS
======================================== */

/* Ocultar scroll horizontal del body y contenedores principales */
body,
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* Evitar overflow en contenedores principales */
* {
    box-sizing: border-box !important;
}

body > *,
#page,
.site-content,
.content-area,
#primary,
main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Contenedor del widget de búsqueda nativo */
.flexmls_connect__search,
.flexmls_connect__search_new,
.flexmls_connect__search_new_horizontal {
    background-color: #2c3e50 !important; /* Fondo oscuro como FlexModifier */
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    padding: 2rem 1.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important; /* Centrado vertical */
    justify-content: center !important; /* Centrado horizontal */
    min-height: auto !important;
    box-sizing: border-box !important;
    text-align: center !important; /* Centrado de contenido */
}

/* Sobrescribir estilos inline del contenedor */
.flexmls_connect__search[style*="max-width"],
.flexmls_connect__search_new[style*="max-width"],
.flexmls_connect__search_new_horizontal[style*="max-width"] {
    max-width: 100% !important;
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

.flexmls_connect__search[style*="background-color"],
.flexmls_connect__search_new[style*="background-color"],
.flexmls_connect__search_new_horizontal[style*="background-color"] {
    background-color: #2c3e50 !important;
}

.flexmls_connect__search[style*="color"],
.flexmls_connect__search_new[style*="color"],
.flexmls_connect__search_new_horizontal[style*="color"] {
    color: #ffffff !important;
}

/* Sombra del contenedor */
.flexmls_connect__search_new_shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   FORMULARIO Y CAMPOS
======================================== */

/* Formulario principal - Layout horizontal centrado y responsive */
/* Base: solo en pantallas grandes (>1200px) será nowrap, en otras será wrap */
.flexmls_connect__search form,
.flexmls_connect__search_new form,
.flexmls_connect__search_new_horizontal form {
    display: flex !important;
    flex-wrap: wrap !important; /* Permitir wrap por defecto para responsive */
    gap: 0.75rem !important;
    align-items: flex-end !important; /* Alinear todos los campos por la parte inferior (inputs) */
    justify-content: center !important; /* Centrado horizontal */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    flex-direction: row !important; /* Forzar dirección horizontal */
    align-content: center !important;
}

/* Sobrescribir estilos inline del formulario */
.flexmls_connect__search form[style],
.flexmls_connect__search_new form[style],
.flexmls_connect__search_new_horizontal form[style] {
    display: flex !important;
    flex-wrap: wrap !important; /* Permitir wrap para responsive */
    gap: 0.75rem !important;
    align-items: flex-end !important;
    justify-content: center !important;
    flex-direction: row !important;
    align-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Desktop: Layout horizontal (todos los campos en una fila) */
@media (min-width: 1201px) {
    .flexmls_connect__search form,
    .flexmls_connect__search_new form,
    .flexmls_connect__search_new_horizontal form {
        flex-wrap: nowrap !important; /* No wrap en desktop - todos en una fila */
    }
    
    .flexmls_connect__search form[style],
    .flexmls_connect__search_new form[style],
    .flexmls_connect__search_new_horizontal form[style] {
        flex-wrap: nowrap !important; /* Forzar no wrap en desktop */
    }
}

/* Título del formulario */
.flexmls_connect__search_new_title {
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
}

/* ========================================
   CAMPOS DE BÚSQUEDA
======================================== */

/* Contenedor de cada campo - Layout horizontal centrado y full width */
/* Desktop: campos con ancho flexible que se distribuyen uniformemente */
.flexmls_connect__search_field {
    flex: 1 1 auto !important; /* Crece igualmente para llenar el espacio */
    min-width: 150px !important; /* Ancho mínimo razonable */
    width: auto !important; /* Ancho automático basado en flex */
    max-width: none !important; /* Sin límite máximo */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: flex-end !important; /* Alinear contenido al final */
    overflow: hidden !important; /* Evitar que el contenido crezca el contenedor */
}

/* Sobrescribir estilos inline de los campos */
.flexmls_connect__search_field[style] {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 150px !important;
    width: auto !important;
    max-width: none !important;
}

/* Location también mantiene el mismo ancho flexible */
.flexmls_connect__search_field:first-child {
    flex: 1 1 auto !important;
    min-width: 150px !important;
    width: auto !important;
    max-width: none !important;
}

.flexmls_connect__search_field:first-child[style] {
    flex: 1 1 auto !important;
    min-width: 150px !important;
    width: auto !important;
    max-width: none !important;
}

/* Labels de los campos */
.flexmls_connect__search_field label,
.flexmls_connect__search_new_label {
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.2 !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* Inputs de texto */
.flexmls_connect__search_field input[type="text"],
.flexmls_connect__search_field input[type="number"],
.flexmls_connect__inactive_color {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #495057 !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-family: Arial, sans-serif !important;
    height: 50px !important; /* Altura fija igual a los botones dropdown */
    min-height: 50px !important;
    max-height: 50px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 100% !important; /* Full width dentro del contenedor */
    max-width: 100% !important; /* No crecer más allá del contenedor */
    min-width: 0 !important; /* Permitir que se encoja si es necesario */
}

.flexmls_connect__search_field input[type="text"]:focus,
.flexmls_connect__search_field input[type="number"]:focus,
.flexmls_connect__inactive_color:focus {
    outline: none !important;
    border-color: #1D305E !important;
    box-shadow: 0 0 0 3px rgba(29, 48, 94, 0.2) !important;
    background-color: #ffffff !important;
}

.flexmls_connect__search_field input[type="text"]::placeholder,
.flexmls_connect__search_field input[type="number"]::placeholder {
    color: #999 !important;
}

/* Select2 - Campo de Location */
.flexmlsLocationSearch.select2-hidden-accessible + .select2-container {
    width: 100% !important;
    max-width: 100% !important; /* No crecer más allá del contenedor */
    min-width: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection {
    background-color: #ffffff !important;
    border: 1px solid #495057 !important;
    border-radius: 4px !important;
    height: 50px !important; /* Altura fija igual a otros campos */
    min-height: 50px !important;
    max-height: 50px !important;
    color: #000000 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection__rendered {
    color: #000000 !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-search__field {
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection__choice {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
    color: #ffffff !important;
}

.flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection__choice__remove {
    color: #ffffff !important;
}

/* Selects normales */
.flexmls_connect__search_field select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #495057 !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-family: Arial, sans-serif !important;
    height: 50px !important; /* Altura fija igual a otros campos */
    min-height: 50px !important;
    max-height: 50px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.flexmls_connect__search_field select:focus {
    outline: none !important;
    border-color: #1D305E !important;
    box-shadow: 0 0 0 3px rgba(29, 48, 94, 0.2) !important;
}

/* ========================================
   CAMPOS MIN/MAX (Baths, Beds, Year, Sqft, Price)
   ESTILO DROPDOWN HORIZONTAL COMPACTO
======================================== */

/* Hacer que los campos min/max se comporten como elementos inline en el form */
.flexmls_connect__search_new_min_max {
    display: contents !important; /* Hace que los hijos se comporten como si estuvieran directamente en el form */
}

.flexmls_connect__search_new_min_max[style] {
    display: contents !important;
}

/* Cada campo min/max como dropdown individual - Mismo ancho flexible que los demás */
.flexmls_connect__search_new_min_max .flexmls_connect__search_field {
    position: relative !important;
    flex: 1 1 auto !important; /* Crece igualmente para llenar el espacio */
    min-width: 150px !important; /* Ancho mínimo razonable */
    width: auto !important; /* Ancho automático basado en flex */
    max-width: none !important; /* Sin límite máximo */
}

/* Ocultar los inputs individuales min/max y el "to" - se mostrarán en dropdown */
.flexmls_connect__search_new_min_max .flexmls_connect__search_field input[type="text"],
.flexmls_connect__search_new_min_max .flexmls_connect__search_field .flexmls_connect__inactive_color {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.flexmls_connect__search_new_to {
    display: none !important;
}

/* Estilizar el label como botón dropdown */
.flexmls_connect__search_new_min_max .flexmls_connect__search_new_label {
    background-color: #3d4d5c !important;
    border: 1px solid #495057 !important;
    border-radius: 0.375rem !important;
    color: #ffffff !important;
    padding: 0.875rem 2.5rem 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important; /* Altura fija igual a otros campos */
    min-height: 50px !important;
    max-height: 50px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Flecha dropdown en el label */
.flexmls_connect__search_new_min_max .flexmls_connect__search_new_label::after {
    content: '' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #ffffff !important;
    pointer-events: none !important;
}

/* Hover en el label */
.flexmls_connect__search_new_min_max .flexmls_connect__search_new_label:hover {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
}

/* Contenedor de grupos de campos */
.flexmls_connect__search_new_field_group {
    display: contents !important; /* Hace que los hijos se comporten como si estuvieran directamente en el form */
}

.flexmls_connect__search_new_field_group[style] {
    display: contents !important;
}

/* ========================================
   CHECKBOXES DE PROPERTY TYPE - DROPDOWN ESTILO FLEMODIFIER
======================================== */

.flexmls_connect__search_new_property_type {
    position: relative !important;
    flex-direction: column !important;
}

/* Estilizar el label de Property Type como botón dropdown */
.flexmls_connect__search_new_property_type .flexmls_connect__search_new_label {
    background-color: #3d4d5c !important;
    border: 1px solid #495057 !important;
    border-radius: 0.375rem !important;
    color: #ffffff !important;
    padding: 0.875rem 2.5rem 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Flecha dropdown en el label */
.flexmls_connect__search_new_property_type .flexmls_connect__search_new_label::after {
    content: '' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #ffffff !important;
    pointer-events: none !important;
}

/* Hover en el label */
.flexmls_connect__search_new_property_type .flexmls_connect__search_new_label:hover {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
}

/* Ocultar los checkboxes originales (se mostrarán en dropdown al hacer click) */
.flexmls_connect__search_new_property_type .flexmls_connect__search_new_checkboxes {
    display: none !important;
}

/* Ocultar los <br> entre checkboxes */
.flexmls_connect__search_new_property_type br {
    display: none !important;
}

.flexmls_connect__search_new_checkboxes {
    width: 1.125rem !important;
    height: 1.125rem !important;
    border: 2px solid #6c757d !important;
    border-radius: 0.25rem !important;
    background-color: #3d4d5c !important;
    cursor: pointer !important;
    margin-right: 0.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.flexmls_connect__search_new_checkboxes:checked {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
}

.flexmls_connect__search_new_checkboxes:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
}

.flexmls_connect__search_new_checkboxes + label,
.flexmls_connect__search_field label:has(+ input.flexmls_connect__search_new_checkboxes) {
    color: #ffffff !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
}

/* ========================================
   BOTÓN DE BÚSQUEDA
======================================== */

.flexmls_connect__search_new_submit,
input.flexmls_connect__search_new_submit[type="submit"],
.flexmls_connect__search_new_links input[type="submit"],
.flexmls_connect__search form input[type="submit"] {
    background: #1D305E !important;
    background-color: #1D305E !important;
    background: -moz-linear-gradient(to top, #2a4a8e 0%, #1D305E 50%, #1D305E 51%, #1D305E 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a4a8e), color-stop(50%,#1D305E), color-stop(51%,#1D305E), color-stop(100%,#1D305E)) !important;
    background: -webkit-linear-gradient(to top, #2a4a8e 0%,#1D305E 50%,#1D305E 51%,#1D305E 100%) !important;
    background: linear-gradient(to top, #2a4a8e 0%,#1D305E 50%,#1D305E 51%,#1D305E 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    height: 50px !important; /* Altura fija igual a otros campos */
    min-height: 50px !important;
    max-height: 50px !important;
    font-family: Arial, sans-serif !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important; /* Alinear con otros campos */
    margin-top: -10px !important; /* Ajuste fino para alineación perfecta */
}

/* Sobrescribir estilos inline del botón */
.flexmls_connect__search_new_submit[style*="background"],
input.flexmls_connect__search_new_submit[type="submit"][style*="background"],
.flexmodifier-blue-button {
    background: #1D305E !important;
    background-color: #1D305E !important;
    background: -moz-linear-gradient(to top, #2a4a8e 0%, #1D305E 50%, #1D305E 51%, #1D305E 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a4a8e), color-stop(50%,#1D305E), color-stop(51%,#1D305E), color-stop(100%,#1D305E)) !important;
    background: -webkit-linear-gradient(to top, #2a4a8e 0%,#1D305E 50%,#1D305E 51%,#1D305E 100%) !important;
    background: linear-gradient(to top, #2a4a8e 0%,#1D305E 50%,#1D305E 51%,#1D305E 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 1px #111 !important;
    -webkit-box-shadow: 0 1px 1px #111 !important;
    -moz-box-shadow: 0 1px 1px #111 !important;
    text-shadow: 0 1px 1px #eee !important;
}

.flexmls_connect__search_new_submit:hover,
input.flexmls_connect__search_new_submit[type="submit"]:hover {
    background: #2a4a8e !important;
    background-color: #2a4a8e !important;
    background: -moz-linear-gradient(to top, #3d5ba0 0%, #2a4a8e 50%, #2a4a8e 51%, #2a4a8e 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d5ba0), color-stop(50%,#2a4a8e), color-stop(51%,#2a4a8e), color-stop(100%,#2a4a8e)) !important;
    background: -webkit-linear-gradient(to top, #3d5ba0 0%,#2a4a8e 50%,#2a4a8e 51%,#2a4a8e 100%) !important;
    background: linear-gradient(to top, #3d5ba0 0%,#2a4a8e 50%,#2a4a8e 51%,#2a4a8e 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(29, 48, 94, 0.3) !important;
}

.flexmls_connect__search_new_submit:active,
input.flexmls_connect__search_new_submit[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.flexmls_connect__search_new_submit:focus,
input.flexmls_connect__search_new_submit[type="submit"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(29, 48, 94, 0.3) !important;
}

/* ========================================
   ENLACES Y LINKS
======================================== */

.flexmls_connect__search_new_links {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto !important; /* Puede encogerse un poco si es necesario */
    align-self: flex-end !important;
    min-width: 100px !important; /* Reducido para que quepa */
    max-width: fit-content !important;
    order: 999 !important; /* Mantener al final pero en la misma línea */
}

.flexmls_connect__search_new_links a {
    display: none !important; /* Ocultar enlace "More Search Options" */
}

/* Ocultar elementos innecesarios */
.flexmls_connect__search_new_title {
    display: none !important; /* Ocultar título vacío */
}

.flexmls_connect__link,
input.flexmls_connect__link[type="hidden"] {
    display: none !important;
}

.query {
    display: none !important;
    visibility: hidden !important;
}

/* Ocultar Property Type, Sort By y elemento del extremo derecho */
.flexmls_connect__search_new_property_type,
.flexmls_connect__search_new_sort_by {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
}

/* Forzar ocultamiento incluso con estilos inline */
.flexmls_connect__search_new_property_type[style],
.flexmls_connect__search_new_sort_by[style] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
}

/* Esta regla está duplicada - ya está definida arriba con justify-content: center */

/* Campos crecen para llenar el espacio disponible */
.flexmls_connect__search_field:not(.flexmls_connect__search_new_property_type):not(.flexmls_connect__search_new_sort_by) {
    flex: 0 0 auto !important; /* Tamaño fijo para evitar overflow */
    min-width: 140px !important;
    max-width: 100% !important;
}

/* Sobrescribir estilos inline de campos visibles */
.flexmls_connect__search_field:not(.flexmls_connect__search_new_property_type):not(.flexmls_connect__search_new_sort_by)[style] {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Location field un poco más ancho */
.flexmls_connect__search_field:first-child {
    flex: 0 0 auto !important;
    min-width: 200px !important;
    max-width: 100% !important;
}

/* Botón de búsqueda tamaño fijo - Consolidado arriba */

/* Centrar contenedor del widget en Elementor */
.elementor-widget-fmc-widget-fmcsearch .elementor-widget-container,
.elementor-element[data-widget_type="fmc-widget-fmcsearch.default"] .elementor-widget-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    flex-direction: row !important; /* Forzar horizontal */
}

/* Forzar centrado vertical del contenido */
.elementor-widget-fmc-widget-fmcsearch,
.elementor-element[data-widget_type="fmc-widget-fmcsearch.default"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    flex-direction: row !important; /* Forzar horizontal */
}

/* Sobrescribir estilos inline de Elementor */
.elementor-widget-fmc-widget-fmcsearch[style],
.elementor-element[data-widget_type="fmc-widget-fmcsearch.default"][style] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    flex-direction: row !important;
}

.elementor-widget-fmc-widget-fmcsearch .elementor-widget-container[style],
.elementor-element[data-widget_type="fmc-widget-fmcsearch.default"] .elementor-widget-container[style] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    flex-direction: row !important;
}

/* ========================================
   CAMPOS OCULTOS Y QUERY
======================================== */

.flexmls_connect__link,
input.flexmls_connect__link[type="hidden"],
.query {
    display: none !important;
}

/* ========================================
   BOTÓN DE BÚSQUEDA - AJUSTES HORIZONTALES
======================================== */

/* Consolidado arriba en .flexmls_connect__search_new_links */

.flexmls_connect__search_new_submit,
input.flexmls_connect__search_new_submit[type="submit"] {
    min-width: 120px !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* ========================================
   SORT BY - DROPDOWN ESTILO FLEMODIFIER
======================================== */

.flexmls_connect__search_new_sort_by {
    position: relative !important;
}

.flexmls_connect__search_new_sort_by select {
    background-color: #3d4d5c !important;
    color: #ffffff !important;
    border: 1px solid #495057 !important;
    border-radius: 0.375rem !important;
    padding: 0.875rem 2.5rem 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 50px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.flexmls_connect__search_new_sort_by::after {
    content: '' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #ffffff !important;
    pointer-events: none !important;
    margin-top: 0.5rem !important;
    z-index: 2 !important;
}

.flexmls_connect__search_new_sort_by select:focus {
    outline: none !important;
    border-color: #1D305E !important;
    box-shadow: 0 0 0 3px rgba(29, 48, 94, 0.2) !important;
}

.flexmls_connect__search_new_sort_by select:hover {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1024px) {
    .flexmls_connect__search form {
        flex-wrap: wrap !important; /* Permitir wrap en tablets */
    }
}

@media (max-width: 768px) {
    .flexmls_connect__search,
    .flexmls_connect__search_new {
        padding: 1rem !important;
    }
    
    .flexmls_connect__search form {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    
    /* Todos los campos full width en móvil - REGLAS ESPECÍFICAS */
    .flexmls_connect__search_field,
    .flexmls_connect__search_field[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important; /* Tamaño fijo en móvil */
    }
    
    /* Location también full width - FORZAR */
    .flexmls_connect__search_field:first-child,
    .flexmls_connect__search_field:first-child[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    /* Campos min/max también full width (Bathrooms, Year Built, etc.) - FORZAR */
    .flexmls_connect__search_new_min_max .flexmls_connect__search_field,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_field[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    /* Select2 de Location también full width - FORZAR */
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container,
    .flexmls_connect__search_field:first-child .flexmlsLocationSearch.select2-hidden-accessible + .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .flexmls_connect__search_new_min_max,
    .flexmls_connect__search_new_field_group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .flexmls_connect__search_new_to {
        display: none !important;
    }
}

/* ========================================
   SELECT2 DROPDOWN (Location Search)
======================================== */

.select2-container--default .select2-results__option {
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #1D305E !important;
    color: #ffffff !important;
}

.select2-dropdown {
    border-color: #495057 !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #495057 !important;
    color: #000000 !important;
}

/* ========================================
   PÁGINA DE RESULTADOS - LAYOUT BOXED/WIDE
======================================== */

/* Contenedor principal de resultados */
.flexmls_connect__page_content,
.flexmls_connect__search_results_v2 {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Wrapper de acciones y controles */
.flexmls-actions-wrapper,
.flexmls-title-and-login-wrapper {
    max-width: 1400px !important;
    margin: 0 auto 2rem !important;
    padding: 0 2rem !important;
}

/* Listings grid */
.flexmls-listings-list-wrapper,
.flexmls_connect__sr_listings {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* Paginación */
.flexmls_connect__sr_pagination,
.flexmls-pagination {
    max-width: 1400px !important;
    margin: 2rem auto !important;
    padding: 0 2rem !important;
}

/* Responsive para página de resultados */
@media (max-width: 1200px) {
    .flexmls_connect__page_content,
    .flexmls_connect__search_results_v2,
    .flexmls-actions-wrapper,
    .flexmls-title-and-login-wrapper,
    .flexmls-listings-list-wrapper,
    .flexmls_connect__sr_listings,
    .flexmls_connect__sr_pagination,
    .flexmls-pagination {
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Responsive - Evitar scroll horizontal */
@media (max-width: 1400px) {
    .flexmls_connect__search_field {
        flex: 0 1 auto !important;
        max-width: calc(20% - 0.6rem) !important; /* 5 columnas en pantallas grandes */
        min-width: 140px !important;
    }
    
    .flexmls_connect__search_field:first-child {
        max-width: calc(25% - 0.5625rem) !important; /* Location un poco más ancho */
    }
    
    .flexmls_connect__search_new_links {
        max-width: calc(20% - 0.6rem) !important;
        flex: 0 1 auto !important;
    }
}

@media (max-width: 1200px) {
    .flexmls_connect__search form,
    .flexmls_connect__search_new form,
    .flexmls_connect__search_new_horizontal form {
        flex-wrap: wrap !important; /* Permitir wrap en pantallas medianas */
        justify-content: center !important;
        align-items: flex-end !important; /* Mantener alineación inferior */
    }
    
    .flexmls_connect__search form[style],
    .flexmls_connect__search_new form[style],
    .flexmls_connect__search_new_horizontal form[style] {
        flex-wrap: wrap !important; /* Forzar wrap en media query */
    }
    
    .flexmls_connect__search_field {
        flex: 1 1 auto !important; /* Crece igualmente para llenar el espacio */
        min-width: 150px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .flexmls_connect__search_field:first-child {
        flex: 1 1 auto !important; /* Mismo comportamiento que los demás */
        min-width: 150px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .flexmls_connect__search_new_links {
        max-width: calc(33.333% - 0.5rem) !important;
        flex: 0 1 auto !important;
    }
    
    /* Mantener alturas fijas */
    .flexmls_connect__search_field input[type="text"],
    .flexmls_connect__search_field input[type="number"],
    .flexmls_connect__inactive_color,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_new_label,
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection,
    .flexmls_connect__search_field select,
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}

@media (max-width: 1024px) {
    .flexmls_connect__search form,
    .flexmls_connect__search_new form,
    .flexmls_connect__search_new_horizontal form {
        flex-wrap: wrap !important; /* Permitir wrap en tablets */
        justify-content: center !important;
        align-items: flex-end !important; /* Mantener alineación inferior */
    }
    
    .flexmls_connect__search form[style],
    .flexmls_connect__search_new form[style],
    .flexmls_connect__search_new_horizontal form[style] {
        flex-wrap: wrap !important; /* Forzar wrap en media query */
    }
    
    .flexmls_connect__search_field {
        flex: 1 1 auto !important; /* Crece igualmente para llenar el espacio */
        min-width: 150px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .flexmls_connect__search_field:first-child {
        flex: 1 1 auto !important; /* Mismo comportamiento que los demás */
        min-width: 150px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .flexmls_connect__search_new_links {
        max-width: calc(50% - 0.375rem) !important;
        flex: 0 1 auto !important;
        width: 100% !important; /* Botón full width en tablets */
    }
    
    /* Mantener alturas fijas en responsive */
    .flexmls_connect__search_field input[type="text"],
    .flexmls_connect__search_field input[type="number"],
    .flexmls_connect__inactive_color,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_new_label,
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection,
    .flexmls_connect__search_field select,
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
    
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        margin-top: -10px !important; /* Mantener ajuste en responsive */
    }
}

@media (max-width: 768px) {
    .flexmls_connect__search,
    .flexmls_connect__search_new,
    .flexmls_connect__search_new_horizontal {
        padding: 1.5rem 1rem !important;
    }
    
    .flexmls_connect__search form,
    .flexmls_connect__search_new form,
    .flexmls_connect__search_new_horizontal form {
        flex-direction: column !important;
        flex-wrap: nowrap !important; /* En móvil, columna sin wrap */
        align-items: stretch !important;
        gap: 1rem !important;
        justify-content: flex-start !important;
    }
    
    .flexmls_connect__search form[style],
    .flexmls_connect__search_new form[style],
    .flexmls_connect__search_new_horizontal form[style] {
        flex-direction: column !important;
        flex-wrap: nowrap !important; /* Forzar columna en móvil */
    }
    
    /* Todos los campos tienen el mismo ancho en móvil - REGLAS MUY ESPECÍFICAS */
    .flexmls_connect__search_field,
    .flexmls_connect__search_new form .flexmls_connect__search_field,
    .flexmls_connect__search form .flexmls_connect__search_field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important; /* Tamaño fijo en móvil */
    }
    
    /* Location también tiene el mismo ancho - FORZAR CON ESTILOS INLINE */
    .flexmls_connect__search_field:first-child,
    .flexmls_connect__search_new form .flexmls_connect__search_field:first-child,
    .flexmls_connect__search form .flexmls_connect__search_field:first-child,
    .flexmls_connect__search_field:first-child[style],
    .flexmls_connect__search_new form .flexmls_connect__search_field:first-child[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    /* Campos min/max también full width en móvil (Bathrooms, Year Built, etc.) - FORZAR */
    .flexmls_connect__search_new_min_max .flexmls_connect__search_field,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_field[style],
    .flexmls_connect__search form .flexmls_connect__search_new_min_max .flexmls_connect__search_field,
    .flexmls_connect__search_new form .flexmls_connect__search_new_min_max .flexmls_connect__search_field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 auto !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Asegurar que los dropdowns funcionen en móvil */
    .flexmls_connect__search_field.active,
    .flexmls_connect__search_new_property_type.active {
        overflow: visible !important;
        z-index: 9999 !important;
    }
    
    /* Select2 de Location también full width en móvil - FORZAR */
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container,
    .flexmls_connect__search_field:first-child .flexmlsLocationSearch.select2-hidden-accessible + .select2-container,
    .flexmls_connect__search_new form .flexmls_connect__search_field:first-child .flexmlsLocationSearch.select2-hidden-accessible + .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection,
    .flexmls_connect__search_field:first-child .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .flexmls_connect__search_new_links {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        order: 999 !important; /* Botón al final */
    }
    
    /* Mantener alturas fijas en móvil */
    .flexmls_connect__search_field input[type="text"],
    .flexmls_connect__search_field input[type="number"],
    .flexmls_connect__inactive_color,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_new_label,
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection,
    .flexmls_connect__search_field select,
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
    
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        margin-top: 0 !important; /* Sin ajuste en móvil */
        width: 100% !important;
    }
    
    /* Ajustar dropdowns en móviles */
    .flexmodifier-dropdown-content {
        min-width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
        left: 0 !important;
        transform: none !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
    
    .flexmls_connect__search_new_min_max .flexmls_connect__search_field .flexmodifier-dropdown-content,
    .flexmls_connect__search_new_property_type .flexmodifier-dropdown-content {
        left: 0 !important;
        transform: none !important;
        right: 0 !important;
    }
}

/* Media query adicional para móviles pequeños */
@media (max-width: 480px) {
    .flexmls_connect__search,
    .flexmls_connect__search_new,
    .flexmls_connect__search_new_horizontal {
        padding: 1rem 0.75rem !important;
    }
    
    .flexmls_connect__search form,
    .flexmls_connect__search_new form,
    .flexmls_connect__search_new_horizontal form {
        gap: 0.875rem !important;
    }
    
    .flexmls_connect__search_field label,
    .flexmls_connect__search_new_label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    .flexmls_connect__search_field input[type="text"],
    .flexmls_connect__search_field input[type="number"],
    .flexmls_connect__inactive_color,
    .flexmls_connect__search_new_min_max .flexmls_connect__search_new_label,
    .flexmlsLocationSearch.select2-hidden-accessible + .select2-container .select2-selection,
    .flexmls_connect__search_field select,
    .flexmls_connect__search_new_submit,
    input.flexmls_connect__search_new_submit[type="submit"] {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Ajustar dropdowns en móviles pequeños */
    .flexmodifier-dropdown-content {
        min-width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        left: 0 !important;
        transform: none !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   DROPDOWNS CREADOS POR JAVASCRIPT
======================================== */

/* Asegurar que los campos tengan position relative para los dropdowns */
.flexmls_connect__search_new_min_max .flexmls_connect__search_field {
    position: relative !important;
    overflow: visible !important;
}

/* Asegurar que los contenedores no corten los dropdowns */
.flexmls_connect__search,
.flexmls_connect__search_new,
.flexmls_connect__search_new_horizontal,
.flexmls_connect__search form,
.flexmls_connect__search_new form,
.flexmls_connect__search_new_horizontal form {
    overflow: visible !important;
}

/* Asegurar que los campos activos permitan que los dropdowns se muestren */
.flexmls_connect__search_field.active,
.flexmls_connect__search_new_property_type.active {
    overflow: visible !important;
    z-index: 9999 !important;
}

/* Contenedor de dropdown content */
.flexmodifier-dropdown-content {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 280px !important;
    width: max-content !important;
    max-width: 400px !important;
    background: #2c3e50 !important;
    border: 2px solid #495057 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10000 !important;
    padding: 1.25rem !important;
    animation: dropdownSlide 0.3s ease !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    pointer-events: all !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Para Property Type, centrar mejor */
.flexmls_connect__search_new_property_type {
    position: relative !important;
}

.flexmls_connect__search_new_property_type .flexmodifier-dropdown-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* Para campos min/max, también centrar - Ya está definido arriba con flex completo */

.flexmls_connect__search_new_min_max .flexmls_connect__search_field .flexmodifier-dropdown-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* Mostrar dropdown cuando está activo */
.flexmls_connect__search_field.active .flexmodifier-dropdown-content,
.flexmls_connect__search_new_property_type.active .flexmodifier-dropdown-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
}

/* Opciones simples (para Bedrooms, Bathrooms, etc.) */
.flexmodifier-dropdown-content .simple-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.flexmodifier-dropdown-content .option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
}

.flexmodifier-dropdown-content .option-item:hover {
    background: #1D305E;
    border-color: #1D305E;
}

.flexmodifier-dropdown-content .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;
}

.flexmodifier-dropdown-content .option-radio:checked {
    background: #1D305E;
    border-color: #1D305E;
    box-shadow: 0 0 0 2px rgba(29, 48, 94, 0.2);
}

.flexmodifier-dropdown-content .option-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

.flexmodifier-dropdown-content .option-item span {
    font-size: 0.9375rem;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    flex: 1;
    cursor: inherit;
    user-select: none;
}

/* Items de tipos de propiedad */
.flexmodifier-dropdown-content .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;
}

.flexmodifier-dropdown-content .types-item:last-child {
    border-bottom: none;
}

.flexmodifier-dropdown-content .types-item:hover {
    background: #1D305E;
}

.flexmodifier-dropdown-content .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;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.flexmodifier-dropdown-content .types-item-checkbox:checked {
    background: #1D305E;
    border-color: #1D305E;
    box-shadow: 0 0 0 2px rgba(29, 48, 94, 0.2);
}

.flexmodifier-dropdown-content .types-item-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: bold;
}

.flexmodifier-dropdown-content .types-item label {
    font-size: 0.9375rem;
    color: #ffffff;
    cursor: pointer;
    flex: 1;
    line-height: 1.4;
}

/* Animación de dropdown */
@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Indicador visual cuando el dropdown está activo */
.flexmls_connect__search_field.active .flexmls_connect__search_new_label,
.flexmls_connect__search_new_property_type.active .flexmls_connect__search_new_label {
    background-color: #1D305E !important;
    border-color: #1D305E !important;
}

.flexmls_connect__search_field.active .flexmls_connect__search_new_label::after,
.flexmls_connect__search_new_property_type.active .flexmls_connect__search_new_label::after {
    transform: translateY(-50%) rotate(180deg) !important;
}