/* ============================================================================
   cont/ — crearea contului ePortal. Bootstrap 5.3 simplu, cu limbajul vizual
   de la hub.eprim.ro (tokenii, fonturile Inter/Sora, antetul „pastila").
   Ca sesizari/, NU leaga css/eportal-base.css (resetul lui se bate cu
   Bootstrap). Tokenii de brand de mai jos sunt ai modulului cont/: paleta
   serviciilor publice (albastrul guvernamental #004890, textul #16324f,
   benzile #f3f7fc, ca registrulcladirilor.gov.ro), cu contrast AA verificat
   (primar 9:1 pe alb, text secundar 5,7:1, succes 5,3:1). Culorile extinse
   vin din ../css/eportal-palette.css, legat inaintea acestui fisier.
   ========================================================================== */
:root {
    /* Paleta serviciilor publice (inspirata de registrulcladirilor.gov.ro) */
    --primary: #004890;
    --primary-rgb: 0, 72, 144;
    --primary-2: #0a5aa8;
    --primary-deep: #03254d;
    --accent-rgb: 125, 196, 255;
    --bg: #f3f7fc;
    --surface: #ffffff;
    --border: #dde6f0;
    --text: #16324f;
    --muted: #55697e;
    --emerald-text: #177a55;
    --shadow-sm: 0 1px 3px rgba(8, 37, 73, 0.06), 0 6px 18px rgba(8, 37, 73, 0.06);
    --shadow-lg: 0 12px 30px rgba(2, 36, 72, 0.12);
    --radius: 20px;
    --font-display: 'Sora', 'Inter', sans-serif;

    /* Interactiunea butoanelor, ca in sesizari/ */
    --primary-hover: #003a75;
    --primary-activ: var(--primary-deep);

    /* Bootstrap citeste propriile variabile — le legam de cele de mai sus */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-body-color: var(--text);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
    --bs-border-radius: .6rem;
}

body {
    background:
        radial-gradient(ellipse 55% 40% at 12% -6%, rgba(var(--primary-rgb), 0.10), transparent 60%),
        radial-gradient(ellipse 45% 35% at 92% 4%, rgba(var(--accent-rgb), 0.16), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, .h4, .h5, legend {
    font-family: var(--font-display);
    color: var(--text);
}

/* Loaderul paginii (stratul .acc-loader, pus pe <html> de js/account-loader.js inainte de primul desen): cat timp
   <html> are clasa acc-loading, fondul paginii acopera interfata, cu o caseta alba — indicatorul Bootstrap si textul
   „Se incarca…” — ca stratul #app-loading de pe harta din sesizari/. Fondul e opac (acolo e straveziu, peste harta):
   aici ascunde pagina care se construieste dedesubt. Cand clasa dispare, stratul se stinge, apoi scriptul il scoate. */
.acc-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    /* stratul sta pe <html>, in afara lui <body>: fontul si marimea nu se mostenesc de la Bootstrap */
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    line-height: 1.5;
    transition: opacity .2s ease;
}
html:not(.acc-loading) .acc-loader {
    opacity: 0;
    pointer-events: none;
}
.acc-loader-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    font-weight: 500;
    color: var(--text);
}
.acc-loader-box .spinner-border {
    width: 22px;
    height: 22px;
    border-width: 2.5px;
}

/* Link „sari la continut" — vizibil doar la focus (tastatura) */
.skip-link {
    position: absolute;
    top: -80px;
    left: 12px;
    z-index: 10000;
    background: var(--primary);
    color: var(--surface);
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}

.skip-link:focus { top: 12px; }

/* Butoanele Bootstrap cu albastrul de brand (Bootstrap 5.3 nu preia --bs-primary in butoane) */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-activ);
    --bs-btn-active-border-color: var(--primary-activ);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}

