/* ==========================================================================
   vxh — Netflix-style header for styles/default
   Consumes ONLY existing customizer variables (--vod-*), so tenant colors
   set via the template customizer apply unchanged. vodlix.css is untouched;
   every selector here is namespaced under .vxh / .vxh-drawer / body helpers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bar
   -------------------------------------------------------------------------- */
.vxh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* above legacy 110, below Bootstrap modals (1050) */
  background: linear-gradient(180deg, var(--vod-header-gradient-top) 10%, var(--vod-header-gradient-bottom));
}

/* Scrolled state: cross-fade to the tenant's scroll gradient (same vars +
   geometry as the legacy .appHeaderOpt rule, so saved customizations render
   identically — the swap just animates now). */
.vxh::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: linear-gradient(139deg, var(--vod-scroll-header-gradient-left) 39%, var(--vod-scroll-header-gradient-right) 100%);
}
.vxh.is-scrolled::before {
  opacity: 1;
}

.vxh__bar {
  position: relative; /* paints above ::before */
  z-index: 1;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 4%;
  gap: 4px;
}
.vxh__bar > * {
  flex-shrink: 0;
}

.vxh__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.vxh__logo {
  margin: 0 20px 0 0;
  padding: 0;
  line-height: 0;
}
.vxh__logo a {
  display: inline-block;
}
.vxh__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Burger (mobile only)
   -------------------------------------------------------------------------- */
