/* ====== Popup "Elige tu ciudad" ====== */
.popup-ciudades-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(47, 72, 88, 0.4);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'GatterSans', sans-serif;
}
.popup-ciudades-overlay.is-open {
    display: flex;
}
.popup-ciudades-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 90%;
    max-width: 360px;
    padding: 24px 20px;
    position: relative;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.popup-ciudades-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #2F4858;
    cursor: pointer;
    padding: 0;
}
.popup-ciudades-title {
    text-align: center;
    color: #2F4858;
    font-family: 'GatterSans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 16px 0;
}
.popup-ciudades-search {
    position: relative;
    margin-bottom: 16px;
}
.popup-ciudades-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}
.popup-ciudades-search input,
.popup-ciudades-modal .popup-ciudades-search input[type="text"] {
    width: 100%;
    height: 42px;
    border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    border: 1px solid #E5E9EC !important;
    background: #F1F3F4 !important;
    padding: 0 16px 0 44px !important;
    font-size: 14px;
    color: #2F4858;
    outline: none;
    box-sizing: border-box;
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.popup-ciudades-search input:focus {
    border-color: #20c7a2 !important;
    background: #fff !important;
}
.popup-ciudades-search input::placeholder {
    color: #9AA8B2;
    opacity: 1;
}
.popup-ciudades-subtitle {
    color: #2F4858;
    font-weight: 700;
    font-size: 14px;
    margin: 4px 0 8px 4px;
}
.popup-ciudades-list {
    overflow-y: auto;
    padding-right: 4px;
    flex: 1;
}
.popup-ciudades-list::-webkit-scrollbar {
    width: 6px;
}
.popup-ciudades-list::-webkit-scrollbar-thumb {
    background: #C5CCD2;
    border-radius: 3px;
}
.popup-ciudad-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 30px;
    border: 1px solid #E5E9EC;
    color: #2F4858;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    background: #fff;
}
.popup-ciudad-item:hover {
    background: #E8FAF4;
    border-color: #20c7a2;
}
.popup-ciudad-item.is-current {
    background: #C7F3E5;
    border-color: #20c7a2;
}
.popup-ciudad-item .popup-ciudad-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.popup-ciudad-item.is-hidden {
    display: none;
}

/* Botón "Elige tu ciudad" (izquierda en páginas no-ciudad) */
.elige-tu-ciudad-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: 'GatterSans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    gap: 10px;
}
.elige-tu-ciudad-btn p {
    margin: 0;
    color: #fff;
    font-family: 'GatterSans', sans-serif;
    font-size: 15px;
    font-weight: 500;
}

/* Selector de ciudad derecha (páginas de ciudad) - botón que abre popup */
.selector-ciudad-popup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'GatterSans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 8px 12px;
}

/* Buscador "Elige tu ciudad" para la HOME (hero) */
.home-buscador-ciudad {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 50px;
    padding: 14px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    max-width: 480px;
    width: 100%;
    color: #2F4858;
    font-family: 'GatterSans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    border: none;
    text-align: left;
}
.home-buscador-ciudad span {
    color: #2F4858;
}
.home-buscador-ciudad:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

/* En páginas no-ciudad el botón abre el popup de ciudades, por lo que el
   dropdown de categorías (gestionado por Vue) no debe abrirse desde este botón.
   Se sigue rendering por compatibilidad pero queda oculto. */
body:not(.es-ciudad) #main-header-explore-cats {
    display: none !important;
}

@media (max-width: 768px) {
    .popup-ciudades-modal {
        max-width: 92%;
        padding: 20px 16px;
    }
    .home-buscador-ciudad {
        font-size: 16px;
        padding: 12px 18px;
    }
}