/* =============================================================================
   RateFlix — photo background + glass (loaded on login, register, home)
   The photo is a real <picture> behind everything (found early by the browser,
   preloaded with fetchpriority=high). A 120-byte blurred placeholder shows
   instantly; the sharp photo fades in over it.
   Live glass (backdrop-filter) is kept to a few key panels; blur is lighter on
   phones; browsers without backdrop-filter get a darker solid panel.
   ============================================================================= */
.rr-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-primary, #0B0A14); }
.rr-bg-lqip, .rr-bg picture, .rr-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rr-bg-lqip { background-size: cover; background-position: center; transform: scale(1.06); }
.rr-bg-l { display: none; }
@media (orientation: landscape) { .rr-bg-l { display: block; } .rr-bg.has-l .rr-bg-p { display: none; } }
.rr-bg img { object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.rr-bg img.in { opacity: 1; }
.rr-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,10,20, calc(var(--rr-dim, .55) - .25)) 0%, rgba(11,10,20, var(--rr-dim, .55)) 45%, rgba(11,10,20, calc(var(--rr-dim, .55) + .3)) 100%); }
[data-theme="light"] .rr-bg::after {
    background: linear-gradient(180deg, rgba(246,242,255, calc(var(--rr-dim, .55) - .2)) 0%, rgba(246,242,255, calc(var(--rr-dim, .55) + .15)) 55%, rgba(246,242,255, .92) 100%); }

/* Pages with a photo background: let it show through the shell */
body.has-bg { background: transparent !important; }
body.has-bg .main-wrapper, body.has-bg .main-content, body.has-bg .auth-shell, body.has-bg .auth-form-panel { background: transparent !important; }

/* ---- Glass: solid fallback first, live blur where supported ---- */
body.has-bg .rr-glass, body.has-bg .auth-form-inner, body.has-bg .auth-brand, body.has-bg .topbar, body.has-bg .card {
    background: rgba(18, 15, 32, .78) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}
[data-theme="light"] body.has-bg .rr-glass, [data-theme="light"] body.has-bg .auth-form-inner, [data-theme="light"] body.has-bg .card, [data-theme="light"] body.has-bg .topbar {
    background: rgba(255, 255, 255, .86) !important; border-color: rgba(255, 255, 255, .95) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Live blur only on the few panels that matter */
    body.has-bg .auth-form-inner, body.has-bg .auth-brand, body.has-bg .topbar, body.has-bg .rr-glass {
        background: rgba(18, 15, 32, .42) !important;
        backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    [data-theme="light"] body.has-bg .auth-form-inner, [data-theme="light"] body.has-bg .topbar, [data-theme="light"] body.has-bg .rr-glass {
        background: rgba(255, 255, 255, .55) !important;
    }
    /* Cards in scrolling lists: translucent tint, no live blur (keeps scrolling at 60 fps) */
    body.has-bg .card { background: rgba(18, 15, 32, .62) !important; }
    [data-theme="light"] body.has-bg .card { background: rgba(255, 255, 255, .78) !important; }
}
@media (max-width: 640px) {
    body.has-bg .auth-form-inner, body.has-bg .topbar, body.has-bg .rr-glass {
        backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    body.has-bg .auth-form-inner, body.has-bg .topbar, body.has-bg .rr-glass, body.has-bg .card {
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(18, 15, 32, .92) !important;
    }
}

/* Posters: blurred placeholder under every image, real image fades over it */
.rr-poster picture, .rr-poster picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rr-poster picture img { object-fit: cover; }