.wpf-search-form { display: flex; flex-wrap: wrap; align-items: center; background: #fff; border-radius: 10px; box-shadow:0 2px 8px rgba(0,0,0,0.1); padding:15px 20px; gap:10px; max-width:96%; margin:0 auto; }
.wpf-search-form input{position:relative}
.wpf-search-form>div:first-child{ border-left: 0}
.wpf-search-form>div{display: flex; flex: 1; border-left: 1px solid #EAEAEA; padding: 0 10px;}    
.wpf-search-form input[type='text'], .wpf-search-form select { border:none; outline:none; padding:10px 12px; font-size:14px; border-radius:20px;  transition:background 0.2s; flex:1; }
.wpf-search-form input::placeholder { color:#999; }
.wpf-search-form input:focus, .wpf-search-form select:focus { background:#fff; }
.wpf-search-form .btn-search { background:#1fb8b3; border:none; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; }
.wpf-search-form .btn-search:hover { background:#BD632F; }
.wpf-search-form .btn-search:active { background:#009f78; }
.wpf-search-form .btn-search svg { width:20px; height:20px; fill:#fff; }
.wpf-search-error { color:#c0392b; font-size:13px; margin-top:4px; display:none; width:100%; text-align:center; }
.ui-datepicker { z-index:10000!important; }

/* Contenedor */
.custom-dropdown {
    position: relative;
    flex: 1;
    max-width: 180px;
}
.dropdown-toggle::after{
    display: none; /* Elimina el triángulo por defecto */
}
/* Botón principal */
.custom-dropdown .dropdown-toggle {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}
.custom-dropdown .dropdown-toggle:hover {
    background: #fff;
}
/* Flecha */
.custom-dropdown .dropdown-toggle .arrow {
    /* elimina transform/rotate previos */
    transform: none;
    /* crea un triángulo apuntando hacia abajo */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999;
    /* posiciona correctamente */
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -3px; /* la mitad de la altura del triángulo */
}
/* Lista oculta por defecto */
.custom-dropdown .dropdown-list {
    display: none;
    position: absolute;
    white-space: nowrap;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
    box-sizing: border-box;
    z-index: 1000;
    padding: 4px 0;
}
/* Ítems */
.custom-dropdown .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
}
.custom-dropdown .dropdown-item + .dropdown-item {
    border-top: 1px solid #f0f0f0;
}
.custom-dropdown .dropdown-item:hover {
    background: #f9f9f9;
    color: #1fb8b3;
}
.custom-dropdown .dropdown-item.selected {
    color: #00cba2;
}

/* Estilos para el dropdown de Autocomplete */
.ui-autocomplete {
    max-height: 240px;            /* controla alto y activa scroll */
    overflow-y: auto;             /* solo scroll vertical */
    overflow-x: hidden;           /* quita scroll horizontal */
    padding: 0;
    margin: 4px 0 0 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
    list-style: none;
}

/* Cada item de la lista */
.ui-menu-item {
    margin: 0;
    padding: 0;
}
#wp_categories, .custom-dropdown .dropdown-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    /* En Edge/IE */
#wp_categories::-ms-expand {
    display: none;
}

/* Anular el fondo azul “activo” de jQuery UI */
.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-focus {
    background: transparent !important;
}

/* Hover normal sigue siendo gris claro */
.ui-menu .ui-menu-item-wrapper:hover {
    background: #f9f9f9 !important;
}
.ui-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2) Asegurar que el icono (emoji o SVG) se pinte de negro */
.ui-menu .ui-menu-item-wrapper .icon-marker {
    color: #000 !important;    /* si usas emoji 📍 */
    fill: #000 !important;     /* si alguna vez vuelves al SVG */
}
/* Hover: fondo teal y texto blanco */
.ui-menu .ui-menu-item-wrapper:hover {
    color: #1fb8b3 !important;
}
.ui-menu .ui-menu-item-wrapper:hover .menu-city,
.ui-menu .ui-menu-item-wrapper:hover .menu-sub,
.ui-menu .ui-menu-item-wrapper:hover .icon-marker {
    color: #1fb8b3 !important;
    fill:  #1fb8b3 !important;
}
/* Contenedor interno de cada item */
.ui-menu-item-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    cursor: pointer;
    white-space: normal;          /* permite que el texto se vaya a la siguiente línea */
}

/* Hover en item */
.ui-menu-item-wrapper:hover {
    background-color: #f9f9f9;
    color: #1fb8b3;
}

/* Icono marcador SVG inline */
.ui-menu-item-wrapper .icon-marker {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    fill: #00cba2;
}

/* Título (ciudad) en negrita y color más oscuro */
.ui-menu-item-wrapper .menu-city {
    font-weight: 600;
    color: #111;
    display: block;
}

/* Texto secundario (resto de la jerarquía) */
.ui-menu-item-wrapper .menu-sub {
    font-size: 13px;
    color: #555;
    display: block;
    margin-top: 2px;
}