/**
 * Telefonul ca UN SINGUR câmp: steagul înăuntru, la stânga, numărul în rest.
 *
 * Marcaj: `templates/partials/_phone_field.html.twig`. Comportament: `ycm.phone-field.js`, peste
 * `ycm.country-picker.js` (lista de țări e aceeași, deja scrisă).
 *
 * Ideea stilului: chenarul aparține CONTAINERULUI, nu controalelor dinăuntru. Butonul cu steag și
 * `<input>`-ul își pierd bordurile și fundalul, deci ochiul vede un câmp, nu trei.
 */

.ycm-phone {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: calc(3.5rem + 2px);
    background-color: var(--bs-body-bg, #fff);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

/* Focus pe ORICE din interior aprinde tot containerul — altfel s-ar fi luminat doar o bucată din câmp.
   `:focus-within` e exact pentru asta. */
.ycm-phone:focus-within {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253), .25);
}

/* ── Butonul cu steag ─────────────────────────────────────────────────── */
/* DOAR steagul și săgeata, fără numele țării: numele au lungimi foarte diferite („Ciad" vs „Republica
   Democratică Congo"), iar în casetă ar fi făcut câmpul să sară în lățime la fiecare schimbare, mutând
   numărul de sub degete. Numele trăiește în listă, unde are loc.

   Linia verticală din dreapta desparte zona de alegere de zona de scris — fără ea, săgeata plutea în
   mijlocul câmpului și nu se înțelegea pe ce se apasă. */
.ycm-phone .ycm-phone-flag {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: 0 .65rem;
    background: none;
    border: 0;
    border-right: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: 0;
    cursor: pointer;
}

/* Plasă de siguranță: numele țării nu apare în buton pe NICIUN drum. JS-ul îl scoate deja, dar dacă o cale
   nouă din `ycm.country-picker.js` îl mai pune vreodată, aici rămâne ascuns. */
.ycm-phone .ycm-phone-flag .ycm-country-label,
.ycm-phone .ycm-phone-flag > span:not(.flag):not(.ycm-phone-caret):not(.ycm-country-flag-gol):not(.visually-hidden) {
    display: none;
}

/* La hover se vede că e o zonă de apăsat, nu un ornament. */
.ycm-phone .ycm-phone-flag:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Săgeata: aceeași formă ca la `form-select`, desenată din borduri ca să nu depindă de o imagine.
   Mai întunecată decât `secondary`, care pe fundal alb aproape dispărea. */
.ycm-phone-caret {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    border-top: .4rem solid var(--bs-body-color, #212529);
    opacity: .7;
}

/* ── Prefixul scris ───────────────────────────────────────────────────── */
/* Prefixul stă DUPĂ linia despărțitoare, lipit de număr: împreună formează numărul întreg, deci se citesc
   ca un singur lucru. */
.ycm-phone-dial {
    display: flex;
    align-items: center;
    padding: 0 .35rem 0 .75rem;
    color: var(--bs-body-color, #212529);
    white-space: nowrap;
}

/* Gol = fără prefix ales; atunci numărul preia spațiul, cu paddingul lui normal. */
.ycm-phone-dial:empty { display: none; }
.ycm-phone-dial:empty + .ycm-phone-number { padding-left: .75rem; }

/* ── Coloana din dreapta steagului ───────────────────────── */
/* Prefixul scris și numărul stau unul lângă altul, iar deasupra lor încape eticheta, când e cerută
   înăuntru. Fără etichetă, coloana are un singur rând — adică exact ce era înainte. */
.ycm-phone .ycm-phone-stack {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ycm-phone .ycm-phone-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ── Eticheta ÎnLĂUNTRUL câmpului (`floating: true`) ─────────────── */
/* Formularele scheletului își pun etichetele în câmp (`form-floating` din Bootstrap). Telefonul, cu
   eticheta DEASUPRA, ieșea cu un rând mai înalt decât vecinii lui — iar vecinul de pe același rând
   (de obicei limba contului) cobora vizibil față de el. Aici eticheta intră în câmp, deci înălțimea
   redevine cea a unui control obișnuit.

   E mereu în starea „ridicată", fără animația Bootstrap: câmpul are mereu ceva de arătat sub ea —
   steagul, prefixul și numărul-exemplu din placeholder. O etichetă care ar fi coborât peste ele, pe
   câmp gol, le-ar fi acoperit. Dimensiunile le imită pe cele ale lui `form-floating` (0.75rem ≈
   `scale(.85)` din 0.875rem), ca cele două feluri de câmpuri să se citească la fel. */
.ycm-phone-floating .ycm-phone-label {
    margin-bottom: 0;
    padding-left: .75rem;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--bs-secondary-color, #6c757d);
    /* Clicul pe etichetă ajunge la câmp prin `for`; fără `pointer-events: none` zona de deasupra
       numărului ar fi înghițit clicuri care par ale câmpului. */
    pointer-events: none;
}

/* Prefixul stă exact sub primul caracter al etichetei. */
.ycm-phone-floating .ycm-phone-dial {
    padding-left: .75rem;
}


/* ── Numărul ──────────────────────────────────────────────────────────── */
.ycm-phone .ycm-phone-number {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .75rem 0 0;
    background: none;
    border: 0;
    border-radius: inherit;
    color: var(--bs-body-color, #212529);
}

/* Fără conturul propriu al input-ului: containerul îl arată deja, prin `:focus-within`. */
.ycm-phone .ycm-phone-number:focus {
    outline: 0;
    box-shadow: none;
}

/* ── Lista de țări ────────────────────────────────────────────────────── */
/* Nu `w-100`: ancora ei e containerul întreg, iar o listă cât tot câmpul ar fi fost lată degeaba. Lățime
   proprie, plafonată de ecran, ca pe telefon să nu iasă din pagină.

   Lățimea minimă trece prin `min()`, nu e scrisă direct: în CSS `min-width` ÎnVINGE `max-width`, deci pe
   un ecran mai îngust de 22rem + marginile (ecranul de capac al unui pliabil are ~344px, iar 22rem = 352px)
   plafonul de dedesubt nu avea niciun efect — lista ieșea din pagină și târa tot ecranul după ea. */
.ycm-phone .ycm-country-menu {
    width: auto;
    min-width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

/* PE TELEFON lista are exact lățimea câmpului. `max-width: calc(100vw - 2rem)` de mai sus plafonează
   lățimea, dar NU și marginea din dreapta: lista începe de la marginea stângă a câmpului, care e deja la
   câțiva zeci de pixeli de marginea ecranului, deci o listă „cât ecranul" tot ieșea afară și împingea
   pagina. Legată de câmp, nu de ecran, nu are cum să depășească — câmpul încape deja. */
@media (max-width: 767.98px) {
    .ycm-phone .ycm-country-menu {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* Varianta STRÂMTĂ, pentru formularele cu `form-floating` în jur (cardul Telefon de pe `/account`), unde
   înălțimea e dată de vecini. */
.ycm-phone-sm { height: calc(2.375rem + 2px); }