/* ============================================================
   ghidbucurestean.ro — style.css
   Reconstruit de la zero după imaginile de referință.
   Full-width, paletă verde #649B1C, mobile-first.
   ============================================================ */

:root {
    --verde: #649B1C;
    --verde-inchis: #3E6111;
    --verde-hover: #558617;
    --verde-pal: #EFF6E3;
    --verde-mediu: #C9E39F;
    --fundal: #F4F5F2;
    --alb: #FFFFFF;
    --cerneala: #17181A;
    --gri-text: #67696B;
    --bordura: #DEDEDC;
    --bordura-soft: #ECECEA;
    --rosu: #C9553D;
    --chihlimbar: #B97A16;
    --albastru: #0055A5;
    --visiniu: #7A1F2B;
    --umbra-1: 0 1px 2px rgba(23, 24, 26, 0.05), 0 2px 10px rgba(23, 24, 26, 0.05);
    --umbra-2: 0 2px 4px rgba(23, 24, 26, 0.05), 0 14px 36px rgba(62, 97, 17, 0.12);
    --raza-card: 16px;
    --raza-mica: 12px;
    --tranzitie: 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
    /* Inaltimea hartilor mari pe desktop (benzinarii, harta orasului,
       cautare, metrou). Fixa si aceeasi peste tot: harta e reperul, iar
       panoul din stanga primeste cat ramane din rand. Invers — cum era
       inainte — orice titlu mai lung umfla harta, fiindca ea se intinde
       peste ambele randuri ale grilei. */
    --h-harta-desktop: 840px;
}

/* ---------- Font auto-gazduit ----------
   Figtree, acelasi font ca inainte, dar servit de pe serverul nostru:
   asa nu mai pleaca IP-ul vizitatorului catre fonts.gstatic.com inainte
   sa fi apucat sa aleaga ceva in banda de cookie-uri.
   Un SINGUR fisier variabil (axa wght 300-900) acopera toate greutatile
   folosite in site (400/500/600/700/800) - mai putin de descarcat decat
   cele 5 fisiere statice de dinainte.
   Subsetat la latin + latin-ext, deci diacriticele romanesti corecte
   (a-breve, s-virgula, t-virgula) sunt incluse.
   Calea e relativa la ACEST fisier, nu la <base href> din HTML: regulile
   url() din CSS se rezolva mereu fata de stylesheet, deci fontul trebuie
   sa stea langa el, in css/. */
@font-face {
    font-family: 'Figtree';
    src: url("figtree-var-latin-ext.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

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

body { overflow-x: hidden; max-width: 100vw; }

body {
    margin: 0;
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cerneala);
    background: var(--alb);
}

img, svg { max-width: 100%; }

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

:focus-visible { outline: 3px solid var(--verde-mediu); outline-offset: 2px; }

/* Învelișul full-width: toată lățimea ecranului, cu margini fluide */
.invelis { width: 100%; padding-left: clamp(16px, 3.5vw, 64px); padding-right: clamp(16px, 3.5vw, 64px); }

.ascuns-vizual {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Butoane ---------- */
.buton-primar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--verde);
    color: var(--alb);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--raza-mica);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--tranzitie), background var(--tranzitie);
}

.buton-primar svg { width: 17px; height: 17px; fill: var(--alb); }

/* Culoarea se repeta la hover si focus dinadins: regula globala
   a:hover de mai sus (linia ~68) are specificitate mai mare decat
   clasa singura, asa ca pe un <a class="buton-primar"> textul ar
   deveni verde pe fundal verde. Pe <button> problema nu exista, dar
   butoanele-link o au. */
.buton-primar:hover,
.buton-primar:focus-visible { color: var(--alb); }

.buton-primar:hover { background: var(--verde-hover); transform: translateY(-1px); }
.buton-primar:active { transform: translateY(0) scale(0.98); }
.buton-primar[disabled] { opacity: 0.65; cursor: default; transform: none; }

.buton-secundar {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    cursor: pointer;
    transition: border-color var(--tranzitie);
}

.buton-secundar:hover { border-color: var(--verde); color: var(--verde-inchis); }
.buton-secundar[hidden] { display: none; }

.buton-localizare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.buton-localizare svg { width: 16px; height: 16px; fill: var(--verde); flex: none; }

.buton-localizare:disabled { opacity: 0.6; cursor: default; }

.link-reseteaza {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gri-text);
    background: none;
    border: 0;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
}

.link-reseteaza:hover { color: var(--verde-inchis); }
.link-reseteaza[hidden] { display: none; }

.sageata-jos {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

/* ---------- Antet ---------- */
.antet {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--alb);
    border-bottom: 1px solid var(--bordura-soft);
}

.antet-interior { height: 66px; display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); flex-wrap: nowrap; }

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--cerneala);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex: none;
}

.logo-pin { width: 30px; height: 30px; fill: var(--verde); flex: none; }

/* Sigla în două culori: „ghid" și „.ro" în cerneală, „bucurestean" verde.
   La hover se inversează. Culoarea stă pe fiecare bucată în parte (nu pe
   .logo), ca inversarea să fie o simplă comutare între cele două reguli. */
.logo-parte { color: var(--cerneala); transition: color var(--tranzitie); }

.logo-parte-inversa { color: var(--verde); }

.logo:hover .logo-parte { color: var(--verde); }
.logo:hover .logo-parte-inversa { color: var(--cerneala); }

/* Fără overflow aici: submeniul e position: absolute în interiorul
   meniului, iar orice overflow != visible l-ar tăia. Meniul e ascuns
   oricum sub 1024px, unde îi lua locul sertarul, deci n-are ce să
   depășească pe lățime. */
.meniu { display: none; min-width: 0; }

.meniu-item {
    position: relative;
    font-size: 0.95rem;
    color: #3A3B3D;
    text-decoration: none;
    padding: 21px 0;
    white-space: nowrap;
}

a.meniu-item:hover { color: var(--verde-inchis); }

.meniu-activ { color: var(--verde-inchis); font-weight: 600; }

/* Dunga de sub itemul de meniu. Aceeasi geometrie pentru pagina curenta si
   pentru hover — o singura regula, ca sa nu poata ajunge la valori diferite
   daca se umbla la una dintre ele. */
.meniu-activ::after,
a.meniu-item::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 13px;
    height: 3px;
    border-radius: 2px;
    background: var(--verde);
}

/* Itemii care NU sunt pagina curenta au dunga desenata mereu, dar
   transparenta: asa hover-ul se stinge si se aprinde lin, cu tranzitie doar
   pe opacity, in loc sa apara brusc. :not(.meniu-activ) e obligatoriu —
   fara el, hover-ul peste pagina curenta i-ar decolora dunga verde.
   Specificitate: (0,3,2) fata de (0,1,1) a lui .meniu-activ::after. */
a.meniu-item:not(.meniu-activ)::after {
    background: var(--verde-mediu);
    opacity: 0;
    transition: opacity var(--tranzitie);
}

a.meniu-item:not(.meniu-activ):hover::after { opacity: 1; }

.meniu-inactiv { opacity: 0.55; cursor: default; }

.are-sageata::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
}

.meniu-dropdown { position: relative; display: flex; align-items: center; }

/* Părintele e link normal (click = navigare la pagina-hub), nu buton:
   deschiderea submeniului se face din CSS, la hover sau la focus. */
.meniu-dropdown-link { display: inline-flex; align-items: center; }

.meniu-dropdown:hover .sageata-jos,
.meniu-dropdown:focus-within .sageata-jos { transform: rotate(-135deg) translateY(2px); }

/* Panoul submeniului. position: absolute (nu fixed, ca înainte) — așa
   rămâne lipit de părinte fără JS de poziționare, iar hover-ul pe panou
   ține aprins :hover-ul de pe .meniu-dropdown, fiindcă panoul e copil.
   Ascuns cu visibility (nu display: none): iese din ordinea de tabulare,
   dar putem anima. Animăm doar opacity + transform. */
.submeniu {
    position: absolute;
    top: 100%;
    left: -8px;
    margin-top: 10px;
    z-index: 1200;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    padding: 8px;
    min-width: 218px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--tranzitie), transform var(--tranzitie), visibility var(--tranzitie);
}

/* Punte peste cei 10px de gol dintre părinte și panou: fără ea, mouse-ul
   iese din .meniu-dropdown în drum spre panou și submeniul clipește.
   Fiind copil al panoului, puntea „prinde" doar cât panoul e vizibil. */
.submeniu::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    height: 11px;
}

.meniu-dropdown:hover .submeniu,
.meniu-dropdown:focus-within .submeniu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submeniu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--raza-mica);
    font-size: 0.92rem;
    color: var(--cerneala);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tranzitie), color var(--tranzitie);
}

.submeniu-icoana { width: 17px; height: 17px; flex: none; fill: var(--verde); transition: fill var(--tranzitie); }

a.submeniu-item:hover { background: var(--verde-pal); color: var(--verde-inchis); }

a.submeniu-item:hover .submeniu-icoana,
.submeniu-activ .submeniu-icoana { fill: var(--verde-inchis); }

a.submeniu-item:active { background: var(--verde-mediu); }

.submeniu-item.meniu-inactiv { color: var(--gri-text); opacity: 0.7; }

.submeniu-item small { display: block; font-size: 0.72rem; color: var(--gri-text); font-weight: 400; }

.submeniu-activ { color: var(--verde-inchis); font-weight: 600; background: var(--verde-pal); }

.antet-actiuni { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

/* Butoanele din dreapta antetului (Cont Firmă + Contact).
   Ascunse sub 640px: acolo nu mai încap lângă siglă și hamburger, iar
   sertarul le preia (vezi inc/1header.php). Aliniate la marginea din
   dreapta a învelișului prin margin-left: auto de pe .antet-actiuni. */
.antet-buton {
    display: none;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    flex: none;
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    color: var(--cerneala);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tranzitie), border-color var(--tranzitie), color var(--tranzitie), transform var(--tranzitie);
}

.antet-buton svg { width: 17px; height: 17px; flex: none; fill: var(--verde); transition: fill var(--tranzitie); }

/* Varianta doar cu iconiță: pătrată, textul trăiește în aria-label */
.antet-buton-icoana { width: 42px; padding: 0; justify-content: center; }

.antet-buton:hover { background: var(--verde-pal); border-color: var(--verde); color: var(--verde-inchis); }
.antet-buton:hover svg { fill: var(--verde-inchis); }
.antet-buton:active { transform: scale(0.97); }

@media (min-width: 640px) {
    .antet-buton { display: inline-flex; }
}

.buton-meniu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    flex: none;
}

.buton-meniu-linie {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--cerneala);
    transition: transform var(--tranzitie), opacity var(--tranzitie);
}

.buton-meniu[aria-expanded="true"] .buton-meniu-linie:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.buton-meniu[aria-expanded="true"] .buton-meniu-linie:nth-child(2) { opacity: 0; }
.buton-meniu[aria-expanded="true"] .buton-meniu-linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Butonul cu lupa de langa hamburger. Poarta si .buton-meniu, deci ia de
   acolo dimensiunea, fundalul si alinierea — aici raman doar cele doua
   iconite suprapuse si trecerea de la una la alta. Ascuns implicit; apare
   doar pe telefon, la fel ca bara pe care o deschide. */
.buton-cautare-mobil { display: none; position: relative; }

.buton-cautare-icoana {
    position: absolute;
    width: 22px;
    height: 22px;
    fill: var(--cerneala);
    transition: opacity var(--tranzitie), transform var(--tranzitie);
}

/* Lupa se roteste si se micsoreaza iesind, X-ul vine invers — o singura
   miscare, doua iconite. Doar transform si opacity, nimic care sa ceara
   recalcularea layoutului. */