/* ====== Antetul „pastila" — acelasi ca in hub / sesizari, dar in fluxul paginii ====== */
/* Cadrul paginilor (antet, subsol, cutia ROeID, taburi, pasi, intrebari) e desenat de componente: ele se asaza ca blocuri,
   ca marginile si latimile continutului lor sa ramana cele de dinainte */
eportal-account-header,
eportal-account-footer,
eportal-account-roeid,
eportal-account-tabs,
eportal-account-steps,
eportal-account-faq {
    display: block;
}

/* In fluxul paginii, nu fix: pe un formular lung antetul lipit ar acoperi titlurile sectiunilor */
.eportal-header {
    position: relative;
    z-index: 1000;
    margin-top: 16px;
}

.eportal-container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.eportal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.eportal-nav .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}

.eportal-nav .brand-mark svg { display: block; }

.eportal-nav .brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: xx-large;
    line-height: 32px;
    margin: 0;
    color: var(--text);
}

.eportal-nav .brand-name span:first-child { color: var(--primary); }

.eportal-nav .brand-app {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
}

.eportal-nav .brand-domain {
    display: block;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.eportal-nav .btn-auth {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--surface);
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.32);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

/* Butoanele din dreapta antetului: comutatorul de limba si autentificarea */
.eportal-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.eportal-nav .btn-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
}

.eportal-nav .btn-lang:hover {
    border-color: var(--primary);
}

.eportal-nav .btn-auth:hover {
    color: var(--surface);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.42);
}

@media (max-width: 640px) {
    .eportal-header { margin-top: 10px; }
    .eportal-container { width: calc(100% - 24px); }
    .eportal-nav { padding: 6px 10px; gap: 8px; }
    .eportal-nav .brand-name { font-size: 1.2rem; line-height: 1.2; }
    .eportal-nav .brand-domain { display: none; }
    /* sigla mai mica: altfel numele „ePortal” iese din bloc si ajunge sub butonul de limba */
    .eportal-nav .brand { gap: 8px; }
    .eportal-nav .brand-mark svg { width: 52px; height: 35px; }
    .eportal-nav .btn-auth { padding: 8px 14px; font-size: 0.8rem; }
    /* limba: doar iconita (numele ramane in aria-label), intr-un buton rotund cat un deget */
    .eportal-nav .btn-lang { padding: 0; width: 38px; height: 38px; justify-content: center; }
    .eportal-nav .btn-lang span { display: none; }
}

@media (max-width: 400px) {
    .eportal-nav .brand-app { display: none; }
}

/* ====== Decoratiunile hub.eprim.ro (cuburile din colturi) ======
   Copiate din css/eportal-base.css (pe care cont/ nu il leaga — resetul lui se bate cu Bootstrap). Stau sub continut:
   body e reperul lor, iar antetul, pagina si subsolul urca deasupra (z-index).
   body e si coloana paginii: antetul sus, subsolul jos (si pe paginile scurte), continutul intre ele; ce iese din
   el (decoratiunile) se taie. Derularea ramane a ferestrei: html are overflow-y propriu, altfel „overflow: hidden”
   de pe body ar trece la fereastra si pagina nu s-ar mai putea derula. */
html {
    overflow-y: auto;
}

body {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
}

.sticker {
    position: absolute;
    inset: 0;
    overflow: hidden; /* decoratiunile nu au voie sa forteze latimea paginii */
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.sticker-item { position: absolute; }
.sticker-top-left { top: 0; left: 0; transform-origin: left top; }
.sticker-top-right { top: 0; right: 0; transform-origin: right top; }
.sticker-bottom-left { bottom: 0; left: 0; transform-origin: left bottom; }
.sticker-bottom-right { bottom: 0; right: 0; transform-origin: right bottom; }
.sticker .scale-75 { transform: scale(.75); }
.sticker .scale-50 { transform: scale(.5); }

.acc-page,
.acc-footer {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .sticker-top-right, .sticker-bottom-left { display: none; }
}

/* ====== Continutul ====== */
.acc-page {
    padding-block: 2rem 3rem;
}

.acc-intro {
    max-width: 46rem;
    color: var(--muted);
}

/* Pe telefon introducerea e restransa la doua randuri (restul se taie cu „…”), cu mai putin spatiu dedesubt, ca
   formularul sa urce in primul ecran; cititoarele de ecran citesc tot textul */
@media (max-width: 575.98px) {
    .acc-intro {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-size: .9375rem;
        margin-bottom: .75rem !important;
    }
}

.acc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .acc-card { padding: 2rem 2.25rem; }
}

