/* Paginile publice pay.autonom.ro: plata, returul, stările linkului, paginile legale, pagina de start.
   Fără CSS inline (CSP style-src 'self'). Designul: redesignul lui Bogdan Udroiu (N42, 2026-10-15), „Plată online –
   redesign” (desktop 1440, mobil 390): antetul alb, conținutul pe #f6f7f9, cardurile albe cu raza 24, cutia de plată
   indigo, butonul cu degradeu, subsolul albastru. Fonturile vin din tokens.css (Figtree, Titillium Web, locale).
   Abaterile (contrastul AA, greutatea 600 în loc de 700) sunt descrise în docs/design/README.md. */

:root {
    --p-indigo: #1e13bc;            /* titlurile, linkurile, cutia de plată */
    --p-indigo-inchis: #140c80;     /* linkurile la hover */
    --p-indigo-fundal: #eeedfb;     /* cercul „expirat”, numerele pașilor */
    --p-text: #12151d;
    --p-text-corp: #3d4453;
    --p-text-secundar: #5c6470;
    --p-fundal: #f6f7f9;
    --p-bordura: #e8eaee;
    --p-bordura-tare: #d3d7dd;
    --p-albastru-text: #0759ab;     /* pastilele, butonul secundar */
    --p-albastru-fundal: #ebf5ff;
    --p-albastru-info: #e8f4ff;
    --p-albastru-info-bordura: #cce6ff;
    --p-albastru-clasa: #0a72d9;    /* designul: #1a8cff (3,3:1 pe alb); #0a72d9 are 4,7:1 */
    --p-subsol: #0a72d9;
    --p-pe-indigo: #d6d3f5;         /* textul secundar din cutia de plată */
    --p-verde: #11a554;
    --p-verde-fundal: #e7faf0;
    --p-rosu: #c81e4a;
    --p-rosu-fundal: #fde3ea;
    --p-portocaliu: #c2410c;        /* avertismentul (4,8:1 pe fundalul lui) */
    --p-portocaliu-fundal: #fff1e6;
    --p-pictograma: #aeb4be;
    --p-degradeu: linear-gradient(90deg, #2b24c4, #231fbd 10%, #1b13a8 28%, #150f96 46%, #100a7e 64%, #0b0758 82%, #0a0a4a);
    --p-umbra-plata: 0 12px 40px rgba(30, 19, 188, 0.1);
    --p-umbra-bara: 0 -8px 24px rgba(18, 21, 29, 0.08);
    --p-raza-card: 24px;
    --p-raza-cutie: 16px;
    --p-latime: 1200px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--p-fundal);
    color: var(--p-text);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 24px;
}

img {
    max-width: 100%;
}

a {
    color: var(--p-indigo);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--p-indigo-inchis);
}

:focus-visible {
    outline: 2px solid var(--p-indigo);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--p-indigo);
    font-family: var(--font-display);
    font-weight: 600;
}

h1 {
    font-size: 40px;
    line-height: 48px;
    text-wrap: balance;
}

.ic-svg {
    flex: 0 0 auto;
    display: block;
}

/* Text doar pentru cititoarele de ecran: unitatea dotărilor pe desktop (designul arată iconița și numărul). */
.dotare-unitate {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Antetul: alb, sigla în stânga; „Plată securizată” și telefonul de ajutor în dreapta. --- */
.antet {
    background: #ffffff;
    border-bottom: 1px solid var(--p-bordura);
}

.antet-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--p-latime);
    margin: 0 auto;
    padding: 16px 24px;
}

.antet-sigla {
    display: flex;
    align-items: center;
}

.sigla {
    display: block;
    width: auto;
    height: 44px;
}

.sigla-text {
    color: var(--p-indigo);
    font-family: var(--font-display);
    font-size: 24px;
}

.antet-dreapta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.antet-ajutor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--p-text-corp);
    font-weight: 500;
    text-decoration: none;
}

.antet-ajutor .ic-svg {
    color: var(--p-indigo);
}

.antet-ajutor:hover {
    color: var(--p-indigo);
    text-decoration: underline;
}

/* --- Pastilele: „Plată securizată”, „Rezervarea B 1001”, „Link valabil până la …”. --- */
.pastila {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
}

.pastila-albastra {
    background: var(--p-albastru-fundal);
    color: var(--p-albastru-text);
    font-weight: 600;
}

.pastila-albastra strong {
    font-weight: 600;
}