.buton-cautare-x { opacity: 0; transform: rotate(-90deg) scale(0.6); }

.buton-cautare-mobil[aria-expanded="true"] .buton-cautare-lupa { opacity: 0; transform: rotate(90deg) scale(0.6); }
.buton-cautare-mobil[aria-expanded="true"] .buton-cautare-x { opacity: 1; transform: none; }

/* ---------- Sertar ---------- */
.sertar {
    position: sticky;
    top: 66px;
    z-index: 1090;
    background: var(--alb);
    border-bottom: 1px solid var(--bordura-soft);
    box-shadow: var(--umbra-1);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.sertar[hidden] { display: none; }

.sertar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px clamp(16px, 3.5vw, 64px);
    text-decoration: none;
    color: var(--cerneala);
    font-size: 0.97rem;
    border-bottom: 1px solid var(--fundal);
}

.sertar-item small { color: var(--gri-text); }

a.sertar-item:active { background: var(--verde-pal); }

.sertar-eticheta {
    padding: 13px clamp(16px, 3.5vw, 64px) 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gri-text);
}

.sertar-item-indentat { padding-left: calc(clamp(16px, 3.5vw, 64px) + 14px); }

/* ---------- Erou ---------- */
.erou { background: var(--fundal); padding-top: 36px; padding-bottom: 44px; }

.erou-grila { display: grid; gap: 32px; align-items: center; }

.erou-titlu {
    font-size: clamp(2.2rem, 4.6vw, 3.7rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 0 0 18px;
}

.punct-accent { color: var(--verde); }

.erou-subtitlu {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--gri-text);
    max-width: 44ch;
    margin: 0 0 26px;
}

.erou-subtitlu strong { color: inherit; font-weight: 600; }

.erou-cautare { display: flex; gap: 10px; max-width: 580px; }

.erou-cautare-cutie {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 0 16px;
    box-shadow: var(--umbra-1);
}

.erou-cautare-lupa { width: 18px; height: 18px; fill: var(--gri-text); flex: none; }

.erou-cautare-camp {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: 0;
    font: inherit;
    font-size: 0.98rem;
    color: var(--cerneala);
    background: none;
}

.erou-cautare-camp:focus { outline: none; }
.erou-cautare-cutie:focus-within { border-color: var(--verde); }

/* Pe desktop butonul isi arata textul si isi ascunde lupa — o lupa langa
   cuvantul "Cauta" ar fi de doua ori acelasi mesaj, iar in caseta exista deja
   una decorativa. */
.erou-cautare-buton-lupa { display: none; }

/* Bara de cautare de sub meniu (inc/7bara-cautare-mobil.php). Pe desktop nu
   exista deloc: meniul e complet, iar cautarea isi are locul in pagina
   principala. */
.bara-cautare-mobil { display: none; }

.bara-cautare-mobil-continut { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordura-soft); }

@media (max-width: 767px) {
    .buton-cautare-mobil { display: inline-flex; }

    /* Bara de sub meniu. Nu e sticky: antetul deja e (position: sticky), iar
       doua bare lipite de marginea de sus ar manca prea mult din ecran.

       Deschiderea se face din grid-template-rows, 0fr -> 1fr. E singura
       metoda care animeaza pana la inaltimea REALA a continutului, fara s-o
       stim dinainte: max-height ar cere o valoare ghicita, iar la inchidere
       ar sta pe loc cat dureaza diferenta dintre valoarea ghicita si cea
       reala. Browserele care nu stiu sa animeze grid-template-rows comuta
       instant — se deschide la fel, doar fara tranzitie. */
    .bara-cautare-mobil {
        display: grid;
        grid-template-rows: 0fr;
        background: var(--verde-pal);
        transition: grid-template-rows var(--tranzitie);
    }

    .bara-cautare-mobil[data-deschis="true"] { grid-template-rows: 1fr; }

    /* min-height: 0 e obligatoriu: fara el, elementul din grila nu are voie
       sa coboare sub inaltimea continutului si randul de 0fr n-ar inchide
       nimic. overflow taie ce iese in timpul animatiei. */
    .bara-cautare-mobil-interior {
        min-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity var(--tranzitie), transform var(--tranzitie);
    }

    .bara-cautare-mobil[data-deschis="true"] .bara-cautare-mobil-interior {
        opacity: 1;
        transform: none;
    }

    /* Telefon: butonul devine un patrat cu lupa. Textul lua din latimea
       campului, iar placeholderul se taia cu puncte-puncte.
       52px = 50px inaltimea campului + cele doua borduri ale casetei, deci
       butonul iese patrat si peste pragul de 44px cerut de un deget.
       Lupa DIN caseta dispare: altfel ar fi doua lupe alaturate, iar cea care
       chiar face ceva e a butonului. */
    .erou-cautare-lupa { display: none; }
    .erou-cautare-cutie { padding: 0 14px; }

    .erou-cautare-buton {
        flex: none;
        width: 52px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .erou-cautare-buton-lupa { display: block; width: 20px; height: 20px; fill: currentColor; }
    .erou-cautare-buton-text { display: none; }
}

.cautari-rapide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: var(--gri-text);
}

.chip-rapid {
    font-size: 0.82rem;
    color: #3A3B3D;
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 999px;
    padding: 6px 15px;
    text-decoration: none;
    transition: border-color var(--tranzitie), color var(--tranzitie);
}

a.chip-rapid:hover { border-color: var(--verde); color: var(--verde-inchis); }

.chip-inactiv { opacity: 0.65; cursor: default; }

.erou-harta {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--umbra-2);
    min-height: 320px;
}

#harta-erou { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.pin-punct-mare { width: 34px; height: 34px; border: 3px solid var(--alb); }

.leaflet-tooltip.harta-tooltip-leaflet {
    background: var(--alb);
    border: 0;
    border-radius: 14px;
    padding: 11px 16px;
    box-shadow: var(--umbra-2);
    font: inherit;
    color: var(--cerneala);
    display: flex;
    align-items: center;
    gap: 11px;
    line-height: 1.3;
    opacity: 1;
}

.leaflet-tooltip.harta-tooltip-leaflet::before { display: none; }


.tooltip-m {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--verde);
    color: var(--alb);
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-titlu { font-weight: 700; font-size: 0.95rem; }
.tooltip-sub { font-size: 0.75rem; color: var(--gri-text); }

.harta-zoom {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.zoom-buton {
    width: 38px;
    height: 38px;
    background: var(--alb);
    border-radius: 11px;
    box-shadow: var(--umbra-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #3A3B3D;
}

.zoom-localizare { border-radius: 50%; margin-top: 6px; }

.zoom-localizare svg { width: 18px; height: 18px; fill: #3A3B3D; }

/* ---------- Categorii ----------
   Mobile-first: pe telefon un singur card pe rând (la 2 pe rând, titlul
   și descrierea se rupeau pe prea multe rânduri ca să se citească).
   De la 768px trece la 3 pe rând, iar de la 1100px la 6 — vezi
   media query-urile de mai jos. */
.categorii {
    padding-top: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.categorie-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    padding: 24px 22px 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--umbra-1);
    text-align: center;
    align-items: center;
    transition: transform var(--tranzitie), box-shadow var(--tranzitie);
}

a.categorie-card:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
a.categorie-card:hover .categorie-sageata { transform: translateX(4px); }

.categorie-cap { display: flex; align-items: center; gap: 10px; }

.categorie-cap svg { width: 30px; height: 30px; fill: var(--verde); flex: none; }

.categorie-titlu { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }

.categorie-desc { font-size: 0.82rem; color: var(--gri-text); line-height: 1.55; }

.categorie-sageata { margin-top: auto; color: var(--verde); font-size: 1.2rem; transition: transform var(--tranzitie); }

.categorie-inactiva { opacity: 0.6; cursor: default; }

/* ---------- Panouri ---------- */
.panouri { padding-top: 18px; display: grid; gap: 16px; }

.panou {
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    padding: 22px;
    box-shadow: var(--umbra-1);
    display: flex;
    flex-direction: column;
}

.panou h2 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.panou-sub { font-size: 0.76rem; color: var(--gri-text); margin: 3px 0 12px; }

.panou-rand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.92rem;
    color: #3A3B3D;
    margin: 0;
    padding: 6px 0;
}

.rand-valuta { display: flex; align-items: center; gap: 9px; font-weight: 600; }

.steag { font-size: 1.05rem; }

.panou-valoare { font-weight: 600; color: var(--cerneala); margin-left: auto; }

.delta-sus { color: var(--verde); font-size: 0.8rem; font-weight: 600; min-width: 56px; text-align: right; }
.delta-jos { color: var(--rosu); font-size: 0.8rem; font-weight: 600; min-width: 56px; text-align: right; }

.panou-link { margin: auto 0 0; padding-top: 12px; font-size: 0.88rem; font-weight: 600; }

.panou-link a { text-decoration: none; }

.link-inactiv { color: var(--gri-text); opacity: 0.7; cursor: default; }

.mini-metrou {
    position: relative;
    display: block;
    background: #FAFAF8;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    padding: 8px;
    margin: 2px 0 4px;
}

.mini-metrou svg,
.mini-metrou img { display: block; width: 100%; height: auto; border-radius: calc(var(--raza-mica) - 3px); }

.m-insigna {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F2C500;
    border: 3px solid var(--alb);
    box-shadow: var(--umbra-1);
    color: var(--alb);
    font-weight: 800;
    font-size: 1.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lista-utile { list-style: none; margin: 4px 0 0; padding: 0; }

.lista-utile li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.88rem;
    color: #3A3B3D;
    padding: 7px 0;
}

.lista-utile svg { width: 17px; height: 17px; fill: var(--verde-inchis); flex: none; }

/* ---------- Banda CTA ---------- */
.banda-cta { padding-top: 20px; padding-bottom: 8px; }

.banda-cta-interior {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    background: var(--verde-pal);
    border-radius: var(--raza-card);
    padding: 22px 26px;
}

.cta-icon {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--verde);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon svg { width: 22px; height: 22px; fill: var(--alb); }

.cta-text { flex: 1; min-width: 240px; }

.cta-text h2 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }

.cta-text p { margin: 3px 0 0; font-size: 0.88rem; color: var(--gri-text); }

/* Pe telefon butonul benzii trece pe toata latimea.
   flex-basis: 100%, nu doar width: 100% — containerul e flex cu
   flex-wrap, iar baza de 100% forteaza si trecerea pe rand propriu,
   nu doar latimea. justify-content centreaza iconita si textul, care
   altfel ar ramane lipite in stanga butonului lat. */
@media (max-width: 767px) {
    .buton-cta { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Pagini interioare comune ---------- */
.pagina-interior { padding-top: 16px; }

/* Breadcrumb pe UN SINGUR rând, oriunde apare. Pe pagina unui articol cu
   titlu lung se rupea în trei rânduri și împingea tot conținutul în jos;
   acum depășirea se derulează lateral. Bara de derulare e ascunsă în toate
   cele trei sintaxe (WebKit, Firefox, Edge vechi) — se trage cu degetul sau
   cu trackpad-ul, nu arată ca un element de interfață. */
.breadcrumb ol {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--gri-text);
}

.breadcrumb ol::-webkit-scrollbar { display: none; }

/* flex-shrink: 0 — fără el, elementele s-ar comprima până la ruperea
   cuvintelor în loc să declanșeze derularea. */
.breadcrumb li { flex: 0 0 auto; white-space: nowrap; }

.breadcrumb li:not(:last-child)::after { content: "\203A"; margin-left: 6px; }

.breadcrumb a { color: var(--gri-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--verde-inchis); }
.breadcrumb li:last-child span { color: var(--cerneala); font-weight: 500; }

.pagina-titlu {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0;
}

.pagina-titlu-nota { font-size: 0.85rem; font-weight: 400; letter-spacing: 0; color: var(--gri-text); }

.pagina-subtitlu { margin: 5px 0 0; font-size: 0.93rem; color: var(--gri-text); }

.pagina-subtitlu strong { font-weight: 500; color: inherit; }

.insigne { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }

.insigna {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--verde-inchis);
    background: var(--verde-pal);
    padding: 4px 13px;
    border-radius: 999px;
}