/* Taburile: pe ecrane inguste devin randuri de meniu, nu derulare orizontala */
.acc-tabs {
    gap: .25rem;
    border-bottom: 0;
    margin-bottom: 1rem;
}

.acc-tabs .nav-link {
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600;
    border: 1px solid transparent;
}

.acc-tabs .nav-link:hover { color: var(--primary); }

.acc-tabs .nav-link.active {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* Pe telefon taburile stau pe un rand, ca iconite; doar tabul activ isi arata textul (taiat cu „…” daca nu incape).
   Textul celorlalte ramane in pagina, ascuns vizual, pentru cititoarele de ecran. */
@media (max-width: 575.98px) {
    .acc-tabs { flex-wrap: nowrap; gap: .125rem; margin-bottom: .75rem; }
    .acc-tabs .nav-item { flex: 0 0 auto; }
    .acc-tabs .nav-item:has(> .nav-link.active) { flex: 0 1 auto; min-width: 0; }
    .acc-tabs .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 44px;
        max-width: 100%;
        padding: 0 .5rem;
    }
    .acc-tabs .nav-link.active { padding: 0 .75rem; }
    .acc-tabs .nav-link:not(.active) i { margin-right: 0 !important; }
    .acc-tabs .nav-link.active .acc-tab-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .acc-tabs .nav-link:not(.active) .acc-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Pe ecranele cele mai inguste (320 px), cu multe taburi: iconitele se strang, ca textul tabului activ sa mai incapa */
@media (max-width: 359.98px) {
    .acc-tabs .nav-link { min-width: 34px; padding: 0 .35rem; }
    .acc-tabs .nav-link.active { padding: 0 .6rem; }
}

.acc-roeid {
    border: 1px dashed rgba(var(--primary-rgb), .35);
    background: rgba(var(--primary-rgb), .05);
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

/* Pe fondul albastrui al cutiei, --primary ajunge la 4.3:1; varianta mai inchisa trece de 4.5:1 (AA) */
.acc-roeid .btn-outline-primary {
    --bs-btn-color: var(--primary-hover);
    --bs-btn-border-color: var(--primary-hover);
}

/* Pe telefon cutia ROeID e un singur rand: intrebarea si butonul; explicatia se ascunde, ca formularul sa incapa
   in primul ecran */
@media (max-width: 575.98px) {
    .acc-roeid {
        flex-wrap: nowrap !important;
        gap: .5rem !important;
        padding: .5rem .75rem;
        margin-bottom: .75rem !important;
        font-size: .875rem;
    }
    .acc-roeid .acc-roeid-text { display: none; }
    .acc-roeid .btn {
        --bs-btn-padding-y: .3rem;
        --bs-btn-padding-x: .7rem;
        --bs-btn-font-size: .8125rem;
        flex: none;
        white-space: nowrap;
    }
}

/* ====== Formularul ====== */
/* Pasul 1, „Tipul de persoana”: cele doua optiuni stau pe acelasi rand si pe telefon (form-check-inline le rupea pe
   doua randuri: marginea din dreapta a fiecareia nu mai incapea in card); se rup doar pe ecranele cele mai inguste */
.acc-st-kind {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}
.acc-st-kind .form-check {
    margin-bottom: 0;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .acc-st-kind { gap: .25rem .5rem; font-size: .875rem; }
}

/* blocul entitatii (persoana juridica) si actul de identitate cuprind cate o sectiune intreaga, deci se asaza ca ea */
eportal-account-complete-pj,
eportal-account-id-document-pf {
    display: block;
}

.acc-section {
    border: 0;
    padding: 0;
    margin: 0 0 2rem;
}

.acc-section > legend {
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

/* Pasul 2, desenat din config/account-form.json: mai putin spatiu intre sectiuni si campuri */
.acc-compact .acc-section {
    margin-bottom: 1.25rem;
}

.acc-compact .acc-section > legend {
    font-size: 1rem;
    padding-bottom: .3rem;
    margin-bottom: .6rem;
}

/* Etichetele plutitoare, mai mici decat cele Bootstrap (3.5rem), in tot modulul cont/; textul ramane 1rem (16px),
   ca telefonul sa nu mareasca pagina la atingerea campului */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(2.9rem + 2px);
    min-height: calc(2.9rem + 2px);
    padding: .8rem .75rem;
    line-height: 1.2;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-select {
    padding-top: 1.3rem;
    padding-bottom: .3rem;
}

.form-floating > label {
    padding: .8rem .75rem;
    font-size: .95rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.8) translateY(-.6rem) translateX(.15rem);
}

.acc-compact .acc-photo-preview {
    max-height: 90px;
}

.acc-doc-preview {
    max-height: 140px;
    object-fit: contain;
}

/* Etichete plutitoare (.form-floating): mesajul de eroare sta sub campul intreg, frate cu .form-floating, nu cu input-ul */
.was-validated .acc-field:has(:invalid) > .invalid-feedback,
.acc-field:has(.is-invalid) > .invalid-feedback {
    display: block;
}

.form-floating > label {
    color: var(--muted);
}

/* textarea in .form-floating: inaltimea o da clasa, nu rows */
.form-floating > .acc-textarea {
    height: 8rem;
}

/* alegerile (tipul contului, domiciliul): grila egala, nu btn-group — pe ecran ingust nu se mai rupe pe randuri */
.acc-choice {
    display: grid;
    gap: .5rem;
}

.acc-choice-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.acc-choice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.acc-choice > .btn {
    border-radius: var(--bs-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: calc(3.5rem + 2px);
    white-space: normal;
}

@media (max-width: 575.98px) {
    .acc-choice-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Se marcheaza doar ce e gresit: bifele verzi pe zeci de campuri (si pe cele optionale, goale) doar incarca ecranul */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--bs-border-color);
    background-image: none;
    padding-right: .75rem;
}

.was-validated .form-select:valid {
    --bs-form-select-bg-icon: none;
    background-image: var(--bs-form-select-bg-img);
    padding-right: 2.25rem;
}

.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
}

.was-validated .form-check-input:valid { border-color: var(--bs-border-color); }
.was-validated .form-check-input:valid:checked { background-color: var(--primary); border-color: var(--primary); }
.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }



