/* ==========================================================================
   Formular multi-pas (/formular)
   Se încarcă doar pe pagina formularului, prin {% put styles %}.
   ========================================================================== */

.frm-page {
    /* Header-ul e .fixed-top, deci tot ce ancorăm de viewport (sticky, scroll)
       trebuie decalat cu înălțimea lui. Un singur token, ca să nu se
       desincronizeze cele trei locuri care au nevoie de el. */
    --frm-header-offset: 5.5rem;

    min-height: 100vh;
    /* padding-top: var(--frm-header-offset); */
}

/* Bootstrap pune `display` cu !important în utilitare (.d-flex, .d-block…), iar
   atributul [hidden] are specificitate 0,1,0 și pierde. Fără regulile astea,
   `el.hidden = true` din JS n-ar avea niciun efect vizibil pe blocurile care au
   și o clasă de display — de exemplu alerta SRL din M0, care e .d-flex. */
.frm-panel[hidden],
[data-when][hidden] {
    display: none !important;
}

.frm-panel {
    /* Păstrează titlul pasului vizibil sub navbar la navigarea către ancore. */
    scroll-margin-top: var(--frm-header-offset);
}


/* Alertele de avertizare — text de conținut, nu galben pe alb
   ==========================================================================
   Around dă `.alert-warning` culoarea --ar-warning-text-emphasis (#e8bd22,
   galbenul de brand) pe un fundal cu 5% opacitate: galben pe aproape-alb,
   practic ilizibil. La `.alert-info` nu se vede, fiindcă acolo emphasis-ul e un
   albastru închis (#2e66a8) — de-aia celelalte module arată corect.

   Fundalul și conturul rămân, ele duc semnalul; textul trece pe culorile de
   conținut, ca blocurile din M1. Pârghia e chiar variabila alertei: `.alert`
   face `color: var(--ar-alert-color)`, deci nu e nevoie de nicio clasă în plus
   pe element și nici de !important.

   Token-uri, nu #000: în tema întunecată devin singure text deschis. */
.frm-panel .alert-warning {
    --ar-alert-color: var(--ar-body-color);
}

.frm-panel .alert-warning strong {
    color: var(--ar-emphasis-color);
}


/* Stepper
   ========================================================================== */

.frm-stepper-wrap {
    top: var(--frm-header-offset);
}

.frm-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.frm-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-bottom: 1.75rem;
}

.frm-step:last-child {
    padding-bottom: 0;
}

/* `.frm-step` este display:flex, deci pașii ascunși explicit au nevoie de o
   regulă mai puternică decât stilurile de display. */
.frm-step[hidden] {
    display: none;
}

/* ULTIMUL PAS VIZIBIL, nu ultimul din DOM: pașii ascunși rămân în DOM, deci
   `:last-child` cade pe unul dintre ei, iar de sub ultimul rând vizibil ar
   coborî o linie în gol plus spațiul rezervat rândurilor dispărute. `:has`
   întreabă exact ce trebuie — „mai urmează vreun pas vizibil?".
   Regula doar STINGE linia; culoarea ei rămâne pe regulile de mai jos. Dacă i-ai
   pune aici și `background`, specificitatea mai mare de aici ar rescrie varianta
   is-done și linia pașilor bifați s-ar întoarce la gri. */
.frm-step:not([hidden]):not(:has(~ .frm-step:not([hidden]))) {
    padding-bottom: 0;
}

.frm-step:not([hidden]):not(:has(~ .frm-step:not([hidden])))::before {
    display: none;
}

/* Linia de legătură o desenăm din marker în jos, pe fiecare pas mai puțin
   ultimul. Ca border pe element ar depăși sub ultimul marker. */
.frm-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2.125rem;
    bottom: 0.375rem;
    width: 2px;
    background: var(--ar-border-color);
}

.frm-step.is-done::before {
    background: var(--brand);
}

.frm-step__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ar-body-bg);
    border: 2px solid var(--ar-border-color);
    color: var(--ar-secondary-color);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.frm-step__check {
    display: none;
    font-size: 1rem;
}

