/**
 * Meranu_CookieCompliance — Cookie Banner Styles v3
 *
 * Positions: bottom | top | bottom-left | bottom-right |
 *            top-left | top-right | center
 * Backdrop:  none | dim | light | medium | heavy
 * Reject:    dismiss | redirect (leave-page UI)
 */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --cookie-bg:         var(--meranu-bg-secondary, #111111);
    --cookie-border:     var(--meranu-border, #333333);
    --cookie-text:       var(--meranu-text-primary, #f5f5f0);
    --cookie-muted:      var(--meranu-text-secondary, #999999);
    --cookie-accent:     var(--meranu-accent-yellow, #f0d020);
    --cookie-font:       var(--meranu-font-body, 'Barlow Condensed', sans-serif);
    --cookie-radius:     var(--meranu-btn-radius, 0px);
    --cookie-z-bd:       8999;   /* backdrop z-index */
    --cookie-z-bn:       9000;   /* banner z-index   */
    --cookie-blur:       0px;    /* set inline by PHP on the backdrop element */
    --cookie-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════
   BACKDROP
   ══════════════════════════════════════════════════════════

   WHY ::before FOR backdrop-filter
   ─────────────────────────────────
   backdrop-filter on an element creates a new stacking context
   and flattens all elements below it (including siblings rendered
   later in the DOM) into a single composited layer — then blurs
   that layer. Result: the banner, even at a higher z-index, gets
   blurred because it shares the same composited layer.

   Fix: apply backdrop-filter only to a ::before pseudo-element
   *inside* the backdrop div. The pseudo-element blurs what is
   behind the backdrop div itself, but the banner (a sibling,
   not a child) is NOT inside that compositing scope, so it
   remains sharp.

   pointer-events: none — ALWAYS — on both backdrop and ::before.
   Clicking the backdrop must never dismiss the banner; the user
   must make an explicit consent choice.
   ══════════════════════════════════════════════════════════ */

.meranu-cookie-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cookie-z-bd);
    opacity: 0;
    pointer-events: none;   /* never intercept clicks */
    visibility: hidden;
    transition:
        opacity var(--cookie-transition),
        visibility 0s linear var(--cookie-transition);
}

/* The ::before carries the actual blur — isolated stacking context */
.meranu-cookie-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* backdrop-filter here only composites what is behind .meranu-cookie-backdrop,
       not the banner which is a sibling outside this stacking context */
    backdrop-filter: blur(var(--cookie-blur, 0px));
    -webkit-backdrop-filter: blur(var(--cookie-blur, 0px));
}

/* Dim-only: dark tint on ::before, no blur */
.meranu-cookie-backdrop--dim::before    { background: rgba(0, 0, 0, 0.55); }
/* Blur variants: tint lives on ::before alongside the filter */
.meranu-cookie-backdrop--light::before  { background: rgba(0, 0, 0, 0.25); }
.meranu-cookie-backdrop--medium::before { background: rgba(0, 0, 0, 0.35); }
.meranu-cookie-backdrop--heavy::before  { background: rgba(0, 0, 0, 0.45); }

.meranu-cookie-backdrop.is-visible {
    opacity: 1;
    /* pointer-events intentionally NOT set here — backdrop never clickable */
    visibility: visible;
    transition:
        opacity var(--cookie-transition),
        visibility 0s linear 0s;
}

.meranu-cookie-backdrop.is-leaving {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   BANNER BASE
   No display:none — always in DOM, hidden off-screen via
   transform so CSS transitions always have a start state.
   ══════════════════════════════════════════════════════════ */

.meranu-cookie-banner {
    position: fixed;
    z-index: var(--cookie-z-bn);
    font-family: var(--cookie-font);
    background-color: var(--cookie-bg);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    max-height: 90vh;
    overflow-y: auto;
    transition:
        opacity var(--cookie-transition),
        transform var(--cookie-transition),
        visibility 0s linear var(--cookie-transition);
}

.meranu-cookie-banner.is-visible {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition:
        opacity var(--cookie-transition),
        transform var(--cookie-transition),
        visibility 0s linear 0s;
}

.meranu-cookie-banner.is-leaving {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   POSITION VARIANTS
   Each variant defines:
     - Placement (top/bottom/left/right/center)
     - Initial transform (direction the banner slides in from)
     - Border accent
   ══════════════════════════════════════════════════════════ */

/* ── Bottom bar (full width) ─────────────────────────────── */
.meranu-cookie-banner--bottom {
    bottom: 0; left: 0; right: 0; width: 100%;
    border-top: 1px solid var(--cookie-border);
    transform: translateY(110%);
}
.meranu-cookie-banner--bottom.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--bottom.is-leaving  { transform: translateY(110%); }

/* ── Top bar (full width) ────────────────────────────────── */
.meranu-cookie-banner--top {
    top: 0; left: 0; right: 0; width: 100%;
    border-bottom: 1px solid var(--cookie-border);
    transform: translateY(-110%);
}
.meranu-cookie-banner--top.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--top.is-leaving  { transform: translateY(-110%); }

/* ── Shared corner panel base ────────────────────────────── */
.meranu-cookie-banner--bottom-left,
.meranu-cookie-banner--bottom-right,
.meranu-cookie-banner--top-left,
.meranu-cookie-banner--top-right {
    width: 400px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--cookie-border);
    border-top: 2px solid var(--cookie-accent);
}

/* ── Bottom-left corner ──────────────────────────────────── */
.meranu-cookie-banner--bottom-left {
    bottom: 20px; left: 20px;
    transform: translateY(calc(100% + 24px));
}
.meranu-cookie-banner--bottom-left.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--bottom-left.is-leaving  { transform: translateY(calc(100% + 24px)); }

/* ── Bottom-right corner ─────────────────────────────────── */
.meranu-cookie-banner--bottom-right {
    bottom: 20px; right: 20px;
    transform: translateY(calc(100% + 24px));
}
.meranu-cookie-banner--bottom-right.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--bottom-right.is-leaving  { transform: translateY(calc(100% + 24px)); }

/* ── Top-left corner ─────────────────────────────────────── */
.meranu-cookie-banner--top-left {
    top: 20px; left: 20px;
    transform: translateY(calc(-100% - 24px));
}
.meranu-cookie-banner--top-left.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--top-left.is-leaving  { transform: translateY(calc(-100% - 24px)); }

/* ── Top-right corner ────────────────────────────────────── */
.meranu-cookie-banner--top-right {
    top: 20px; right: 20px;
    transform: translateY(calc(-100% - 24px));
}
.meranu-cookie-banner--top-right.is-visible  { transform: translateY(0); }
.meranu-cookie-banner--top-right.is-leaving  { transform: translateY(calc(-100% - 24px)); }

/* ── Center modal ────────────────────────────────────────── */
.meranu-cookie-banner--center {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 520px;
    max-width: calc(100vw - 40px);
    border: 1px solid var(--cookie-border);
    border-top: 3px solid var(--cookie-accent);
    /* Override max-height for modal — should feel contained */
    max-height: 80vh;
}
.meranu-cookie-banner--center.is-visible {
    transform: translate(-50%, -50%) scale(1);
}
.meranu-cookie-banner--center.is-leaving {
    transform: translate(-50%, -50%) scale(0.92);
}

/* ═══════════════════════════════════════════════════════════
   INNER CONTENT
   ══════════════════════════════════════════════════════════ */

/* Main panel — flex row on bars, column on corner/modal */
.meranu-cookie-banner__main {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px clamp(16px, 2.5vw, 36px);
    max-width: 1440px;
    margin: 0 auto;
}

/* Stack vertically on narrow positions */
.meranu-cookie-banner--bottom .meranu-cookie-banner__main,
.meranu-cookie-banner--top .meranu-cookie-banner__main {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.meranu-cookie-banner--bottom-left .meranu-cookie-banner__main,
.meranu-cookie-banner--bottom-right .meranu-cookie-banner__main,
.meranu-cookie-banner--top-left .meranu-cookie-banner__main,
.meranu-cookie-banner--top-right .meranu-cookie-banner__main,
.meranu-cookie-banner--center .meranu-cookie-banner__main {
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 640px) {
    .meranu-cookie-banner__main {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

.meranu-cookie-banner__content { flex: 1; min-width: 0; }

/* ── Typography ──────────────────────────────────────────── */
.meranu-cookie-banner__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cookie-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.meranu-cookie-banner__message {
    font-size: 13px;
    color: var(--cookie-muted);
    line-height: 1.65;
    margin: 0;
}

.meranu-cookie-banner__policy-link {
    color: var(--cookie-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.meranu-cookie-banner__policy-link:hover { color: var(--cookie-text); }

/* ── Action buttons ──────────────────────────────────────── */
.meranu-cookie-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Full-width actions for corner/modal positions */
.meranu-cookie-banner--bottom-left .meranu-cookie-banner__actions,
.meranu-cookie-banner--bottom-right .meranu-cookie-banner__actions,
.meranu-cookie-banner--top-left .meranu-cookie-banner__actions,
.meranu-cookie-banner--top-right .meranu-cookie-banner__actions,
.meranu-cookie-banner--center .meranu-cookie-banner__actions {
    width: 100%;
    margin-top: 4px;
}

.meranu-cookie-banner__actions button {
    font-family: var(--cookie-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 11px 20px;
    cursor: pointer;
    border-radius: var(--cookie-radius);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    line-height: 1;
    flex: 1;
}

/* Override: bar positions keep auto-width buttons */
.meranu-cookie-banner--bottom .meranu-cookie-banner__actions button,
.meranu-cookie-banner--top .meranu-cookie-banner__actions button {
    flex: 0 0 auto;
}

.meranu-cookie-banner__accept-all {
    background-color: var(--cookie-text);
    color: #0a0a0a;
    border: 1px solid var(--cookie-text);
}
.meranu-cookie-banner__accept-all:hover {
    background-color: var(--cookie-accent);
    border-color: var(--cookie-accent);
}

.meranu-cookie-banner__settings {
    background: transparent;
    color: var(--cookie-text);
    border: 1px solid var(--cookie-border);
}
.meranu-cookie-banner__settings:hover { border-color: var(--cookie-text); }

/* ═══════════════════════════════════════════════════════════
   SETTINGS PANEL
   ══════════════════════════════════════════════════════════ */

.meranu-cookie-banner__settings-panel {
    padding: 20px clamp(16px, 2.5vw, 36px) 24px;
    max-width: 860px;
    margin: 0 auto;
}

.meranu-cookie-banner--bottom-left .meranu-cookie-banner__settings-panel,
.meranu-cookie-banner--bottom-right .meranu-cookie-banner__settings-panel,
.meranu-cookie-banner--top-left .meranu-cookie-banner__settings-panel,
.meranu-cookie-banner--top-right .meranu-cookie-banner__settings-panel,
.meranu-cookie-banner--center .meranu-cookie-banner__settings-panel {
    max-width: none;
}

.meranu-cookie-banner__back {
    background: none;
    border: none;
    color: var(--cookie-muted);
    font-family: var(--cookie-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin-bottom: 14px;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.meranu-cookie-banner__back:hover { color: var(--cookie-text); }

/* ── Cookie Categories ────────────────────────────────────  */
.meranu-cookie-banner__categories { margin: 16px 0 20px; }

.meranu-cookie-cat {
    padding: 14px 0;
    border-bottom: 1px solid var(--cookie-border);
}
.meranu-cookie-cat:last-child { border-bottom: none; }

.meranu-cookie-cat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.meranu-cookie-cat__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cookie-text);
}

.meranu-cookie-cat__always-on {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cookie-accent);
}

.meranu-cookie-cat__desc {
    font-size: 12px;
    color: var(--cookie-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Toggle Switch ────────────────────────────────────────── */
.meranu-cookie-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.meranu-cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.meranu-cookie-toggle__track {
    width: 42px;
    height: 22px;
    background-color: var(--cookie-border);
    border-radius: 11px;
    position: relative;
    transition: background-color 0.2s ease;
}

.meranu-cookie-toggle__thumb {
    width: 16px;
    height: 16px;
    background-color: var(--cookie-muted);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.meranu-cookie-toggle input:checked + .meranu-cookie-toggle__track { background-color: var(--cookie-accent); }
.meranu-cookie-toggle input:checked + .meranu-cookie-toggle__track .meranu-cookie-toggle__thumb {
    transform: translateX(20px);
    background-color: #0a0a0a;
}
.meranu-cookie-toggle input:focus-visible + .meranu-cookie-toggle__track {
    outline: 2px solid var(--cookie-accent);
    outline-offset: 2px;
}

/* ── Settings actions ─────────────────────────────────────── */
.meranu-cookie-banner__save-settings {
    background-color: var(--cookie-text) !important;
    color: #0a0a0a !important;
    border: 1px solid var(--cookie-text) !important;
}
.meranu-cookie-banner__save-settings:hover {
    background-color: var(--cookie-accent) !important;
    border-color: var(--cookie-accent) !important;
}

.meranu-cookie-banner__reject-all {
    background: transparent;
    color: var(--cookie-muted);
    border: 1px solid var(--cookie-border);
}
.meranu-cookie-banner__reject-all:hover {
    color: var(--cookie-text);
    border-color: var(--cookie-text);
}

/* ═══════════════════════════════════════════════════════════
   LEAVE PAGE / REDIRECT STATE
   Shown after clicking "Reject & Leave Page" while the
   redirect delay counts down.
   ══════════════════════════════════════════════════════════ */

.meranu-cookie-banner__leaving {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px clamp(16px, 2.5vw, 36px);
    text-align: center;
    gap: 12px;
}

.meranu-cookie-banner__leaving-icon {
    font-size: 32px;
    color: var(--cookie-accent);
    animation: cookieLeaveArrow 0.6s ease-in-out infinite alternate;
}

@keyframes cookieLeaveArrow {
    from { transform: translateX(0); }
    to   { transform: translateX(8px); }
}

.meranu-cookie-banner__leaving-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cookie-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .meranu-cookie-banner--bottom-left,
    .meranu-cookie-banner--bottom-right,
    .meranu-cookie-banner--top-left,
    .meranu-cookie-banner--top-right {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none;
    }

    .meranu-cookie-banner--bottom-left,
    .meranu-cookie-banner--bottom-right { bottom: 12px; }
    .meranu-cookie-banner--top-left,
    .meranu-cookie-banner--top-right    { top: 12px; }

    .meranu-cookie-banner--center {
        width: calc(100vw - 24px);
        max-width: none;
    }
}