/* ==========================================================================
   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: 0 3px 30px rgba(0, 0, 0, 0.75);
}
.vxm .close {
  top: 16px;
  right: 16px;
  z-index: 5;
}

/* 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 {
  background-color: #000;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Detail pages (vxm-page) — same treatment as the modal, page-shaped
   -------------------------------------------------------------------------- */
.vxm-page .videoDetails.detail {
  border-radius: 8px;
  overflow: hidden;
}
.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
   -------------------------------------------------------------------------- */
.vxm.modal.fade .modal-dialog {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.25s ease-out;
}
.vxm.modal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
/* Bootstrap reads hide-duration from the .modal element's transition —
   stretch it so the zoom-out completes before teardown */
.vxm.modal.fade {
  transition: opacity 0.3s 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 */
.vxm .videoDetails .innerShade {
  background: linear-gradient(0deg, var(--vod-card-bg) 0%, rgba(0, 0, 0, 0) 30%);
}
/* 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;
}

/* 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 */
.vxm .videoLogo img {
  width: auto;
  max-width: 45%;
  max-height: 110px;
  object-fit: contain;
}
.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
   -------------------------------------------------------------------------- */
.vxm .playResumeBtn {
  padding: 0.4rem 1.5rem !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  border-radius: 4px;
}
.vxm .playResumeBtn .iconsize {
  font-size: 1.4rem;
}
/* vodlix.css hardcodes a white hover — keep the tenant's customizer color
   in every state and derive the hover shade from it instead */
.vxm .playResumeBtn:hover,
.vxm .playResumeBtn:focus {
  background-color: var(--vod-modal-playbutton-bg) !important;
  border-color: var(--vod-modal-playbutton-bg) !important;
  color: var(--vod-modal-playbutton-text, #000) !important;
  filter: brightness(0.82);
}
.vxm .rundedBtn {
  width: 42px;
  height: 42px;
  background-color: color-mix(in srgb, var(--vod-menu-bg) 60%, transparent) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 60%, transparent) !important;
  color: var(--vod-white-color);
}
/* vodlix.css hardcodes #2a2a2a / white here — tie both to customizer vars */
.vxm .rundedBtn:hover,
.vxm .rundedBtn:active {
  background-color: var(--vod-menu-bg) !important;
  border: 2px solid var(--vod-white-color) !important;
}
/* Mute + trailer play/pause hug the right edge of the row, Netflix-style */
.vxm .playPauseModal,
.vxm .iframePlayPauseSeries {
  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 rgba(255, 255, 255, 0.4);
  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)
   -------------------------------------------------------------------------- */
.vxm .vxm-epList h2 {
  font-weight: 600;
}
.vxm .vxm-epList select.form-control {
  display: block;
  width: auto;
  height: 40px;
  margin-left: auto;
  padding: 0 32px 0 14px;
  background-color: var(--vod-menu-bg);
  color: var(--vod-white-color);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 35%, transparent) !important;
  border-radius: 4px;
}
.vxm .vxm-ep {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  transition: background-color 0.15s ease;
}
.vxm .vxm-ep:hover {
  background-color: rgba(255, 255, 255, 0.04);
  background-color: color-mix(in srgb, var(--vod-white-color) 5%, transparent);
  border-radius: 6px;
}
.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 {
  background-color: var(--vod-menu-bg) !important;
  border-radius: 6px;
  padding-bottom: 4px;
}
.vxm .cardBg .img {
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  margin-bottom: 0.75rem !important;
}
.vxm .cardBg .card-img-overlay span.whiteColor {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
.vxm .cardBg .badge-secondary {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-color: color-mix(in srgb, var(--vod-white-color) 40%, transparent);
  color: var(--vod-white-color);
}

/* --------------------------------------------------------------------------
   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;
  }
}