.frm-step.is-done .frm-step__marker {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.frm-step.is-done .frm-step__num {
    display: none;
}

.frm-step.is-done .frm-step__check {
    display: block;
}

.frm-step.is-current .frm-step__marker {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.2);
}

/* Blocat: pașii de după un pas terminal. Nu se ascund — clientul vede că drumul
   continuă undeva, doar nu pentru el acum. Motivul îl spune ecranul, nu lista. */
.frm-step__lock {
    display: none;
    font-size: 0.875rem;
}

.frm-step.is-locked .frm-step__num {
    display: none;
}

.frm-step.is-locked .frm-step__lock {
    display: block;
}

.frm-step.is-locked .frm-step__marker {
    border-style: dashed;
}

/* Textul se stinge, dar rămâne peste pragul de contrast: e informație, nu
   decor — clientul trebuie să poată citi ce anume s-a blocat. */
.frm-step.is-locked .frm-step__label,
.frm-step.is-locked .frm-step__hint {
    opacity: 0.55;
}

/* Rândul ascuns pentru cititoarele de ecran apare doar când chiar e blocat. */
.frm-step__lock-text {
    display: none;
}

.frm-step.is-locked .frm-step__lock-text {
    display: inline;
}

.frm-step__body {
    display: flex;
    flex-direction: column;
    /* Bara de progres se întinde pe lățimea disponibilă; min-width:0 împiedică
       flex-ul să refuze micșorarea sub conținut și să scape textul afară. */
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.1875rem;
}

.frm-step__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ar-secondary-color);
    line-height: 1.3;
}

.frm-step.is-current .frm-step__label,
.frm-step.is-done .frm-step__label {
    color: var(--ar-emphasis-color);
}

.frm-step__hint {
    font-size: 0.8125rem;
    color: var(--ar-secondary-color);
    line-height: 1.4;
    margin-top: 0.125rem;
}

/* Progresul per modul
   ========================================================================== */

.frm-step__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4375rem;
}

/* Blocul e display:flex, deci [hidden] pierde fără regula asta. Vizibilitatea
   este stabilită server-side din definiția pasului. */
.frm-step__progress[hidden] {
    display: none;
}

.frm-step__bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--ar-border-color);
    overflow: hidden;
}

.frm-step__bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    transition: width 0.25s ease;
}

.frm-step__percent {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ar-secondary-color);
    /* Cifrele de aceeași lățime: fără asta bara sare vizual la 9% → 10%. */
    font-variant-numeric: tabular-nums;
}

.frm-step.is-done .frm-step__percent,
.frm-step.is-current .frm-step__percent {
    color: var(--brand-dark);
}


/* Orice pas autorizat de server este navigabil, inclusiv un pas incomplet din
   consultarea read-only. Pasul curent nu promite o navigare către el însuși. */
.frm-step[data-step-accessible="1"]:not(.is-current) {
    cursor: pointer;
}

.frm-step[data-step-accessible="1"]:not(.is-current):hover .frm-step__label {
    color: var(--brand-dark);
}

.frm-step[data-step-accessible="1"]:not(.is-current):focus-visible {
    border-radius: 0.5rem;
    outline: 2px solid var(--brand-dark);
    outline-offset: 0.25rem;
}


/* Întrebările dintr-un modul
   Un modul are mai multe întrebări; fiecare e un <fieldset class="frm-q">.
   Numerotarea și separatoarele sunt integral CSS — nu ating JS-ul.
   ========================================================================== */

.frm-panel {
    counter-reset: intrebare;
}

.frm-q {
    counter-increment: intrebare;
}

/* Separator doar pe o întrebare vizibilă care are înaintea ei altă întrebare
   vizibilă — adică pe tot ce nu e „prima de pe ecran". :first-child n-ar ține,
   fiindcă prima *vizibilă* se schimbă când una condiționată apare sau dispare. */
