/* ==========================================================================
   MOVIE PARITY — the demo's remaining movie-page design, applied to the site.

   Every selector in this file is reached only through `body.movies-section`,
   `.movie-*`, or an element this sheet's own JS creates. Live Sports, Live TV
   and the series module carry none of those, so nothing here can reach them.
   The single exception is `#pwaInstallBtn` in section 13b, which the owner
   asked to have taken off the shared header; it is marked as such there.

   The player is deliberately untouched: no rule below names `.video-container`,
   `#videoPlayer`, `.player-controls`, `.video-container-wrap` or `.sticky-notice`,
   and none changes the player's size, position or controls.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CARD — the title's block is as tall as the title, and no taller.

   This began the other way round: two lines were reserved for every title so
   the gold rule and the meta line sat at one height across a row. It bought
   a straight edge and paid for it with a hole - a one-line title left a
   blank line under it, then the rule, then "Hindi · 2026", and the card read
   as though something had failed to load.

   The owner called it, on the live page: long titles take their second line,
   short ones close the gap. So the title keeps its two-line ceiling and
   nothing below it is pushed anywhere - the rule and the meta follow the
   title immediately. The card's own height is fixed elsewhere, so the row
   still has a straight outer edge; what varies now is the quiet space under
   the meta rather than a gap in the middle of the copy.
   -------------------------------------------------------------------------- */
.movie-card .card-meta {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
.sidebar-list.movie-grid .movie-card-title,
.movie-row-strip .movie-card-title {
  min-height: 0 !important;
}
.movie-card .related-gold-line {
  margin-top: 0 !important;
}

/* The demo's slanted corner ribbon, on movie cards and on the series
   catalogue card, which was already drawing a flat rectangular badge. */
.movie-card .badge-movie-type,
.series-catalog-poster .series-type-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 22px !important;
  padding: 0 4px 0 8px !important;
  border: 0 !important;
  border-radius: 6px 0 0 0 !important;
  background: #8b5cf6 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
}
.movie-card .badge-movie-type::after,
.series-catalog-poster .series-type-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-top: 22px solid #8b5cf6;
  border-right: 10px solid transparent;
  pointer-events: none;
}
.movie-card .badge-movie-type .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

/* The bookmark star now sits alone on the poster, so it takes the corner the
   removed info button used to share with it. */
.movie-card .movie-card-bookmark {
  right: 7px !important;
  left: auto !important;
}
.movie-card .movie-rank-badge {
  left: auto !important;
  right: 6px !important;
}
.movie-card:has(.movie-rank-badge) .movie-card-bookmark {
  right: 38px !important;
}

/* --------------------------------------------------------------------------
   2. ROWS — a fade at the scrolling edge.

   The last card in a row was cut in half by the panel edge, which reads as a
   layout fault rather than as "there is more this way".
   -------------------------------------------------------------------------- */
.movie-row {
  position: relative;
}
.movie-row .movie-row-strip {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}
.movie-row .movie-row-strip.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Demo `.cards-row` gap and `.media-grid` gap. Written at the same weight as
   the rules they settle, and this sheet is last, so the tie falls here. */
.movie-row-strip {
  gap: 12px !important;
}
body.movie-portal .sidebar-list.movie-grid {
  gap: 18px 12px !important;
}

/* Tablet: four tracks of one card, not two half-width ones.
   `reference-design.css` puts every grid in the panel on two columns below
   990px, which is right on a phone and wrong on a tablet - at 768px it drew
   361px cards, more than twice the width the card is designed at. The card
   width itself decides the track count here, which is what the demo does. */
