/*
 * Visible Peeps theme for the public site (UI_THEME=visible-peeps, see config/ui.php).
 * Loaded after the vendor styles by layouts/public.blade.php, which adds body.vp-theme.
 * Most of it re-points the Tailwind variables the views already use (rose = accent,
 * zinc = neutrals, radius-*), so vendor markup changes keep working. Selectors that
 * follow the vendor markup are grouped at the end of each section.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
body.vp-theme {
    --vp-bg: #141414;
    --vp-surface: #181818;
    --vp-red: #e50914;
    --vp-red-dark: #b20710;
    --vp-text: #e5e5e5;
    --vp-muted: #b3b3b3;
    --vp-header-h: 4rem;

    /* Accent: overrides the per-install primary color (ThemeHelper) on purpose. */
    --color-rose-50: #fff1f1;
    --color-rose-100: #ffdfe0;
    --color-rose-200: #ffc4c6;
    --color-rose-300: #ff9a9f;
    --color-rose-400: #ff5c64;
    --color-rose-500: #f40612;
    --color-rose-600: #e50914;
    --color-rose-700: #c11119;
    --color-rose-800: #b20710;
    --color-rose-900: #831010;
    --color-rose-950: #4a0508;
    --color-primary-500: #f40612;
    --color-primary-600: #e50914;
    --color-primary-700: #c11119;
    --accent-primary: #e50914;
    --accent-hover: #f40612;
    --primary-color-to: #e50914;
    --primary-gradient: #e50914;
    --ring-color: rgba(229, 9, 20, 0.3);

    /* Neutral grays without the blue cast of Tailwind's zinc. */
    --color-zinc-50: #f5f5f5;
    --color-zinc-100: #e5e5e5;
    --color-zinc-200: #d6d6d6;
    --color-zinc-300: #cccccc;
    --color-zinc-400: #b3b3b3;
    --color-zinc-500: #8c8c8c;
    --color-zinc-600: #6d6d6e;
    --color-zinc-700: #4d4d4d;
    --color-zinc-800: #333333;
    --color-zinc-900: #222222;
    --color-zinc-950: #181818;

    /* Square corners. */
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-2xl: 6px;
    --radius-3xl: 8px;

    background-color: var(--vp-bg);
    color: var(--vp-text);
}

@media (min-width: 640px) {
    body.vp-theme { --vp-header-h: 5rem; }
}

