/**
 * Darealmop_Gdpr — Banner Structural Skeleton
 *
 * STRUCTURE ONLY — this stylesheet ships NO appearance. It defines the
 * placement of every banner position variant (bottom / top bars, four
 * corner cards, centered modal), the always-in-DOM show/hide mechanic,
 * the backdrop's positioning + pointer-events, and the inner layout
 * scaffolding. It paints NO colours, backgrounds, shadows, decorative
 * borders, radii or fonts.
 *
 * On Magento's bare blank theme the banner is fully functional but
 * visually unstyled. Theme designers own 100% of the look and paint it
 * through the `--dm-gdpr-*` custom properties and the selectors this
 * module creates.
 *
 * See the README section "## CSS hooks (for theme designers)" for the
 * full token + selector inventory.
 *
 * Functional tokens this skeleton reads (mechanics, not appearance):
 *   --dm-gdpr-z            banner stacking (numeric fallback 9000)
 *   --dm-gdpr-z-backdrop   backdrop stacking (numeric fallback 8999)
 *   --dm-gdpr-transition   show/hide motion easing (designer-owned)
 *   --dm-gdpr-blur         backdrop blur radius — set INLINE by phtml;
 *                          blur is a designer choice, not a module default
 */

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

   WHY ::before CARRIES backdrop-filter
   ─────────────────────────────────────
   backdrop-filter on an element creates a new stacking context and
   flattens every element below into one composited layer — *then*
   blurs it. 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; the banner (a sibling, not a
   child) is NOT inside that compositing scope, so it stays sharp.

   The blur radius itself is a designer choice driven by the
   --dm-gdpr-blur token (set inline by the phtml). With no token the
   backdrop simply doesn't blur — there is no module-imposed default.

   pointer-events: none — ALWAYS — on both backdrop and ::before.
   Clicking the backdrop must never dismiss the banner; the visitor
   must make an explicit consent choice. GDPR compliance, not just
   UX preference.

   The backdrop carries NO colour here. A bare backdrop is invisible;
   the designer paints it (e.g. on .dm-gdpr-backdrop::before, or per
   intensity variant) via their own background / token.
   ═════════════════════════════════════════════════════════════ */

.dm-gdpr-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--dm-gdpr-z-backdrop, 8999);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--dm-gdpr-transition),
        visibility 0s linear var(--dm-gdpr-transition);
}

.dm-gdpr-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: blur(var(--dm-gdpr-blur, 0px));
    -webkit-backdrop-filter: blur(var(--dm-gdpr-blur, 0px));
}

.dm-gdpr-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--dm-gdpr-transition),
        visibility 0s linear 0s;
}

.dm-gdpr-backdrop.is-leaving { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   BANNER BASE

   Banner is always in the DOM. Hidden states use opacity +
   transform so the CSS transition always has a start state to
   animate from — no `display: none` flicker.
   ═════════════════════════════════════════════════════════════ */

.dm-gdpr-banner {
    position: fixed;
    z-index: var(--dm-gdpr-z, 9000);
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--dm-gdpr-transition),
        transform var(--dm-gdpr-transition),
        visibility 0s linear var(--dm-gdpr-transition);
}

.dm-gdpr-banner * { box-sizing: border-box; }

.dm-gdpr-banner.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity var(--dm-gdpr-transition),
        transform var(--dm-gdpr-transition),
        visibility 0s linear 0s;
}