.insigna-neutra { color: var(--gri-text); background: var(--fundal); }

/* Insigna care cere o privire, nu o alarma — advertoriale, termene
   depasite. Aceeasi familie cromatica cu .admin-insigna-atentie din
   style_admin.css, ca sa nu existe doua portocalii pe site. */
.insigna-atentie { color: var(--chihlimbar); background: #FBF1E1; }

.insigna-linie {
    display: inline-block;
    color: var(--alb);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 5px;
    margin-left: 5px;
    vertical-align: 1px;
}

.insigna-m1 { background: #FCCE0E; }
.insigna-m2 { background: #224291; }
.insigna-m3 { background: #ED2625; }
.insigna-m4 { background: #03783F; }
.insigna-m5 { background: #F8A51E; }
.insigna-m6 { background: #79C042; }

/* ---------- Benzinării ---------- */
.benzinarii-grila {
    padding-top: 16px;
    display: grid;
    gap: 18px;
    grid-template-areas:
        "cap"
        "harta"
        "lista";
}

.b-cap { grid-area: cap; min-width: 0; }

/* Invelisul coloanei din stanga (cap + panou). Pe mobil e transparent:
   display: contents il scoate din arbore ca si cutie, iar cele doua blocuri
   dinauntru redevin copii directi ai grilei, cu ariile lor — deci ordinea
   ramane titlu, harta, lista, exact ca inainte. Pe desktop redevine o cutie
   reala (vezi media query-ul de jos). */
.b-coloana { display: contents; }

.panou-lateral {
    grid-area: lista;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 18px;
    align-self: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.camp-cautare {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 11px 14px;
    margin-bottom: 16px;
}

.camp-cautare svg { width: 16px; height: 16px; fill: var(--gri-text); flex: none; }

.camp-cautare input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 0.9rem; background: none; }
.camp-cautare input:focus { outline: none; }
.camp-cautare:focus-within { border-color: var(--verde); }

/* #filtru-categorie moștenește .cp-select (flex:1, gândit pt. layout-ul
   orizontal .cp-formular de la coduri poștale) — aici e în .panou-lateral,
   flex-direction:column, deci flex:1 îl întindea pe toată înălțimea liberă. */
#filtru-categorie {
    flex: none;
    border-color: var(--verde);
}

.filtre-titlu { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; font-weight: 700; margin: 0 0 9px; }

.filtre-titlu-text { display: flex; align-items: center; gap: 8px; }

.filtre-titlu svg { width: 14px; height: 14px; fill: var(--gri-text); }

.filtre-titlu-retea { margin-top: 18px; }

.filtre-chipuri { display: flex; flex-wrap: wrap; gap: 7px; }

.chip-carburant {
    font: inherit;
    font-size: 0.79rem;
    padding: 5px 9px;
    border: 1px solid var(--bordura);
    border-radius: 999px;
    background: var(--alb);
    color: var(--cerneala);
    cursor: pointer;
    transition: transform var(--tranzitie), border-color var(--tranzitie);
}

.chip-carburant:hover { border-color: var(--verde); }
.chip-carburant:active { transform: scale(0.96); }

.chip-activ { background: var(--verde); border-color: var(--verde); color: var(--alb); font-weight: 600; }

.filtre-retele { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.chip-retea {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    background: var(--alb);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--tranzitie), transform var(--tranzitie);
}

.chip-retea:hover { border-color: var(--verde); }
.chip-retea:active { transform: scale(0.96); }

.chip-retea.chip-activ {
    border-color: var(--verde);
    border-width: 2px;
    background: var(--verde-pal);
}

.chip-retea img { width: 28px; height: 28px; object-fit: contain; }
.chip-retea .statie-logo { border: 0; width: 100%; height: 100%; }

.chip-retea-toate {
    width: auto;
    height: auto;
    padding: 5px 9px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.79rem;
    font-weight: 400;
    color: var(--cerneala);
}

.chip-retea-toate.chip-activ {
    background: var(--verde);
    border-color: var(--verde);
    border-width: 1px;
    color: var(--alb);
    font-weight: 600;
}

.localizare-stare {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--gri-text);
}

.localizare-stare-eroare { color: var(--rosu); }
.localizare-stare[hidden] { display: none; }

.lista-statii {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 2px 0 0;
    max-height: 460px;
    overflow-y: auto;
}

/* Container de scroll folosit doar pe harta Bucureștiului, ca butoanele de
   pagină să stea ÎN zona derulabilă, la capătul listei. Preia rolul de
   scroll de la .lista-statii — care rămâne neatinsă, fiind comună cu
   benzinăriile și cu paginile de preț carburant. */
.lista-scroll {
    margin: 6px 0 0;
    padding: 0 2px 0 0;
    max-height: 460px;
    overflow-y: auto;
}

.lista-scroll .lista-statii {
    margin-top: 0;
    padding-right: 0;
    max-height: none;
    overflow-y: visible;
}

/* ---------- Pagina de rezultate ---------- */
/* Formularul nu deseneaza nimic: .camp-cautare dinauntru are deja
   chenarul si spatierea. Regula exista doar ca sa anuleze marginile
   implicite ale lui <form>. */
.cautare-formular { margin: 0; }

/* Sugestia de categorie, deasupra listei: „Vezi toate cele 48 de spitale".
   Nu refoloseste .statie-item (rand de rezultat, cu logo si trei linii)
   si nici .chip-rapid (pastila mica, inline) - e un rand-actiune, singurul
   element din panou care duce in alta pagina. */
.cautare-categorie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 11px 14px;
    border: 1px solid var(--verde-mediu);
    border-radius: var(--raza-mica);
    background: var(--verde-pal);
    color: var(--verde-inchis);
    font-size: 0.86rem;
    text-decoration: none;
    transition: border-color var(--tranzitie), transform var(--tranzitie);
}

.cautare-categorie:hover { border-color: var(--verde); color: var(--verde-inchis); }
.cautare-categorie:active { transform: scale(0.99); }

/* .sageata-jos e definita in sectiunea Antet, rotita in jos pentru
   dropdown. Aici o intoarcem spre dreapta - e o directie de navigare,
   nu un panou care se deschide. */
.cautare-categorie .sageata-jos { transform: rotate(-45deg); flex: none; }

.cautare-gol { max-width: 90ch; }
.cautare-gol ul { margin: 0 0 12px; padding-left: 20px; }
.cautare-gol li { font-size: 0.93rem; color: var(--gri-text); margin-bottom: 4px; }

/* Panoul „Categorii": 15 secțiuni pe o coloană ar face un submeniu de
   ~600px înălțime. Aici se umple pe VERTICALĂ, câte 5 pe coloană, iar
   coloanele se adaugă singure: 9 secțiuni -> 2 coloane (5+4), 15 -> 3
   coloane a câte 5. grid-auto-flow: column e cel care schimbă ordinea de
   umplere din pe-rânduri în pe-coloane — fără el, grila ar aranja
   alfabetul orizontal, iar coloanele n-ar mai putea fi citite de sus în
   jos.
   grid-auto-columns: max-content lasă fiecare coloană să se lățească
   după cel mai lung nume din ea, deci panoul crește exact cât trebuie și
   textul nu mai iese peste coloana vecină (.submeniu-item are
   white-space: nowrap, păstrat intenționat aici).
   Selectorul e .submeniu.submeniu-larg (0,2,0), nu .submeniu-larg
   singur (0,1,0): .submeniu setează flex-direction, left și min-width,
   iar la specificitate egală ar decide ordinea din fișier.
   Ancorat la DREAPTA, nu la stânga ca celelalte submeniuri: „Categorii"
   e a șasea intrare din meniu, deci un panou de câteva sute de pixeli
   pornit de la marginea ei stângă ar ieși din ecran pe 1024px. Ancorat
   dreapta, crește spre interiorul paginii. */
.submeniu.submeniu-larg {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-auto-columns: max-content;
    gap: 2px 4px;
    left: auto;
    right: -8px;
    min-width: 0;
}

/* Iconițele secțiunilor sunt LINIARE, spre deosebire de .submeniu-icoana,
   care e plină (fill: var(--verde)). Clasă separată, nu modificator:
   pe aceeași clasă, regula de fill din .submeniu-icoana ar bate
   atributul fill="none" din SVG și ar ieși forme umplute cu verde. */
.submeniu-icoana-sec {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: var(--verde);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--tranzitie);
}

a.submeniu-item:hover .submeniu-icoana-sec,
.submeniu-activ .submeniu-icoana-sec { stroke: var(--verde-inchis); }

/* Pe telefon panoul redevine listă: sertarul are oricum o singură
   coloană, iar grila de 620px ar ieși din ecran. Se resetează și
   ancorarea la dreapta, nu doar grila. */
@media (max-width: 1023px) {
    .submeniu.submeniu-larg {
        display: flex;
        min-width: 0;
        left: -8px;
        right: auto;
    }
    .submeniu-larg .submeniu-item { white-space: nowrap; }
}

/* ---------- Secțiuni de categorii (/categorii, /{sectiune}) ---------- */
/* Grila e .articole-grila, refolosită: aceleași praguri 1/2/3 coloane,
   deja calibrate. .sectiuni-grila apare doar ca al doilea nume pe
   aceiași selectori (vezi mai jos), ca cele două să nu poată devia. */
.sectiune-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
}

/* Varianta în care tot cardul e link (pagina unei secțiuni). */
.sectiune-card-link { transition: transform var(--tranzitie), box-shadow var(--tranzitie); }
.sectiune-card-link:hover { transform: translateY(-2px); box-shadow: var(--umbra-2); color: inherit; }

.sectiune-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--cerneala);
}

a.sectiune-cap:hover .sectiune-nume { color: var(--verde-inchis); }