.frm-q:not([hidden]) ~ .frm-q:not([hidden]) {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--ar-border-color);
}

.frm-q__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ar-emphasis-color);
}

.frm-q__num {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ar-primary-color);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Cifra vine din contor, nu din markup: elementele display:none nu incrementează
   contoare, deci numerele sar automat peste întrebările ascunse. */
.frm-q__num::before {
    content: counter(intrebare);
}

/* Textul explicativ și zona de răspuns se retrag sub titlu, aliniate cu el și
   nu cu bulina: așa se vede unde se termină întrebarea și unde completezi.
   2.5rem = bulina (1.75) + gap-ul (0.75). */
.frm-q__hint {
    margin: 0 0 1rem;
    padding-left: 2.5rem;
    font-size: 0.875rem;
    color: var(--ar-secondary-color);
}

.frm-q__body {
    padding-left: 2.5rem;
}

/* Sub-blocurile unei întrebări: bucăți care țin de același subiect (tipul
   actului, pozele lui, datele care nu sunt scrise pe el) și n-au de ce să
   primească fiecare câte un număr. Nu au clasa .frm-q, deci nu incrementează
   contorul și nu primesc separator. */
.frm-sub {
    margin-top: 1.5rem;
}

.frm-q__body > .frm-sub:first-child {
    margin-top: 0;
}

/* Fără accent colorat: culoarea e deja luată de bulinele cerințelor de dedesubt,
   iar încă un semn grafic făcea zgomot. Titlul se vede din dimensiune și
   greutate. Rămâne sub .frm-q__title, care are bulina numerotată. */
.frm-sub__title {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ar-emphasis-color);
}

.frm-sub__hint {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ar-secondary-color);
}

/* Cerințele dinaintea unui câmp. Ca paragraf se citeau ca un text de citit; ca
   listă se bifează din ochi înainte să completezi.
   list-style: none + bulină din ::before, fiindcă ::marker nu acceptă
   dimensiune, iar bulina implicită a browserului nu ia culoarea temei. */
.frm-cerinte {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ar-secondary-color);
}

.frm-cerinte li {
    position: relative;
    padding-left: 1.125rem;
}

/* „Are înaintea ei o cerință vizibilă", adică „nu e prima de pe ecran" —
   aceeași idee ca la separatorul dintre întrebări. `li + li` n-ar ține: o
   cerință ascunsă rămâne frate în DOM, iar prima vizibilă ar primi degeaba
   spațiu deasupra. */
.frm-cerinte li:not([hidden]) ~ li:not([hidden]) {
    margin-top: 0.375rem;
}

/* Bulina se aliniază pe prima linie de text, nu pe centrul elementului: la o
   cerință care se rupe pe două rânduri, centrul ar cădea între ele. */
.frm-cerinte li::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--brand);
}

@media (max-width: 575.98px) {
    /* Pe ecran îngust indentarea fură prea mult din lățimea câmpurilor. */
    .frm-q__hint,
    .frm-q__body {
        padding-left: 0;
    }
}


/* Carduri de alegere — input radio mascat cu .btn-check + label vizibil
   ========================================================================== */

.frm-choice {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 2px solid var(--ar-border-color);
    border-radius: 0.75rem;
    background: var(--ar-body-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.frm-choice:hover {
    border-color: var(--brand);
}

/* .btn-check scoate input-ul din pagină cu clip, dar îl lasă focusabil de la
   tastatură. Fără regula asta, navigarea cu Tab n-ar avea niciun indiciu vizual. */
.btn-check:focus-visible + .frm-choice {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

.btn-check:checked + .frm-choice {
    border-color: var(--brand);
    background: var(--ar-primary-bg-subtle);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.18);
}

.frm-choice__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--ar-secondary-bg);
    color: var(--ar-secondary-color);
    font-size: 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-check:checked + .frm-choice .frm-choice__icon {
    background: var(--brand);
    color: var(--brand-ink);
}

.frm-choice__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ar-emphasis-color);
}

