/* =========================================================
   MUVI / GARNET — CUSTOM OVERRIDES (CLEAN MASTER v2.1)
   (Your current file + additions; NO functionality removed.)
   ========================================================= */

/* =========================
   Core variables
   ========================= */
:root{
  --brand: #3fb499;

  /* Used by header shrink block */
  --logo-h-normal: 62px;
  --logo-h-shrink: 40px;

  /* Used by avatar/pagination/site-wide accent blocks */
  --icr-brand:#3fb499;
  --icr-accent: #3FB499;
  --icr-accent-hover: #359F87;

  /* Muvi “primary” variables used across templates */
  --iq-primary: var(--icr-accent) !important;
  --iq-primary-hover: var(--icr-accent-hover) !important;
  --iq-primary-dark: var(--icr-accent-hover) !important;
}

/* ===== FREE badge ===== */
.free,
.free-label,
.free-tag,
.freeContent-tag,
[class*="free"],
[class*="Free"]{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.free span,
.free-label span,
.free-tag span,
.freeContent-tag span,
[class*="free"] span,
[class*="Free"] span{
  color: #fff !important;
}

/* ===== PLAY / PLAY ALL buttons ===== */
.play-now,
.play-all,
.btn-primary,
.muvi-btn,
a.callByAjax.ctaBtnwatch,
a[class*="play"],
button[class*="play"],
a[class*="Play"],
button[class*="Play"]{
  background-color: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.play-now *,
.play-all *,
.btn-primary *,
.muvi-btn *,
a.callByAjax.ctaBtnwatch *{
  color: #fff !important;
}
.play-now:hover,
.play-all:hover,
.btn-primary:hover,
.muvi-btn:hover,
a.callByAjax.ctaBtnwatch:hover,
.play-now:focus,
.play-all:focus,
.btn-primary:focus,
.muvi-btn:focus,
a.callByAjax.ctaBtnwatch:focus{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* ===== SEE ALL (text white -> brand on hover) + arrow brand ===== */
/* Arrow: only when inside a LINK (<a>) */
a svg path[fill="#bf000a"],
a svg path[stroke="#bf000a"],
a svg path[fill="#BF000A"],
a svg path[stroke="#BF000A"]{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* Text for links that contain that hard-coded arrow (modern browsers) */
a:has(svg path[fill="#bf000a"]),
a:has(svg path[stroke="#bf000a"]),
a:has(svg path[fill="#BF000A"]),
a:has(svg path[stroke="#BF000A"]){
  color: #fff !important;
  text-decoration: none !important;
}
a:has(svg path[fill="#bf000a"]):hover,
a:has(svg path[stroke="#bf000a"]):hover,
a:has(svg path[fill="#BF000A"]):hover,
a:has(svg path[stroke="#BF000A"]):hover{
  color: var(--brand) !important;
}

/* Fallback if :has() is not supported + for classed See All wrappers */
.seeAll a,
.see-all a,
.viewAll a,
.view-all a,
a.seeAll,
a.see-all,
a.viewAll,
a.view-all{
  color: #fff !important;
  text-decoration: none !important;
}
.seeAll a:hover,
.see-all a:hover,
.viewAll a:hover,
.view-all a:hover,
a.seeAll:hover,
a.see-all:hover,
a.viewAll:hover,
a.view-all:hover{
  color: var(--brand) !important;
}

/* ===== NAV active item ===== */
a.nav-link.activeClass{
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  box-shadow: inset 0 -2px 0 var(--brand) !important;
}
a.nav-link.activeClass::after{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* ===== NAV dropdown caret (submenuOpen) ===== */
svg.submenuOpen path,
svg.submenuOpen path[stroke]{
  stroke: var(--brand) !important;
}

/* ===== TOP NAV dropdown (e.g., Podcasts) ===== */
a.nav-link.menuSubmenu{
  color: #fff !important;
}
a.nav-link.menuSubmenu:hover,
a.nav-link.menuSubmenu:focus{
  color: var(--brand) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
li.show > a.nav-link.menuSubmenu,
li.open > a.nav-link.menuSubmenu,
.dropdown.show > a.nav-link.menuSubmenu{
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  box-shadow: inset 0 -2px 0 var(--brand) !important;
}
li.show > a.nav-link.menuSubmenu::after,
li.open > a.nav-link.menuSubmenu::after,
.dropdown.show > a.nav-link.menuSubmenu::after{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* ===== DETAIL PAGE HERO (NO STRETCH / NO SQUISH) ===== */
.details-banner,
.contentDetails .banner,
.content-detail .banner{
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 21 / 9 !important;
  min-height: 280px !important;
  max-height: 560px !important;
  height: auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.details-banner img,
.details-banner video,
.contentDetails .banner img,
.contentDetails .banner video,
.content-detail .banner img,
.content-detail .banner video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
@media (max-width: 1100px){
  .details-banner,
  .contentDetails .banner,
  .content-detail .banner{
    aspect-ratio: 16 / 9 !important;
    min-height: 260px !important;
    max-height: 520px !important;
    background-position: center top !important;
  }
  .details-banner img,
  .details-banner video,
  .contentDetails .banner img,
  .contentDetails .banner video,
  .content-detail .banner img,
  .content-detail .banner video{
    object-position: center top !important;
  }
}
@media (max-width: 768px){
  .details-banner,
  .contentDetails .banner,
  .content-detail .banner{
    aspect-ratio: 4 / 3 !important;
    min-height: 240px !important;
    max-height: 420px !important;
  }
}

/* =========================================================
   SEE ALL — ARROW TURNED RED AGAIN (STRONG OVERRIDE v3.1)
   FIXED: removed global a:hover svg path (too broad)
   ========================================================= */

/* If your See All wrapper uses any of these common classes */
.seeAll svg,
.seeAll svg *,
.see-all svg,
.see-all svg *,
.viewAll svg,
.viewAll svg *,
.view-all svg,
.view-all svg *,
a.seeAll svg,
a.seeAll svg *,
a.see-all svg,
a.see-all svg *,
a.viewAll svg,
a.viewAll svg *,
a.view-all svg,
a.view-all svg *{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* If the arrow is hard-coded red */
.seeAll a svg path[fill="#bf000a"],
.seeAll a svg path[stroke="#bf000a"],
.see-all a svg path[fill="#bf000a"],
.see-all a svg path[stroke="#bf000a"],
.viewAll a svg path[fill="#bf000a"],
.viewAll a svg path[stroke="#bf000a"],
.view-all a svg path[fill="#bf000a"],
.view-all a svg path[stroke="#bf000a"],
.seeAll a svg path[fill="#BF000A"],
.seeAll a svg path[stroke="#BF000A"],
.see-all a svg path[fill="#BF000A"],
.see-all a svg path[stroke="#BF000A"],
.viewAll a svg path[fill="#BF000A"],
.viewAll a svg path[stroke="#BF000A"],
.view-all a svg path[fill="#BF000A"],
.view-all a svg path[stroke="#BF000A"]{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* Scoped hover override ONLY for See All / View All */
.seeAll a:hover svg path,
.seeAll a:focus svg path,
.see-all a:hover svg path,
.see-all a:focus svg path,
.viewAll a:hover svg path,
.viewAll a:focus svg path,
.view-all a:hover svg path,
.view-all a:focus svg path,
a.seeAll:hover svg path,
a.seeAll:focus svg path,
a.see-all:hover svg path,
a.see-all:focus svg path,
a.viewAll:hover svg path,
a.viewAll:focus svg path,
a.view-all:hover svg path,
a.view-all:focus svg path{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* If the SVG uses currentColor, make sure the arrow still stays brand */
.seeAll a svg,
.seeAll a svg *,
.see-all a svg,
.see-all a svg *,
.viewAll a svg,
.viewAll a svg *,
.view-all a svg,
.view-all a svg *{
  color: var(--brand) !important;
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* =========================================================
   HEADER SHRINK FIX — LOGO STAYS INSIDE COLLAPSED HEADER
   ========================================================= */
header,
.navbar,
.site-header,
.header,
.vd_header,
.vdHeader,
#header{
  transition: padding 160ms ease, height 160ms ease, min-height 160ms ease;
}

/* Default logo sizing (pre-scroll) */
header img,
header .logo img,
header .navbar-brand img,
header a.navbar-brand img,
header a.logo img,
#header img,
#header .logo img,
.navbar-brand img{
  height: var(--logo-h-normal) !important;
  width: auto !important;
  max-height: var(--logo-h-normal) !important;
  object-fit: contain !important;
  display: block !important;
}

/* Keep logo from overflowing its container */
header .logo,
header .navbar-brand,
#header .logo,
#header .navbar-brand,
.navbar-brand{
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Shrunk header states */
header.sticky img,
header.is-sticky img,
header.header-sticky img,
header.shrink img,
header.small-header img,
header.fixed img,
header.sticky .navbar-brand img,
header.is-sticky .navbar-brand img,
header.header-sticky .navbar-brand img,
header.shrink .navbar-brand img,
header.small-header .navbar-brand img,
header.fixed .navbar-brand img,
.navbar.fixed-top img,
.navbar.sticky-top img,
.navbar.is-sticky img,
.navbar.shrink img,
.navbar.small-header img,
body.scrolled header img,
body.sticky header img,
body.header-fixed header img,
html.scrolled header img{
  height: var(--logo-h-shrink) !important;
  max-height: var(--logo-h-shrink) !important;
}

/* Safety: ensure centering in shrink states */
header.sticky,
header.is-sticky,
header.header-sticky,
header.shrink,
header.small-header,
.navbar.fixed-top,
.navbar.sticky-top,
body.scrolled header{
  display: flex;
  align-items: center;
}

/* =========================================================
   OTHER RED BUTTONS (DETAIL / POST-HOME PAGES)
   ========================================================= */
.btn-danger,
.btn-red,
.btn-theme,
.theme-btn,
.redBtn,
a.btn-danger,
button.btn-danger,
a.btn-red,
button.btn-red{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  text-decoration: none !important;
}
.btn-danger:hover,
.btn-red:hover,
.btn-theme:hover,
.theme-btn:hover,
.redBtn:hover,
.btn-danger:focus,
.btn-red:focus,
.btn-theme:focus,
.theme-btn:focus,
.redBtn:focus{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* If Muvi sets the red via inline styles or hard-coded values */
button[style*="#bf000a"],
a[style*="#bf000a"],
button[style*="#BF000A"],
a[style*="#BF000A"],
button[style*="rgb(191, 0, 10)"],
a[style*="rgb(191, 0, 10)"]{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Catch inline background/border set to theme red */
*[style*="background:#bf000a"],
*[style*="background: #bf000a"],
*[style*="background-color:#bf000a"],
*[style*="background-color: #bf000a"],
*[style*="background:#BF000A"],
*[style*="background: #BF000A"],
*[style*="background-color:#BF000A"],
*[style*="background-color: #BF000A"],
*[style*="border-color:#bf000a"],
*[style*="border-color: #bf000a"],
*[style*="border-color:#BF000A"],
*[style*="border-color: #BF000A"]{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* If the red is applied to pseudo elements */
.btn-danger::before,
.btn-danger::after,
.btn-red::before,
.btn-red::after,
.btn-theme::before,
.btn-theme::after,
.theme-btn::before,
.theme-btn::after{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* =========================================================
   BUTTONS: Force ALL primary/action buttons to brand color
   ========================================================= */
a.button,
a.button.watch-now,
a.button.watch-now:link,
a.button.watch-now:visited{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  text-decoration: none !important;
}

a[vd-node="dynButton"],
a[vd-node="button"],
a[vd-node="dynButton"]:link,
a[vd-node="button"]:link,
a[vd-node="dynButton"]:visited,
a[vd-node="button"]:visited{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
a.button i,
a[vd-node="dynButton"] i,
a[vd-node="button"] i{
  color: #fff !important;
}
a.button:hover,
a.button:focus,
a.button:active,
a[vd-node="dynButton"]:hover,
a[vd-node="dynButton"]:focus,
a[vd-node="dynButton"]:active,
a[vd-node="button"]:hover,
a[vd-node="button"]:focus,
a[vd-node="button"]:active{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  text-decoration: none !important;
}
a.button::before,
a.button::after,
a[vd-node="dynButton"]::before,
a[vd-node="dynButton"]::after,
a[vd-node="button"]::before,
a[vd-node="button"]::after{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* =========================================================
   Tooltips + "Add to Favorites" visual replacement
   ========================================================= */
.tooltip .tooltip-inner{
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Bootstrap 4 arrows */
.bs-tooltip-top .arrow::before,
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-left .arrow::before,
.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-right .arrow::before{
  border-top-color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  border-left-color: var(--brand) !important;
  border-right-color: var(--brand) !important;
}

/* Bootstrap 5 arrow */
.tooltip .tooltip-arrow::before{
  border-top-color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  border-left-color: var(--brand) !important;
  border-right-color: var(--brand) !important;
}

/* Simple tooltip container fallback */
.add-to-favourite,
.add-to-favorite,
.favourite-tooltip,
.favorite-tooltip,
[class*="favour"] .tooltip-inner,
[class*="favor"] .tooltip-inner{
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Popover fallback */
.popover,
.popover .popover-body,
.popover .popover-header{
  border-color: var(--brand) !important;
}
.popover .popover-header{
  background-color: var(--brand) !important;
  color: #fff !important;
}
.popover .popover-body{
  background-color: var(--brand) !important;
  color: #fff !important;
}
.popover .arrow::before,
.popover .arrow::after{
  border-top-color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  border-left-color: var(--brand) !important;
  border-right-color: var(--brand) !important;
}

/* Visual text replace */
.tooltip .tooltip-inner{
  font-size: 0 !important;
  line-height: 0 !important;
}
.tooltip .tooltip-inner::before{
  content: "Add to Favorites";
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  display: inline-block;
}

/* =========================================================
   Header Avatar Fix (top-right)
   ========================================================= */
#navbar,
header#navbar{
  line-height: normal;
}

#navbar .profileImages,
#navbar img.profileImages,
#navbar img[alt="Profile Image"],
#navbar .mpmb-profile-img{
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  border-radius: 50% !important;
}

/* Remove legacy ring */
#navbar img.profileImages{
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Wrapper nukes */
#navbar .profileImg,
#navbar .profile-img,
#navbar .profile-img-wrapper,
#navbar .profileImage,
#navbar .profile-image,
#navbar .userProfile,
#navbar .user-profile,
#navbar .userprofile,
#navbar .profileDropdown,
#navbar .profile-dropdown{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure clean fill */
#navbar img.profileImages,
#navbar img[alt="Profile Image"],
#navbar .mpmb-profile-img{
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 3px solid var(--icr-brand) !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* Center if inside a link/button */
#navbar a,
#navbar button{
  align-items: center;
}

/* Chrome :has() wrapper cleanup */
#navbar a:has(img.profileImages),
#navbar button:has(img.profileImages),
#navbar div:has(img.profileImages),
#navbar span:has(img.profileImages){
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#navbar a:has(img.profileImages)::before,
#navbar a:has(img.profileImages)::after,
#navbar button:has(img.profileImages)::before,
#navbar button:has(img.profileImages)::after,
#navbar div:has(img.profileImages)::before,
#navbar div:has(img.profileImages)::after,
#navbar span:has(img.profileImages)::before,
#navbar span:has(img.profileImages)::after{
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Prevent 1-frame flash */
#navbar img.profileImages,
header img.profileImages,
.header img.profileImages{
  visibility: hidden !important;
}
#navbar img.profileImages[data-icr-ready="1"],
header img.profileImages[data-icr-ready="1"],
.header img.profileImages[data-icr-ready="1"]{
  visibility: visible !important;
}

/* =========================================================
   Banner / Carousel pagination dots -> green
   ========================================================= */
.carousel-indicators li,
.carousel-indicators [data-bs-target],
.carousel-indicators button{
  background-color: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
}
.carousel-indicators .active,
.carousel-indicators li.active,
.carousel-indicators button.active{
  background-color: #fff !important;
  border-color: #fff !important;
}
.owl-dots .owl-dot span{ background: var(--icr-accent) !important; }
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span{ background: #fff !important; }
.slick-dots li button:before{ color: var(--icr-accent) !important; opacity: 1 !important; }
.slick-dots li.slick-active button:before{ color: #fff !important; }
.swiper-pagination-bullet{ background: var(--icr-accent) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active{ background: #fff !important; }
.tns-nav > button{ background: var(--icr-accent) !important; }
.tns-nav > button.tns-nav-active{ background: #fff !important; }
.glide__bullet{ background-color: var(--icr-accent) !important; border-color: var(--icr-accent) !important; }
.glide__bullet--active{ background-color: #fff !important; border-color: #fff !important; }

/* =========================================================
   SITE-WIDE ACCENT OVERRIDE (force green, kill Muvi red)
   ========================================================= */
button.btn-hover,
a.btn-hover,
.btn.btn-hover,
button.btn-primary,
a.btn-primary,
.btn.btn-primary,
button.primary-button,
a.primary-button{
  background: var(--iq-primary-hover) !important;
  border-color: var(--iq-primary-hover) !important;
  color:#fff !important;
  background-image:none !important;
}
.btn-hover:before{
  background: var(--iq-primary) !important;
  border-color: var(--iq-primary) !important;
}
button.btn-hover:hover,
a.btn-hover:hover,
.btn.btn-hover:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn.btn-primary:hover,
button.primary-button:hover,
a.primary-button:hover{
  background: var(--iq-primary-dark) !important;
  border-color: var(--iq-primary-dark) !important;
  color:#fff !important;
}
.text-primary{ color: var(--icr-accent) !important; }
.border-primary{ border-color: var(--icr-accent) !important; }
.bg-primary{ background-color: var(--icr-accent) !important; }

/* Profile/settings left-nav */
.m-profile .widget-area .widget ul li a,
.widget-area .widget ul li a{
  text-decoration: none !important;
}
.m-profile .widget-area .widget ul li a.active,
.widget-area .widget ul li a.active{
  color: var(--icr-accent) !important;
  border-bottom: 1px solid var(--icr-accent) !important;
  text-decoration: none !important;
}

/* =========================================================
   Category “See All” page tile sizing (#see-allCategory)
   ========================================================= */
#see-allCategory #categoryContentList{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap: 22px 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#see-allCategory #categoryContentList > div{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#see-allCategory .see-all .item{
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  border-radius: 12px;
  overflow: hidden;
}
#see-allCategory .see-all .item .picture{
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto !important;
  border-radius: 12px;
  overflow: hidden;
}
#see-allCategory .see-all .item .picture img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display:block;
}
@media (min-width: 992px){
  #see-allCategory #categoryContentList > div{
    flex: 0 0 220px !important;
    max-width: 220px !important;
  }
}
@media (min-width: 1400px){
  #see-allCategory #categoryContentList > div{
    flex: 0 0 240px !important;
    max-width: 240px !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px){
  #see-allCategory #categoryContentList > div{
    flex: 0 0 200px !important;
    max-width: 200px !important;
  }
}
@media (max-width: 767.98px){
  #see-allCategory #categoryContentList{
    gap: 14px 12px !important;
  }
  #see-allCategory #categoryContentList > div{
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

/* =========================================================
   HEADER + PROFILE MENU HOVER COLORS (green)
   ========================================================= */
#navbar .header .navbar-nav .nav-link:hover,
#navbar .header .navbar-nav .nav-link:focus,
#navbar .phoenix-nav-dropdown .btn-navigation:hover a.nav-link,
#navbar .phoenix-nav-dropdown .btn-navigation:hover button,
#navbar .phoenix-nav-dropdown .btn-navigation.show .dropdown-toggle:focus{
  color: var(--brand) !important;
}
#navbar .garnetMenu .gmItems a:hover,
#navbar .garnetMenu .gmItems a:focus{
  background: linear-gradient(270deg, rgba(255,255,255,0), rgba(63,180,153,0.30)) !important;
  border-left: 2px solid var(--brand) !important;
  color: #000 !important;
}
#navbar .garnet-nav-dropdown .garnetMenu .gmItems a:hover,
#navbar .garnet-nav-dropdown .garnetMenu .gmItems a:focus{
  color: var(--brand) !important;
}

/* =========================================================
   TILE TITLE HOVER + FAVORITES HEART OVERRIDES (restored)
   ========================================================= */
.tiles:hover .data span,
.tiles:hover .data a:hover span,
.tiles:hover .data .content-name-div a:hover span{
  color: var(--brand) !important;
}

/* Any FontAwesome heart icons */
i.fa-heart,
i[class*="fa-heart"],
.fa-heart{
  color: var(--brand) !important;
}

/* Muvi favourite button */
.like-heart .ulike_btn,
.product-like-option .ulike_btn,
.addto-favorites .ulike_btn,
.fav-heart-btn,
.fav-heart-btn i{
  color: var(--brand) !important;
  background-image: none !important;
  position: relative;
}

/* Outline heart default */
.like-heart .ulike_btn::before,
.product-like-option .ulike_btn::before,
.addto-favorites .ulike_btn::before{
  content: "\f08a" !important; /* fa-heart-o (FA 4.7) */
  font-family: FontAwesome !important;
  font-size: 18px;
  line-height: 1;
  color: var(--brand) !important;
}

/* Solid heart when liked */
.like-heart .ulike_is_liked .ulike_btn::before,
.like-heart .ulike_btn.liked::before,
.like-heart .ulike_btn.like-image::before,
.product-like-option .ulike_is_liked .ulike_btn::before,
.product-like-option .ulike_btn.liked::before,
.product-like-option .ulike_btn.like-image::before,
.addto-favorites .ulike_is_liked .ulike_btn::before,
.addto-favorites .ulike_btn.liked::before,
.addto-favorites .ulike_btn.like-image::before{
  content: "\f004" !important; /* fa-heart (FA 4.7) */
}

/* Inline-selected hearts hard-coded to #f4181c -> brand */
a.addto-favorites svg path[style*="fill:#f4181c"],
a.addto-favorites svg path[style*="fill: #f4181c"],
a.addto-favorites svg path[style*="fill:#F4181C"],
a.addto-favorites svg path[style*="fill: #F4181C"],
a.svg-stroke svg path[style*="fill:#f4181c"],
a.svg-stroke svg path[style*="fill: #f4181c"],
a.svg-stroke svg path[style*="fill:#F4181C"],
a.svg-stroke svg path[style*="fill: #F4181C"]{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
}

/* Hover state */
.ctaBtnadd:hover svg path{
  stroke: var(--brand) !important;
  fill: var(--brand) !important;
  fill-opacity: 1 !important;
}

/* Selected/favorited state (solid fill) */
a.ctaBtnadd.addto-favorites[style*="background"] svg path,
a.svg-stroke[style*="background"] svg path{
  stroke: var(--brand) !important;
  fill: var(--brand) !important;
  fill-opacity: 1 !important;
}

/* =========================================================
   Empty state ("Missing Links") sizing + spacing (restored)
   ========================================================= */
.icr-empty-state{
  padding: 28px 12px;
}
.icr-empty-state img[src*="no-result.gif"]{
  display: block;
  width: 100%;
  max-width: 660px !important;
  height: auto !important;
  margin: 0 auto 14px;
}
.icr-empty-state h2{
  margin: 0 auto;
  max-width: 980px;
  padding: 0 10px;
  line-height: 1.25;
  word-break: break-word;
}

/* Category pages: center the empty state and allow larger art */
body.icr-page-category .icr-empty-state{
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
}
body.icr-page-category .icr-empty-state img[src*="no-result.gif"]{
  max-width: 860px !important;
  margin-bottom: 18px;
}
body.icr-page-category .icr-empty-state h2{
  text-align: center;
}

/* =========================================================
   Home hero audio/mute button hidden (restored)
   (JS tags .icr-hide-hero-audio + adds body classes)
   ========================================================= */
body.icr-page-home .icr-hide-hero-audio,
body.icr-page-posthome .icr-hide-hero-audio{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   FOOTER SOCIAL HOVER (bulletproof)
   - Works whether footer is <footer>, #footer, or .footer
   - Beats theme "red" hover even if it uses !important
   ========================================================= */

:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial{
  /* no layout change, just scoping anchor */
}

/* Stop theme from painting the LI itself (some builds do this) */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li:hover{
  background: transparent !important;
}

/* Default ring */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax{
  background: transparent !important;
  background-color: transparent !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

/* Kill overlay circles if the theme draws them with pseudo elements */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li::before,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li::after,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax::before,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Hover/focus = BRAND circle (this is the important part) */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li:hover > a.callByAjax,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:hover,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:focus,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:focus-visible{
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important; /* helps SVGs using currentColor */
}

/* Icons turn white (FontAwesome) */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li:hover > a.callByAjax i,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:hover i,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:focus i{
  color: #fff !important;
}

/* Icons turn white (SVG — X) */
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li:hover > a.callByAjax svg,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:hover svg,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:focus svg,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li:hover > a.callByAjax svg *,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:hover svg *,
:is(footer, #footer, .footer, .site-footer) .boxes ul.followSocial li a.callByAjax:focus svg *{
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* ==========================================
   Footer description text should NOT be pointer
   (vd.css forces cursor:pointer on that <p>)
   ========================================== */
#footer_footer_five_5 .short-description p,
#footer_footer_five_5 .short-description p *{
  cursor: default !important;   /* or cursor: text; if you prefer */
}

/* =========================================================
   MUVI RED ACCENTS — GLOBAL FIXES (checkout/login/modals)
   - Selected plan outline (new + old plan UIs)
   - Active tab underline
   - Cancel hover text (no red)
   - Primary buttons (Muvi red -> brand)
   ========================================================= */

/* ---- Primary buttons (Muvi sets to #bf000a) ---- */
.primary-button,
button.primary-button,
.new-all-plans-page .final-amount-area .checkout-btn-area .checkout-btn{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  color: #fff !important;
  background-image: none !important;
}
.primary-button:hover,
.primary-button:focus,
.new-all-plans-page .final-amount-area .checkout-btn-area .checkout-btn:hover,
.new-all-plans-page .final-amount-area .checkout-btn-area .checkout-btn:focus{
  background: var(--icr-accent-hover) !important;
  border-color: var(--icr-accent-hover) !important;
  color: #fff !important;
}

/* ---- Cancel button hover (was turning red) ---- */
.cancel-button:hover,
.cancel-button:focus,
.cancel-button:active{
  color: var(--icr-accent) !important;      /* green text on hover */
  border-color: var(--icr-accent) !important; /* if it has a border, make it green too */
}

/* Cancel plan hover shared a red hover rule */
.btn-plns button.cancelplan-btn:hover,
.btn-plns button.cancelplan-btn:focus{
  background: #fff !important;
  color: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
}

/* ---- Selected plan outline (covers multiple checkout UIs) ---- */
/* Old style */
.selected-plan{
  border: 2px solid var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  outline-color: var(--icr-accent) !important;
  box-shadow: none !important;
}
.selected-plan span.selected{
  background: var(--icr-accent) !important;
}

/* New plans modal (the UI in your screenshot) */
.new-all-plans-page .plan-area .single-plan.active,
.new-all-plans-page .plan-area .single-plan.plan-select,
.new-all-plans-page .plan-area input:checked ~ .single-plan{
  border: 1px solid var(--icr-accent) !important;
  outline-color: var(--icr-accent) !important;
}

/* Older post-checkout popup selection border */
.post-checkout-popup .plans-listing .labl > input:checked + div{
  border: 1px solid var(--icr-accent) !important;
}

/* ---- Active tab underline (was red) ---- */
.post-checkout-popup .nav-tabs .nav-item.show .nav-link,
.post-checkout-popup .nav-tabs .nav-link.active{
  border-bottom-color: var(--icr-accent) !important;
}
.tabviews .nav-tabs .nav-item.show .nav-link,
.tabviews .nav-tabs .nav-link.active{
  border-bottom-color: var(--icr-accent) !important;
}
/* Some templates use this helper */
.activeClass{
  border-bottom-color: var(--icr-accent) !important;
}

/* ---- Modal “Done/Proceed” buttons that Muvi styles red in various system modals ---- */
.mp-mb-btn .mp-mb-btn-done,
.privacyPolicy-modals .mp-mb-btn .mp-mb-btn-done{
  background: var(--icr-accent) !important;
  color: #fff !important;
}
.mp-mb-btn .mp-mb-btn-done:hover,
.privacyPolicy-modals .mp-mb-btn .mp-mb-btn-done:hover{
  background: var(--icr-accent-hover) !important;
  color: #fff !important;
}

/* =========================================================
   AUTH + CHECKOUT — REMOVE MUVI RED ACCENTS (#bf000a / #e50914 → ICR green)
   Targets login/signup + checkout/subscription modals where Muvi hard-codes red.
   ========================================================= */

/* --- Auth primary buttons (Login / Sign Up / OTP) --- */
.common-btn,
.common-btn.blue,
button.common-btn,
button.common-btn.blue,
.blue{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  color: #fff !important;
  background-image: none !important;
}
.common-btn *,
.common-btn.blue *{
  color: inherit !important; /* prevents red text inside green buttons */
}
.common-btn:hover,
.common-btn:focus,
.common-btn.blue:hover,
.common-btn.blue:focus{
  background: var(--icr-accent-hover) !important;
  border-color: var(--icr-accent-hover) !important;
  color: #fff !important;
}

/* --- Auth links hard-coded red --- */
.create-account-a,
.resend-a,
.resend-a:hover,
.resend-a:focus,
.resend-a:visited,
.resend-a:active{
  color: var(--icr-accent) !important;
}

/* --- Nav/tab accents that use Netflix red --- */
.activeClass{
  border-bottom-color: var(--icr-accent) !important;
  color: var(--icr-accent) !important;
}
.header .navbar-nav .nav-link:hover,
.header .navbar-nav .nav-link:focus{
  color: var(--icr-accent) !important;
}
.header .navbar-nav .nav-item .active{
  border-bottom-color: var(--icr-accent) !important;
  color: var(--icr-accent) !important;
}
.header .navbar-nav .signup a{
  background: var(--icr-accent) !important;
}
.header .navbar-nav .signup a:hover,
.header .navbar-nav .signup a.active{
  background: #fff !important;
  color: var(--icr-accent) !important;
}

/* --- Secondary button hover that was hard-coded red --- */
.secondary-button:hover{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  color: #fff !important;
}

/* --- Subscription plan selection outline/badge --- */
.selected-plan{
  border-color: var(--icr-accent) !important;
}
.selected-plan span.selected{
  background: var(--icr-accent) !important;
}

/* --- Checkout / subscription action buttons that turn red --- */
.new-all-plans-page .final-amount-area .checkout-btn-area .checkout-btn:hover{
  background: var(--icr-accent) !important;
  color: #fff !important;
}
.new-all-plans-page .final-amount-area .newpromo-code-area .input-btn-grp .apply-promocode,
.new-all-plans-page .final-amount-area .newpromo-code-area .input-btn-grp .apply-promocode:hover{
  background: var(--icr-accent) !important;
  color: #fff !important;
  border-color: var(--icr-accent) !important;
}
.checkout-section .plan-and-logo .back a:hover{
  color: var(--icr-accent) !important;
}

/* --- Icon paths that are hard-coded red --- */
svg path[fill="#bf000a"],
svg path[stroke="#bf000a"],
svg path[fill="#BF000A"],
svg path[stroke="#BF000A"],
svg path[fill="#e50914"],
svg path[stroke="#e50914"],
svg path[fill="#E50914"],
svg path[stroke="#E50914"]{
  fill: var(--icr-accent) !important;
  stroke: var(--icr-accent) !important;
}

/* --- Inline-style guards for Netflix red (#e50914) --- */
button[style*="#e50914"],
a[style*="#e50914"],
button[style*="#E50914"],
a[style*="#E50914"],
button[style*="rgb(229, 9, 20)"],
a[style*="rgb(229, 9, 20)"]{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
*[style*="background:#e50914"],
*[style*="background: #e50914"],
*[style*="background-color:#e50914"],
*[style*="background-color: #e50914"],
*[style*="border-color:#e50914"],
*[style*="border-color: #e50914"]{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
*[style*="color:#e50914"],
*[style*="color: #e50914"]{
  color: var(--brand) !important;
}

/* =========================================================
   PAY NOW / PURCHASE PAY NOW — remove Muvi red globally
   ========================================================= */

.paynow-button,
button.purchase-paynow,
a.purchase-paynow{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.paynow-button:hover,
.paynow-button:focus,
button.purchase-paynow:hover,
button.purchase-paynow:focus,
a.purchase-paynow:hover,
a.purchase-paynow:focus{
  background: #fff !important;
  color: var(--icr-accent) !important;
  text-decoration: none !important;
}

.paynow-button:hover svg path[fill],
button.purchase-paynow:hover svg path[fill],
a.purchase-paynow:hover svg path[fill]{
  fill: var(--icr-accent) !important;
  stroke: none !important;
}

/* also remove red hover from "Add New" in saved cards (same red family) */
.save-cards ul li.addnew a:hover{
  color: var(--icr-accent) !important;
}

/* =========================================================
   EXTRA RED ACCENTS + PPV SIMPLIFICATION
   - Document DOWNLOAD button (and other CTA reds)
   - Pay Per View modal: hide plan picker + access period
   ========================================================= */

/* ---- Document / CTA buttons still using Muvi red ---- */
.ctaBtnwatch,
.btnProceed,
.plan-divs .chooseplan-btn,
.btn-plns button,
button.upload-btn,
button.update-btn,
.sign-form-layout .check-inbox-loginbtn,
.faq-wrap #accordion .btn-add,
.blank-card-info button,
.card-information button,
.add-question .save-btn,
.addbutton,
.btn-edit,
.btn-delete,
.btn-groups,
.notify-btn,
.input-btn-grp button.apply-promo,
.banner-section .banner-data .button .watch-now a,
.banner-section .banner-data .button .watch-now a.follow-btn,
.banner-section .banner-data span.button.watch-now a,
.banner-section .se-BannerData .button .watch-trailer a,
/* Fallback: common download button patterns */
.download-btn,
.downloadBtn,
.download-button,
.downloadButton,
.btn-download,
a[aria-label="Download"],
button[aria-label="Download"],
a[title*="Download"],
button[title*="Download"]{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
  color: #fff !important;
  background-image: none !important;
}

/* Hover: invert (white bg, green text) for CTA-style buttons */
.ctaBtnwatch:hover,
.btnProceed:hover,
.plan-divs .chooseplan-btn:hover,
.btn-plns button:hover,
button.upload-btn:hover,
button.update-btn:hover,
.sign-form-layout .check-inbox-loginbtn:hover,
.input-btn-grp button.apply-promo:hover,
.banner-section .banner-data .button .watch-now a:hover,
.banner-section .banner-data .button .watch-now a.follow-btn:hover,
.banner-section .banner-data span.button.watch-now a:hover,
.banner-section .se-BannerData .button .watch-trailer a:hover,
.download-btn:hover,
.downloadBtn:hover,
.download-button:hover,
.downloadButton:hover,
.btn-download:hover,
a[aria-label="Download"]:hover,
button[aria-label="Download"]:hover,
a[title*="Download"]:hover,
button[title*="Download"]:hover{
  background: #fff !important;
  color: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
}

/* ---- Pay Per View modal: hide “Choose Plan”, the dropdown, and Access Period ---- */
/* This PPV UI uses .choose-from-text (label + access line) and select.single-select. */
.post-checkout-popup .new-all-plans-page .choose-from-text,
.post-checkout-popup .new-all-plans-page select.single-select,
.post-checkout-popup .new-all-plans-page .single-select,
.post-checkout-popup .new-all-plans-page .select2-container {
  display: none !important;
}

/* If any access period line uses a class, hide it too */
.post-checkout-popup .new-all-plans-page .access-period,
.post-checkout-popup .new-all-plans-page .access-period-text {
  display: none !important;
}

/* =========================================================
   PPV modal cleanup — hide “Choose Plan” + “Access Period”
   (works across PPV modals, not just one page)
   ========================================================= */

/* Broader than before (Muvi templates vary) */
.post-checkout-popup .choose-from-text,
.post-checkout-popup .choose-plan,
.post-checkout-popup .chooseplan,
.post-checkout-popup [class*="choose"][class*="plan"],
.post-checkout-popup [class*="choose"][class*="text"]{
  display: none !important;
}

/* Access Period line (class names vary) */
.post-checkout-popup .access-period,
.post-checkout-popup .accessperiod,
.post-checkout-popup [class*="access"][class*="period"],
.post-checkout-popup [class*="access"][class*="duration"]{
  display: none !important;
}

/* =========================================================
   Banner “Read more” link: no red hover, no weird spacing
   ========================================================= */

/* In style.css, Muvi sets: .banner-section .banner-data p a { padding-left: 5px }
   That creates an awkward gap before "... Read more" */
.banner-section .banner-data p a.callByAjax{
  padding-left: 0 !important;
}

/* Muvi sets hover to red (#bf000a); override to ICR green */
.banner-section .banner-data p a.callByAjax:hover,
.banner-section .banner-data p a.callByAjax:focus{
  color: var(--brand) !important;
  text-decoration: underline !important;
}

/* Share popover: allow 5 icons + make hover brand green */
.shareSocialpopup{
  width: auto !important;
  min-width: 200px !important;
}

.socialIcons{
  flex-wrap: wrap !important;
}

/* Hover was hard-coded red in style.css */
.si-span:hover{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Ensure BOTH stroke + fill go white on hover (needed for LinkedIn) */
.si-span:hover svg path{
  stroke: #fff !important;
  fill: #fff !important;
}

/* X icon uses fill */
.si-span.twitter:hover svg path{
  fill: #fff !important;
  stroke: none !important;
}

/* =========================================================
   Share trigger button hover (a.share-a): red -> ICR green
   ========================================================= */

/* Cover the exact theme selector + a global fallback */
.banner-section .se-BannerData .button .social-share-all a.share-a:hover,
.banner-section .se-BannerData .button .social-share-all a.share-a:focus,
.social-share-all a.share-a:hover,
.social-share-all a.share-a:focus{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Theme turns the icon stroke red on hover — force it white */
.banner-section .se-BannerData .button .social-share-all a.share-a:hover svg path,
.banner-section .se-BannerData .button .social-share-all a.share-a:focus svg path,
.social-share-all a.share-a:hover svg path,
.social-share-all a.share-a:focus svg path{
  stroke: #fff !important;
}

/* Safety: if any icons use fill/currentColor */
.banner-section .se-BannerData .button .social-share-all a.share-a:hover svg *,
.banner-section .se-BannerData .button .social-share-all a.share-a:focus svg *,
.social-share-all a.share-a:hover svg *,
.social-share-all a.share-a:focus svg *{
  fill: #fff !important;
  color: #fff !important;
}

/* =========================================================
   ICR — IMAGE NORMALIZATION (PREVENT SQUISH SITE-WIDE)
   Paste at END of css/local.css
   ========================================================= */

:root{
  /* Banners / hero */
  --icr-banner-fit: cover;            /* cover = no squish, may crop */
  --icr-banner-pos: center center;    /* try: center top if faces get cut */

  /* Cast headshots */
  --icr-cast-ar: 1 / 1;               /* keep layout consistent (square tiles) */
  /* alt: 2 / 3 for portrait tiles if you prefer taller cards */
  --icr-cast-fit: cover;              /* alt: contain (no crop, adds padding) */
  --icr-cast-pos: 50% 15%;            /* keeps faces higher in frame */
}

/* ---------- HOME / CATEGORY BANNERS (fix squish) ----------
   Theme sets width+height 100% but no object-fit */
.banner-section .banner-content
  .owl-carousel.owl-drag:not(.custom-banner-nocrew) .owl-item img,
.banner-section .profile-banner-content
  .owl-carousel.owl-drag:not(.custom-banner-nocrew) .owl-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--icr-banner-fit) !important;
  object-position: var(--icr-banner-pos) !important;
}

/* ---------- CONTENT/CAROUSEL TILES (generic “picture” boxes) ---------- */
.product-listing .owl-carousel.owl-drag .owl-item .item .picture img,
.product-listing .see-all .item .picture img,
.cast-listing .owl-carousel.owl-drag .owl-item .item .picture img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ---------- CAST ROW ON DETAIL PAGES (your headshot tiles) ---------- */
.cast .tiles .picture{
  width: 100% !important;
  aspect-ratio: var(--icr-cast-ar) !important;
  overflow: hidden !important;
  border-radius: 8px;
  background: rgba(255,255,255,0.06); /* helps if you switch to contain */
}
.cast .tiles .picture img{
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--icr-cast-fit) !important;
  object-position: var(--icr-cast-pos) !important;
  display: block !important;
}

/* ---------- PROFILE/AVATAR areas that were using object-fit: fill ---------- */
.pro-photo-div img,
.custom-vpd-box .profile-pic img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* =========================================================
   ICR — FIX SQUISHED HEADER BANNERS (BACKGROUND IMAGES)
   Put at END of css/local.css
   ========================================================= */

:root{
  --icr-banner-bg-size: cover;         /* cover = no squish, may crop */
  --icr-banner-bg-pos: center center;  /* try: center top if faces get cut */
}

/* Many Muvi banners are DIVs with background-image, not <img> */
.banner-section .item,
.bannerType-img .item,
.banner-section .item.inlinebgImg{
  background-size: var(--icr-banner-bg-size) !important;
  background-position: var(--icr-banner-bg-pos) !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   ICR — BANNER FOCAL POINT (prevents “pushed too far” crop)
   Paste BELOW your banner cover fix
   ========================================================= */

:root{
  /* Move the crop window toward the RIGHT side of the image */
  --icr-banner-focus-x: 75%;
  --icr-banner-focus-y: 50%;
}

/* If the banner is a background-image */
.banner-section .item,
.banner-section .item.inlinebgImg{
  background-position: var(--icr-banner-focus-x) var(--icr-banner-focus-y) !important;
}

/* If the banner is an <img> (some pages use this) */
.banner-section img.banner-img,
.banner-img{
  object-fit: cover !important;
  object-position: var(--icr-banner-focus-x) var(--icr-banner-focus-y) !important;
}

/* On smaller screens, re-center so it doesn’t chop faces weirdly */
@media (max-width: 768px){
  :root{
    --icr-banner-focus-x: 50%;
    --icr-banner-focus-y: 35%;
  }
}

/* =========================================================
   FOOTER FIVE — FINAL (NO OVERLAP, NO LETTER-STACKING)
   Scoped ONLY to #footer_footer_five_5
   ========================================================= */

/* 1) Stop global footer “wrap anywhere” rules from shredding words */
#footer_footer_five_5 p,
#footer_footer_five_5 li,
#footer_footer_five_5 a{
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* Only the email should be allowed to break anywhere (prevents overlap into Follow Us) */
#footer_footer_five_5 a[href^="mailto:"]{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 2) IMPORTANT: prevent the nested .row from bleeding left via Bootstrap’s negative margins */
#footer_footer_five_5 > section.footer > .container-fluid.p-3280:first-of-type
  > .row > [class*="col-md-9"] > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep normal spacing inside the 4 boxes */
#footer_footer_five_5 > section.footer > .container-fluid.p-3280:first-of-type
  > .row > [class*="col-md-9"] > .row > [class*="col-"]{
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 3) The only “layout change”: in the awkward mid-desktop range, stack the left column
      and make the right side 2-up so nothing collides */
@media (min-width: 992px) and (max-width: 1300px){
  #footer_footer_five_5 > section.footer > .container-fluid.p-3280:first-of-type
    > .row > [class*="col-md-3"],
  #footer_footer_five_5 > section.footer > .container-fluid.p-3280:first-of-type
    > .row > [class*="col-md-9"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #footer_footer_five_5 > section.footer > .container-fluid.p-3280:first-of-type
    > .row > [class*="col-md-9"] > .row > [class*="col-"]{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* 4) Follow Us hover (no layout changes) */
#footer_footer_five_5 ul.followSocial li:hover,
#footer_footer_five_5 ul.followSocial li:focus-within{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
#footer_footer_five_5 ul.followSocial li:hover i,
#footer_footer_five_5 ul.followSocial li:focus-within i{
  color: #fff !important;
}

/* =========================================================
   FOOTER SOCIAL ICONS — RING ONLY (NO FILLED BOX)
   Paste at END of css/local.css
   ========================================================= */

#footer_footer_five_5 ul.followSocial li{
  background: transparent !important;
  border-radius: 50% !important;
  overflow: hidden !important; /* clips any accidental backgrounds */
}

/* Make the <a> fill the circle so hover doesn't create a little box */
#footer_footer_five_5 ul.followSocial li a,
#footer_footer_five_5 ul.followSocial li a.callByAjax{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* OVERRIDE your earlier “FOOTER SOCIAL HOVER” fill */
#footer_footer_five_5 ul.followSocial li:hover > a.callByAjax,
#footer_footer_five_5 ul.followSocial li a.callByAjax:hover,
#footer_footer_five_5 ul.followSocial li a.callByAjax:focus,
#footer_footer_five_5 ul.followSocial li a.callByAjax:focus-visible{
  background: transparent !important;
  background-color: transparent !important;
}

/* Ring color changes on hover/focus */
#footer_footer_five_5 ul.followSocial li:hover,
#footer_footer_five_5 ul.followSocial li:focus-within{
  border-color: var(--brand) !important;
}

/* Icon color changes (optional but usually desired) */
#footer_footer_five_5 ul.followSocial li:hover i,
#footer_footer_five_5 ul.followSocial li:focus-within i{
  color: var(--brand) !important;
  background: transparent !important;
}
#footer_footer_five_5 ul.followSocial li:hover svg,
#footer_footer_five_5 ul.followSocial li:focus-within svg,
#footer_footer_five_5 ul.followSocial li:hover svg *,
#footer_footer_five_5 ul.followSocial li:focus-within svg *{
  fill: var(--brand) !important;
  stroke: var(--brand) !important;
  background: transparent !important;
}

.cast-banner-four .icr-readmore-link{
  margin-left: .5rem;
  color: var(--icr-accent);
  font-weight: 600;
  text-decoration: underline;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline;
  white-space: nowrap;
}
.cast-banner-four .icr-readmore-link:hover{
  color: var(--icr-accent-hover);
}

/* Cast bio “Read more” link — force brand color (theme was turning it red) */
.cast-banner-four .content-data a.icr-readmore-link,
.cast-banner-four .content-data a.icr-readmore-link:visited,
.cast-banner-four .content-data a.icr-readmore-link:focus{
  color: var(--icr-accent) !important;
  text-decoration: underline;
  background: none !important;
  border: 0 !important;
}

.cast-banner-four .content-data a.icr-readmore-link:hover,
.cast-banner-four .content-data a.icr-readmore-link:active{
  color: var(--icr-accent-hover) !important;
}

.cast-filmography-five .icr-resource-nav{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin: .75rem 0 1.25rem;
}

.cast-filmography-five .icr-resource-pill{
  display:inline-flex;
  align-items:center;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.cast-filmography-five .icr-resource-pill:hover{
  border-color: var(--icr-accent);
  color: var(--icr-accent);
  text-decoration:none;
}

/* Cast banner: keep a comfortable right gutter (stop near Search) */
.cast-banner-four .banner-text-left{
  left: 35px !important;     /* keep your nicer left spacing */
  right: 190px !important;   /* add blank space on the right */
  width: auto !important;
}

/* Large desktops: a touch more breathing room */
@media (min-width: 1400px){
  .cast-banner-four .banner-text-left{
    right: 220px !important;
  }
}

/* Tablets: reduce gutter so it doesn't feel cramped */
@media (max-width: 991px){
  .cast-banner-four .banner-text-left{
    right: 30px !important;
  }
}

/* Phones: tighter gutters */
@media (max-width: 767px){
  .cast-banner-four .banner-text-left{
    left: 15px !important;
    right: 15px !important;
  }
}
/* -------- ICR CSS tooltips (replaces Bootstrap tooltips for these icons) -------- */
.like-favourite-share-content-seven a.icr-tip,
.content-hover-eight a.icr-tip{
  position: relative;
}

.like-favourite-share-content-seven a.icr-tip:hover::after,
.content-hover-eight a.icr-tip:hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  background: var(--icr-accent);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 9999;
}

.like-favourite-share-content-seven a.icr-tip:hover::before,
.content-hover-eight a.icr-tip:hover::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--icr-accent) transparent transparent transparent;
  z-index: 10000;
}

/* -------- Keep Start Over stroke gray (don’t let global hover rules turn it green) -------- */
.like-favourite-share-content-seven a.icr-startover:hover svg path,
.like-favourite-share-content-seven a.icr-startover:focus svg path{
  stroke: #818181 !important;
}

/* Optional: keep like/dislike/heart hover green if you want it */
.like-favourite-share-content-seven a.icr-like:hover svg path,
.like-favourite-share-content-seven a.icr-dislike:hover svg path{
  fill: var(--icr-accent) !important;
}
.like-favourite-share-content-seven a.icr-fav:hover svg path{
  stroke: var(--icr-accent) !important;
}

/* ===== Fix hover colors for Like/Dislike (kill Muvi red) ===== */
.like-favourite-share-content-seven a.icr-like:hover svg path,
.like-favourite-share-content-seven a.icr-like:focus svg path,
.like-favourite-share-content-seven a.icr-dislike:hover svg path,
.like-favourite-share-content-seven a.icr-dislike:focus svg path{
  fill: var(--icr-accent) !important;
  stroke: var(--icr-accent) !important;
}

/* Some themes apply a red stroke on hover; shut it down */
.like-favourite-share-content-seven a.icr-like svg path,
.like-favourite-share-content-seven a.icr-dislike svg path{
  stroke: none !important;
}

/* ===== Heart: fill green on hover even when not favorited ===== */
.like-favourite-share-content-seven a.icr-fav:hover svg path,
.like-favourite-share-content-seven a.icr-fav:focus svg path{
  fill: var(--icr-accent) !important;
  stroke: var(--icr-accent) !important;
}

/* Home card favorite heart: smooth + fill green on hover */
.content-hover-eight a.icr-fav svg path{
  transition: fill .18s ease, stroke .18s ease;
}

.content-hover-eight a.icr-fav{
  transition: background-color .18s ease;
}

.content-hover-eight a.icr-fav:hover svg path,
.content-hover-eight a.icr-fav:focus svg path{
  fill: var(--icr-accent) !important;
  stroke: var(--icr-accent) !important;
}

/* Allow tooltips to overflow the card instead of being clipped */
.content-hover-eight,
.content-hover-eight .ctaSection,
.content-hover-eight .box-hover,
.content-hover-eight .ctaSection.box-hover{
  overflow: visible !important;
}

/* If the card wrapper is clipping (common in Muvi), unclip it too */
.owl-item,
.owl-item .item,
.owl-product .item,
.contect-listing .item{
  overflow: visible !important;
}

/* Ensure tooltip is above neighbors */
.content-hover-eight a.icr-tip:hover::after,
.content-hover-eight a.icr-tip:hover::before{
  z-index: 99999 !important;
}

/* Owl carousel: keep horizontal masking, allow vertical overflow (tooltips) */
.owl-carousel .owl-stage-outer{
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Card favorite tooltip: shift left so it won't clip at the right edge */
.content-hover-eight a.icr-fav:hover::after,
.content-hover-eight a.icr-fav:focus::after{
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.content-hover-eight a.icr-fav:hover::before,
.content-hover-eight a.icr-fav:focus::before{
  left: auto !important;
  right: 12px !important; /* arrow position */
  transform: none !important;
}

/* Player play/pause: center the green highlight ring */
.jwplayer .jw-controlbar .jw-button-container .jw-icon-playback,
.jwplayer .jw-controlbar .jw-button-container .jw-icon-playback:focus,
.jwplayer .jw-controlbar .jw-button-container .jw-icon-playback:hover{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* If the ring is a pseudo-element, make it centered */
.jwplayer .jw-controlbar .jw-button-container .jw-icon-playback::before,
.jwplayer .jw-controlbar .jw-button-container .jw-icon-playback::after{
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* VideoJS fallback */
.video-js .vjs-control.vjs-play-control{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.video-js .vjs-control.vjs-play-control::before,
.video-js .vjs-control.vjs-play-control::after{
  left:50% !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Center the play/pause icon inside the control bar button (Video.js) */
.video-js .vjs-control-bar .vjs-play-control{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;              /* kills uneven padding offsets */
}

.video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder{
  display: flex !important;           /* makes ::before a flex item */
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Reset the pseudo-element positioning that causes the “slightly off” look */
.video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before{
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Video.js: move on-screen Prev/Next closer to the edges */
.video-js .vjs-previous-button,
.video-js .vjs-next-button,
.video-js .vjs-playlist-prev,
.video-js .vjs-playlist-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;

  /* nice big tap targets */
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-js .vjs-previous-button,
.video-js .vjs-playlist-prev{
  left: 24px !important;   /* adjust: 16–40px */
  right: auto !important;
}

.video-js .vjs-next-button,
.video-js .vjs-playlist-next{
  right: 24px !important;  /* adjust: 16–40px */
  left: auto !important;
}

/* Safety: if any prev/next exist INSIDE the control bar, don't break layout */
.video-js .vjs-control-bar .vjs-previous-button,
.video-js .vjs-control-bar .vjs-next-button,
.video-js .vjs-control-bar .vjs-playlist-prev,
.video-js .vjs-control-bar .vjs-playlist-next{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

/* ============================
   Video.js: move on-screen Prev/Next to the edges
   (playlist prev/next + icon variants + aria-label variants)
   ============================ */

/* Base styling for the on-screen prev/next buttons */
.video-js .vjs-previous-button,
.video-js .vjs-next-button,
.video-js .vjs-prev-control,
.video-js .vjs-next-control,
.video-js .vjs-playlist-prev,
.video-js .vjs-playlist-next,
.video-js .vjs-icon-previous-item,
.video-js .vjs-icon-next-item,
.video-js button[aria-label*="Previous"][class*="vjs-"],
.video-js button[aria-label*="Next"][class*="vjs-"]{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 50 !important;

  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
}

/* Previous → left */
.video-js .vjs-previous-button,
.video-js .vjs-prev-control,
.video-js .vjs-playlist-prev,
.video-js .vjs-icon-previous-item,
.video-js button[aria-label*="Previous"][class*="vjs-"]{
  left: 40px !important;   /* adjust 16–40px */
  right: auto !important;
}

/* Next → right */
.video-js .vjs-next-button,
.video-js .vjs-next-control,
.video-js .vjs-playlist-next,
.video-js .vjs-icon-next-item,
.video-js button[aria-label*="Next"][class*="vjs-"]{
  right: 40px !important;  /* adjust 16–40px */
  left: auto !important;
}

/* Safety: if any of these are inside the control bar, don't absolutely-position them */
.video-js .vjs-control-bar .vjs-previous-button,
.video-js .vjs-control-bar .vjs-next-button,
.video-js .vjs-control-bar .vjs-prev-control,
.video-js .vjs-control-bar .vjs-next-control,
.video-js .vjs-control-bar .vjs-playlist-prev,
.video-js .vjs-control-bar .vjs-playlist-next,
.video-js .vjs-control-bar .vjs-icon-previous-item,
.video-js .vjs-control-bar .vjs-icon-next-item,
.video-js .vjs-control-bar button[aria-label*="Previous"][class*="vjs-"],
.video-js .vjs-control-bar button[aria-label*="Next"][class*="vjs-"]{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

/* ============================
   ICR Video.js two-row layout
   (progress on its own row; left cluster + right cluster)
   ============================ */

.video-js.icr-vjs-layout .vjs-control-bar{
  display: block !important;
  height: auto !important;
  padding-top: 6px;
}

.video-js.icr-vjs-layout .vjs-progress-control{
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  padding: 0 12px !important;
}

.video-js.icr-vjs-layout .icr-vjs-bottom-row{
  display: flex !important;
  align-items: center !important;
  padding: 0 12px 6px !important;
}

.video-js.icr-vjs-layout .icr-vjs-left,
.video-js.icr-vjs-layout .icr-vjs-right{
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.video-js.icr-vjs-layout .icr-vjs-right{
  margin-left: auto !important;
}

/* Normalize heights so volume/time don't "droop" */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
}

/* Our injected Prev/Next buttons (SVG-based; no icon-font squares) */
.video-js.icr-vjs-layout .icr-vjs-prev,
.video-js.icr-vjs-layout .icr-vjs-next{
  width: 40px !important;
  color: #fff !important;
}
.video-js.icr-vjs-layout .icr-vjs-prev svg,
.video-js.icr-vjs-layout .icr-vjs-next svg{
  display: block;
}

/* Progress styling */
.video-js.icr-vjs-layout .vjs-progress-holder{
  height: 4px !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .vjs-play-progress{
  background: var(--icr-accent) !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .vjs-play-progress:before{
  color: var(--icr-accent) !important;
}

/* Remove any green highlight/background around play/pause */
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control,
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control:focus,
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control:focus-visible,
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control:active{
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control .vjs-icon-placeholder,
.video-js.icr-vjs-layout .vjs-control-bar .vjs-play-control .vjs-icon-placeholder:before{
  box-shadow: none !important;
  background: transparent !important;
}

/* Hide on-screen overlay prev/next visually (keep DOM so JS can click them) */
.video-js.icr-vjs-layout > button.vjs-icon-previous-item,
.video-js.icr-vjs-layout > button.vjs-icon-next-item,
.video-js.icr-vjs-layout > .vjs-icon-previous-item,
.video-js.icr-vjs-layout > .vjs-icon-next-item{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   ICR Video.js controlbar chrome (v3) — append-only overrides
   Matches mock:
   - Progress bar on its own top row
   - Left: Prev / -10 / Play / +10 / Next
   - Right: Time + a small set of buttons
   ========================================================= */

.video-js.icr-vjs-layout .vjs-control-bar{
  display:block !important;
  height:auto !important;
  padding-top: 6px !important;
  background: transparent !important;
}

.video-js.icr-vjs-layout .vjs-progress-control{
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  padding: 0 12px !important;
}

.video-js.icr-vjs-layout .icr-vjs-bottom-row{
  display:flex !important;
  align-items:center !important;
  padding: 0 12px 8px !important;
}

.video-js.icr-vjs-layout .icr-vjs-left,
.video-js.icr-vjs-layout .icr-vjs-right{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
}

.video-js.icr-vjs-layout .icr-vjs-right{
  margin-left:auto !important;
}

/* --- Universal control reset (kills the green squares / focus fills) --- */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control:hover,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button:hover,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control:focus,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button:focus,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control:active,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button:active,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control:focus-visible,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button:focus-visible{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Normalize heights + hitboxes */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-button{
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Left cluster buttons sized like the mock */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-button{
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

/* Make Video.js icon placeholders accept SVG */
.video-js.icr-vjs-layout .vjs-icon-placeholder{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 100% !important;
  height: 100% !important;
}
.video-js.icr-vjs-layout .vjs-icon-placeholder svg{
  display:block;
  width: 18px;
  height: 18px;
}

/* Time styling (right side) */
.video-js.icr-vjs-layout .vjs-time-control,
.video-js.icr-vjs-layout .vjs-time-divider{
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  height: 34px !important;
  display:flex !important;
  align-items:center !important;
}

/* Progress styling */
.video-js.icr-vjs-layout .vjs-progress-holder{
  height: 4px !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .vjs-play-progress{
  background: var(--icr-accent) !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .vjs-play-progress:before{
  color: var(--icr-accent) !important;
}

/* Hide live/DVR chrome to match the VOD mock */
.video-js.icr-vjs-layout .vjs-live-control,
.video-js.icr-vjs-layout .vjs-seek-to-live-control,
.video-js.icr-vjs-layout .vjs-remaining-time,
.video-js.icr-vjs-layout .vjs-live-display,
.video-js.icr-vjs-layout .vjs-live-tracker{
  display:none !important;
}

/* Hide playback rate (mock doesn’t show it) */
.video-js.icr-vjs-layout .vjs-playback-rate{
  display:none !important;
}

/* Hide on-screen overlay prev/next visually (keep DOM so JS can click them) */
.video-js.icr-vjs-layout > button.vjs-icon-previous-item,
.video-js.icr-vjs-layout > button.vjs-icon-next-item,
.video-js.icr-vjs-layout > .vjs-icon-previous-item,
.video-js.icr-vjs-layout > .vjs-icon-next-item{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   ICR Video.js controlbar chrome (v4 refinements)
   - Better vertical alignment for left transport icons
   - Volume slider placed in left cluster
   - Prevent right-side overflow on smaller viewports
   - Removes the "floating" time preview tooltip (was glitchy after layout changes)
   ========================================================= */

/* Slight nudge so the font-icon play/pause centers with the SVG buttons */
.video-js.icr-vjs-layout .vjs-play-control .vjs-icon-placeholder:before{
  position: relative;
  top: 1px;
}

/* Keep left/right clusters from overflowing */
.video-js.icr-vjs-layout .icr-vjs-right{
  flex: 0 1 auto !important;
  max-width: 60% !important;
  overflow: hidden !important;
}
.video-js.icr-vjs-layout .icr-vjs-right{
  gap: 10px !important;
}

/* Make the time area stable (no width "jitter") */
.video-js.icr-vjs-layout .vjs-current-time-display,
.video-js.icr-vjs-layout .vjs-duration-display,
.video-js.icr-vjs-layout .vjs-time-divider{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.video-js.icr-vjs-layout .vjs-current-time-display,
.video-js.icr-vjs-layout .vjs-duration-display{
  min-width: 64px;
  text-align: right;
}
.video-js.icr-vjs-layout .vjs-time-divider{
  min-width: 18px;
  text-align: center;
}

/* Kill the floating time tooltip / mouse display (this is what was appearing over the video) */
.video-js.icr-vjs-layout .vjs-mouse-display,
.video-js.icr-vjs-layout .vjs-time-tooltip,
.video-js.icr-vjs-layout .vjs-play-progress .vjs-time-tooltip{
  display: none !important;
}

/* Show volume in the LEFT cluster only */
.video-js.icr-vjs-layout .vjs-volume-panel,
.video-js.icr-vjs-layout .vjs-volume-control,
.video-js.icr-vjs-layout .vjs-mute-control{
  display: none !important; /* default off */
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-panel{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 34px !important;
  width: 170px !important;
  min-width: 170px !important;
  gap: 10px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-mute-control{
  display: inline-flex !important;
  width: 36px !important;
  min-width: 36px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-control{
  display: inline-flex !important;
  width: 120px !important;
  min-width: 120px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar{
  width: 120px !important;
  margin: 0 !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar.vjs-slider{
  height: 4px !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-level{
  background: var(--icr-accent) !important;
  border-radius: 999px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-handle{
  color: var(--icr-accent) !important;
}

/* On smaller screens, reduce/hide volume + some right-side icons so nothing pushes off-canvas */
@media (max-width: 760px){
  .video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-panel{
    width: 130px !important;
    min-width: 130px !important;
  }
  .video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-control,
  .video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar{
    width: 90px !important;
    min-width: 90px !important;
  }
}
@media (max-width: 560px){
  .video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-panel{
    display: none !important;
  }
  .video-js.icr-vjs-layout .vjs-picture-in-picture-control,
  .video-js.icr-vjs-layout .vjs-subs-caps-button,
  .video-js.icr-vjs-layout .vjs-captions-button,
  .video-js.icr-vjs-layout .vjs-subtitles-button{
    display: none !important;
  }
  .video-js.icr-vjs-layout .icr-vjs-right{
    max-width: 70% !important;
  }
}

/* =========================================================
   ICR Video.js controlbar chrome (v5 fixes)
   - Restore right-side controls (no over-aggressive hiding)
   - Align play + volume icons with SVG buttons
   - Force volume slider inline + horizontal (no popup, no vertical drag)
   ========================================================= */

/* Keep right cluster from forcing overflow; clip extras instead */
.video-js.icr-vjs-layout .icr-vjs-right{
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

/* Hide “extra” right-side controls on narrower widths (we prioritize time + key icons) */
@media (max-width: 900px){
  .video-js.icr-vjs-layout .icr-vjs-right > .icr-vjs-extra-right{
    display: none !important;
  }
}

/* Consistent vertical centering for ALL icon-font controls */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-icon-placeholder:before{
  line-height: 34px !important;
}

/* Play + mute icons tend to sit a bit high vs SVG; nudge them down */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-play-control .vjs-icon-placeholder:before,
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-mute-control .vjs-icon-placeholder:before{
  position: relative;
  top: 2px !important;
}

/* Volume: force INLINE, horizontal behavior */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-panel{
  position: static !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-panel .vjs-volume-control{
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Ensure the volume bar is truly horizontal */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar{
  height: 4px !important;
  width: 120px !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar.vjs-slider,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-volume-bar.vjs-slider-horizontal{
  height: 4px !important;
}

/* =========================================================
   ICR Video.js controlbar chrome (v6)
   - Replace Video.js volume panel with custom inline range slider
   - Hard-hide any controls not in our allowlist (prevents right-side icon spam)
   ========================================================= */

/* Anything JS marks as hidden is gone, regardless of where it sits */
.video-js.icr-vjs-layout .icr-vjs-hidden-control{
  display: none !important;
}

/* We are not using Video.js default volume UI */
.video-js.icr-vjs-layout .vjs-volume-panel{
  display: none !important;
}

/* Custom inline volume control */
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-wrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 34px !important;
  width: 170px !important;
  min-width: 170px !important;
  gap: 10px !important;
  padding: 0 !important;
}

.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-btn{
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 0 !important;
}

.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-btn svg{
  width: 18px;
  height: 18px;
}

.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range{
  width: 120px !important;
  min-width: 120px !important;
  height: 4px !important;
  margin: 0 !important;
  accent-color: var(--icr-accent);
  background: transparent;
}

/* Webkit styling */
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range{
  -webkit-appearance: none;
}
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range::-webkit-slider-runnable-track{
  height: 4px;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
}
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--icr-accent);
  margin-top: -4px;
}

/* Firefox styling */
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range::-moz-range-track{
  height: 4px;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
}
.video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--icr-accent);
  border: 0;
}

/* Slight nudge so play icon aligns with SVG set */
.video-js.icr-vjs-layout .icr-vjs-bottom-row .vjs-play-control .vjs-icon-placeholder:before{
  position: relative;
  top: 2px !important;
}

@media (max-width: 760px){
  .video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-wrap{
    width: 130px !important;
    min-width: 130px !important;
  }
  .video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-range{
    width: 90px !important;
    min-width: 90px !important;
  }
}
@media (max-width: 560px){
  .video-js.icr-vjs-layout .icr-vjs-left .icr-vjs-volume-wrap{
    display: none !important;
  }
}

/* =========================================================
   ICR Video.js controlbar chrome (v7)
   Fixes:
   - Right-side controls wrapping into 2 rows ("doubling")
   - Popout menus being clipped
   ========================================================= */

/* Allow menus to escape the bar (Muvi/Video.js defaults can clip) */
.video-js.icr-vjs-layout,
.video-js.icr-vjs-layout .vjs-control-bar,
.video-js.icr-vjs-layout .icr-vjs-bottom-row,
.video-js.icr-vjs-layout .icr-vjs-left,
.video-js.icr-vjs-layout .icr-vjs-right,
.video-js.icr-vjs-layout .vjs-menu-button-popup{
  overflow: visible !important;
}

/* Keep the bottom row to ONE line */
.video-js.icr-vjs-layout .icr-vjs-bottom-row{
  flex-wrap: nowrap !important;
}
.video-js.icr-vjs-layout .icr-vjs-left{
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.video-js.icr-vjs-layout .icr-vjs-right{
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  gap: 10px !important; /* slightly tighter so it doesn't wrap */
}

/* Make sure controls don't stack vertically */
.video-js.icr-vjs-layout .icr-vjs-right > .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-right > .vjs-button{
  display: inline-flex !important;
  align-items: center !important;
}

/* Popout menus: align to the RIGHT edge and open leftward so they don't get cut off */
.video-js.icr-vjs-layout .icr-vjs-right .vjs-menu-button-popup{
  position: relative !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .vjs-menu-button-popup .vjs-menu{
  left: auto !important;
  right: 0 !important;
  bottom: 34px !important; /* sits above the control row */
  z-index: 99999 !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .vjs-menu-button-popup .vjs-menu .vjs-menu-content{
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Ensure the control bar is on top of the video and menus */
.video-js.icr-vjs-layout .vjs-control-bar{
  z-index: 50 !important;
}

/* =========================================================
   ICR Video.js controlbar chrome (v8)
   Fixes:
   - Time spacing (group time elements so gap doesn't explode)
   - Double icons on CC / PiP / Fullscreen (font pseudo-element + SVG)
   - Removes browser-title tooltips when SVG is used
   ========================================================= */

/* Tight time group (current / / duration) */
.video-js.icr-vjs-layout .icr-vjs-timegroup{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-time-control,
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-time-divider{
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-time-divider{
  padding: 0 2px !important;
}

/* Stop default Video.js icon-font from drawing UNDER our SVG */
.video-js.icr-vjs-layout [data-icr-svg="1"]::before,
.video-js.icr-vjs-layout [data-icr-svg="1"]::after,
.video-js.icr-vjs-layout [data-icr-svg="1"] .vjs-icon-placeholder::before,
.video-js.icr-vjs-layout [data-icr-svg="1"] .vjs-icon-placeholder::after{
  content: none !important;
  display: none !important;
}




/* v9.x micro-align: nudge play button to match the left cluster */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle{
  transform: translateY(2px); /* try 1px if 2px is too much */
}

/* =========================================================
   ICR Video.js tooltips + autoplay visibility (v10)
   - Bring back Autoplay toggle (older v3 whitelist CSS was hiding it)
   - Unify tooltips across left/right controls
   ========================================================= */

/* v3/v4 legacy "right-side whitelist" rules were hiding autoplay.
   We now hide using .icr-vjs-hidden-control only, so unhide the right cluster. */
.video-js.icr-vjs-layout .icr-vjs-right > .vjs-control,
.video-js.icr-vjs-layout .icr-vjs-right > .vjs-button{
  display: inline-flex !important;
  align-items: center !important;
}
.video-js.icr-vjs-layout .icr-vjs-right > .icr-vjs-hidden-control{
  display: none !important;
}

/* Give autoplay toggles a sane inline layout regardless of markup */
.video-js.icr-vjs-layout .icr-vjs-right [class*="autoplay" i],
.video-js.icr-vjs-layout .icr-vjs-right [id*="autoplay" i],
.video-js.icr-vjs-layout .icr-vjs-right [aria-label*="autoplay" i]{
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
}

/* Unified control tooltips (white pill like your screenshots)
   JS tags the controls with data-icr-tip="1" and strips browser title tooltips. */
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"]{
  position: relative;
}

/* Tooltip bubble */
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
}

/* Tooltip arrow */
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""])::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
}

.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""]):hover::after,
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""]):hover::before,
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""]):focus-visible::after,
.video-js.icr-vjs-layout .icr-vjs-bottom-row [data-icr-tip="1"][aria-label]:not([aria-label=""]):focus-visible::before{
  opacity: 1;
}


/* =========================================================
   ICR Video.js polish (v11)
   Fixes remaining issues:
   - Autoplay toggle being hidden by missed detection
   - Large visual gap between "current / duration"
   - Right-side tooltips missing / inconsistent
   - Play/Pause tooltip hitbox feeling offset
   ========================================================= */

/* --- Time group: remove fixed-width/right-align that created a big gap --- */
.video-js.icr-vjs-layout .icr-vjs-timegroup{
  gap: 0 !important;
}
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-current-time-display,
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-duration-display{
  min-width: 0 !important;
  text-align: left !important;
}
.video-js.icr-vjs-layout .icr-vjs-timegroup .vjs-time-divider{
  min-width: 0 !important;
  padding: 0 !important;
}

/* --- Autoplay: force visible when JS tags it --- */
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay,
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay *{
  display: inline-flex !important;
  align-items: center !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay{
  height: 34px !important;
}

/* --- Tooltips: apply inside player, not just inside bottom-row (covers right-side buttons) --- */
.video-js.icr-vjs-layout [data-icr-tip="1"]{
  position: relative;
}

/* Bubble */
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
}

/* Arrow */
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""])::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
}

.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""]):hover::after,
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""]):hover::before,
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""]):focus-visible::after,
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""]):focus-visible::before{
  opacity: 1;
}

/* --- Play control: remove translateY and center the icon within the real hitbox --- */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle{
  transform: none !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control .vjs-icon-placeholder:before,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle .vjs-icon-placeholder:before{
  position: relative;
  top: 2px !important;
}


/* =========================================================
   ICR Video.js quick fix (v12)
   - Keep play button in its original aligned position (do not move it)
   - Prevent play icon pseudo-element shifts that can make the tooltip feel "below" the button
   ========================================================= */

.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle{
  transform: translateY(2px) !important;
}

.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control .vjs-icon-placeholder:before,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle .vjs-icon-placeholder:before{
  position: relative !important;
  top: 0 !important;
}

/* =========================================================
   ICR Video.js fixes (v13)
   - Restore CSS tooltips for SVG-driven controls (PiP / Fullscreen / Subtitles)
     (Earlier anti-double-icon rules disabled ::before/::after, which also killed our tooltips.)
   - Raise Play/Pause tooltip bubble without moving the play button
   - Provide styling for the fallback Autoplay toggle (if Muvi doesn't render one)
   ========================================================= */

/* If a control is both SVG and tooltip-tagged, allow tooltip pseudo-elements */
.video-js.icr-vjs-layout [data-icr-svg="1"][data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  content: attr(aria-label) !important;
  display: block !important;
}
.video-js.icr-vjs-layout [data-icr-svg="1"][data-icr-tip="1"][aria-label]:not([aria-label=""])::before{
  content: "" !important;
  display: block !important;
}

/* Play tooltip: keep play button position, just lift the tooltip bubble/arrow slightly */
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control[data-icr-tip="1"][aria-label]:not([aria-label=""])::after,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle[data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  bottom: calc(100% + 16px) !important;
}
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-control[data-icr-tip="1"][aria-label]:not([aria-label=""])::before,
.video-js.icr-vjs-layout .icr-vjs-left .vjs-play-toggle[data-icr-tip="1"][aria-label]:not([aria-label=""])::before{
  bottom: calc(100% + 10px) !important;
}

/* Fallback autoplay toggle (created by JS when Muvi doesn't provide one) */
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay-btn{
  width: 44px !important;
  min-width: 44px !important;
  height: 22px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.22) !important;
  position: relative !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay-btn .icr-vjs-switch{
  position: absolute !important;
  top: 50% !important;
  left: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #fff !important;
  transform: translateY(-50%) translateX(0) !important;
  transition: transform .15s ease !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay-btn.is-on{
  background: var(--icr-accent) !important;
  border-color: var(--icr-accent) !important;
}
.video-js.icr-vjs-layout .icr-vjs-right .icr-vjs-autoplay-btn.is-on .icr-vjs-switch{
  transform: translateY(-50%) translateX(22px) !important;
}


/* =========================================================
   ICR Video.js micro-fix (v14)
   - Prevent browser-native tooltips from reappearing (JS does the removal)
   - Tighten tooltip line-height to eliminate the "blank line" look
   ========================================================= */

.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  line-height: 1.1 !important;
  height: auto !important;
}


/* =========================================================
   ICR Video.js micro-fix (v15)
   - Hide any controls we tag as hidden (works in both left & right clusters)
   - Tooltip bubble: force flex centering to remove the "blank line" look
   ========================================================= */

.video-js.icr-vjs-layout .icr-vjs-hidden-control{
  display: none !important;
}

/* Tooltip: eliminate extra vertical space */
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}


/* =========================================================
   ICR Video.js micro-fix (v16)
   - Hide big overlay play button + overlay playlist prev/next buttons.
     (We keep these actions in the bottom controlbar instead.)
   ========================================================= */

.video-js .vjs-big-play-button{
  display: none !important;
}

.video-js .vjs-icon-previous-item,
.video-js .vjs-icon-next-item,
.video-js .vjs-playlist-prev,
.video-js .vjs-playlist-next,
.video-js .vjs-previous-button,
.video-js .vjs-next-button{
  display: none !important;
}

/* =========================================================
   ICR Video.js tooltip + autoplay cleanup (v17)
   Fixes:
   - Legacy tooltip (usually via .vjs-control-text being revealed on hover) showing on top of our custom tooltip
   - Extra blank line / oversized tooltip bubble (line-height inheritance)
   - Original Muvi autoplay toggle appearing in the LEFT cluster
   ========================================================= */

/* 1) Keep Video.js .vjs-control-text ALWAYS visually hidden (accessibility preserved).
   Some themes unhide this on :hover which creates a second "tooltip". */
.video-js.icr-vjs-layout .vjs-control-text,
.video-js.icr-vjs-layout .vjs-control .vjs-control-text,
.video-js.icr-vjs-layout .vjs-button .vjs-control-text{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2) Tooltip bubble sizing: remove inherited tall line-height that looks like a blank line */
.video-js.icr-vjs-layout [data-icr-tip="1"][aria-label]:not([aria-label=""])::after{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  height: auto !important;
}

/* 3) Hide any autoplay control that Muvi injects into the LEFT cluster.
      (We only want the right-side autoplay switch.) */
.video-js.icr-vjs-layout .icr-vjs-left [class*="autoplay" i],
.video-js.icr-vjs-layout .icr-vjs-left [id*="autoplay" i],
.video-js.icr-vjs-layout .icr-vjs-left [aria-label*="autoplay" i]{
  display: none !important;
}