.dm-gdpr-banner.is-leaving {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   POSITION VARIANTS — placement + slide-in direction

   Each variant pins the banner to its edge / corner / centre and
   sets the off-screen transform it animates from. This is the
   structural heart of the module: the designer never has to know
   how each position is wired, only how to colour it.
   ═════════════════════════════════════════════════════════════ */

/* Bottom bar (full width) */
.dm-gdpr-banner--bottom {
    bottom: 0; left: 0; right: 0; width: 100%;
    transform: translateY(110%);
}
.dm-gdpr-banner--bottom.is-visible { transform: translateY(0); }
.dm-gdpr-banner--bottom.is-leaving { transform: translateY(110%); }

/* Top bar (full width) */
.dm-gdpr-banner--top {
    top: 0; left: 0; right: 0; width: 100%;
    transform: translateY(-110%);
}
.dm-gdpr-banner--top.is-visible { transform: translateY(0); }
.dm-gdpr-banner--top.is-leaving { transform: translateY(-110%); }

/* Shared corner panel base */
.dm-gdpr-banner--bottom-left,
.dm-gdpr-banner--bottom-right,
.dm-gdpr-banner--top-left,
.dm-gdpr-banner--top-right {
    width: 420px;
    max-width: calc(100vw - 32px);
}

.dm-gdpr-banner--bottom-left {
    bottom: 24px; left: 24px;
    transform: translateY(calc(100% + 32px));
}
.dm-gdpr-banner--bottom-left.is-visible { transform: translateY(0); }
.dm-gdpr-banner--bottom-left.is-leaving { transform: translateY(calc(100% + 32px)); }

.dm-gdpr-banner--bottom-right {
    bottom: 24px; right: 24px;
    transform: translateY(calc(100% + 32px));
}
.dm-gdpr-banner--bottom-right.is-visible { transform: translateY(0); }
.dm-gdpr-banner--bottom-right.is-leaving { transform: translateY(calc(100% + 32px)); }

.dm-gdpr-banner--top-left {
    top: 24px; left: 24px;
    transform: translateY(calc(-100% - 32px));
}
.dm-gdpr-banner--top-left.is-visible { transform: translateY(0); }
.dm-gdpr-banner--top-left.is-leaving { transform: translateY(calc(-100% - 32px)); }

.dm-gdpr-banner--top-right {
    top: 24px; right: 24px;
    transform: translateY(calc(-100% - 32px));
}
.dm-gdpr-banner--top-right.is-visible { transform: translateY(0); }
.dm-gdpr-banner--top-right.is-leaving { transform: translateY(calc(-100% - 32px)); }

/* Center modal */
.dm-gdpr-banner--center {
    top: 50%; left: 50%;
    width: min(560px, calc(100vw - 40px));
    max-height: 80vh;
    transform: translate(-50%, -50%) scale(0.92);
}
.dm-gdpr-banner--center.is-visible { transform: translate(-50%, -50%) scale(1); }
.dm-gdpr-banner--center.is-leaving { transform: translate(-50%, -50%) scale(0.92); }

/* ═══════════════════════════════════════════════════════════════
   INNER LAYOUT
   ═════════════════════════════════════════════════════════════ */

.dm-gdpr-banner__main {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px clamp(16px, 3vw, 40px);
    max-width: 1280px;
    margin: 0 auto;
}

.dm-gdpr-banner--bottom .dm-gdpr-banner__main,
.dm-gdpr-banner--top .dm-gdpr-banner__main {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dm-gdpr-banner--bottom-left .dm-gdpr-banner__main,
.dm-gdpr-banner--bottom-right .dm-gdpr-banner__main,
.dm-gdpr-banner--top-left .dm-gdpr-banner__main,
.dm-gdpr-banner--top-right .dm-gdpr-banner__main,
.dm-gdpr-banner--center .dm-gdpr-banner__main {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
}

@media (max-width: 640px) {
    .dm-gdpr-banner__main {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px;
    }
}

.dm-gdpr-banner__content { flex: 1; min-width: 0; }

.dm-gdpr-banner__title {
    margin: 0 0 6px;
    line-height: 1.25;
}

.dm-gdpr-banner__message {
    line-height: 1.65;
    margin: 0;
}

.dm-gdpr-banner__policy-link {
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — layout only; designer owns fill, text colour, borders
   ═════════════════════════════════════════════════════════════ */

.dm-gdpr-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dm-gdpr-banner--bottom-left .dm-gdpr-banner__actions,
.dm-gdpr-banner--bottom-right .dm-gdpr-banner__actions,
.dm-gdpr-banner--top-left .dm-gdpr-banner__actions,
.dm-gdpr-banner--top-right .dm-gdpr-banner__actions,
.dm-gdpr-banner--center .dm-gdpr-banner__actions {
    width: 100%;
}

.dm-gdpr-banner__btn {
    padding: 11px 22px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}

/* Corner / modal layouts: equally-weighted buttons */
.dm-gdpr-banner--bottom-left .dm-gdpr-banner__btn,
.dm-gdpr-banner--bottom-right .dm-gdpr-banner__btn,
.dm-gdpr-banner--top-left .dm-gdpr-banner__btn,
.dm-gdpr-banner--top-right .dm-gdpr-banner__btn,
.dm-gdpr-banner--center .dm-gdpr-banner__btn { flex: 1; }

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

.dm-gdpr-banner__settings {
    padding: 24px clamp(16px, 3vw, 40px) 28px;
    max-width: 860px;
    margin: 0 auto;
}

.dm-gdpr-banner--bottom-left .dm-gdpr-banner__settings,
.dm-gdpr-banner--bottom-right .dm-gdpr-banner__settings,
.dm-gdpr-banner--top-left .dm-gdpr-banner__settings,
.dm-gdpr-banner--top-right .dm-gdpr-banner__settings,
.dm-gdpr-banner--center .dm-gdpr-banner__settings {
    max-width: none;
    padding: 20px 24px 24px;
}

.dm-gdpr-banner__back {
    padding: 0;
    margin-bottom: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-gdpr-banner__categories { margin: 16px 0 20px; }

.dm-gdpr-cat {
    padding: 14px 0;
}

.dm-gdpr-cat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 5px;
}

.dm-gdpr-cat__desc {
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE SWITCH — geometry of the track + thumb + checked travel.
   Colours (track, thumb, checked states) are designer-owned.
   ═════════════════════════════════════════════════════════════ */

.dm-gdpr-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

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

.dm-gdpr-toggle__track {
    width: 42px;
    height: 22px;
    position: relative;
}

.dm-gdpr-toggle__thumb {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px; left: 3px;
    transition: transform 0.2s ease;
}

.dm-gdpr-toggle input:checked + .dm-gdpr-toggle__track .dm-gdpr-toggle__thumb {
    transform: translateX(20px);
}

/* ═══════════════════════════════════════════════════════════════
   LEAVE-PAGE STATE — rendered by JS when rejectAction = redirect
   ═════════════════════════════════════════════════════════════ */

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

.dm-gdpr-banner__leaving-icon {
    line-height: 1;
    animation: dmGdprLeaveArrow 0.6s ease-in-out infinite alternate;
}

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

@media (prefers-reduced-motion: reduce) {
    .dm-gdpr-banner__leaving-icon { animation: none; }
}

.dm-gdpr-banner__leaving-text {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — tight phones
   ═════════════════════════════════════════════════════════════ */

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

    .dm-gdpr-banner--bottom-left,
    .dm-gdpr-banner--bottom-right { bottom: 12px; }
    .dm-gdpr-banner--top-left,
    .dm-gdpr-banner--top-right    { top: 12px; }

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