/* ==========================================================================
   vxc — Netflix-style card hover for styles/default
   Scoped to .videoBlock.vxc (the video.html / series.html card components
   only — relatedVideo cards, live channels, grids are untouched). vodlix.css
   is read-only and loads before this file: its raw-:hover expansion rules
   are neutralized via :not(.vxc-open) guards, and the expansion is re-keyed
   to the Vue-driven .vxc-open class (added after a 400ms hover dwell).
   Consumes only existing customizer variables (--vod-*); hover shades are
   derived from them (color-mix, with rgba fallbacks declared first).
   RTL needs no mirroring here: the transform-origin is computed from
   physical viewport rects in the component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Neutralize the legacy raw-:hover expansion during the dwell window
   -------------------------------------------------------------------------- */
.videoBlock.vxc:not(.vxc-open):hover,
.videoBlock.vxc:not(.vxc-open):active,
.videoBlock.vxc.hoverOnVideo:not(.vxc-open):hover,
.videoBlock.vxc.hoverOnVideo:not(.vxc-open):active {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 99;
}
.videoBlock.vxc:not(.vxc-open):hover .videoInfo,
.videoBlock.vxc:not(.vxc-open):active .videoInfo,
.videoBlock.vxc.hoverOnVideo:not(.vxc-open):hover .videoInfo,
.videoBlock.vxc.hoverOnVideo:not(.vxc-open):active .videoInfo {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
/* top-10 rows: vodlix widens the card 72% -> 100% on raw :hover */
.swiper-slide.slideBlock.relative.top-10-list .videoBlock.vxc:not(.vxc-open):hover,
.swiper-slide.slideBlock.relative.top-10-list .videoBlock.vxc:not(.vxc-open):active {
  width: auto !important;
}
.swiper-slide.slideBlock.relative.top-10-list .videoBlock.vxc.vxc-open {
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   portrait ratio — the platform's portrait art standard is 9:16 (the admin
   uploader asks for "9:16 e.g. 1080 x 1920" and the thumb pipeline preserves
   it: a generated "320x480" file is really 270x480). vodlix.css renders the
   box at 2:3 (padding 150%), silently cropping ~15% off every poster. Rails
   and cards now use the true 9:16 box.
   -------------------------------------------------------------------------- */
.swiper-slide.slideBlock .ratio.portrait,
.videoBlock .ratio.portrait {
  padding-top: 177.78% !important;
}

/* --------------------------------------------------------------------------
   top-10 geometry — slide height locked to the card's true aspect ratio.
   vodlix.css carries hand-tuned values (112%/130% portrait, none for
   landscape, a 95% thumb box) that never matched the poster, so the number
   art, the card and the hover panel all drifted. The card is 55% of the
   slide in portrait rails and 72% in landscape rails (vodlix.css
   .videoBlockDiv), so:
     portrait:  55% * 3/2  = 82.5% slide padding
     landscape: 72% * 9/16 = 40.5% slide padding
   -------------------------------------------------------------------------- */
/* vodlix pads the slide 75px left, which makes the static spacer resolve
   %-padding against a narrower box than the absolutely-positioned card —
   the root of the height mismatch. The number art is absolute (left %),
   so the padding does nothing but skew the math. */
.swiper-slide.slideBlock.relative.top-10-list {
  padding-left: 0 !important;
}
.swiper-slide.slideBlock.relative.top-10-list .top10-index-portrait + .ratio.portrait {
  /* 55% card width x 16/9 vertical */
  padding-top: 97.78% !important;
}
.swiper-slide.slideBlock.relative.top-10-list .top10-index-landscape + .ratio.ratio-16x9 {
  padding-top: 40.5% !important;
}
/* number art, Netflix alignment: bottom-anchored and pressed against the
   poster's left edge (tucked 6px underneath it — the card layer sits above),
   so any spare room falls BEFORE the numeral, not between numeral and card.
   Anchored via `right` to the card's known width (55% portrait / 72%
   landscape). :nth-child(n) outguns vodlix's per-digit left nudges. */
.swiper-slide.slideBlock.relative.top-10-list:nth-child(n) .top10-index-portrait,
.swiper-slide.slideBlock.relative.top-10-list:nth-child(n) .top10-index-landscape {
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
  height: 85% !important;
}
.swiper-slide.slideBlock.relative.top-10-list:nth-child(n) .top10-index-portrait {
  left: auto !important;
  right: calc(55% - 6px);
}
.swiper-slide.slideBlock.relative.top-10-list:nth-child(n) .top10-index-landscape {
  left: auto !important;
  right: calc(72% - 6px);
}
/* the numeral <img> is absolutely positioned inside a zero-width span —
   anchor it to the span's right so it extends AWAY from the card */
.swiper-slide.slideBlock.relative.top-10-list .top10-image-portrait,
.swiper-slide.slideBlock.relative.top-10-list .top10-image-landscape {
  left: auto !important;
  right: 0 !important;
}
/* poster: vx corner radius + a solid dark fallback when a title has no
   matching art (live items without portrait stills read as a calm card,
   not a transparent hole) */
.swiper-slide.slideBlock.relative.top-10-list .videoBlock {
  border-radius: 6px;
}
.swiper-slide.slideBlock.relative.top-10-list .videoBlock .res-img {
  border-radius: 6px;
  background-color: #1e1e1e;
  background-color: var(--vod-menu-bg, #1e1e1e);
}
/* top-10 hover: the preview flips to landscape at normal card size — the
   Netflix pattern (portrait boxart at rest, 16:9 panel on hover). The
   component swaps the thumb + ratio classes; here the card container takes
   the full slide so the panel isn't clamped to the 55%/72% rest width. */
.swiper-slide.slideBlock.relative.top-10-list:has(.videoBlock.vxc-open) .videoBlockDiv,
.swiper-slide.slideBlock.relative.top-10-list:has(.videoBlock.hoverOnVideo) .videoBlockDiv {
  width: 100% !important;
}
.swiper-slide.slideBlock.relative.top-10-list .videoBlock .ratio.vxc-flip,
.swiper-slide.slideBlock.relative.top-10-list .videoBlock .ratio.top10.portrait.vxc-flip {
  padding-top: 56.25% !important;
}
/* hover hit-area keeper: the portrait->landscape flip shrinks the card's
   layout box, so a cursor resting on the lower half of the poster suddenly
   falls OUTSIDE the card -> mouseleave -> flip back -> mouseenter -> loop
   (visible as stutter). An invisible child keeps the original 2:3 footprint
   hoverable while the flip is open; z-index -1 keeps it behind the panel so
   the buttons stay clickable. */
.videoBlock:has(.ratio.vxc-flip) {
  overflow: visible;
}
.videoBlock:has(.ratio.vxc-flip)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
  z-index: -1;
}
/* the card's own thumb box is a true 9:16 — vodlix squashes it to 95% */
.swiper-slide.slideBlock.relative.top-10-list .videoBlock .ratio.top10.portrait {
  padding-top: 177.78% !important;
}
/* ...and a true 16:9 when the rail is landscape */
.swiper-slide.slideBlock.relative.top-10-list .videoBlock .ratio.top10.ratio-16x9 {
  padding-top: 56.25% !important;
}
/* hover-panel controls: same 32px buttons as every other rail (vodlix
   shrinks them to 1.3–1.7rem inside top-10, which crushes the icons) */
.swiper-slide.slideBlock.top-10-list .boxBtn {
  width: 32px !important;
  height: 32px !important;
}
.swiper-slide.slideBlock.top-10-list .boxBtn.playBtn2 i {
  font-size: 26px !important;
}
.swiper-slide.slideBlock.top-10-list .boxBtn i {
  font-size: 20px !important;
}
.swiper-slide.slideBlock.top-10-list .boxBtn i.more {
  font-size: 24px !important;
}
.swiper-slide.slideBlock.top-10-list .videoInfo .caption2 {
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   vxs — skeleton loading states (shimmer placeholders shaped like content;
   replaces the Bootstrap spinner on content surfaces)
   -------------------------------------------------------------------------- */
.vxs-tile,
.vxs-line,
.vxs-avatar,
.vxs-player {
  position: relative;
  overflow: hidden;
  background-color: var(--vod-menu-bg);
  border-radius: 6px;
}
.vxs-tile::after,
.vxs-line::after,
.vxs-avatar::after,
.vxs-player::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vod-white-color) 7%, transparent), transparent);
  animation: vxs-shimmer 1.4s ease-in-out infinite;
}
@keyframes vxs-shimmer {
  to {
    transform: translateX(100%);
  }
}
.vxs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.vxs-tile {
  aspect-ratio: 16 / 9;
}
.vxs-line {
  display: block;
  height: 14px;
  border-radius: 7px;
}
.vxs-player {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.vxs-chrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
/* skeleton column on pages whose row has no right padding (live) */
.vxs-side {
  padding-inline-end: 40px;
}
.vxs-avatar {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
}
.vxs-chrow .vxs-line {
  flex: 1;
}
.vxs-bars .vxs-line {
  margin-bottom: 12px;
}
.vxs-bars {
  padding-inline-end: 26px;
}
@media (prefers-reduced-motion: reduce) {
  .vxs-tile::after,
  .vxs-line::after,
  .vxs-avatar::after,
  .vxs-player::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Row headings — Netflix-size category titles above the card rows
   -------------------------------------------------------------------------- */
.swiperHolder .swiperTitle,
.hoverBlock h2.h5 {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 600;
  color: var(--vod-white-color);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.videoBlock.vxc {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.25s ease;
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.25s ease;
}

/* --------------------------------------------------------------------------
   Expanded card
   -------------------------------------------------------------------------- */
.videoBlock.vxc.vxc-open {
  z-index: 100;
  -webkit-transform: scale(1.35);
  transform: scale(1.35);
  width: inherit;
  border-radius: 6px;
  background-color: var(--vod-card-bg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 14px 40px rgba(0, 0, 0, 0.55);
}
.videoBlock.vxc.vxc-open .card {
  border-radius: 6px 6px 0 0;
}
/* seam-free fade from the preview into the panel (mirrors the vxm hero) */
.videoBlock.vxc.vxc-open .card-img-overlay.boxShadow {
  background: linear-gradient(0deg, var(--vod-card-bg) 0%, rgba(0, 0, 0, 0) 22%);
}

/* --------------------------------------------------------------------------
   Info panel
   -------------------------------------------------------------------------- */
.videoBlock.vxc.vxc-open .videoInfo {
  position: relative;
  bottom: 0;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  padding: 10px 12px 12px !important;
  background-color: var(--vod-card-bg);
  border-radius: 0 0 6px 6px;
  animation: vxc-panel-in 0.25s ease;
}
@keyframes vxc-panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.videoBlock.vxc .cardActions {
  align-items: center;
}

/* Buttons — var-driven incl. hover (vodlix hardcodes greys) */
.videoBlock.vxc .boxBtn {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-color: color-mix(in srgb, var(--vod-white-color) 45%, transparent);
  background-color: rgba(30, 30, 30, 0.6);
  background-color: color-mix(in srgb, var(--vod-menu-bg) 60%, transparent);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.videoBlock.vxc .boxBtn:hover,
.videoBlock.vxc .boxBtn:active {
  border-color: var(--vod-white-color);
  background-color: rgba(30, 30, 30, 0.9);
  background-color: color-mix(in srgb, var(--vod-menu-bg) 90%, transparent);
}
.videoBlock.vxc .boxBtn.playBtn2 {
  background-color: var(--vod-white-color);
  border-color: var(--vod-white-color);
}
.videoBlock.vxc .boxBtn.playBtn2:hover,
.videoBlock.vxc .boxBtn.playBtn2:active {
  background-color: rgba(255, 255, 255, 0.85);
  background-color: color-mix(in srgb, var(--vod-white-color) 85%, transparent);
  border-color: color-mix(in srgb, var(--vod-white-color) 85%, transparent);
}

/* Meta row — replace hardcoded #8A8A8A / #D2D2D2 */
.videoBlock.vxc .maturityTextBadge {
  border-color: rgba(255, 255, 255, 0.45);
  border-color: color-mix(in srgb, var(--vod-white-color) 45%, transparent);
  color: rgba(255, 255, 255, 0.8);
  color: color-mix(in srgb, var(--vod-white-color) 80%, transparent);
}
.videoBlock.vxc .videoInfo .textColor {
  color: var(--vod-grey-text) !important;
}
.videoBlock.vxc .vxc-live {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--vod-white-color);
  background-color: var(--vod-primary);
}

/* Continue-watch progress — keep it in the expanded card, themed
   (vodlix hides it on .hoverOnVideo:hover) */
.videoBlock.vxc.hoverOnVideo:hover .progress,
.videoBlock.vxc.hoverOnVideo:active .progress {
  display: flex;
  margin: 0 12px 10px !important;
  background-color: rgba(255, 255, 255, 0.25);
  background-color: color-mix(in srgb, var(--vod-white-color) 25%, transparent);
}
.videoBlock.vxc .progress .progress-bar.bg-danger {
  background-color: var(--vod-primary) !important;
}

/* --------------------------------------------------------------------------
   Portrait rows — vodlix keeps them unscaled (!important); style the
   floating panel consistently
   -------------------------------------------------------------------------- */
.videoBlock.vxc.portraitBlock.vxc-open {
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Mobile — defense in depth (enter() already early-returns on mobile)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .videoBlock.vxc.vxc-open {
    -webkit-transform: none !important;
    transform: none !important;
    box-shadow: none;
  }
  .videoBlock.vxc.vxc-open .videoInfo {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — no transitions/animations; the dwell delay stays
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .videoBlock.vxc,
  .videoBlock.vxc .boxBtn {
    transition: none;
  }
  .videoBlock.vxc.vxc-open .videoInfo {
    animation: none;
  }
}

/* ==========================================================================
   vxr — Netflix-style reaction control
   A single collapsed thumb showing the current rating; on hover it reveals a
   floating pill with "Not for me" (dislike) + "I like this" (like), each with
   a label bubble. Used by the likeVideo component in the info modal, the
   detail pages and the hover cards. Consumes only --vod-* customizer vars.
   ========================================================================== */
.vxr {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.vxr__trigger {
  transition: opacity 0.12s ease;
}
/* hide the collapsed trigger once the pill takes over (it still holds layout) */
.vxr:hover .vxr__trigger {
  opacity: 0;
}
/* floating reaction pill — anchored to the trigger's right so the like stays
   in place and dislike expands to the left; absolute so it never shifts the row */
.vxr__pop {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(0.9);
  transform-origin: right center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  /* opaque-by-construction dark pill regardless of tenant alpha */
  background:
    linear-gradient(color-mix(in srgb, var(--vod-menu-bg) 92%, #000), color-mix(in srgb, var(--vod-menu-bg) 92%, #000)),
    #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 40;
}
.vxr:hover .vxr__pop {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.vxr__optBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.vxr__optBtn .mdi {
  font-size: 20px;
  line-height: 1;
}
.vxr__optBtn:hover {
  background-color: rgba(255, 255, 255, 0.16);
  background-color: color-mix(in srgb, var(--vod-white-color) 16%, transparent);
  transform: scale(1.08);
}
.vxr__optBtn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* label bubble + caret above each reaction, on its own hover (Netflix white tag) */
.vxr__optBtn::after {
  content: attr(data-vxr-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.vxr__optBtn::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.vxr__optBtn:hover::after,
.vxr__optBtn:hover::before {
  opacity: 1;
}
/* RTL — mirror the anchor so dislike expands right, like stays put */
body.rtl .vxr__pop {
  right: auto;
  left: 0;
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .vxr__trigger,
  .vxr__pop,
  .vxr__optBtn,
  .vxr__optBtn::after,
  .vxr__optBtn::before {
    transition: none;
  }
}