/* ============================================================================
   ePortal — Modul cookie-uri — stiluri
   Independent de restul site-ului: variabilele --ec-* preiau paleta paginii
   gazdă (--primary / --bs-primary) dacă există, altfel cad pe implicitul
   albastru folosit în tot ePortal-ul.
   ========================================================================== */

:root {
    --ec-primary: var(--primary, var(--bs-primary, #0071ec));
    --ec-text: var(--text, #0e2a52);
    --ec-muted: var(--muted, #4f6285);
    --ec-surface: var(--surface, #ffffff);
    --ec-border: var(--border, #e4e8f2);
    --ec-radius: var(--radius, 14px);
    --ec-font: var(--font-display, 'Sora', 'Inter', sans-serif);
    --ec-shadow: 0 8px 30px rgba(27, 35, 64, 0.16);
    --ec-z: 3000;
    /* Rezervă spațiu deasupra unei bare fixe de jos (ex. #mobile-footer din
       sesizari/) — se suprascrie per-pagină dacă e cazul. */
    --ec-safe-bottom: 0px;
}

.ec-banner,
.ec-modal,
.ec-fundal,
.ec-buton-plutitor {
    font-family: var(--ec-font);
    box-sizing: border-box;
}
.ec-banner *, .ec-modal *, .ec-buton-plutitor * { box-sizing: border-box; }

.ec-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- BANNER */

.ec-banner {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(0px - var(--ec-safe-bottom, 0px));
    z-index: var(--ec-z);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    padding-bottom: calc(1.1rem + var(--ec-safe-bottom, 0px));
    background: var(--ec-surface);
    color: var(--ec-text);
    border-top: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow);
    transform: translateY(100%);
    transition: transform .25s ease;
}
.ec-banner.ec-vizibil { transform: translateY(0); }

.ec-banner-text { flex: 1 1 380px; min-width: 0; }
.ec-banner-text p { margin: 0 0 .35rem; font-size: .92rem; font-weight: 700; }
.ec-banner-sub { font-size: .84rem; font-weight: 400 !important; color: var(--ec-muted); line-height: 1.5; }
.ec-banner-sub a { color: var(--ec-primary); text-decoration: underline; white-space: nowrap; }

.ec-banner-actiuni {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------- BUTOANE */

.ec-btn {
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .6rem 1.1rem;
    border-radius: calc(var(--ec-radius) * 0.55);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease, background-color .15s ease;
}
.ec-btn:hover { filter: brightness(0.96); }
.ec-btn-primary { background: var(--ec-primary); color: #fff; }
.ec-btn-outline { background: transparent; color: var(--ec-text); border-color: var(--ec-border); }
.ec-btn-text { background: transparent; color: var(--ec-muted); border-color: transparent; text-decoration: underline; padding-left: .3rem; padding-right: .3rem; }

/* ---------------------------------------------------------------- MODAL */

.ec-fundal {
    position: fixed; inset: 0;
    z-index: var(--ec-z);
    background: rgba(14, 26, 51, 0.45);
    opacity: 0;
    transition: opacity .2s ease;
}
.ec-fundal.ec-vizibil { opacity: 1; }

.ec-modal {
    position: fixed;
    z-index: calc(var(--ec-z) + 1);
    top: 50%; left: 50%;
    width: min(560px, calc(100vw - 2rem));
    max-height: min(640px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    background: var(--ec-surface);
    color: var(--ec-text);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    opacity: 0;
    transform: translate(-50%, -48%) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
}
.ec-modal.ec-vizibil { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ec-modal-politica { width: min(680px, calc(100vw - 2rem)); max-height: min(720px, calc(100vh - 2rem)); }
.ec-modal-politica .ec-modal-corp > p { font-size: .86rem; color: var(--ec-muted); line-height: 1.6; margin: 0 0 1rem; }
.ec-modal-politica h3 { font-size: .82rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.ec-modal-politica h3:first-of-type { margin-top: 0; }
.ec-modal-politica .ec-tabel-cookieuri { font-size: .78rem; }
.ec-politica-oficial { margin-top: 1.2rem !important; padding-top: .9rem; border-top: 1px solid var(--ec-border); }
.ec-politica-oficial a { color: var(--ec-primary); text-decoration: underline; }

.ec-modal-cap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--ec-border);
    flex: 0 0 auto;
}
.ec-modal-cap h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.ec-inchide {
    background: none; border: none; font-size: 1.4rem; line-height: 1;
    color: var(--ec-muted); cursor: pointer; padding: .2rem .5rem;
}

.ec-modal-corp { padding: .4rem 1.3rem; overflow-y: auto; flex: 1 1 auto; }

.ec-categorie { padding: .9rem 0; border-bottom: 1px solid var(--ec-border); }
.ec-categorie:last-child { border-bottom: none; }
.ec-categorie-cap { display: flex; gap: .9rem; align-items: flex-start; }
.ec-categorie-cap strong { font-size: .92rem; }
.ec-categorie-cap p { margin: .25rem 0 0; font-size: .82rem; color: var(--ec-muted); line-height: 1.5; }
.ec-mereu-activ {
    margin-left: .5rem; font-size: .7rem; font-weight: 600; text-transform: uppercase;
    color: var(--ec-primary); letter-spacing: .03em;
}

/* comutator (checkbox stilizat) */
.ec-comutator { position: relative; flex: 0 0 auto; width: 40px; height: 22px; margin-top: .1rem; }
.ec-comutator input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ec-comutator-slider {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--ec-border); transition: background-color .15s ease;
}
.ec-comutator-slider::before {
    content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .15s ease;
}
.ec-comutator input:checked + .ec-comutator-slider { background: var(--ec-primary); }
.ec-comutator input:checked + .ec-comutator-slider::before { transform: translateX(18px); }
.ec-comutator input:disabled + .ec-comutator-slider { background: var(--ec-primary); opacity: .55; cursor: not-allowed; }
.ec-comutator input:disabled { cursor: not-allowed; }

.ec-detalii-cookieuri { margin-top: .6rem; font-size: .78rem; }
.ec-detalii-cookieuri summary { cursor: pointer; color: var(--ec-primary); font-weight: 600; }
.ec-tabel-cookieuri { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.ec-tabel-cookieuri th, .ec-tabel-cookieuri td {
    text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--ec-border);
    vertical-align: top; color: var(--ec-muted);
}
.ec-tabel-cookieuri th { color: var(--ec-text); font-weight: 600; }
.ec-tabel-cookieuri em { color: var(--ec-muted); font-style: italic; }

.ec-modal-subsol {
    display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
    padding: 1rem 1.3rem; border-top: 1px solid var(--ec-border); flex: 0 0 auto;
}
.ec-modal-subsol > a { font-size: .82rem; color: var(--ec-primary); text-decoration: underline; }
.ec-modal-butoane { display: flex; gap: .55rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- BUTON PLUTITOR */

.ec-buton-plutitor {
    position: fixed;
    left: 1.1rem;
    bottom: calc(6.1rem + var(--ec-safe-bottom, 0px));
    z-index: calc(var(--ec-z) - 1);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ec-border);
    background: var(--ec-surface);
    color: var(--ec-primary);
    font-size: 1.05rem;
    box-shadow: var(--ec-shadow);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.ec-buton-plutitor:hover { transform: translateY(-2px); }

/* --------------------------------------------------- PROMPT DE ACȚIUNE */

.ec-prompt-actiune {
    position: fixed;
    z-index: calc(var(--ec-z) + 2);
    width: 280px;
    background: var(--ec-surface);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: calc(var(--ec-radius) * 0.6);
    box-shadow: var(--ec-shadow);
    padding: .85rem .95rem;
    font-family: var(--ec-font);
}
.ec-prompt-actiune p { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.5; }
.ec-prompt-actiune-butoane { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* Pe mobil bannerul de jos nu functioneaza: textul impinge butoanele sub
   marginea ecranului si nu se mai vad. Devine dialog centrat, cu butoanele
   unul sub altul, mereu vizibile. */
@media (max-width: 640px) {
    .ec-banner {
        position: fixed;
        inset: auto 0 0 0;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%) scale(.96);
        width: min(420px, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        display: block;
        padding: 1.2rem;
        border: 1px solid var(--ec-border);
        border-radius: var(--ec-radius);
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease;
    }
    .ec-banner.ec-vizibil {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Fundal intunecat in spate, ca la orice dialog — bannerul nu mai e o
       bara peste continut, ci o decizie care trebuie luata. */
    .ec-banner::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(14, 26, 51, 0.45);
    }

    .ec-banner-text { margin-bottom: 1rem; }
    .ec-banner-text p { font-size: 1rem; }
    .ec-banner-sub { font-size: .88rem; }

    .ec-banner-actiuni {
        flex-direction: column-reverse;
        gap: .5rem;
        width: 100%;
    }
    .ec-banner-actiuni .ec-btn {
        width: 100%;
        padding: .8rem 1rem;
        font-size: .92rem;
    }

    /* Panourile de preferinte/politica: pe toata inaltimea utila */
    .ec-modal,
    .ec-modal-politica {
        width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
    }
    .ec-modal-subsol { flex-direction: column; align-items: stretch; }
    .ec-modal-butoane { flex-direction: column-reverse; }
    .ec-modal-butoane .ec-btn { width: 100%; padding: .8rem 1rem; }

    /* Tabelele de cookie-uri nu incap pe latime — scroll orizontal propriu */
    .ec-detalii-cookieuri,
    .ec-modal-politica .ec-modal-corp { overflow-x: auto; }
    .ec-tabel-cookieuri { min-width: 460px; }

    .ec-prompt-actiune {
        left: 50% !important;
        transform: translateX(-50%);
        width: min(320px, calc(100vw - 2rem));
    }
}