.frm-choice__sub {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ar-secondary-color);
}

.frm-choice__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ar-secondary-color);
}

/* Variantă compactă, pe un rând, pentru întrebările secundare. Aici cardul mare
   ar fi disproporționat, deci punem o bulină clasică de radio. */
.frm-choice--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.frm-choice--row::before {
    content: "";
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border: 2px solid var(--ar-border-color);
    border-radius: 50%;
    background: var(--ar-body-bg);
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

/* Buline pline fără element separat: îngroșăm borderul până umple cercul. */
.btn-check:checked + .frm-choice--row::before {
    border-color: var(--brand);
    border-width: 0.3125rem;
}

.btn-check:checked + .frm-choice--row {
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.18);
}

.frm-choice--row .frm-choice__body {
    display: flex;
    flex-direction: column;
}

.frm-choice--row .frm-choice__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.frm-choice--row .frm-choice__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Zona de upload (M1 · carte de identitate)
   ========================================================================== */

/* Input-ul de fișier stă transparent PESTE zonă, nu ascuns într-un label:
   așa clickul cade oriunde în chenar, iar drag & drop-ul merge nativ, fără
   niciun listener de dragover/drop. */
.frm-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.875rem;
    border: 1px dashed var(--ar-border-color);
    border-radius: 0.5rem;
    background: var(--ar-tertiary-bg);
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* :focus-within acoperă tastatura: input-ul e transparent, dar primește focus
   normal, iar fără regula asta n-ar exista niciun indiciu vizual. */
.frm-upload:hover,
.frm-upload:focus-within {
    border-color: var(--brand);
    background: var(--ar-primary-bg-subtle);
}

.frm-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.frm-upload__icon {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ar-secondary-color);
}

.frm-upload__label {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ar-emphasis-color);
    cursor: pointer;
}

/* Numele fișierelor pot fi lungi și fără spații — fără asta ies din chenar. */
.frm-upload__hint {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ar-secondary-color);
    overflow-wrap: anywhere;
}

.frm-upload.is-filled {
    border-style: solid;
    border-color: var(--brand);
    background: var(--ar-primary-bg-subtle);
}

.frm-upload.is-filled .frm-upload__icon {
    color: var(--brand-dark);
}

/* Fișierele deja salvate rămân în afara input-ului transparent care acoperă
   zona de upload, astfel încât linkurile pot fi accesate cu mouse-ul și
   tastatura fără să deschidă selectorul de fișiere. */
.frm-upload-saved {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.frm-upload-saved__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ar-border-color);
    border-radius: 0.5rem;
    background: var(--ar-body-bg);
    color: var(--ar-body-color);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-decoration: none;
}

.frm-upload-saved__link:hover,
.frm-upload-saved__link:focus-visible {
    border-color: var(--brand);
    color: var(--brand-dark);
}

.frm-upload-saved__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.frm-upload-saved__action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    white-space: nowrap;
    color: var(--brand-dark);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .frm-upload-saved__link {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .frm-upload-saved__action {
        width: 100%;
        margin-left: 1.625rem;
    }
}


/* Lista de bifat (M2 · coduri CAEN secundare)
   Checkbox-uri, nu <select multiple>: acolo bifarea mai multor coduri cerea
   Ctrl / ⌘ apăsat, ceea ce pe touch nici nu există.
   ========================================================================== */

.frm-lista {
    border: 1px solid var(--ar-border-color);
    border-radius: 0.5rem;
    /* Colțurile rotunjite trebuie să taie și zona derulabilă de dedesubt,
       altfel primul rând iese peste chenar. */
    overflow: hidden;
}

/* Capul cu câmpul de căutare stă în AFARA zonei derulabile: înăuntru ar pleca în
   sus la primul scroll, exact când e cel mai util. */
.frm-lista__cap {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--ar-border-color);
    background: var(--ar-tertiary-bg);
}

.frm-lista__cauta {
    position: relative;
}

