/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-27e68pfrid] {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    background-color: #fff;
    opacity: 0.9;
    text-align: center;
    font-weight: bold;
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

    #components-reconnect-modal.components-reconnect-show[b-27e68pfrid],
    #components-reconnect-modal[open][b-27e68pfrid] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #components-reconnect-modal.components-reconnect-failed[b-27e68pfrid] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.components-reconnect-container[b-27e68pfrid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.components-reconnect-first-attempt-visible[b-27e68pfrid],
.components-reconnect-repeated-attempt-visible[b-27e68pfrid],
.components-reconnect-failed-visible[b-27e68pfrid],
.components-pause-visible[b-27e68pfrid],
.components-resume-failed-visible[b-27e68pfrid] {
    display: none;
}

dialog[open].components-reconnect-show .components-reconnect-first-attempt-visible[b-27e68pfrid] {
    display: block;
}

dialog[open].components-reconnect-failed .components-reconnect-failed-visible[b-27e68pfrid] {
    display: block;
}

dialog[open].components-reconnect-failed #components-reconnect-button[b-27e68pfrid] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-reconnect-repeated-attempt-visible[b-27e68pfrid] {
    display: block;
}

dialog[open].components-pause .components-pause-visible[b-27e68pfrid] {
    display: block;
}

dialog[open].components-pause #components-resume-button[b-27e68pfrid],
dialog[open].components-resume-failed #components-resume-button[b-27e68pfrid] {
    display: block;
}

dialog[open].components-resume-failed .components-resume-failed-visible[b-27e68pfrid] {
    display: block;
}

.components-rejoining-animation[b-27e68pfrid] {
    display: flex;
    gap: 8px;
}

    .components-rejoining-animation div[b-27e68pfrid] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary, #594AE2);
        animation: rejoining-bounce-b-27e68pfrid 1.4s infinite ease-in-out both;
    }

        .components-rejoining-animation div:nth-child(1)[b-27e68pfrid] {
            animation-delay: -0.32s;
        }

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

@keyframes rejoining-bounce-b-27e68pfrid {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

#components-reconnect-button[b-27e68pfrid],
#components-resume-button[b-27e68pfrid] {
    display: none;
    cursor: pointer;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: var(--mud-palette-primary, #594AE2);
    color: #fff;
    font-size: 14px;
}
/* /Components/Shared/Ads/AutoAccidentBanner.razor.rz.scp.css */
/* ── Auto-Accident Banner (scoped) ── */

.aab-banner[b-apyil9gyt7] {
    --aab-text: #ffffff;
    --aab-gold1: #fde68a;
    --aab-gold2: #facc15;
    --aab-shadow: rgba(0,0,0,.58);

    position: relative;
    display: block;
    width: 100%;
    height: 84px;
    overflow: hidden;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    background:
        linear-gradient(90deg, rgba(5,10,18,.05) 0%, rgba(5,10,18,.05) 18%, rgba(5,10,18,.18) 42%, rgba(5,10,18,.54) 66%, rgba(5,10,18,.78) 100%),
        url('/images/auto_accident_background1.png') left center / cover no-repeat;
    box-shadow: 0 -2px 16px rgba(0,0,0,.28);
    border-top: 1px solid rgba(255,255,255,.06);
    isolation: isolate;
    font-family: Inter, 'Barlow', Arial, sans-serif;
}

.aab-banner[b-apyil9gyt7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 23% 49%, rgba(255,160,50,.20), transparent 10%),
        linear-gradient(90deg, transparent 0 52%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.18));
    z-index: 0;
    pointer-events: none;
}

/* ── Impact Effects ── */

.aab-impact-glow[b-apyil9gyt7] {
    position: absolute;
    left: 23.2%;
    top: 50%;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,235,155,.82) 0%, rgba(255,158,40,.52) 22%, rgba(255,100,0,.16) 48%, transparent 68%);
    mix-blend-mode: screen;
    filter: blur(1px);
    z-index: 1;
    opacity: 0;
    animation: aab-glowOnce-b-apyil9gyt7 .85s ease-out .82s forwards;
    pointer-events: none;
}

.aab-impact-sparks[b-apyil9gyt7] {
    position: absolute;
    left: 23.2%;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    animation: aab-sparksOnce-b-apyil9gyt7 .55s ease-out .86s forwards;
    pointer-events: none;
}

.aab-impact-sparks[b-apyil9gyt7]::before,
.aab-impact-sparks[b-apyil9gyt7]::after,
.aab-impact-sparks span[b-apyil9gyt7] {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 4px;
    margin-left: -25px;
    margin-top: -2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,245,190,.98), rgba(255,150,34,.94));
    box-shadow: 0 0 12px rgba(255,145,40,.35);
}

