/* cookie-consent — site-wide banner + preferences panel (web/templates/partials/cookie_consent.templ).
   Mounted once per page shell (marketing/app/auth/admin/guest/gallery/slideshow); wired by
   web/static/js/cookie-consent.js. BEM, tokens-only per CLAUDE.md.

   States (all via attributes/classes on the root .cookie-consent, no JS-driven inline styles):
     [data-hidden]              consent is current -> bar hidden, small reopen tab shown instead.
     .cookie-consent--open      preferences panel open (Setări / reopen / footer link clicked). */

.cookie-consent {
    font-family: var(--font-body);
}

/* ── Bar ─────────────────────────────────────────────────────────── */

.cookie-consent__bar {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-top: 0.0625rem solid var(--color-border);
    box-shadow: var(--shadow-hover);
    padding: var(--space-5) var(--space-6);
}

.cookie-consent[data-hidden] .cookie-consent__bar {
    display: none;
}

.cookie-consent__text {
    margin: 0;
    flex: 1 1 20rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

.cookie-consent__link {
    margin-left: var(--space-1);
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ── Buttons (self-contained — not every shell loads buttons.css) ──────
   Scoped under #cookie-consent + !important on the visual properties so the marketing shell's
   Elementor `button` styles (which force red/rounded-rect at mobile breakpoints) can't override
   them — same Elementor-specificity workaround used elsewhere in this codebase. */

#cookie-consent .cookie-consent__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--input-height-sm);
    padding: 0 var(--space-5);
    font-family: var(--font-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md) !important;
    border: 0.0625rem solid transparent;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    transition: background 0.15s ease, opacity 0.15s ease;
}

#cookie-consent .cookie-consent__btn--accept,
#cookie-consent .cookie-consent__btn--save {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

#cookie-consent .cookie-consent__btn--accept:hover,
#cookie-consent .cookie-consent__btn--save:hover {
    background: var(--color-primary-hover) !important;
}

#cookie-consent .cookie-consent__btn--essential,
#cookie-consent .cookie-consent__btn--settings {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

#cookie-consent .cookie-consent__btn--essential:hover,
#cookie-consent .cookie-consent__btn--settings:hover {
    background: var(--color-bg) !important;
}

/* ── Preferences panel ──────────────────────────────────────────── */

.cookie-consent__panel {
    display: none;
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 1001;
    width: min(26rem, calc(100% - var(--space-8)));
    max-height: min(34rem, calc(100vh - var(--space-12)));
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    padding: var(--space-6);
}

.cookie-consent--open .cookie-consent__panel {
    display: block;
}

.cookie-consent__panel-title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-brand);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.cookie-consent__categories {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cookie-consent__category-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.cookie-consent__checkbox {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
}

.cookie-consent__checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-consent__category-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cookie-consent__category-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.cookie-consent__category-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.cookie-consent__panel-actions {
    display: flex;
    justify-content: flex-end;
}

/* ── Reopen tab (visible only once the bar is dismissed) ─────────────
   Bottom-RIGHT on purpose: bottom-left is taken by the app shell's
   "Deconectare" sidebar footer button (and by the slideshow QR overlay),
   which this used to cover and intercept clicks for. */

#cookie-consent .cookie-consent__reopen {
    display: none;
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 999;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    background: var(--color-surface) !important;
    color: var(--color-primary) !important;
    border: 0.0625rem solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--shadow-hover) !important;
    transition: background 0.15s ease, transform 0.15s ease;
}

#cookie-consent .cookie-consent__reopen:hover {
    background: var(--color-bg) !important;
    transform: translateY(-0.0625rem);
}

#cookie-consent .cookie-consent__reopen-icon {
    width: 1.625rem !important;
    height: 1.625rem !important;
    display: block;
}

#cookie-consent[data-hidden] .cookie-consent__reopen {
    display: inline-flex !important;
}

/* Footer "Preferințe cookie-uri" link (marketing footer Legal column) reuses this hook name so
   cookie-consent.js can bind it without an inline handler; no visual override needed — it also
   carries .mkt-footer__link and inherits that footer-link styling. */
.cookie-consent__footer-link {
    cursor: pointer;
}

@media (max-width: 37.5rem) {
    .cookie-consent__bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .cookie-consent__text {
        flex: none;
    }

    .cookie-consent__actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .cookie-consent__btn {
        width: 100%;
        height: var(--input-height);
    }

    .cookie-consent__panel {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        width: auto;
        max-height: 80vh;
    }
}