    .nav-item {
        display: flex;
        flex-direction: column; /* Icon on top, label below */
        align-items: center;
        color: #555; /* Default icon color */
        cursor: pointer;
        text-decoration: none;
    }
    .nav-item.active {
        color: #fff; /* Highlight active icon */
    }
    .nav-icon {
        font-size: 24px; /* Adjust icon size */
        margin-bottom: 3px; /* Space between icon and label */
    }
    .nav-label {
        font-family: "Poppins", serif;
        font-size: 12px;
        font-weight: 500;
    }
    .nav-item.active .nav-label {
        font-weight: 700;
    }
    /* Bottom bar - adjust info card padding to accomodate bottom bar */
    #info-card {
        padding-bottom: 80px;
    }

    /* Minimum height for info crd */
    #info-card #content .slick-list.draggable {
        min-height: 300px;
    }

/* Desktop Styles */
@media (min-width: 769px) {
    .header-bar, .container, .hero-card {
        max-width: 1500px;
    }

    /* Hide header bar background on desktop when detached */
    .header-bar.header-bar-detached {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    .header-bar.header-fixed {
        background-color: rgb(0 0 0 / 20%);
    }

    /* Convert header from grid to flex for desktop */
    .header-bar {
        display: flex !important;
    }
    .header-logo {
        width: 80px;
        margin-top: -3px;
        margin-left: 14px !important;
        margin-right: 5px !important;
    }

    #hero-card {
        margin-top: 75px;
    }
    #info-card {
        margin-top: 100px;
    }
    .header-bar {
        margin: 0 auto;
    }
    .bottom-nav {
        display: none;
    }
    /* Disable info card slide up on desktop */
    #info-card.animate-slide-up {
        animation: none !important;
    }
}

#disqus_thread {
    overflow-x: hidden;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .cast-grid,
    .related-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    /* Fancybox - pure black bg on mobile */
    .fancybox__container {
        --fancybox-bg: rgb(0 0 0);
    }
    /* Fancybox - remove toolbar button background */
    .fancybox__toolbar__column.is-right .f-button {
        background: transparent;
    }
    /* Hide extra genre tags on mobile (show only one row of tags) */
    #genres {
        height: 50px;
        overflow: hidden;
    }
}

.title-grid-container {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 85% 15%;
}
.left-column {
    grid-row: span 3;
    padding-right: 10px;
}
.right-column {
    display: grid;
    grid-template-rows: 50% 50%;
    justify-items: end;
}
.right-top {
    grid-row: 1;
    justify-items: end;
}

#share-button, #comments-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 50px;
    padding: 3px;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    perspective: 1000px;
    transition: all 0.2s;
}
#share-button:hover, #comments-button:hover {
    transform: scale(0.94);
}
#share-button:active, #comments-button:active {
    transform: scale(0.80);
    transition: 0.1s;
    background: #4d4d4d;
    border-radius: 14px;
}

/* Watch Providers */
.providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(65px, 0fr));
    gap: 10px;
    align-items: center;
    justify-items: start;
    margin-top: 10px;
}
.providers img {
    width: 100%;
    max-width: 65px;
    height: auto;
    border-radius: 14px;
    cursor: pointer;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    perspective: 1000px;
    transition: all 0.2s;
}
.providers img:hover {
    transform: scale(0.94);
}
#provider-category {
    max-width: 130px;
    cursor: pointer;
}