.sectiune-icoana {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: var(--verde);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sectiune-nume { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }

.sectiune-descriere { font-size: 0.86rem; color: var(--gri-text); }

.sectiune-chipuri { display: flex; flex-wrap: wrap; gap: 7px; }

/* Contorul din pastilă: aceeași pastilă .chip-rapid, cu numărul estompat
   ca să nu concureze cu numele categoriei. */
.chip-numar { color: var(--gri-text); font-size: 0.78rem; }

a.chip-rapid:hover .chip-numar { color: var(--verde-inchis); }

.panou-paginare {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Refolosim .buton-secundar; el e gândit ca bloc pe toată lățimea, deci
   aici doar anulăm marginea proprie și îl pregătim pentru <a>. */
.panou-paginare .buton-secundar {
    margin-top: 0;
    text-align: center;
    text-decoration: none;
}

.statie-item {
    display: flex;
    gap: 13px;
    padding: 13px 6px;
    border-top: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    cursor: pointer;
    transition: background var(--tranzitie);
}

.statie-item:hover, .statie-item:focus-visible { background: var(--fundal); }

.statie-logo {
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 800;
    color: #555555;
    letter-spacing: 0.02em;
}

.statie-logo-img {
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    object-fit: contain;
    padding: 5px;
    background: var(--alb);
}

.statie-logo-omv { color: #0057A3; }
.statie-logo-mol { color: #E2001A; }
.statie-logo-petrom { color: #B98A00; }
.statie-logo-rompetrol { color: #0072CE; }
.statie-logo-lukoil { color: #7A1F2B; }
.statie-logo-socar { color: #00843D; }

/* Cifra de pe iconiță = nivelul de abonament al firmei (1-4, cel mai mare = top) */
.statie-logo-abonament-1 { color: var(--gri-text); }
.statie-logo-abonament-2 { color: var(--albastru); }
.statie-logo-abonament-3 { color: var(--chihlimbar); }
.statie-logo-abonament-4 { color: var(--verde); }

.statie-logo-poza {
    width: 46px;
    height: auto;
    flex: none;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    object-fit: cover;
}

.statie-info { flex: 1; min-width: 0; }

.statie-categorie {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--verde-inchis);
    line-height: 1.2;
    margin-bottom: 0;
}

.statie-nume { display: block; font-size: 0.93rem; font-weight: 700; line-height: 1.25; }

.statie-adresa {
    display: block;
    font-size: 0.77rem;
    color: var(--gri-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statie-dist { display: block; font-size: 0.77rem; font-weight: 600; color: var(--verde); }
.statie-dist[hidden] { display: none; }

.statie-preturi { text-align: right; font-size: 0.74rem; color: var(--gri-text); }

.statie-pret-rand { display: block; line-height: 1.75; }

.statie-preturi b { color: var(--cerneala); font-weight: 700; }

.statie-ascunsa-cautare, .statie-departe { display: none; }

.harta-coloana { grid-area: harta; min-width: 0; }

.harta-carburant {
    position: relative;
    height: 72vh;
    min-height: 420px;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    overflow: hidden;
}

#harta-benzinarii { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.harta-filtre {
    position: absolute;
    top: 14px;
    right: 14px;
    left: 14px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.harta-dropdown { position: relative; }

.harta-dropdown-buton {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--alb);
    border: 0;
    border-radius: var(--raza-mica);
    padding: 9px 14px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cerneala);
    box-shadow: var(--umbra-1);
    cursor: pointer;
    max-width: 46vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.harta-dropdown-buton svg { width: 14px; height: 14px; fill: var(--verde-inchis); flex: none; }

.harta-dropdown-buton span:not(.sageata-jos) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.harta-dropdown-buton[aria-expanded="true"] .sageata-jos { transform: rotate(-135deg) translateY(2px); }

.harta-dropdown-panou {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    background: var(--alb);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: max-content;
    max-width: 270px;
}

.harta-dropdown-panou[hidden] { display: none; }

.harta-dropdown-panou-stanga { left: 0; right: auto; }

.harta-dropdown-panou-retele .chip-retea { width: 42px; height: 42px; }
.harta-dropdown-panou-retele .chip-retea img { width: 26px; height: 26px; }

/* ---------- Pagina pentru emisie (/benzinarii-bucuresti-logo) ----------
   Panoul din stanga e un panou de comenzi, nu o lista: campurile de aici
   nu exista in restul site-ului public (formularele lui traiesc in admin,
   cu alt fisier de stil), deci au clasele lor. */
/* Panoul de comenzi al paginii pentru emisie. Pe desktop, .panou-lateral
   are height: 720px (vezi media query-ul de jos), inaltime pe care pagina
   de benzinarii o umple cu lista de statii, ea insasi derulabila. Aici nu
   exista lista, deci daca notele si comenzile trec de 720px continutul ar
   iesi din caseta. Derularea o preia panoul intreg. Sub prag, unde
   inaltimea e din nou automata, regula nu are ce sa faca. */
.panou-lateral-scroll { overflow-y: auto; }

.tv-camp { margin-bottom: 14px; }

.tv-eticheta { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; }

.tv-camp input[type="file"],
.tv-camp select {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color var(--tranzitie);
}

.tv-camp input[type="file"]:focus,
.tv-camp select:focus { outline: none; border-color: var(--verde); }

.tv-nota { margin: 0 0 10px; font-size: 0.82rem; line-height: 1.55; color: var(--gri-text); }

.tv-nota-mica { font-weight: 400; font-size: 0.78rem; color: var(--gri-text); }

/* Sigla redactiei, peste harta. pointer-events: none — altfel ar inghiti
   clicuri destinate hartii de dedesubt. Latimea maxima in procente, ca o
   sigla foarte lata sa nu traverseze tot cadrul; inaltimea o da clasa de
   marime, iar raportul ramane al imaginii. */
.harta-logo-tv {
    position: absolute;
    z-index: 500;
    max-width: 38%;
    width: auto;
    pointer-events: none;
}

.harta-logo-tv[hidden] { display: none; }

.harta-logo-sus-stanga { top: 14px; left: 14px; }
.harta-logo-sus-dreapta { top: 14px; right: 14px; }
.harta-logo-jos-stanga { bottom: 14px; left: 14px; }
.harta-logo-jos-dreapta { bottom: 14px; right: 14px; }

.harta-logo-mic { max-height: 52px; }
.harta-logo-mediu { max-height: 86px; }
.harta-logo-mare { max-height: 132px; }

/* Sursa + ora actualizarii. Centrat jos, ca sa nu cada peste sigla,
   indiferent de coltul ales pentru ea. */
.harta-credit {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 500;
    transform: translateX(-50%);
    padding: 4px 12px;
    font-size: 0.74rem;
    color: var(--gri-text);
    background: rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    box-shadow: var(--umbra-1);
    white-space: nowrap;
    pointer-events: none;
}

/* Pe ecran complet, invelisul hartii devine chiar ecranul: fara colturi
   rotunjite, fara bordura, fara umbra — altfel raman dungi vizibile pe
   marginea cadrului difuzat. #harta-benzinarii e deja absolut pe toate
   laturile, deci se intinde singur. */
.harta-carburant:fullscreen { height: 100%; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.harta-carburant:-webkit-full-screen { height: 100%; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.harta-carburant:-ms-fullscreen { height: 100%; width: 100%; border: 0; border-radius: 0; box-shadow: none; }

.harta-numar-statii {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 1000;
    background: var(--alb);
    padding: 7px 13px;
    border-radius: var(--raza-mica);
    box-shadow: var(--umbra-1);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gri-text);
}

/* Indiciu „Ține CTRL apăsat pentru a face zoom" ----------------------
   Se injectează din js/script.js în ORICE .leaflet-container, la rotița
   mouse-ului fără CTRL/Cmd. pointer-events: none ca să nu fure clickul
   de pe hartă cât e vizibil; z-index peste controalele Leaflet (1000).
   Animăm doar opacity (regula de la guardrails), deci elementul rămâne
   în pagină și e doar transparent când nu e nevoie de el. */
.harta-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tranzitie);
}

.harta-hint-vizibil { opacity: 1; }

.harta-hint span {
    background: rgba(23, 24, 26, 0.78);
    color: var(--alb);
    border-radius: var(--raza-mica);
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    max-width: 80%;
    box-shadow: var(--umbra-2);
}

/* Pinuri Leaflet */
.leaflet-div-icon { background: none; border: 0; }

.pin-punct {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    border: 2px solid var(--alb);
    color: var(--alb);
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Marcaje benzinării: siglă + etichetă preț ---------- */
.marcaj-statie {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--alb);
    border: 2px solid var(--alb);
    box-shadow: var(--umbra-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform var(--tranzitie);
}

.marcaj-statie:hover { transform: scale(1.08); z-index: 10000; }

/* Pinurile sunt focusabile (Leaflet le pune tabindex), iar regula globala
   :focus-visible le desena un patrat in jurul cerculetului - pe harta arata
   ca un artefact, nu ca o selectie. Il inlocuim cu aceeasi marire ca la
   hover, ca navigarea de la tastatura sa ramana vizibila. Selectorii au doua
   clase/pseudo-clase (0,2,0), ca sa treaca peste :focus-visible global (0,1,0). */
.leaflet-marker-icon:focus, .leaflet-marker-icon:focus-visible { outline: none; }

.leaflet-marker-icon:focus-visible .marcaj-statie { transform: scale(1.12); z-index: 10000; }

/* Sigle pătrate/dreptunghiulare care nu arată bine pe fundal alb rotund */
.marcaj-statie-petrom { background: #FFDD00; }
.marcaj-statie-lukoil { background: #ED1A3A; }

.marcaj-statie img { width: 30px; height: 30px; object-fit: contain; }

.marcaj-insigna {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: var(--alb);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marcaj-pret {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 10.5px;
    color: var(--alb);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(23, 24, 26, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.marcaj-pret-ieftin { background: var(--verde); }
.marcaj-pret-mediu { background: var(--chihlimbar); }
.marcaj-pret-scump { background: var(--rosu); }

/* ---------- Marcaje firme: iconița categoriei + steluțe de abonament ----------
   Sprite-ul cu <symbol>-uri (inc/8svg_categorii.php) nu trebuie să ocupe
   loc în flux, dar nici ascuns cu display:none — atunci referințele <use>
   nu se mai rezolvă în unele browsere. */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Aceeași bază ca marcajele de benzinărie (cerc, bordură albă, hover),
   doar mai mic și colorat după nivelul de abonament — pe hartă încap 50
   de pinuri odată, unde 46px ar fi însemnat perete de cercuri. */
.marcaj-statie.marcaj-firma {
    width: 34px;
    height: 34px;
    box-shadow: var(--umbra-1);
    color: var(--alb);
}

.marcaj-firma svg { width: 19px; height: 19px; }

.marcaj-statie.marcaj-abonament-1 { background: var(--gri-text); }
.marcaj-statie.marcaj-abonament-2 { background: var(--albastru); }
.marcaj-statie.marcaj-abonament-3 { background: var(--chihlimbar); }
.marcaj-statie.marcaj-abonament-4 { background: var(--verde); }

/* Arcul de steluțe: un SVG de 56x56 suprapus peste cerculețul de 34px,
   centrat pe centrul lui. Deborda intenționat — steluțele stau pe un arc
   de rază 21, adică sub marginea cercului.
   Selectorul e .marcaj-firma .marcaj-stele, nu .marcaj-stele singur: regula
   .marcaj-firma svg de mai sus e (0,1,1) și ar bate o clasă simplă (0,1,0),
   redimensionând arcul la 19px.
   max-width:none anulează regula globală img,svg{max-width:100%}, care ar
   fi strâns arcul la lățimea părintelui de 34px. */
.marcaj-firma .marcaj-stele {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
    max-width: none;
    color: var(--chihlimbar);
    pointer-events: none;
}

/* Conturul alb desprinde steluțele de fundalul deschis al hărții.
   Grosimea e în unitățile simbolului (24), deci la 8px iese sub un pixel. */
.marcaj-stele use {
    stroke: var(--alb);
    stroke-width: 2.5;
    paint-order: stroke;
}

.punct-eu {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--verde);
    border: 3px solid var(--alb);
    box-shadow: 0 0 0 6px rgba(100, 155, 28, 0.25);
}

.legenda-punct { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.punct-verde { background: var(--verde); }
.punct-albastru { background: var(--albastru); }
.punct-chihlimbar { background: var(--chihlimbar); }
.punct-visiniu { background: var(--visiniu); }
.punct-rosu { background: var(--rosu); }

.leaflet-popup-content-wrapper { border-radius: 12px; }

.leaflet-popup-content { margin: 6px 14px 10px; line-height: 1.5; }

.popup-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; line-height: 1.2; }
.popup-head img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.popup-titlu { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.popup-adresa { margin: 0 0 8px; font-size: 0.76rem; color: var(--gri-text); }
.popup-tabel { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.popup-tabel td { padding: 3px 0; border-bottom: 1px dotted var(--bordura); }
.popup-tabel .popup-pret { text-align: right; font-weight: 700; }
.popup-actualizat { margin: 8px 0 0; font-size: 0.72rem; color: var(--gri-text); }

/* Popup-ul unei firme (js/module-firme.js): iconita din coltul din dreapta
   jos duce la pagina firmei.
   right/bottom negative: iese in padding-ul propriu al balonului
   (.leaflet-popup-content are margin 6px 14px 10px), deci pare lipita de colt
   fara sa fure din latimea textului mai mult decat padding-ul de mai jos.
   fill pus explicit pe <svg>, nu currentColor: leaflet.css are
   .leaflet-container a { color: #0078A8 } (0,1,1), care bate o clasa simpla
   (0,1,0) indiferent de ordinea fisierelor - culoarea mostenita ar fi iesit
   albastra, ca telefonul de deasupra. */
/* padding-top, nu margin-top: .leaflet-popup-content n-are nici padding, nici
   bordura, deci o margine de sus s-ar prabusi in a lui (6px) si ar da 8px in
   total, nu 14. Cei 8px de aici se adauga peste cei 6 ai balonului, deci sus
   iese exact cat in laterale. Pus pe .popup-firma, nu pe .leaflet-popup-content,
   ca sa nu miste popup-urile de benzinarii, care folosesc acelasi container. */
.popup-firma { position: relative; padding-top: 8px; }

/* Cei 24px rezervati iconitei din colt stau pe TEXT, nu pe bloc: pe bloc ar
   fi ingustat si poza, iar corectarea ei cu margin negativa o face sa
   depaseasca blocul, Leaflet masoara latimea popup-ului incluzand depasirea
   si lateste caseta cu exact atat - golul se muta la dreapta pozei in loc sa
   dispara. Asa, poza umple toata latimea continutului si golul alb iese egal
   in stanga si in dreapta. */
.popup-firma-text { display: block; padding-right: 24px; }

/* Poza principala a firmei, capul popup-ului. Cea mai apropiata clasa
   existenta e .firma-poza (cardurile din vitrina), dar aceea e fixata pe
   150px si ar fi cerut oricum o suprascriere aici - o clasa proprie e mai
   simpla decat un lant de suprascrieri intre doua contexte.
   Ramane in caseta, cu toate colturile rotunjite, si umple toata latimea
   continutului - spatiul iconitei e rezervat pe .popup-firma-text, nu aici,
   deci nu mai e nevoie de nicio margine negativa. */
.popup-firma-poza {
    display: block;
    width: 100%;
    height: 75px;
    object-fit: cover;
    border-radius: var(--raza-mica);
    margin-bottom: 8px;
}

/* Telefonul: verdele temei, nu albastrul din leaflet.css. Selectorul are
   doua clase (0,2,0) tocmai ca sa treaca peste .leaflet-container a (0,1,1),
   care altfel castiga indiferent de ordinea fisierelor. */
.leaflet-popup-content .popup-firma-telefon { color: var(--verde-inchis); }

.leaflet-popup-content .popup-firma-telefon:hover { color: var(--verde); }

.popup-firma-link {
    position: absolute;
    right: -8px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--verde-pal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tranzitie);
}

.popup-firma-link:hover { background: var(--verde-mediu); }

.popup-firma-link svg { width: 14px; height: 14px; fill: var(--verde-inchis); display: block; }

/* Bara de medii */
.bara-medii { padding-top: 16px; }

.bara-medii-interior {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 14px 22px;
    font-size: 0.86rem;
}

.medii-titlu { font-weight: 700; }

.medie-item { display: flex; align-items: center; gap: 7px; color: var(--gri-text); }

.medie-item b { color: var(--cerneala); }

.medii-nota { margin-left: auto; color: var(--gri-text); font-size: 0.77rem; }

/* Telefon: fiecare tip de carburant din bara de preț minim, pe rândul lui */
@media (max-width: 767px) {
    .medii-titlu, .medie-item { width: 100%; }
    .medii-nota { margin-left: 0; }
}

/* Telefon: în tabelul de prețuri (coloana Actualizare), data pe un rând
   (nu se rupe singură din lipsă de spațiu), ora pe rândul de dedesubt;
   pe desktop rămân pe același rând (inline, implicit) */
@media (max-width: 767px) {
    .pret-data-act { white-space: nowrap; }
    .pret-ora-act { display: block; }
}

/* ---------- Vitrina firme (harta-bucuresti + pagini de categorie) ----------
   Firmele paginii curente, sub hartă, grupate pe nivel de abonament:
   4 = casetă mare (4/rând), 3 = casetă mică (6/rând), 2 = tabel cu poză,
   1 = tabel fără poză. CSS dedicat, separat de .panou/.categorie-card. */
.firme-grila-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 18px;
}

.firme-grila-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 18px;
}

.firma-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 14px;
}

.firma-card-mica { padding: 10px; gap: 4px; }

.firma-poza {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--raza-mica);
    margin-bottom: 4px;
}

.firma-card-mica .firma-poza { height: 96px; }

.firma-poza-link { display: block; }

/* Cardurile de plan 4 si 3 fara poza: chenar gol de aceeasi inaltime, ca
   titlurile dintr-un rand sa ramana aliniate. Poarta SI .firma-poza, deci ia
   de acolo latimea, inaltimea, rotunjirea si marginea de jos - inclusiv cei
   96px ai cardului mic, prin .firma-card-mica .firma-poza. Aici raman doar
   umplerea si conturul; display:block fiindca elementul e <span>, nu <img>. */
.firma-poza-goala {
    display: block;
    background: var(--fundal);
    border: 1px solid var(--bordura-soft);
    box-sizing: border-box;
}

.firma-card-categorie {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--verde-inchis);
    text-decoration: none;
}

.firma-card-categorie:hover { text-decoration: underline; }

.firma-card-nume {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cerneala);
    text-decoration: none;
}

.firma-card-nume:hover { color: var(--verde-inchis); text-decoration: underline; }

.firma-card-mica .firma-card-nume { font-size: 0.85rem; }

.firma-card-adresa { font-size: 0.78rem; color: var(--gri-text); }

.firma-card-descriere { font-size: 0.8rem; color: var(--cerneala); line-height: 1.5; }

.firma-card-telefon { font-size: 0.8rem; font-weight: 600; }

.firma-card-website { font-size: 0.78rem; font-weight: 600; }

.firma-card-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.firma-card-contact .firma-card-telefon { flex: none; }

.firma-card-contact .firma-card-website { flex: none; }

.firma-card:not(.firma-card-mica) .firma-card-contact { margin-top: auto; padding-top: 4px; }

/* ---------- Pagina individuală a firmei ---------- */
.firma-meta-rand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.firma-stele { color: var(--verde); font-size: 1.4rem; letter-spacing: 1px; }

.firma-rating-text { font-size: 0.85rem; color: var(--gri-text); font-weight: 600; }

.firma-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
}

.firma-rating-link:hover .firma-rating-text { text-decoration: underline; }

.firma-stare-program {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.firma-stare-deschis { background: var(--verde-pal); color: var(--verde-inchis); }

.firma-stare-inchis { background: var(--fundal); color: var(--gri-text); }

.firma-media-grila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.firma-media-stanga {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    min-width: 0;
}

.firma-media-dreapta { min-width: 0; }

.firma-media-dreapta .firma-contact-bara { margin-top: 0; }

.firma-galerie-item {
    display: block;
    border-radius: var(--raza-mica);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--umbra-1);
}

.firma-galerie-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tranzitie); }

.firma-galerie-item:hover img { transform: scale(1.04); }

.firma-galerie-principala { grid-column: span 4; aspect-ratio: 16 / 8; border: 1px solid var(--verde); }

.firma-contact-bara {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.firma-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cerneala);
    text-decoration: none;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: 999px;
    padding: 8px 16px;
    transition: border-color var(--tranzitie), color var(--tranzitie), background var(--tranzitie);
}

.firma-contact-link svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.firma-contact-link:hover { border-color: var(--verde); color: var(--verde-inchis); }

.firma-contact-link-primar { background: var(--verde); border-color: var(--verde); color: var(--alb); }

.firma-contact-link-primar:hover { background: var(--verde-hover); border-color: var(--verde-hover); color: var(--alb); }

.firma-contact-bubble { background: var(--verde); border-color: var(--verde); color: var(--alb); }

.firma-contact-bubble:hover { background: var(--verde-hover); border-color: var(--verde-hover); color: var(--alb); }

.firma-contact-bubble-whatsapp { background: #25D366; border-color: #25D366; }

.firma-contact-bubble-whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--alb); }

.firma-butoane-plutitoare { display: none; }

@media (max-width: 640px) {
    .firma-butoane-plutitoare {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 500;
    }
}

.firma-buton-plutitor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: var(--umbra-2);
    color: var(--alb);
}

.firma-buton-plutitor svg { width: 26px; height: 26px; fill: currentColor; }

.firma-buton-whatsapp { background: #25D366; }

.firma-buton-telefon { background: var(--verde); }

.firma-antet,
.firma-media-grila,
.firma-doua-coloane,
.firma-sectiune,
.articol-autor {
    margin-top: 30px;
}

.firma-doua-coloane {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.firma-doua-coloane .firma-sectiune {
    margin-top: 0;
    min-width: 0;
    padding: 18px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
}

.firma-doua-coloane .firma-sectiune h2:first-child { margin-top: 0; }

.firma-lead { font-weight: 600; color: var(--cerneala) !important; }

.firma-servicii-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.firma-serviciu {
    padding: 12px 14px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
}

.firma-serviciu-principal { border-color: var(--verde); }

.firma-serviciu-nume { display: block; font-weight: 700; font-size: 0.9rem; }

.firma-serviciu-descriere { display: block; font-size: 0.82rem; color: var(--gri-text); margin-top: 3px; }

.firma-program-tabel { min-width: 0; }

.tabel-scroll .tabel-intervale.firma-program-tabel { min-width: 0; }

.firma-program-azi th, .firma-program-azi td { color: var(--verde-inchis) !important; font-weight: 700 !important; }

.firma-harta-cutie {
    position: relative;
    height: 320px;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    overflow: hidden;
    margin-top: 10px;
}

#firma-harta-locatie { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.firma-faq-item {
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-mica);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.firma-faq-item summary { font-weight: 600; font-size: 0.9rem; cursor: pointer; }

.firma-faq-item p { margin: 8px 0 0; }

.firma-recenzii-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.firma-recenzii-cap h2 { margin: 0; }

.firma-recenzii-goale { color: var(--gri-text); }

.firma-recenzie-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.6);
    padding: 24px;
}

