/* ##################### */
/* LAST UPDATED 6-16-2024 */
/* ##################### */

html {
    overflow-y: scroll !important;
}

/* Set black body bg for iOS URL bar, also for overflowed background (on account settings page at very bottom), also make this change in manifest.json */
body {
    background-color: #000;
}

/* Change BG color of admin/dashboard */
.dashboard-grid .bg, .dashboard-grid .bg-alt {
    background-color: #000;
}

/* Change colors of bg-alt & bg-paper (appears in account settings, etc). Keeps a more consistent header look when switching betweem
   account settings and terms, privacy, etc */
.bg-alt {
    background-color: #000000;
}
.bg-paper {
    background-color: #1e1e1e;
}

/* Fixed header + blurred backdrop + condense to width of content (common header [1st selector] & custom pages header [2nd selector] & account settings header [3rd selector]) */
.bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full,
.bg-alt.text-main.border-b.h-64.py-8.flex-shrink-0.sticky.top-0,
.min-h-screen.bg-alt .bg-alt.text-main.border-b.h-64.py-8 {
    background: rgb(0 0 0 / 50%) !important;
    position: sticky !important;
    top: 0 !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    max-width: 1232px;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    border-bottom-width: 0;
}

/* Account settings sidebar - top padding to account for stickied navbar */
aside.sticky.top-10.hidden.flex-shrink-0.lg\:block {
    top: 5rem;
}

/* DISABLE condensed width on admin dashboard */
.dashboard-grid .bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full {
    max-width: initial;
}

/* Condensed footer width on terms, privacy, about, etc. ELSE, use default width for mobile and smaller screens */
@media (min-width: 1340px) {
    footer {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
    }
}

/* Condensed header nav width on landing page */
header .h-full .bg-transparent.h-64.py-8.flex-shrink-0 {
    max-width: 1232px;
    margin: 0 auto;
    width: 100%;
}

/* On mobile/PWA, FIX the header rather than sticky it (otherwise header doesn't stay at top when pulling down/rubberbanding) Feels more native in PWA.
   This can be removed when pull-to-refresh is added. although it's kind of better for the mobile version (trailer not cut off by sticky header). */
@media (max-width: 768px) {
    .bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full {
        position: fixed !important;
    }
    /* Bring page content down to make room for fixed header */
    .relative.min-h-\[1000px\].overflow-hidden {
        margin-top: 64px;
    }
    /* The below rule fixes video pages not being spaced down */
    .min-h-screen .container.mx-auto.p-14.md\:p-24 {
        margin-top: 64px;
    }
}

/* Darken background of nav search dropdown, as the above CSS applies to it and makes it too glassy */
div[role="listbox"] {
    background: rgb(0 0 0 / 45%);
}

/* Fix sticky people profile photos due to fixed header */
.md\:sticky.top-40 {
    top: 80px !important;
}

/* Page headings - capitalize first letter of each word (this fixed lowercase "watchlist" page heading) */
h1.text-2xl.font-bold {
    text-transform: capitalize;
}

/* Increase logo size on all device sizes */
a[aria-label="Go to homepage"], a[aria-label="Go to homepage"] img {
    max-height: 3rem !important;
}

/* Lessen logo size on mobile (override above with a smaller size) */
@media only screen and (max-width: 768px) {
    a[aria-label="Go to homepage"], a[aria-label="Go to homepage"] img {
        max-height: 2.25rem !important;
    }
}

