/* ==========================================================================
   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: auto;
    /* 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;
}

/* Varianta blocată (ex. TVA la dosarele din campania 24Broker): alegerea
   rămâne vizibilă, dar nu poate fi schimbată din formular — fără cursor
   pointer și fără feedback de hover pe varianta neselectată. */
.btn-check:disabled + .frm-choice {
    cursor: default;
}

.btn-check:disabled:not(:checked) + .frm-choice--row {
    opacity: 0.5;
}

.btn-check:disabled:not(:checked) + .frm-choice:hover {
    border-color: var(--ar-border-color);
}

/* 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șiere alese, dar încă netrimise. Stau după zona de upload (input-ul
   transparent o acoperă complet), ca butonul „×" să fie efectiv apăsabil. */
.frm-upload-staged {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.frm-upload-staged:empty {
    display: none;
}

.frm-upload-staged__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border: 1px dashed var(--ar-border-color);
    border-radius: 0.5rem;
    background: var(--ar-tertiary-bg);
    font-size: 0.8125rem;
    line-height: 1.35;
}

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

.frm-upload-staged__remove {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--ar-secondary-color);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.frm-upload-staged__remove:hover,
.frm-upload-staged__remove:focus-visible {
    background: var(--ar-danger-bg-subtle);
    color: var(--ar-danger);
}

/* 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__item {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
}

.frm-upload-saved__item .frm-upload-saved__link {
    flex: 1 1 auto;
}

.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__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    padding: 0;
    border: 1px solid var(--ar-border-color);
    border-radius: 0.5rem;
    background: var(--ar-body-bg);
    color: var(--ar-body-color);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.frm-upload-saved__remove:hover,
.frm-upload-saved__remove:focus-visible {
    border-color: var(--ar-danger);
    color: var(--ar-danger);
}

.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;
}

/* Câmpuri cu un singur document (nu `multiple`): un fișier nou ales nu se
   adaugă, îl înlocuiește pe cel salvat la trimitere. Chenarul fișierului
   vechi rămâne „tăiat" — nuanța slabă de danger (fundal + linie) citește ca
   un semnal, nu ca o eroare. Textul explicit de dedesubt e altă poveste: pe
   --ar-danger plin arăta ca un mesaj de validare eșuată, deci acela e info. */
.frm-upload-saved.is-pending-replace .frm-upload-saved__link {
    border-color: var(--ar-danger-border-subtle);
    background: var(--ar-danger-bg-subtle);
}

.frm-upload-saved.is-pending-replace .frm-upload-saved__name {
    color: var(--ar-secondary-color);
    text-decoration: line-through;
    text-decoration-color: var(--ar-danger);
}

/* Doar boldat, ca-n starea normală a link-ului — culoarea de brand aici s-ar
   citi ca un CTA activ, ceea ce nu mai e cazul pentru fișierul înlocuit. */
.frm-upload-saved.is-pending-replace .frm-upload-saved__action {
    color: var(--ar-emphasis-color);
}

.frm-upload-saved__replace-note {
    display: none;
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ar-info-text-emphasis);
}

.frm-upload-saved.is-pending-replace .frm-upload-saved__replace-note {
    display: block;
}

@media (max-width: 575.98px) {
    .frm-upload-saved__link {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        column-gap: 0.625rem;
        row-gap: 0.25rem;
    }

    .frm-upload-saved__link > i {
        grid-row: 1 / span 2;
        margin-top: 0.125rem;
    }

    .frm-upload-saved__name {
        grid-column: 2;
    }

    .frm-upload-saved__action {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }

    .frm-upload-saved__remove {
        align-self: flex-start;
        height: 2.375rem;
    }
}


/* 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 X din N” + numele pasului curent, pe un rând sub cercuri (vizibil doar
   pe telefon, prin d-md-none din markup). */
.frm-stepper-now {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.frm-stepper-now__count {
    color: var(--ar-secondary-color);
}

.frm-stepper-now__label {
    color: var(--ar-heading-color, var(--ar-body-color));
    font-weight: 500;
    text-align: right;
}

/* Doar pe telefon (sub md) — tableta și desktopul rămân cum erau.
   Stepper-ul rămâne doar cu cercurile, toate pe un rând, fără etichete: cu 6
   pași, derularea orizontală de mai sus ascundea jumătate din ei. Numele pasului
   curent stă în rândul „Pasul X din N” de sub ele.
   ========================================================================== */

@media (max-width: 767.98px) {
    .frm-stepper {
        overflow: visible;
        padding-bottom: 0;
    }

    /* Fiecare pas ia o parte egală din rând; ultimul vizibil doar cât cercul.
       Linia pornește după cerc și se oprește înaintea următorului. */
    .frm-step {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 0;
        text-align: left;
    }

    .frm-step:not([hidden]):not(:has(~ .frm-step:not([hidden]))) {
        flex: 0 0 auto;
    }

    .frm-step:not(:last-child)::before {
        left: 2.375rem;
        right: 0.375rem;
    }

    /* Fără etichete, singurul reper al unui pas e numărul lui: pașii făcuți îl
       păstrează, în galben deschis, cu o bifă mică în colț în loc de bifa mare
       din cerc. Pasul curent e galben plin, cu o aură galbenă mai apăsată decât
       cea de bază, ca să nu se confunde cu ei. */
    .frm-step.is-done .frm-step__marker {
        background: rgba(var(--brand-rgb), 0.55);
        border-color: transparent;
    }

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

    .frm-step.is-done .frm-step__check {
        position: absolute;
        right: -0.1875rem;
        bottom: -0.1875rem;
        display: grid;
        place-items: center;
        width: 0.9375rem;
        height: 0.9375rem;
        border-radius: 50%;
        background: var(--brand-ink);
        color: var(--brand);
        font-size: 0.625rem;
    }

    .frm-step.is-current .frm-step__marker {
        box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.4);
    }

    /* Pasul 1 e login-ul: după autentificare nu te mai poți întoarce la el, deci
       arată stins, ca un pas indisponibil, nu ca unul făcut pe care poți apăsa. */
    .frm-step--login.is-done {
        opacity: 0.55;
    }

    /* Eticheta, sub-titlul și bara rămân în DOM, dar doar pentru cititoarele de
       ecran: cercurile clicabile își păstrează numele accesibil. */
    .frm-step__body {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}


/* 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;
}

/* Popup de confirmare la ștergere (@default, #frmConfirmModal)
   ==========================================================================
   Around setează `--ar-modal-footer-gap: 0` global — bun pentru un footer cu
   un singur buton, dar „Renunță" și „Șterge fișierul" ajung lipite. Ridicăm
   variabila doar aici, nu global, ca să nu mut spațierea din alte modale
   (ex. cel de la atestatul ISF din M2). */
#frmConfirmModal .modal-footer {
    --ar-modal-footer-gap: 1rem;
    padding-top: 1.1875rem;
}

#frmConfirmModal .modal-body {
    padding-top: 1.1875rem;
    padding-bottom: 1.1875rem;
}

.frm-doc-download {
    gap: .5rem;
    line-height: 1;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.frm-doc-download:hover,
.frm-doc-download:focus-visible {
    border-bottom-color: currentColor;
}