/**
 * titleDetail.css - Styles for Title Detail Page
 * Separate styles for mobile and desktop layouts
 */

/* ========================================
   Container & Loading
   ======================================== */
#titleDetailContainer {
    padding-bottom: 2rem;
}

/* Friend Activity on this page already shows the title in the page header,
   so suppress the per-item title to reduce redundancy. Scoped to titleDetail. */
#friendActivityListDesktop .feed-item-title,
#friendActivityListMobile .feed-item-title {
    display: none;
}

/* Hide the " recommend" label inside the thumbs-up pill on the mobile reviews card
   (icon + percentage are enough on the small screen). Desktop keeps the label. */
#reviewsSectionMobile .reviews-chip-recommend .text-muted {
    display: none;
}

/* Hide the rating label ("Click to rate" hint and the rating value text underneath the stars).
   Scoped to #titleDetailContainer so other pages that use titleRating.js still show the label.
   Remove this rule to bring it back. */
#titleDetailContainer .title-rating-label {
    display: none !important;
}
/* Extra spacing between the "Rating:" label and the stars on the Quick tab */
#titleDetailContainer [id$="QuickPane"] > .d-flex > .d-flex.gap-2 {
    gap: 1rem !important;
}
/* Force the Watch Again row (Yes/Maybe/No + When? Soon/Later) to stay on a single line */
#titleDetailContainer .watch-again-toggle > .d-flex {
    flex-wrap: nowrap !important;
}
#titleDetailContainer .watch-again-toggle .btn-group .btn {
    padding: 2px 8px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
}
#titleDetailContainer .watch-again-toggle .watch-again-timing {
    flex-shrink: 0;
}

#loadingState {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================
   Shared Styles (both layouts)
   ======================================== */