body.vp-theme h1,
body.vp-theme h2,
body.vp-theme h3,
body.vp-theme h4,
body.vp-theme h5,
body.vp-theme h6 {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

/* The vendor's near-black arbitrary colors, mapped to the theme background. */
.vp-theme .bg-\[\#030303\],
.vp-theme .bg-\[\#020202\] { background-color: var(--vp-bg); }
.vp-theme .bg-\[\#0c0c0e\] { background-color: var(--vp-surface); }
.vp-theme .bg-\[\#030303\]\/80 { background-color: rgb(20 20 20 / 0.8); }
.vp-theme .bg-\[\#14141a\]\/90 { background-color: rgb(24 24 24 / 0.9); }
.vp-theme .from-\[\#030303\] { --tw-gradient-from: var(--vp-bg); }
.vp-theme .from-\[\#030303\]\/80 { --tw-gradient-from: rgb(20 20 20 / 0.8); }
.vp-theme .via-\[\#030303\]\/60 { --tw-gradient-via: rgb(20 20 20 / 0.6); }
.vp-theme .via-\[\#030303\]\/30 { --tw-gradient-via: rgb(20 20 20 / 0.3); }
.vp-theme .via-\[\#070709\]\/95 { --tw-gradient-via: rgb(20 20 20 / 0.95); }

/* ── Header: transparent over the billboard, solid once the page scrolls ── */
/* header.sticky also outranks the .bg-[#030303]/80 mapping above. */
body.vp-theme > header.sticky {
    background: linear-gradient(180deg, rgb(0 0 0 / 0.7) 10%, rgb(0 0 0 / 0));
    /* A transparent border would show the gradient repeating as a dark line. */
    border-bottom-width: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.4s ease;
}
/* Solid once scrolled, and while the mobile menu (which has no background of its own) is open. */
body.vp-theme.vp-scrolled > header.sticky,
body.vp-theme > header.sticky:has(div[x-show="mobileMenuOpen"]:not([style*="display: none"])) {
    background: var(--vp-bg);
}
body.vp-theme > header :is(a, button, input).rounded-full { border-radius: 4px; }
body.vp-theme > header input.rounded-full { background-color: rgb(0 0 0 / 0.6); border-color: rgb(255 255 255 / 0.35); }
/* Language switcher: plain, like the other header controls. */
body.vp-theme > header button.rounded-full.border-zinc-800 { background-color: transparent; border-color: transparent; }
body.vp-theme > header button.rounded-full.border-zinc-800:hover { border-color: rgb(255 255 255 / 0.35); }

/* Desktop search: only the magnifier until it is used, then the field opens. */
@media (min-width: 768px) {
    body.vp-theme > header input.w-64 {
        width: 2.5rem;
        padding-right: 0;
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
    body.vp-theme > header input.w-64::placeholder { color: transparent; }
    body.vp-theme > header input.w-64:focus,
    body.vp-theme > header input.w-64:not(:placeholder-shown) {
        width: 16rem;
        padding-right: 1rem;
        background-color: rgb(0 0 0 / 0.75);
        border-color: #fff;
        cursor: text;
    }
    body.vp-theme > header input.w-64:focus::placeholder { color: var(--color-zinc-500); }
}

/* Brand name: bold, uppercase, in the accent color; no animation or fallback icon. */
.vp-theme > header a.group > span.text-xl {
    color: var(--vp-red);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.vp-theme .logo-letter { animation: none; }
.vp-theme > header a.group > div.logo-icon-glow { display: none; }

.vp-theme .desktop-nav a { color: var(--vp-text); font-weight: 400; }
.vp-theme .desktop-nav a:hover { color: var(--vp-muted); }
.vp-theme .desktop-nav a.text-white { color: #fff; font-weight: 700; }
.vp-theme .desktop-nav a > svg { display: none; }

/* ── Billboard (home hero): full bleed under the header ─────────────── */
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child {
    margin-top: calc(-1 * var(--vp-header-h));
    height: clamp(460px, 56.25vw, 88vh) !important;
    /* Keeps the slide layers (z-10/z-20) inside, so the first row can sit over the bottom edge. */
    isolation: isolate;
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child img.object-cover {
    opacity: 0.9;
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child .site-container {
    padding-bottom: clamp(2.5rem, 9vw, 9rem);
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child h1 {
    font-size: clamp(1.75rem, 4.2vw, 4rem);
    font-weight: 800;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.45);
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child p.line-clamp-1 {
    max-width: min(36rem, 90vw);
    color: #fff;
    font-size: clamp(0.85rem, 1.15vw, 1.2rem);
    line-height: 1.45;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.45);
}
/* Facts as plain text separated by dots, not boxes. */
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child .flex-wrap.mb-3 { gap: 0; }
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child .flex-wrap.mb-3 > * {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--vp-text) !important;
    padding: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child .flex-wrap.mb-3 > * + *::before {
    content: "•";
    margin: 0 0.6em;
    color: var(--color-zinc-500);
}
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child .flex-wrap.mb-3 svg { display: none; }
/* Slide arrows: thin and plain. */
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child > button {
    background: rgb(0 0 0 / 0.35);
    border-color: transparent;
    border-radius: 4px;
    height: 4rem;
}
/* The rows start over the bottom of the billboard; the category chips are in the
   header's Categories page, so the home page goes straight from billboard to rows. */
body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child + .site-container > .pt-0.pb-1 { display: none; }
@media (min-width: 768px) {
    body.vp-theme > header + main > div > .relative.bg-black.overflow-hidden.group:first-child + .site-container {
        position: relative;
        z-index: 2;
        margin-top: calc(-1 * clamp(2rem, 5vw, 6rem));
    }
}

/* Primary action: white with black text. */
.vp-theme .btn-shimmer-effect {
    background: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
    border-radius: 4px;
    font-size: 1rem;
}
.vp-theme .btn-shimmer-effect:hover { background: rgb(255 255 255 / 0.75) !important; scale: none; }
.vp-theme .btn-shimmer-effect::after { display: none; }
.vp-theme .btn-shimmer-effect svg { color: #000; fill: #000; }

/* Secondary action next to it: translucent gray. */
.vp-theme .btn-shimmer-effect + button:not(.bg-amber-500) {
    background: rgb(109 109 110 / 0.7);
    border-color: transparent;
}
.vp-theme .btn-shimmer-effect + button:not(.bg-amber-500):hover { background: rgb(109 109 110 / 0.4); }

/* ── Rows and cards ─────────────────────────────────────────────────── */
.vp-theme main h2.uppercase {
    color: var(--vp-text);
    letter-spacing: 0;
    text-transform: none;
}
/* The accent bar and the icons before row titles. */
.vp-theme main span.w-1.h-5.rounded-full.shrink-0,
.vp-theme main .items-center:has(> h2) > svg,
.vp-theme main h2 > svg { display: none; }
.vp-theme main .justify-between > a[style*="--accent-primary"] { color: var(--vp-muted) !important; }
.vp-theme main .justify-between > a[style*="--accent-primary"]:hover { color: #fff !important; opacity: 1; }

.vp-theme main h2.uppercase { font-size: clamp(1rem, 1.4vw, 1.5rem); }
/* "View All" shows when the row is pointed at (always on touch screens). */
@media (hover: hover) and (min-width: 768px) {
    .vp-theme main .site-container .justify-between:has(> div h2) > a { opacity: 0; transition: opacity 0.2s ease; }
    .vp-theme main .site-container div:hover > .justify-between:has(> div h2) > a { opacity: 1; }
}

/* Rows: one line of posters that scrolls sideways, the next poster peeking at the edge.
   New Releases is a grid in the vendor markup; the genre rows already scroll. */
.vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6,
.vp-theme #explore .overflow-x-auto.snap-x {
    --vp-cards: 2.3;
    --vp-gutter: 20px; /* .site-container's side padding: the row runs to the screen edge */
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 0;
    scrollbar-width: none;
    /* Room for the hover zoom, which a scrolling box would otherwise clip. */
    margin: -1.5rem calc(-1 * var(--vp-gutter)) -2rem 0;
    padding: 1.5rem var(--vp-gutter) 2rem 0;
}
@media (min-width: 640px) { .vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6, .vp-theme #explore .overflow-x-auto.snap-x { --vp-cards: 3.4; --vp-gutter: 32px; } }
@media (min-width: 1024px) { .vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6, .vp-theme #explore .overflow-x-auto.snap-x { --vp-cards: 5.4; --vp-gutter: 40px; } }
@media (min-width: 1440px) { .vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6, .vp-theme #explore .overflow-x-auto.snap-x { --vp-cards: 6.4; } }
.vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6::-webkit-scrollbar { display: none; }
.vp-theme main .site-container > div:not(#explore) > .grid.lg\:grid-cols-6 > *,
.vp-theme #explore .overflow-x-auto.snap-x > * {
    flex: 0 0 calc((100% - (var(--vp-cards) - 1) * 6px) / var(--vp-cards));
    width: auto !important;
    scroll-snap-align: start;
}
/* Posters carry their own title: the text under them goes, as do the play counts. */
.vp-theme main .group > .block > a.block { display: none; }
.vp-theme .aspect-\[9\/13\] > .absolute.bottom-2.right-2 { display: none; }

.vp-theme .aspect-\[9\/13\] {
    border-color: transparent;
    border-radius: 4px;
    box-shadow: none;
    transition: transform 0.3s ease 0.1s, box-shadow 0.3s ease 0.1s;
}
.vp-theme .group:hover .aspect-\[9\/13\] {
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.75);
    transform: scale(1.06);
    z-index: 3;
}
.vp-theme .aspect-\[9\/13\] img { transition-duration: 0.6s; }

/* Badges flush with the corners: red for Hot/New, black and gold for Premium. */
.vp-theme .aspect-\[9\/13\] > .absolute:is(.top-1\.5, .top-2):is(.right-1\.5, .right-2) { top: 0; right: 0; }
.vp-theme .aspect-\[9\/13\] > .absolute:is(.top-1\.5, .top-2):is(.right-1\.5, .right-2) > span {
    background: var(--vp-red) !important;
    border: 0 !important;
    border-radius: 0 0 0 4px;
    box-shadow: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    text-transform: uppercase;
}
.vp-theme .aspect-\[9\/13\] > .absolute:is(.top-1\.5, .top-2):is(.left-1\.5, .left-2) { top: 0; left: 0; }
.vp-theme .aspect-\[9\/13\] > .absolute:is(.top-1\.5, .top-2):is(.left-1\.5, .left-2) > span {
    background: rgb(0 0 0 / 0.75);
    border-radius: 0 0 4px 0;
    box-shadow: none;
    color: #f5c518;
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 3px 7px;
}

/* Hover panel: a dark fade with a white Play button and round secondary buttons. */
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 {
    background: linear-gradient(to top, rgb(0 0 0 / 0.95) 55%, rgb(0 0 0 / 0)) !important;
    border: 0;
    border-radius: 0;
    padding-top: 2.5rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 h4 { color: #fff; }
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 span.rounded { background: none; color: var(--vp-muted); padding: 0; }
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 a.w-full {
    background: #fff !important;
    border-radius: 4px;
    box-shadow: none !important;
    color: #000 !important;
}
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 a.w-full svg { fill: #000 !important; }
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 button.rounded-full {
    background: rgb(42 42 42 / 0.6);
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 999px;
}
.vp-theme .aspect-\[9\/13\] > .absolute.inset-x-0.bottom-0.opacity-0 button.rounded-full:hover { border-color: #fff; }

/* Category chips. */
.vp-theme main a.rounded-full.px-4.py-2 {
    border-radius: 4px;
    background-color: transparent;
    border-color: var(--color-zinc-600);
}
.vp-theme main a.rounded-full.px-4.py-2:hover { background-color: rgb(255 255 255 / 0.1); border-color: #fff; }
.vp-theme main a.rounded-full.px-4.py-2[style*="--accent-primary"] { box-shadow: none !important; border-color: transparent; }

/* ── Watch page: neutral grays instead of the vendor's blue-black ────── */
.vp-theme .watch-content-card {
    background: var(--vp-surface) !important;
    border-color: rgb(255 255 255 / 0.06) !important;
    border-radius: 6px !important;
}
.vp-theme .ep-tile { border-radius: 4px !important; }
.vp-theme .ep-tile.inactive { background-color: #2a2a2a !important; border-color: transparent !important; color: var(--vp-text) !important; }
.vp-theme .ep-tile.inactive:hover { background-color: #3a3a3a !important; border-color: transparent !important; transform: none; }
.vp-theme .ep-tile.locked { background-color: #1f1f1f !important; border-color: transparent !important; }
.vp-theme .ep-tile.locked,
.vp-theme .ep-tile.locked .ep-num,
.vp-theme .ep-lock-icon { color: #808080 !important; }
.vp-theme .ep-tile.locked:hover { background-color: #2a2a2a !important; }
.vp-theme .ep-tile.active {
    background: var(--vp-red) !important;
    border-color: var(--vp-red) !important;
    box-shadow: none !important;
}
.vp-theme .chevron-btn { background-color: #2a2a2a !important; border-color: rgb(255 255 255 / 0.15) !important; }
.vp-theme .chevron-btn:hover { background-color: #3a3a3a !important; }
.vp-theme .bg-\[\#0F172A\] { background-color: var(--vp-surface); }

/* ── Details ────────────────────────────────────────────────────────── */
html:has(> body.vp-theme) { scrollbar-color: #4d4d4d var(--vp-bg); }
.vp-theme :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .vp-theme .aspect-\[9\/13\],
    .vp-theme .aspect-\[9\/13\] img { transition: none; }
    .vp-theme .group:hover .aspect-\[9\/13\] { transform: none; }
}

/* ── Sign-in, sign-up and the other account forms ───────────────────── */
body.vp-theme.vp-auth { background: #000; }
.vp-theme.vp-auth main .max-w-md.rounded-3xl {
    background: rgb(0 0 0 / 0.75);
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
@media (min-width: 640px) {
    .vp-theme.vp-auth main .max-w-md.rounded-3xl { padding: 3rem 4rem; }
}
.vp-theme.vp-auth main input:not([type="checkbox"]):not([type="radio"]),
.vp-theme.vp-auth main select,
.vp-theme.vp-auth main textarea {
    background: rgb(22 22 22 / 0.7);
    border: 1px solid rgb(128 128 128 / 0.7);
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    padding: 0.9rem 1rem;
}
.vp-theme.vp-auth main input:not([type="checkbox"]):not([type="radio"]):focus,
.vp-theme.vp-auth main select:focus,
.vp-theme.vp-auth main textarea:focus {
    border-color: #fff;
    box-shadow: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.vp-theme.vp-auth main button[type="submit"] {
    border-radius: 4px;
    box-shadow: none;
    font-size: 1rem;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.vp-theme footer { color: #808080; }
.vp-theme footer a:hover { text-decoration: underline; }