.firma-recenzie-modal[hidden] { display: none; }

.firma-recenzie-modal-cutie {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--alb);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    padding: 28px;
}

.firma-recenzie-modal-cutie h3 { margin: 0 0 16px; padding-right: 30px; font-size: 1.15rem; }

.firma-recenzie-modal-inchide {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fundal);
    color: var(--gri-text);
    cursor: pointer;
    transition: background var(--tranzitie), color var(--tranzitie);
}

.firma-recenzie-modal-inchide svg { width: 18px; height: 18px; }

.firma-recenzie-modal-inchide:hover { background: var(--bordura-soft); color: var(--cerneala); }

.firma-stele-selector {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    border: none;
    padding: 0;
    margin: 0;
}

.firma-stele-selector input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.firma-stele-selector label {
    font-size: 2.1rem;
    line-height: 1;
    color: var(--bordura);
    cursor: pointer;
    transition: color var(--tranzitie);
}

.firma-stele-selector label:hover,
.firma-stele-selector label:hover ~ label,
.firma-stele-selector input:checked ~ label {
    color: var(--verde);
}

.firma-stele-selector input:focus-visible ~ label { outline: 2px solid var(--verde-mediu); outline-offset: 2px; }

.firma-recenzie {
    padding: 14px 0;
    border-top: 1px solid var(--bordura-soft);
}

.firma-recenzie-cap { display: flex; align-items: center; gap: 8px; }

.firma-recenzie-autor { font-weight: 700; font-size: 0.9rem; }