/* Toast popups (Add to watchlist, copy link) blurred BG */
.flex.items-center.gap-10.min-w-288.max-w-500.shadow-lg.w-min.rounded-lg.pl-16.pr-6.py-6.text-sm.pointer-events-auto.max-h-100.bg-paper.text-main.bg-paper.border.mx-auto.min-h-50 {
    background: rgb(0 0 0 / 30%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Desktop popover menus (header notifications and user dropdown) blurred BG */
.z-popover .bg-paper {
    background-color: rgb(0 0 0 / 40%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}
/* Mobile popover menus (header notifications) blurred BG */
.z-modal .bg-paper {
    background-color: rgb(0 0 0 / 30%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}
/* Mobile popover menus (user dropdown) blurred BG */
.z-tray .bg-paper {
    background-color: rgb(0 0 0 / 30%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

/* Remove blue select outline from user dropdown on mobile */
.z-tray div[role="menu"] {
    outline: none;
}

/* Sticky film list category headings */
/* First, remove overflow hidden from parent element so that sticky can work */
.relative.min-h-\[1000px\].overflow-hidden {
    overflow: clip !important;
}
/* Then stick it. At least 25 z-index otherwise carousel arrows are above it */
section.mb-16.md\:mb-30, section.mb-18 {
    position: sticky;
    top: 63px;
    z-index: 25;
    background: rgb(0 0 0 / 58%) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    padding: 10px 0;
}

/* Lessen font size for film list category headings (<768px, mobile, etc) */
h2.text-2xl.md\:text-3xl.font-normal {
    font-size: 1.3rem;
    font-weight: 600;
}
/* And the same for desktop, lesser size and bolder */
@media (min-width: 768px) {
    h2.text-2xl.md\:text-3xl.font-normal {
        font-size: 1.45rem;
        font-weight: 600;
    }
}

/* On film/show pages, bring content up 64px (height of navbar) so that media hero img shows behind navbar for cool effect (only on larger screens, too high on mobile) */
@media (min-width: 1280px) {
    header.relative.isolate.max-h-320.overflow-hidden.bg-black.md\:max-h-400.lg\:max-h-450 {
        margin-top: -64px;
    }
}

/* On film/show pages, increase blur on the blurry hero background */
.bg-black.blur-md {
    --tw-blur: blur(50px);
}

/* On logo, film poster images, film screenshots, film season posters, film trailer posters, film tag chips, and other image containers, add hover scale effect */
img[alt="Site logo"], .aspect-poster img.object-cover, img.aspect-square, .grid img.aspect-poster, .grid img.aspect-video, a.rounded-full.bg-chip.text-main {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    -webkit-perspective: 1000;
    -webkit-transition: .3s;
    transition: .3s;
}
img[alt="Site logo"]:hover, .aspect-poster img.object-cover:hover, img.aspect-square:hover, .grid img.aspect-poster:hover, .grid img.aspect-video:hover, a.rounded-full.bg-chip.text-main:hover {
    transform: scale(0.94);
}

/* Hover opacity change on navmenu links (Movies, Shows, News) */
.bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full a.block.whitespace-nowrap.flex.items-center.justify-start.gap-10.opacity-90 {
    opacity: .8;
    -webkit-transition: .3s;
    transition: .3s;
}
.bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full a.block.whitespace-nowrap.flex.items-center.justify-start.gap-10.opacity-90:hover {
    opacity: 1;
}

/* Set width which FIXES video share popup looking skinny (only 42px because the button's actual width is only 42px. Popup menu size is dependent on button width) */
button[aria-label="Share"] {
    width: 185px;
}

/* Make width 100% on mobile menu drawer tray - this element (safe area padded bottom popup menu) only appears on small screen devices
   Also remove env(safe-area-inset-bottom) from padding-bottom (since I'm overriding it with my own custom padding on mobile sizes) */
.pb-safe-area.max-h-tray.bottom-0 {
    max-width: 100%;
    padding-bottom: 0;
}

/* Hide border on nav/account icon menu drawer that appears on mobile and move the nav/account icon menu drawer that appears on mobile up a little so it's not too close to the device's bezel */
.pb-safe-area .bg-paper.border {
    border: none;
    padding-bottom: 30px;
}

/* Mobile menu drawer trays - add top/bottom padding to each menu item so it has easier tap-ability */
.pb-safe-area div {
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: bold;
}

/* Nav links and account dropdown - Bold text */
a[data-menu-item-id], div[role="menuitem"] {
    font-weight: 500;
}

/* Unhide film side panel on mobile (Add to Watchlist, Share, Where to Stream, etc) */
@media (max-width: 768px) {
    .md\:sticky.top-40.max-lg\:hidden {
    display: block;
    }
    /* Hide poster (leave only trailer at top) */
    .md\:sticky.top-40.max-lg\:hidden .w-full.aspect-poster, .md\:sticky.top-40.max-lg\:hidden dl.mt-14 dt, .md\:sticky.top-40.max-lg\:hidden dl.mt-14 dl {
    display: none;
    }
    /* No left/right padding on trailers on mobile */
    header.relative.isolate .container.relative.left-0.right-0.top-0.z-20.mx-auto.h-full.w-full.px-24 {
        padding-left: 0;
        padding-right: 0;
    }
    /* On mobile, Add to Watchlist/Share buttons have a left margin making alignment weird. Remove it. */
    .md\:sticky.top-40.max-lg\:hidden .flex-auto.max-md\:ml-16.max-md\:text-sm {
        margin-left: 0;
    }
}

/* 'Where to Watch' CSS */
.providerscontainer.grid {
    grid-template-columns: repeat(10,minmax(0,1fr));
}
@media (max-width: 768px) {
    /* Less provider columns on mobile */
    .providerscontainer.grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }
}
.providerscontainer .providerlogo {
    width: 70px;
    border-radius: 1rem;
}

/* Hide system version in admin sidebar */
.dashboard-grid-sidenav-left .mt-auto.gap-14.px-16.text-xs {
    display: none;
}

/* News Articles - Center the square thumbnail image + add some margin to space the article text down from the thumbnail on mobile */
.mb-24.rounded.border.p-16 img.max-md\:mb-24.w-184.h-184.object-cover.bg-fg-base\/4.rounded.block.object-cover {
    margin: 0 auto;
    margin-bottom: 10px;
}

/* News Articles - remove borders */
.mb-24.rounded.border.p-16, .mb-14.gap-14.rounded.border.pr-14 {
    border-width: 0;
}

/* Landing Page - Hover effect for Login and Get Started Buttons */
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.shadow-md.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-button.justify-center.font-semibold.text-sm.h-36.px-18,
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.shadow-md.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-full.justify-center.font-semibold.text-base.h-50.px-26.min-w-180,
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-full.justify-center.font-semibold.text-base.h-50.px-26.mt-40.block {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    -webkit-perspective: 1000;
    -webkit-transition: .3s;
    transition: .3s;
}
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.shadow-md.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-button.justify-center.font-semibold.text-sm.h-36.px-18:hover,
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.shadow-md.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-full.justify-center.font-semibold.text-base.h-50.px-26.min-w-180:hover,
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-full.justify-center.font-semibold.text-base.h-50.px-26.mt-40.block:hover {
    transform: scale(0.94);
}

/* Landing Page - Smaller hero title text on desktop */
@media (min-width: 768px) {
    .h-full [data-testid="headerTitle"].text-3xl.font-normal.md\:text-5xl {
        font-size: 2.8rem;
    }
}

/* Dropdown menus - remove reddish background from active/selected menu items from filter and language menu dropdowns,
   and apply the normal light gray hover to these elements */
div[role="menuitem"].bg-primary\/focus, div[role="menuitem"].bg-primary\/selected {
    background: transparent;
}
div[role="menuitem"].bg-primary\/focus:hover {
    background-color: rgb(var(--be-foreground-base) / 15%);
}

/* User profile nav dropdown - Become A Supporter Gold button, only way to target this specifically is selecting its 'data-value' */
div[data-value="bCCDQq"]:first-of-type {
    background: #ffd70082;
    transition: .3s;
}
div[data-value="bCCDQq"]:first-of-type:hover {
    background: #ffd700ba;
}

/* Hide play button from vertical movie poster cards */
a.focus-visible\:ring.text-black.bg-white.border.border-white.hover\:bg-white.disabled\:text-disabled.disabled\:bg-disabled.disabled\:border-transparent.disabled\:shadow-none.whitespace-nowrap.inline-flex.align-middle.flex-shrink-0.items-center.transition-button.duration-200.select-none.appearance-none.no-underline.outline-none.disabled\:pointer-events-none.disabled\:cursor-default.rounded-full.justify-center.text-base.h-42.w-42.shadow-md {
    display: none;
}

/* User profile nav dropdown - apply shared hover effect to profile dropdown AND notification icon in nav */
.ml-auto.flex.items-center.gap-4.md\:gap-14 span[role="button"] {
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: var(--be-button-radius, .25rem);
    transition-property: background-color,box-shadow,border-color,color;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}
    /* 1st selector for profile dropdown, 2nd for notification icon button */
.ml-auto.flex.items-center.gap-4.md\:gap-14 span[role="button"][aria-expanded="false"]:hover,
.ml-auto.flex.items-center.gap-4.md\:gap-14 button.hover\:bg-hover:hover {
    background-color: #77777747;
}
    /* 1st selector for profile dropdown, 2nd for notification icon button */
.ml-auto.flex.items-center.gap-4.md\:gap-14 span[role="button"][aria-expanded="true"] {
    background-color: #a7a7a74d;
}

/* ##################### */
/* Light Mode Styles */
/* ##################### */
html:not(.dark) section.mb-16.md\:mb-30, section.mb-18 {
    background: #ffffff !important;
}
html:not(.dark) .bg-alt.text-main.border-b.h-64.py-8.border-none.relative.z-40.w-full, .bg-alt.text-main.border-b.h-64.py-8.flex-shrink-0.sticky.top-0, .min-h-screen.bg-alt .bg-alt.text-main.border-b.h-64.py-8 {
    background: rgb(0 0 0 / 85%) !important;
}