.frm-lista__cauta i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--ar-secondary-color);
    /* Altfel iconița înghite clickul care ar trebui să ducă în câmp. */
    pointer-events: none;
}

.frm-lista__cauta .form-control {
    padding-left: 2.25rem;
}

/* Derulare pe listă, nu pe pagină: nomenclatorul complet are ~600 de coduri și
   ar împinge butonul „Continuă" la câteva ecrane distanță. */
.frm-lista__scroll {
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

.frm-lista__grup {
    margin: 1rem 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ar-secondary-color);
}

/* Primul titlu n-are nevoie de spațiu deasupra — îl dă deja padding-ul zonei
   derulabile. Se țintește ÎNVELIȘUL primului grup, nu titlul: titlul e primul
   copil în fiecare înveliș, deci `.frm-lista__grup:first-child` le-ar prinde pe
   toate. */
.frm-lista__scroll > [data-lista-grup]:first-child .frm-lista__grup {
    margin-top: 0;
}

/* Doar pe verticală: `padding` scurt ar șterge și `padding-left: 1.625rem` din
   .form-check, iar checkbox-ul are `margin-left: -1.625rem` — ar ieși din chenar
   și zona derulabilă l-ar tăia, fiindcă `overflow-y` decupează și pe orizontală. */
.frm-lista__rand {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0;
}

/* Rândurile filtrate de căutare și grupurile rămase fără rânduri.
   `.form-check` e `display: block` din temă, iar `[hidden]` din foaia
   browserului pierde în fața oricărei declarații de autor — de-aia regula.
   Rândurile ar fi acoperite oricum de `[data-when][hidden]` de mai sus, dar
   ascunderea din căutare nu trebuie să depindă de existența acelei reguli.

   ATENȚIE: ascuns de căutare NU înseamnă dezactivat. Un cod bifat se trimite
   chiar dacă filtrul îl scoate din ecran — vezi applyLists din
   registration-wizard.js. */
.frm-lista__rand[hidden],
[data-lista-grup][hidden] {
    display: none !important;
}

.frm-lista__gol {
    margin: 0;
    padding: 1rem 0;
    font-size: 0.875rem;
    text-align: center;
    color: var(--ar-secondary-color);
}

.frm-lista__rand .form-check-label {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ar-body-color);
    cursor: pointer;
}

.frm-lista__rand .form-check-input {
    cursor: pointer;
}

/* Codul stă înaintea denumirii fiindcă e reperul: cifrele de aceeași lățime îl
   fac o coloană citibilă, nu un text care se mișcă de la un rând la altul. */
.frm-lista__rand .form-check-label strong {
    color: var(--ar-emphasis-color);
    font-variant-numeric: tabular-nums;
}


/* Ecranul final (M5)
   ========================================================================== */

.frm-final-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ar-primary-bg-subtle);
    color: var(--brand-dark);
    font-size: 2rem;
}


/* Marcaj temporar pentru modulele neimplementate. De șters la final.
   ========================================================================== */

.frm-todo {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--ar-border-color);
    border-radius: 0.5rem;
    color: var(--ar-secondary-color);
    font-size: 0.875rem;
}


/* Sub lg stepper-ul stă deasupra formularului, orizontal și derulabil, ca să
   nu împingă primul câmp sub fold.
   ========================================================================== */