.vxh__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
}
.vxh__burger i {
  font-size: 26px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Desktop nav
   -------------------------------------------------------------------------- */
.vxh__nav {
  flex-shrink: 1;
  min-width: 0;
}
.vxh__navList {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vxh__navList .nav-item {
  white-space: nowrap;
}
.vxh__navLink {
  display: inline-block;
  padding: 6px 10px;
  color: var(--vod-white-color);
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.vxh__navLink:hover,
.vxh__navLink:focus {
  color: var(--vod-white-color);
  opacity: 0.7;
  text-decoration: none;
}
.vxh__navLink.is-active {
  font-weight: 600;
  opacity: 1;
}
.vxh__navLink.dropdown-toggle::after {
  vertical-align: 0.15em;
}

/* --------------------------------------------------------------------------
   Dropdown menus (nav submenus, language, user) — Bootstrap-driven
   -------------------------------------------------------------------------- */
.vxh__menu.dropdown-menu {
  min-width: 200px;
  margin-top: 10px;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 2px solid var(--vod-primary);
  border-radius: 2px;
  background-color: var(--vod-menu-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.vxh__menu .dropdown-item {
  padding: 9px 18px;
  color: var(--vod-white-color);
  font-size: 14px;
  background-color: transparent;
}
.vxh__menu .dropdown-item:hover,
.vxh__menu .dropdown-item:focus,
.vxh__menu .dropdown-item.active {
  color: var(--vod-white-color);
  background-color: rgba(255, 255, 255, 0.08);
}
.vxh__menu .dropdown-item.text-danger {
  color: var(--vod-danger, #e57373);
}
.vxh__menu .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Icon buttons (search toggle, language, user)
   -------------------------------------------------------------------------- */
.vxh__iconBtn {
  display: flex;
  align-items: center;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.vxh__iconBtn:hover,
.vxh__iconBtn:focus {
  color: var(--vod-white-color);
  opacity: 0.75;
  outline: none;
  box-shadow: none;
  text-decoration: none;
}
.vxh__iconBtn i {
  font-size: 22px;
  line-height: 1;
}
.vxh__iconBtn.dropdown-toggle::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Expanding search
   NOTE: collapsed via width/opacity only — the input (#vodlix-search-field)
   must stay in the DOM for the Algolia/Typesense autocomplete plugins, and
   NO ancestor may use overflow:hidden or their suggestion panel gets clipped.
   -------------------------------------------------------------------------- */
.vxh__search {
  display: flex;
  align-items: center;
}
.vxh__searchBox {
  position: relative; /* anchors plugin-inserted absolute suggestion panels */
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease, opacity 0.2s ease;
}
.vxh__search.is-open .vxh__searchBox {
  width: min(260px, 50vw);
  opacity: 1;
  pointer-events: auto;
}
.vxh__searchInput {
  width: 100%;
  height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--vod-white-color);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.75);
  color: var(--vod-white-color);
  font-size: 14px;
}
.vxh__searchInput:focus {
  outline: none;
  border-color: var(--vod-white-color);
  background-color: rgba(0, 0, 0, 0.9);
}
.vxh__searchInput::placeholder {
  color: var(--vod-placeholder-color, #fff);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */
.vxh__lang .vxh__langCode {
  margin-left: 4px;
  font-size: 13px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   User menu
   -------------------------------------------------------------------------- */
.vxh__avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px; /* Netflix-style rounded square */
  object-fit: cover;
}
.vxh__userName {
  margin-left: 8px;
  color: var(--vod-white-color);
  font-size: 13px;
}
.vxh__caret {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.show > .vxh__iconBtn .vxh__caret,
.vxh__user.show .vxh__caret {
  transform: rotate(180deg);
}
.vxh__menu .vxh__avatar {
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   Guest buttons
   -------------------------------------------------------------------------- */
.vxh__btn.btn {
  margin-left: 8px;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vod-header-btn-text-color);
  box-shadow: none;
}
.vxh__btn.btn:hover,
.vxh__btn.btn:focus {
  color: var(--vod-header-btn-text-color);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.vxh-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.vxh-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.vxh-drawer__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.vxh-drawer.is-open .vxh-drawer__backdrop {
  opacity: 1;
}
.vxh-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: var(--vod-menu-bg);
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.vxh-drawer.is-open .vxh-drawer__panel {
  transform: translateX(0);
}
.vxh-drawer__close {
  align-self: flex-end;
  margin: 8px 8px 0 0;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
}
.vxh-drawer__close i {
  font-size: 24px;
  line-height: 1;
}
.vxh-drawer__nav {
  padding: 4px 0 24px;
}
.vxh-drawer__link {
  display: block;
  padding: 13px 22px;
  color: var(--vod-white-color);
  font-size: 15px;
  text-decoration: none;
}
.vxh-drawer__link:hover,
.vxh-drawer__link:focus,
.vxh-drawer__link.is-active {
  color: var(--vod-white-color);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.vxh-drawer__link.is-active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vod-primary);
}
.vxh-drawer__groupToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.vxh-drawer__groupToggle i {
  font-size: 20px;
  transition: transform 0.2s ease;
}
.vxh-drawer__group.is-open .vxh-drawer__groupToggle i {
  transform: rotate(180deg);
}
.vxh-drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(0, 0, 0, 0.25);
}
.vxh-drawer__group.is-open .vxh-drawer__sub {
  max-height: 100vh;
}
.vxh-drawer__sub .vxh-drawer__link {
  padding-left: 34px;
  font-size: 14px;
}

body.vxh-noscroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive — breakpoint matches the old d-lg-* split (Bootstrap 4 lg)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .vxh-drawer {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .vxh__bar {
    height: 52px;
    padding: 0 12px;
  }
  .vxh__nav {
    display: none;
  }
  .vxh__burger {
    display: flex;
  }
  .vxh__logo {
    margin-right: 8px;
  }
  .vxh__logo img {
    height: 26px;
    max-width: 130px;
  }
}

@media (max-width: 767.98px) {
  .vxh__userName {
    display: none;
  }
  /* compact bar so guest buttons never overflow a 360-375px viewport */
  .vxh__bar {
    padding: 0 8px;
    gap: 2px;
  }
  .vxh__logo img {
    max-width: 104px;
  }
  .vxh__iconBtn {
    padding: 4px;
  }
  .vxh__langCode {
    display: none;
  }
  .vxh__btn.btn {
    margin-left: 4px;
    padding: 5px 10px;
    font-size: 12px;
  }
  body.rtl .vxh__btn.btn {
    margin-left: 0;
    margin-right: 4px;
  }
  /* Search opens as a full-bar overlay, app style */
  .vxh__search.is-open {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 2;
    padding: 0 10px;
    background: var(--vod-menu-bg);
  }
  .vxh__search.is-open .vxh__searchBox {
    flex: 1 1 auto;
    width: auto;
  }
  /* Legacy vodlix.css zeroes .contentHolder padding under 768px because the
     old header was in-flow there; the vxh header is fixed, so restore an
     offset on every page except home (home's hero sits under the bar). */
  body:not(.page-home) .contentHolder {
    padding-top: 60px !important;
  }
}

/* --------------------------------------------------------------------------
   Page-scoped
   -------------------------------------------------------------------------- */
/* Homepage hero sits under the transparent header — only when the page really
   opens with a hero slider (:has-guarded; browsers without :has, and tenants
   whose homepage starts with plain card rows, keep the padded layout). On
   mobile the legacy featureSlider -3rem margin already lands the hero at y=0. */
@media (min-width: 768px) {
  body.page-home .contentHolder:has(.featureSlider) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 767.98px) {
  /* no hero on mobile home either -> clear the fixed bar like other pages */
  body.page-home .contentHolder:not(:has(.featureSlider)) {
    padding-top: 60px !important;
  }
}

/* watch_video keeps an in-flow header (parity with legacy rule) */
.watchVideoPage .vxh {
  position: relative;
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxh__logo {
  margin: 0 0 0 20px;
}
body.rtl .vxh__burger {
  margin-right: 0;
  margin-left: 4px;
}
body.rtl .vxh__userName {
  margin-left: 0;
  margin-right: 8px;
}
body.rtl .vxh__btn.btn {
  margin-left: 0;
  margin-right: 8px;
}
body.rtl .vxh__menu .vxh__avatar {
  margin-right: 0;
  margin-left: 8px;
}
body.rtl .vxh-drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
body.rtl .vxh-drawer.is-open .vxh-drawer__panel {
  transform: translateX(0);
}
body.rtl .vxh-drawer__close {
  align-self: flex-start;
  margin: 8px 0 0 8px;
}
body.rtl .vxh-drawer__groupToggle {
  text-align: right;
}
body.rtl .vxh-drawer__link.is-active {
  box-shadow: inset -3px 0 0 var(--vod-primary);
}
body.rtl .vxh-drawer__sub .vxh-drawer__link {
  padding-left: 22px;
  padding-right: 34px;
}
@media (max-width: 991.98px) {
  body.rtl .vxh__logo {
    margin-right: 0;
    margin-left: 8px;
  }
}

/* --------------------------------------------------------------------------
   Global loader — restyles Bootstrap's .spinner-border everywhere into a
   Netflix-style ring: faint track, primary arc with a comet tail. Pure CSS
   over the existing markup (spinner-border text-primary), no template edits.
   -------------------------------------------------------------------------- */
.spinner-border {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent);
  border-top-color: var(--vod-primary);
  border-right-color: color-mix(in srgb, var(--vod-primary) 45%, transparent);
  animation: vx-spin 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.spinner-border-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
@keyframes vx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxh::before,
  .vxh__searchBox,
  .vxh__caret,
  .vxh-drawer,
  .vxh-drawer__backdrop,
  .vxh-drawer__panel,
  .vxh-drawer__sub,
  .vxh-drawer__groupToggle i {
    transition: none;
  }
}