/* Fresh, cache-independent TFlix navigation overrides. */
:is(#header, .cinema-shell-header) .nav-link,
:is(#header, .cinema-shell-header) .library-nav-btn,
:is(#header, .cinema-shell-header) .search-toggle {
  width: calc(100% - 28px) !important;
  min-width: 0 !important;
  margin-left: 14px !important;
  margin-right: 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #a1a1aa !important;
}

:is(#header, .cinema-shell-header) .nav-link:hover,
:is(#header, .cinema-shell-header) .library-nav-btn:hover,
 :is(#header, .cinema-shell-header) .search-toggle:hover {
  background: rgba(255,255,255,.08) !important;
  border: 0 !important;
  color: #f4f4f5 !important;
  box-shadow: none !important;
}

:is(#header, .cinema-shell-header) .nav-link.active {
  background: #e50914 !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(229,9,20,.28) !important;
}

/* Remote/keyboard focus is the pressed-looking state on TV. */
:is(#header, .cinema-shell-header) .nav-link:focus,
:is(#header, .cinema-shell-header) .library-nav-btn:focus,
:is(#header, .cinema-shell-header) .search-toggle:focus,
html.keynav :is(#header, .cinema-shell-header) .kf {
  background: #e50914 !important;
  color: #fff !important;
  outline: 0 !important;
  box-shadow: 0 4px 18px rgba(229,9,20,.28) !important;
}

:is(#header, .cinema-shell-header) .theme-toggle { display: none !important; }
:is(#header, .cinema-shell-header) .nav-dropdown { width: calc(100% - 28px) !important; margin-left: 14px !important; margin-right: 14px !important; }
:is(#header, .cinema-shell-header) .nav-dropdown > .nav-link { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
:is(#header, .cinema-shell-header) .search-wrap { width: calc(100% - 28px) !important; margin-left: 14px !important; margin-right: 14px !important; }
:is(#header, .cinema-shell-header) .search-wrap .search-toggle { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
:is(#header, .cinema-shell-header) .nav-link,
:is(#header, .cinema-shell-header) .library-nav-btn { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
:is(#header, .cinema-shell-header) .nav-dropdown,
:is(#header, .cinema-shell-header) .search-wrap { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Search opens across the top of the content area, aligned like a desktop
   search field instead of appearing at the bottom of the TV rail. */
:is(#header, .cinema-shell-header) .search-wrap.search-open input {
  display: block !important;
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(420px, 60vw) !important;
  height: 42px !important;
  z-index: 600 !important;
}
:is(#header, .cinema-shell-header) #search-clear {
  position: fixed !important;
  top: 25px !important;
  bottom: auto !important;
  left: calc(50% + min(210px, 30vw) - 30px) !important;
  right: auto !important;
  z-index: 601 !important;
}

:is(#header, .cinema-shell-header) .search-wrap:focus-within input {
  display: block !important;
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(420px, 60vw) !important;
  height: 42px !important;
  z-index: 600 !important;
}

:is(#header, .cinema-shell-header) .search-wrap:hover input,
:is(#header, .cinema-shell-header) .search-wrap:has(#search-toggle:focus) input {
  display: block !important;
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(420px, 60vw) !important;
  height: 42px !important;
  z-index: 600 !important;
}

/* Final active state: only the item for the current page is red. */
:is(#header, .cinema-shell-header) .nav-link.active {
  background: #e50914 !important;
  border-color: #e50914 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(229,9,20,.28) !important;
}

/* Universal search fallback: the shell may be injected without the legacy #header id. */
#search {
  display: block !important;
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(420px, 60vw) !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 2.4rem 0 1rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 600 !important;
}
#search-wrap.search-open #search,
#search-wrap.open #search,
#search-wrap:focus-within #search,
#search-wrap:hover #search {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#search-clear { z-index: 601 !important; }

/* The rail is itself a fixed containing block on some browsers. Use viewport units
   so the search field and suggestions remain centered instead of centering in the rail. */
#search {
  left: 50vw !important;
  transform: translateX(-50%) !important;
}
#search-suggestions {
  left: 50vw !important;
  transform: translateX(-50%) !important;
}
#search-clear {
  position: fixed !important;
  left: calc(50vw + min(210px, 30vw) - 30px) !important;
  right: auto !important;
  top: 25px !important;
  bottom: auto !important;
}

/* The rail Search control is always its own visible navigation tile.  The
   field is portalled to the page center when opened, so the tile must not
   participate in the old expanding-input layout. */
@media (min-width: 861px) {
  .cinema-shell-header #search-wrap {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 350 !important;
  }
  .cinema-shell-header #search-wrap .search-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 84px !important;
    height: 84px !important;
    margin: 0 !important;
  }
}

/* Samsung TV uses a smaller WebView viewport than a desktop browser. Keep
   the rail layout independent of that breakpoint: Search is the final item
   in the rail and stays below Watchlist instead of appearing above the logo. */
html.tv-mode .cinema-shell-header {
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 116px !important;
  height: 100vh !important;
  padding: 22px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
html.tv-mode .cinema-shell-header .nav-links {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
  padding: 0 14px !important;
}
html.tv-mode .cinema-shell-header .nav-links > .search-wrap {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  flex: 0 0 84px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.tv-mode .cinema-shell-header .mobile-nav-toggle,
html.tv-mode .cinema-shell-header .nav-right {
  display: none !important;
}