/* Poster */
.title-poster {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Score badges — standard component. Always horizontally centered. */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.score-badge i {
    margin-right: 0.25rem;
}

/* Title detail page only: shrink score badges slightly versus the default.
   Applies everywhere the hero renders (mobile hero, desktop hero, desktop no-hero). */
.desktop-hero-text .score-badge,
.desktop-nohero-layout .score-badge {
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}
.desktop-hero-text .score-badge.reviews-teaser,
.desktop-nohero-layout .score-badge.reviews-teaser {
    font-size: 0.72rem;
}

.score-badge.my-rating {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.score-badge.rt-score {
    background-color: #fa320a;
    color: white;
}

.score-badge.rt-score.rt-fresh {
    background-color: #fa320a;
}

.score-badge.rt-score.rt-rotten {
    background-color: #0ac855;
}

.score-badge.imdb-score {
    background-color: #f5c518;
    color: #000;
}

.score-badge.imdb-score .imdb-label {
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 0.35rem;
}

.score-badge.tmdb-score {
    background-color: #01d277;
    color: #081c22;
}

.score-badge.tmdb-score .tmdb-label {
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 0.35rem;
}

/* Genre badges */
.genre-badge {
    font-size: 0.8rem;
    font-weight: 500;
    cursor: default;
    color: white !important;
}

.genre-badge .btn-close {
    opacity: 0.7;
    vertical-align: middle;
}

.genre-badge .btn-close:hover {
    opacity: 1;
}

/* Cards */
.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.08);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.card-header h5,
.card-header h6 {
    font-weight: 600;
    color: #495057;
}

.card-header h5 i,
.card-header h6 i {
    margin-right: 0.5rem;
    color: #6c757d;
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.action-collection {
    color: #198754;
    border-color: #198754;
}
.action-collection.active {
    background-color: #198754;
    color: white;
}

.action-like {
    color: #198754;
    border-color: #198754;
}
.action-like.active {
    background-color: #198754;
    color: white;
}

.action-watchlist {
    color: #0dcaf0;
    border-color: #0dcaf0;
}
.action-watchlist.active {
    background-color: #0dcaf0;
    color: #000;
}

.action-watched {
    color: #0d6efd;
    border-color: #0d6efd;
}
.action-watched.active {
    background-color: #0d6efd;
    color: white;
}

.action-share {
    color: #6c757d;
    border-color: #6c757d;
}

/* Cast & Crew */
.cast-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cast-card {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
}

/* Text-only person card — used when person.profile_image_url is missing.
   Replaces the silhouette placeholder with a clean name + role pill that
   takes the same grid slot. Adds a subtle border + bg so the card still
   reads as a discrete card while clearly distinct from photo cards. */
.cast-card.cast-card-textonly {
    width: 100px;
    min-height: 105px;
    padding: 8px 6px;
    border: 1px solid var(--mv-border-color);
    border-radius: 0.375rem;
    background: var(--mv-bg-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cast-card.cast-card-textonly .cast-name-link {
    margin-bottom: 0.25rem;
}

/* Cast Photo - Uses cover to fill the container while keeping aspect ratio
   Face positioning: top 20% keeps most faces visible in headshots
*/
.cast-photo {
    --cast-width: 70px;
    --cast-height: 105px;

    width: var(--cast-width);
    height: var(--cast-height);
    border-radius: 0.375rem;
    background-color: #e9ecef;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto 0.5rem auto;
}

.cast-name,
.cast-name-link {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 100px;
    word-wrap: break-word;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cast-name-link {
    color: #212529;
    text-decoration: none;
}

.cast-name-link:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.cast-photo-link {
    display: block;
}

.cast-photo-link:hover .cast-photo {
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Person links in awards table */
.person-link {
    color: #0d6efd;
    text-decoration: none;
}

.person-link:hover {
    text-decoration: underline;
}

.cast-role {
    font-size: 0.7rem;
    color: #6c757d;
}

/* Crew section - smaller cards (same style as cast, just smaller) */
.crew-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.crew-card-small {
    flex-shrink: 0;
    text-align: center;
}

.crew-card-small .cast-character {
    display: none;
}

/* Expand button styling */
.cast-expand-btn {
    color: #6c757d;
    font-size: 0.85rem;
}

.cast-expand-btn:hover {
    color: #0d6efd;
}

.cast-more-count {
    font-size: 0.8rem;
}

/* Streaming Availability */
.streaming-groups {
    align-items: flex-start;
}

.streaming-group {
    min-width: 80px;
}

.streaming-separator {
    width: 1px;
    background-color: var(--mv-border-color);
    align-self: stretch;
    min-height: 50px;
}

/* Mobile streaming layout: shrink logos so the groups can sit side-by-side
   horizontally (matching the desktop layout) and only wrap when they truly
   don't fit. Keep a little padding around each group's header. */
@media (max-width: 576px) {
    .streaming-availability-list .streaming-logo {
        height: 32px !important;
        border-radius: 6px !important;
    }

    .streaming-availability-list .streaming-group {
        padding: 0.25rem 0.5rem;
    }
}

.cast-character {
    font-size: 0.65rem;
    font-style: italic;
    color: #6c757d;
}

/* Content list */
.content-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-item {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
    transition: background-color 0.15s;
}

.content-item:hover {
    background-color: #e9ecef;
}

.content-item.local-item {
    cursor: pointer;
}

/* Synopsis */
.synopsis-text {
    line-height: 1.7;
    color: #495057;
}

/* Desktop synopsis: clamped to 7 lines so it stays close to UTD card height. */
.desktop-layout .synopsis-section .synopsis-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
}
.desktop-layout .synopsis-section.synopsis-expanded .synopsis-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.desktop-layout .synopsis-section .synopsis-read-more {
    text-decoration: none;
    font-weight: 600;
}
.desktop-layout .synopsis-section .synopsis-read-more:hover {
    text-decoration: underline;
}

/* Mobile synopsis: clamp to 3 lines by default so cast images appear above
   the fold in app store screenshots. JS adds a Read more / Read less button
   only when the natural height actually exceeds the 3-line clamp.
   The Read more button is absolutely positioned at the bottom-right of the
   text so it sits inline with the last visible line (no extra row below). */
.mobile-layout .synopsis-section .card-body {
    position: relative;
}
.mobile-layout .synopsis-section .synopsis-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.mobile-layout .synopsis-section.synopsis-expanded .synopsis-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
/* Inline "Read more" — overlays the right end of line 3 with a solid card
   background so it visually replaces the last few characters of the clamped
   line. When expanded, becomes a normal block-level "Read less" link. */
.mobile-layout .synopsis-section .synopsis-read-more {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    padding-left: 0.75rem !important;
    background: var(--mv-bg-card);
    text-decoration: none;
    font-weight: 600;
    margin-top: 0 !important;
}
.mobile-layout .synopsis-section .synopsis-read-more:hover {
    text-decoration: underline;
}
.mobile-layout .synopsis-section.synopsis-expanded .synopsis-read-more {
    position: static;
    padding-left: 0 !important;
    background: transparent;
}

.rating-notes-text {
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
}

/* Video Player */
#videoPlayerSection .card-header {
    background-color: #212529;
    border-bottom: none;
}

.video-js {
    width: 100%;
    max-height: 70vh;
}

/* ========================================
   MOBILE LAYOUT STYLES
   ======================================== */
.mobile-layout {
    background-color: #fff;
}

.mobile-poster-container {
    width: 100px;
    flex-shrink: 0;
}

.mobile-hero .title-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.mobile-layout .title-tagline {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* =========================================================================
   MOBILE HERO BANNER (new, replaces the old poster-left + meta-right layout)
   Scope: .mobile-layout only. Desktop is unaffected.
   ========================================================================= */
.mobile-layout .mobile-hero-banner {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    background: #000;
}
.mobile-layout .mobile-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    background-color: #000;
}
.mobile-layout .mobile-hero-bg.no-backdrop {
    filter: blur(14px) brightness(0.55);
    transform: scale(1.15);
}
.mobile-layout .mobile-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(13,17,23,0.18) 0%,
        rgba(13,17,23,0.28) 40%,
        rgba(13,17,23,0.78) 78%,
        var(--mv-bg-body, #0d1117) 100%);
}
.mobile-layout .mobile-hero-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.mobile-layout .mobile-hero-actions-right {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mobile-layout .mobile-hero-actions .btn-glass {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
}
.mobile-layout .mobile-hero-actions .btn-glass:hover,
.mobile-layout .mobile-hero-actions .btn-glass:focus {
    background: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.22);
}
/* Preserve the original icon colors (same as non-hero version of these buttons) */
.mobile-layout .mobile-hero-actions .btn-glass.back-btn { color: #adb5bd; }
.mobile-layout .mobile-hero-actions .btn-glass.action-watchlist { color: #0dcaf0; }
.mobile-layout .mobile-hero-actions .btn-glass.action-watchlist.active { color: #0dcaf0; }
.mobile-layout .mobile-hero-actions .btn-glass.action-watched { color: #0d6efd; }
.mobile-layout .mobile-hero-actions .btn-glass.action-watched.active { color: #0d6efd; }
.mobile-layout .mobile-hero-actions .btn-glass.action-share { color: #adb5bd; }
.mobile-layout .mobile-hero-actions .dropdown > .btn-glass { color: #adb5bd; }

/* Trailer button inside hero-actions — override its default absolute overlay positioning */
.mobile-layout .mobile-hero-actions .btn-glass.trailer-play-btn {
    position: static;
    top: auto;
    right: auto;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ff4d4d;
    font-size: 0.95rem;
    box-shadow: none;
    transition: background 0.15s ease;
}
.mobile-layout .mobile-hero-actions .btn-glass.trailer-play-btn:hover,
.mobile-layout .mobile-hero-actions .btn-glass.trailer-play-btn:focus {
    background: rgba(0,0,0,0.7);
    color: #ff4d4d;
    transform: none;
    box-shadow: none;
}

/* Below-hero extras row: Plex chip, awards pill, Budget/BoxOffice/Nielsen inline */
.mobile-layout .mobile-hero-extras {
    margin-top: 8px;
    font-size: 0.72rem;
}
/* Pipe separator between visible extras — the class is applied by refreshMobileExtrasSeparators() in titleDetail.js */
.mobile-layout .mobile-hero-extras .mobile-extra-pipe::before {
    content: "| ";
    color: var(--mv-text-muted);
    opacity: 0.6;
    margin-right: 0.25rem;
}

/* Mobile streaming summary: hosts the standard .streaming-badge component (from TitleCardHelper) */
.mobile-layout .mobile-streaming-summary {
    font-size: 0.78rem;
    color: var(--mv-text-secondary);
    margin-bottom: 0.75rem;
}
/* Base "Watch" label — identical typography across every mode/size. Color is
   overridden per context (hero = white w/ shadow; no-hero = muted). */
.watch-label {
    font-weight: 600;
    font-size: 0.78rem;
    margin-right: 4px;
}
.mobile-layout .mobile-streaming-summary .watch-label {
    color: var(--mv-text-muted);
}
/* Override the standard .streaming-badge positioning (it's designed for absolute-overlay on a poster) */
.mobile-streaming-summary .streaming-badge,
.desktop-hero-watch-bottom .streaming-badge,
.desktop-nohero-watch .streaming-badge {
    position: static;
    bottom: auto;
    right: auto;
    z-index: auto;
}
/* Disc chip — sized + styled like the streaming-badge-logo chips. Shown when
   the user owns the title (titleData.in_collection == 1). */
.streaming-badge.streaming-badge-disc {
    cursor: default;
}
.streaming-badge.streaming-badge-disc i {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

/* On mobile widths the "Plex" word makes the pill too wide for the inline
   Watch row — collapse it to icon-only at the same chip size as the streaming
   chips. Desktop keeps the Plex pill with text.
   Also force the Watch row containers to never wrap (cap of 3 chips in JS
   keeps the visible chip count low enough to fit one line). */
@media (max-width: 767.98px) {
    .plex-deep-link .plex-label {
        display: none;
    }
    .plex-deep-link {
        padding: 3px 5px;
    }
    .plex-deep-link i.bi-play-circle-fill {
        font-size: 18px;
        margin: 0;
    }
    .desktop-hero-watch-bottom,
    .mobile-streaming-summary,
    .desktop-nohero-watch,
    .desktop-hero-watch-bottom .streaming-summary-chips,
    .mobile-streaming-summary .streaming-summary-chips,
    .desktop-nohero-watch .streaming-summary-chips {
        flex-wrap: nowrap !important;
    }
}

/* "Rent / Buy" fallback chip — solid dark background + white text so it's
   legible on any backdrop (hero image OR flat page background, light OR dark). */
.streaming-badge.streaming-badge-rent-buy {
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none !important;
    font-weight: 500;
    box-shadow: none;
}
.streaming-badge.streaming-badge-rent-buy:hover {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
}
.mobile-layout .mobile-hero-extras .mobile-extra-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mv-bg-elevated, #22272e);
    border: 1px solid var(--mv-border-color, #30363d);
    color: var(--mv-text-primary);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
}
.mobile-layout .awards-summary-mobile {
    font-size: 0.72rem;
    color: var(--mv-text-muted);
    line-height: 1.4;
}
.mobile-layout .mobile-hero-extras .awards-summary-mobile {
    display: inline;
}
.mobile-layout .awards-summary-mobile .awards-trophy-icon {
    color: #ffc107;
    margin-right: 2px;
}
/* Make title-credits children flow as flex items of mobile-hero-extras, not one wide block */
.mobile-layout .mobile-hero-extras .title-credits {
    display: contents;
}
.mobile-layout .mobile-hero-extras .title-credits > span {
    font-size: 0.72rem;
    color: var(--mv-text-muted) !important;
    line-height: 1.4;
    margin-right: 0 !important;
}
/* Studio is already shown in mobile-credits-genres; hide the duplicate from title-credits */
.mobile-layout .mobile-hero-extras .title-credits > .studio-credit {
    display: none !important;
}

/* Dropdown "..." menu contents — preserve original icon colors */
.mobile-layout .mobile-hero-more-menu {
    font-size: 0.88rem;
    min-width: 180px;
}
.mobile-layout .mobile-hero-more-menu .dropdown-item i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}
.mobile-layout .mobile-hero-more-menu .dropdown-item.action-like i { color: #198754; }
.mobile-layout .mobile-hero-more-menu .dropdown-item#writeReviewBtnMobile i,
.mobile-layout .mobile-hero-more-menu .dropdown-item#writeReviewBtnMobileNoHero i { color: #ffc107; }
.mobile-layout .mobile-hero-more-menu .dropdown-item#openAttributesBtnMobile i,
.mobile-layout .mobile-hero-more-menu .dropdown-item#openAttributesBtnMobileNoHero i { color: #0dcaf0; }
.mobile-layout .mobile-hero-more-menu .dropdown-item.action-collection i { color: #198754; }

/* Overlaid title text on the hero — 2-column grid: text+scores left, sparkline right */
.mobile-layout .mobile-hero-text {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    z-index: 4;
    color: #fff;
}
.mobile-layout .mobile-hero-text-grid {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.mobile-layout .mobile-hero-text-left {
    flex: 1 1 auto;
    min-width: 0;
}
.mobile-layout .mobile-hero-text-right {
    flex: 0 0 auto;
    padding-bottom: 2px;
}
.mobile-layout .mobile-hero-text-right .season-trend-sparkline {
    padding: 0;
    margin: 0;
    text-align: right;
}
/* Sparkline text labels need to be readable on the hero backdrop */
.mobile-layout .mobile-hero-text-right .season-trend-sparkline svg text {
    fill: rgba(255,255,255,0.92) !important;
}

/* "Season Ratings" caption shown above the sparkline — global base style */
.season-trend-sparkline .season-trend-caption {
    font-size: 0.65rem;
    color: var(--mv-text-muted, #6c757d);
    text-align: right;
    line-height: 1;
    margin-bottom: 2px;
}
/* Desktop sparkline: stack caption above the line (container is flex row by default) */
.season-trend-sparkline.d-md-flex {
    flex-direction: column;
    align-items: flex-end;
}
/* Mobile overlay caption needs white text + shadow because it sits on the hero backdrop */
.mobile-layout .season-trend-sparkline .season-trend-caption {
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.mobile-layout .mobile-hero-text .title-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.75);
    margin: 0 0 4px !important;
}
.mobile-layout .mobile-hero-text .title-tagline {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92) !important;
    margin: 0 0 5px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
.mobile-layout .mobile-hero-text .title-meta-line {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin: 0 0 6px !important;
}

.mobile-layout .score-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}
.mobile-layout .score-badge.imdb-score .imdb-label,
.mobile-layout .score-badge.tmdb-score .tmdb-label {
    font-size: 0.62rem;
    margin-right: 0.2rem;
}

/* Combined Studio | Genres line on mobile (replaces standalone Studio + Genres rows) */
.mobile-layout .mobile-credits-genres .mcg-sep {
    color: var(--mv-text-muted, #6e7681);
    margin: 0 0.25rem;
}

/* Top cast line (rendered above the year line in all 3 layouts) */
.mobile-layout .mobile-hero-text .title-top-cast {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
.mobile-layout .mobile-nohero-info-col .title-top-cast {
    font-size: 0.78rem;
    color: var(--mv-text-secondary) !important;
}
.desktop-hero-text .title-top-cast {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin-bottom: 4px;
}

/* Align mobile-hero-below content with the hero overlay text (both at 14px from edges) */
.mobile-layout .mobile-hero-below {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* =========================================================================
   NO-HERO MOBILE LAYOUT (used when title has no tmdb_backdrop_path)
   Action bar at top, then poster on left + info on right, sparkline below.
   ========================================================================= */
.mobile-layout .mobile-nohero-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--mv-bg-elevated, #22272e);
    border-bottom: 1px solid var(--mv-border-color);
}
/* Override hero-actions positioning when used in no-hero (no absolute, no overlay) */
.mobile-layout .mobile-nohero-actions.mobile-hero-actions {
    position: static;
    top: auto;
    left: auto;
    right: auto;
}
.mobile-layout .mobile-nohero-main {
    display: flex;
    gap: 10px;
    padding: 10px;
}
.mobile-layout .mobile-nohero-poster-col {
    flex: 0 0 auto;
    width: 100px;
}
.mobile-layout .mobile-nohero-poster-col .mobile-poster-container {
    width: 100px;
}
.mobile-layout .mobile-nohero-poster-col .title-poster {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.mobile-layout .mobile-nohero-info-col {
    flex: 1 1 auto;
    min-width: 0;
}
.mobile-layout .mobile-nohero-info-col .title-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mv-text-primary);
}
.mobile-layout .mobile-nohero-info-col .title-tagline {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mv-text-secondary);
}
.mobile-layout .mobile-nohero-info-col .title-meta-line {
    font-size: 0.78rem;
}
/* Year / rating / runtime line under the poster (both Movie and TV).
   Scoped to .mobile-nohero-layout so nothing else is affected. */
.mobile-layout .mobile-nohero-layout .nohero-poster-meta {
    font-size: 0.72rem;
    line-height: 1.2;
}
/* TV-only series status row (Ended / Active / Returning), centered under the year line. */
.mobile-layout .mobile-nohero-layout .nohero-poster-status {
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 600;
}
.mobile-layout .mobile-nohero-sparkline-row {
    padding: 0;
    text-align: right;
    min-width: 0;
    flex: 0 1 auto;
}
/* In the shared Watch + sparkline row, the SVG must shrink to fit the
   leftover width after streaming chips; CSS scales it proportionally. */
.mobile-layout .mobile-nohero-watch-row .mobile-nohero-sparkline-row .season-trend-sparkline svg {
    max-width: 100%;
    height: auto;
}
/* Nudge the sparkline slightly up so its line visually aligns with the
   Watch chips instead of sitting below them. */
.mobile-layout .mobile-nohero-watch-row .mobile-nohero-sparkline-row {
    margin-top: -8px;
}
/* Make sure the sparkline caption inside no-hero uses the muted theme color (not the hero white) */
.mobile-layout .mobile-nohero-sparkline-row .season-trend-caption {
    color: var(--mv-text-muted) !important;
    text-shadow: none !important;
}
.mobile-layout .mobile-nohero-sparkline-row .season-trend-sparkline svg text {
    fill: var(--mv-text-secondary, #6c757d) !important;
}

/* Quick tab: put labels inline with their controls on mobile (Recommend / Watch Again / Appropriate For) */
.mobile-layout #utdMobileQuickPane > .mb-2,
.mobile-layout #utdMobileQuickPane > div:not(.d-flex):last-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 0.5rem !important;
}
.mobile-layout #utdMobileQuickPane > .mb-2 > label,
.mobile-layout #utdMobileQuickPane > div:not(.d-flex):last-child > label {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    min-width: 70px;
    display: inline-block !important;
}
.mobile-layout #utdMobileQuickPane > .mb-2 > div,
.mobile-layout #utdMobileQuickPane > div:not(.d-flex):last-child > div {
    flex: 1;
    min-width: 0;
}
/* Tighten the age-group chips so all 5 (Child / Tween / Teen / Older Teen / Adult) fit on one row alongside the label */
.mobile-layout #utdMobileQuickPane .age-group-selector .d-flex {
    gap: 3px !important;
    flex-wrap: nowrap !important;
}
.mobile-layout #utdMobileQuickPane .age-group-selector .btn {
    padding: 2px 6px !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
}
.mobile-layout #utdMobileQuickPane .age-group-selector {
    width: 100%;
}
.mobile-layout #utdMobileQuickPane .age-group-selector .age-group-reason {
    margin-top: 4px;
}

.mobile-layout .cast-photo {
    width: 55px;
    height: 80px;
}

.mobile-layout .cast-card {
    min-width: 70px;
}

.mobile-layout .cast-name {
    font-size: 0.7rem;
    max-width: 70px;
}

/* Mobile only, collapsed state: cast + crew render as a single horizontal scroll
   row in .cast-list. JS adds .cast-mobile-collapsed; expanded state drops the
   class and the list reverts to the default wrap-to-many-rows layout. */
.mobile-layout .cast-section.cast-mobile-collapsed .cast-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

/* ========================================
   DESKTOP LAYOUT STYLES
   ======================================== */
.desktop-layout {
}

.desktop-poster-container {
    max-width: 200px;
}

.desktop-layout .title-name {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
}

.desktop-layout .title-tagline {
    font-size: 1rem;
}

.title-credits {
    font-size: 0.86rem;
}
.mobile-layout .title-credits {
    font-size: 0.72rem;
    text-align: right;
}

.desktop-layout .cast-card {
    min-width: 100px;
}

.desktop-layout .cast-photo {
    width: 70px;
    height: 105px;
}

.desktop-layout .cast-name {
    font-size: 0.85rem;
    max-width: 100px;
}

/* ========================================
   Viewings List
   ======================================== */
.viewings-list .list-group-item {
    border-left: none;
    border-right: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.viewings-list .list-group-item:first-child {
    border-top: none;
}

/* ========================================
   Transitions
   ======================================== */
#videoPlayerSection {
    transition: opacity 0.3s ease;
}

.btn {
    transition: all 0.15s ease;
}

/* ========================================
   Add Genre Modal
   ======================================== */
#addGenreModal .modal-body {
    padding: 1rem;
}

/* ========================================
   Collection info
   ======================================== */
.collection-name {
    color: #6c757d;
    font-style: italic;
}

/* ========================================
   Trailer Play Button Overlay
   ======================================== */
.trailer-play-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    padding: 0;
}

.trailer-play-btn:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.trailer-play-btn i {
    margin: 0;
    line-height: 1;
}

/* Mobile adjustments */
.mobile-poster-container .trailer-play-btn {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    top: 5px;
    right: 5px;
}

/* Trailer Modal */
#trailerModal .modal-content {
    border: none;
    overflow: hidden;
}

#trailerModal .modal-header {
    padding: 0.5rem 1rem;
}

#trailerModal .modal-body {
    background: #000;
}

#trailerModal .ratio {
    background: #000;
}

/* ========================================
   Seasons & Episodes Section
   ======================================== */

/* Season Pills */
.season-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.season-pill {
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #0d6efd;
    background-color: transparent;
    color: #0d6efd;
    cursor: pointer;
    transition: all 0.15s ease;
}

.season-pill:hover {
    background-color: rgba(13, 110, 253, 0.1);
}

.season-pill.active {
    background-color: #0d6efd;
    color: white;
}

/* Season Header */
.season-header {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
}

.season-poster {
    background-color: #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.season-name {
    font-weight: 600;
    color: #212529;
}

.season-meta {
    font-size: 0.9rem;
}

.season-overview {
    color: #495057;
    line-height: 1.6;
}

/* Episode List */
.episode-list {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    overflow: hidden;
}

.episode-row {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.15s ease;
}

.episode-row:last-child {
    border-bottom: none;
}

.episode-row-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background-color: #fff;
}