.pastila-alba {
    align-self: flex-start;
    margin-top: 4px;
    border: 1px solid var(--p-bordura);
    background: #ffffff;
    color: var(--p-text-corp);
}

.pastila-alba .ic-svg {
    color: var(--p-indigo);
}

.pastila-alba strong {
    color: var(--p-text);
    font-weight: 600;
}

/* --- Conținutul paginii (între antet și subsol). --- */
.pagina {
    flex: 1 0 auto;
}

.pagina-in {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: var(--p-latime);
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* --- Pagina de plată: salutul, titlul, valabilitatea. --- */
.plata-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
}

.plata-intro p {
    margin: 0;
}

.plata-salut {
    color: var(--p-indigo);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.plata-subtitlu {
    color: var(--p-text-corp);
    font-size: 18px;
    line-height: 28px;
}

/* Cele două coloane: detaliile (stânga) și cutia de plată (dreapta); sub ~1020 px cutia trece dedesubt. */
.plata-coloane {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.plata-stanga {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Cardul cu detaliile rezervării (sau ale plății). --- */
.card-detalii {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: var(--p-raza-card);
    background: #ffffff;
}

.detalii-antet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.detalii-titlu {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rez-clasa {
    color: var(--p-albastru-clasa);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rez-model {
    font-size: 28px;
    line-height: 34px;
    overflow-wrap: anywhere;
}

.rez-similar {
    color: var(--p-text-secundar);
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 400;
}

.rez-corp {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 28px;
}

.rez-masina {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Poza modelului: deocamdată pictograma (RR va trimite poza; N42). */
.rez-imagine {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border-radius: var(--p-raza-cutie);
    background: var(--p-fundal);
    color: var(--p-pictograma);
}

.rez-imagine .ic-svg {
    stroke-width: 1.2;
}

.rez-dotari {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--p-indigo);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.rez-dotari li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid var(--p-bordura-tare);
}

.rez-dotari li:last-child {
    border-right: 0;
}

/* Preluarea și predarea, legate de linia indigo. */
.rez-traseu {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rez-traseu li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 20px 26px;
}

.rez-traseu li:last-child {
    padding-bottom: 0;
}

.rez-traseu li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: var(--p-indigo);
}

.rez-traseu li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 4px;
    left: 5px;
    width: 2px;
    background: var(--p-indigo);
}

.rez-traseu-eticheta {
    color: var(--p-text-secundar);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase;
}

.rez-traseu-data {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}

.rez-traseu-loc {
    color: var(--p-text-corp);
}

/* Perechile etichetă / valoare salvate la creare. */
.detalii-perechi {
    margin: 0;
    border-top: 1px solid var(--p-bordura);
}

.detalii-perechi div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--p-bordura);
}

.detalii-perechi dt {
    color: var(--p-text-corp);
}

.detalii-perechi dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Liniile de preț și totalul. */
.detalii-linii {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    border-top: 1px solid var(--p-bordura);
}

.detalii-linie {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}

.detalii-linie > span:first-child {
    color: var(--p-text-corp);
}

.detalii-suma {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.detalii-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--p-indigo);
    color: var(--p-indigo);
    font-family: var(--font-display);
    font-weight: 600;
}

.detalii-linii .detalii-total:first-child {
    margin-top: 0;
    border-top: 0;
}

/* Fără linii de preț, totalul vine imediat sub perechi (linia ultimei perechi e separatorul). */
.detalii-perechi + .detalii-linii {
    padding-top: 0;
    border-top: 0;
}

.detalii-total-eticheta {
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
}

.detalii-tva {
    color: var(--p-text-secundar);
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
}

.detalii-total-suma {
    font-size: 26px;
    line-height: 32px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.detalii-garantie {
    padding-top: 0;
}

/* Nota gri (datele de facturare). */
.nota-gri {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--p-raza-cutie);
    background: var(--p-fundal);
    color: var(--p-text-corp);
    font-size: 14px;
    line-height: 22px;
}

.nota-gri .ic-svg {
    margin-top: 1px;
    color: var(--p-text-secundar);
}

.nota-gri strong {
    color: var(--p-text);
    font-weight: 600;
}

/* --- Cutia de plată: capul indigo cu suma, corpul alb cu bifele și butonul. --- */
.card-plata {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--p-raza-card);
    overflow: hidden;
    box-shadow: var(--p-umbra-plata);
}

.card-plata-cap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 28px 32px;
    background: var(--p-indigo);
    color: #ffffff;
}

.card-plata-titlu {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}