.firma-recenzie-stele { color: var(--verde); font-size: 1.15rem; letter-spacing: 1px; }

.firma-recenzie-text { margin: 6px 0 0; }

.firma-recenzie-raspuns {
    margin-top: 8px;
    margin-left: 28px;
    padding: 10px 12px;
    background: var(--fundal);
    border-radius: var(--raza-mica);
}

.firma-recenzie-raspuns-eticheta { display: block; font-size: 0.75rem; font-weight: 700; color: var(--verde-inchis); margin-bottom: 3px; }

.firma-anunturi-grila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px;
}

.firma-anunt {
    padding: 18px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
}

.firma-anunt h3.firma-anunt-titlu { font-size: 1rem; font-weight: 700; margin: 0; }

.firma-anunt-data { font-size: 0.78rem; color: var(--gri-text); margin: 3px 0 8px; }

.firma-anunt-continut p { margin: 0 0 8px; }

.firma-formular { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.firma-formular-camp { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; font-weight: 600; }

.firma-formular-nota { color: var(--gri-text); font-weight: 400; }

.firma-formular-camp .cp-input { width: 100%; height: 50px; flex: none; }

.firma-formular-rand { display: flex; gap: 12px; }

.firma-formular-rand .firma-formular-camp { flex: 1; min-width: 0; }

.firma-formular button.buton-primar { height: 50px; }

.firma-formular-textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    resize: vertical;
}

.firma-formular-textarea:focus { outline: none; border-color: var(--verde); }

.firma-formular-capcana { position: absolute !important; left: -9999px !important; }

.firma-formular-succes { color: var(--verde-inchis); font-weight: 600; }

.firma-formular-eroare { color: var(--visiniu); font-weight: 600; }

/* Nota mica de sub butoanele formularelor de pe pagina firmei (informarea
   de la momentul colectarii). E un <p> intr-un flex column cu gap: fara
   margin: 0 marginea implicita de paragraf s-ar aduna peste gap.
   Selector pe COPIL DIRECT, ca sa nu atinga .firma-formular-nota folosit
   deja in interiorul etichetelor - acolo ramane exact cum era. */
.firma-formular > .firma-formular-nota {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.firma-vezi-si { margin-top: 8px; }

.firma-lightbox {
    position: fixed;
    inset: 0;
    /* Peste tot, inclusiv header-ul sticky (z-index 1200) — altfel meniul
       rămâne clicabil deasupra overlay-ului și X-ul de închidere e ascuns. */
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.88);
    padding: 24px;
}

.firma-lightbox[hidden] { display: none; }

.firma-lightbox-imagine { max-width: 100%; max-height: 90vh; border-radius: var(--raza-mica); }

.firma-lightbox-inchide {
    position: absolute;
    top: 18px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--alb);
    cursor: pointer;
    transition: background var(--tranzitie);
}

.firma-lightbox-inchide svg { width: 20px; height: 20px; }

.firma-lightbox-inchide:hover { background: rgba(255, 255, 255, 0.3); }

.firma-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--alb);
    cursor: pointer;
    transition: background var(--tranzitie);
}

.firma-lightbox-nav svg { width: 24px; height: 24px; }

.firma-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }

.firma-lightbox-nav[hidden] { display: none; }

.firma-lightbox-prev { left: 14px; }

.firma-lightbox-next { right: 14px; }

.firma-lightbox-progres {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    overflow: hidden;
}

.firma-lightbox-progres[hidden] { display: none; }

.firma-lightbox-progres-bara { height: 100%; width: 0%; background: var(--alb); border-radius: 999px; }

.firma-lightbox-contor {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--alb);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border-radius: 999px;
}

/* Mobil: galerie 2 pe rând, servicii pe un singur rând */
@media (max-width: 640px) {
    .firma-media-stanga { grid-template-columns: repeat(3, 1fr); }
    .firma-galerie-principala { grid-column: span 3; }
    .firma-servicii-lista { grid-template-columns: 1fr; }

    .firma-recenzii-cap { flex-direction: column-reverse; align-items: stretch; }
    .firma-recenzie-buton { width: 100%; justify-content: center; }
}

.firme-tabel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
}

.firme-tabel {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.firme-tabel th, .firme-tabel td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bordura-soft);
    vertical-align: middle;
}

.firme-tabel thead th {
    background: var(--verde-pal);
    color: var(--verde-inchis);
    font-weight: 700;
    font-size: 0.78rem;
}

.firme-tabel tbody td { color: var(--cerneala); }

.firme-tabel tbody td:first-child { font-weight: 600; }

.firme-tabel-poza {
    display: block;
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------- Paginare (ultimul bloc al listelor de firme) ---------- */
.paginare {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.paginare-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    background: var(--alb);
    color: var(--cerneala);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--tranzitie), transform var(--tranzitie);
}

.paginare-link:hover { border-color: var(--verde); color: var(--verde-inchis); }
.paginare-link:active { transform: scale(0.97); }

.paginare-link.paginare-curenta {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--alb);
    cursor: default;
}

.paginare-puncte {
    min-width: 22px;
    text-align: center;
    color: var(--gri-text);
}

/* Pe telefon rândul se îngrămădea și se rupea pe două linii. Ies prima și
   ultima pagină, împreună cu punctele de suspensie — un „…" fără capătul
   la care duce nu spune nimic. Rămân Înapoi, fereastra din jurul paginii
   curente și Înainte. Pe desktop rămâne paginarea completă.
   Dacă pagina curentă CHIAR e prima sau ultima, ea e randată ca
   .paginare-curenta, nu primește .paginare-capat, deci nu dispare. */
@media (max-width: 640px) {
    .paginare-link.paginare-capat,
    .paginare-puncte { display: none; }
}

/* Tabletă: casete 2/rând (mari) și 3/rând (mici) */
@media (min-width: 768px) {
    .firme-grila-4 { grid-template-columns: repeat(2, 1fr); }
    .firme-grila-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: 4/rând (mari) și 6/rând (mici) */
@media (min-width: 1100px) {
    .firme-grila-4 { grid-template-columns: repeat(4, 1fr); }
    .firme-grila-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Harta Metrou ---------- */
.metrou-grila {
    padding-top: 16px;
    display: grid;
    gap: 18px;
    grid-template-areas:
        "cap"
        "harta"
        "lista";
}

.harta-metrou-vizual {
    position: relative;
    height: 72vh;
    min-height: 420px;
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    overflow: hidden;
    background: #FAFAF8;
}

#harta-metrou-imagine { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.reguli-continut {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 2px;
}

.reguli-titlu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 18px 0 9px;
}

.reguli-titlu:first-child { margin-top: 0; }

.reguli-titlu svg { width: 14px; height: 14px; fill: var(--gri-text); }

.reguli-metrou {
    margin: 0 0 4px;
    padding-left: 20px;
    font-size: 0.86rem;
    color: var(--cerneala);
    line-height: 1.6;
}

.reguli-metrou li { margin-bottom: 8px; }

.reguli-metrou ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.95em; color: var(--gri-text); }

.reguli-metrou-punctate { list-style: disc; }

.reguli-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.84rem;
    color: var(--gri-text);
    line-height: 2;
}


.reguli-contact a { font-weight: 600; }

/* ---------- Magistrale (conținut SEO metrou) ---------- */
.magistrale-lista { list-style: none; margin: 10px 0 20px; padding: 0; }

.magistrale-lista li {
    padding: 10px 0;
    border-bottom: 1px dotted var(--bordura);
    font-size: 0.93rem;
    color: var(--gri-text);
}

.magistrale-lista li:last-child { border-bottom: 0; }

.magistrale-lista strong { color: var(--cerneala); }

.date-tehnice-grila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 40px;
}

.tarife-lista { list-style: none; margin: 10px 0 20px; padding: 0; }

.tarife-lista li,
.tarife-lista > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted var(--bordura);
    font-size: 0.93rem;
    color: var(--gri-text);
}

.tarife-lista li:last-child,
.tarife-lista > div:last-child { border-bottom: 0; }

.tarife-lista dt, .tarife-lista dd { margin: 0; }

.tarife-lista-nota { font-weight: 400; }

.tarife-lista b { color: var(--cerneala); }

.traseu-statii {
    margin: 6px 0 20px;
    font-size: 0.92rem;
    color: var(--gri-text);
    line-height: 1.7;
}

.traseu-statii-neactiv { font-style: italic; opacity: 0.85; }

.tabel-intervale {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 24px;
    font-size: 0.84rem;
}

.tabel-intervale caption {
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cerneala);
    margin-bottom: 8px;
}

.tabel-intervale th, .tabel-intervale td {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid var(--bordura-soft);
}

.tabel-intervale td:first-child { text-align: left; color: var(--gri-text); }

/* Tabelul de prețuri carburant (pagini pret-carburant-*): coloana
   Stație e ultima, nu prima — .tabel-intervale centrează implicit orice
   coloană care nu e prima, aici o vrem aliniată la stânga ca adresele
   să se citească ușor. */
.tabel-preturi-carburant td:last-child { text-align: left; }
.tabel-preturi-carburant td:nth-child(2) { white-space: nowrap; }

/* Preț minim mare + grafic evoluție (benzinarii-bucuresti/pret-*-azi) */
.pret-minim-mare {
    margin: 4px 0 0;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--verde-inchis);
}

.pret-minim-mare span { font-size: 1rem; font-weight: 600; color: var(--gri-text); margin-left: 4px; }

.pret-minim-actualizat { margin: 2px 0 0; font-size: 0.8rem; color: var(--gri-text); }

.grafic-invelis { margin-top: 14px; }

.grafic-google { width: 100%; min-height: 260px; }

.pret-perioade { margin-top: 14px; }

@media (max-width: 767px) {
    .pret-perioade { flex-wrap: nowrap; gap: 4px; }
    .pret-perioade .cp-tab { flex: 1 1 0; padding: 8px 2px; font-size: 0.7rem; text-align: center; white-space: nowrap; }
}

.pret-bloc + .pret-bloc { margin-top: 24px; }

.tabel-intervale thead th, .tabel-intervale tfoot th {
    background: var(--verde-pal);
    color: var(--verde-inchis);
    font-weight: 700;
    font-size: 0.78rem;
}

.tabel-intervale tfoot th { border-bottom: 0; }

.tabel-intervale tbody td { color: var(--cerneala); font-weight: 600; }
.tabel-intervale tbody td:first-child { color: var(--gri-text); font-weight: 400; }

.tabel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 4px;
}

.tabel-scroll .tabel-intervale { min-width: 640px; margin: 8px 0 4px; }

.tabel-scroll .tabel-intervale td:first-child, .tabel-scroll .tabel-intervale th:first-child {
    text-align: left;
    white-space: nowrap;
}

.magistrale-grila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 0 20px;
}

.magistrala-caseta {
    min-width: 0;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 14px;
}

.magistrala-caseta .tabel-scroll { margin: 0; }
.magistrala-caseta .tabel-scroll .tabel-intervale { min-width: 0; margin: 8px 0 0; }
.magistrala-caseta .tabel-intervale caption { margin-bottom: 6px; }
.magistrala-caseta h3:first-child { margin-top: 0; }

.linie-vizual { margin: 0 0 16px; }

.linie-titlu { margin: 0 0 12px; font-size: 0.95rem; font-weight: 600; color: var(--cerneala); }

.linie-derulare { overflow-x: visible; -webkit-overflow-scrolling: touch; }

.linie-statii {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 30px 0 36px;
}

.linie-statii::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38.5px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
}

.linie-statii li {
    position: relative;
    flex: none;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linie-statii .punct {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--alb);
    border: 2px solid currentColor;
    z-index: 2;
}

.linie-statii li.capat .punct { width: 21px; height: 21px; background: currentColor; }

.linie-statii .nume {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cerneala);
}

