/* /Components/Layout/Footer.razor.rz.scp.css */
/* Footer.razor.css
   Purpose:
   - Style the legal/footer navigation links (Privacy/Legal/Terms/Cookies).
   - Ensure footer links use the same token-driven color behavior as the top navbar
     (hover/active/focus + icon tinting), without touching NavMenu.*.

   Notes / Why:
   - This file is CSS-isolated to Footer.razor, so it can safely normalize
     <a> and <button> appearance without affecting the header.
   - The footer wrapper (<footer class="app-footer">) controls the “bar” visuals
     (background/border/padding). This file focuses on the interactive items inside.
   - The markup contains both NavLink (<a>) and a modal trigger (<button>),
     so we style both to behave identically.
*/


/* ============================================================
   1) FOOTER NAV CONTAINER (layout + density)
   Why:
   - Center items, allow wrapping on small widths, and keep spacing consistent.
   - IMPORTANT: keep padding neutral here so the wrapper (.app-footer)
     is the single source of truth for vertical placement.
   ============================================================ */

.footer-nav[b-ogtymfrsjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.35rem;
    margin: 0;
    padding: 0; /* wrapper (.app-footer) handles vertical spacing */
    /* slightly smaller typography than header */
    font-size: 0.8rem;
    line-height: 1.2;
    /* keep the same “glass” feel as other nav surfaces */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .footer-nav .nav-item[b-ogtymfrsjv] {
        display: inline-flex;
    }


    /* ============================================================
   2) LINK/BUTTON NORMALIZATION (make <a> and <button> identical)
   Why:
   - NavLink renders <a>, cookie preferences uses <button>.
   - We want equal padding, alignment, hover/active/focus behavior, and typography.
   - Create a stable “pill height” so content is vertically centered.
   ============================================================ */

    .footer-nav[b-ogtymfrsjv]  a.footer-link,
    .footer-nav[b-ogtymfrsjv]  button.footer-link {
        color: var(--evf-nav-link-color);
        background: none;
        border: none;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        /* Stable vertical centering */
        min-height: 2rem;
        padding: 0.2rem 0.3rem 0 0;
        border-radius: 0.5rem;
        transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
        cursor: pointer;
        /* typography parity between <a> and <button> */
        font: inherit;
        line-height: 1;
        /* remove default button styling quirks across browsers */
        -webkit-appearance: none;
        appearance: none;
    }

    /* Button-specific: keep it from behaving like a full-width text block */
    .footer-nav[b-ogtymfrsjv]  button.footer-link {
        text-align: left;
        white-space: nowrap;
    }


        /* ============================================================
   3) INTERACTION STATES (hover / active / focus)
   Why:
   - Use the same global tokens as the top navbar.
   - Active state is driven by NavLink adding the .active class to <a>.
   - Provide a safe fallback for active background if the token is absent.
   ============================================================ */

        /* Hover */
        .footer-nav[b-ogtymfrsjv]  a.footer-link:hover,
        .footer-nav[b-ogtymfrsjv]  button.footer-link:hover {
            background-color: var(--evf-nav-link-hover-bg);
            color: var(--evf-nav-link-color);
            text-decoration: none;
        }

        /* Active (NavLink adds .active).
   Fallback if active-bg token isn't defined. */
        .footer-nav[b-ogtymfrsjv]  a.footer-link.active,
        .footer-nav[b-ogtymfrsjv]  a.active.footer-link,
        .footer-nav[b-ogtymfrsjv]  a.active,
        .footer-nav[b-ogtymfrsjv]  button.footer-link.active {
            background-color: var(--evf-nav-link-active-bg, var(--evf-nav-link-hover-bg));
            color: var(--evf-nav-link-color);
        }

        /* Focus ring (keyboard accessibility) */
        .footer-nav[b-ogtymfrsjv]  a.footer-link:focus-visible,
        .footer-nav[b-ogtymfrsjv]  button.footer-link:focus-visible {
            outline: none;
            box-shadow: 0 0 0 0.25rem var(--evf-nav-focus-ring);
        }


    /* ============================================================
   4) ICON STYLING + STATE TINTING
   Why:
   - NavMenu.razor.css is isolated and will not style footer icons.
   - Keep icons visually aligned with text inside the fixed-height pill.
   ============================================================ */

    .footer-nav[b-ogtymfrsjv]  .evf-nav-icon {
        font-size: 1.1rem; /* slightly smaller than header */
        line-height: 1;
        margin-right: 0.6rem;
        /* avoid “floating” icons: keep neutral baseline */
        position: relative;
        top: 0;
        color: var(--evf-nav-icon-color);
    }

    /* Icon tint on hover/active */
    .footer-nav[b-ogtymfrsjv]  a.footer-link:hover .evf-nav-icon,
    .footer-nav[b-ogtymfrsjv]  button.footer-link:hover .evf-nav-icon,
    .footer-nav[b-ogtymfrsjv]  a.active .evf-nav-icon,
    .footer-nav[b-ogtymfrsjv]  button.footer-link.active .evf-nav-icon {
        color: var(--evf-nav-icon-color-active);
    }
/* /Components/Layout/InfoLine.razor.rz.scp.css */
/* InfoLine.razor.css */

.info-line[b-nfgrqq8ve8] {
    border-bottom: 1px solid var(--evf-nav-border);
    background-color: var(--evf-nav-header-bg);
    /* Blur / glass */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    /* Prevent selecting/marking anything in the info line (incl. the X button text) */
    .info-line[b-nfgrqq8ve8],
    .info-line *[b-nfgrqq8ve8] {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

/* container becomes the flex row */
.info-line-container[b-nfgrqq8ve8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* keep the latest "as-is" sizing */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* ensure content can shrink nicely */
.info-line-content[b-nfgrqq8ve8] {
    flex: 1;
    min-width: 0;
    min-height: 1.25rem; /* keeps the line slim even if empty */
}

.info-line-placeholder[b-nfgrqq8ve8] {
    display: block;
    min-height: 1.25rem;
}

.info-line-close[b-nfgrqq8ve8] {
    border: 1px solid var(--evf-nav-border);
    background: transparent;
    color: var(--evf-nav-link-color);
    border-radius: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

    .info-line-close:focus-visible[b-nfgrqq8ve8] {
        outline: none;
        box-shadow: 0 0 0 0.25rem var(--evf-nav-focus-ring);
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout.razor.css
   Purpose:
   - Define the global page skeleton (header / main / footer).
   - Keep the header sticky so InfoLine + NavMenu stay visible.
   - Ensure the main content expands to fill remaining height.
   - Preserve the built-in Blazor error UI (fixed, always on top).

   Notes / Why:
   - Layout rules here are structural only (flow + stacking).
   - Component visuals (colors, hover states, etc.) live in the
     component-scoped CSS files (NavMenu, InfoLine, Footer).
   - This file may include a few shared tokens/helpers that must
     affect multiple components (e.g., icon class used in footer).
   ============================================================ */


/* ============================================================
   1) PAGE SHELL
   Why:
   - Establish a full-viewport-height flex column.
   - Enables pushing the footer to the bottom on short pages via
     .app-footer { margin-top: auto; }.
   ============================================================ */

.page[b-8ukyu11dk6] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ============================================================
   2) SHARED ICON CLASS (global scope)
   Why:
   - .evf-nav-icon is used by both header and footer markup.
   - NavMenu.razor.css is isolated and won’t style icons outside
     the NavMenu component, so we provide the shared base here.
   ============================================================ */

.evf-nav-icon[b-8ukyu11dk6] {
    font-size: 1.25rem;
    line-height: 1;
    margin-right: 0.75rem;
    position: relative;
    top: -1px;
    color: var(--evf-nav-icon-color);
}


/* ============================================================
   3) STICKY HEADER (InfoLine + NavMenu)
   Why:
   - Keeps key navigation and status/info visible while scrolling.
   - z-index ensures it sits above scrolling page content.
   ============================================================ */

.app-header[b-8ukyu11dk6] {
    position: sticky;
    top: 0;
    z-index: 20;
}


/* ============================================================
   4) FOOTER (normal document flow)
   Why:
   - Footer is part of the page flow (not fixed).
   - margin-top:auto pushes it to the bottom when content is short.
   - Visual “bar” styling stays here because .app-footer is the
     layout wrapper around the Footer component, not the links.
   - Bottom padding is intentionally removed so the footer edge can
     sit flush with the viewport bottom if desired.
   ============================================================ */

.app-footer[b-8ukyu11dk6] {
    /* removed: position: fixed; left/right/bottom; z-index */
    width: 100%;
    /* keep your visuals */
    min-height: 2.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--evf-nav-border);
    background-color: var(--evf-nav-header-bg);
    padding: 0.4rem 1rem 0.4rem; /* top | left+right | bottom=0 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    /* ensures footer sits at bottom on short pages */
    margin-top: auto;
}


/* ============================================================
   5) MAIN CONTENT AREA
   Why:
   - Takes the remaining space in the flex column.
   - Allows footer to follow after content naturally.
   - Optional bottom padding adds breathing room above the footer.
   ============================================================ */

.app-main[b-8ukyu11dk6] {
    flex: 1;
}


/* ============================================================
   6) BLAZOR ERROR UI (framework default behavior)
   Why:
   - Built-in unhandled error banner: keep behavior predictable.
   - Fixed positioning ensures it stays visible while scrolling.
   - This is global UI, so it belongs in the layout scope.
   - Visible text is generated via CSS so it’s not a static HTML
     text node (helps with certain indexing/UX requirements).
   ============================================================ */

#blazor-error-ui[b-8ukyu11dk6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

    /* Visible message is generated via CSS so it's not present as HTML text nodes. */
    #blazor-error-ui[b-8ukyu11dk6]::before {
        content: "An unhandled error has occurred.";
        margin-right: 0.75rem;
    }

    /* Ensure Reload always performs a full page load (no enhanced navigation). */
    #blazor-error-ui .reload[b-8ukyu11dk6] {
        display: inline-block;
        margin-right: 0.75rem;
        text-decoration: underline;
    }

        #blazor-error-ui .reload[b-8ukyu11dk6]::before {
            content: "Reload";
        }

    /* Dismiss "X" rendered via CSS, keeping the expected .dismiss element. */
    #blazor-error-ui .dismiss[b-8ukyu11dk6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        display: inline-block;
    }

        #blazor-error-ui .dismiss[b-8ukyu11dk6]::before {
            content: "🗙";
        }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   NavMenu.razor.css (CSS isolation)

   Intent:
   - Pixel-stable top bar height across breakpoints.
   - Hover/active background is a smaller “pill” (not full row height).
   - Mobile: collapsible sheet + full-viewport separators.
   - Desktop: grid layout (brand left / main center / auth right).

   Notes:
   - Colors are token-driven from global :root (app-test.css).
   - This file only affects NavMenu markup (CSS isolation).
   ============================================================ */


