/**
 * Selector de țară cu steag și prefix.
 *
 * Fișier propriu, nu un bloc în `ycm.core.css`: componenta e de sine stătătoare, iar un fișier nou are URL nou —
 * deci prima încărcare nu poate veni dintr-un cache vechi, cum s-ar întâmpla cu o adăugare într-un fișier deja
 * cerut de browser.
 *
 * Markup: `templates/partials/_country_picker.html.twig`. Comportament: `public/assets/js/ycm.country-picker.js`.
 */

.ycm-country-menu { display: none; }

/* Lista are ~250 de rânduri: fără plafon, meniul deschis depășește ecranul și butoanele de sub el devin
   inaccesibile. Aici, nu într-un `style` în șablon — regula proiectului e zero CSS în Twig. */
.ycm-country-menu.show {
    display: block;
    max-height: 20rem;
    overflow-y: auto;
}

/* Înălțimea o dă conținutul randat de Twig; `min-height` o fixează, ca un nume scurt să nu dea un câmp mai
   mic decât vecinii. Varianta `-tall` urmează `form-floating`, folosit în formularul Proprietar. */
.ycm-country-toggle { cursor: pointer; min-height: calc(1.5em + .75rem + 2px); }
.ycm-country-toggle-tall { min-height: calc(3.5rem + 2px); }

/* Locul steagului se rezervă ȘI la țările care n-au unul, ca numele să înceapă pe aceeași coloană —
   altfel „Antarctica" și „Antilele Olandeze" ies în afara rândului. */
.ycm-country-flag-gol { display: inline-block; width: 16px; height: 11px; flex: 0 0 auto; }
.ycm-country-list .flag { flex: 0 0 auto; }

/* Aer: fără el steagul stă lipit de marginea din stânga și rândurile se citesc ca un bloc compact. */
.ycm-country-list .dropdown-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem 1.5rem;
    line-height: 1.5;
}
.ycm-country-list .dropdown-item + .dropdown-item { border-top: 1px solid rgba(0, 0, 0, .06); }

/* Elementele randate din JS poartă și un `ms-2` propriu, care s-ar aduna peste `gap` și ar da distanțe
   inegale față de rândul randat din Twig. */
.ycm-country-list .dropdown-item > span:last-child { margin-left: 0 !important; }

.ycm-country-search { padding-left: .75rem; }

/* Imaginile din `images/flags-extra/` sunt 16×12; le aducem la 16×11, cât are sprite-ul, ca rândurile să nu salte. */
.ycm-country-flag-img { width: 16px; height: 11px; object-fit: cover; flex: 0 0 auto; }

/* ── Varianta „floating", pentru formularele cu `form-floating` ────────────
   Vecinii au eticheta plutind în interiorul câmpului. O etichetă pe un rând
   deasupra ar fi împins controlul mai jos decât ele și rândul ar fi arătat
   strâmb — deci o așezăm tot înăuntru, peste buton, în aceeași poziție în
   care Bootstrap o duce când câmpul are valoare. */
.ycm-country-picker-floating .ycm-country-float-label {
    /* Starea de REPAUS, copiată din `.form-floating>label` al temei: aceeași cutie, aceeași mărime și
       aceeași culoare ca eticheta unui câmp gol de lângă — altfel „Țară" ieșea mică și gri, iar
       „Localitate" de alături mare și bleumarin, pe același rând. Culoarea NU se declară: se moștenește,
       exact ca la vecini. */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100%;
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
}

/* Cu valoare aleasă, eticheta urcă și se estompează — exact regula temei pentru un câmp completat
   (`.form-floating>.form-control:not(:placeholder-shown)~label`). Clasa o pune Twig la randare și o
   întreține `ycm.country-picker.js`, fiindcă un buton n-are `:placeholder-shown` după care CSS-ul
   singur să se orienteze. */
.ycm-country-picker-floating.ycm-country-has-value .ycm-country-float-label {
    color: rgba(var(--bs-body-color-rgb), .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.ycm-country-picker-floating .ycm-country-toggle {
    /* Exact cutia pe care o are `.form-floating > .form-control` în starea CU valoare: înălțime fixă (nu
       `min-height`, care lasă butonul să crească peste vecini și coboară linia de sub el) și aceleași paddinguri.
       Așa linia de jos cade la același nivel cu a câmpurilor de lângă. */
    height: calc(3.5rem + 2px);
    min-height: 0;
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

/* ── Varianta COMPACTĂ: steagul și prefixul ────────────────────────────────
   Folosită la înregistrare, unde caseta stă lângă câmpul de telefon. În casetă se vede steagul și prefixul
   (`+40`), fără numele țării; lista rămâne întreagă, cu nume și căutare.

   Numele se ascunde DOAR în butonul închis, nu și în listă: acolo e singurul lucru după care se poate alege —
   România și Ciad au steaguri practic identice. De aceea selectorul ține de `.ycm-country-toggle`, nu de rădăcină. */
.ycm-country-compact .ycm-country-toggle .ycm-country-label { display: none; }

/* Prefixul din buton există doar pentru varianta compactă; în rest numele îl conține deja, în paranteză. */
.ycm-country-dial { display: none; }
.ycm-country-compact .ycm-country-toggle .ycm-country-dial { display: inline; white-space: nowrap; }

/* Lățimea o dă conținutul: steagul, prefixul și săgeata `form-select`. `padding-right` lasă loc săgeții, altfel
   ar călca peste prefix.

   ÎNĂLȚIMEA e cea a unui `form-floating`, nu cea implicită a unui `form-select`: caseta stă mereu lângă un
   câmp de telefon cu etichetă plutitoare (înregistrare), iar cu înălțimea mică ieșea vizibil mai sus decât
   vecinul. Croită pentru locul ăsta — varianta compactă exact de asta există. */
.ycm-country-compact .ycm-country-toggle {
    width: auto;
    min-width: 0;
    padding-right: 2.25rem;
    height: calc(3.5rem + 2px);
}

/* Meniul NU mai poate fi `w-100`: pe o casetă de câteva zeci de pixeli ar ieși o listă de câteva zeci de
   pixeli. Îi dăm o lățime proprie, plafonată de ecran, ca pe telefon să nu iasă din pagină. */
.ycm-country-compact .ycm-country-menu {
    width: auto;
    min-width: 20rem;
    max-width: calc(100vw - 2rem);
}