.linie-statii li.sus .nume { bottom: 100%; margin-bottom: 9px; }
.linie-statii li.jos .nume { top: 100%; margin-top: 9px; }

.linie-statii li.sus::after,
.linie-statii li.jos::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1.5px;
    height: 9px;
    background: currentColor;
    transform: translateX(-50%);
}

.linie-statii li.sus::after { bottom: 100%; }
.linie-statii li.jos::after { top: 100%; }

.linie-statii li.capat .nume {
    top: 100%;
    margin-top: 9px;
    font-weight: 700;
}

.linie-m1 { color: #FCCE0E; }
.linie-m2 { color: #224291; }
.linie-m3 { color: #ED2625; }
.linie-m4 { color: #03783F; }
.linie-m5 { color: #F8A51E; }
.linie-m6 { color: #79C042; }

.tarife-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin: 10px 0 22px;
}

.tarif-card {
    margin: 0;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tarif-card img { width: 144px; height: auto; }

.tarif-card figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
    font-size: 0.82rem;
    color: var(--gri-text);
    line-height: 1.4;
}

.tarif-titlu { font-weight: 700; color: var(--cerneala); font-size: 0.88rem; }

.tarif-detalii { margin-top: 6px; }

.tarif-pret { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--cerneala); font-size: 0.95rem; }

/* ---------- Articole (Descopera) ---------- */
/* Doua coloane pe desktop, una pe telefon. Nu auto-fit: la trei coloane
   extrasul devine prea ingust si se rupe in coloane de cate 4 cuvinte. */
.articole-grila, .sectiuni-grila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 24px;
}

.articol-card {
    display: flex;
    flex-direction: column;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    overflow: hidden;
}

.articol-card-poza { display: block; aspect-ratio: 16 / 9; overflow: hidden; }

.articol-card-poza img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tranzitie); }

.articol-card-poza:hover img { transform: scale(1.03); }

.articol-card-corp { display: flex; flex-direction: column; flex: 1; padding: 16px 18px; }

.articol-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.76rem; color: var(--gri-text); }

.articol-card-categorie { font-weight: 600; color: var(--verde-inchis); text-decoration: none; }
.articol-card-categorie:hover { text-decoration: underline; }

.articol-card-titlu { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

.articol-card-titlu a { color: var(--cerneala); text-decoration: none; }
.articol-card-titlu a:hover { color: var(--verde-inchis); }

.articol-card-extras { margin: 8px 0 0; font-size: 0.87rem; color: var(--gri-text); line-height: 1.6; }

.articol-card-link { margin: 12px 0 0; padding-top: 10px; font-size: 0.84rem; font-weight: 600; }

/* margin-top: auto lipeste linkul de baza casetei, ca toate casetele de pe
   un rand sa aibe linkul la aceeasi inaltime, indiferent de lungimea
   extrasului. */
.articol-card-corp .articol-card-link { margin-top: auto; }

/* Advertorialele se marcheaza vizibil: e cerinta din Termeni si conditii,
   nu doar politete. Culoarea chihlimbar, nu verde, ca sa nu se confunde cu
   etichetele obisnuite ale site-ului. */
.articol-eticheta-plata {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chihlimbar);
    background: #FBF1E1;
    padding: 2px 8px;
    border-radius: 999px;
}

.articol-eticheta-tip {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--verde-inchis);
    background: var(--verde-pal);
    padding: 2px 8px;
    border-radius: 999px;
}

.articole-nota { margin-top: 18px; font-size: 0.82rem; color: var(--gri-text); }

/* ---------- Pagina unui articol ---------- */
.articol-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 0.82rem; color: var(--gri-text); }

.articol-meta-nota { font-size: 0.78rem; color: var(--gri-text); }

.articol-corp { margin-top: 24px; max-width: 75ch; font-size: 1rem; line-height: 1.75; color: var(--cerneala); }

/* Rezumatul stă sub H1, în antetul articolului — nu în corp. Italic, ca să
   se citească drept introducere, nu ca primul paragraf al textului. */
.articol-lead {
    margin: 10px 0 0;
    font-size: 1.06rem;
    font-style: italic;
    font-weight: 500;
    color: var(--cerneala);
}

.articol-corp p { margin: 0 0 16px; }
.articol-corp h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 10px; }
.articol-corp h3 { font-size: 1.12rem; font-weight: 700; margin: 24px 0 8px; }
.articol-corp h4 { font-size: 1rem; font-weight: 700; margin: 20px 0 6px; }
.articol-corp h5 { font-size: 0.94rem; font-weight: 700; color: var(--gri-text); margin: 18px 0 6px; }
.articol-corp ul, .articol-corp ol { margin: 0 0 16px; padding-left: 26px; }

/* Tabel lipit în corpul unui articol. Clasa o pune articol_curata_html()
   la salvare — lipirea din clipboard nu poate genera una. Aspectul îl reia
   pe cel din .tabel-intervale (coduri poștale), ca tabelele din articole să
   nu arate ca un corp străin în pagină.
   min-width plus învelișul .tabel-scroll, pus tot de filtru: pe telefon un
   tabel de șase coloane se derulează lateral, nu iese din ecran. */
.tabel-articol {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    margin: 8px 0 24px;
    font-size: 0.84rem;
}

.tabel-articol th, .tabel-articol td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bordura-soft);
}

.tabel-articol th { font-weight: 700; color: var(--verde-inchis); background: var(--verde-pal); }

.tabel-articol tr:last-child td { border-bottom: 0; }

/* Word pune cate un <p> in fiecare celula. Fara regula asta, `.articol-corp p`
   (0,1,1) le-ar da 16px sub text, in fiecare casuta. Selectorul e (0,1,2),
   deci castiga fara !important. */
.tabel-articol td p, .tabel-articol th p { margin: 0; }
.articol-corp li { margin-bottom: 7px; }

.articol-corp blockquote {
    margin: 0 0 16px;
    padding: 10px 0 10px 18px;
    border-left: 3px solid var(--verde);
    color: var(--gri-text);
    font-style: italic;
}

.articol-alte-lista { list-style: none; margin: 10px 0 0; padding: 0; }

.articol-alte-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--bordura);
}

.articol-alte-lista li:last-child { border-bottom: 0; }

.articol-alte-lista a { font-weight: 600; }

/* ---------- Caseta de autor ----------
   Învelișul coloanei stângi: galeria sus, caseta de autor jos. Flex, nu
   grilă: .firma-media-stanga are celule cu aspect-ratio, iar întinsă pe
   toată înălțimea rândului și-ar deforma miniaturile. */
.articol-coloana-stanga {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
    min-width: 0;
}

.articol-autor {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    background: var(--fundal);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
}

/* Caseta se lipește de baza coloanei, ca să se termine odată cu textul din
   dreapta. Anulează și cei 30px din regula comună de spațiere, care rămân
   valabili doar când caseta stă singură, pe toată lățimea. */
.articol-coloana-stanga .articol-autor { margin-top: auto; }

.articol-autor-poza {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bordura-soft);
}

.articol-autor-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }

.articol-autor-info { min-width: 0; }

/* Selectorii de mai jos sunt descendenți dinadins. Caseta stă sub
   .continut-seo, iar `.continut-seo p` (0,1,1) vine mai jos în fișier și ar
   bate o clasă simplă (0,1,0) — tot textul casetei ar ieși gri și mic.
   Descendentul e (0,2,0), deci câștigă mecanic, fără !important. */
.articol-autor .articol-autor-eticheta {
    margin: 0 0 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gri-text);
}

.articol-autor .articol-autor-nume {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cerneala);
}

.articol-autor .articol-autor-ocupatie {
    margin: 2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--verde);
}

.articol-autor .articol-autor-despre {
    margin: 10px 0 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--gri-text);
}

@media (max-width: 640px) {
    .articol-autor-poza { width: 56px; height: 56px; }
}

@media (min-width: 768px) {
    .articole-grila, .sectiuni-grila { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop lat: articolele trec pe 3 coloane. Sub sau egal 1366px raman 2
   (regula de mai sus), pe mobil 1. */
@media (min-width: 1367px) {
    .articole-grila, .sectiuni-grila { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pagina 404 ----------
   Bloc centrat, îngust: pe o pagină care spune „nu e nimic aici", textul
   lat pe tot ecranul arată și mai gol. */
.nf-cutie { max-width: 620px; margin: 0 auto; padding-bottom: 28px; text-align: center; }

.nf-cutie .cautari-rapide { justify-content: center; }

.nf-ilustratie { display: block; max-width: 300px; margin: 8px auto 16px; }

/* Culorile ilustrației stau aici, nu ca atribute fill/stroke în SVG: așa
   desenul urmează paleta temei dintr-un singur loc, iar regula proiectului
   „zero stiluri în markup" rămâne întreagă. */
.nf-umbra { fill: var(--bordura-soft); }

.nf-drum {
    fill: none;
    stroke: var(--bordura);
    stroke-width: 3;
    stroke-dasharray: 7 7;
    stroke-linecap: round;
}

.nf-semn rect { fill: var(--verde-mediu); }
.nf-semn rect:last-child { fill: var(--bordura); }

.nf-om circle { fill: var(--verde-inchis); }

.nf-om path {
    fill: none;
    stroke: var(--verde-inchis);
    stroke-width: 4;
    stroke-linecap: round;
}

.nf-harta rect { fill: var(--alb); stroke: var(--gri-text); stroke-width: 2; }

.nf-harta-linie { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; }

.nf-pin path { fill: var(--verde); }

.nf-pin-gol { fill: var(--alb); }

.nf-gluma { margin: 14px 0 0; font-size: 0.93rem; color: var(--gri-text); }

.nf-actiuni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 0;
}

.nf-link-secundar { font-size: 0.9rem; font-weight: 600; text-decoration: none; }

.nf-link-secundar:hover { text-decoration: underline; }

/* ---------- Conținut SEO ---------- */
.continut-seo { padding-top: 16px; padding-bottom: 28px; }

.continut-seo h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 18px 0 8px; }

.continut-seo h3 { font-size: 1.05rem; font-weight: 600; margin: 16px 0 6px; }

.continut-seo p { margin: 0 0 12px; font-size: 0.93rem; color: var(--gri-text); max-width: 90ch; }

.continut-imagine { display: block; width: 100%; height: auto; border-radius: var(--raza-card); margin-top: 12px; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-top: 56px; padding-bottom: 24px; }
.notfound h1 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.notfound p { color: var(--gri-text); }
.notfound .retele-lista { justify-content: center; }

.retele-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.retea-pastila {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--verde-inchis);
    background: var(--verde-pal);
    padding: 4px 13px;
    border-radius: 999px;
    text-decoration: none;
}

/* ---------- Subsol ---------- */
.subsol { background: var(--fundal); border-top: 1px solid var(--bordura-soft); margin-top: 28px; }

.subsol-grid {
    padding-top: 40px;
    padding-bottom: 28px;
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
}

.subsol-brand { max-width: 34ch; }

.subsol-tagline { margin: 12px 0 0; font-size: 0.88rem; color: var(--gri-text); line-height: 1.6; }

.subsol-coloana { display: flex; flex-direction: column; gap: 10px; }

.subsol-titlu { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cerneala); }

.subsol-coloana a, .subsol-coloana .link-inactiv { font-size: 0.9rem; color: var(--gri-text); text-decoration: none; }

.subsol-coloana a:hover { color: var(--verde-inchis); }

.subsol-jos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 20px;
    border-top: 1px solid var(--bordura-soft);
}

.subsol-copyright, .subsol-motto { margin: 0; font-size: 0.8rem; color: var(--gri-text); }

/* ---------- Apariție la scroll ---------- */
.aparitie { opacity: 0; transform: translateY(10px); }
.aparitie-vizibil { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .aparitie { opacity: 1; transform: none; }
}