.episode-row-header:hover {
    background-color: #f8f9fa;
}

.episode-row.expanded .episode-row-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.episode-number {
    width: 40px;
    flex-shrink: 0;
    font-weight: 600;
    color: #6c757d;
}

.episode-title {
    flex-grow: 1;
    font-weight: 500;
    color: #212529;
    padding-right: 0.5rem;
}

.episode-air-date {
    color: #6c757d;
    font-size: 0.85rem;
    padding-right: 0.75rem;
    white-space: nowrap;
}

.episode-play-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.episode-expand-icon {
    color: #6c757d;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.episode-row.expanded .episode-expand-icon {
    transform: rotate(180deg);
}

/* Episode Details (expanded view) */
.episode-details {
    display: none;
    padding: 1rem;
    background-color: #fafbfc;
}

.episode-row.expanded .episode-details {
    display: block;
}

/* Episode body with optional still image */
.episode-body.has-still {
    display: flex;
    gap: 1rem;
}

.episode-still {
    width: 200px;
    height: auto;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
    aspect-ratio: 16/9;
}

.episode-body-text {
    flex: 1;
    min-width: 0;
}

.episode-tmdb-rating {
    margin-bottom: 0.5rem;
}

.episode-synopsis {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.episode-credits {
    font-size: 0.85rem;
    color: #6c757d;
}

.episode-credits span {
    margin-right: 1rem;
}

.episode-credits strong {
    color: #495057;
}

/* Duration badge */
.episode-duration {
    font-size: 0.75rem;
    color: #6c757d;
    background-color: #e9ecef;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

/* No episodes message */
.no-episodes {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

/* Mobile adjustments for seasons */
.mobile-layout .season-pills {
    gap: 0.35rem;
}

.mobile-layout .season-pill {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}

.mobile-layout .season-header {
    padding: 0.75rem;
}

.mobile-layout .season-overview {
    font-size: 0.85rem;
}

.mobile-layout .episode-row-header {
    padding: 0.5rem 0.75rem;
}

.mobile-layout .episode-number {
    width: 30px;
    font-size: 0.85rem;
}

.mobile-layout .episode-title {
    font-size: 0.9rem;
}

.mobile-layout .episode-air-date {
    font-size: 0.75rem;
}

.mobile-layout .episode-details {
    padding: 0.75rem;
}

.mobile-layout .episode-body.has-still {
    flex-direction: column;
}

.mobile-layout .episode-still {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

.mobile-layout .episode-synopsis {
    font-size: 0.85rem;
}

.mobile-layout .episode-credits {
    font-size: 0.8rem;
}

/* Mobile-only date format and full episode title */
.episode-air-date-mobile {
    display: none;
}

.episode-full-title-mobile {
    display: none;
}

.mobile-layout .episode-air-date-desktop {
    display: none;
}

.mobile-layout .episode-air-date-mobile {
    display: inline;
}

.mobile-layout .episode-full-title-mobile {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #212529;
    margin-bottom: 0.5rem;
}

/* ========================================
   You May Enjoy Section (Similar Titles)
   ======================================== */

/* Horizontal scroll row */
.similar-scroll-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.similar-scroll-row::-webkit-scrollbar {
    height: 6px;
}

.similar-scroll-row::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.similar-scroll-row::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.similar-scroll-row::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Similar title card */
.similar-card {
    flex: 0 0 auto;
    width: 140px;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
    color: inherit;
}

.similar-card:hover {
    transform: translateY(-5px);
}

/* Card link wrapper - enables native browser link behavior */
.similar-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.similar-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.similar-card-poster {
    position: relative;
    width: 140px;
    height: 210px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.similar-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TMDB score badge on poster */
.similar-card-poster .tmdb-score {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Card info below poster */
.similar-card-info {
    padding-top: 8px;
}

.similar-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-card-subtitle {
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.similar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
    text-align: center;
}

.similar-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.similar-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .similar-card {
        width: 120px;
    }

    .similar-card-poster {
        width: 120px;
        height: 180px;
    }

    .similar-scroll-row {
        gap: 12px;
    }
}

/* ========================================
   Your Title Data Card
   ======================================== */
.your-title-data-card {
    height: 100%;
    background-color: #fffef5 !important;
}

.your-title-data-card .card-body {
    background-color: #fffef5;
}

/* Standard Bootstrap card styling */

/* Tags Section */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background-color: #e3f2fd;
    color: #1565c0;
    border-radius: 1rem;
    font-size: 0.85rem;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
}

.tag-badge .tag-remove-btn {
    margin-left: 0.4rem;
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.75rem;
}

.tag-badge .tag-remove-btn:hover {
    opacity: 1;
    color: #c62828;
}

/* Preset Tag Buttons */
.preset-tag-btn {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    font-size: 0.8rem;
    color: #616161;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-tag-btn:hover {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
}

.preset-tag-btn.used {
    background-color: #e0e0e0;
    color: #9e9e9e;
    cursor: default;
}

/* Age Group Badges */
.your-title-data-card .age-option {
    cursor: pointer;
    transition: all 0.15s ease;
}

.your-title-data-card .age-option:hover {
    opacity: 0.8;
}

/* ========================================
   Keywords Display (hashtag style)
   ======================================== */
.keyword-tag {
    display: inline-block;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.keywords-simple {
    line-height: 1.8;
}

/* ========================================
   Season User Data Row
   ======================================== */

.season-user-data-row {
    border-top: 1px solid #e9ecef;
}

/* Override TitleRating default styles for season header */
.season-user-rating .title-rating {
    display: flex;
    align-items: center;
}

.season-user-rating .title-rating-stars {
    display: flex;
    gap: 2px;
}

.season-user-rating .title-rating-star {
    font-size: 1rem;
    cursor: pointer;
    color: var(--mv-border-color);
    transition: color 0.15s;
}

.season-user-rating .title-rating-star.filled {
    color: #ffc107;
}

.season-user-rating .title-rating-star.half-filled {
    color: #ffc107;
}

.season-user-rating .title-rating-star:hover {
    color: #ffc107;
}

/* Indicator buttons */
.season-note-btn,
.season-review-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.season-note-btn.btn-secondary,
.season-review-btn.btn-warning {
    opacity: 1;
}

/* Community stats */
.season-community-stats {
    font-size: 0.8rem;
}

/* Mobile adjustments for season user data */
.mobile-layout .season-user-data-row {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
}

.mobile-layout .season-user-rating .title-rating-star {
    font-size: 0.9rem;
}

.mobile-layout .season-note-btn,
.mobile-layout .season-review-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}

.mobile-layout .season-community-stats {
    font-size: 0.75rem;
}

/* ========================================
   Episode User Indicators
   ======================================== */

.episode-user-indicators {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.episode-user-indicators:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.episode-user-indicators span {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8rem;
}

.episode-user-indicators .ep-view-count .count,
.episode-user-indicators .ep-rating .score {
    font-size: 0.75rem;
    font-weight: 500;
}

.episode-user-indicators i {
    font-size: 0.85rem;
}

/* Highlighted states */
.episode-user-indicators .text-warning i {
    color: #ffc107;
}

.episode-user-indicators .text-info i {
    color: #0dcaf0;
}

.episode-user-indicators .text-success i {
    color: #198754;
}

.episode-user-indicators .text-primary i {
    color: #0d6efd;
}

/* Muted state */
.episode-user-indicators .text-muted {
    opacity: 0.5;
}

.episode-user-indicators:hover .text-muted {
    opacity: 0.7;
}

[data-bs-theme="dark"] .episode-user-indicators .text-muted {
    color: var(--mv-text-secondary) !important;
    opacity: 0.6;
}

[data-bs-theme="dark"] .episode-user-indicators:hover .text-muted {
    opacity: 0.85;
}

/* Mobile adjustments */
.mobile-layout .episode-user-indicators {
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
}

.mobile-layout .episode-user-indicators span {
    font-size: 0.7rem;
}

.mobile-layout .episode-user-indicators i {
    font-size: 0.75rem;
}

.mobile-layout .episode-user-indicators .ep-view-count .count,
.mobile-layout .episode-user-indicators .ep-rating .score {
    font-size: 0.65rem;
}

/* Adjust episode row header for indicators */
.episode-row-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.episode-row-header .episode-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   Episode Expanded User Data Section
   ======================================== */

.episode-user-data {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.episode-user-data label {
    display: block;
    font-weight: 500;
}

.episode-user-data label i {
    margin-right: 0.25rem;
    opacity: 0.7;
}

/* Rating container in expanded section */
.ep-rating-container .title-rating-stars {
    display: flex;
    gap: 2px;
}

.ep-rating-container .title-rating-star {
    font-size: 1rem;
    cursor: pointer;
}

/* Viewings list */
.ep-viewings-list {
    max-height: 100px;
    overflow-y: auto;
}

.ep-viewing-item {
    padding: 0.125rem 0;
}

/* Note preview */
.ep-note-preview {
    background-color: #fff;
    border: 1px solid var(--mv-border-color);
    border-radius: 4px;
    padding: 0.5rem;
    min-height: 40px;
    font-size: 0.85rem;
}

/* Mobile adjustments */
.mobile-layout .episode-user-data {
    padding: 0.5rem;
}

.mobile-layout .ep-rating-container .title-rating-star {
    font-size: 0.9rem;
}

.mobile-layout .ep-note-preview {
    font-size: 0.8rem;
    min-height: 30px;
}

/* Episode section mobile separators - faint line between sections on mobile only */
@media (max-width: 767.98px) {
    .ep-mobile-separator {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #e9ecef;
    }
}

/* User data section - subtle yellow background to indicate "your" data */
.episode-user-data {
    background-color: #fffef5;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

/* Awards expand button */
.awards-expand-btn {
    color: #6c757d;
    font-size: 0.85rem;
}

.awards-expand-btn:hover {
    color: #0d6efd;
}

.awards-more-count {
    font-size: 0.8rem;
}

/* Awards table - slightly smaller text */
.awards-list .table {
    font-size: 0.875rem;
}

.awards-list .table td,
.awards-list .table th {
    padding: 0.4rem 0.5rem;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .card-header {
    background-color: var(--mv-bg-surface);
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header h6 {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .card-header h5 i,
[data-bs-theme="dark"] .card-header h6 i {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .cast-photo {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .cast-name-link {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .cast-role {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .cast-character {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .cast-expand-btn {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .streaming-separator {
    background-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .synopsis-text {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .rating-notes-text {
    border-top-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .content-item {
    background-color: var(--mv-bg-surface);
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .content-item:hover {
    background-color: var(--mv-bg-hover);
}
[data-bs-theme="dark"] .mobile-layout {
    background-color: var(--mv-bg-body);
}
[data-bs-theme="dark"] .desktop-layout .title-name {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .collection-name {
    color: var(--mv-text-muted);
}
/* Seasons & Episodes */
[data-bs-theme="dark"] .season-header {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .season-poster {
    background-color: var(--mv-bg-hover);
}
[data-bs-theme="dark"] .season-name {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .season-overview {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .episode-list {
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .episode-row {
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .episode-row-header {
    background-color: var(--mv-bg-card);
}
[data-bs-theme="dark"] .episode-row-header:hover {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .episode-row.expanded .episode-row-header {
    background-color: var(--mv-bg-surface);
    border-bottom-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .episode-number {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .episode-title {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .episode-air-date {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .episode-expand-icon {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .episode-details {
    background-color: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .episode-synopsis {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .episode-credits {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .episode-credits strong {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .episode-duration {
    color: var(--mv-text-muted);
    background-color: var(--mv-bg-hover);
}
[data-bs-theme="dark"] .no-episodes {
    color: var(--mv-text-muted);
}
/* Similar titles */
[data-bs-theme="dark"] .similar-scroll-row::-webkit-scrollbar-track {
    background: var(--mv-bg-body);
}
[data-bs-theme="dark"] .similar-scroll-row::-webkit-scrollbar-thumb {
    background: #495057;
}
[data-bs-theme="dark"] .similar-scroll-row::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}
[data-bs-theme="dark"] .similar-card-poster {
    background: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .similar-card-subtitle {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .similar-empty {
    color: var(--mv-text-muted);
}
/* Your Title Data Card */
[data-bs-theme="dark"] .your-title-data-card {
    background-color: rgba(255, 193, 7, 0.08) !important;
}
[data-bs-theme="dark"] .your-title-data-card .card-body {
    background-color: rgba(255, 193, 7, 0.08);
}
[data-bs-theme="dark"] .tag-badge {
    background-color: rgba(13, 110, 253, 0.2);
    color: #6ea8fe;
}
[data-bs-theme="dark"] .preset-tag-btn {
    background-color: var(--mv-bg-surface);
    border-color: var(--mv-border-color);
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .preset-tag-btn:hover {
    background-color: rgba(13, 110, 253, 0.15);
    border-color: #6ea8fe;
    color: #6ea8fe;
}
[data-bs-theme="dark"] .preset-tag-btn.used {
    background-color: var(--mv-bg-hover);
    color: var(--mv-text-muted);
}
/* Season user data */
[data-bs-theme="dark"] .season-user-data-row {
    border-top-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .season-user-rating .title-rating-star.bi-star {
    color: #8a939c;
}
[data-bs-theme="dark"] .season-user-rating .title-rating-star.filled {
    color: #ffc107;
}
[data-bs-theme="dark"] .season-user-rating .title-rating-star.half-filled {
    color: #ffc107;
}
/* Episode user data */
[data-bs-theme="dark"] .episode-user-data {
    background-color: rgba(255, 193, 7, 0.08);
}
[data-bs-theme="dark"] .episode-user-data label {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .episode-user-data .small.text-muted,
[data-bs-theme="dark"] .episode-user-data label .small.text-muted,
[data-bs-theme="dark"] .episode-user-data label.small.text-muted {
    color: var(--mv-text-secondary) !important;
}
[data-bs-theme="dark"] .ep-review-content {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .ep-note-textarea {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .ep-like-container .small.text-muted {
    color: var(--mv-text-secondary) !important;
}
[data-bs-theme="dark"] .ep-note-preview {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .mobile-layout .episode-full-title-mobile {
    color: var(--mv-text-primary);
}
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .ep-mobile-separator {
        border-bottom-color: var(--mv-border-color);
    }
}
/* Awards */
[data-bs-theme="dark"] .awards-expand-btn {
    color: var(--mv-text-muted);
}
/* Detail modal */
[data-bs-theme="dark"] .detail-modal-plot {
    border-top-color: var(--mv-border-color);
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .detail-modal-source {
    border-top-color: var(--mv-border-color);
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .faceoff-rating {
    border-top-color: var(--mv-border-color);
}

/* ================================================================ */
/* FRIEND ACTIVITY - 2-row horizontal scroll grid                    */
/* ================================================================ */
.friend-activity-scroll-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 160px;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.friend-activity-scroll-grid .feed-item {
    flex: 0 0 auto;
    width: 320px;
    margin-bottom: 0;
}

.friend-activity-scroll-grid::-webkit-scrollbar {
    height: 6px;
}

.friend-activity-scroll-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.friend-activity-scroll-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .friend-activity-scroll-grid {
        max-height: 150px;
    }
    .friend-activity-scroll-grid .feed-item {
        width: 280px;
    }
}

[data-bs-theme="dark"] .friend-activity-scroll-grid::-webkit-scrollbar-track {
    background: var(--mv-bg-secondary, #2b2b2b);
}

[data-bs-theme="dark"] .friend-activity-scroll-grid::-webkit-scrollbar-thumb {
    background: var(--mv-border-color, #495057);
}

/* ================================================================ */
/* DATA SECTIONS — Consistent styling for Awards, Box Office,       */
/* Release Dates tables                                              */
/* ================================================================ */
.awards-section .table td,
.awards-section .table th,
.box-office-section .table-borderless td,
.box-office-section h6,
.release-dates-section .table td,
.release-dates-section .table th {
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
}

.awards-section .table th,
.box-office-section h6,
.release-dates-section .table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mv-text-secondary, #6c757d);
}

@media (max-width: 768px) {
    .awards-section .table td,
    .awards-section .table th,
    .box-office-section .table-borderless td,
    .box-office-section h6,
    .release-dates-section .table td,
    .release-dates-section .table th {
        font-size: 0.82rem;
    }
    .awards-section .table th,
    .box-office-section h6,
    .release-dates-section .table th {
        font-size: 0.75rem;
    }
    .box-office-section .col-md-4 + .col-md-4 {
        border-top: 1px solid var(--mv-border-color, var(--mv-border-color));
        padding-top: 0.75rem;
    }
}

/* ================================================================ */
/* DARK MODE — Consistent table styling for all detail sections     */
/* ================================================================ */
[data-bs-theme="dark"] .awards-section .table thead th,
[data-bs-theme="dark"] .box-office-section h6,
[data-bs-theme="dark"] .release-dates-section .table thead th {
    color: var(--mv-text-secondary, #adb5bd) !important;
}

[data-bs-theme="dark"] .awards-section .table tbody td,
[data-bs-theme="dark"] .box-office-section .table-borderless td,
[data-bs-theme="dark"] .box-office-section .table-borderless td.text-muted,
[data-bs-theme="dark"] .release-dates-section .table tbody td {
    color: var(--mv-text-secondary, #adb5bd) !important;
}

[data-bs-theme="dark"] .awards-section .table tbody td a,
[data-bs-theme="dark"] .release-dates-section .table tbody td a {
    color: var(--mv-link-color, #6ea8fe) !important;
}

[data-bs-theme="dark"] .awards-section .table-hover tbody tr:hover td,
[data-bs-theme="dark"] .release-dates-section .table-hover tbody tr:hover td {
    color: var(--mv-text-primary, #e0e0e0) !important;
}

/* Season trend sparkline */
.season-trend-link {
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.season-trend-link:hover {
    opacity: 1;
}

/* Score badges - ensure readable text in dark mode */
[data-bs-theme="dark"] .score-badge.imdb-score {
    color: #000 !important;
}

[data-bs-theme="dark"] .score-badge.tmdb-score {
    color: #081c22 !important;
}

/* Awards summary badges - ensure black text on yellow in dark mode */
[data-bs-theme="dark"] .awards-summary .badge.bg-warning {
    color: #000 !important;
}

/* Watch on Plex link */
.plex-deep-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5a00d;
}
.plex-deep-link:hover {
    color: #f0b429;
}

/* Deep-link highlight — flashes briefly on episode rows arrived at via ?season=N&episode=M */
.episode-row.deep-link-highlight {
    animation: episodeDeepLinkPulse 2.4s ease-out;
}
@keyframes episodeDeepLinkPulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.55); }
    40%  { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0.20); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}

/* =========================================================
   Community Reviews — teaser badge + inline section
   ========================================================= */

/* Teaser badge in the scores row. Matches .score-badge shape; distinct colour for community data. */
.score-badge.reviews-teaser {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    cursor: pointer;
}
.score-badge.reviews-teaser:hover {
    background-color: #0b5ed7;
}
.score-badge.reviews-teaser .reviews-teaser-star {
    margin-left: 0.55rem;
    margin-right: 0.15rem;
    color: #ffc107;
}

/* Reviews section card */
.reviews-section .reviews-see-all-btn {
    white-space: nowrap;
}

/* Summary chips (pill row) */
.reviews-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background-color: var(--mv-bg-surface, #f8f9fa);
    border: 1px solid var(--mv-border-color, var(--mv-border-color));
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mv-text-primary, #212529);
}
.reviews-chip i { color: #0d6efd; }
.reviews-chip.reviews-chip-rating i { color: #ffc107; }
.reviews-chip.reviews-chip-recommend i { color: #198754; }
.reviews-chip.reviews-chip-watch-again i { color: #6f42c1; }
.reviews-chip .reviews-chip-label,
.reviews-chip .reviews-chip-sample {
    font-weight: 400;
}

/* Horizontal preview strip */
.reviews-preview-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}
.reviews-preview-strip::-webkit-scrollbar {
    height: 6px;
}
.reviews-preview-strip::-webkit-scrollbar-thumb {
    background: var(--mv-border-color, var(--mv-border-color));
    border-radius: 3px;
}

/* Individual preview card */
.review-preview-card {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--mv-border-color, var(--mv-border-color));
    background-color: var(--mv-bg-card, #fff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.review-preview-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
}
.review-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.review-preview-author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mv-text-primary, #212529);
    word-break: break-word;
}
.review-preview-rating {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.review-preview-text {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mv-text-secondary, #495057);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
    gap: 0.5rem;
}
.review-preview-spoiler {
    font-size: 0.7rem;
}

/* Empty state */
.reviews-section .reviews-empty-state {
    color: var(--mv-text-secondary, #495057);
}

/* Mobile tweaks: slightly smaller preview cards */
.mobile-layout .reviews-preview-strip {
    padding-bottom: 0.35rem;
}
.mobile-layout .review-preview-card {
    flex: 0 0 230px;
    max-width: 230px;
    padding: 0.6rem;
}
.mobile-layout .review-preview-text {
    -webkit-line-clamp: 3;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .reviews-chip {
    background-color: var(--mv-bg-surface);
    border-color: var(--mv-border-color);
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .review-preview-card {
    background-color: var(--mv-bg-card);
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .review-preview-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 10px rgba(13, 110, 253, 0.25);
}
[data-bs-theme="dark"] .review-preview-author {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .review-preview-text {
    color: var(--mv-text-secondary);
}
[data-bs-theme="dark"] .reviews-preview-strip::-webkit-scrollbar-thumb {
    background: var(--mv-border-color);
}

/* =========================================================================
   DESKTOP V3 HERO BANNER (large screens, md+)
   Full-width backdrop with bottom-anchored title/meta/scores/watch-strip.
   ========================================================================= */
.desktop-hero-banner {
    position: relative;
    width: 100%;
    min-height: 180px;
    overflow: hidden;
    background: #000;
}
/* 2-col synopsis | UTD grid below the hero */
.desktop-layout .desktop-syn-utd-row {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    /* align-items defaults to stretch - both cards match the taller one's height */
}
/* UTD is wrapped in an extra div; make that div + the card inside fill the row height */
.desktop-layout .desktop-syn-utd-row > div:last-child {
    display: flex;
    flex-direction: column;
}
.desktop-layout .desktop-syn-utd-row > div:last-child > .card {
    flex: 1 1 auto;
}
.desktop-hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 28%;
    background-color: #000;
}
.desktop-hero-bg.no-backdrop {
    filter: blur(20px) brightness(0.5);
    transform: scale(1.15);
}
.desktop-hero-fade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(13,17,23,0.18) 0%,
        rgba(13,17,23,0.32) 38%,
        rgba(13,17,23,0.85) 88%,
        var(--mv-bg-body, #0d1117) 100%);
}

/* Glass action buttons (top of hero) */
.desktop-hero-actions {
    position: absolute;
    top: 6px;
    left: 18px;
    right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.desktop-hero-actions-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.desktop-hero-actions .btn-glass {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
}
.desktop-hero-actions .btn-glass:hover,
.desktop-hero-actions .btn-glass:focus {
    background: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.22);
}
/* Original color scheme for each action button */
.desktop-hero-actions .btn-glass.back-btn { color: #adb5bd; }
.desktop-hero-actions .btn-glass.action-watchlist { color: #0dcaf0; }
.desktop-hero-actions .btn-glass.action-watchlist.active { color: #0dcaf0; }
.desktop-hero-actions .btn-glass.action-watched { color: #0d6efd; }
.desktop-hero-actions .btn-glass.action-watched.active { color: #0d6efd; }
.desktop-hero-actions .btn-glass.action-share { color: #adb5bd; }
.desktop-hero-actions .btn-glass.action-like { color: #198754; }
.desktop-hero-actions .btn-glass.action-like.active { color: #4ade80; }
.desktop-hero-actions .btn-glass.action-review-btn { color: #ffc107; }
.desktop-hero-actions .btn-glass.action-attributes-btn { color: #0dcaf0; }
.desktop-hero-actions .btn-glass.action-collection { color: #198754; }
.desktop-hero-actions .btn-glass.action-collection.active { color: #ffc107; }
.desktop-hero-actions .btn-glass.edit-title-btn { color: #adb5bd; }
.desktop-hero-actions .dropdown > .btn-glass { color: #adb5bd; }

/* Labeled glass buttons (desktop only — visible top buttons get text next to the icon) */
.desktop-hero-actions .btn-glass.btn-glass-labeled {
    width: auto;
    padding: 0 14px;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
}
.desktop-hero-actions .btn-glass.btn-glass-labeled span {
    line-height: 1;
}

/* Dropdown menu inside desktop hero — match mobile dropdown styling */
.desktop-hero-actions .dropdown-menu {
    font-size: 0.88rem;
    min-width: 180px;
}
.desktop-hero-actions .dropdown-menu .dropdown-item i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}
.desktop-hero-actions .dropdown-menu .dropdown-item.action-like i { color: #198754; }
.desktop-hero-actions .dropdown-menu .dropdown-item#writeReviewBtnDesktop i { color: #ffc107; }
.desktop-hero-actions .dropdown-menu .dropdown-item#openAttributesBtnDesktop i { color: #0dcaf0; }
.desktop-hero-actions .dropdown-menu .dropdown-item.action-collection i { color: #198754; }

/* Trailer button overrides its default absolute overlay positioning */
.desktop-hero-actions .btn-glass.trailer-play-btn {
    position: static;
    top: auto; right: auto;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.14);
    color: #ff4d4d;
    box-shadow: none;
}
.desktop-hero-actions .btn-glass.trailer-play-btn:hover {
    background: rgba(0,0,0,0.7);
    color: #ff4d4d;
    transform: none;
    box-shadow: none;
}

/* Title content flows inside the banner (not absolute) so the banner grows
   to fit content — prevents clipping on desktop and dead space on mobile. */
.desktop-hero-text {
    position: relative;
    padding: 100px 28px 16px;
    z-index: 4;
    color: #fff;
}
.desktop-hero-text .title-name {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 4px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desktop-hero-text .title-tagline {
    font-style: italic;
    font-size: 1rem;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin: 0 0 10px !important;
}
.desktop-hero-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 24px;
    align-items: start;
    margin-bottom: 12px;
}
.desktop-hero-meta-grid .title-meta-line {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin-bottom: 4px;
}
.desktop-hero-meta-grid .title-credits {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin-bottom: 4px;
}
.desktop-hero-meta-grid .title-credits b,
.desktop-hero-meta-grid .title-credits strong {
    color: #fff;
}
.desktop-hero-genres-row {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin-bottom: 4px;
}
.desktop-hero-genres-row .genres-label { font-weight: 600; color: #fff; }
.desktop-hero-genres-row .genres-simple { color: rgba(255,255,255,0.92) !important; }
.desktop-hero-awards-row {
    font-size: 0.82rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
    margin-bottom: 16px;
}
/* Badges have their own solid background, so the row's text-shadow makes them look fuzzy.
   Strip the shadow off the badge text/icons to keep them crisp. */
.desktop-hero-awards-row .badge,
.desktop-hero-awards-row .badge i {
    text-shadow: none;
}

/* Score pills are smaller on the hero too */
.desktop-hero-text .score-badge {
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
}
/* Right-anchor the WHOLE block as a group, and stretch every child to the widest child's
   width so all rows (credits stack, scores, sparkline) share the same left edge. */
.desktop-hero-meta-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    justify-self: end;
}
.desktop-hero-meta-right .scores-row {
    justify-content: flex-end;
}
.desktop-hero-meta-right .title-credits {
    text-align: right;
}
/* Stack each credit (Budget, Box Office, Nielsen) on its own line */
.desktop-hero-meta-right .title-credits > span {
    display: block;
    margin-right: 0 !important;
    margin-bottom: 2px;
}

/* Sparkline sits in the meta-grid right column under the scores */
.desktop-hero-meta-grid .season-trend-sparkline {
    margin-top: 16px;
}
.desktop-hero-meta-grid .season-trend-sparkline .season-trend-caption {
    color: rgba(255,255,255,0.85) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}
.desktop-hero-meta-grid .season-trend-sparkline svg text {
    fill: rgba(255,255,255,0.92) !important;
}

/* Watch-on strip flows as the last item in the left column (directly under the awards row). */
.desktop-hero-watch-bottom {
    margin-top: 6px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
.desktop-hero-watch-bottom .watch-label {
    font-weight: 600;
    color: #fff;
    margin-right: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
.desktop-hero-watch-bottom .streaming-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
}
.desktop-hero-watch-bottom .streaming-summary-chip:hover {
    background: rgba(255,255,255,0.18);
}
.desktop-hero-watch-bottom .streaming-summary-logo {
    height: 22px;
    width: auto;
    border-radius: 3px;
    display: block;
}

/* =========================================================================
   MOBILE SCALE-DOWN for the shared desktop-style hero.
   Mobile uses the SAME markup/CSS as desktop. These overrides apply only at
   narrow widths to scale font-sizes/spacing for phone viewports.
   ========================================================================= */
@media (max-width: 767.98px) {
    .desktop-hero-text {
        padding: 70px 14px 10px;
    }
    .desktop-hero-text .title-name {
        font-size: 1.6rem;
    }
    .desktop-hero-text .title-tagline {
        font-size: 0.85rem;
        margin-bottom: 6px !important;
    }
    .desktop-hero-meta-grid {
        gap: 4px 12px;
        margin-bottom: 8px;
    }
    .desktop-hero-meta-grid .title-meta-line {
        font-size: 0.78rem;
    }
    .desktop-hero-meta-grid .title-credits {
        font-size: 0.72rem;
    }
    .desktop-hero-genres-row {
        font-size: 0.78rem;
    }
    .desktop-hero-text .title-top-cast {
        font-size: 0.78rem;
    }
    .desktop-hero-watch-bottom {
        gap: 4px 8px;
    }
    .desktop-hero-watch-bottom .watch-label {
        font-size: 0.78rem;
    }
    /* Hide the "Genres:" label on mobile hero — keep the genre list itself. */
    .desktop-hero-genres-row .genres-label {
        display: none;
    }
    /* Right-align the sparkline SVG on mobile hero (caption already right-aligned). */
    .desktop-hero-meta-right .season-trend-sparkline {
        text-align: right;
    }
}

/* Desktop no-hero layout: sparkline sits to the right of the Nielsen+scores stack.
   Sparkline cell hidden for movies (no seasons), so scores take the full row. */
.desktop-layout .desktop-nohero-layout .desktop-nohero-sparkline-col {
    flex: 0 0 auto;
}
body.is-movie .desktop-layout .desktop-nohero-layout .desktop-nohero-sparkline-col {
    display: none;
}
.desktop-layout .desktop-nohero-layout .desktop-nohero-watch .watch-label {
    color: var(--mv-text-muted);
}

/* Phone-only (xs), movies only: stack the 4 score badges into 2 rows (RT+IMDb / TMDB+reviews-teaser).
   !important needed to beat Bootstrap's `.d-flex` utility (display: flex !important) on the markup. */
@media (max-width: 575.98px) {
    body.is-movie .desktop-hero-meta-right .scores-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
}

/* =========================================================================
   NO-HERO THEME ADAPTATION
   The .desktop-hero-* classes are reused inside .desktop-nohero-layout, but
   their built-in styles (white text + drop shadow) assume a dark backdrop
   image behind them. Without a backdrop, white text is unreadable in light
   mode. These overrides neutralize the white/shadow inside no-hero and let
   theme-adaptive --mv-* variables drive color, which works in both modes.
   Scope is strict: no hero variant or any other page is affected.
   ========================================================================= */

/* Genres row (label + list) — used on desktop no-hero. */
.desktop-nohero-layout .desktop-hero-genres-row,
.desktop-nohero-layout .desktop-hero-genres-row .genres-label,
.desktop-nohero-layout .desktop-hero-genres-row .genres-simple {
    color: var(--mv-text-primary) !important;
    text-shadow: none !important;
}

/* Awards row wrapper — pills have their own background, but stripping the
   row's drop-shadow avoids ghosting around the pills in light mode. */
.desktop-nohero-layout .desktop-hero-awards-row {
    text-shadow: none !important;
}

/* Nielsen / Budget / Box Office line. */
.desktop-nohero-layout .title-credits {
    color: var(--mv-text-secondary);
    text-shadow: none;
}

/* Sparkline caption + SVG labels. Svg <text> fills via `fill`, not color. */
.desktop-nohero-layout .season-trend-sparkline .season-trend-caption {
    color: var(--mv-text-muted) !important;
    text-shadow: none !important;
}
.desktop-nohero-layout .season-trend-sparkline svg text {
    fill: var(--mv-text-secondary) !important;
}

/* ============================================================
 * Light-mode override: drop the hero fade-out.
 * The default fade ends in var(--mv-bg-body) which is white in
 * light mode, producing a harsh dark-to-white wash at the bottom
 * of the hero photo. In light mode we let the photo simply end.
 * Dark-mode fade is unchanged (smooth dark-to-dark).
 *
 * Selector note: light mode REMOVES the data-bs-theme attribute
 * entirely (darkMode.js), so [data-bs-theme="light"] never matches.
 * Use html:not([data-bs-theme="dark"]) to match the absent state.
 * ============================================================ */
html:not([data-bs-theme="dark"]) .mobile-layout .mobile-hero-fade,
html:not([data-bs-theme="dark"]) .desktop-hero-fade {
    background: transparent !important;
}