.wf-selector{
    position:relative;
    display:inline-flex;align-items:center;gap:0.5rem;
    font-family:var(--wf-sans);
    max-width:100%;
}
.wf-selector__trigger{
    display:inline-flex;align-items:stretch;
    background:#fff;border:1.5px solid var(--wf-glass-border);
    padding:0;border-radius:100px;
    font-size:0.85rem;font-weight:700;color:var(--wf-text-primary);
    cursor:pointer;
    /* Largura padrão pra nomes típicos; sem max-width pra autosize com
     * nomes longos (Morro do Chapéu (Ce) — São Gonçalo do Amarante/CE etc) */
    min-width:280px;
    overflow:hidden;
    transition:border-color 0.15s, background 0.15s, color 0.15s;
}
.wf-selector__trigger:hover{border-color:#bbb}
.wf-selector__spot-name{
    display:inline-flex;align-items:center;
    padding:0.45rem 0.7rem 0.45rem 0.9rem;
    white-space:nowrap;
    flex:1;
}
.wf-selector__search-icon{
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
    padding:0 0.8rem;
    background:#1a1e2a;color:#fff;
    transition:background 0.15s, color 0.15s;
}
.wf-selector__search-icon svg{display:block;width:18px;height:18px}

.wf-selector__fav{
    background:#fff;border:1.5px solid var(--wf-glass-border);border-radius:50%;
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    color:#c8cdd6;cursor:pointer;padding:0;transition:color 0.15s, border-color 0.15s;
}
.wf-selector__fav:hover{color:#e55}
.wf-selector__fav.is-on{color:#FE0000;border-color:#FE0000}
.wf-selector__fav svg{display:block}

.wf-selector__panel{
    position:absolute;left:0;top:calc(100% + 0.5rem);
    width:min(420px, calc(100vw - 2rem));
    background:#fff;border:1px solid var(--wf-glass-border);border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.10),0 2px 6px rgba(0,0,0,0.05);
    padding:0.6rem;z-index:200;
}
.wf-selector__panel[hidden]{display:none}
.wf-selector__input{
    width:100%;padding:0.5rem 0.7rem;border:1px solid var(--wf-glass-border);
    border-radius:8px;font-size:0.9rem;font-family:var(--wf-sans);outline:none;
    color:var(--wf-text-primary);background:#f6f7f9;
}
.wf-selector__input:focus{border-color:var(--wf-accent);background:#fff}
.wf-selector__results{margin-top:0.5rem;max-height:var(--wf-results-height, 250px);overflow-y:auto}
.wf-selector__panel-footer{
    display:flex;justify-content:flex-end;
    padding-top:0.5rem;margin-top:0.3rem;
    border-top:1px solid var(--wf-glass-border);
}
.wf-selector__picos-btn{
    display:inline-block;
    background:#fff;border:1.5px solid var(--wf-glass-border);
    padding:0.4rem 0.8rem;border-radius:100px;
    font-family:var(--wf-sans);font-size:0.8rem;font-weight:700;
    color:var(--wf-text-primary);text-decoration:none;white-space:nowrap;
    transition:border-color 0.15s, background 0.15s, color 0.15s;
}
.wf-selector__picos-btn:hover{border-color:#bbb;color:var(--wf-text-primary)}
.wf-selector__empty, .wf-selector__hint{
    padding:0.6rem 0.3rem;color:var(--wf-text-muted);font-size:0.8rem;text-align:center;
}
.wf-selector__country{margin-top:0.4rem}
.wf-selector__country-title{
    font-size:0.7rem;font-weight:800;text-transform:uppercase;color:var(--wf-text-muted);
    padding:0.25rem 0.4rem;letter-spacing:0.05em;
}
.wf-selector__state{margin-left:0.4rem;border-left:2px solid #eef0f4;padding-left:0.5rem}
.wf-selector__state-title{font-size:0.72rem;font-weight:700;color:var(--wf-text-secondary);padding:0.2rem 0.3rem}
.wf-selector__city{margin-left:0.4rem;border-left:2px solid #f1f2f5;padding-left:0.5rem}
.wf-selector__city-title{font-size:0.7rem;font-weight:600;color:var(--wf-text-muted);padding:0.15rem 0.3rem}
.wf-selector__peak{
    display:block;width:100%;text-align:left;
    padding:0.4rem 0.6rem;font-size:0.85rem;font-weight:600;
    color:var(--wf-text-primary);
    background:transparent;border:none;border-radius:6px;cursor:pointer;
}
.wf-selector__peak:hover{background:rgba(28,30,248,0.06);color:var(--wf-accent)}
.wf-selector__peak.is-current{color:var(--wf-accent);background:rgba(28,30,248,0.04)}

@media(max-width:768px){
    .wf-selector__trigger{max-width:60vw}
    .wf-selector__panel{left:0;right:auto;width:calc(100vw - 1rem)}
}