/* ============================================================
   1) GLOBAL KNOBS + NAVBAR CHROME
   ============================================================ */

.top-row[b-p1uvcd6fje] {
    /* Single source of truth for top bar height */
    --evf-nav-topbar-height: 54px;
    --evf-nav-separator: 1px;
    /* Link hit-height (controls spacing of nav items).
       Desktop uses almost full bar height; Mobile overrides this smaller. */
    --evf-nav-link-hit-height: calc(var(--evf-nav-topbar-height) - 2px);
    /* Small-pill background knobs (visual only; hit area stays full) */
    --evf-nav-pill-inset-y: 0.35rem; /* bigger => smaller pill height */
    --evf-nav-pill-inset-x: 0.25rem; /* bigger => narrower pill */
    /* Bootstrap: prevent breakpoint-dependent vertical padding drift */
    --bs-navbar-padding-y: 0;
    min-height: var(--evf-nav-topbar-height);
    background-color: var(--evf-nav-footer-bg);
    display: flex;
    align-items: center;
    /* Glass effect */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* ============================================================
   2) TOP BAR ROW (brand + toggler)
   ============================================================ */

.nav-shell[b-p1uvcd6fje] {
    width: 100%;
}

.nav-bar[b-p1uvcd6fje] {
    height: var(--evf-nav-topbar-height);
    min-height: var(--evf-nav-topbar-height); /* defensive */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* anchors mobile separator line */
}


