/* ============================================================
   bandou-cookie.css — bara de jos despre cookie-uri
   ----
   Încărcată de toate trei layout-urile, fiindcă bandoul apare pe toate trei. Foaie
   proprie, și nu o bucată din layout.css: aceea nu se încarcă pe microsite și nici pe
   hartă, iar bandoul trebuie să arate la fel oriunde intră vizitatorul.

   Folosește variabilele din _tokens.css, care se încarcă înaintea acestei foi.

   MOBILE-FIRST, ca restul foilor.
   ============================================================ */


/* ============================================================
   BARA

   z-index 900: peste butoanele hărții (500) și peste valul ei de încărcare (600), ca să
   nu fie acoperit pe pagina hărții — dar SUB modalurile (9999) și sub toast (10001), ca o
   fereastră deschisă să-l poată acoperi. Ordinea asta e singura care nu produce un bandou
   pe jumătate vizibil sub alt element.

   „position: fixed" jos, nu „sticky": bara nu ține de firul paginii, ci stă peste el cât
   timp e nevoie de ea.
   ============================================================ */

.er-bandou-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;

    background: var(--er-bg-surface);
    border-top: 1px solid var(--er-border);

    /* Umbra în sus, nu în jos: bara stă pe marginea de jos a ecranului, iar o umbră
       aruncată în afara lui nu s-ar vedea. */
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.10);

    /* Pe telefoanele cu bară de gesturi, ultimii pixeli de jos sunt ai sistemului. Fără
       plusul ăsta, butonul „Am înțeles" ajunge chiar sub linia de gest și se apasă greu.
       Browserele care nu cunosc env() folosesc zero, deci nu se schimbă nimic la ele. */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* STAREA DE PLECARE a alunecării. Bandoul intră de jos.
       „hidden" din marcaj îl ține afară până când scriptul hotărăște că e de arătat —
       vezi bandou-cookie.js; regulile de aici lucrează numai după aceea. */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

    .er-bandou-cookie.er-arata {
        transform: translateY(0);
    }

/* Cine a cerut din sistem mai puțină mișcare nu primește alunecarea. Bandoul apare pur si
   simplu — ceea ce e tot ce conteaza. */
@media (prefers-reduced-motion: reduce) {

    .er-bandou-cookie {
        transition: none;
    }
}

.er-bandou-cookie-inner {
    max-width: var(--er-container-max);
    margin: 0 auto;
    padding: 16px 18px;

    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* TEXTUL */
.er-bandou-cookie-text {
    color: var(--er-text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

    .er-bandou-cookie-text p {
        margin: 0;
    }

.er-bandou-cookie-titlu {
    margin-bottom: 4px !important;
    color: var(--er-text-heading);
    font-weight: 700;
    font-size: 0.95rem;
}


/* ACȚIUNILE */
.er-bandou-cookie-actiuni {
    display: flex;
    align-items: center;
    gap: 8px 16px;

    /* Pe ecran îngust, butonul trece pe rândul lui și ia toată lățimea — vezi mai jos.
       Aici doar se lasă loc de înfășurare. */
    flex-wrap: wrap;
}

.er-bandou-cookie-link {
    color: var(--er-color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
}

.er-bandou-cookie-buton {
    /* Aceeași pastilă ca butoanele de acțiune ale platformei, dar scrisă aici: clasa
       „er-layout-btn-cta" trăiește în layout.css, pe care microsite-ul și harta nu o
       încarcă. Copiată, nu importată — două foi nu se pot cere una pe alta. */
    box-sizing: border-box;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--er-radius-full);

    background: var(--er-color-secondary);
    color: var(--er-text-on-dark);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;

    /* Cât un deget, pe telefon. */
    min-height: 44px;

    /* Butonul e ultimul din rând, dar primul pe care omul îl caută. */
    margin-left: auto;

    transition: background 0.2s ease, transform 0.2s ease;
}

    .er-bandou-cookie-buton:hover {
        background: var(--er-color-secondary-hover);
        transform: translateY(-1px);
    }


/* ============================================================
   PRAGURILE, MOBILE-FIRST
   ============================================================ */

@media (min-width: 600.02px) {

    /* De aici încolo textul și acțiunile stau pe același rând: bara se subțiază și
       acoperă mai puțin din pagina de dedesubt. */
    .er-bandou-cookie-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 16px 24px;
    }

    .er-bandou-cookie-actiuni {
        flex-shrink: 0;
    }

    .er-bandou-cookie-buton {
        margin-left: revert;
    }
}

@media (min-width: 992.02px) {

    .er-bandou-cookie-inner {
        padding: 18px 32px;
    }
}
