/* /Components/Layout/CookieConsent.razor.rz.scp.css */
/* Cookie consent modal — minimal compliant styling.

   IMPORTANT: .consent-btn--primary applies to BOTH "Reject all" and
   "Accept all" so they're rendered with equal visual prominence. This is an
   EU regulatory requirement (the "Reject all" option must be as obvious and
   one click away as "Accept all"). Do NOT give one of them a stronger color,
   a different size, or a different weight. If you need to tweak this CSS,
   keep the primary class identical for both buttons.

   Why the primary buttons are NEUTRAL (no brand accent):
   ──────────────────────────────────────────────────────
   Earlier revisions of this stylesheet rendered both Reject and Accept in
   --accent (cyan). That technically satisfies the equal-prominence rule,
   but regulators (notably CNIL and ICO updated guidance) increasingly push
   back on "Reject is styled as a primary brand CTA" — the brand-coloured
   button reads as the recommended path, which biases consent even when
   both buttons share a class. We render both in a neutral chrome instead:
   subdued background, fg-2 border, no accent saturation. The focus outline
   is still --accent for keyboard discoverability. This also aligns with
   the project's restraint preference for chrome surfaces. */

.consent-modal[b-hxq3cb97dr] {
    /* Opened via dialog.showModal() — browser handles top-layer placement, the inert
       backdrop, and centering. We only need the visual styling here. */
    max-width: 540px;
    width: calc(100% - 32px);
    padding: 24px;
    border: 1px solid var(--fg-3, #444);
    border-radius: 8px;
    background: var(--bg-1, #1a1a1a);
    color: var(--fg-0, #f5f5f5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.consent-modal[b-hxq3cb97dr]::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.consent-title[b-hxq3cb97dr] {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
}

.consent-body[b-hxq3cb97dr],
.consent-row-desc[b-hxq3cb97dr] {
    margin: 0 0 12px 0;
    line-height: 1.5;
    color: var(--fg-1, #ddd);
    font-size: 14px;
}

.consent-links a[b-hxq3cb97dr] {
    color: var(--accent, #6cf);
}

.consent-row[b-hxq3cb97dr] {
    border-top: 1px solid var(--fg-3, #333);
    padding-top: 12px;
    margin-bottom: 12px;
}

.consent-row label[b-hxq3cb97dr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.consent-row-label[b-hxq3cb97dr] {
    user-select: none;
}

.consent-actions[b-hxq3cb97dr] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* SAME STYLES FOR REJECT AND ACCEPT — equal-prominence requirement.
   Neutral chrome (no brand accent) — see file header comment for rationale. */
.consent-btn--primary[b-hxq3cb97dr] {
    background: var(--bg-2, #2a2a2a);
    color: var(--fg-0, #f5f5f5);
    border: 1px solid var(--fg-2, #888);
    border-radius: 4px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}
.consent-btn--primary:hover[b-hxq3cb97dr] {
    background: var(--bg-3, #333);
    border-color: var(--fg-1, #ccc);
}
.consent-btn--primary:focus-visible[b-hxq3cb97dr] {
    outline: 2px solid var(--accent, #6cf);
    outline-offset: 2px;
}

/* Secondary buttons (Customize / Back) are intentionally less prominent —
   regulators have said it's fine to differentiate the NEUTRAL option. */
.consent-btn--secondary[b-hxq3cb97dr] {
    background: transparent;
    color: var(--fg-0, #f5f5f5);
    border: 1px solid var(--fg-3, #555);
    border-radius: 4px;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
}
.consent-btn--secondary:hover[b-hxq3cb97dr] { background: rgba(255, 255, 255, 0.05); }
.consent-btn--secondary:focus-visible[b-hxq3cb97dr] {
    outline: 2px solid var(--accent, #6cf);
    outline-offset: 2px;
}
/* /Components/Layout/CookieSettingsLink.razor.rz.scp.css */
/* Discreet always-visible link to re-open the consent modal.
   Bottom-right of the viewport, unobtrusive, but never hidden behind
   passive layout chrome (sticky topbar/filter bar live at z:9-10).

   Sits BELOW interactive overlays (drawer-scrim z:40, detail drawer z:50,
   compare bar z:55, compare/roster modals z:60). Otherwise this floats
   over the bottom-right of any opened drawer and intercepts clicks on
   the drawer's own buttons. When a drawer is open the scrim correctly
   covers this link; the user closes the drawer to reach it again.
   The consent modal itself uses dialog.showModal() (browser top layer),
   so it always renders above this regardless of z-index. */
.cookie-settings-link[b-l2inw99gng] {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 30;
    background: rgba(0, 0, 0, 0.55);
    color: var(--fg-1, #ddd);
    border: 1px solid var(--fg-3, #444);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--ff-mono, monospace);
    letter-spacing: 0.08em;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.cookie-settings-link:hover[b-l2inw99gng],
.cookie-settings-link:focus-visible[b-l2inw99gng] {
    opacity: 1;
    outline: 2px solid var(--accent, #6cf);
    outline-offset: 2px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-46nlem3wf0],
.components-reconnect-repeated-attempt-visible[b-46nlem3wf0],
.components-reconnect-failed-visible[b-46nlem3wf0],
.components-pause-visible[b-46nlem3wf0],
.components-resume-failed-visible[b-46nlem3wf0],
.components-rejoining-animation[b-46nlem3wf0] {
    display: none;
}

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


#components-reconnect-modal[b-46nlem3wf0] {
    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-46nlem3wf0 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-46nlem3wf0 {
    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;
    }
}