/* ============================================================
   3) BRAND (logo + text)
   ============================================================ */

.navbar-brand[b-p1uvcd6fje] {
    font-size: 1.1rem;
    color: var(--evf-nav-link-color);
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* Ensure links inside the bar use the theme color and no underline */
.top-row[b-p1uvcd6fje]  a,
.top-row[b-p1uvcd6fje]  .navbar-brand {
    color: var(--evf-nav-link-color);
    text-decoration: none;
}


/* ============================================================
   4) TOGGLER (mobile hamburger)
   - Sized from bar height
   - Mask icon so color is token-driven
   ============================================================ */

.navbar-toggler[b-p1uvcd6fje] {
    --evf-toggler-vpad: 6px;
    --evf-toggler-size: calc(var(--evf-nav-topbar-height) - (2 * var(--evf-toggler-vpad)));
    --evf-toggler-icon: calc(var(--evf-toggler-size) - 10px);
    cursor: pointer;
    width: var(--evf-toggler-size);
    height: var(--evf-toggler-size);
    border-radius: 0.5rem;
    border: 1px solid var(--evf-nav-toggler-border);
    background-color: var(--evf-nav-toggler-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    padding: 0;
    line-height: 0;
    /* Bootstrap focus width override (toggler only) */
    --bs-navbar-toggler-focus-width: 0.1rem;
}

    .navbar-toggler[b-p1uvcd6fje]::before {
        content: "";
        width: var(--evf-toggler-icon);
        height: var(--evf-toggler-icon);
        background-color: var(--evf-nav-toggler-icon-color);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
    }

    /* Toggle state via aria-expanded */
    .navbar-toggler[aria-expanded="true"][b-p1uvcd6fje] {
        background-color: var(--evf-nav-toggler-bg-checked);
    }

        .navbar-toggler[aria-expanded="true"][b-p1uvcd6fje]::before {
            background-color: var(--evf-nav-toggler-icon-color-checked);
        }

/* Focus ring (keyboard) */
.top-row .navbar-toggler:focus-visible[b-p1uvcd6fje],
.top-row .navbar-toggler:focus[b-p1uvcd6fje] {
    outline: none;
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) var(--evf-nav-focus-ring);
}

/* When dropdown is open, force toggler into checked colors */
.nav-shell:has(.nav-scrollable.show) .navbar-toggler[b-p1uvcd6fje] {
    background-color: var(--evf-nav-toggler-bg-checked) !important;
}

    .nav-shell:has(.nav-scrollable.show) .navbar-toggler[b-p1uvcd6fje]::before {
        background-color: var(--evf-nav-toggler-icon-color-checked) !important;
    }


/* ============================================================
   5) NAV LINKS + ICONS (small pill hover/active)
   IMPORTANT:
   - Keep full hit area via height: var(--evf-nav-link-hit-height)
   - Do NOT paint background on the link itself (prevents “double pill”)
   - Paint hover/active only on ::before (inset pill)
   ============================================================ */

.evf-nav-icon[b-p1uvcd6fje] {
    font-size: 1.25rem;
    line-height: 1;
    margin-right: 0.75rem;
    position: relative;
    top: -1px;
    color: var(--evf-nav-icon-color);
}

/* Link base (hit area) */
.nav-item[b-p1uvcd6fje]  .nav-link {
    color: var(--evf-nav-link-color);
    /* Never paint background here (prevents double-pill) */
    background-color: transparent !important;
    background-image: none !important;
    border: none;
    border-radius: 0.5rem;
    height: var(--evf-nav-link-hit-height);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.75rem;
    line-height: 1;
    position: relative; /* anchors ::before */
    transition: color 120ms ease, box-shadow 120ms ease;
}

    /* The visual pill background */
    .nav-item[b-p1uvcd6fje]  .nav-link::before {
        content: "";
        position: absolute;
        inset: var(--evf-nav-pill-inset-y) var(--evf-nav-pill-inset-x);
        border-radius: inherit;
        background-color: transparent;
        transition: background-color 120ms ease, box-shadow 120ms ease;
        pointer-events: none;
    }

    /* Keep content above the pill */
    .nav-item[b-p1uvcd6fje]  .nav-link > * {
        position: relative;
        z-index: 1;
    }

    /* Hover/Active: paint pill only */
    .nav-item[b-p1uvcd6fje]  .nav-link:hover::before {
        background-color: var(--evf-nav-link-hover-bg);
    }

.nav-item[b-p1uvcd6fje]  a.nav-link.active::before,
.nav-item[b-p1uvcd6fje]  a.active.nav-link::before {
    background-color: var(--evf-nav-link-active-bg);
}

/* Icon tint on hover/active */
.nav-item[b-p1uvcd6fje]  .nav-link:hover .evf-nav-icon,
.nav-item[b-p1uvcd6fje]  a.nav-link.active .evf-nav-icon,
.nav-item[b-p1uvcd6fje]  a.active.nav-link .evf-nav-icon {
    color: var(--evf-nav-icon-color-active);
}

/* Focus ring: match the smaller pill (not full height) */
.nav-item[b-p1uvcd6fje]  .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

    .nav-item[b-p1uvcd6fje]  .nav-link:focus-visible::before {
        box-shadow: 0 0 0 0.25rem var(--evf-nav-focus-ring);
    }


/* ============================================================
   6) MOBILE: dropdown sheet + full-viewport separators
   FIX HERE:
   - Reduce nav item height + reduce li padding => less “spacey” list
   ============================================================ */

@media (max-width: 767.98px) {

    /* Make dropdown items less tall than the top bar */
    .top-row[b-p1uvcd6fje] {
        --evf-nav-link-hit-height: 40px; /* <- main spacing fix */
        --evf-nav-pill-inset-y: 0.1rem; /* keep pill proportionate */
        /* --evf-nav-pill-inset-x: 0.25rem;  (unchanged) */
    }

    .nav-shell[b-p1uvcd6fje] {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .nav-bar[b-p1uvcd6fje] {
        flex: 0 0 100%;
        width: 100%;
    }

        /* Full-width separator under top bar (viewport-wide) */
        .nav-bar[b-p1uvcd6fje]::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 50vw);
            right: calc(50% - 50vw);
            border-bottom: var(--evf-nav-separator) solid var(--evf-nav-border);
            pointer-events: none;
        }

    /* Dropdown surface (sheet) */
    .nav-scrollable[b-p1uvcd6fje] {
        flex: 0 0 100%;
        width: 100%;
        border-top: 0;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        position: relative; /* anchors closing separator */
    }

        /* Closing separator at bottom of OPEN dropdown (viewport-wide) */
        .nav-scrollable.show[b-p1uvcd6fje]::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 50vw);
            right: calc(50% - 50vw);
            border-bottom: var(--evf-nav-separator) solid var(--evf-nav-border);
            pointer-events: none;
        }

    /* Reduce extra whitespace contributed by <li> */
    .nav-item[b-p1uvcd6fje] {
        font-size: 0.9rem;
        /* padding: 0 0.75rem; <- remove vertical padding */
    }

        /* Keep some “sheet breathing room”, but smaller than before */
        .nav-item:first-of-type[b-p1uvcd6fje] {
            padding-top: 0.5rem; /* was 1rem */
        }

        .nav-item:last-of-type[b-p1uvcd6fje] {
            padding-bottom: 0.5rem; /* was 1rem */
        }
}