.aab-impact-sparks[b-apyil9gyt7]::before { transform: rotate(28deg); }
.aab-impact-sparks[b-apyil9gyt7]::after  { transform: rotate(-34deg); }
.aab-impact-sparks span[b-apyil9gyt7]    { transform: rotate(0deg); }

/* ── Text Stage ── */

.aab-text-stage[b-apyil9gyt7] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.aab-word[b-apyil9gyt7] {
    position: absolute;
    top: 10px;
    font-size: clamp(24px, 1.95vw, 34px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
    color: var(--aab-text);
    white-space: nowrap;
    text-shadow:
        0 3px 12px var(--aab-shadow),
        0 0 16px rgba(255,255,255,.12),
        0 0 22px rgba(255,160,50,.14);
    will-change: transform, opacity, filter;
}

.aab-word[b-apyil9gyt7]::after {
    content: "";
    position: absolute;
    left: -8%;
    top: 0;
    width: 24%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.62) 48%, transparent 100%);
    transform: skewX(-18deg) translateX(-260%);
    mix-blend-mode: screen;
    animation: aab-shineOnce-b-apyil9gyt7 .8s ease-out .24s forwards;
}

.aab-auto[b-apyil9gyt7] {
    left: 46%;
    transform: translateX(-220px);
    animation: aab-autoOnce-b-apyil9gyt7 1.35s cubic-bezier(.18,.82,.18,1) forwards;
}

.aab-accident[b-apyil9gyt7] {
    left: 46%;
    transform: translateX(20px);
    animation: aab-accidentOnce-b-apyil9gyt7 1.35s cubic-bezier(.18,.82,.18,1) forwards;
}

/* ── Shards ── */

.aab-shards[b-apyil9gyt7] {
    position: absolute;
    left: calc(46% + 10px);
    top: 12px;
    width: 220px;
    height: 42px;
    z-index: 4;
    pointer-events: none;
}

.aab-shard[b-apyil9gyt7] {
    position: absolute;
    width: 12px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,174,74,.9));
    box-shadow: 0 0 10px rgba(255,160,50,.34);
    opacity: 0;
}

.aab-shard:nth-child(1)[b-apyil9gyt7] { left: 30px;  top: 8px;  animation: aab-shard1-b-apyil9gyt7 .7s ease-out .95s forwards; }
.aab-shard:nth-child(2)[b-apyil9gyt7] { left: 60px;  top: 16px; animation: aab-shard2-b-apyil9gyt7 .7s ease-out .96s forwards; }
.aab-shard:nth-child(3)[b-apyil9gyt7] { left: 90px;  top: 10px; animation: aab-shard3-b-apyil9gyt7 .7s ease-out .98s forwards; }
.aab-shard:nth-child(4)[b-apyil9gyt7] { left: 124px; top: 14px; animation: aab-shard4-b-apyil9gyt7 .7s ease-out 1s forwards; }
.aab-shard:nth-child(5)[b-apyil9gyt7] { left: 82px;  top: 22px; animation: aab-shard5-b-apyil9gyt7 .7s ease-out .99s forwards; }
.aab-shard:nth-child(6)[b-apyil9gyt7] { left: 112px; top: 24px; animation: aab-shard6-b-apyil9gyt7 .7s ease-out 1.02s forwards; }

/* ── Final Line ── */

.aab-final-line[b-apyil9gyt7] {
    position: absolute;
    right: 16px;
    top: 9px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
    animation: aab-finalIn-b-apyil9gyt7 .7s ease-out 1.68s forwards;
    pointer-events: none;
}

.aab-final-headline[b-apyil9gyt7] {
    font-size: clamp(20px, 1.6vw, 28px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 3px 12px var(--aab-shadow), 0 0 16px rgba(255,255,255,.10);
}

.aab-divider[b-apyil9gyt7] {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
}

.aab-cta[b-apyil9gyt7] {
    position: relative;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: clamp(18px, 1.45vw, 26px);
    line-height: 1;
    font-weight: 950;
    color: #1a1200;
    background: linear-gradient(180deg, var(--aab-gold1), var(--aab-gold2));
    border: 2px solid rgba(255,255,255,.18);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.35),
        0 0 22px rgba(250,204,21,.35),
        0 0 34px rgba(251,146,60,.18);
    overflow: hidden;
}

.aab-cta[b-apyil9gyt7]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 0 40%, rgba(255,255,255,.38) 50%, transparent 60%);
    transform: translateX(-140%);
    animation: aab-ctaShineOnce-b-apyil9gyt7 .9s ease-out 2.02s forwards;
}