.acc-done-icon {
    font-size: 3rem;
    color: var(--emerald-text);
}

.acc-done-msg,
.acc-done-steps {
    max-width: 36rem;
}

/* Regulile parolei, bifate pe masura ce se scrie (activare.html) */
.acc-rules li { color: var(--muted); }
.acc-rules li.acc-rule-ok { color: var(--emerald-text); }

/* ====== Ajutor ====== */
.acc-steps {
    counter-reset: pas;
    list-style: none;
    padding: 0;
}

.acc-steps > li {
    counter-increment: pas;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.25rem;
}

.acc-steps > li::before {
    content: counter(pas);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--primary);
    background: rgba(var(--primary-rgb), .1);
}

/* Capcana pentru roboti: in afara ecranului, nu display:none (unii roboti le sar pe acelea) */
.acc-su-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.acc-su-msg {
    border-radius: 12px;
    padding: .6rem .85rem;
    margin-bottom: .5rem;
    background: var(--bs-tertiary-bg);
}

.acc-su-support {
    background: rgba(var(--primary-rgb), .07);
    border-left: 3px solid var(--primary);
}

.acc-su-msg p { white-space: pre-line; }

/* ====== Subsol ====== */
.acc-footer {
    color: var(--muted);
    font-size: .875rem;
    padding-block: 1.5rem 2rem;
}