.heart,
.heart-button {
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.heart .heart-flip,
.heart-button .heart-flip {
  --base: 32px;
  --duration: .6s;
  --active: #ea4673;
  --inactive: #d1d6ee;
  width: var(--base);
  height: calc(var(--base) + var(--base) / 2);
  border-radius: calc(var(--base) / 2) calc(var(--base) / 2) 0 0;
  position: relative;
  transform-origin: 50% 66.66%;
  transform-style: preserve-3d;
  transform: rotate(var(--rotate, -45deg));
  transition: background var(--duration), transform var(--duration) ease;
  background: var(--heart-background, var(--inactive));
}
.heart .heart-flip:before, .heart .heart-flip:after,
.heart-button .heart-flip:before,
.heart-button .heart-flip:after {
  content: "";
  width: calc(var(--base) / 2);
  height: var(--base);
  border-radius: var(--pseudo-border-radius, calc(var(--base) / 2) 0 0 calc(var(--base) / 2));
  position: absolute;
  left: var(--pseudo-left, -50%);
  transform-origin: var(--pseudo-origin, 100%) 50%;
  bottom: 0;
  background: var(--heart-background, var(--inactive));
  filter: brightness(var(--pseudo-filter, 50%));
  transform: translateX(1%) rotateY(var(--pseudo-rotate, 90deg)) translateZ(0);
  transition: background var(--duration), transform var(--duration) ease, filter var(--duration);
}
.heart .heart-flip:after,
.heart-button .heart-flip:after {
  --pseudo-border-radius: 0 calc(var(--base) / 2) calc(var(--base) / 2) 0;
  --pseudo-left: 100%;
  --pseudo-origin: 0;
  filter: brightness(var(--pseudo-filter-second, 100%));
  transform: translateX(-1%) rotateY(var(--pseudo-rotate-second, 0deg)) translateZ(0);
}
.heart.active .heart-flip,
.heart-button.active .heart-flip {
  --rotate: 45deg;
  --pseudo-filter: 100%;
  --pseudo-filter-second: 50%;
  --pseudo-rotate: 0deg;
  --pseudo-rotate-second: 90deg;
  --heart-background: var(--active);
}

.heart {
  background: none;
  border: none;
  padding: 0;
  transform: scale(var(--button-scale, 1)) translateZ(0);
  transition: transform 0.2s;
}
.heart:active {
  --button-scale: .95;
}

.heart-button {
  --duration: .4s;
  --color: #404660;
  --color-hover: #2b3044;
  --color-active: #fff;
  --border: #d1d6ee;
  --border-hover: #bbc1e1;
  --border-active: #ea4673;
  --background: #fff;
  --background-active: #ea4673;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 7px;
  color: var(--button-color, var(--color));
  border: 1px solid var(--button-border, var(--border));
  background: var(--button-background, var(--background));
  transform: scale(var(--button-scale, 1)) translateZ(0);
  transition: background var(--duration), border-color var(--duration), color var(--duration), transform 0.2s;
  backface-visibility: hidden;
  will-change: transform;
  perspective: 1000px;
}
.heart-button .heart-flip {
  --base: 8px;
  --active: #fff;
  --inactive: #bbc1e1;
  display: inline-block;
  vertical-align: top;
  margin: 4px 6px 0 0;
}
.heart-button span {
  display: inline-block;
  vertical-align: top;
}
.heart-button > span {
  transform: translateX(var(--text-x, 4px));
  transition: transform var(--duration);
}
.heart-button > span span {
  display: inline-block;
  vertical-align: top;
  opacity: var(--span-opacity, 0);
  transform: translateX(var(--span-x, 4px));
  transition: opacity var(--duration), transform var(--duration);
}
.heart-button:active {
  --button-scale: .95;
}
.heart-button:hover {
  --button-color: var(--color-hover);
  --button-border: var(--border-hover);
}
.heart-button.active {
  --text-x: 0;
  --button-color: var(--color-active);
  --button-border: var(--border-active);
  --button-background: var(--background-active);
  --span-opacity: 1;
  --span-x: 0;
}
.heart-button#watched-button.active {
    --button-border: #008900;
    --button-background: #008900;
}

.heart-button#watched-button:not(.active) i:nth-of-type(2) {
    display: none;
}
.heart-button#watched-button.active i:nth-of-type(1) {
    display: none;
}
.heart-button#watched-button.active i:nth-of-type(2) {
    display: inline-block;
}

#info-card .collection-container {
    background-size: 110%;
    background-position: center;
    border-radius: 10px;
    margin-top: 20px;
    transition: all .750s;
}
.collection-container:hover {
    background-size: 100% !important;
}
#info-card .collection-inner {
    display: flex;
    align-items: center;
    background-color: rgb(0 0 0 / 30%);
    -webkit-backdrop-filter: blur(3px);
    -o-backdrop-filter: blur(3px);
    -ms-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 8px;
    transition: all 0.5s;
    cursor: pointer;
}
#info-card .collection-inner:hover {
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(10px);
    box-shadow: inset 0px 0px 0px 3px rgb(255 255 255 / 40%);
}
#info-card .collection-title {
    font-size: 20px;
    text-shadow: 0px 2px 4px rgb(0 0 0 / 80%);
    font-weight: 600;
    transition: all .2s;
}
#info-card .collection-title:hover {
    text-decoration: underline;
}
#info-card .collection-poster {
    width: 100px;
    height: auto;
    border-radius: 10px;
    margin-right: 20px;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    perspective: 1000px;
    transition: all 0.2s;
}
#info-card .collection-poster:hover {
    transform: scale(0.94);
}
#info-card .collection-btn {
    background: #ffffff;
    color: #000;
    font-weight: 600;
    border: 0;
    border-radius: 20px !important;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    perspective: 1000px;
    transition: all 0.2s;
}
#info-card .collection-btn:hover {
    transform: scale(0.94);
}

/* Video List & Episode List */
#video-list, #episode-list {
    background: #0000003d;
    padding: 10px;
    border-radius: 10px;
}
#video-list li:not(:last-child) {
    margin-bottom: 10px;
}
#video-list li {
    list-style: none;
}
#video-list li .video-link {
    display: inline-block;
    font-family: "Poppins", serif;
    font-weight: 400;
    font-size: 15px;
    padding: 3px 5px;
    transition: all .3s;
}
#video-list li .video-link:hover {
    background: rgb(255 255 255 / 90%);
    color: #000;
}
#video-list .detail-headline:first-of-type {
    font-weight: 800;
    margin-top: 5px;
}
#video-items-container {
    margin-top: 12px;
}

/* Fade info-card in to avoid flicker on page load */
#info-card {
    opacity: 0;
    transition: opacity 0s;
}
#info-card.loaded {
    opacity: 1;
}

.episode-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
@media (max-width: 600px) {
    .episode-inner {
        display: block;
    }
    .episode-inner img {
        margin-bottom: 12px;
    }
}

#load-more-episodes {
    padding: 10px;
    background: #2b2b2b;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    perspective: 1000px;
    transition: all 0.2s;
}
button#load-more-episodes:hover {
    transform: scale(0.96);
    background: #505050;
    box-shadow: inset 0px 0px 0px 2px #ffffff;
}
