/* ─── lista-judet.css ─────────────────────────────────────────────────────────
   Lista de județe, proprie, cu casetă de căutare. Înlocuiește vizual un <select>
   obișnuit, care rămâne în pagină, ascuns, și ține valoarea.

   Se deschide ÎN JOS, întotdeauna: top: calc(100% + 4px), fără nicio logică de
   întoarcere în sus. Același pas ca sugestiile de localitate din home.css, ca cele
   două liste ale sitului să se poarte la fel.
   ────────────────────────────────────────────────────────────────────────────── */

.er-lj {
    position: relative;
    width: 100%;
}

/* Selectul adevărat rămâne în pagină, dar nu se vede: fără JavaScript, el e cel
   care se folosește, iar formularul funcționează la fel. */
.er-lj-nativ-ascuns {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Butonul care arată județul ales. Împrumută înălțimea și raza câmpurilor din jur. */
.er-lj-buton {
    /* Scris, nu lasat pe valoarea implicita a browserului pentru <button>: puntile din
       admin-continut.css, form-punct.css si home.css ii dau „height: 42px" ca sa se
       potriveasca cu casetele de langa, iar socoteala aceea atarna de border-box. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: var(--er-bg-surface);
    border: 1px solid var(--er-border);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.er-lj-buton:hover {
    border-color: var(--er-border-strong);
}

.er-lj-buton:focus-visible {
    outline: none;
    border-color: var(--er-color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Când nu s-a ales nimic, textul e mai șters — ca un placeholder. */
.er-lj-buton[data-gol="true"] .er-lj-text {
    color: var(--er-text-muted, #64748b);
}

.er-lj-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.er-lj-sageata {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--er-text-muted, #64748b);
    transition: transform 0.15s ease;
}

.er-lj.er-deschis .er-lj-sageata {
    transform: rotate(180deg);
}

/* ── Panoul ──────────────────────────────────────────────────────────────── */

.er-lj-panou {
    display: none;
    position: absolute;
    top: calc(100% + 4px);   /* ÎN JOS. Nu se întoarce în sus niciodată. */
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--er-bg-surface);
    border: 1px solid var(--er-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    overflow: hidden;
}

.er-lj.er-deschis .er-lj-panou {
    display: block;
}

.er-lj-cautare {
    padding: 8px;
    border-bottom: 1px solid var(--er-border);
}

.er-lj-cautare input {
    /* border-box, altfel caseta IESEA din panou. Inputul e content-box — proiectul nu are
       border-box global — deci „width: 100%" insemna 318px de continut plus 10px de padding
       si 1px de chenar pe fiecare parte: 340px intr-un loc de 318. Ieşea 22px, din care 5
       treceau de panou si se tăiau, fiindca panoul are overflow: hidden. */
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    background: var(--er-bg-page);
    border: 1px solid var(--er-border);
    border-radius: 8px;
    font: inherit;
}

.er-lj-cautare input:focus {
    outline: none;
    border-color: var(--er-color-primary);
}

.er-lj-lista {
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-lj-opt {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--er-border-faint, var(--er-border));
    transition: background 0.12s ease;
}

.er-lj-opt:last-child {
    border-bottom: none;
}

/* Aceeași stare vizuală pentru mouse și pentru tastatură: cine merge cu săgețile
   trebuie să vadă unde se află, la fel de bine ca cine trece cu mausul. */
.er-lj-opt:hover,
.er-lj-opt.er-lj-activ {
    background: var(--er-bg-muted);
}

.er-lj-opt[aria-selected="true"] {
    font-weight: 600;
    color: var(--er-color-primary);
}

.er-lj-gol {
    padding: 14px;
    text-align: center;
    color: var(--er-text-muted, #64748b);
    font-size: 0.9rem;
}