/* ==========================================================
   LabaFlix — Netflix-style TV skin
   ONLY applies when <html class="is-tv"> is set.
   Desktop and mobile NEVER see this file's rules.
   ========================================================== */

/* ---------- TV-ONLY: LEFT NAV RAIL ---------- */
html.is-tv body {
  padding-left: 90px !important;
  background: #0b0b0b !important;
}
html.is-tv nav#nav,
html.is-tv nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
  width: 90px !important;
  height: 100vh !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 24px 0 !important;
  gap: 18px !important;
  background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.85)) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  z-index: 9999 !important;
}
html.is-tv nav#nav .brand,
html.is-tv nav .brand {
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 20px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  text-align: center !important;
  line-height: 1.1 !important;
  max-width: 80px !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow: visible !important;
}
html.is-tv nav .nav-links {
  flex-direction: column !important;
  gap: 22px !important;
  overflow: visible !important;
  width: 100% !important;
  align-items: center !important;
}
html.is-tv nav .nav-links a {
  font-size: 0.7rem !important;
  text-align: center !important;
  padding: 6px 4px !important;
  border-radius: 6px !important;
  opacity: .7 !important;
}
html.is-tv nav .nav-links a.active,
html.is-tv nav .nav-links a:focus {
  opacity: 1 !important;
  color: #fff !important;
  background: rgba(229,9,20,.15) !important;
  outline: none !important;
}
html.is-tv nav .nav-right {
  margin-top: auto !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Hide the mobile bottom nav entirely on TV */
html.is-tv .mobile-bottom-nav { display: none !important; }

/* ---------- TV HERO ---------- */
html.is-tv .hero {
  height: 68vh !important;
  min-height: 500px !important;
  padding: 0 60px 60px !important;
  margin-bottom: 40px !important;
}
html.is-tv .hero h1,
html.is-tv #hero-title {
  font-size: 4rem !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  margin-bottom: 16px !important;
  text-shadow: 0 4px 24px rgba(0,0,0,.6) !important;
}
html.is-tv .hero p,
html.is-tv .hero-meta {
  font-size: 1.1rem !important;
  margin-bottom: 20px !important;
}
html.is-tv .btn-play {
  font-size: 1.15rem !important;
  padding: 1rem 2.5rem !important;
  border-radius: 6px !important;
}
html.is-tv .btn-play svg {
  width: 26px !important;
  height: 26px !important;
}

/* ---------- TV ROWS ---------- */
html.is-tv .row {
  margin-bottom: 40px !important;
}
html.is-tv .row h3 {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  padding: 0 60px !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}
html.is-tv .row-scroll {
  gap: 16px !important;
  padding: 20px 60px 40px !important;
  scroll-padding-left: 60px !important;
}

/* ---------- TV CARDS ---------- */
html.is-tv .card {
  width: 280px !important;
  border-radius: 8px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important;
  outline: none !important;
}
html.is-tv .card img {
  aspect-ratio: 2 / 3 !important;
  border-radius: 8px !important;
}
html.is-tv .card-info,
html.is-tv .card .info {
  padding: 10px 12px 14px !important;
}
html.is-tv .card-title,
html.is-tv .card .title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}
html.is-tv .card-meta,
html.is-tv .card .meta {
  font-size: 0.9rem !important;
  color: #b3b3b3 !important;
}

/* ---------- NETFLIX-STYLE FOCUS (D-PAD) ---------- */
html.is-tv .card:focus,
html.is-tv .card:focus-visible,
html.is-tv a:focus,
html.is-tv button:focus,
html.is-tv [tabindex]:focus {
  outline: none !important;
}
html.is-tv .card:focus,
html.is-tv .card:focus-visible {
  transform: scale(1.14) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.9), 0 0 0 4px #fff !important;
  z-index: 100 !important;
  border-radius: 10px !important;
}
html.is-tv .card:focus img {
  border-radius: 10px !important;
}
html.is-tv a:focus,
html.is-tv button:focus {
  box-shadow: 0 0 0 3px #fff !important;
  border-radius: 6px !important;
}
html.is-tv nav .nav-links a:focus {
  box-shadow: 0 0 0 3px #fff !important;
}

/* ---------- TV GRID (movies / series) ---------- */
html.is-tv .grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 28px !important;
  padding: 40px 60px !important;
}
html.is-tv .grid .card { width: 100% !important; }

/* ---------- TV TYPE SCALE ---------- */
html.is-tv h1 { font-size: 3rem !important; }
html.is-tv h2 { font-size: 2rem !important; }
html.is-tv .wrap { padding: 100px 60px 80px !important; max-width: 100% !important; }
html.is-tv .sub { font-size: 1.1rem !important; }

/* ---------- TV MODAL / PLAYER ---------- */
html.is-tv .modal-bg,
html.is-tv .modal-backdrop {
  background: rgba(0,0,0,.92) !important;
}
html.is-tv .modal,
html.is-tv [id$="-modal"] {
  max-width: 80vw !important;
  border-radius: 12px !important;
}

/* ---------- HIDE SCROLLBARS ---------- */
html.is-tv ::-webkit-scrollbar { display: none !important; }
html.is-tv * { scrollbar-width: none !important; }

/* ---------- SMOOTH SCROLLING ON FOCUS ---------- */
html.is-tv .row-scroll,
html.is-tv .grid {
  scroll-behavior: smooth !important;
}