/* ── Keyframes ── */

@keyframes aab-autoOnce-b-apyil9gyt7 {
    0%   { opacity: 0; transform: translateX(-220px); filter: blur(6px); }
    16%  { opacity: 1; transform: translateX(-180px); filter: blur(0); }
    70%  { opacity: 1; transform: translateX(-80px) scale(1.02); }
    82%  { opacity: 1; transform: translateX(-42px) scale(1.06); }
    100% { opacity: 0; transform: translateX(-28px) scale(.92) rotate(-6deg); filter: blur(2px); }
}

@keyframes aab-accidentOnce-b-apyil9gyt7 {
    0%   { opacity: 0; transform: translateX(20px); filter: blur(6px); }
    16%  { opacity: 1; transform: translateX(20px); filter: blur(0); }
    70%  { opacity: 1; transform: translateX(-8px) scale(1.02); }
    82%  { opacity: 1; transform: translateX(-42px) scale(1.06); }
    100% { opacity: 0; transform: translateX(-58px) scale(.92) rotate(4deg); filter: blur(2px); }
}

@keyframes aab-glowOnce-b-apyil9gyt7 {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.35); }
    38%  { opacity: .98;  transform: translate(-50%, -50%) scale(1); }
    100% { opacity: .18;  transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes aab-sparksOnce-b-apyil9gyt7 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    34%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes aab-shineOnce-b-apyil9gyt7 {
    0%   { transform: skewX(-18deg) translateX(-260%); opacity: 0; }
    28%  { opacity: 1; }
    100% { transform: skewX(-18deg) translateX(420%);  opacity: 0; }
}

@keyframes aab-shard1-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(-42px,-18px) rotate(-28deg) scale(1.2); } }
@keyframes aab-shard2-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(-24px,14px)  rotate(24deg)  scale(1.1); } }
@keyframes aab-shard3-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(10px,-20px)  rotate(38deg)  scale(1.15); } }
@keyframes aab-shard4-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(36px,-10px)  rotate(-18deg) scale(1.2); } }
@keyframes aab-shard5-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(-12px,18px)  rotate(-34deg) scale(1.08); } }
@keyframes aab-shard6-b-apyil9gyt7 { 0% { opacity:0; transform:translate(0,0) rotate(0) scale(.5); } 16% { opacity:1; } 100% { opacity:0; transform:translate(28px,16px)   rotate(26deg)  scale(1.1); } }

@keyframes aab-finalIn-b-apyil9gyt7 {
    0%   { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    72%  { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1);    filter: blur(0); }
}

@keyframes aab-ctaShineOnce-b-apyil9gyt7 {
    0%   { transform: translateX(-140%); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translateX(140%);  opacity: 0; }
}

/* ── Responsive ── */

@media (max-width: 1100px) {
    .aab-auto[b-apyil9gyt7], .aab-accident[b-apyil9gyt7] { left: 48%; }
    .aab-shards[b-apyil9gyt7] { left: calc(48% + 8px); }
    .aab-impact-glow[b-apyil9gyt7], .aab-impact-sparks[b-apyil9gyt7] { left: 25%; }
    .aab-final-headline[b-apyil9gyt7] { font-size: 18px; }
    .aab-cta[b-apyil9gyt7] { font-size: 16px; padding: 7px 12px; }
}

@media (max-width: 760px) {
    .aab-banner[b-apyil9gyt7] { height: 72px; }
    .aab-word[b-apyil9gyt7] { font-size: 17px; top: 10px; }
    .aab-auto[b-apyil9gyt7], .aab-accident[b-apyil9gyt7] { left: 42%; }
    .aab-shards[b-apyil9gyt7] { left: calc(42% + 4px); }
    .aab-impact-glow[b-apyil9gyt7], .aab-impact-sparks[b-apyil9gyt7] { left: 20%; top: 48%; }
    .aab-final-line[b-apyil9gyt7] { right: 10px; top: 34px; gap: 8px; }
    .aab-divider[b-apyil9gyt7], .aab-final-headline[b-apyil9gyt7] { display: none; }
    .aab-cta[b-apyil9gyt7] { font-size: 14px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .aab-banner *[b-apyil9gyt7],
    .aab-banner *[b-apyil9gyt7]::before,
    .aab-banner *[b-apyil9gyt7]::after { animation: none !important; transition: none !important; }
    .aab-word[b-apyil9gyt7], .aab-shards[b-apyil9gyt7] { display: none; }
    .aab-final-line[b-apyil9gyt7] { opacity: 1; transform: none; filter: none; }
}