.card-plata-nota {
    color: var(--p-pe-indigo);
    font-size: 14px;
    line-height: 20px;
}

.card-plata-suma {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 600;
    line-height: 58px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.card-plata-suma span {
    font-size: 26px;
}

.card-plata-corp {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 32px 32px;
    background: #ffffff;
}

.formular-plata {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

/* Bifele (amândouă obligatorii, verificate și pe server). */
.bifa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--p-text-corp);
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
}

.bifa input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--p-indigo);
    cursor: pointer;
}

.obligatoriu {
    color: var(--p-rosu);
}

/* Butonul de plată: pastila cu degradeul indigo. Cât lipsește o bifă, pare dezactivat (fără JS; serverul verifică). */
.buton-plata {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-radius: 9999px;
    background: var(--p-degradeu);
    color: #ffffff;
    font-family: var(--font-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.buton-plata:hover,
.buton-plata:focus-visible {
    color: #ffffff;
    filter: brightness(1.15);
}

.buton-plata:focus-visible {
    outline-offset: 3px;
}

.buton-plata:disabled,
.pagina-plata:has(.bifa input:not(:checked)) .buton-plata {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

.buton-secundar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 24px;
    border-radius: 9999px;
    background: var(--p-albastru-fundal);
    color: var(--p-albastru-text);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.buton-secundar:hover {
    color: var(--p-albastru-text);
    background: #daedff;
}

.nota-netopia {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--p-text-secundar);
    font-size: 13px;
    line-height: 20px;
}

.nota-netopia .ic-svg {
    margin-top: 1px;
    color: var(--p-verde);
}

.plata-verificare {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--p-albastru-text);
}

.plata-verificare h2 {
    font-size: 22px;
    line-height: 28px;
}

.plata-verificare p {
    margin: 0;
    color: var(--p-text-corp);
    font-size: 14px;
    line-height: 22px;
}

/* Bara fixă cu butonul (doar pe telefon). */
.bara-plata {
    display: none;
}

/* Capcana: ascunsă vizual, în afara ecranului (un om nu o completează). */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Mesajele: eroarea, informația, avertismentul demonstrativ, marcajul de revizie. --- */
.alerta,
.info,
.demo {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--p-albastru-info-bordura);
    border-radius: var(--p-raza-cutie);
    background: var(--p-albastru-info);
    color: var(--p-albastru-text);
    font-size: 14px;
    line-height: 22px;
}

.alerta {
    border-color: #f6b8c8;
    background: var(--p-rosu-fundal);
    color: var(--p-rosu);
    font-weight: 500;
}

.demo {
    border-color: #f8c9a6;
    background: var(--p-portocaliu-fundal);
    color: var(--p-portocaliu);
    font-weight: 500;
}

.info-cu-iconita {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-cu-iconita .ic-svg {
    margin-top: 1px;
}

.info strong {
    font-weight: 600;
}

/* Valorile încă necompletate (DE_COMPLETAT): evidențiate până la revizia juridică. */
.dc {
    padding: 0 4px;
    border: 1px dashed var(--marcaj-bordura);
    border-radius: 4px;
    background: var(--marcaj-fundal);
    color: var(--marcaj-text);
}

/* --- Blocul legal NETOPIA (informațiile despre comerciant și despre plată), sub cele două coloane. --- */
.card-legal {
    padding: 32px;
    border-radius: var(--p-raza-card);
    background: #ffffff;
}

.card-legal h2 {
    margin: 0 0 20px;
    font-size: 22px;
    line-height: 28px;
}

.legal-grila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
}

.legal-grila dt {
    font-weight: 600;
}

.legal-grila dd {
    margin: 2px 0 0;
    color: var(--p-text-corp);
}

.sectiune-legal {
    width: 100%;
    max-width: var(--p-latime);
    margin: 0 auto;
    padding: 0 24px 64px;
}

/* --- Ecranele de rezultat: confirmată, eșuată, expirat, în verificare. --- */
.rezultat-in {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 16px 64px;
}

.rezultat-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.rezultat-cap h1 {
    font-size: 36px;
    line-height: 42px;
}

.rezultat-cap p {
    max-width: 400px;
    margin: 0;
    color: var(--p-text-corp);
}

.rezultat-cap .rezultat-mic {
    font-size: 14px;
    line-height: 20px;
}

.rezultat-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background: var(--p-albastru-fundal);
    color: var(--p-albastru-text);
}

.rezultat-ic-ok {
    background: var(--p-verde-fundal);
    color: var(--p-verde);
}