/* ============================================================
   7) DESKTOP: grid layout
   ============================================================ */

@media (min-width: 768px) {

    .top-row[b-p1uvcd6fje] {
        border-bottom: var(--evf-nav-separator) solid var(--evf-nav-border);
    }

    .navbar-toggler[b-p1uvcd6fje] {
        display: none;
    }

    .nav-shell[b-p1uvcd6fje] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        width: 100%;
        column-gap: 0.75rem;
    }

    .navbar-brand[b-p1uvcd6fje] {
        justify-self: start;
    }

    /* Collapse container becomes “transparent” to the grid */
    .navbar-collapse[b-p1uvcd6fje] {
        display: contents !important;
    }

    .nav-main[b-p1uvcd6fje] {
        grid-column: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .nav-auth[b-p1uvcd6fje] {
        grid-column: 3;
        justify-self: end;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
    }
}
/* /Components/Layout/PrivacyConsentManager.razor.rz.scp.css */
/* CookieConsentManager.razor.css */
/* Dev requirements (short):
   - Responsive modal that avoids “jumping” button positions across viewports; no collapses; core actions always visible.
   - Visual coherence across layers:
       Mobile: primary action on top (Layer1 Settings / Layer2 Save), then Reject+Accept row.
       Desktop: primary action left (Layer1 Settings / Layer2 Save), Reject+Accept on the right (equal weight).
   - Reject/Accept must be visually equal; Settings/Save can be different, but not misleading.
   - Provide blurred, click-blocking backdrop via global selector (backdrop lives outside component scope). */