@media (max-width: 991.98px) {
    .frm-page {
        --frm-header-offset: 4.5rem;
    }

    .frm-stepper {
        display: flex;
        gap: 0;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        /* Ascunde scrollbar-ul pe Firefox; pe WebKit e mai jos. */
        scrollbar-width: none;
    }

    .frm-stepper::-webkit-scrollbar {
        display: none;
    }

    /* Lățime fixă, nu „cât ține conținutul": cu flex-basis auto, eticheta lungă
       („Identitate & contact") ieșea din coloană și se suprapunea peste pasul
       următor. Fixând-o, textul se rupe pe rânduri în loc să dea pe dinafară. */
    .frm-step {
        flex: 0 0 6.75rem;
        width: 6.75rem;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0;
        text-align: center;
    }

    /* Pe orizontală linia leagă marker-ul curent de următorul. */
    .frm-step:not(:last-child)::before {
        left: calc(50% + 1.25rem);
        right: calc(-50% + 1.25rem);
        top: 1rem;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .frm-step__body {
        padding-top: 0;
    }

    .frm-step__label {
        font-size: 0.8125rem;
    }

    /* Sub-titlurile fac rândul prea înalt când pașii sunt pe orizontală. */
    .frm-step__hint {
        display: none;
    }

    .frm-step__body {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Bara rămâne — e informația utilă. Procentul scris nu încape. */
    .frm-step__percent {
        display: none;
    }
}


/* Pasul „contact" — datele de contact, emailul trimis, codul din SMS
   Cardul, câmpurile și butoanele vin din regulile de mai sus: aici e doar ce
   nu există în restul formularului.
   ========================================================================== */

/* Codul din SMS: cifre mari, rărite, ca să se citească dintr-o privire și să se
   verifice ușor față de SMS. tabular-nums ține lățimea fixă în timp ce tastezi. */
.frm-code.form-control {
    max-width: 13rem;
    height: auto;
    padding: 0.625rem 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
    /* letter-spacing adaugă spațiu și după ultima cifră, ceea ce împinge textul
       vizual spre stânga. Compensăm cu aceeași valoare. */
    text-indent: 0.4em;
}

.frm-code::placeholder {
    color: var(--ar-border-color);
    font-weight: 400;
    letter-spacing: inherit;
}


/* Rândul cu „Trimite din nou"
   ========================================================================== */

.frm-foot {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--ar-secondary-color);
}

/* Butonul e semantic buton, dar trebuie să arate ca un link în frază — Around
   colorează .btn-link cu galbenul de brand, ilizibil pe alb. */
.frm-foot .btn-link {
    padding: 0;
    border: 0;
    vertical-align: baseline;
    color: var(--brand-dark);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.frm-foot .btn-link:hover {
    color: #6b5100;
}

/* M4 authorization labels and locked third-party rows. */
.frm-marcaj {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ar-secondary-color);
    white-space: nowrap;
}

.frm-lista__rand--lock .form-check-input:disabled,
.frm-lista__rand--lock .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
}

.frm-lista__rand--lock .form-check-input,
.frm-lista__rand--lock .form-check-label {
    cursor: default;
}

.frm-lista__lock {
    margin-left: 0.375rem;
    font-size: 0.875em;
    color: var(--ar-secondary-color);
}
/* Status and locked-review states used by the persisted wizard. */
.frm-status-banner {
  align-items: flex-start;
  background: #eef5ff;
  border: 1px solid #bad1f4;
  border-radius: 14px;
  color: #27496f;
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
}

.frm-status-banner--success {
  background: #edf9f3;
  border-color: #b7e2cb;
  color: #246247;
}

.frm-status-banner--danger {
  background: #fff0f1;
  border-color: #efc2c5;
  color: #8b343a;
}

.frm-status-banner--secondary {
  background: #f3f5f7;
  border-color: #d8dde3;
  color: #555f6d;
}

.frm-status-banner__icon {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
}

.frm-status-banner__copy,
.frm-status-banner__copy strong,
.frm-status-banner__copy > span,
.frm-status-banner__copy small {
  display: block;
}

.frm-status-banner__copy strong {
  color: inherit;
  font-size: 1rem;
  margin: 2px 0 3px;
}

.frm-status-banner__copy small {
  margin-top: 5px;
  opacity: .8;
}

.frm-status-banner__meta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

[data-formular].is-read-only .frm-alegere__card,
[data-formular].is-read-only .frm-upload,
[data-formular].is-read-only .form-check-label {
  cursor: default;
}

[data-formular].is-read-only input:disabled,
[data-formular].is-read-only select:disabled,
[data-formular].is-read-only textarea:disabled {
  opacity: .78;
}