.rezultat-ic-ok .ic-svg,
.rezultat-ic-eroare .ic-svg {
    stroke-width: 2.2;
}

.rezultat-ic-eroare {
    background: var(--p-rosu-fundal);
    color: var(--p-rosu);
}

.rezultat-ic-expirat {
    background: var(--p-indigo-fundal);
    color: var(--p-indigo);
}

.rezultat-ic-atentie {
    background: var(--p-portocaliu-fundal);
    color: var(--p-portocaliu);
}

.card-rezultat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--p-raza-card);
    background: #ffffff;
}

.rezultat-suma {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.rezultat-suma span {
    color: var(--p-text-secundar);
}

.rezultat-suma strong {
    color: var(--p-indigo);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    white-space: nowrap;
}

.rezultat-rand {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--p-bordura);
    font-size: 15px;
}

.card-rezultat > .rezultat-rand:first-child {
    padding-top: 0;
    border-top: 0;
}

.rezultat-rand > span:first-child {
    color: var(--p-text-secundar);
}

.rezultat-valoare {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.rezultat-sub {
    color: var(--p-text-secundar);
    font-size: 14px;
    font-weight: 400;
}

.rezultat-pasi-titlu {
    color: var(--p-text);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 24px;
}

.rezultat-pasi {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pas;
}

.rezultat-pasi li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--p-text-corp);
    font-size: 14px;
    line-height: 22px;
    counter-increment: pas;
}

.rezultat-pasi li::before {
    content: counter(pas);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: var(--p-indigo-fundal);
    color: var(--p-indigo);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.rezultat-jos {
    padding-top: 14px;
}

.rezultat-butoane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Rotița returului (se reîmprospătează singur). */
.sp {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    border: 3px solid var(--p-bordura-tare);
    border-top-color: var(--p-indigo);
    border-radius: 50%;
    animation: rot 0.8s linear infinite;
}

@keyframes rot {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp {
        animation-duration: 3s;
    }
}

/* --- Paginile de text (termeni, confidențialitate, livrare, contact) și pagina de start: un card alb. --- */
.continut {
    flex: 1 0 auto;
    width: calc(100% - 32px);
    max-width: 860px;
    margin: 48px auto 64px;
    padding: 40px;
    border-radius: var(--p-raza-card);
    background: #ffffff;
}

.text h1 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
}

.text h2 {
    margin: 32px 0 8px;
    font-size: 20px;
    line-height: 26px;
}

.text p,
.text li {
    color: var(--p-text-corp);
    line-height: 26px;
}

.text ul {
    padding-left: 20px;
}

.text .info {
    margin: 0 0 16px;
}

.dl {
    margin: 0;
}

.dl dt {
    margin-top: 12px;
    font-weight: 600;
}

.dl dt:first-child {
    margin-top: 0;
}

.dl dd {
    margin: 2px 0 0;
    color: var(--p-text-corp);
}

.continut-centrat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.continut-centrat p {
    margin: 0;
    color: var(--p-text-corp);
}

/* --- Subsolul albastru: sloganul, politicile, siglele, datele firmei, drepturile. --- */
.subsol {
    background: var(--p-subsol);
    color: #ffffff;
}

.subsol-in {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: var(--p-latime);
    margin: 0 auto;
    padding: 48px 24px 32px;
}

.subsol-titlu {
    max-width: 560px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
}

.subsol-rand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
}

.subsol-linkuri ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 22px;
}

.subsol a {
    color: #ffffff;
    text-decoration: none;
}

.subsol a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.subsol :focus-visible {
    outline-color: #ffffff;
}

.subsol-sigle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 24px;
}

.subsol-sigle img {
    display: block;
    width: auto;
    height: 40px;
}

.sigla-anpc {
    display: block;
}