/* Backdrop blur/dim (global, because Bootstrap backdrop is outside the component DOM tree) */

/* Prevent scroll chaining / swipe-navigation “weirdness” while a modal is open */
:global(html)[b-6cv82ij8et],
:global(body)[b-6cv82ij8et] {
    overscroll-behavior-x: none;
}

:global(body.modal-open)[b-6cv82ij8et] {
    overscroll-behavior: none;
}

/* Don’t allow horizontal pan gestures on the consent modal surface */
.evf-cookie-modal[b-6cv82ij8et] {
    touch-action: pan-y;
}

/* Backdrop should not react to swipe gestures */
:global(.modal-backdrop.evf-cookie-backdrop)[b-6cv82ij8et] {
    touch-action: none;
}


:global(.modal-backdrop.evf-cookie-backdrop)[b-6cv82ij8et] {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Base dialog sizing */
.evf-cookie-dialog[b-6cv82ij8et] {
    margin: 1.25rem auto;
    width: min(720px, calc(100vw - 2.5rem));
    max-width: none;
}

/* Header layout (supports optional back button) */
.evf-cookie-header[b-6cv82ij8et] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.evf-cookie-back[b-6cv82ij8et] {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
}

/* Spacing */
.evf-cookie-header[b-6cv82ij8et],
.evf-cookie-body[b-6cv82ij8et],
.evf-cookie-footer[b-6cv82ij8et] {
    padding: 1rem 1.25rem;
}

.evf-cookie-categories[b-6cv82ij8et] {
    gap: 0.75rem;
}

.evf-cookie-card[b-6cv82ij8et] {
    padding: 0.75rem 1rem;
}

.evf-cookie-switch .form-check-input[b-6cv82ij8et] {
    margin-top: 0.2rem;
}

/* Summary text */
.evf-cookie-summary-text[b-6cv82ij8et] {
    font-size: 0.98rem;
    line-height: 1.3;
}

/* ===== Deterministic footer button layout ===== */
.evf-cookie-footer[b-6cv82ij8et] {
    display: grid;
    gap: 0.6rem;
    align-items: stretch;
}

.evf-cookie-btn[b-6cv82ij8et] {
    width: 100%;
}

.evf-cookie-btn-settings[b-6cv82ij8et] {
    grid-area: primary;
}

.evf-cookie-btn-save[b-6cv82ij8et] {
    grid-area: primary;
}

.evf-cookie-btn-reject[b-6cv82ij8et] {
    grid-area: reject;
}

.evf-cookie-btn-accept[b-6cv82ij8et] {
    grid-area: accept;
}

/* ===== MOBILE (default): primary action on top, reject/accept below ===== */

/* Summary (Layer 1): Settings full width (row1), Reject/Accept side-by-side (row2) */
.evf-cookie-footer-summary[b-6cv82ij8et] {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "primary primary"
        "reject  accept";
}

/* Details (Layer 2): Save full width (row1), Reject/Accept side-by-side (row2) */
.evf-cookie-footer-details[b-6cv82ij8et] {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "primary primary"
        "reject  accept";
}

/* ===== DESKTOP: primary left, reject/accept right (same behavior on both layers) ===== */
@media (min-width: 768px) {

    .evf-cookie-btn[b-6cv82ij8et] {
        width: auto;
    }

    /* Keep Reject/Accept equal footprint */
    .evf-cookie-btn-reject[b-6cv82ij8et],
    .evf-cookie-btn-accept[b-6cv82ij8et] {
        min-width: 11rem;
        justify-self: end;
    }

    /* Primary (Settings / Save) left */
    .evf-cookie-btn-settings[b-6cv82ij8et],
    .evf-cookie-btn-save[b-6cv82ij8et] {
        min-width: 11rem;
        justify-self: start;
    }

    /* Summary: primary left, decisions right */
    .evf-cookie-footer-summary[b-6cv82ij8et] {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "primary . reject accept";
        align-items: center;
    }

    /* Details: primary left, decisions right (same as summary) */
    .evf-cookie-footer-details[b-6cv82ij8et] {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "primary . reject accept";
        align-items: center;
    }
}

/* ===== Compact phones (<= sm) ===== */
@media (max-width: 575.98px) {

    .evf-cookie-dialog[b-6cv82ij8et] {
        margin: 0.5rem auto;
        width: calc(100vw - 1rem);
    }

    .evf-cookie-header[b-6cv82ij8et],
    .evf-cookie-body[b-6cv82ij8et],
    .evf-cookie-footer[b-6cv82ij8et] {
        padding: 0.65rem 0.75rem;
    }

    .evf-cookie-title[b-6cv82ij8et] {
        font-size: 0.98rem;
        line-height: 1.15;
    }

    .evf-cookie-summary-text[b-6cv82ij8et] {
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .evf-cookie-lead[b-6cv82ij8et] {
        font-size: 0.9rem;
        line-height: 1.25;
        margin-bottom: 0.5rem !important;
    }

    .evf-cookie-alert[b-6cv82ij8et] {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem !important;
    }

    .evf-cookie-categories[b-6cv82ij8et] {
        gap: 0.5rem;
    }

    .evf-cookie-card[b-6cv82ij8et] {
        padding: 0.55rem 0.75rem;
    }

    .evf-cookie-card-title[b-6cv82ij8et] {
        font-size: 0.98rem;
        line-height: 1.15;
    }

    .evf-cookie-card-desc[b-6cv82ij8et] {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .evf-cookie-modal .badge[b-6cv82ij8et] {
        font-size: 0.68rem;
        padding: 0.25em 0.45em;
        vertical-align: middle;
    }

    .evf-cookie-switch .form-check-input[b-6cv82ij8et] {
        transform: scale(0.92);
        transform-origin: top right;
    }

    .evf-cookie-footer .btn[b-6cv82ij8et] {
        padding: 0.25rem 0.6rem;
        line-height: 1.2;
    }

    .evf-cookie-note[b-6cv82ij8et] {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-top: 0.5rem !important;
    }
}

/* iPhone SE–class: tighten a touch more (keep centered) */
@media (max-width: 389.98px) and (max-height: 700px) {

    .evf-cookie-header[b-6cv82ij8et],
    .evf-cookie-body[b-6cv82ij8et],
    .evf-cookie-footer[b-6cv82ij8et] {
        padding: 0.6rem 0.7rem;
    }

    .evf-cookie-card[b-6cv82ij8et] {
        padding: 0.5rem 0.7rem;
    }

    .evf-cookie-card-desc[b-6cv82ij8et] {
        font-size: 0.8rem;
    }

    .evf-cookie-switch .form-check-input[b-6cv82ij8et] {
        transform: scale(0.9);
    }
}

/* Tall phones: slightly roomier (still deterministic footer layouts) */
@media (max-width: 575.98px) and (min-height: 820px) {

    .evf-cookie-dialog[b-6cv82ij8et] {
        margin: 0.75rem auto;
        width: calc(100vw - 1.5rem);
    }

    .evf-cookie-header[b-6cv82ij8et],
    .evf-cookie-body[b-6cv82ij8et],
    .evf-cookie-footer[b-6cv82ij8et] {
        padding: 0.8rem 0.95rem;
    }

    .evf-cookie-title[b-6cv82ij8et] {
        font-size: 1.12rem;
    }

    .evf-cookie-summary-text[b-6cv82ij8et] {
        font-size: 0.96rem;
    }

    .evf-cookie-card[b-6cv82ij8et] {
        padding: 0.65rem 0.9rem;
    }

    .evf-cookie-card-desc[b-6cv82ij8et] {
        font-size: 0.84rem;
    }

    .evf-cookie-switch .form-check-input[b-6cv82ij8et] {
        transform: scale(0.96);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-q7lwdx3hs3],
.components-reconnect-repeated-attempt-visible[b-q7lwdx3hs3],
.components-reconnect-failed-visible[b-q7lwdx3hs3],
.components-pause-visible[b-q7lwdx3hs3],
.components-resume-failed-visible[b-q7lwdx3hs3],
.components-rejoining-animation[b-q7lwdx3hs3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-retrying[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-failed[b-q7lwdx3hs3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-q7lwdx3hs3] {
    display: block;
}


#components-reconnect-modal[b-q7lwdx3hs3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-q7lwdx3hs3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-q7lwdx3hs3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-q7lwdx3hs3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-q7lwdx3hs3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-q7lwdx3hs3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-q7lwdx3hs3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-q7lwdx3hs3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-q7lwdx3hs3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-q7lwdx3hs3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-q7lwdx3hs3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-q7lwdx3hs3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-q7lwdx3hs3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-q7lwdx3hs3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-q7lwdx3hs3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-q7lwdx3hs3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-q7lwdx3hs3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-q7lwdx3hs3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-q7lwdx3hs3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}