/* Force logo horizontal on TV (override any vertical attempt) */
html.is-tv nav .brand,
html.is-tv nav#nav .brand,
html.is-tv .brand {
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  transform: none !important;
  white-space: nowrap !important;
}

/* ==========================================================
   TV OVERLAYS — Search + Profile (Netflix TV style)
   Only visible when html.is-tv + #tv-overlay.open
   ========================================================== */

#tv-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
#tv-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}
#tv-overlay .tv-overlay-inner {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 60px 80px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
#tv-overlay .tv-overlay-inner::-webkit-scrollbar { display: none !important; }

#tv-overlay .tv-overlay-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
}
#tv-overlay .tv-overlay-head h2 {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  margin: 0 !important;
}
#tv-overlay .tv-overlay-close {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  outline: none !important;
}
#tv-overlay .tv-overlay-close:focus {
  box-shadow: 0 0 0 3px #fff !important;
}

#tv-overlay .tv-search-bar {
  margin-bottom: 32px !important;
}
#tv-overlay .tv-search-bar input {
  width: 100% !important;
  background: rgba(255,255,255,.06) !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 1.6rem !important;
  padding: 22px 28px !important;
  border-radius: 12px !important;
  outline: none !important;
  font-family: inherit !important;
}
#tv-overlay .tv-search-bar input:focus {
  border-color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

#tv-overlay .tv-sec-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 24px 0 18px !important;
}

#tv-overlay .tv-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 24px !important;
}

#tv-overlay .tv-row {
  margin-bottom: 40px !important;
}
#tv-overlay .tv-row h3 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  color: #fff !important;
}
#tv-overlay .tv-row-scroll {
  display: flex !important;
  gap: 20px !important;
  overflow-x: auto !important;
  padding-bottom: 12px !important;
  scrollbar-width: none !important;
}
#tv-overlay .tv-row-scroll::-webkit-scrollbar { display: none !important; }

#tv-overlay .card {
  width: 100% !important;
  flex: 0 0 auto !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important;
}
#tv-overlay .tv-row-scroll .card {
  width: 240px !important;
}
#tv-overlay .card img {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}
#tv-overlay .card-info {
  padding: 10px 4px !important;
}
#tv-overlay .card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
#tv-overlay .card-meta {
  font-size: .85rem !important;
  color: #b3b3b3 !important;
}
#tv-overlay .card:focus,
#tv-overlay .card:focus-visible {
  transform: scale(1.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.9), 0 0 0 4px #fff !important;
  z-index: 10 !important;
}

#tv-overlay .tv-profile-head {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin-bottom: 48px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
#tv-overlay .tv-profile-head img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  background: #2a2a2a !important;
}
#tv-overlay .tv-profile-name {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #fff !important;
}
#tv-overlay .tv-profile-plan {
  font-size: 1rem !important;
  color: #b3b3b3 !important;
  margin-top: 6px !important;
}

#tv-overlay .tv-empty {
  padding: 60px 20px !important;
  color: #888 !important;
  font-size: 1.1rem !important;
  text-align: center !important;
}

/* ---------- TV NOTIFICATIONS OVERLAY ---------- */
#tv-overlay .tv-notif-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
#tv-overlay .tv-notif {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  outline: none !important;
  transition: transform .2s, background .2s, box-shadow .2s !important;
  cursor: pointer !important;
}
#tv-overlay .tv-notif.unread {
  border-left: 4px solid #e50914 !important;
  background: rgba(229,9,20,.06) !important;
}
#tv-overlay .tv-notif-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}
#tv-overlay .tv-notif-msg {
  font-size: 1rem !important;
  color: #cfcfcf !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}
#tv-overlay .tv-notif-time {
  font-size: .85rem !important;
  color: #888 !important;
}
#tv-overlay .tv-notif:focus,
#tv-overlay .tv-notif:focus-visible {
  background: rgba(255,255,255,.10) !important;
  box-shadow: 0 0 0 3px #fff !important;
  transform: translateX(6px) !important;
}

/* ---------- TV BELL BUTTON ---------- */
html.is-tv .tv-bell {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background .2s, box-shadow .2s, transform .2s !important;
}
html.is-tv .tv-bell:hover {
  background: rgba(255,255,255,.12) !important;
}
html.is-tv .tv-bell:focus,
html.is-tv .tv-bell:focus-visible {
  background: rgba(255,255,255,.15) !important;
  box-shadow: 0 0 0 3px #fff !important;
  transform: scale(1.08) !important;
}
html.is-tv .tv-bell svg {
  width: 24px !important;
  height: 24px !important;
}
html.is-tv .tv-bell-dot {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 10px !important;
  height: 10px !important;
  background: #e50914 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.8) !important;
}

/* ---------- HIDE DUPLICATE BELLS ON TV ---------- */
/* Every page (except home) has its own #notifBtn in the nav.
   Hide it on TV so only our injected .tv-bell shows.
   Desktop + mobile: untouched (no .is-tv). */
html.is-tv #notifBtn,
html.is-tv .notif-btn:not(.tv-bell),
html.is-tv #notifWrap,
html.is-tv .notif-wrap,
html.is-tv .notif-panel,
html.is-tv #notifPanel {
  display: none !important;
}

/* ---------- FINAL TV LOGO FIX ---------- */
html.is-tv nav .brand,
html.is-tv nav#nav .brand,
html.is-tv .brand {
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  text-align: center !important;
  line-height: 1.15 !important;
  max-width: 80px !important;
  white-space: normal !important;
  overflow: visible !important;
  transform: none !important;
  display: block !important;
}