.sigla-text-mic {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.subsol-firma {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 13px;
    line-height: 20px;
}

.subsol-firma p {
    margin: 0 0 4px;
}

.subsol-copyright {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

/* --- Ecranele medii: cutia de plată sub detalii, blocul legal pe o coloană. --- */
@media (max-width: 860px) {
    .legal-grila {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Telefonul (designul mobil, 390): fără telefonul din antet, bara fixă cu butonul, cardurile mai strânse. --- */
@media (max-width: 640px) {
    h1 {
        font-size: 32px;
        line-height: 38px;
    }

    .antet-in {
        padding: 12px 16px;
    }

    .sigla {
        height: 36px;
    }

    .antet-ajutor {
        display: none;
    }

    .antet .pastila {
        gap: 6px;
        padding: 6px 12px;
        font-size: 13px;
        line-height: 18px;
    }

    .pagina-in {
        gap: 20px;
        padding: 28px 16px 32px;
    }

    .plata-intro {
        gap: 10px;
    }

    .plata-salut {
        font-size: 18px;
        line-height: 26px;
    }

    .plata-subtitlu {
        font-size: 16px;
        line-height: 24px;
    }

    .pastila-alba {
        padding: 6px 14px;
        font-size: 13px;
        line-height: 18px;
    }

    .plata-coloane,
    .plata-stanga {
        gap: 16px;
    }

    .card-detalii {
        gap: 18px;
        padding: 24px;
    }

    .detalii-antet {
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .detalii-antet .pastila {
        flex: 0 0 auto;
        padding: 4px 12px;
        font-size: 13px;
        line-height: 18px;
    }

    .rez-clasa {
        font-size: 14px;
        line-height: 18px;
    }

    .rez-model {
        font-size: 24px;
        line-height: 30px;
    }

    .rez-similar {
        display: block;
        font-size: 14px;
        line-height: 20px;
    }

    .rez-corp {
        gap: 18px;
    }

    .rez-imagine {
        height: 150px;
    }

    .rez-dotari {
        font-size: 13px;
        line-height: 18px;
    }

    .rez-dotari li {
        padding: 0 10px;
    }

    /* Pe telefon, dotările sunt text („5 locuri”), fără iconițe; pastila arată doar referința. */
    .rez-dotari .ic-svg {
        display: none;
    }

    .dotare-unitate {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .ref-eticheta {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rez-traseu {
        padding-top: 18px;
        border-top: 1px solid var(--p-bordura);
    }

    .rez-traseu li {
        padding-bottom: 16px;
    }

    .rez-traseu-eticheta {
        font-size: 12px;
        line-height: 16px;
    }

    .rez-traseu-data {
        font-size: 16px;
        line-height: 24px;
    }

    .rez-traseu-loc {
        font-size: 14px;
        line-height: 20px;
    }

    .detalii-linii,
    .detalii-linie {
        font-size: 15px;
    }

    .detalii-linie {
        padding: 8px 0;
    }

    .detalii-total-eticheta {
        font-size: 20px;
        line-height: 26px;
    }

    .detalii-total-suma {
        font-size: 24px;
        line-height: 30px;
    }

    .nota-gri {
        gap: 10px;
        padding: 14px 16px;
        font-size: 13px;
        line-height: 20px;
    }

    .card-plata-cap {
        padding: 22px 24px;
    }

    .card-plata-titlu {
        font-size: 20px;
        line-height: 26px;
    }

    .card-plata-suma {
        order: 2;
        margin-top: 0;
        font-size: 42px;
        line-height: 48px;
    }

    .card-plata-suma span {
        font-size: 22px;
    }

    .card-plata-nota {
        order: 3;
        font-size: 13px;
        line-height: 18px;
    }

    .card-plata-corp,
    .formular-plata {
        gap: 16px;
    }

    .card-plata-corp {
        padding: 22px 24px;
    }

    .bifa input {
        width: 22px;
        height: 22px;
        margin-top: 0;
    }

    /* Butonul din cutie se mută în bara fixă de jos. */
    .buton-plata-card {
        display: none;
    }

    .bara-plata {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--p-bordura);
        background: #ffffff;
        box-shadow: var(--p-umbra-bara);
    }

    .bara-plata .buton-plata {
        padding: 14px 24px;
    }

    .bara-plata-nota {
        color: var(--p-text-secundar);
        font-size: 12px;
        line-height: 16px;
        text-align: center;
    }

    .card-legal {
        padding: 24px;
    }

    .card-legal h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .rezultat-in {
        padding: 32px 16px 40px;
    }

    .rezultat-cap h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .continut {
        margin: 24px auto 40px;
        padding: 24px;
    }

    .text h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .subsol-in {
        gap: 22px;
        padding: 32px 20px 28px;
    }

    .subsol-titlu {
        font-size: 22px;
        line-height: 28px;
    }

    .subsol-rand {
        flex-direction: column;
        gap: 22px;
    }

    .subsol-sigle {
        gap: 16px 20px;
    }

    .subsol-copyright {
        font-size: 13px;
    }

    /* Loc pentru bara fixă: ultimul rând al subsolului nu rămâne sub ea. */
    .cu-bara-plata .subsol-in {
        padding-bottom: 132px;
    }
}