/* Seasonal full-bleed backgrounds (compressed WebP + JPEG fallback) */

body {
    --vl-season-bg: url("../img/bg/season/default.jpg");
}

@supports (background-image: url("../img/bg/season/default.webp")) {
    body {
        --vl-season-bg: url("../img/bg/season/default.webp");
    }
}

html[data-season="spring"] body { --vl-season-bg: url("../img/bg/season/spring.jpg"); }
html[data-season="summer"] body { --vl-season-bg: url("../img/bg/season/summer.jpg"); }
html[data-season="autumn"] body { --vl-season-bg: url("../img/bg/season/autumn.jpg"); }
html[data-season="winter"] body { --vl-season-bg: url("../img/bg/season/winter.jpg"); }
html[data-season="newyear"] body { --vl-season-bg: url("../img/bg/season/newyear.jpg"); }
html[data-season="easter"] body { --vl-season-bg: url("../img/bg/season/easter.jpg"); }
html[data-season="blackfriday"] body { --vl-season-bg: url("../img/bg/season/blackfriday.jpg"); }
html[data-season="birthday"] body { --vl-season-bg: url("../img/bg/season/birthday.jpg"); }
html[data-season="halloween"] body { --vl-season-bg: url("../img/bg/season/halloween.jpg"); }

@supports (background-image: url("../img/bg/season/spring.webp")) {
    html[data-season="spring"] body { --vl-season-bg: url("../img/bg/season/spring.webp"); }
    html[data-season="summer"] body { --vl-season-bg: url("../img/bg/season/summer.webp"); }
    html[data-season="autumn"] body { --vl-season-bg: url("../img/bg/season/autumn.webp"); }
    html[data-season="winter"] body { --vl-season-bg: url("../img/bg/season/winter.webp"); }
    html[data-season="newyear"] body { --vl-season-bg: url("../img/bg/season/newyear.webp"); }
    html[data-season="easter"] body { --vl-season-bg: url("../img/bg/season/easter.webp"); }
    html[data-season="blackfriday"] body { --vl-season-bg: url("../img/bg/season/blackfriday.webp"); }
    html[data-season="birthday"] body { --vl-season-bg: url("../img/bg/season/birthday.webp"); }
    html[data-season="halloween"] body { --vl-season-bg: url("../img/bg/season/halloween.webp"); }
}

body.vl-has-season-bg,
html[data-season]:not([data-season="default"]) body {
    background-image: var(--vl-season-bg);
    background-position: left center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Shop / bans / community / profile: slightly stronger dim for readability */
body.vl-shop,
body.vl-bans,
body.vl-community-page,
body.vl-panel--profile {
    --vl-bg-overlay:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 0, 0, 0.35) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.48) 40%, rgba(0, 0, 0, 0.72) 100%);
}

body.vl-community-page,
body.vl-panel--profile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #050805;
}

body.vl-community-page::before,
body.vl-panel--profile::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--vl-bg-overlay);
    pointer-events: none;
    z-index: 0;
}

/* Keep stacking above overlay, but do NOT override sticky chrome / fixed overlays */
body.vl-community-page > *:not(.vl-chrome):not(.vl-chrome__drawer):not(.vl-toast-host):not(.vl-confirm):not(.vl-header-decor),
body.vl-panel--profile > *:not(.vl-chrome):not(.vl-chrome__drawer):not(.vl-toast-host):not(.vl-confirm):not(.vl-header-decor) {
    position: relative;
    z-index: 1;
}

/* Toasts / confirm always float above chrome + page */
body.vl-community-page > .vl-toast-host,
body.vl-panel--profile > .vl-toast-host,
body.vl-has-season-bg > .vl-toast-host,
body > .vl-toast-host {
    position: fixed !important;
    top: calc(var(--vl-chrome-h, 4.25rem) + 0.75rem) !important;
    right: 1rem !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10080 !important;
    margin: 0 !important;
    flex: none !important;
}

body.vl-community-page > .vl-confirm,
body.vl-panel--profile > .vl-confirm,
body.vl-has-season-bg > .vl-confirm,
body > .vl-confirm {
    position: fixed !important;
    z-index: 10100 !important;
    flex: none !important;
}

/* Chrome above page content so dropdowns aren't covered */
body.vl-community-page > .vl-chrome,
body.vl-panel--profile > .vl-chrome,
body.vl-has-season-bg > .vl-chrome {
    position: sticky;
    top: 0;
    z-index: 10050;
    flex-shrink: 0;
}

body.vl-community-page > .vl-hub,
body.vl-panel--profile > .vl-hub {
    flex: 1 0 auto;
}

body.vl-community-page > .site-footer,
body.vl-panel--profile > .site-footer {
    margin-top: auto;
    flex-shrink: 0;
}