/**
 * Banner informativ de cookie-uri (US-026).
 *
 * Fișier SEPARAT, nu o secțiune din `app.css`: bannerul trebuie să apară și pe paginile
 * server-rendered (login, documente legale), care încarcă `auth.css`, nu `app.css`. Un
 * stil pus în app.css ar fi lăsat bannerul nestilizat exact pe prima pagină pe care îl
 * vede un vizitator nou.
 *
 * NON-BLOCANT (FR-02): fixat jos, fără overlay, fără blocarea scroll-ului. Utilizatorul
 * poate citi și naviga cu bannerul pe ecran — de asta nu e un dialog modal.
 */

.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* peste conținut, SUB modale (1000+) — un modal deschis rămâne uzabil */

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* ⚠ v0.9.8 (owner, 07.10) — `center`, NU `space-between`: textul și butoanele sunt UN
       GRUP, centrat în bandă. Cu `space-between`, pe ecran lat, textul rămânea lipit de
       marginea stângă și butoanele izolate la marginea dreaptă — două blocuri fără legătură. */
    justify-content: center;
    gap: 0.75rem 1.5rem;

    /* Padding lateral care crește cu ecranul, în registrul paginii: 16px pe telefon, până la
       40px pe desktop lat. */
    padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
    background: #1f2933;
    color: #f5f7fa;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    font-size: 0.82rem;
    line-height: 1.45;
}

.cookie-notice__text {
    margin: 0;
    /* ⚠ v0.9.8 — `0 1 55ch`, nu `1 1 22rem`: textul NU mai crește să umple banda (asta
       împingea butoanele la capătul opus), iar butoanele vin imediat după.
       ⚠ DE CE 55ch, NU 75ch: `ch` e lățimea cifrei „0", mai lată decât litera medie din
       Inter. Măsurat în browser: 75ch = 103 caractere pe rând. 55ch ≈ 75 de caractere — ținta.
       Sub lățimea asta, flex-ul îl strânge și butoanele trec dedesubt, tot centrate. */
    flex: 0 1 55ch;
    max-width: 55ch;
}

.cookie-notice__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.cookie-notice__link {
    color: #cfe3f7;
    text-decoration: underline;
    white-space: nowrap;
}

.cookie-notice__link:hover,
.cookie-notice__link:focus {
    color: #ffffff;
}

.cookie-notice__btn {
    font: inherit;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ffffff;
    color: #1f2933;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-notice__btn:hover {
    background: #e8eef5;
}

/* Focus VIZIBIL: bannerul e primul element interactiv pe care îl întâlnește cineva care
   navighează cu tastatura, iar un contur implicit de browser pe fundal închis e adesea
   invizibil. */
.cookie-notice__btn:focus-visible,
.cookie-notice__link:focus-visible {
    outline: 2px solid #ffd479;
    outline-offset: 2px;
}

/* La print nu are ce căuta: ar apărea pe fiecare pagină tipărită a unui document. */
@media print {
    .cookie-notice {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .cookie-notice {
        flex-direction: column;
        align-items: stretch;
    }

    /* ⚠ În coloană, `flex-basis` se aplică pe ÎNĂLȚIME: `55ch` ar fi întins textul pe verticală
       (măsurat: bannerul ajungea la 74% din ecran la 390px). Aici textul ia înălțimea lui. */
    .cookie-notice__text {
        flex: none;
        max-width: none;
    }

    /* v0.9.8 — pe telefon: textul deasupra, butoanele dedesubt, pe toată lățimea, cu ținta de
       atingere de 44px (aceeași regulă ca butoanele aplicației sub prag, US-081 FR-6). */
    .cookie-notice__actions {
        width: 100%;
    }

    .cookie-notice__btn {
        flex: 1 1 0;
        min-height: 44px;
    }
}