.acc-footer a { color: var(--muted); }
.acc-footer a:hover { color: var(--primary); }

/* Pe desktop pagina e un cadru fix, cat fereastra: antetul sus, subsolul jos, continutul (main) intre ele. Fereastra
   nu se mai deruleaza (body: overflow hidden); cand continutul e mai inalt decat locul lui, se deruleaza doar el.
   main se intinde pe toata latimea (continutul isi pastreaza latimea prin padding), ca bara de derulare sa stea la
   marginea ferestrei, nu in mijlocul paginii. Spatiile verticale sunt mai mici, ca paginile scurte (crearea contului,
   autentificarea) sa incapa fara derulare. Pe telefon si pe tableta pagina se deruleaza ca inainte. */
@media (min-width: 992px) {
    body {
        height: 100vh;
        height: 100dvh;
    }
    eportal-account-header,
    eportal-account-footer {
        flex: none;
    }
    main.acc-page {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        overflow-y: auto;
        padding-inline: max(16px, calc((100% - 1180px) / 2));
        padding-block: 1.25rem 1.5rem;
        scrollbar-width: thin;
    }
    .acc-footer { padding-block: 1rem 1.25rem; }
}

/* „Setari cookie-uri”: buton (deschide un dialog, nu duce nicaieri), dar arata ca linkurile de langa el */
.acc-footer .acc-footer-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
}
.acc-footer .acc-footer-link:hover { color: var(--primary); }

/* activare.html: o singura coloana ingusta, formularul are doua campuri */
.acc-narrow {
    max-width: 36rem;
}

/* termeni.html, confidentialitate.html, cookie.html: textul juridic, pe o coloana usor de citit, centrata; titlurile
   sectiunilor mai mici decat titlul paginii, cu aer deasupra; tabelul cookie-urilor se deruleaza in latime pe telefon */
.acc-legal {
    max-width: 52rem;
    margin: 0 auto;
    line-height: 1.65;
}

.acc-legal h1 { margin-bottom: 1.25rem; }

.acc-legal h2 {
    font-size: 1.15rem;
    margin: 1.75rem 0 .6rem;
}

.acc-legal p,
.acc-legal li { color: var(--muted); }

.acc-legal a { overflow-wrap: anywhere; }

.acc-legal .table { font-size: .9rem; }

/* creare.html, pasul 1: formularul scurt in stanga, iar in dreapta cum decurge + ROeID — fara spatiu gol in card */
@media (min-width: 992px) {
    .acc-aside {
        border-left: 1px solid var(--border);
        padding-left: 2rem;
    }
}

.acc-aside-title {
    color: var(--muted);
    letter-spacing: .06em;
    font-size: .78rem;
    font-weight: 700;
}

.acc-steps-sm > li {
    padding-left: 2.5rem;
    margin-bottom: .9rem;
}

.acc-steps-sm > li::before {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .85rem;
}

.acc-steps-sm .small {
    color: var(--muted);
}