@media (min-width: 681px) and (max-width: 990px) {
  body.movie-portal .sidebar-section.movie-mode .sidebar-list.movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--card-base-width), 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.movie-portal .sidebar-list.movie-grid {
    gap: 14px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   3. HERO — the tablet band.

   Desktop and phone already carry the demo's floor (390px / 272px) and run
   taller than it only because their content is taller - the meta row wraps
   where the demo's does not. A fixed height there would clip a real line of
   metadata, so the floor is left to do its job.

   The tablet band is a different case: between 681px and 1000px the portal
   drops the hero's floor to 210px, and at 768px it came out at 262px against
   the demo's 330 - a banner too short to hold the artwork it is showing.
   -------------------------------------------------------------------------- */
@media (min-width: 681px) and (max-width: 1000px) {
  body.movie-portal .movie-hero { min-height: 330px !important; }
  body.movie-portal .movie-hero-inner { min-height: 300px !important; }
}

/* --------------------------------------------------------------------------
   4. RAIL — the pinned profile card that finishes it.
   -------------------------------------------------------------------------- */
.movie-rail-user {
  /* Pinned to the foot of the rail rather than parked after the genre pills:
     the rail's contents are taller than the rail, so appended it would only
     be reachable by scrolling to the very end. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* Opaque, not translucent: it sits over the genre pills as the rail
     scrolls, and a see-through card there reads as two overlapping rows. */
  background: #0c131c;
  box-shadow: 0 -10px 18px -6px #0c131c;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.movie-rail-user:hover {
  background: #101926;
  border-color: rgba(255, 49, 84, 0.35);
}
.movie-rail-user-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2a4a 0%, #8f7bff 60%, #4a9eee 100%);
  box-shadow: 0 0 12px rgba(255, 49, 84, 0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.movie-rail-user-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.movie-rail-user-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f7f9fc;
  font-size: 12.5px;
  font-weight: 750;
}
.movie-rail-user-plan {
  background: linear-gradient(135deg, #ff2a4a 0%, #ffb703 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   5. PAGE TOAST — outside the player, so the movie page can be heard.

   `#osdToast` lives inside `.video-container`. With the movie portal open
   that column is off screen, so every confirmation the section raised was
   posted into a hidden element.
   -------------------------------------------------------------------------- */
.movie-page-toast {
  position: fixed;
  right: 20px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(90vw, 380px);
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(15, 24, 38, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.movie-page-toast i { color: #19c987; }
.movie-page-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (max-width: 768px) {
  .movie-page-toast {
    left: 50%;
    right: auto;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(60px) scale(0.95);
  }
  .movie-page-toast.show {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   6. PHONE TAB BAR — the demo's floating movie navigation.

   Hidden unless the movies section is open, so the bar every other section
   already shows at the foot of the page is left alone. The main
   Live Sports / Live TV / Movies nav is NOT hidden the way the movies-only
   demo hides it: on this site that is the only route back to Live TV.
   -------------------------------------------------------------------------- */
.movie-tab-bar { display: none; }

@media (max-width: 768px) {
  /* The slot is already taken. `reference-design.css` moves the app header to
     the foot of the page on a phone, where it shows the brand, a search icon
     and the notice bell at z-index 1500 - so a second bar under it was simply
     invisible, and two stacked bars would be worse than either. Inside the
     movies section this bar takes that slot and carries all three of those
     controls; leaving the section restores the original bar untouched. */
  body.movies-section .app-header {
    display: none !important;
  }

  body.movies-section .movie-tab-bar {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    background: rgba(8, 14, 22, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 42, 84, 0.12);
  }
  /* Playback owns the screen; the browse bar steps aside for it. */
  body.movies-section.playback-active .movie-tab-bar,
  html.custom-player-fullscreen body.movies-section .movie-tab-bar {
    display: none;
  }

  .movie-tab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 5px 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #8899ac;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    /* Bengali labels carry matras above and descenders below, so the line
       box needs the room or the bar clips them. */
    line-height: 1.55;
    cursor: pointer;
  }
  .movie-tab i {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .movie-tab.active { color: #fff; }
  .movie-tab.active i {
    color: #ff2a4a;
    transform: scale(1.16);
    filter: drop-shadow(0 0 8px rgba(255, 42, 84, 0.6));
  }
  .movie-tab-label {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .movie-tab-count {
    position: absolute;
    top: 2px;
    right: 18%;
    min-width: 15px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #ff2a4a;
    box-shadow: 0 0 6px rgba(255, 42, 84, 0.5);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
  }

  /* The bar floats over the page, so the last row of cards - and the load
     more button under them - gets room to clear it instead of ending
     underneath it. The flag is needed, not decorative: `reference-design.css`
     sets the whole padding shorthand on this element at this width with
     `!important`, so without it the clearance was silently dropped and the
     button rendered under the bar where it could not be tapped at all. */
  body.movies-section .sidebar-scroll-area {
    padding-bottom: 94px !important;
  }

  /* "Back to Home" was down to a bare arrow below 640px - an icon with no
     label, in a section where the arrow could as easily mean the previous
     card. The words come back; the row has space for them now that the
     genre chips are a single dropdown. */
  body.movies-section .movie-grid-back span {
    display: inline !important;
  }
  body.movies-section .movie-grid-back {
    padding: 0 12px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   7. PHONE GENRE CONTROL — one dropdown instead of a chip strip.

   From 681px up the chip bar is untouched.
   -------------------------------------------------------------------------- */
.movie-genre-drop { display: none; }

@media (max-width: 680px) {
  .movie-grid-header .movie-grid-filter-shell { display: none !important; }

  .movie-genre-drop {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .movie-genre-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid #20354e;
    border-radius: 8px;
    background: #0b1320;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .movie-genre-drop-btn > .fa-tags { color: #38bdf8; font-size: 10.5px; }
  .movie-genre-drop-prefix { color: #91a4ba; font-weight: 700; }
  .movie-genre-drop-value {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
  }
  .movie-genre-drop-caret {
    margin-left: 1px;
    color: #8195aa;
    font-size: 8.5px;
    transition: transform 0.16s ease;
  }
  .movie-genre-drop.open .movie-genre-drop-btn {
    border-color: #38bdf8;
    background: #101d2c;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.17);
  }
  .movie-genre-drop.has-genre .movie-genre-drop-btn {
    border-color: rgba(255, 42, 74, 0.7);
    background: rgba(255, 42, 74, 0.1);
  }
  .movie-genre-drop.open .movie-genre-drop-caret { transform: rotate(180deg); }

  .movie-genre-drop-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 121;
    display: none;
    width: min(200px, calc(100vw - 24px));
    max-height: min(330px, 60vh);
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: #0b131f;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.58);
  }
  .movie-genre-drop.open .movie-genre-drop-menu {
    display: grid;
    gap: 2px;
  }
  .movie-genre-drop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c7d3e1;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .movie-genre-drop-item i { color: transparent; font-size: 9px; }
  .movie-genre-drop-item.active {
    background: rgba(255, 42, 74, 0.11);
    color: #fff;
  }
  .movie-genre-drop-item.active i { color: #ff4b66; }

  .movie-grid-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .movie-grid-header .movie-grid-back { order: -1; margin-right: auto; }
  /* Movie Home keeps the genre control but has nothing to go back from, so
     the control leads the row instead of hanging off the right edge with an
     empty half-row beside it. */
  .movie-grid-header:not(:has(.movie-grid-back:not([hidden]))) .movie-genre-drop {
    margin-left: 0;
  }
}

/* Five tabs, Bengali labels: the label is what gives first at the narrowest
   widths, never the icon or the touch target. */
@media (max-width: 400px) {
  .movie-tab { font-size: 9.5px; }
  .movie-tab i { font-size: 15px; }
}
@media (max-width: 340px) {
  .movie-tab-label { display: none; }
  .movie-tab i { font-size: 17px; }
}

/* The rail's BROWSE BY GENRE and the toolbar's FILTER BY GENRE are the same
   eight chips on one desktop screen, which was worth questioning - but the
   approved demo carries both deliberately, and taking the toolbar's away
   leaves a bordered strip holding nothing but a Back button. The demo wins:
   both stay. */

/* --------------------------------------------------------------------------
   8. LOAD MORE — the demo's explicit control at the foot of a grid.
   -------------------------------------------------------------------------- */
.movie-load-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 22px 0 8px;
}
.movie-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: #151f33;
  color: #f7f9fc;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.movie-load-more-btn:hover {
  border-color: #ff2a4a;
  background: #18243a;
}
.movie-load-more-btn.loading {
  opacity: 0.6;
  cursor: progress;
}
.movie-load-more-btn.loading i {
  animation: movieLoadSpin 0.8s linear infinite;
}
@keyframes movieLoadSpin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   9. EMPTY STATE — the demo's cinematic treatment.

   The recovery buttons were already there; what was missing was the weight
   that tells a viewer this is an answer, not a blank page.
   -------------------------------------------------------------------------- */
body.movies-section .movie-prompt-msg {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 18px 0;
  padding: 48px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.4) 0%, rgba(10, 15, 23, 0.8) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
}
body.movies-section .movie-prompt-msg i {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 42, 84, 0.3);
  border-radius: 50%;
  background: rgba(255, 42, 84, 0.1);
  box-shadow: 0 0 24px rgba(255, 42, 84, 0.25);
  color: #ff2a4a;
  font-size: 28px;
  animation: movieEmptyPulse 2.5s infinite ease-in-out;
}
body.movies-section .movie-prompt-msg > span {
  max-width: 44ch;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
body.movies-section .movie-prompt-msg .movie-clear-genre {
  margin-top: 18px;
}
@keyframes movieEmptyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 42, 84, 0.2); }
  50% { transform: scale(1.06); box-shadow: 0 0 32px rgba(255, 42, 84, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  body.movies-section .movie-prompt-msg i { animation: none; }
}

/* --------------------------------------------------------------------------
   10. CONTINUE WATCHING — the demo's poster card.

   The progress bar and the time left move onto the artwork, where the demo
   puts them, so the row reads as artwork rather than as a settings list.
   -------------------------------------------------------------------------- */
.movie-continue-card {
  grid-template-columns: 62px minmax(0, 1fr) auto auto !important;
}
.movie-continue-art {
  position: relative;
  width: 62px;
  height: 84px;
  border-radius: 7px;
  overflow: hidden;
  background: #070c14;
}
.movie-continue-art .movie-continue-poster {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.movie-continue-left {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.92);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.movie-continue-left i { color: #38bdf8; font-size: 8px; }
.movie-continue-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 42, 84, 0.92);
  box-shadow: 0 0 16px rgba(255, 42, 84, 0.6);
  color: #fff;
  font-size: 11px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.movie-continue-art .movie-continue-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 4px;
  margin: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.6);
}
.movie-continue-art .movie-continue-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff2a54 0%, #38bdf8 100%);
  box-shadow: 0 0 8px rgba(255, 42, 84, 0.8);
}
@media (max-width: 680px) {
  .movie-continue-card {
    grid-template-columns: 52px minmax(0, 1fr) auto auto !important;
  }
  .movie-continue-art { width: 52px; height: 72px; }
}

/* --------------------------------------------------------------------------
   11. LIVE SEARCH — the demo's predictive drop-down.
   -------------------------------------------------------------------------- */
.movie-search-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2000;
  width: min(380px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  background: rgba(9, 14, 22, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.9);
}
.movie-search-drop[hidden] { display: none !important; }
.movie-search-drop-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: min(60vh, 380px);
  overflow-y: auto;
  padding: 6px;
}
.movie-search-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.movie-search-hit:hover,
.movie-search-hit:focus-visible {
  border-color: rgba(255, 49, 84, 0.35);
  background: rgba(255, 255, 255, 0.05);
}
.movie-search-hit-art {
  flex: 0 0 38px;
  width: 38px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  background: #080c14;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.movie-search-hit-art.placeholder {
  display: grid;
  place-items: center;
  color: #ff2a4a;
  font-size: 13px;
}
.movie-search-hit-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.movie-search-hit-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.movie-search-hit-copy small {
  color: #94a3b8;
  font-size: 11px;
}
.movie-search-hit-kind {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid rgba(255, 49, 84, 0.35);
  border-radius: 4px;
  background: rgba(255, 49, 84, 0.16);
  color: #ff6b82;
  font-size: 9px;
  font-weight: 800;
}
.movie-search-hit-kind.is-series {
  border-color: rgba(139, 92, 246, 0.38);
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}
.movie-search-drop-empty {
  margin: 0;
  padding: 22px 14px;
  color: #94a3b8;
  font-size: 12.5px;
  text-align: center;
}
.movie-search-drop-all {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 10, 16, 0.75);
  color: #ff2a4a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.movie-search-drop-all[hidden] { display: none !important; }
.movie-search-drop-all:hover {
  background: rgba(255, 49, 84, 0.15);
  color: #fff;
}
@media (max-width: 680px) {
  .movie-search-drop {
    right: 0;
    left: 0;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   12. TOUCH TARGETS — the card's own controls on a phone.

   The star sat at 28px with a second control beside it, which is under every
   touch-target guideline. The button keeps its drawn size; the area that
   answers a finger is what grows.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .movie-card .movie-card-bookmark {
    position: relative;
  }
  .movie-card .movie-card-bookmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------------------------------------
   13. SECOND REVIEW — the corrections asked for after the first live pass.
   -------------------------------------------------------------------------- */

/* 13a. The rail's profile card runs the full width of the rail.
   ------------------------------------------------------------
   `.final-sub-nav` centres its children (`align-items: center !important`),
   which the rail's own buttons escape with `width: 100%`. The card had no
   width of its own, so it shrank to its content and sat with 44px of rail
   showing on either side of it - a floating pill where the demo draws a bar
   that lines up with the entries above it. Stretching it is the whole fix -
   the card's own 12px padding is already the rail icons' inset, so at full
   width the avatar and the entry icons land on the same left edge (both at
   38px, measured). */
#desktopSubNav.movie-rail .movie-rail-user {
  align-self: stretch !important;
  width: auto !important;
}

/* 13b. The header's Install button.
   --------------------------------
   Removed at the owner's request. The element and its PWA handler stay in
   place - app.js sets `display: inline-flex` on it inline when the browser
   fires `beforeinstallprompt`, and an inline style is exactly what this
   beats. Deleting the node instead would have thrown in that handler.
   This is the one rule in this sheet that is not scoped to the movie
   section: the header is shared, and the request was for the header. */
#pwaInstallBtn {
  display: none !important;
}

/* 13c. Phone: every section's category chips take the main nav's type.
   --------------------------------------------------------------------
   Live Sports / Live TV / Movies are set in the reference stack at 800
   weight, and the sub-row under them was in a different family at 13.5px /
   600 - two type systems stacked on top of each other. This was scoped to
   the movie section on the first pass; the owner then asked for the same
   across Live TV and Live Sports, so the scope is gone. app.css sets that
   sub-row deliberately, to hold all three to one size - that rule still
   governs the desktop, and this restates only the phone row, matching the
   main nav size for size at each of its breakpoints. Boxes, heights,
   padding and radius are untouched.

   `html body` is not decoration. The rule being answered is
   `body .mobile-sub-navigation .final-sub-button` at (0,2,1) and it carries
   `!important` too, so when the `body.movies-section` scope came off, this
   dropped to (0,2,0) and silently lost - measured live at 13.5px on all
   three tabs. The prefix puts it back above the rule it has to beat. */
@media (max-width: 768px) {
  html body .mobile-sub-navigation .final-sub-button {
    font-family: var(--ref-font) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
  }
}
/* The active chip is set to 700 by a second app.css rule at (0,3,1), so it
   came out a weight lighter than the rest of its own row. */
@media (max-width: 768px) {
  html body .mobile-sub-navigation .final-sub-button.active {
    font-weight: 800 !important;
  }
}
@media (max-width: 420px) {
  html body .mobile-sub-navigation .final-sub-button {
    font-size: 9.5px !important;
  }
}
@media (max-width: 360px) {
  html body .mobile-sub-navigation .final-sub-button {
    font-size: 8.8px !important;
  }
}

/* 13d. The page's scroll handle: hard right, and no reflow when it shows.
   ----------------------------------------------------------------------
   Two separate complaints, one element.

   The handle was not at the edge. app.css already gives the shell's right
   padding back and hands the scroller the centring offset instead, so the
   scroller does reach the window edge - but on a screen wider than the
   1580px cap that offset is real empty page: at 1730 the content column
   stopped at 1637 and 93px of nothing sat between it and the handle. The
   cap is what created that band, so on the movie surfaces the cap goes and
   both sides fall back to the shell's own 18px. The rail does not move on a
   1440 screen, where the offset was already zero.

   The page squeezed when the handle appeared. `scrollbar-width` was `none`
   until `:hover` and `thin` after it, so pointing at the page took ~10px of
   width away from it and every card reflowed. The width is now always
   reserved and only the thumb's colour changes, so nothing moves. */
@media (min-width: 991px) {
  html:not(.movie-playback-context) body.movie-portal .youtube-layout.final-shell:has(.sidebar-section.side-panel),
  html:not(.movie-playback-context) body.movie-detail-view .youtube-layout.final-shell:has(.sidebar-section.side-panel) {
    padding-left: 18px !important;
  }
  html:not(.movie-playback-context) body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area,
  html:not(.movie-playback-context) body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area {
    padding-right: 18px !important;
  }
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area:hover,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area:hover {
  scrollbar-color: #53657f transparent !important;
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area::-webkit-scrollbar,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area::-webkit-scrollbar-thumb,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area:hover::-webkit-scrollbar,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area:hover::-webkit-scrollbar {
  width: 8px !important;
}
body.movie-portal .sidebar-section.side-panel > .sidebar-scroll-area:hover::-webkit-scrollbar-thumb,
body.movie-detail-view .sidebar-section.side-panel > .sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
  background: #53657f !important;
}

/* --------------------------------------------------------------------------
   14. THIRD REVIEW — phone rhythm, the main nav, and the detail page.
   -------------------------------------------------------------------------- */

/* 14a. Phone: the main navigation sits in the middle.
   ---------------------------------------------------
   `.final-main-nav` is a five-column grid and only three buttons are built,
   so Live Sports / Live TV / Movies filled the first three columns and two
   empty columns - 146px of them - sat to their right. The row has no fixed
   number of entries, so it becomes a centred flex row rather than a grid
   with a hard-coded count; add a fourth section tomorrow and it still
   centres. This is the shared header, not the movie section: the owner
   asked for it on every tab. */
@media (max-width: 768px) {
  .mobile-main-navigation .final-main-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .mobile-main-navigation .final-main-button {
    flex: 0 1 98px !important;
  }
}

/* 14b. Phone: the empty space between the chips and the page.
   -----------------------------------------------------------
   23px sat between the category chips and the first thing on the page, and
   the Hero, the shortcut tiles and every row carried desktop spacing on a
   390px screen. Nothing here changes a size or a colour - only the distance
   between blocks, which is what pushed the first row of posters below the
   fold. Movie section only. */
@media (max-width: 768px) {
  body.movies-section .mobile-sub-navigation {
    height: 42px !important;
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }
  body.movies-section .sidebar-section.side-panel {
    margin-top: 0 !important;
  }
  body.movies-section .movie-hero {
    margin-bottom: 12px !important;
  }
  body.movies-section .movie-hero-inner {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  body.movies-section .movie-hero-title {
    margin-bottom: 6px !important;
  }
  body.movies-section .movie-hero-meta {
    margin-bottom: 8px !important;
  }
  body.movies-section .movie-hero-desc {
    margin: 0 0 10px !important;
  }
  body.movies-section .movie-status-strip {
    margin-bottom: 16px !important;
  }
  body.movies-section .movie-row {
    margin-bottom: 16px !important;
  }
  body.movies-section .movie-row-head {
    margin-bottom: 8px !important;
  }
}

/* 14c. The detail page: one container, and the air taken out of it.
   -----------------------------------------------------------------
   The page had four stacked boxes - the nav bar's caption, the hero card,
   a bordered strip holding nothing but "Release Date", then the related row
   - and on a phone that read as clutter rather than structure. The facts
   have moved inside the card (app.js), so this only has to stop the old
   outer rule from drawing a box around them, and set them as a quiet meta
   line at the foot of the card instead.

   `.movie-detail-inner > .movie-detail-facts` in app.css no longer matches
   anything, because the list is no longer a child of the inner wrapper - it
   is left alone rather than deleted, so nothing else that may rely on it
   changes. */
.movie-detail-hero .movie-detail-facts {
  margin: 14px 0 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  background: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 5px 14px !important;
  font-size: 12px !important;
}
.movie-detail-hero .movie-detail-fact {
  display: contents !important;
}
.movie-detail-hero .movie-detail-fact dt {
  color: #7d8ba0 !important;
  font-weight: 700 !important;
}
.movie-detail-hero .movie-detail-fact dd {
  margin: 0 !important;
  color: #e3e9f2 !important;
}

/* The honest line where the server box would have been. */
.movie-detail-nolink {
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 92, 92, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(255, 60, 60, 0.07) !important;
  color: #ffb4b4 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* 14d. Phone: the detail page's own spacing. */
@media (max-width: 768px) {
  body.movie-detail-view .movie-detail-inner {
    padding-top: 0 !important;
  }
  body.movie-detail-view .detail-nav-bar {
    margin-bottom: 10px !important;
  }
  body.movie-detail-view .detail-hero-card {
    margin-bottom: 14px !important;
  }
  body.movie-detail-view .movie-detail-title {
    margin-bottom: 6px !important;
  }
  body.movie-detail-view .movie-detail-meta {
    margin-bottom: 8px !important;
  }
  body.movie-detail-view .movie-detail-genres {
    margin-bottom: 8px !important;
  }
  body.movie-detail-view .movie-detail-plot {
    margin-bottom: 12px !important;
  }
  body.movie-detail-view .movie-detail-actions {
    margin-bottom: 12px !important;
  }
}

/* 14e. The rail's group captions line up with its entries.
   -------------------------------------------------------
   Same cause as the profile card in 13a: `.final-sub-nav` centres its
   children, the entries escape it with `width: 100%`, and the caption - a
   plain block with no width - shrank to its text and sat in the middle of
   the rail with its divider rule shrunk to match. Measured, DISCOVERY &
   PICKS started at 75px while every entry under it started at 26px.

   The demo's `.group-caption` is a left-aligned label flush with the
   entries, so the caption stretches to the rail's width and its own 10px
   padding lands it beside their 9px. The divider then runs the full width,
   which is what it was added to do. */
#desktopSubNav.movie-rail .movie-rail-caption {
  align-self: stretch !important;
  width: auto !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   15. DETAIL PAGE — one container, and the five agreed changes.
   -------------------------------------------------------------------------- */

/* 15a. The page has exactly one box, and it is the title card.
   -----------------------------------------------------------
   `.movie-detail-inner` carried a border, a translucent ground and a 14px
   radius, so the whole page - the Back row, the title card, and You May Also
   Like - sat inside a second box, with an empty strip of it showing above
   the heading. The demo has no such wrapper: the card is the only surface on
   that page. The wrapper stays as the layout element it is and stops drawing
   itself. */
.movie-detail-inner.detail-section-inner,
body.movie-detail-view .movie-detail-inner {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* 15b. The backdrop, which the card was always meant to carry.
   -----------------------------------------------------------
   The image is bound in app.js now that it survives the parser. These are
   the demo's own numbers for the layer: 0.55 opacity, framed right, with the
   card's ground washed back across it left to right so the copy keeps its
   contrast. Only the values the sheet has to state - the element already
   exists and is already positioned. */
.movie-detail-hero .movie-detail-backdrop {
  background-size: cover !important;
  background-position: right 30% !important;
  opacity: 0.5 !important;
}

/* 15c. Suggestion 1 — the poster comes back on a phone.
   ----------------------------------------------------
   Below 820px the poster was set to `display: none`, so the detail page
   opened on a phone with no image at all: a pill, a heading and four rows of
   text. The demo does drop it there, but the demo's card carries its backdrop
   and ours - until 15b - carried nothing.

   It comes back as a float rather than a grid column. A column would take
   its width from everything under it too, and Watch Now, the server box and
   the facts would all have been squeezed into the 230px left over. Floated,
   the pill, the title and the meta set themselves beside the poster and
   everything from the actions down clears it and runs the full width. That
   needs the card's own flex and grid off for the float to be seen at all. */
@media (max-width: 820px) {
  body.movie-detail-view .movie-detail-hero {
    display: block !important;
  }
  body.movie-detail-view .movie-detail-grid {
    display: block !important;
    padding: 14px !important;
  }
  body.movie-detail-view .movie-detail-main {
    display: block !important;
    min-width: 0 !important;
  }
  body.movie-detail-view .movie-detail-poster-wrap {
    display: block !important;
    float: left !important;
    width: 104px !important;
    min-width: 104px !important;
    margin: 0 13px 10px 0 !important;
  }
  body.movie-detail-view .movie-detail-actions,
  body.movie-detail-view .server-card-box,
  body.movie-detail-view .movie-detail-nolink,
  body.movie-detail-view .movie-detail-facts {
    clear: left !important;
  }
}
@media (max-width: 380px) {
  body.movie-detail-view .movie-detail-poster-wrap {
    width: 86px !important;
    min-width: 86px !important;
    margin-right: 11px !important;
  }
}

/* 15d. Suggestion 3 — six competing badges become two.
   ---------------------------------------------------
   The meta row ran `2026 · Hindi · Movie` in plain type and then three
   separate bordered chips in three colours, with a fourth row of genre pills
   under it. Rating and quality are the two that answer a real question -
   is it any good, and how good is the print - so they keep their colour.
   The verification badge says the same thing the green dot in the server box
   says; it stays, as quiet text. Genres lose their boxes and become a line
   of small labels, which is what they are. */
.movie-detail-meta .badge-health {
  border-color: transparent !important;
  background: none !important;
  padding-inline: 0 !important;
  font-weight: 700 !important;
  opacity: 0.85;
}
.movie-detail-genres span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #8ea0b5 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.movie-detail-genres {
  gap: 0 !important;
  column-gap: 0 !important;
}
.movie-detail-genres span + span::before {
  content: '·';
  margin: 0 7px;
  color: #4e5d70;
}

/* 15e. Suggestion 5 — Watch Now is the page, so it looks like it.
   --------------------------------------------------------------
   It and Bookmark were the same size, which is not what they are worth: one
   is why the page exists, the other is a shortcut. On a phone Watch Now
   takes the full width and Bookmark sits under it at half - both still well
   over the 44px a finger needs. */
.movie-detail-play {
  min-height: 46px !important;
  padding-inline: 26px !important;
  font-size: 13.5px !important;
}
.movie-detail-play .fa-circle-notch {
  margin-right: 2px;
}
.movie-detail-play.is-busy {
  opacity: 0.85;
  cursor: progress;
}
@media (max-width: 680px) {
  body.movie-detail-view .movie-detail-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  body.movie-detail-view .movie-detail-play,
  body.movie-detail-view .movie-detail-watchlist {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
  }
}

/* --------------------------------------------------------------------------
   16. QUALITY PILLS ARE LABELS.

   They name the prints this title can be watched in - read from each source's
   own measured height and de-duplicated, so two 1080p links are one entry.
   Nothing here is pressable, and it no longer pretends to be.

   (The TMDB-style arrangement that briefly lived in this section is gone: the
   owner preferred the layout that was here before it, which is back. Only the
   pills stayed.)
   -------------------------------------------------------------------------- */
.movie-detail-hero .server-pill-btn {
  cursor: default !important;
}
.movie-detail-hero .server-pill-btn:hover {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   17. THE FOUR NEW VALUES — synopsis, runtime, credits, trailer.

   Every rule here draws something that is only on the page when the catalogue
   actually holds it. Nothing below reserves space for a value that is missing:
   no synopsis means no paragraph, no cast means no section, no trailer key
   means no button, and the page is exactly what it was before them.
   -------------------------------------------------------------------------- */

/* 17a. The synopsis: three lines, then a control - and only if it is clipped.
   --------------------------------------------------------------------------
   A TMDB overview runs to a full paragraph. Left to itself it pushed Watch
   Now below the fold on a phone, which is the one thing on this page that
   must not move. */
.movie-detail-plot-wrap {
  margin-bottom: 14px;
}
.movie-detail-hero .movie-detail-plot-wrap .movie-detail-plot {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0 !important;
}
.movie-detail-plot-wrap.open .movie-detail-plot {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.movie-plot-more {
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #ff5f78;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.movie-plot-more:hover {
  color: #ff8497;
}

/* 17b. The credits row.
   --------------------
   An open section under the card, the same shape as You May Also Like - no
   box of its own, because the page has one container and it is the title
   card. It scrolls sideways like every other row on the movie surfaces. */
.movie-credits-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.movie-credits-strip::-webkit-scrollbar {
  display: none;
}
.movie-credit {
  flex: 0 0 auto;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.movie-credit-face {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #101927;
}
.movie-credit-face-blank {
  display: grid;
  place-items: center;
  color: #4d5e73;
  font-size: 22px;
}
/* The director is the one name on this row that is not an actor, so it is
   marked rather than left to be read as the first cast member. */
.movie-credit.is-director .movie-credit-face {
  border-color: rgba(255, 49, 84, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 49, 84, 0.12);
}
.movie-credit-name {
  color: #e7eef7;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  /* Two lines, always. Clamped so one long name cannot make the row taller
     than the rest - and RESERVED, so the role under it sits on one baseline
     across the row whether the name took one line or two. This is the
     opposite call from the cards, and deliberately: there the reserved line
     left a hole inside a tall card, here six short items stand side by side
     and a ragged baseline is the thing you see. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}
.movie-credit-role {
  color: #8b9cb0;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-credit.is-director .movie-credit-role {
  color: #ff8497;
}
@media (max-width: 680px) {
  .movie-credits-strip {
    gap: 11px;
  }
  .movie-credit {
    width: 86px;
  }
  .movie-credit-face {
    width: 58px;
    height: 58px;
  }
}

/* 17c. The trailer overlay.
   ------------------------
   A panel over the page, as the owner asked - not a full-screen takeover and
   not a new tab. The frame is created when it opens and destroyed when it
   closes, so nothing of it survives to interfere with the movie player, which
   this sheet still never names.

   It is capped at 900px and at 86% of the viewport height, so on a large
   screen it stays a panel rather than filling the display, and on a phone it
   still leaves the page visible around it. */
.movie-trailer-layer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 12, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: movie-trailer-in 0.16s ease-out;
}
@keyframes movie-trailer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.movie-trailer-panel {
  width: min(900px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: #05090f;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.movie-trailer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #0b111b;
}
.movie-trailer-title {
  color: #eef3f9;
  font-size: 13.5px;
  font-weight: 800;
}
.movie-trailer-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: #dbe4ee;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.movie-trailer-close:hover {
  background: #ff2a4a;
  border-color: #ff2a4a;
  color: #fff;
}
.movie-trailer-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.movie-trailer-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 680px) {
  .movie-trailer-layer {
    padding: 14px;
  }
  .movie-trailer-panel {
    border-radius: 12px;
  }
}
.movie-trailer-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The way out of a video that refuses to be embedded. */
.movie-trailer-open {
  color: #9fb4cb;
  font-size: 11.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.movie-trailer-open:hover {
  color: #fff;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   18. SERIES — the detail card, and episode cards you can actually read.

   The series detail now renders with the movie detail's own class names, so
   everything above this comment already applies to it: one container, the
   backdrop, the poster, the type, the buttons, the phone layout. Only what is
   genuinely series-only is stated here.
   -------------------------------------------------------------------------- */

/* 18a. Episode cards.
   ------------------
   The demo's `.side-episode-card`: a square sequence box, the title, the
   facts under it, and a control on the right. Ours had the right parts at the
   wrong sizes - an 11.5px title over a 9px sub-line inside a 55px-tall
   number box - and the owner could not read it. The type goes up, the number
   box becomes the demo's square, and the card keeps its two-column row. */
.series-episode-card {
  padding: 9px !important;
  gap: 10px !important;
  align-items: center !important;
  /* Three tracks: the sequence box, the copy, the control. Where the card is
     a grid it was declared with two, so the play glyph became a third item
     and wrapped onto a second row under the title. */
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
.series-episode-card .series-episode-number {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
/* A range - E01-07 - needs more room than a single number. */
.series-episode-card .series-episode-number.range {
  width: auto !important;
  min-width: 36px !important;
  padding-inline: 7px !important;
  font-size: 11px !important;
}
.series-episode-card .series-episode-copy strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.series-episode-card .series-episode-copy small {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  color: #92a3b8 !important;
}
/* The control on the right: a play glyph on every card, the now-playing bars
   on the one that is playing. */
.series-episode-icon {
  flex: 0 0 auto;
  margin-left: auto;
  color: #7c8ea6;
  font-size: 15px;
}
.series-episode-card:hover .series-episode-icon {
  color: #e6edf6;
}
.series-episode-icon.is-playing {
  color: #ff2a4a;
}

/* 18b. The episode section under the card.
   ---------------------------------------
   It is a row like any other on these pages - open, no box of its own - so it
   borrows the row header's type and spacing. */
.series-episode-section {
  margin-top: 4px;
}
.series-episode-section .series-season-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.series-episode-section .series-season-strip[hidden] {
  display: none;
}

/* 18c. Phone: the same numbers, one size down. */
@media (max-width: 680px) {
  .series-episode-card .series-episode-copy strong {
    font-size: 12px !important;
  }
  .series-episode-card .series-episode-copy small {
    font-size: 10px !important;
  }
  .series-episode-card .series-episode-number {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
}

/* 18d. The series card's primary action reads like the movie card's.
   -----------------------------------------------------------------
   Start Series / Continue is the same job Watch Now does one page away, and
   the two sat side by side in the same section looking like different kinds
   of control. Only the skin is restated; the button, its class and its
   handler are untouched. */
.series-detail-hero .series-continue-button {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0a0f18 !important;
}
.series-detail-hero .series-continue-button:hover {
  background: #eef2f7 !important;
  border-color: #eef2f7 !important;
}
.series-detail-hero .series-continue-button i {
  color: #0a0f18 !important;
}

/* 18e. The series panel is two things, and the element says which.
   ----------------------------------------------------------------
   Browsing, it is the whole page: the title card and the episodes under it.
   Playing, the same markup lives in the player's side column, where the card
   came out as a cut-off heading over a stack of one-word lines. The demo draws
   only the episode list there, headed "S2 Episodes" with a Back to Series pill.

   `.series-panel-mode` is put on the shell by series.js from its own state.
   This used to key off `movie-playback-context` on <html>, which survives
   playback: play an episode, come back, open another series, and the detail
   page rendered as the player's panel. Nothing here reads a global class now. */
.series-detail-shell.series-panel-mode > .series-detail-hero,
.series-detail-shell.series-panel-mode .series-when-browsing-block {
  display: none !important;
}
/* In the column the shell is the panel's own content, so it keeps none of the
   page's outer spacing. */
.series-detail-shell.series-panel-mode {
  padding: 0 !important;
}
.series-detail-shell.series-panel-mode > .detail-nav-bar {
  margin-bottom: 12px !important;
}

/* 18f. The panel header fits the column it is in.
   -----------------------------------------------
   "S1 Episodes" and the Back pill sat in a row that could not shrink, so on a
   narrow column the pill pushed out past the panel's own edge. The heading
   gives way first - it can ellipsis - and the pill keeps its size, because a
   half-drawn control is worse than a shortened label. */
.series-detail-shell .detail-nav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.series-detail-shell .detail-nav-heading {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.series-detail-shell .series-back-button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* 18g. An episode title is not cut off in a narrow column.
   -------------------------------------------------------
   A range badge - E01-04 - is twice the width of E01, and with the title held
   to one line what was left of a 183px card showed "Episode 0…". In the panel
   the title takes two lines and the sequence badge stops growing, so the range
   and the title both fit. */
.series-detail-shell.series-panel-mode .series-episode-card .series-episode-copy strong {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.22 !important;
}
.series-detail-shell.series-panel-mode .series-episode-card .series-episode-number.range {
  max-width: 54px !important;
  padding-inline: 5px !important;
  font-size: 10px !important;
}
.series-detail-shell.series-panel-mode .series-episode-card {
  gap: 8px !important;
  padding: 8px !important;
}
/* The copy column must be allowed to be narrower than its text. */
.series-episode-card .series-episode-copy {
  min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   19. SERIES CARDS ARE MOVIE CARDS.

   Measured side by side at 1440, a series card in the catalogue was a
   different object from the movie card beside it: 218px tall against 283,
   no padding against 9, a 213x127 letterbox poster against a square one, its
   own background, its own border, its own title size and weight. In the demo
   a series is the same card as a film with one purple ribbon on it, and in a
   mixed row ours read as two designs on one shelf.

   The shell and the poster take the movie card's numbers. Nothing the series
   card carries is removed - the rank, the season badge, the resume button and
   the progress track are all still there, and the resume state is the one
   thing a series card has that a film's does not.
   -------------------------------------------------------------------------- */
.catalog-series-card {
  padding: 9px !important;
  border-radius: 11px !important;
  background: #0d1522 !important;
  border: 1px solid #1a283c !important;
  display: flex !important;
  flex-direction: column !important;
}
.catalog-series-card:hover {
  background: #131f31 !important;
  border-color: #2e4466 !important;
}
.series-catalog-poster {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-bottom: 7px !important;
  background: #070c14 !important;
}
.series-catalog-poster img,
.series-catalog-poster .movie-poster,
.series-catalog-poster .movie-poster-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.catalog-series-card .series-catalog-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 2px !important;
}
.catalog-series-card .series-catalog-copy h3 {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  color: #f1f5f9 !important;
  /* Two lines at most, and only as many as the name needs - the same call the
     movie card's title got. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.catalog-series-card .series-catalog-copy p {
  font-size: 10.4px !important;
  font-weight: 600 !important;
  color: #8495aa !important;
  margin: 0 !important;
}
/* The resume control and its track are what a series has and a film does not.
   They stay - smaller, so they sit inside the card's new proportions. */
.catalog-series-card .series-catalog-continue {
  margin-top: 4px !important;
  min-height: 26px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  border-radius: 6px !important;
}
.catalog-series-card .series-progress-track {
  margin-top: 5px !important;
  height: 3px !important;
}

/* 19a. The series card's height comes from its content, as the film's does.
   ------------------------------------------------------------------------
   reference-design.css pins `.sidebar-list.movie-grid .catalog-series-card` to
   220px, and series.css gives the poster `flex: 1 1 auto` - so the poster was
   whatever was left after the copy, which is how a square became a 213x127
   letterbox. Released from both, the poster takes its 1:1 and the card takes
   the height that follows, which is the film card's 283px beside it.

   `body` on the front only to outweigh the rule being answered; it carries
   `!important` too. */
body .sidebar-list.movie-grid .catalog-series-card,
body .movie-row-strip .catalog-series-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body .catalog-series-card .series-catalog-poster {
  flex: 0 0 auto !important;
}

/* 19b. Nothing is reserved under a series card's name.
   ----------------------------------------------------
   This block used to hold two lines for the name so a row's resume buttons
   lined up. That was the wrong trade and it had already been settled once, on
   the film cards: a one-line name then showed a blank line before
   "1 Season · 8 EP", and a hole in the middle of the copy is what you see.
   The name takes the lines it needs, everything under it follows immediately,
   and what varies is the quiet space at the foot of the card. */
.catalog-series-card .series-catalog-copy h3 {
  min-height: 0 !important;
}

/* ===========================================================================
   20. THE PAGE ONLY DRAWS THE PART YOU ARE LOOKING AT.
   ===========================================================================
   Movie Home is eleven rows of fourteen cards. Two rows fit on a phone, so
   nine of them are drawn, laid out and painted for nobody - every row the
   same 321px whether or not it is anywhere near the screen.

   `content-visibility: auto` lets the browser skip the layout and paint of a
   row while it is off screen and do it when the row comes near. Nothing is
   removed: every row, every card and every image is still in the page, still
   found by Ctrl+F, still reachable by keyboard and by a screen reader, and
   still there the instant it is scrolled to.

   `contain-intrinsic-size: auto <height>` is what keeps that honest. A
   skipped row would otherwise measure zero and the whole list would collapse,
   so it stands in at the height a row really is - measured, not guessed: 321px
   at phone and desktop widths, 305px in the tablet range. `auto` means that
   once a row has been drawn the browser remembers its real height and uses
   that instead, so the scrollbar settles exactly where it belongs.

   Scoped to Home's own rows. The catalogue grid, the detail page, the player
   and every non-movie section are untouched. */
body.movie-portal #movieHomeSections .movie-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 321px;
}
@media (min-width: 701px) and (max-width: 1000px) {
  body.movie-portal #movieHomeSections .movie-row {
    contain-intrinsic-size: auto 305px;
  }
}

/* 20a. VIEW ALL can be hit by a thumb.
   ------------------------------------
   The demo draws this as text rather than a button, and text is what it
   should look like - but it measured 80x25 on a phone, against the 44px
   both Apple and Google ask for. A miss here is not harmless: the row's
   cards sit directly under it, so a thumb that falls short opens a film the
   viewer did not choose.

   The reach is widened with a pseudo-element rather than with padding, so
   the label does not move by a pixel and the row's header keeps its
   spacing. Only the area that answers the tap changes. */
@media (max-width: 1000px) {
  body.movie-portal .movie-row-all {
    position: relative;
    /* The card strip is the next element in the row, so it was painted over
       the reach added below and went on catching the taps that fell short.
       The label is transparent apart from its text, so lifting it changes
       nothing that can be seen. */
    z-index: 2;
  }
  body.movie-portal .movie-row-all::after {
    content: '';
    position: absolute;
    /* 25px tall + 10px above and below = 45px. */
    inset: -10px -8px;
  }
}

/* ===========================================================================
   21. THE DETAIL PAGE STARTS WHERE THE CATEGORY RAIL STARTS.
   ===========================================================================
   "Movie Details" and its Back pill sat 30px below the top of the rail on the
   left, so the page opened with an empty band across it and the two columns
   plainly did not line up. The 30px was two paddings stacked on top of each
   other and neither was doing anything: 14px on the panel, 16px on the shell
   inside it.

   4px is left, which is the difference between a heading that lines up and
   one that looks jammed against the edge. The same shell carries the series
   detail, so both pages are settled by this. */
#movieDetailPanel {
  padding-top: 0 !important;
}
.movie-detail-inner,
.series-detail-shell.movie-detail-inner {
  padding-top: 4px !important;
}

/* 21a. The panel's header sits on the same margin as its episodes.
   ---------------------------------------------------------------
   Playing a series, the shell becomes the player's side column and its own
   padding is dropped so the episode grid can use the full width. The nav row
   went with it: "S3 Episodes" started 1px from the panel's left border and
   the Back to Series pill ended 1px from its right, while the episode cards
   underneath were inset 12px - so the header read as falling out of the box
   it belongs to.

   The inset is put back on the nav row alone, not on the shell, because the
   shell's padding is what the episode grid measures itself against: widening
   that would take 24px off the cards to fix a heading. */
.series-detail-shell.series-panel-mode > .detail-nav-bar {
  padding-left: 12px !important;
  padding-right: 12px !important;
}