/* =============================================================================
   BT-SELECT — dropdown propriu, desenat peste <select>-ul nativ (bt-select.js)

   Componenta e generica: se poate folosi pe orice pagina. Culorile se iau din
   contextul in care sta, prin cele doua variante de mai jos:
     .bt-search--hero  → pe fundal foto (text alb, sticla)
     restul            → pe fond deschis
   ============================================================================= */

.bt-select { position: relative; display: block; width: 100%; min-width: 0; }

/* Selectul ramane in DOM ca sa se trimita cu formularul; doar il scoatem din
   ochi. `display:none` l-ar scoate din tabulare si din validarea nativa. */
.bt-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bt-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.bt-select-trigger:focus { outline: none; }
.bt-select-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }

.bt-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-select-caret {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: .7;
    transition: transform .18s ease;
}
.bt-select.is-open .bt-select-caret { transform: rotate(180deg); }
/* Iconitele care nu sunt sageti nu au sens rotite */
.bt-select.is-open .bt-select-caret.fa-location-dot,
.bt-select.is-open .bt-select-caret.fa-calendar { transform: none; }

/* ---------- Panoul ----------
   `fixed` si mutat in <body> de JS: altfel l-ar taia orice parinte cu
   overflow (hero-ul de pe prima pagina are overflow:hidden). */
.bt-select-panel {
    position: fixed;
    /* Panoul se agata de <body>, nu de campul lui (altfel l-ar taia orice
       parinte cu overflow). Asta inseamna ca nu mai mosteneste stratul
       ferestrei din care a fost deschis, deci trebuie sa stea peste toate
       ferestrele din care poate aparea un select: filtrele de cautare (1300),
       codul QR (1100), ferestrele din panoul organizatorului (1000) si
       vizualizatorul de imagini (2000). La 1200, in modalul de filtre
       selectul se deschidea in spatele ferestrei si parea ca nu face nimic. */
    z-index: 2100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    animation: btSelectIn .14s ease;
}
.bt-select-panel[hidden] { display: none; }

/* Sugestiile venite de la server (localitatile). Numele in stanga, judetul in
   dreapta si mai sters: judetul e dezambiguizarea — sunt zeci de „Valea Mare" —,
   nu raspunsul. */
.bt-select-option--remote {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.bt-select-remote-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bt-select-remote-sub {
    flex-shrink: 0;
    font-size: 12.5px;
    color: #94a3b8;
}
.bt-select-panel.is-up { transform-origin: bottom center; }

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

.bt-select-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f6;
    flex: 0 0 auto;
}
.bt-select-search i { font-size: 13px; color: #94a3b8; }
.bt-select-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
}
.bt-select-search input:focus { outline: none; }
.bt-select-search input::placeholder { color: #94a3b8; }

.bt-select-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
}

.bt-select-group {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0369a1;
}

.bt-select-option {
    position: relative;
    padding: 9px 34px 9px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    color: #334155;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bt-select-option:hover,
.bt-select-option.is-active { background: #f1f5f9; color: #0f172a; }

.bt-select-option.is-selected { color: #16a34a; font-weight: 600; }
.bt-select-option.is-selected::after {
    content: '\f00c';               /* check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}
.bt-select-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.bt-select-empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
}

/* ---------- Butonul pe fundal foto ---------- */
.bt-search--hero .bt-select-trigger { color: #fff; }
.bt-search--hero .bt-select-caret { opacity: .75; }

@media (prefers-reduced-motion: reduce) {
    .bt-select-panel { animation: none; }
    .bt-select-caret { transition: none; }
}