/* ====== profil.html — Contul meu ====== */
/* Poza de profil: cadru rotund de marime fixa, ca poza sa nu impinga textul */
.acc-pr-frame {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.acc-pr-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-pr-photo-actions {
    min-width: 12rem;
    flex: 1;
}

/* Semnatura olografa (<eportal-account-handwritten>): hartie alba cu chenar punctat; touch-action: none, ca pe
   telefon degetul sa deseneze, nu sa deruleze pagina */
.acc-hw-pad {
    display: block;
    width: 100%;
    max-width: 36rem;
    aspect-ratio: 3 / 1;
    background: var(--surface);
    border: 1px dashed var(--muted);
    border-radius: .6rem;
    touch-action: none;
    cursor: crosshair;
}

.acc-hw-saved {
    display: block;
    max-width: 18rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .6rem;
}

/* autentificare.html: cardul ingust, centrat; „sau” intre formular si ROeID / cartea electronica, cu linii de o parte si alta */
.acc-login {
    max-width: 30rem;
    margin: 0 auto;
}


/* Celelalte cai de autentificare: pastile mici ca butonul de autentificare din antet (.btn-auth) — iconita la stanga
   textului, pe un rand care se rupe pe ecran ingust; conturate, ca „Autentificare” sa ramana actiunea principala, si pline la hover */
.acc-lg-ways-title {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

/* Butoanele stau pe un rand si il umplu, fiecare cat ii cere textul (ROeID, CEI, STS, Certificat); pe telefon,
   cate doua, egale */
.acc-lg-ways-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-lg-ways-row .acc-lg-way { flex: 1 1 auto; }

@media (max-width: 420px) {
    .acc-lg-ways-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.acc-lg-way {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
}

.acc-lg-way:hover,
.acc-lg-way:focus-visible {
    color: var(--surface);
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    border-color: var(--primary);
}

/* Sigla furnizorului (account.logos) in locul iconitei; butonul cu sigla ramane deschis la hover, ca sigla — care are
   culorile ei — sa nu ajunga pe fond inchis */
.acc-lg-logo {
    height: 1.25rem;
    width: auto;
    flex: none;
}

.acc-lg-way:has(.acc-lg-logo):hover,
.acc-lg-way:has(.acc-lg-logo):focus-visible {
    color: var(--primary-hover);
    background: rgba(var(--primary-rgb), .08);
    border-color: var(--primary);
}

/* sigla lata isi are numele in ea: eticheta ramane doar pentru cititoarele de ecran (butonul are aria-label) */
.acc-lg-way-wordmark span { display: none; }

.acc-roeid-logo {
    height: 1.25rem;
    width: auto;
    vertical-align: text-bottom;
}

.acc-lg-or {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.acc-lg-or::before,
.acc-lg-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

/* Sub formular: ajutorul (parola / utilizatorul uitat) ca doua pastile discrete, cu iconita, care umplu randul si se
   rup pe ecran ingust; dedesubt, despartit de o linie, contul nou — intrebarea in stanga, butonul in dreapta */
.acc-lg-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}

.acc-lg-help-link {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .06);
    color: var(--primary);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.acc-lg-help-link:hover,
.acc-lg-help-link:focus-visible {
    background: rgba(var(--primary-rgb), .12);
    border-color: rgba(var(--primary-rgb), .35);
    color: var(--primary-hover);
}

.acc-lg-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    color: var(--muted);
}

.acc-lg-create-link {
    border-radius: 999px;
    padding-inline: 14px;
    font-weight: 600;
}

/* Codul QR al aplicatiei de autentificare (<eportal-account-login>, <eportal-account-mfa>): marime fixa, fara netezire, ca sa se poata scana */
.acc-mfa-qr {
    width: 12rem;
    height: 12rem;
    image-rendering: pixelated;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .5rem;
}

/* Notificarile necitite: bara in culoarea primara in stanga */
.acc-nt-unread {
    border-left: 3px solid var(--primary);
}

/* Identitatea folosita acum (<eportal-account-identities>): aceeasi bara primara in stanga */
.acc-id-active {
    border-left: 3px solid var(--primary);
}

/* Dialogul de step-up: fereastra <dialog> nativa, cu aspectul cardurilor */
.acc-stepup {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
    color: var(--text);
    padding: 1.5rem;
    width: min(26rem, calc(100vw - 2rem));
}

.acc-stepup::backdrop {
    background: rgba(var(--primary-rgb), .25);
}