/* ==========================================================================
   vxm — Netflix-style info modal for styles/default
   Applies inside the video/series "More Info" modals (.modal.vxm) and on
   the detail pages (movies/{id}, series, live), which opt in via a
   .vxm.vxm-page wrapper + the components' presentation-only `netflix` prop.
   Consumes only existing customizer variables (--vod-*); vodlix.css is
   untouched and loads before this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dialog shell
   -------------------------------------------------------------------------- */
.vxm .modal-dialog.detailsModal {
  max-width: 916px;
  margin: 2rem auto;
}
.vxm .modal-content {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--vod-card-bg);
  box-shadow: var(--vxl-shadow-3);
}
.vxm .close {
  top: 16px;
  right: 16px;
  z-index: 5;
}
/* Bootstrap's .card puts a 4px radius + clip on the inner videoDetails card,
   which trims the hero at a different curve than the 8px modal shell — the
   shell background peeks through the gap at the corners. One clip, one curve:
   the shell's overflow:hidden owns all the rounding. */
.vxm .modal-content .card.videoDetails {
  border-radius: 0;
}

/* Darker, Netflix-weight backdrop — scoped to these modals only; browsers
   without :has() keep Bootstrap's default .5 backdrop */
body:has(.vxm.show) .modal-backdrop.show {
  /* the page's own colour, dimmed — on a light tenant palette a hard black
     scrim would read as a different product */
  background-color: var(--vxl-scrim-solid, #000);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Detail pages (vxm-page) — same treatment as the modal, page-shaped
   -------------------------------------------------------------------------- */
.vxm-page .videoDetails.detail {
  border-radius: 8px;
  overflow: hidden;
}
/* The movie/series detail page nests a SECOND .container (.detailsContainer)
   inside the page .container. Its 15px gutter pushed the card ~15px in from the
   box the close button is positioned against, so the button hugged the right
   edge (only ~5px clearance) while sitting 20px from the top — visibly "too far
   right". The outer .container already supplies the page gutter, so drop the
   redundant inner one: the card fills the width and the close button lands
   symmetrically in its top-right corner. Scoped to the double-container case
   (outer is a .container) so the live detail page — whose single
   .detailsContainer IS its only gutter — is untouched. */
.vxm-page.container > .detailsContainer {
  padding-left: 0;
  padding-right: 0;
}
.vxm-page .insidePadding {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 767.98px) {
  .vxm-page .insidePadding {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   Motion — zoom-in instead of Bootstrap's slide-down
   -------------------------------------------------------------------------- */
/* Asymmetric open/close (transitions.dev modal recipe): the base state is
   the CLOSE path — Bootstrap drops .show on dismiss, so the dialog falls
   back here and shrinks away quick (dur-1). The .show state carries its own
   slower transition, so opening scales up at dur-2. Open slow, close fast. */
.vxm.modal.fade .modal-dialog {
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--vxl-dur-1) var(--vxl-ease), opacity var(--vxl-dur-1) var(--vxl-ease);
  will-change: transform, opacity;
}
.vxm.modal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
  transition: transform var(--vxl-dur-2) var(--vxl-ease), opacity var(--vxl-dur-2) var(--vxl-ease);
}
/* Bootstrap reads hide-duration from the .modal element's transition —
   stretch it so the zoom-out completes before teardown */
.vxm.modal.fade {
  transition: opacity var(--vxl-dur-2) var(--vxl-ease);
}

/* --------------------------------------------------------------------------
   Content padding (description / episodes / More Like This)
   -------------------------------------------------------------------------- */
.vxm .modal-content .insidePadding {
  padding-left: 48px;
  padding-right: 48px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.vxm .detailsThumb {
  overflow: hidden;
}
.vxm .detailsThumb iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Seam-free fade from the hero into the modal background — the editors-pick
   billboard treatment (owner call): a tall, eased melt where the artwork
   stays visible and gently dissolves into the card surface, solid only in
   the last sliver, instead of the old short 30% ramp that read as a band. */
.vxm .videoDetails .innerShade {
  background: linear-gradient(0deg,
    var(--vod-card-bg) 0%,
    var(--vod-card-bg) 6%,
    color-mix(in srgb, var(--vod-card-bg) 60%, transparent) 26%,
    rgba(0, 0, 0, 0) 58%);
}
/* Overlay pinned over the hero (replaces the legacy -8vw pull-up) */
.vxm .detailsThumb .overlapData {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 2;
  padding: 0 48px 20px;
}
.vxm .overlapData > .row {
  margin-bottom: 0 !important;
}
.vxm .overlapData .progress {
  margin-bottom: 6px;
}
/* Continue-watch duration row: the bar shipped inside a col-lg-6 — half the
   row at desktop widths, unpredictable below them (a bare .col-lg-* is just
   a shrink-to-fit flex child under 992px) — with the "Xm remaining" label as
   a loose sibling of the column, so bar and label never shared a width or a
   baseline and the fill could stand taller than its own track. One flex
   line: the col dissolves, the bar fills it, the label trails it. Cinematic's
   own detail-page rules load later and still win where they apply. */
.vxm .vxm-info__progressRow {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin-inline: 0 !important;
}
.vxm .vxm-info__progressRow > [class*="col-"] {
  display: contents;
}
.vxm .vxm-info__progressRow .progress {
  flex: 1 1 auto;
  height: 2px !important;
  margin: 0 !important;
  overflow: hidden;
}
.vxm .vxm-info__progressRow .progress .progress-bar {
  height: 100% !important;
}
.vxm .vxm-info__remaining {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  color: var(--vod-white-color);
  opacity: 0.7;
}

/* Full-width hero column (poster is gone in the modal) */
.vxm .vxm-heroCol {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 !important;
}
/* Hide the phone-only title column; the main videoLogo shows everywhere */
.vxm .overlapData .vxm-heroCol.d-lg-none {
  display: none !important;
}
.vxm .videoLogo.d-none {
  display: block !important;
}
/* Netflix-sized title treatment. The drop-shadow matches the detail-page
   logo treatment (26.379.2): a small tenant logo asset reads on bright
   artwork instead of washing into it. */
.vxm .videoLogo img {
  width: auto;
  max-width: 45%;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}
.vxm .videoLogo h1,
.vxm .videoLogo h2 {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Action buttons
   -------------------------------------------------------------------------- */
/* The action CTAs here are the co-classed .vxl-btn tiers from the detail
   templates (this modal renders those same blocks) — no modal-local button
   paint remains; the retired --vod-modal-playbutton-* pair drove it. */
/* The bordered-disc treatment is retired: every icon action here is
   co-classed .vxl-btn--icon (components.css) — a bare 44px circle with a
   soft hover disc, identical on every layout. Only the ink remains ours. */
.vxm .rundedBtn {
  color: var(--vod-white-color);
}
/* Mute + trailer play/pause hug the right edge of the row, Netflix-style.
   .playPauseModal / .iframePlayPauseSeries cover the modal (and series detail,
   which reuses .iframePlayPauseSeries); .playPausePage is the video DETAIL
   page's mute button — add it so the detail page matches the modal. */
.vxm .playPauseModal,
.vxm .iframePlayPauseSeries,
.vxm .playPausePage {
  margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   Metadata row (rendered below the hero in the modal)
   -------------------------------------------------------------------------- */
.vxm .vxm-meta {
  align-items: center;
  font-size: 14px;
  color: var(--vod-white-color);
}
.vxm .badge-secondary-outline {
  border: 1px solid var(--vxl-line-strong);
  border-color: color-mix(in srgb, var(--vod-white-color) 40%, transparent);
  border-radius: 3px;
  color: var(--vod-white-color);
}
.vxm .insidePadding > .row p {
  font-size: 15px;
  line-height: 1.55;
}
.vxm .text-secondary,
.vxm .grey--text {
  color: var(--vod-grey-text) !important;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Episodes (series modal)
   -------------------------------------------------------------------------- */
/* Header: "Episodes" label LEFT, season picker RIGHT, one row (owner call).
   The heading/picker cols were rendering stacked at 100% each — something
   outside this file forces modal cols full-width — so the two header cells
   are pinned here: label flexes, picker hugs its content. The episode rows
   (.vxm-ep, hoisted into this same flex row via .vxc-epScroll's
   display:contents) are NOT direct children, so the > selectors skip them. */
.vxm .vxm-epList {
  align-items: center;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(1) {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(2) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.vxm .vxm-epList h2 {
  font-weight: 600;
  margin-bottom: 0 !important;
}
.vxm .vxm-epList > [class*="col-"]:nth-child(2) .mb-4 {
  margin-bottom: 0 !important;
}
.vxm .vxm-epList select.form-control {
  display: block;
  width: auto;
  min-width: 200px;
  height: 40px;
  margin-left: auto;
  padding: 0 32px 0 14px;
  background-color: var(--vod-menu-bg);
  color: var(--vod-white-color);
  border: 1px solid var(--vxl-line-strong) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 35%, transparent) !important;
  border-radius: 4px;
}
/* Episode rows: real inner padding so the hover highlight breathes (owner:
   the flush highlight "looks very bad"). Negative inline margins keep the
   row's CONTENT aligned with the heading while the rounded hover surface
   extends a gutter beyond it — the Netflix/HBO list treatment. The width
   bump compensates the negative margins (the row is a flex item at 100%). */
.vxm .vxm-ep {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin: 0 -14px;
  padding: 12px 14px !important;
  border-radius: 10px;
  border-bottom: 0;
  transition: background-color var(--vxl-dur-1) var(--vxl-ease);
}
.vxm .vxm-ep:hover {
  background-color: var(--vxl-surface-1);
  background-color: color-mix(in srgb, var(--vod-white-color) 6%, transparent);
}
/* the separator moves to an inset pseudo-line so the rounded hover surface
   never crosses a full-bleed border */
.vxm .vxm-ep + .vxm-ep {
  position: relative;
}
.vxm .vxm-ep + .vxm-ep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: color-mix(in srgb, var(--vod-white-color) 8%, transparent);
}
.vxm .vxm-ep:hover + .vxm-ep::before,
.vxm .vxm-ep + .vxm-ep:hover::before {
  background: transparent;
}
.vxm .vxm-ep hr {
  display: none;
}
.vxm .vxm-ep .seriesIndex {
  font-size: 20px;
  color: var(--vod-grey-text);
}
.vxm .vxm-ep .listMenu {
  border-radius: 6px;
  overflow: hidden;
}
.vxm .vxm-ep .listMenu .img {
  width: 132px;
  min-width: 132px;
  margin-bottom: 0 !important;
  border-radius: 4px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   More Like This cards
   -------------------------------------------------------------------------- */
.vxm .cardBg {
  /* the CARD surface, not the MENU surface — painting these from
     --vod-menu-bg made the Menu Background control repaint More Like This
     and left Card Background option2 with nothing to do (#5350 items 4+7) */
  background-color: var(--vod-card-bg2) !important;
  border-radius: 6px;
  padding-bottom: 4px;
}
.vxm .cardBg .img {
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  margin-bottom: 0.75rem !important;
}
/* round every layer under the thumb — the ratio placeholder and the image
   itself — so no square backing peeks out at the corners on any tenant */
.vxm .cardBg .img .ratio,
.vxm .cardBg .img .imgFull {
  border-radius: 6px 6px 0 0;
}
.vxm .vxm-ep .listMenu .img .ratio,
.vxm .vxm-ep .listMenu .img img {
  border-radius: 4px;
}
.vxm .cardBg .card-img-overlay span.whiteColor {
  background: var(--vxl-scrim);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
.vxm .cardBg .badge-secondary {
  background-color: transparent;
  border: 1px solid var(--vxl-line-strong);
  border-color: color-mix(in srgb, var(--vod-white-color) 40%, transparent);
  color: var(--vod-white-color);
}
/* description: quieter and smaller so the card reads title-first. Colour
   comes from the derived text token — the markup used to pin it with
   Bootstrap's .text-white-50 literal, which no palette could reach
   (#5350 item 1). */
.vxm .cardBg .vid-description,
.vxm .vxm-ep .listMenu .vid-description {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vod-grey-text);
}

/* --------------------------------------------------------------------------
   About section — keep it mellow (small grey label lines, modest heading)
   -------------------------------------------------------------------------- */
.vxm .insidePadding > h2.h4:has(span) {
  margin-bottom: 10px !important;
  font-size: 1.15rem;
}
.vxm .insidePadding > h2.h4:has(span) span {
  font-weight: 400;
}
.vxm .insidePadding > h2.h4:has(span) span.font-weight-medium {
  font-weight: 600;
}
.vxm .insidePadding > .mb-4 {
  margin-bottom: 12px !important;
  font-size: 13px;
  color: var(--vod-grey-text);
}
.vxm .insidePadding > .mb-4 .badge {
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Mobile — near full-screen sheet
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .vxm .modal-dialog.detailsModal {
    max-width: 100%;
    margin: 0;
    min-height: 100%;
  }
  .vxm .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  .vxm .modal-content .insidePadding {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Overlay back in flow: small heroes can't fit logo + buttons inside */
  .vxm .detailsThumb {
    overflow: visible;
  }
  .vxm .detailsThumb .overlapData {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: -16vw;
    padding: 0 16px 8px;
  }
  .vxm .videoLogo img {
    max-width: 70%;
    max-height: 80px;
  }
  .vxm .detailsIcon {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .vxm .vxm-ep .listMenu .img {
    width: 40%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxm .close {
  right: auto;
  left: 16px;
}
body.rtl .vxm .playPauseModal,
body.rtl .vxm .iframePlayPauseSeries {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.rtl .vxm .vxm-epList select.form-control {
  margin-left: 0;
  margin-right: auto;
  padding: 0 14px 0 32px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxm.modal.fade .modal-dialog {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .vxm.modal.fade {
    transition: none;
  }
  .vxm .vxm-ep {
    transition: none;
  }
}

/* ==========================================================================
   Classic detail PAGE (.vxm-page) — the routed movie/series pages, desktop.
   The modal markup used to render as a centered 1110px card with a close
   button, which reads as a dialog that lost its backdrop, not a page.
   Full-bleed hero with a real scrim (over artwork AND the ambient trailer),
   the DS type scale, a reading measure, and the resume furniture reduced to
   the button's own bottom-edge bar. The info MODAL (.vxm without .vxm-page)
   is untouched, as is cinematic (its own page treatment).
   ========================================================================== */
@media (min-width: 992px) {
  /* full bleed: undo the Bootstrap container pair */
  body[data-layout="classic"] .vxm.vxm-page,
  body[data-layout="classic"] .vxm.vxm-page .detailsContainer {
    /* legacy-override: vodlix.css:1673 pins .detailsContainer to 1440px
       with !important — at wider viewports that left a dead column beside
       the "full-bleed" hero */
    max-width: 100% !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  /* a routed page has nothing to close — on ANY layout. Cinematic hides it
     through its own page treatment; grid and showcase keep the centered-card
     detail but the × still has to go. */
  body[data-layout="classic"] .vxm.vxm-page .series-detail-close,
  body[data-layout="grid"] .vxm.vxm-page .series-detail-close,
  body[data-layout="showcase"] .vxm.vxm-page .series-detail-close {
    display: none;
  }
  /* hero: viewport-wide, height capped so the fold keeps the info in view */
  body[data-layout="classic"] .vxm.vxm-page .detailsThumb {
    max-height: 76vh;
    overflow: hidden;
  }
  body[data-layout="classic"] .vxm.vxm-page .detailsThumb .ratio-16x9 {
    max-height: 76vh;
  }
  body[data-layout="classic"] .vxm.vxm-page .detailsThumb img.imgFull {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* THE scrim — on the cropped box itself, so it covers the artwork and the
     ambient trailer alike. (A gradient on .innerShade dies with the crop:
     that element is the 16:9 ratio height, and its bottom — where the melt
     lives — is exactly the part overflow:hidden removes.) z-index sits above
     the video (auto) and below .overlapData (2). */
  body[data-layout="classic"] .vxm.vxm-page .detailsThumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to top,
        var(--vod-body-back-color, #141414) 0%,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 62%, transparent) 20%,
        transparent 52%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--vod-body-back-color, #141414) 45%, transparent) 0%,
        transparent 16%
      ),
      /* a light flat dim keeps bright ambient trailers behind the UI */
      color-mix(in srgb, var(--vod-body-back-color, #141414) 14%, transparent);
  }
  /* overlay block breathes with the page gutter, not card padding */
  body[data-layout="classic"] .vxm.vxm-page .overlapData {
    padding-left: var(--vxl-gutter, 3%);
    padding-right: var(--vxl-gutter, 3%);
    padding-bottom: 36px;
  }
  /* the title: text takes the DS display scale; a logo image gets real
     presence and a shadow so it reads on bright frames */
  body[data-layout="classic"] .vxm.vxm-page .videoLogo h1,
  body[data-layout="classic"] .vxm.vxm-page .vxm-info__title {
    font-size: clamp(2.5rem, 3.9vw, 3.5rem) !important; /* owner call: step toward cinematic's scale */
    font-weight: 700;
    letter-spacing: var(--vxl-tracking-tight, -0.02em);
    line-height: 1.05;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }
  body[data-layout="classic"] .vxm.vxm-page .overlapData .videoLogo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 160px;
    max-width: 38%;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
  }
  /* resume furniture: the Resume button already wears the DS bottom-edge
     progress — the extra Bootstrap .progress rule above the buttons (red
     fill, floating label) said the same thing twice, worse */
  body[data-layout="classic"] .vxm.vxm-page .vxm-info__progressRow .progress {
    display: none;
  }
  body[data-layout="classic"] .vxm.vxm-page .vxm-info__progressRow {
    margin: 0 0 8px !important;
    width: auto;
  }
  body[data-layout="classic"] .vxm.vxm-page .vxm-info__remaining {
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--vod-white-color, #fff) 72%, transparent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
  /* body content keeps the same gutter rhythm as the rails */
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding {
    padding-left: var(--vxl-gutter, 3%);
    padding-right: var(--vxl-gutter, 3%);
    padding-top: 18px;
  }
  /* meta chips: legible, and visually attached to the description below */
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding .vxm-meta,
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding .d-flex.align-content-center {
    font-size: 13.5px;
    column-gap: 10px;
    margin-bottom: 10px !important;
  }
  /* description: a reading measure, not a column-width slab */
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding > .row p {
    max-width: 68ch;
    font-size: var(--vxl-fs-body, 15.5px);
    line-height: 1.65;
    color: var(--vod-grey-text, #b3b3b3);
  }
  /* section heading ("More Like This") joins the rail-title scale */
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding > h2 {
    font-size: var(--vxl-rail-title-size, clamp(1.15rem, 1.5vw, 1.45rem)) !important;
    font-weight: var(--vxl-rail-title-weight, 600);
    color: var(--vod-white-color, #fff);
    margin-bottom: 16px !important;
  }
  /* related grid: four across at page width — three 450px slabs read heavy */
  body[data-layout="classic"] .vxm.vxm-page .card.videoDetails > .insidePadding > .row.mb-2 > [class*="col-"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
}