/* ---------- Telefon (linii metrou: scroll orizontal sub 768px) ---------- */
@media (max-width: 767px) {
    .linie-derulare { overflow-x: auto; }
    .linie-statii { justify-content: flex-start; gap: 30px; padding-left: 2px; padding-right: 2px; width: max-content; }
    .linie-statii::before { left: 2px; right: 2px; }
}

/* ---------- Tabletă ---------- */
@media (min-width: 768px) {
    .categorii { grid-template-columns: repeat(3, 1fr); }
    .panouri { grid-template-columns: repeat(2, 1fr); }
    .subsol-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .rupe-titlu { display: none; }
    .date-tehnice-grila { grid-template-columns: 1fr 1fr; }
}

/* ---------- Meniul desktop ----------
   Pornește abia de la 1024px, nu de la 768px: submeniurile se deschid la
   hover, iar pe tablete hover nu există — tap-ul ar naviga la pagina-hub
   și submeniul ar rămâne inaccesibil. Sub 1024px rămâne sertarul. */
@media (min-width: 1024px) {
    .meniu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); margin: 0 auto; }
    .buton-meniu { display: none; }
    .sertar { display: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1100px) {
    .magistrale-grila { grid-template-columns: repeat(3, 1fr); }

    .erou { padding-top: 60px; padding-bottom: 64px; }
    .erou-grila { grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 4vw, 80px); }
    .erou-harta { min-height: 440px; }
    .categorii { grid-template-columns: repeat(6, 1fr); }
    .panouri { grid-template-columns: repeat(4, 1fr); }

    /* Un singur rand, doua coloane: in stanga .b-coloana (titlu + panou), in
       dreapta harta. Amandoua au aceeasi inaltime fixa, luata din acelasi
       token, deci niciuna nu mai depinde de cealalta si nimic nu se mai umfla
       daca titlul se rupe pe doua randuri.
       Structura de dinainte — harta intinsa peste doua randuri, panoul pe
       randul doi — nu putea functiona: intr-un container cu inaltime
       NEDEFINITA, un rand 1fr nu inseamna "ce ramane", ci se comporta ca
       max-content, fiindca nu exista spatiu liber de impartit atata timp cat
       inaltimea totala o da tot continutul. Randul crestea iar dupa panou. */
    .benzinarii-grila {
        grid-template-columns: minmax(340px, 420px) 1fr;
        grid-template-areas: "lista harta";
        align-items: stretch;
    }

    .b-coloana {
        grid-area: lista;
        display: flex;
        flex-direction: column;
        gap: 18px;
        height: var(--h-harta-desktop);
        min-width: 0;
    }

    /* Titlul isi ia cat ii trebuie, panoul inghite restul coloanei.
       min-height: 0 e obligatoriu — fara el, un element flex nu are voie sa
       coboare sub inaltimea continutului si ar impinge coloana in jos.
       Ce nu incape deruleaza: fie prin scroller-ul interior (.lista-statii /
       .lista-scroll), fie prin panoul insusi (.panou-lateral-scroll). */
    .b-cap { flex: none; }
    .panou-lateral {
        flex: 1 1 auto;
        /* align-self: stretch anuleaza `start`-ul din regula de baza. Acolo,
           pe grila, el controla doar pozitia pe verticala; aici, intr-un flex
           pe coloana, axa transversala e ORIZONTALA, iar `start` inseamna
           "ia-ti latimea din continut". Cum latimea minima a continutului
           (rândul de pastile, campul de cautare) depaseste cei 420px ai
           coloanei, panoul crestea peste ea si intra sub harta. */
        align-self: stretch;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }
    .lista-statii { flex: 1 1 auto; min-height: 0; max-height: none; }
    /* Unde există .lista-scroll (harta Bucureștiului), el e cel care umple
       înălțimea liberă și derulează; <ul>-ul dinăuntru redevine inert. */
    .lista-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
    .lista-scroll .lista-statii { flex: none; }
    .harta-coloana { grid-area: harta; }
    .harta-carburant { height: var(--h-harta-desktop); min-height: 0; }

    .firma-media-grila { grid-template-columns: 1fr 1fr; }
    .firma-doua-coloane { grid-template-columns: 1fr 1fr; }
    .firma-anunturi-grila { grid-template-columns: 1fr 1fr; }

    /* Aceeasi structura ca la benzinarii — vezi comentariul de acolo. */
    .metrou-grila {
        grid-template-columns: minmax(340px, 420px) 1fr;
        grid-template-areas: "lista harta";
        align-items: stretch;
    }

    .reguli-continut { flex: 1 1 auto; min-height: 0; max-height: none; }
    .harta-metrou-vizual { height: var(--h-harta-desktop); min-height: 0; }
}

/* ---------- Coduri poștale ---------- */
.cp-cutie { margin: 22px 0 0; }

.cp-tab-uri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.cp-tab {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gri-text);
    background: var(--fundal);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 12px 18px;
    cursor: pointer;
    transition: border-color var(--tranzitie), color var(--tranzitie), background var(--tranzitie);
}

.cp-tab:hover { border-color: var(--verde); color: var(--verde-inchis); }

.cp-tab-activ, .cp-tab-activ:hover {
    background: var(--cerneala);
    color: var(--alb);
    border-color: var(--cerneala);
}

.cp-panou {
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 18px;
}

.cp-panou[hidden] { display: none; }

.cp-formular { display: flex; flex-wrap: wrap; gap: 10px; }

.cp-select, .cp-input {
    flex: 1;
    min-width: 160px;
    height: 46px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
}

.cp-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2367696B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 19px center;
    background-size: 10px 6px;
}

.cp-select:focus, .cp-input:focus { outline: none; border-color: var(--verde); }
.cp-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23649B1C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cp-select:disabled { opacity: 0.6; cursor: default; }

.cp-select option[value=""] { color: #CCCCCC; font-style: italic; }

.cp-cod-rand { display: flex; align-items: center; gap: 6px; }

.cp-copiaza {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 5px;
    color: var(--gri-text);
    cursor: pointer;
    transition: background var(--tranzitie), color var(--tranzitie);
}

.cp-copiaza svg { width: 15px; height: 15px; fill: currentColor; }

.cp-copiaza:hover { background: var(--verde-pal); color: var(--verde-inchis); }

.cp-copiaza.cp-copiat { color: var(--verde-inchis); }

.cp-buton { flex: none; height: 46px; }

.cp-rezultate-titlu { margin: 26px 0 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

.cp-tabel th, .cp-tabel td { text-align: left; }
.cp-tabel tbody td { font-weight: 400; color: var(--cerneala); }
.cp-tabel tbody td:first-child { font-weight: 600; color: var(--verde-inchis); }

/* Desktop: coloana Strada și numărul mai lată, Oficiu poștal mai îngustă */
@media (min-width: 1100px) {
    .cp-tabel th:nth-child(4), .cp-tabel td:nth-child(4) { width: 26%; }
    .cp-tabel th:nth-child(5), .cp-tabel td:nth-child(5) { width: 10%; }
}

/* Telefon: tab-urile „Caută cod după adresă" / „Caută adresă după cod"
   rămân pe același rând. Nu mai lăsăm flex-ul să le rupă (nowrap), iar
   fiecare primește jumătate din lățime — flex: 1 1 0 împreună cu
   min-width: 0, altfel lățimea minimă a textului le-ar ține late și tot
   s-ar rupe rândul. Textul e lung, așa că îl lăsăm să curgă pe două
   rânduri centrat pe ecrane foarte înguste, în loc să micșorăm fontul
   până devine ilizibil; butoanele rămân egale ca înălțime, fiindcă
   flex-ul le întinde implicit. */
@media (max-width: 767px) {
    .cp-tab-uri { flex-wrap: nowrap; gap: 8px; }

    .cp-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.82rem;
        line-height: 1.3;
        text-align: center;
    }
}

/* Telefon: același tabel ca pe desktop, cu derulare orizontală — NU carduri
   (varianta pe carduri, cu ::before din data-label, era greu de citit).
   min-width propriu, mai mare decât cele 640px moștenite de la
   .tabel-scroll .tabel-intervale: sunt 7 coloane, dintre care „Strada și
   numărul" e lungă, iar la 640px se rupea pe 2-3 rânduri în fiecare celulă. */
@media (max-width: 767px) {
    .tabel-scroll .cp-tabel { min-width: 820px; }
}

/* ---------- Curs valutar ---------- */
.cv-grila {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    margin: 20px 0 8px;
}

.cv-card {
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 16px 18px;
}

.cv-card-cap { display: flex; align-items: center; gap: 10px; }

.cv-steag {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--bordura-soft);
    flex: none;
}

.cv-cod { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }

.cv-denumire { margin: 0; font-size: 0.76rem; color: var(--gri-text); line-height: 1.35; }

.cv-valoare {
    margin: 12px 0 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cv-lei { font-size: 0.8rem; font-weight: 500; color: var(--gri-text); }

.cv-multiplicator { font-size: 0.72rem; font-weight: 400; color: var(--gri-text); }

.cv-delta {
    display: inline-block;
    margin: 9px 0 0;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.cv-delta-sus { color: var(--verde-inchis); background: var(--verde-pal); }
.cv-delta-jos { color: var(--rosu); background: #F9ECE8; }

.cv-tabel-titlu { margin: 30px 0 4px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

.cv-tabel th, .cv-tabel td { text-align: left; }
.cv-tabel tbody td { font-weight: 400; color: var(--cerneala); }
.cv-tabel tbody td:first-child { font-weight: 700; }

.cv-tabel-valuta { display: flex; align-items: center; gap: 9px; }

.cv-var-sus { color: var(--verde-inchis); }
.cv-var-jos { color: var(--rosu); }

/* Telefon: 2 carduri de curs pe rând, mai compacte */
@media (max-width: 767px) {
    .cv-grila { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cv-card { padding: 12px 13px; }
    .cv-steag { width: 24px; height: 16px; }
    .cv-cod { font-size: 0.92rem; }
    .cv-denumire { font-size: 0.7rem; }
    .cv-valoare { font-size: 1.12rem; margin-top: 9px; }
    .cv-delta { font-size: 0.7rem; padding: 3px 8px; }
}

/* ---------- Banda de cookie-uri ----------
   Apare doar cat timp nu exista o alegere salvata; Google Analytics NU
   se incarca pana nu se apasa Accept (vezi js/cookie.js). Butoanele
   refolosesc .buton-primar / .buton-secundar, deci aici stau doar
   pozitionarea si asezarea in pagina.
   z-index peste antet (1100) si peste submeniu (1200), ca sa nu poata fi
   acoperita de meniul lipicios. */
.cookie-banda {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1400;
    max-width: 620px;
    margin: 0 auto;
    padding: 20px 22px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    animation: cookie-intrare 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cookie-banda[hidden] { display: none; }

.cookie-banda-titlu { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }

.cookie-banda-text { margin: 0; font-size: 0.88rem; color: var(--gri-text); }

/* Butoanele stau pe un rand pe latimi normale si se aseaza pe verticala
   pe telefon, unde doua butoane plus linkul nu incap alaturi. */
.cookie-banda-butoane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.cookie-banda-butoane .buton-primar,
.cookie-banda-butoane .buton-secundar { flex: 1 1 auto; justify-content: center; }

.cookie-banda-detalii { font-size: 0.82rem; color: var(--gri-text); }

/* Doar opacity + transform, ca restul animatiilor din site. */
@keyframes cookie-intrare {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banda { animation: none; }
}

@media (max-width: 520px) {
    .cookie-banda { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; }
    .cookie-banda-butoane .buton-primar,
    .cookie-banda-butoane .buton-secundar { flex: 1 1 100%; }
}