/**
 * SANSAT PLAYER (H-V1)
 * Theme: Obsidian Deep Black (#000000 / #050508), Apple Frosted Glass Acrylic, Pure High-Contrast White (#ffffff)
 * Full Responsive Dual Engine: 10-foot TV Spatial Remote + Touch Mobile-First (Portrait & Landscape)
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/inter-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/inter-800.ttf') format('truetype');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/barlow-condensed-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/barlow-condensed-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/barlow-condensed-900.ttf') format('truetype');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/anton.ttf') format('truetype');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/bebas-neue.ttf') format('truetype');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/tajawal-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/tajawal-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/tajawal-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/tajawal-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/tajawal-extrabold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/tajawal-black.ttf') format('truetype');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/tajawal-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/tajawal-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/tajawal-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/tajawal-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/tajawal-extrabold.ttf') format('truetype');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/tajawal-black.ttf') format('truetype');
}

:root {
  --bg-dark: #0a0306;
  --bg-card: rgba(229, 9, 20, 0.05);
  --bg-card-hover: rgba(229, 9, 20, 0.12);
  --bg-surface: #0f050b;
  --bg-pill: rgba(255, 255, 255, 0.08);

  --apple-white: #ffffff;
  --apple-black: #000000;
  --apple-blue: #e50914;
  --apple-glow: rgba(229, 9, 20, 0.35);

  --brand-crimson: #e50914;
  --brand-crimson-hover: #ff2233;
  --brand-crimson-glow: rgba(229, 9, 20, 0.45);

  --primary-red: #e50914;
  --primary-red-hover: #ff2233;
  --primary-red-glow: rgba(229, 9, 20, 0.45);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted: rgba(255, 255, 255, 0.48);

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-focus: #e50914;

  --status-active: #e50914;
  --status-error: #ff453a;

  --font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Universal Layout System (Identical Margins & Headers on Every Screen) */
  --app-header-h: 56px;
  --app-pad-x: max(env(safe-area-inset-left, 0px), 24px);
  --app-pad-r: max(env(safe-area-inset-right, 0px), 24px);
  --app-pad-top: max(env(safe-area-inset-top, 0px), clamp(16px, 2.4vh, 22px));
  --app-pad-bottom: max(env(safe-area-inset-bottom, 0px), clamp(14px, 2vh, 18px));
  --app-sidebar-w: clamp(210px, 22vw, 260px);

  /* Unified Ambient Glow Background Token — SANSAT OTT (Radiant from top center coming down) */
  --app-bg-gradient: radial-gradient(ellipse 110% 80% at 50% 0%, #3d070e 0%, #220408 35%, #0f0103 68%, #000000 100%);
  --sansat-red: #b5121b;
  --sansat-red-dark: #8b0d14;
  --sansat-red-glow: rgba(181, 18, 27, 0.45);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  color: var(--text-primary);
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

h1, h2, h3, h4, h5, h6,
.orient-title,
.orient-brand,
.splash-hero-title,
.splash-brand {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: transparent;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: transparent;
}

/* =========================================================
   FOCUS & NAVIGATION (TV REMOTE & ACCESSIBILITY)
========================================================= */
:focus-visible:not(input):not(textarea):not(select),
.nav-focused:not(input):not(textarea):not(select) {
  outline: 2px solid #ff3344 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  z-index: 10;
}

/* Explicit exemption: Never show outline, border or box-shadow on focus for search inputs or capsules */
input,
input:focus,
input:focus-visible,
input.nav-focused,
input[type="text"],
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="text"].nav-focused,
input[type="search"],
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="search"].nav-focused,
textarea,
textarea:focus,
textarea:focus-visible,
textarea.nav-focused,
.tv-sr-q,
.tv-sr-q:focus,
.tv-sr-q:focus-visible,
.tv-sr-q.nav-focused,
.tv-rp-q,
.tv-rp-q:focus,
.tv-rp-q:focus-visible,
.tv-rp-q.nav-focused,
.settings-cat-search-input,
.settings-cat-search-input:focus,
.settings-cat-search-input:focus-visible,
.settings-cat-search-input.nav-focused,
.catchup-search-input,
.catchup-search-input:focus,
.catchup-search-input:focus-visible,
.catchup-search-input.nav-focused,
.catchup-search-pill:focus,
.catchup-search-pill:focus-within,
.catchup-search-pill:focus-visible,
.catchup-search-pill.nav-focused,
.live-search-input:focus,
.live-search-input:focus-visible,
.live-search-input.nav-focused,
.media-search-input:focus,
.media-search-input:focus-visible,
.media-search-input.nav-focused,
.ms-drawer-search-input:focus,
.ms-drawer-search-input:focus-visible,
.ms-drawer-search-input.nav-focused,
.search-input:focus,
.search-input:focus-visible,
.search-input.nav-focused,
.search-input-field:focus,
.search-input-field:focus-visible,
.search-input-field.nav-focused,
#search-input:focus,
#search-input:focus-visible,
#search-input.nav-focused,
.search-input-capsule:focus,
.search-input-capsule:focus-within,
.search-input-capsule:focus-visible,
.search-input-capsule.nav-focused,
.sports-news-story-wrap,
.sports-news-story-wrap:focus,
.sports-news-story-wrap:focus-visible,
.sports-news-story-wrap.nav-focused,
.sports-news-modal-card,
.sports-news-modal-card:focus,
.sports-news-modal-card:focus-visible,
.sports-news-modal-card.nav-focused,
.sports-news-paragraph,
.sports-news-paragraph:focus,
.sports-news-paragraph:focus-visible,
.sansat-sports-lock-card,
.sansat-sports-lock-card:focus,
.sansat-sports-lock-card:focus-visible,
.sansat-sports-lock-card.nav-focused,
#tvSrInput,
#tvSrInput:focus,
#tvSrInput:focus-visible,
#tvSrInput.nav-focused,
#tvCatchupQ,
#tvCatchupQ:focus,
#tvCatchupQ:focus-visible,
#tvCatchupQ.nav-focused,
#tvSearchInput,
#tvSearchInput:focus,
#tvSearchInput:focus-visible,
#tvSearchInput.nav-focused {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Explicit exemption: Never show outline, border or box-shadow on focus for back buttons & sports top menu */
.catchup-back-btn,
.catchup-back-btn:focus,
.catchup-back-btn:focus-visible,
.catchup-back-btn.nav-focused,
.live-back-chevron:focus,
.live-back-chevron:focus-visible,
.live-back-chevron.nav-focused,
.dl-back-btn:focus,
.dl-back-btn:focus-visible,
.dl-back-btn.nav-focused,
.search-back-btn:focus,
.search-back-btn:focus-visible,
.search-back-btn.nav-focused,
.settings-back-btn:focus,
.settings-back-btn:focus-visible,
.settings-back-btn.nav-focused,
.sports-top-bar button:focus,
.sports-top-bar button:focus-visible,
.sports-top-bar button.nav-focused,
.sports-btn-standings:focus,
.sports-btn-standings:focus-visible,
.sports-btn-standings.nav-focused,
.sports-btn-transfers:focus,
.sports-btn-transfers:focus-visible,
.sports-btn-transfers.nav-focused,
.sports-date-pill:focus,
.sports-date-pill:focus-visible,
.sports-date-pill.nav-focused,
.sports-refresh-btn:focus,
.sports-refresh-btn:focus-visible,
.sports-refresh-btn.nav-focused,
.tv-sports-mode *,
.tv-sports-mode *:focus,
.tv-sports-mode *:focus-visible,
.tv-sports-mode .nav-focused,
.tv-sp-app,
.tv-sp-app *,
.tv-sp-app *:focus,
.tv-sp-app *:focus-visible,
.tv-sp-app .nav-focused,
.tv-sp-date-chip,
.tv-sp-date-chip:focus,
.tv-sp-date-chip:focus-visible,
.tv-sp-date-chip.nav-focused,
.tv-sp-act-btn,
.tv-sp-act-btn:focus,
.tv-sp-act-btn:focus-visible,
.tv-sp-act-btn.nav-focused,
.tv-sp-league-pill,
.tv-sp-league-pill:focus,
.tv-sp-league-pill:focus-visible,
.tv-sp-league-pill.nav-focused,
.tv-sp-card,
.tv-sp-card:focus,
.tv-sp-card:focus-visible,
.tv-sp-card.nav-focused,
.tv-sp-ch-btn,
.tv-sp-ch-btn:focus,
.tv-sp-ch-btn:focus-visible,
.tv-sp-ch-btn.nav-focused,
.tv-sp-modal-close,
.tv-sp-modal-close:focus,
.tv-sp-modal-close:focus-visible,
.tv-sp-modal-close.nav-focused {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   1. SPLASH SCREEN (SANSAT OTT LUXURY RED & OBSIDIAN)
========================================================= */
.splash-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  background-color: #0c0408;
  background-image: radial-gradient(circle at 50% 45%, #220612 0%, #0c0408 85%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-glow-aura {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(229, 9, 20, 0.28) 0%, transparent 70%);
  border-radius: 50%;
  animation: splashPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes splashPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 1; }
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 0 24px;
  max-width: 820px;
  box-sizing: border-box;
}

.splash-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2px;
}

.splash-logo-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(229, 9, 20, 0.65), 0 0 70px rgba(229, 9, 20, 0.3);
  animation: logoFloat 3s ease-in-out infinite;
  object-fit: contain;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.splash-hero-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.splash-hero-desc {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

html[dir="rtl"] .splash-hero-title,
html[dir="rtl"] .splash-hero-desc,
html[lang="ar"] .splash-hero-title,
html[lang="ar"] .splash-hero-desc,
body.rtl-mode .splash-hero-title,
body.rtl-mode .splash-hero-desc,
html[dir="rtl"] .orient-title,
html[dir="rtl"] .orient-sub,
html[dir="rtl"] .orient-brand,
html[lang="ar"] .orient-title,
html[lang="ar"] .orient-sub,
html[lang="ar"] .orient-brand,
body.rtl-mode .orient-title,
body.rtl-mode .orient-sub,
body.rtl-mode .orient-brand {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.splash-brand {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.splash-brand span {
  color: #e50914;
  text-shadow: 0 0 20px rgba(229, 9, 20, 0.6);
}

.splash-loader-bar {
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

.splash-loader-progress {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #e50914, #ffffff, #e50914, transparent);
  animation: splashSlide 1.2s infinite ease-in-out;
}

@keyframes splashSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.splash-status {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

/* =========================================================
   2. TOP NAVIGATION HEADER (APPLE TV FROSTED GLASS)
========================================================= */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.header-logo-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.header-logo-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}

.header-logo-title span {
  color: rgba(255, 255, 255, 0.65);
}

.header-separator {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
}

.header-nav-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.rotating svg {
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.header-pill svg {
  background: transparent;
  padding: 0;
  width: 16px;
  height: 16px;
  color: inherit;
  flex-shrink: 0;
  border: none;
}

.header-pill span {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  background: transparent;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.header-pill:hover,
.header-pill.nav-focused {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.header-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.25) !important;
}

.header-pill.active svg,
.header-pill.active span {
  color: #000000 !important;
  stroke: #000000 !important;
}

.header-right-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-icon-btn:hover,
.header-icon-btn.nav-focused {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* =========================================================
   3. MAIN DASHBOARD (HOME SCREEN)
========================================================= */
.dashboard-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 32px;
  height: 100vh;
  overflow-y: auto;
}

.hero-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  flex: 1;
  align-items: center;
  max-height: 480px;
  margin: auto 0;
  width: 100%;
}

.hero-card {
  height: 100%;
  max-height: 440px;
  min-height: 320px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(18, 19, 26, 0.75) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

.hero-card:hover,
.hero-card.nav-focused {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(32, 34, 46, 0.85) 100%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75), 0 0 28px rgba(255, 255, 255, 0.2);
  transform: translateY(-6px) scale(1.03);
}

.hero-card-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-card-icon svg {
  width: 80px;
  height: 80px;
  stroke: #ffffff;
  stroke-width: 1.8;
}

.hero-card-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

/* Dashboard Bottom Status Bar */
.dashboard-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  margin-top: 16px;
}

.bottom-pill-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bottom-pill-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bottom-pill-val {
  color: #fff;
  font-weight: 700;
}

.bottom-pill-box .label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.bottom-pill-box .val {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.bottom-pill-box .val-red {
  color: #ffffff;
  font-weight: 800;
}

.bottom-center-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.bottom-center-info .playlist-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
  text-align: center;
}

.bottom-center-info .days-remaining {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}

.bottom-weather-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.weather-city {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.weather-clock {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* =========================================================
   4. CHANNELS, VOD, AND SERIES SHARED LAYOUT
========================================================= */
.channels-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.groups-sidebar {
  width: 260px;
  background: rgba(12, 13, 18, 0.75);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  gap: 5px;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.group-item {
  font-family: inherit;
  padding: 10px 14px;
  min-height: 42px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.1px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.group-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.group-item.active {
  background: #e50914 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.45) !important;
  border-color: #e50914 !important;
}

.group-item:focus,
.group-item.nav-focused {
  outline: 2px solid #e50914 !important;
  outline-offset: -1px !important;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.5) !important;
  border-color: #e50914 !important;
}

.channels-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  overflow: hidden;
}

.channels-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.search-input:focus,
.search-input:focus-visible,
.search-input.nav-focused {
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.1);
}

.channels-count-badge {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   5. LIVE TV CHANNELS LIST ITEMS (APPLE TV STYLE)
========================================================= */
.channels-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.channel-card-row {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 16px;
}

.channel-card-row:hover,
.channel-card-row.focused {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  transform: translateX(4px);
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.25) !important;
}

.channel-card-row:hover .channel-name-txt,
.channel-card-row.focused .channel-name-txt {
  color: #000000 !important;
}

.channel-card-row:hover .channel-num-badge,
.channel-card-row.focused .channel-num-badge {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #000000 !important;
}

.channel-num-badge {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 38px;
  text-align: center;
}

.channel-logo-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.channel-logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.channel-info-box {
  flex: 1;
  overflow: hidden;
}

.channel-name-txt {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-group-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   6. VOD & SERIES MOVIE POSTER CARDS (APPLE TV POSTERS)
========================================================= */
.media-posters-grid {
  flex: 1 1 0px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 4px 0 30px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.movie-poster-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0 !important;
  outline: none !important;
}

.movie-poster-card:hover,
.movie-poster-card.focused,
.movie-poster-card.nav-focused {
  transform: translateY(-6px) scale(1.05) !important;
  z-index: 10;
}

.poster-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.movie-poster-card:hover .poster-image-wrap,
.movie-poster-card.focused .poster-image-wrap,
.movie-poster-card.nav-focused .poster-image-wrap {
  border-color: #e50914 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(229, 9, 20, 0.45) !important;
}

.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #131624, #1d2238);
  color: rgba(255, 255, 255, 0.35);
}

.poster-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffb703;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 183, 3, 0.3);
  z-index: 2;
}

html[dir="rtl"] .poster-rating {
  right: auto;
  left: 8px;
}

.poster-info-box {
  padding: 8px 4px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.poster-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  transition: color 0.2s;
}

.movie-poster-card:hover .poster-title,
.movie-poster-card.focused .poster-title,
.movie-poster-card.nav-focused .poster-title {
  color: #e50914;
}

.poster-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-poster-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  background: linear-gradient(135deg, #12131c, #1a1c29);
  z-index: 0;
}

.movie-poster-placeholder svg {
  width: 36px;
  height: 36px;
  opacity: 0.35;
  margin-bottom: 6px;
}

.movie-poster-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 7, 10, 0.95) 90%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.movie-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.movie-card-sub {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   7. SETTINGS SCREEN
========================================================= */
.settings-screen-wrapper {
  padding: 24px 32px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-dark);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.settings-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-back-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.settings-columns-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  flex: 1;
}

.settings-categories-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(12, 13, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  height: fit-content;
}

.settings-cat-item {
  padding: 12px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: none;
}

.settings-cat-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.settings-cat-item.active {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.settings-options-col {
  background: rgba(24, 26, 34, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-option-item {
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
}

.settings-option-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.settings-option-item.nav-focused,
.settings-option-item:focus {
  outline: none;
  border-color: #e50914 !important;
  background: rgba(229, 9, 20, 0.15) !important;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.4);
  transform: scale(1.015);
}

.settings-option-item.selected {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* =========================================================
   8. VIDEO PLAYER FULLSCREEN & OSD
========================================================= */
.player-container {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 100;
  overflow: hidden;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-video.aspect-fill {
  object-fit: fill !important;
  width: 100vw !important;
  height: 100vh !important;
}

.player-video.aspect-cover {
  object-fit: cover !important;
  width: 100vw !important;
  height: 100vh !important;
}

.player-video.aspect-contain {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* Modern Luxury Player OSD - Back Chevron matching native app */
.player-back-chevron,
.player-back-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.player-back-chevron svg,
.player-back-btn svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
}

.player-back-chevron:hover,
.player-back-chevron:focus,
.player-back-chevron:focus-visible,
.player-back-chevron.nav-focused,
.player-back-btn:hover,
.player-back-btn:focus,
.player-back-btn:focus-visible,
.player-back-btn.nav-focused {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.player-status-indicator {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 104;
  background: rgba(14, 15, 22, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  transition: opacity 0.3s;
}

.player-center-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  min-width: 76px;
  min-height: 76px;
  width: auto;
  height: auto;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(14, 15, 22, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
}

.player-center-indicator.flash {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* TOP OSD BAR - FLOATING SAFE OVERSCAN FOR SMART TV */
.player-osd-top {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 24px);
  left: max(env(safe-area-inset-left, 0px), 36px);
  right: max(env(safe-area-inset-right, 0px), 36px);
  padding: 12px 24px;
  border-radius: 16px;
  background: rgba(14, 15, 22, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 103;
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.player-osd-top.hidden {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

.player-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-top-center {
  flex: 1;
  text-align: center;
  max-width: 60%;
  padding: 0 16px;
}

.player-media-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
}

.player-media-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-badge-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.player-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e50914;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(229, 9, 20, 0.45);
}

.player-live-dot {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: livePulse 1.2s infinite ease-in-out;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* BOTTOM OSD BAR - FLOATING SAFE OVERSCAN FOR SMART TV */
.player-osd-bottom {
  position: absolute;
  bottom: max(env(safe-area-inset-bottom, 0px), 34px);
  left: max(env(safe-area-inset-left, 0px), 36px);
  right: max(env(safe-area-inset-right, 0px), 36px);
  padding: 16px 26px;
  border-radius: 20px;
  background: rgba(14, 15, 22, 0.9);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 103;
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.player-osd-bottom.hidden {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

/* TIMELINE SEEKER */
.player-timeline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.player-time-txt {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ddd;
  min-width: 50px;
  text-align: center;
}

.player-seeker-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s;
}

.player-seeker-track:hover {
  height: 9px;
}

.player-seeker-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 6px;
  width: 0%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.player-seeker-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffffff;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s;
}

.player-seeker-track:hover .player-seeker-thumb {
  opacity: 1;
}

/* CONTROLS ROW */
.player-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.player-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-ctrl-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.4);
}

.player-ctrl-btn.btn-play-pause {
  width: 48px;
  height: 48px;
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.35);
}

.player-ctrl-btn.btn-play-pause svg {
  fill: #000000;
  stroke: #000000;
}

.player-ctrl-btn.btn-play-pause:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   8. PLAYLISTS & ACTIVATION SCREEN (APPLE TV FROSTED CARDS)
========================================================= */
/* =========================================================
   9. ACTIVATION & PLAYLISTS SCREEN (V5.7 RESPONSIVE SUITE)
   Supports:
   - TV Horizontal (1080p, 4K, 720p)
   - PC Horizontal (Widescreen 16:9, 21:9)
   - Mobile Vertical (Portrait: iPhone / Android)
   - Mobile Horizontal (Landscape: 350px-450px height)
   - Zero website top nav bars!
========================================================= */

.activation-screen-container {
  width: 100vw;
  width: 100%;
  height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  background: #000000;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.activation-inner-wrap {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

/* In-Flow Brand Header */
.activation-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.activation-brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.act-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: radial-gradient(circle, #e50914 0%, #b8003a 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.35);
}

.act-logo-icon svg {
  width: 16px;
  height: 16px;
}

.act-brand-txt {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.act-brand-txt b {
  color: #e50914;
  font-weight: 900;
}

.act-status-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.act-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e50914;
  box-shadow: 0 0 6px #e50914;
}

/* 2-Column Responsive Grid */
.activation-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

.act-box {
  background: rgba(18, 22, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.act-box-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.act-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e50914;
  flex-shrink: 0;
}

.act-head-icon svg {
  width: 18px;
  height: 18px;
}

.act-box-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.act-box-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

/* Credential Fields */
.act-cred-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.act-field-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.act-field-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.act-field-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.6px;
}

.act-field-val.mac-val {
  font-family: monospace;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
}

.act-field-val.key-val {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 3px;
}

.act-tag-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(229, 9, 20, 0.15);
  color: #e50914;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.act-tag-badge.gold {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.act-expiry-note {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 2px 4px;
}

/* Steps Guide */
.act-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: center;
  margin-bottom: 16px;
}

.act-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.act-step-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e50914;
  color: #ffffff;
  font-weight: 900;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.act-url-banner {
  margin: 2px 0 2px 30px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 8px;
  font-family: monospace;
  font-size: 14px;
  font-weight: 800;
  color: #e50914;
  letter-spacing: 0.5px;
  width: fit-content;
}

/* Action Button */
.act-main-btn {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  background: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
  transition: all 0.15s ease-out;
}

.act-main-btn svg {
  width: 18px;
  height: 18px;
}

.act-main-btn:hover,
.act-main-btn:focus,
.act-main-btn.nav-focused {
  background: #e50914 !important;
  color: #ffffff !important;
  outline: none !important;
  transform: scale(1.02);
  box-shadow: 0 0 26px rgba(229, 9, 20, 0.6) !important;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.activation-micro-footer {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 4px;
}

/* Native Playlist Selector (When playlists exist) */
.playlists-native-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.playlists-screen-heading {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.playlists-mac-pill {
  font-family: monospace;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.playlists-native-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

.pl-server-card {
  background: rgba(18, 22, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.pl-server-card.nav-focused,
.pl-server-card:focus {
  outline: none;
  border-color: #e50914 !important;
  background: rgba(229, 9, 20, 0.12) !important;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.4);
  transform: scale(1.02);
}

.pl-server-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pl-server-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pl-server-icon svg {
  width: 20px;
  height: 20px;
}

.pl-server-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(229, 9, 20, 0.15);
  color: #e50914;
}

.pl-server-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.pl-server-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.pl-server-state {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}

.pl-server-action {
  font-size: 12.5px;
  font-weight: 800;
  color: #e50914;
}

.playlists-native-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  flex-wrap: wrap;
}

.playlist-select-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.playlist-select-card:hover,
.playlist-select-card.focused {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
}

.playlist-select-card:hover .playlist-card-title,
.playlist-select-card.focused .playlist-card-title {
  color: #000000 !important;
}

.playlist-select-card:hover .playlist-badge-type,
.playlist-select-card.focused .playlist-badge-type {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #000000 !important;
}

.playlist-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.playlist-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.playlist-badge-type {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

.playlists-footer-disclaimer {
  max-width: 700px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.playlists-footer-disclaimer a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* =========================================================
   9. STRICT PORTRAIT SEPARATION (100% BLOCKING - NO APP UI)
========================================================= */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  #orientation-lock-overlay,
  .orientation-lock-overlay {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 99999999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #0C0408 !important;
  }

  #app,
  #splash-screen,
  .activation-screen-container,
  .sansat-sync-screen,
  .app-main,
  .app-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   10. MOBILE LANDSCAPE RESPONSIVENESS (SMARTPHONES ONLY)
   Strictly scoped to touch handhelds - Never applied to Android TV
========================================================= */
@media (orientation: landscape) and (max-height: 480px) and (hover: none) and (pointer: coarse) {
  html:not([data-device="mobile"]) {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.device-mobile) {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html:not([data-device="mobile"]) #app,
  html:not([data-device="mobile"]) .app-main {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .activation-screen-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--app-bg-gradient) !important;
    overflow: hidden !important;
  }

  .activation-inner-wrap {
    gap: 8px !important;
  }

  .activation-brand-header {
    margin-bottom: 2px !important;
  }

  .activation-cards-grid {
    gap: 12px !important;
  }

  .act-box {
    padding: 10px 14px !important;
  }

  .act-box-head {
    margin-bottom: 6px !important;
    gap: 8px !important;
  }

  .act-head-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
  }

  .act-head-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .act-box-title {
    font-size: 12.5px !important;
  }

  .act-box-sub {
    display: none !important;
  }

  .act-cred-fields {
    gap: 6px !important;
  }

  .act-field-row {
    padding: 6px 10px !important;
  }

  .act-field-val.mac-val {
    font-size: 14px !important;
  }

  .act-field-val.key-val {
    font-size: 16px !important;
  }

  .act-expiry-note {
    font-size: 10px !important;
    padding: 0 !important;
  }

  .act-steps-list {
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .act-step-item {
    font-size: 10.5px !important;
  }

  .act-url-banner {
    padding: 4px 8px !important;
    font-size: 11px !important;
    margin: 2px 0 2px 22px !important;
  }

  .act-main-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .activation-micro-footer {
    display: none !important;
  }

  /* 2. Dashboard: 100% Fits in Screen Height - No Scroll */
  .dashboard-screen {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 4px 16px 6px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .hero-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    max-height: 185px !important;
    align-items: stretch !important;
    margin: auto 0 !important;
    width: 100% !important;
  }

  .hero-card {
    height: 100% !important;
    max-height: 175px !important;
    min-height: 120px !important;
    padding: 8px 6px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(18, 19, 26, 0.75) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  }

  .hero-card:hover,
  .hero-card.nav-focused {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(32, 34, 46, 0.85) 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  .hero-card-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 6px !important;
  }

  .hero-card-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .hero-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
  }

  /* 3. Compact Bottom Status Bar in Landscape */
  .dashboard-bottom-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .bottom-pill-box {
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 10.5px !important;
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bottom-pill-box .label {
    font-size: 10px !important;
  }

  .bottom-pill-box .val,
  .bottom-pill-box .val-red {
    font-size: 10.5px !important;
  }

  .bottom-center-info {
    font-size: 10.5px !important;
    text-align: center !important;
  }

  .bottom-center-info .playlist-name {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .bottom-center-info .days-remaining {
    font-size: 10.5px !important;
    font-weight: 800 !important;
  }

  .bottom-weather-box {
    padding: 6px 12px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  .weather-city {
    font-size: 11.5px !important;
  }

  .weather-clock {
    font-size: 10px !important;
  }

  .bottom-weather-box svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* 4. Channels / VOD / Series in Mobile Landscape */
  .channels-layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 44px) !important;
    height: calc(100dvh - 44px) !important;
    overflow: hidden !important;
  }

  .groups-sidebar {
    width: 210px !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 8px 6px !important;
    gap: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-direction: column !important;
    white-space: normal !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
  }

  .sidebar-title {
    display: block !important;
    font-size: 11px !important;
    padding: 6px 10px 4px !important;
    letter-spacing: 0.5px !important;
  }

  .group-item {
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    border-radius: 10px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
  }

  .group-item.active {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
  }

  .channels-toolbar {
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px 14px !important;
    gap: 10px !important;
  }

  .search-input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
  }

  .media-posters-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    padding: 4px 0 30px 0 !important;
    width: 100% !important;
  }

  .movie-poster-card {
    min-height: 140px !important;
  }

  .channel-card-row {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  /* PLAYER OSD IN MOBILE LANDSCAPE: Elevated Floating Glass Card (Never stuck at bottom) */
  .player-osd-bottom {
    position: absolute !important;
    bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
    left: max(32px, env(safe-area-inset-left, 32px)) !important;
    right: max(32px, env(safe-area-inset-right, 32px)) !important;
    padding: 10px 22px 12px 22px !important;
    background: rgba(12, 13, 20, 0.92) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85) !important;
    gap: 8px !important;
  }

  .player-timeline-row {
    gap: 10px !important;
  }

  .player-time-txt {
    font-size: 11px !important;
    min-width: 42px !important;
  }

  .player-seeker-track {
    height: 5px !important;
  }

  .player-ctrl-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .player-ctrl-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .player-ctrl-btn.btn-play-pause {
    width: 44px !important;
    height: 44px !important;
  }

  .player-ctrl-btn.btn-play-pause svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* =========================================================
   SMRATERS PRO SETTINGS GRID & SUBPAGES
========================================================= */
.smarters-settings-wrapper {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 20%, #151828 0%, #08090e 100%);
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.smarters-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
  flex-shrink: 0;
}

.smarters-brand-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
}

.smarters-brand-title span {
  color: var(--primary-red, #e50914);
}

.smarters-settings-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin: 0;
}

.smarters-settings-clock {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.smarters-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1400px;
  width: 100%;
  margin: auto auto;
}

@media (max-width: 900px) {
  .smarters-settings-wrapper {
    padding: 24px 20px;
  }
  .smarters-settings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 10px;
  }
}

@media (max-width: 600px) {
  .smarters-settings-wrapper {
    padding: 16px 14px;
  }
  .smarters-settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .smarters-settings-title {
    font-size: 18px;
  }
}

.smarters-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  min-height: 185px;
}

.smarters-card:hover,
.smarters-card:focus,
.smarters-card.nav-focused {
  background: rgba(255, 255, 255, 0.09);
  border-color: #e50914;
  box-shadow: 0 0 30px rgba(229, 9, 20, 0.4);
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(229, 9, 20, 0.35);
  outline: none;
}

.smarters-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(229, 9, 20, 0.15);
  color: #e50914;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: all 0.22s;
}

.smarters-card:hover .smarters-card-icon,
.smarters-card:focus .smarters-card-icon,
.smarters-card.nav-focused .smarters-card-icon {
  background: #e50914;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

.smarters-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.3;
}

.smarters-card-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* SMARTERS MODALS */
.smarters-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.smarters-modal-dialog {
  background: #12141e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
}

.smarters-modal-header {
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.smarters-modal-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.smarters-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.smarters-modal-close:hover {
  color: #ffffff;
}

.smarters-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.smarters-opt-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 14px 18px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
}

.smarters-opt-btn:hover,
.smarters-opt-btn:focus,
.smarters-opt-btn.nav-focused {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  outline: none;
  transform: translateX(4px);
}

.smarters-opt-btn.active {
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  border-color: #ffffff;
}

/* =========================================================
   CR7 / SMARTERS PRO 3-PANEL SPLIT LIVE TV (PHOTO 3)
========================================================= */
.split-live-screen {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: #08090d;
  overflow: hidden;
  box-sizing: border-box;
}

.split-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

/* 1. LEFT PANEL: CATEGORIES (23%) */
.split-categories-panel {
  width: 23%;
  min-width: 240px;
  max-width: 310px;
  background: rgba(12, 13, 18, 0.95);
}

.split-panel-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.split-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.split-back-btn:hover,
.split-back-btn.nav-focused {
  background: #fff;
  color: #000;
}

.split-header-title {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.split-categories-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.split-cat-item {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s;
}

.split-cat-item:hover,
.split-cat-item.nav-focused {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.split-cat-item.active {
  background: linear-gradient(90deg, #e50914, #ff2233);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45);
}

/* 2. CENTER PANEL: CHANNELS (35%) */
.split-channels-panel {
  width: 35%;
  min-width: 320px;
  max-width: 440px;
  background: rgba(14, 15, 22, 0.92);
}

.split-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px 12px;
}

.split-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
}

.split-count-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.split-channels-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.split-channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-channel-row:hover,
.split-channel-row.nav-focused {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.split-channel-row.active-channel {
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.85), rgba(46, 50, 80, 0.85));
  border-color: #ff4757;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.45);
}

.split-ch-num {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  min-width: 28px;
  text-align: right;
  font-family: monospace;
}

.split-ch-logo-wrap {
  width: 44px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.split-ch-logo {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.split-ch-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 3. RIGHT PANEL: PREVIEW & INFO (42%) */
.split-preview-panel {
  flex: 1;
  background: #0a0b10;
  display: flex;
  flex-direction: column;
}

.split-preview-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.split-preview-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split-preview-status {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  color: #fff;
  display: none;
}

.split-fullscreen-overlay-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(14, 15, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: all 0.2s;
}

.split-fullscreen-overlay-btn:hover,
.split-fullscreen-overlay-btn.nav-focused {
  background: #ffffff;
  color: #000000;
  transform: scale(1.05);
  border-color: #ffffff;
}

.split-preview-info {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.split-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.split-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e50914;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.split-info-group {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.split-info-channel-name {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.split-epg-box {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.split-epg-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.split-epg-badge {
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.split-epg-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.split-epg-bar-fill {
  height: 100%;
  background: #e50914;
}

.split-epg-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.split-loading,
.split-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================================================
   CR7 PLAYER LUXURY DASHBOARD (PHOTO 4 EXACT SPEC)
========================================================= */
.cr7-dashboard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: 16px 44px 18px 44px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 25%, #131726 0%, #080a11 100%);
  box-sizing: border-box;
}

/* =========================================================
   HOME DASHBOARD — SANSAT OTT
========================================================= */
.sansat-home-dashboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x);
  background: var(--app-bg-gradient);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
}

/* Prevent harsh white outlines inside dashboard */
.sansat-home-dashboard :focus,
.sansat-home-dashboard .nav-focused {
  outline: none !important;
  box-shadow: none;
}

/* 1. TOP HEADER ROW */
.home-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--app-header-h);
  flex-shrink: 0;
}

.home-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-brand-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.home-brand-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 4px;
}

.home-nav-pills {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(35, 37, 43, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
  box-sizing: border-box;
}

.home-nav-pill svg {
  width: 17px;
  height: 17px;
  color: #ffffff;
  opacity: 0.85;
  flex-shrink: 0;
}

.home-nav-pill:hover {
  background: rgba(48, 51, 60, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.home-nav-pill:active {
  background: rgba(60, 64, 75, 0.95);
  border-color: rgba(255, 255, 255, 0.28);
  transform: scale(0.98);
}

.home-nav-pill:focus,
.home-nav-pill:focus-visible {
  outline: none !important;
}

/* TV D-Pad remote only — clean highlight without red border */
.device-tv .home-nav-pill.nav-focused {
  background: rgba(55, 58, 70, 0.98);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

.home-nav-pill:hover svg,
.device-tv .home-nav-pill.nav-focused svg {
  opacity: 1;
}

.home-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(35, 37, 43, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
}

.home-action-btn svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
}

.home-action-btn:hover {
  background: rgba(48, 51, 60, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.home-action-btn:focus,
.home-action-btn:focus-visible {
  outline: none !important;
}

.device-tv .home-action-btn.nav-focused {
  background: #99140C;
  border-color: #99140C;
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(153, 20, 12, 0.55);
}

/* 2. CENTER 4 MAIN FEATURE CARDS (EQUAL SIZE, PROPORTIONAL) */
.home-cards-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  max-width: 1020px;
  height: clamp(155px, 44vh, 205px);
  max-height: 215px;
  margin: auto auto;
}

.home-feature-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d1f24 0%, #16171b 42%, #5c100b 100%);
  border: 1.5px solid #850d12 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vh, 8px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: clamp(10px, 1.8vh, 16px) 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
}

.home-feature-card:hover,
.home-feature-card:focus,
.home-feature-card.nav-focused,
.home-feature-card:active {
  transform: none !important;
  border-color: #ff1e2d !important;
  background: linear-gradient(135deg, #252830 0%, #1a1c22 40%, #74140e 100%) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 30, 45, 0.5) !important;
  z-index: 2;
}

.home-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 6vh, 56px);
  height: clamp(46px, 6vh, 56px);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 2;
}

.home-card-icon-wrap svg {
  width: 100%;
  height: 100%;
  color: #ffffff;
}

.home-feature-card:hover .home-card-icon-wrap,
.home-feature-card.nav-focused .home-card-icon-wrap,
.home-feature-card:focus .home-card-icon-wrap,
.home-feature-card:active .home-card-icon-wrap {
  transform: none !important;
}

.home-card-title {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin-top: 2px;
  position: relative;
  z-index: 2;
}

.home-card-count {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(12px, 1.3vw, 13px);
  font-weight: 700;
  color: #ff3344;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 2;
}
  text-align: center;
}

.home-card-subtitle {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0;
  text-align: center;
  letter-spacing: 0.2px;
}

/* 3. BOTTOM FOOTER ROW */
.home-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex-shrink: 0;
}

.home-device-pillbox {
  background: rgba(18, 18, 22, 0.85);
  border: 1.5px solid #850d12 !important;
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5px;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none !important;
  min-height: 62px;
  box-sizing: border-box;
}

.home-device-pillbox:hover,
.home-device-pillbox.nav-focused {
  border-color: #ff1e2d !important;
  background: rgba(24, 24, 28, 0.95);
  transform: translateY(-1px);
}

.home-dev-line {
  font-size: clamp(10.8px, 1.2vw, 12px);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.35;
}

.home-dev-lbl {
  font-weight: 500;
  opacity: 0.75;
}

.home-dev-val {
  font-weight: 700;
  color: #ffffff;
}

.home-playlist-info {
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  outline: none !important;
  transition: all 0.2s ease;
  min-height: 62px;
  box-sizing: border-box;
}

.home-playlist-info:hover,
.home-playlist-info.nav-focused {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(24, 24, 28, 0.95);
  transform: translateY(-1px);
}

.home-pl-name {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.home-pl-divider {
  width: 100%;
  min-width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 3px 0 3px 0;
}

.home-pl-days {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(11.5px, 1.3vw, 13px);
  font-weight: 700;
  color: #e50914;
  white-space: nowrap;
  text-align: center;
}

.home-weather-pillbox {
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 62px;
  box-sizing: border-box;
}

.home-weather-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.home-weather-city {
  font-size: clamp(11.5px, 1.3vw, 12.5px);
  font-weight: 700;
  color: #ffffff;
  max-width: 135px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-weather-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
}

.home-weather-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
}

.home-weather-icon-wrap {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-weather-icon-wrap svg {
  width: 100%;
  height: 100%;
  color: #ffffff;
}

/* =========================================================
   IMAGE 3 ACTIVATION VIEW (SANSAT OTT LUXURY SPLIT)
========================================================= */
.sansat-activation-view {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #200511 0%, #0c0408 70%, #050204 100%);
  padding: 30px 48px;
  box-sizing: border-box;
  color: #ffffff;
  overflow-y: auto;
}

.act-split-layout {
  display: flex;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  width: 100%;
}

.act-brand-column {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.act-brand-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.act-brand-logo-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(229, 9, 20, 0.6);
}

.act-brand-name {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.act-brand-name span {
  color: #e50914;
}

.act-welcome-heading {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}

.act-welcome-sub {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.act-steps-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.act-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px;
  border-radius: 12px;
}

.act-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e50914;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.act-step-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.act-portal-link {
  color: #e50914;
  font-weight: 800;
}

.act-features-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.act-feat-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.12);
  border: 1px solid rgba(229, 9, 20, 0.3);
  color: #ffffff;
}

/* Right Column: Electric Crimson Card */
.act-card-column {
  flex: 1;
  max-width: 460px;
}

.act-crimson-card {
  background: linear-gradient(155deg, #e50914 0%, #b8003a 100%);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(229, 9, 20, 0.4);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.act-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.act-card-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-card-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.act-field-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
}

.act-field-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: 900;
  font-family: monospace;
  color: #ffffff;
  letter-spacing: 1px;
}

.act-card-expiry {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.act-card-reload-btn {
  background: #ffffff;
  color: #0c0408;
  border: none;
  border-radius: 16px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.act-card-reload-btn svg {
  width: 20px;
  height: 20px;
}

.act-card-reload-btn:hover,
.act-card-reload-btn:focus,
.act-card-reload-btn.nav-focused {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 255, 255, 0.7);
  background: #ffffff;
  color: #e50914;
  outline: none;
}

/* =========================================================
   HOME MODAL DIALOGS
========================================================= */
.home-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.home-modal-box {
  background: linear-gradient(160deg, #220306 0%, #150204 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  border-radius: 14px;
  max-width: 440px;
  width: 90vw;
  padding: 18px 22px;
  box-shadow: none !important;
  color: #ffffff;
}

.home-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(229, 9, 20, 0.3);
}

.home-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.home-modal-close-btn {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  color: #8b0000 !important;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: none !important;
}

.home-modal-close-btn:hover,
.home-modal-close-btn:focus,
.home-modal-close-btn.nav-focused {
  background: #ffffff !important;
  color: #800008 !important;
  border: 2px solid #ff3344 !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.modal-acc-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
}

.modal-acc-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.modal-notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-notif-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  font-size: 13.5px;
}

.notif-badge {
  background: #e50914;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 6px;
  height: fit-content;
}

.modal-speed-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

.speed-gauge {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid #e50914;
  box-shadow: 0 0 30px rgba(229, 9, 20, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.speed-number {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
}

.speed-unit {
  font-size: 12px;
  font-weight: 700;
  color: #e50914;
}

.speed-meta {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}

.modal-action-btn {
  background: #ffffff !important;
  color: #8b0000 !important;
  border: 2px solid transparent !important;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: none !important;
  outline: none !important;
}

.modal-action-btn:hover,
.modal-action-btn:focus,
.modal-action-btn.nav-focused {
  background: #ffffff !important;
  color: #800008 !important;
  border: 2px solid #ff3344 !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Responsive Rules for Smartphones (Portrait only - NEVER triggered on Android TV) */
@media (orientation: portrait) and (max-width: 768px), (max-width: 600px) and (max-aspect-ratio: 1/1) {
  .sansat-dash-dashboard {
    padding: 16px 18px 24px 18px;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
  .sansat-dash-header {
    flex-wrap: wrap;
    height: auto;
    gap: 12px;
    padding-bottom: 12px;
  }
  .sansat-dash-weather-clock {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .sansat-dash-main-body {
    flex-direction: column;
    padding: 16px 0;
  }
  .sansat-dash-hero-grid {
    flex-direction: column;
    gap: 14px;
  }
  .sansat-dash-hero-card {
    min-height: 140px;
    flex-direction: row;
    padding: 16px 20px;
    justify-content: flex-start;
    gap: 20px;
  }
  .sansat-dash-card-badge-circle {
    width: 62px;
    height: 62px;
  }
  .sansat-dash-card-badge-circle svg {
    width: 30px;
    height: 30px;
  }
  .sansat-dash-right-stack {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .sansat-dash-stack-card {
    min-height: 58px;
    padding: 0 14px;
  }
  .sansat-dash-capsule-bar {
    flex-direction: column;
    border-radius: 18px;
    gap: 8px;
    padding: 12px 18px;
    width: 100%;
  }
  .sansat-dash-cap-divider {
    display: none;
  }
  .act-split-layout {
    flex-direction: column;
    gap: 24px;
  }
  .act-card-column {
    max-width: 100%;
    width: 100%;
  }
}

/* TV & Landscape Compact Screens (e.g. Xiaomi TV Stick / Box running at 960x540 viewport) */
@media (orientation: landscape) and (max-height: 620px) {
  .sansat-dash-dashboard {
    padding: 12px 28px 10px 28px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  .sansat-dash-header {
    height: 48px !important;
    padding-bottom: 4px !important;
  }
  .sansat-dash-brand-text {
    font-size: 19px !important;
  }
  .sansat-dash-logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  .sansat-dash-weather-clock {
    padding: 5px 14px !important;
    font-size: 12px !important;
  }
  .sansat-dash-expiry-pill {
    padding: 5px 14px !important;
    font-size: 11.5px !important;
  }
  .sansat-dash-circle-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .sansat-dash-circle-btn svg {
    width: 17px !important;
    height: 17px !important;
  }
  .sansat-dash-main-body {
    padding: 10px 0 8px 0 !important;
    gap: 16px !important;
    min-height: 0 !important;
  }
  .sansat-dash-hero-grid {
    gap: 14px !important;
  }
  .sansat-dash-hero-card {
    gap: 12px !important;
    border-radius: 20px !important;
  }
  .sansat-dash-card-badge-circle {
    width: 66px !important;
    height: 66px !important;
  }
  .sansat-dash-card-badge-circle svg {
    width: 32px !important;
    height: 32px !important;
  }
  .sansat-dash-card-title {
    font-size: 20px !important;
  }
  .sansat-dash-card-sub {
    font-size: 11.5px !important;
  }
  .sansat-dash-right-stack {
    max-width: 250px !important;
    gap: 10px !important;
  }
  .sansat-dash-stack-card {
    border-radius: 16px !important;
    padding: 0 14px !important;
    gap: 12px !important;
  }
  .sansat-dash-stack-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .sansat-dash-stack-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .sansat-dash-stack-title {
    font-size: 13.5px !important;
  }
  .sansat-dash-footer {
    padding: 4px 0 2px 0 !important;
  }
  .sansat-dash-capsule-bar {
    padding: 6px 18px !important;
    font-size: 12px !important;
  }
}

.channel-card-badge {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.channel-card-logo-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px 6px 6px;
  min-height: 0;
}

.channel-card-logo-wrap img {
  max-width: 82%;
  max-height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s;
}

.channel-grid-card:hover .channel-card-logo-wrap img,
.channel-grid-card:focus .channel-card-logo-wrap img {
  transform: scale(1.08);
}

.channel-card-meta {
  width: 100%;
  text-align: center;
  margin-top: 6px;
}

.channel-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 33px;
  word-break: break-word;
}

.channel-card-group {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CHANNELS LIST VIEW CONTAINER */
.channels-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================================================
   HOME SCREEN HERO CARDS & QUICK ACTIONS — SANSAT OTT
========================================================= */
.dashboard-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 36px 28px 36px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.hero-cards-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin: auto auto 24px auto !important;
  gap: 28px !important;
  align-items: stretch;
}

.hero-card {
  height: 100%;
  min-height: 360px;
  max-height: 460px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08) 0%, rgba(18, 20, 30, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
}

.hero-card:hover,
.hero-card.nav-focused {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.18) 0%, rgba(32, 36, 52, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 32px rgba(255, 255, 255, 0.25);
  transform: translateY(-8px) scale(1.03);
}

.hero-card-icon {
  width: 92px;
  height: 92px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-card-icon svg {
  width: 82px;
  height: 82px;
  stroke: #ffffff;
  stroke-width: 1.8;
}

.hero-card-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
}

@media (max-width: 900px) {
  .hero-cards-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .hero-card {
    min-height: 260px;
    max-height: 340px;
    border-radius: 20px;
  }
  .hero-card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
  }
  .hero-card-icon svg {
    width: 54px;
    height: 54px;
  }
  .hero-card-title {
    font-size: 18px;
  }
}

@media (max-width: 580px) {
  .hero-cards-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hero-card {
    min-height: 130px;
    flex-direction: row;
    gap: 20px;
    padding: 16px 24px;
  }
  .hero-card-icon {
    margin-bottom: 0;
    width: 48px;
    height: 48px;
  }
  .hero-card-icon svg {
    width: 40px;
    height: 40px;
  }
}

.dashboard-util-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 24px auto;
  max-width: 1480px;
  width: 100%;
  flex-wrap: wrap;
}

.util-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.util-btn:hover,
.util-btn:focus,
.util-btn.nav-focused {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 255, 255, 0.2);
  outline: none;
}

.dashboard-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

/* =========================================================
   DOWNLOADS SCREEN STYLES
========================================================= */
.downloads-screen-wrapper {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  padding: 32px 40px;
  box-sizing: border-box;
}

.downloads-header,
.downloads-filter-bar,
.downloads-content-grid {
  max-width: 1480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.downloads-header {
  margin-bottom: 24px;
}

.downloads-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.downloads-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.downloads-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.downloads-filter-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.18s;
}

.downloads-filter-pill:hover,
.downloads-filter-pill:focus,
.downloads-filter-pill.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 800;
}

.downloads-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}

.downloads-empty-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 64px 36px;
  text-align: center;
  max-width: 720px;
  width: 90%;
  margin: 40px auto 0 auto;
}

.downloads-empty-icon {
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 16px;
}

.downloads-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.downloads-empty-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 26px 0;
  line-height: 1.5;
}

.downloads-explore-btn {
  background: #ffffff;
  color: #000000;
  border: none;
  font-size: 14px;
  font-weight: 800;
  padding: 13px 32px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.downloads-explore-btn:hover,
.downloads-explore-btn:focus {
  transform: scale(1.05);
}

/* =========================================================
   27-INCH PC, 2K / 4K / LARGE TV EXPANSIVE MEDIA QUERIES
========================================================= */
@media (min-width: 1700px) {
  .hero-cards-3,
  .dashboard-util-row,
  .dashboard-bottom-bar,
  .playlists-top-header,
  .playlists-cards-container,
  .downloads-header,
  .downloads-filter-bar,
  .downloads-content-grid,
  .smarters-settings-header,
  .smarters-settings-grid {
    max-width: 1680px !important;
  }

  .hero-card {
    min-height: 420px;
    max-height: 520px;
  }

  .hero-card-icon {
    width: 110px;
    height: 110px;
    margin-bottom: 28px;
  }

  .hero-card-icon svg {
    width: 96px;
    height: 96px;
  }

  .hero-card-title {
    font-size: 28px;
  }

  .channels-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 22px !important;
    padding: 28px 36px 60px 36px !important;
  }

  .groups-sidebar {
    width: 310px !important;
  }

  .group-item {
    font-size: 14.5px !important;
    min-height: 48px !important;
    padding: 13px 18px !important;
  }
}

/* =========================================================
   GENUINE RTL ARABIC SUPPORT WITH TAJAWAL CLEAN FONT
========================================================= */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after,
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after,
[dir="rtl"],
[dir="rtl"] *,
body.rtl-mode,
body.rtl-mode *,
.ar-font,
.ar-font * {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[dir="rtl"] .groups-sidebar {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html[dir="rtl"] .group-item {
  text-align: right;
}

html[dir="rtl"] .channel-card-badge {
  left: auto;
  right: 8px;
}

/* SANSAT TV & Mobile Arabic Font Sizing to Prevent Button Overflows */
html[dir="rtl"] .live-cat-row .live-cat-name,
html[dir="rtl"] .media-cat-item .media-cat-title,
html[dir="rtl"] .tv-stacked-card .tv-stacked-title,
html[dir="rtl"] .tv-card-title,
html[dir="rtl"] .tv-card-subtitle,
html[dir="rtl"] .ms-modal-btn,
html[dir="rtl"] .catchup-prog-title,
html[dir="rtl"] .search-tab-btn {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.9em !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

html[dir="rtl"] .smarters-opt-btn {
  text-align: right;
}

html[dir="rtl"] .smarters-opt-btn:hover,
html[dir="rtl"] .smarters-opt-btn:focus,
html[dir="rtl"] .smarters-opt-btn.nav-focused {
  transform: translateX(-4px);
}

html[dir="rtl"] .movie-poster-card:hover,
html[dir="rtl"] .movie-poster-card:focus,
html[dir="rtl"] .movie-poster-card.nav-focused {
  transform: scale(1.05);
}

html[dir="rtl"] .header-pill svg,
html[dir="rtl"] .split-back-btn svg,
html[dir="rtl"] .split-cat-item svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .split-categories-panel {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html[dir="rtl"] .split-channels-panel {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html[dir="rtl"] .split-fullscreen-overlay-btn {
  right: auto;
  left: 14px;
}

html[dir="rtl"] .split-preview-status {
  left: auto;
  right: 14px;
}

/* ==========================================================================
   CR PLAYER THEME — VOD & SERIES (V6.0)
   Pixel-Perfect replica of CR Player catalog and detail screens
   ========================================================================== */

.cr-catalog-screen {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #0b0d14;
  color: #ffffff;
  position: relative;
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 1. Left Sidebar */
.cr-sidebar {
  width: 250px;
  height: 100vh;
  background: rgba(10, 12, 18, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  overflow-y: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: 25;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cr-sidebar-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  padding: 6px 12px 10px 12px;
}

.cr-cat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  outline: none;
  box-sizing: border-box;
}

.cr-cat-btn:hover,
.cr-cat-btn:focus,
.cr-cat-btn.nav-focused {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateX(4px);
  border-color: rgba(255, 255, 255, 0.3);
}

.cr-cat-btn.active {
  background: #ffffff !important;
  color: #0b0d14 !important;
  font-weight: 800 !important;
  transform: none;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.cr-cat-btn.active svg {
  stroke: #0b0d14;
}

.cr-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 4px 14px 4px;
  flex-shrink: 0;
}

/* 2. Main Area */
.cr-main {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #0b0d14;
}

/* Top Toolbar */
.cr-top-toolbar {
  position: absolute;
  top: 18px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 30;
}

.cr-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 24, 36, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  outline: none;
}

.cr-tool-btn:hover,
.cr-tool-btn:focus,
.cr-tool-btn.nav-focused {
  background: #ffffff;
  color: #0b0d14;
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
}

.cr-tool-btn svg {
  width: 17px;
  height: 17px;
}

.cr-count-pill {
  padding: 7px 16px;
  border-radius: 50px;
  background: rgba(20, 24, 36, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.cr-search-box {
  display: flex;
  align-items: center;
  background: rgba(20, 24, 36, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50px;
  padding: 6px 14px;
  gap: 8px;
  color: #ffffff;
  transition: border-color 0.2s;
}

.cr-search-box:focus-within {
  border-color: #e50914;
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
}

.cr-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 13.5px;
  width: 130px;
  font-family: inherit;
}

.cr-search-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* 3. Top Hero Preview */
.cr-hero-preview {
  height: 46vh;
  min-height: 270px;
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
}

.cr-hero-info {
  width: 52%;
  height: 100%;
  padding: 24px 32px 14px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 10;
  box-sizing: border-box;
}

.cr-hero-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  margin-bottom: 6px;
  max-height: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cr-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cr-hero-stars {
  color: #f5c518;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

.cr-imdb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.cr-imdb-logo {
  background: #f5c518;
  color: #000000;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.cr-hero-tag {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.cr-hero-genres {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-hero-plot {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.cr-hero-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-top: auto;
  letter-spacing: -0.3px;
}

/* Hero Backdrop with gradient fade */
.cr-hero-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.cr-hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.3s ease;
}

.cr-hero-backdrop-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #0b0d14 0%, #0b0d14 12%, rgba(11, 13, 20, 0.75) 35%, rgba(11, 13, 20, 0.15) 70%, rgba(11, 13, 20, 0.4) 100%),
    linear-gradient(to top, #0b0d14 0%, rgba(11, 13, 20, 0.85) 20%, transparent 60%);
}

/* 4. Bottom Posters Container & Grid */
.cr-posters-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 32px 32px 32px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cr-posters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.cr-poster-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #141724;
  border: 2px solid transparent;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s, border-color 0.2s;
  outline: none;
  will-change: transform;
}

.cr-poster-card:hover,
.cr-poster-card:focus,
.cr-poster-card.nav-focused {
  transform: scale(1.03);
  z-index: 15;
  border-color: #e50914;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 0 2px #e50914;
}

.cr-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cr-poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121520;
  color: rgba(255, 255, 255, 0.3);
}

.cr-new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e50914;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  z-index: 5;
  line-height: 1;
}

.cr-poster-bottom-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 8px 8px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* 5. Fullscreen Cinematic Details Screen (Zero Modals, Zero Top Back Button) */
.cr-detail-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #0b0d14;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cr-detail-backdrop-bg {
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cr-detail-backdrop-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cr-detail-backdrop-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #0b0d14 0%, #0b0d14 25%, rgba(11, 13, 20, 0.8) 55%, rgba(11, 13, 20, 0.35) 100%),
    linear-gradient(to top, #0b0d14 0%, rgba(11, 13, 20, 0.9) 25%, transparent 70%);
}

.cr-detail-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  padding: 44px 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.cr-detail-title {
  font-size: 44px;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  max-width: 720px;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.cr-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cr-detail-genres {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 12px;
}

.cr-detail-plot {
  max-width: 660px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.cr-detail-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.cr-btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #000000;
  font-weight: 900;
  font-size: 15.5px;
  padding: 14px 34px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  outline: none;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

.cr-btn-watch:hover,
.cr-btn-watch:focus,
.cr-btn-watch.nav-focused {
  transform: scale(1.06);
  background: #ffffff;
  color: #0c0408;
  box-shadow: 0 0 0 4px #e50914, 0 8px 30px rgba(229, 9, 20, 0.5);
}

.cr-btn-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.cr-btn-fav:hover,
.cr-btn-fav:focus,
.cr-btn-fav.nav-focused {
  background: #e50914;
  border-color: #e50914;
  transform: scale(1.1);
  color: #ffffff;
}

.cr-btn-fav.active {
  background: #e50914;
  border-color: #e50914;
  color: #ffffff;
}

/* Series Seasons & Episodes */
.cr-seasons-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}

.cr-season-pill {
  padding: 9px 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  outline: none;
}

.cr-season-pill:hover,
.cr-season-pill:focus,
.cr-season-pill.nav-focused {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.cr-season-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 900 !important;
  border-color: #ffffff !important;
}

.cr-episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.cr-episode-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  gap: 6px;
}

.cr-episode-card:hover,
.cr-episode-card:focus,
.cr-episode-card.nav-focused {
  background: rgba(255, 255, 255, 0.16);
  border-color: #e50914;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(229, 9, 20, 0.35);
}

.cr-ep-num {
  font-size: 12px;
  font-weight: 800;
  color: #e50914;
  letter-spacing: 0.5px;
}

.cr-ep-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-ep-duration {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* RTL Support — SANSAT OTT */
html[dir="rtl"] .cr-sidebar {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html[dir="rtl"] .cr-cat-btn {
  text-align: right;
}

html[dir="rtl"] .cr-cat-btn:hover,
html[dir="rtl"] .cr-cat-btn:focus,
html[dir="rtl"] .cr-cat-btn.nav-focused {
  transform: translateX(-4px);
}

html[dir="rtl"] .cr-top-toolbar {
  right: auto;
  left: 28px;
}

html[dir="rtl"] .cr-hero-backdrop {
  right: auto;
  left: 0;
}

html[dir="rtl"] .cr-hero-backdrop-gradient {
  background:
    linear-gradient(to left, #0b0d14 0%, #0b0d14 12%, rgba(11, 13, 20, 0.75) 35%, rgba(11, 13, 20, 0.15) 70%, rgba(11, 13, 20, 0.4) 100%),
    linear-gradient(to top, #0b0d14 0%, rgba(11, 13, 20, 0.85) 20%, transparent 60%);
}

html[dir="rtl"] .cr-detail-backdrop-bg {
  right: auto;
  left: 0;
}

html[dir="rtl"] .cr-detail-backdrop-overlay {
  background:
    linear-gradient(to left, #0b0d14 0%, #0b0d14 25%, rgba(11, 13, 20, 0.8) 55%, rgba(11, 13, 20, 0.35) 100%),
    linear-gradient(to top, #0b0d14 0%, rgba(11, 13, 20, 0.9) 25%, transparent 70%);
}

html[dir="rtl"] .cr-new-badge {
  left: auto;
  right: 8px;
}

/* Responsive Mobile Rules — SANSAT OTT */
@media (max-width: 900px) {
  .cr-catalog-screen {
    flex-direction: column;
  }
  .cr-sidebar {
    width: 100%;
    height: auto;
    max-height: 180px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cr-cat-btn {
    width: auto;
    padding: 8px 14px;
    margin-bottom: 0;
    margin-right: 8px;
  }
  .cr-sidebar-divider {
    display: none;
  }
  .cr-hero-preview {
    height: 38vh;
    min-height: 220px;
  }
  .cr-hero-info {
    width: 80%;
    padding: 16px;
  }
  .cr-hero-title {
    font-size: 26px;
  }
  .cr-detail-content {
    padding: 24px 20px;
  }
  .cr-detail-title {
    font-size: 30px;
  }
}

/* Download Button & Real Progress Bar */
.cr-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  outline: none;
}

.cr-btn-download:hover,
.cr-btn-download:focus,
.cr-btn-download.nav-focused {
  background: rgba(255, 255, 255, 0.25);
  border-color: #e50914;
  color: #e50914;
  transform: scale(1.06);
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
}

.cr-download-progress-wrap {
  width: 100%;
  max-width: 440px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cr-dl-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.cr-dl-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e50914, #ffffff);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.cr-dl-status {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.cr-ep-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.cr-ep-action-btn:hover,
.cr-ep-action-btn:focus,
.cr-ep-action-btn.nav-focused {
  background: #e50914;
  color: #ffffff;
  border-color: #e50914;
}

/* =========================================================
   SETTINGS SCREEN — PHOTO 5 (16-TILE 4x4 MODERN GRID)
   Pixel-perfect match to Photo 5, 100% modal-free, remote Back
========================================================= */
.settings-screen-layout {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 44px 28px 44px;
  background: radial-gradient(circle at 50% 15%, #18050e 0%, #0a0206 70%, #050103 100%);
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.settings-centered-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.settings-head-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e50914;
}

.settings-head-icon svg {
  width: 32px;
  height: 32px;
}

.settings-head-title {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.settings-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  align-content: start;
}

.setting-tile {
  background: linear-gradient(145deg, rgba(32, 8, 18, 0.6) 0%, rgba(16, 4, 9, 0.8) 100%);
  border: 1.2px solid rgba(229, 9, 20, 0.18);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  min-height: 94px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.setting-tile:hover,
.setting-tile:focus,
.setting-tile.nav-focused {
  background: linear-gradient(145deg, rgba(60, 10, 30, 0.85) 0%, rgba(28, 5, 15, 0.95) 100%);
  border-color: #e50914;
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 22px rgba(229, 9, 20, 0.5);
  z-index: 5;
}

.tile-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-icon-box svg {
  width: 34px;
  height: 34px;
}

.tile-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

/* Settings Subpages */
.settings-subpage-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.subpage-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(229, 9, 20, 0.2);
  padding-bottom: 14px;
}

.subpage-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.subpage-icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subpage-icon-wrap svg {
  width: 30px;
  height: 30px;
}

.subpage-main-title {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  color: #ffffff;
}

.subpage-back-hint {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.subpage-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subpage-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.subpage-option-card:hover,
.subpage-option-card:focus,
.subpage-option-card.nav-focused {
  background: rgba(229, 9, 20, 0.16);
  border-color: #e50914;
  transform: translateX(6px);
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.3);
}

html[dir="rtl"] .subpage-option-card:hover,
html[dir="rtl"] .subpage-option-card:focus,
html[dir="rtl"] .subpage-option-card.nav-focused {
  transform: translateX(-6px);
}

.subpage-opt-label {
  font-size: 15px;
  font-weight: 800;
}

.subpage-opt-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}

.subpage-opt-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.subpage-option-card.selected .subpage-opt-check {
  border-color: #e50914;
  background: #e50914;
}

.subpage-opt-check svg {
  width: 14px;
  height: 14px;
  color: #ffffff;
}

/* =========================================================
   PLAYLISTS SCREEN — PHOTO 3 (PROMINENT MAC & DEVICE KEY)
   Zero ugly top website back buttons, native TV cards
========================================================= */
.playlists-native-wrap {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 44px 28px 44px;
  background: radial-gradient(circle at 50% 15%, #18050e 0%, #0a0206 70%, #050103 100%);
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.playlists-top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--app-header-h) !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.playlists-screen-title {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.4px;
}

.playlists-creds-capsule {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 999px;
  padding: 8px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.pl-cred-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.pl-cred-label {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.pl-cred-val {
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.pl-cred-val.key-crimson {
  color: #ffffff;
}

.pl-cred-divider {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}

.playlists-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  flex: 1;
  align-content: start;
}

.pl-server-card {
  background: linear-gradient(145deg, rgba(32, 8, 18, 0.65) 0%, rgba(16, 4, 9, 0.85) 100%);
  border: 1.5px solid rgba(229, 9, 20, 0.2);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pl-server-card:hover,
.pl-server-card:focus,
.pl-server-card.nav-focused {
  background: linear-gradient(145deg, rgba(60, 10, 30, 0.85) 0%, rgba(28, 5, 15, 0.95) 100%);
  border-color: #e50914;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(229, 9, 20, 0.5);
  z-index: 5;
}

.pl-server-card.selected-server {
  border-color: #e50914;
  box-shadow: 0 0 0 2px #e50914, 0 8px 24px rgba(0, 0, 0, 0.6);
}

.pl-server-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pl-server-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #e50914 0%, #b8003a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.45);
}

.pl-server-icon svg {
  width: 22px;
  height: 22px;
}

.pl-server-badge {
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.4);
  color: #e50914;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.pl-server-name {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-server-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pl-server-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #00ff88;
}

.pl-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
}

.playlists-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  flex-shrink: 0;
}

.pl-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.pl-action-btn:hover,
.pl-action-btn:focus,
.pl-action-btn.nav-focused {
  background: #e50914;
  border-color: #e50914;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* =========================================================
   FLOATING TOAST NOTIFICATION (NO BLOCKING MODALS)
========================================================= */
.sansat-floating-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 15, 24, 0.95);
  border: 1px solid #e50914;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(229, 9, 20, 0.4);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 26px;
  border-radius: 999px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sansat-floating-toast.fade-out {
  animation: toastFadeOut 0.35s ease forwards;
}

@keyframes toastSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -10px); }
}

/* =========================================================
   SANSAT OTT LUXURY HORIZONTAL SUITE
   Proprietary IPTV & VOD Streaming Platform
========================================================= */

/* 1. Complete eradication of the old bottom navigation bar */
.sansat-mobile-bottom-nav,
#sansat-mobile-bottom-nav,
.mobile-bottom-bar,
#mobile-bottom-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

body.has-bottom-nav,
body.has-bottom-nav .app-main,
body.has-bottom-nav #app,
body.has-bottom-nav #app-main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. Global Viewport Lockdown (Crystal Solid, No Elastic Scroll) */
html {
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #000000;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  padding: 0 !important;
  margin: 0 !important;
}

body {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: pan-x pan-y !important;
  background: #000000;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  padding: 0 !important;
  margin: 0 !important;
}

#app, .app-main {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Orientation Lock Overlay (Mobile Portrait Blocking - STRICT SEPARATION) */
.orientation-lock-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 99999999 !important;
  background: #0C0408 !important;
  background-image: radial-gradient(circle at 50% 35%, #2B0309 0%, #0C0408 80%) !important;
  color: #ffffff !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

@media screen and (orientation: portrait), (max-aspect-ratio: 1/1) {
  .orientation-lock-overlay,
  #orientation-lock-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999999 !important;
  }
  #app,
  #splash-screen,
  .activation-screen-container,
  .sansat-sync-screen,
  .app-main {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

html[data-device="tv"][data-orientation="portrait"] .orientation-lock-overlay,
html[data-device="tv"][data-orientation="portrait"] #orientation-lock-overlay,
body.device-tv.orientation-portrait .orientation-lock-overlay,
body.device-tv.orientation-portrait #orientation-lock-overlay {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 99999999 !important;
}

html[data-device="tv"][data-orientation="portrait"] #app,
html[data-device="tv"][data-orientation="portrait"] #splash-screen,
html[data-device="tv"][data-orientation="portrait"] .activation-screen-container,
html[data-device="tv"][data-orientation="portrait"] .sansat-sync-screen,
body.device-tv.orientation-portrait #app,
body.device-tv.orientation-portrait #splash-screen,
body.device-tv.orientation-portrait .activation-screen-container,
body.device-tv.orientation-portrait .sansat-sync-screen {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media screen and (orientation: landscape) and (min-aspect-ratio: 1/1) {
  .orientation-lock-overlay,
  #orientation-lock-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
  }
}

html[data-orientation="landscape"] .orientation-lock-overlay,
html[data-orientation="landscape"] #orientation-lock-overlay,
body.orientation-landscape .orientation-lock-overlay,
body.orientation-landscape #orientation-lock-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

.orient-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 340px;
  gap: 14px;
}

.orient-svg {
  width: 80px;
  height: 80px;
}

.orient-rot-group {
  transform-origin: 50px 50px;
  animation: orientRotate 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes orientRotate {
  0%, 20% {
    transform: rotate(90deg);
    opacity: 0.2;
  }
  50%, 80% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.orient-title {
  font-family: 'Barlow Condensed', 'Anton', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0;
}

.orient-sub {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0;
  letter-spacing: 0.2px !important;
}

.orient-brand {
  font-family: 'Barlow Condensed', 'Anton', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ffffff;
  margin-top: 6px;
}

.orient-brand span {
  color: #e50914;
}

/* 4. SYNC & LOADING SCREEN — SANSAT OTT */
.sansat-sync-screen {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  background: var(--app-bg-gradient) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sync-left-column {
  flex: 0 0 48vw !important;
  width: 48vw !important;
  height: 100% !important;
  background: var(--app-bg-gradient) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.sync-left-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 340px;
  gap: 10px;
}

.sync-brand-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sync-logo-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(229, 9, 20, 0.65), 0 0 60px rgba(229, 9, 20, 0.25);
  object-fit: contain;
}

.sync-brand-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0;
}

.sync-brand-title span {
  color: #e50914;
}

.sync-hero-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sync-hero-tagline {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.3px;
}

.sync-hero-desc {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0;
  letter-spacing: 0.2px !important;
}

.sync-right-column {
  flex: 0 0 52vw !important;
  width: 52vw !important;
  height: 100% !important;
  background: linear-gradient(135deg, #7F0E24 0%, #20040A 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.sync-status-box {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.sync-status-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.3px;
}

.sync-status-sub {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0;
  letter-spacing: 0.2px !important;
}

.sync-bars-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sync-bar-row {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 14px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.sync-bar-label {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
  min-width: 120px;
  text-align: left;
}

.sync-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  margin: 0 12px;
  overflow: hidden;
}

.sync-bar-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transition: width 0.1s linear;
}

.sync-bar-pct {
  font-family: 'Barlow Condensed', 'Inter', monospace !important;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  min-width: 38px;
  text-align: right;
}

.sync-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.sync-cancel-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 28px;
  border-radius: 999px;
  cursor: pointer;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

.sync-cancel-btn:hover,
.sync-cancel-btn:focus,
.sync-cancel-btn.nav-focused {
  border: 2px solid #ff3344 !important;
  outline: none !important;
  outline-offset: 0 !important;
  background: #7a0f16 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 5. ACTIVATION SPLIT VIEW — SANSAT OTT */
.activation-screen-container {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--app-bg-gradient) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

.activation-split-view {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  overflow: hidden !important;
  background: var(--app-bg-gradient) !important;
}

.act-split-left {
  flex: 0 0 48vw !important;
  width: 48vw !important;
  height: 100% !important;
  background: var(--app-bg-gradient) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: max(24px, env(safe-area-inset-top, 24px)) !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  padding-left: calc(max(24px, env(safe-area-inset-left, 24px)) + 24px) !important;
  padding-right: 24px !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.act-left-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  max-width: 390px;
}

.act-logo-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(229, 9, 20, 0.55), 0 0 60px rgba(229, 9, 20, 0.25);
  object-fit: contain;
}

.act-notice-title {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 2px 0 0 0;
  letter-spacing: 0.2px;
  text-align: center;
}

.act-notice-desc {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  text-align: center;
  max-width: 380px;
}

.act-left-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-bottom: 24px !important;
  margin-bottom: 8px !important;
}

.act-trial-warning {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: center;
}

.days-red {
  color: #e50914 !important;
  font-weight: 800 !important;
}

.act-thanks-text {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
  text-align: center;
}

.act-split-right {
  flex: 0 0 52vw !important;
  width: 52vw !important;
  height: 100% !important;
  background: linear-gradient(135deg, #8A0D22 0%, #1A0307 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  padding-left: 24px !important;
  padding-right: calc(max(24px, env(safe-area-inset-right, 24px)) + 24px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.act-right-content {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.act-right-heading {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.2px;
}

.act-right-sub {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.act-section-title {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin: 2px 0 4px 0;
}

.act-steps-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.act-step-item {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.act-step-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.act-step-icon svg {
  width: 12px;
  height: 12px;
}

.act-step-text {
  flex: 1;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px;
  line-height: 1.35;
  color: #ffffff;
}

.act-highlight-url {
  color: #e50914;
  font-weight: 800;
}

.act-creds-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.act-cred-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.act-creds-line {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, monospace !important;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.act-creds-line strong {
  color: #e50914;
  font-weight: 800;
}

.act-creds-copy-btn {
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid #e50914;
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  flex-shrink: 0;
  text-transform: uppercase;
}

.act-creds-copy-btn:hover,
.act-creds-copy-btn:focus,
.act-creds-copy-btn.nav-focused {
  background: #e50914;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.6);
}

.act-right-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.act-btn-pill {
  width: 90px;
  height: 32px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  outline: none;
}

.act-btn-pill svg {
  width: 16px;
  height: 16px;
}

.act-btn-pill:hover,
.act-btn-pill:focus,
.act-btn-pill.nav-focused {
  border-color: #e50914;
  background: rgba(229, 9, 20, 0.25);
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.5);
  transform: scale(1.05);
}

/* 6. PLAYLISTS SCREEN — SANSAT OTT */
.playlists-screen-container {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--app-bg-gradient) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

.playlists-native-wrap,
.search-screen,
.dl-screen-layout,
.catchup-screen,
html[data-device="tv"] .playlists-native-wrap,
html[data-device="tv"] .search-screen,
html[data-device="tv"] .dl-screen-layout,
html[data-device="tv"] .catchup-screen {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--app-bg-gradient) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  contain: strict !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

@supports (padding-left: max(0px)) {
  .playlists-native-wrap,
  .search-screen,
  .dl-screen-layout,
  .catchup-screen,
  .sports-top-bar,
  .sports-content-scroll,
  html[data-device="tv"] .playlists-native-wrap,
  html[data-device="tv"] .search-screen,
  html[data-device="tv"] .dl-screen-layout,
  html[data-device="tv"] .catchup-screen {
    padding-left: var(--app-pad-x) !important;
    padding-right: var(--app-pad-r) !important;
  }
}

.playlists-top-header,
.search-top-header,
.dl-top-header,
.catchup-header,
html[data-device="tv"] .playlists-top-header,
html[data-device="tv"] .search-top-header,
html[data-device="tv"] .dl-top-header,
html[data-device="tv"] .catchup-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--app-header-h) !important;
  min-height: var(--app-header-h) !important;
  max-height: var(--app-header-h) !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.pl-top-left,
.search-header-left,
.dl-header-left,
.catchup-header-left,
html[data-device="tv"] .pl-top-left,
html[data-device="tv"] .search-header-left,
html[data-device="tv"] .dl-header-left,
html[data-device="tv"] .catchup-header-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   DEVICE ISOLATION: SUBPAGES HEADER (TV vs MOBILE / TABLET)
   - On Smart TV (mode=tv, Samsung Tizen, LG webOS, Android TV):
     Show Brand Logo sphere + Vertical '|' Separator.
   - On Mobile & Tablet (html:not([data-device="tv"])):
     Strictly HIDE Logo sphere and Separator.
     ONLY show clean Back Button '<' + Page Title.
   ========================================================================== */
html[data-device="tv"] .pl-top-logo,
html[data-device="tv"] .search-top-header .pl-top-logo,
html[data-device="tv"] .dl-top-header .pl-top-logo,
html[data-device="tv"] .catchup-header .pl-top-logo {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

html[data-device="tv"] .pl-top-sep,
html[data-device="tv"] .search-top-header .pl-top-sep,
html[data-device="tv"] .dl-top-header .pl-top-sep,
html[data-device="tv"] .catchup-header .pl-top-sep {
  width: 1px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  margin: 0 4px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
  align-self: center !important;
}

/* Mobile & Tablet: Hide logo and separator on all subpage headers */
html:not([data-device="tv"]) .pl-top-logo,
html:not([data-device="tv"]) .pl-top-sep,
html:not([data-device="tv"]) .search-top-header .pl-top-logo,
html:not([data-device="tv"]) .search-top-header .pl-top-sep,
html:not([data-device="tv"]) .dl-top-header .pl-top-logo,
html:not([data-device="tv"]) .dl-top-header .pl-top-sep,
html:not([data-device="tv"]) .catchup-header .pl-top-logo,
html:not([data-device="tv"]) .catchup-header .pl-top-sep,
html:not([data-device="tv"]) .settings-brand-badge,
html:not([data-device="tv"]) .settings-brand-divider,
html:not([data-device="tv"]) .notif-brand-badge,
html:not([data-device="tv"]) .notif-brand-divider {
  display: none !important;
}

/* Mobile & Tablet: Ensure Back Button '<' is cleanly displayed and aligned */
html:not([data-device="tv"]) .live-back-chevron,
html:not([data-device="tv"]) .dl-back-btn,
html:not([data-device="tv"]) .pl-back-btn,
html:not([data-device="tv"]) .search-back-btn,
html:not([data-device="tv"]) .catchup-back-btn,
html:not([data-device="tv"]) .settings-back-btn,
html:not([data-device="tv"]) .pl-info-back-btn,
html:not([data-device="tv"]) #dl-back-btn,
html:not([data-device="tv"]) #pl-back-btn,
html:not([data-device="tv"]) #search-back-btn,
html:not([data-device="tv"]) #settings-back-btn,
html:not([data-device="tv"]) #notif-back-btn,
html:not([data-device="tv"]) #catchup-btn-back-home,
html:not([data-device="tv"]) #catchup-btn-back-channels,
html:not([data-device="tv"]) #catchup-btn-back-empty {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* RTL: In Arabic RTL mode, mirror Back Button chevron (rotate 180deg) strictly on subpages (Search, Catchup, Settings, Playlists, Downloads, Movie/Series Detail) */
html[dir="rtl"] .dl-back-btn svg,
html[dir="rtl"] .pl-back-btn svg,
html[dir="rtl"] .search-back-btn svg,
html[dir="rtl"] .catchup-back-btn svg,
html[dir="rtl"] .settings-back-btn svg,
html[dir="rtl"] .pl-info-back-btn svg,
html[dir="rtl"] .live-epg-back-btn svg,
html[dir="rtl"] #dl-back-btn svg,
html[dir="rtl"] #pl-back-btn svg,
html[dir="rtl"] #search-back-btn svg,
html[dir="rtl"] #settings-back-btn svg,
html[dir="rtl"] #notif-back-btn svg,
html[dir="rtl"] #catchup-btn-back-home svg,
html[dir="rtl"] #catchup-btn-back-channels svg,
html[dir="rtl"] #catchup-btn-back-empty svg,
html[dir="rtl"] #catchup-loading-back svg,
html[dir="rtl"] #vod-detail-back-btn svg,
html[dir="rtl"] #series-detail-back-btn svg,
html[dir="rtl"] .sansat-detail-back-btn svg {
  transform: rotate(180deg) !important;
}

html[dir="rtl"] .dl-back-btn:hover svg,
html[dir="rtl"] .dl-back-btn.nav-focused svg,
html[dir="rtl"] .pl-back-btn:hover svg,
html[dir="rtl"] .pl-back-btn.nav-focused svg,
html[dir="rtl"] .search-back-btn:hover svg,
html[dir="rtl"] .search-back-btn.nav-focused svg,
html[dir="rtl"] .catchup-back-btn:hover svg,
html[dir="rtl"] .catchup-back-btn.nav-focused svg,
html[dir="rtl"] .settings-back-btn:hover svg,
html[dir="rtl"] .settings-back-btn.nav-focused svg,
html[dir="rtl"] .pl-info-back-btn:hover svg,
html[dir="rtl"] .pl-info-back-btn.nav-focused svg,
html[dir="rtl"] .live-epg-back-btn:hover svg,
html[dir="rtl"] .live-epg-back-btn.nav-focused svg,
html[dir="rtl"] #vod-detail-back-btn:hover svg,
html[dir="rtl"] #vod-detail-back-btn.nav-focused svg,
html[dir="rtl"] #series-detail-back-btn:hover svg,
html[dir="rtl"] #series-detail-back-btn.nav-focused svg,
html[dir="rtl"] .sansat-detail-back-btn:hover svg,
html[dir="rtl"] .sansat-detail-back-btn.nav-focused svg {
  transform: rotate(180deg) scale(1.15) !important;
}

/* SPORTS, VOD CATALOG & SERIES CATALOG BACK BUTTONS ARE ALWAYS STRICTLY LTR (NEVER ROTATED) */
#sports-btn-back svg,
#vod-btn-back svg,
#series-btn-back svg,
.media-top-header .live-back-chevron svg,
.sports-top-bar .live-back-chevron svg,
html[dir="rtl"] #sports-btn-back svg,
html[dir="rtl"] #vod-btn-back svg,
html[dir="rtl"] #series-btn-back svg,
html[dir="rtl"] .media-top-header .live-back-chevron svg,
html[dir="rtl"] .sports-top-bar .live-back-chevron svg {
  transform: none !important;
}

html[dir="rtl"] #sports-btn-back:hover svg,
html[dir="rtl"] #sports-btn-back.nav-focused svg,
html[dir="rtl"] #vod-btn-back:hover svg,
html[dir="rtl"] #vod-btn-back.nav-focused svg,
html[dir="rtl"] #series-btn-back:hover svg,
html[dir="rtl"] #series-btn-back.nav-focused svg {
  transform: scale(1.15) !important;
}

/* ==========================================================================
   UNIFIED HEADER TITLE TYPOGRAPHY (TV vs MOBILE / TABLET)
   
   1. On Smart TV (mode=tv, Samsung, LG, Android TV):
      ALL subpage titles (Playlists, Repetir, Buscar, Descargas, Ajustes,
      Notificaciones & Información de cuenta) share the exact same
      prominent, bold 27px TV typography:
      font-size: 27px !important;
      font-weight: 800 !important;

   2. On Mobile & Tablet (html:not([data-device="tv"])):
      ALL subpage titles share the exact same balanced, sleek mobile typography
      as Notificaciones & Información de cuenta:
      font-size: clamp(20px, 2.4vw, 24px) !important;
      font-weight: 700 !important;
   ========================================================================== */

/* --- 1. SMART TV MODE: ALL TITLES 27px / 800 --- */
html[data-device="tv"] .playlists-screen-title,
html[data-device="tv"] .media-screen-title,
html[data-device="tv"] .dl-header-title,
html[data-device="tv"] .search-screen-title,
html[data-device="tv"] .catchup-screen-title,
html[data-device="tv"] .settings-header-title,
html[data-device="tv"] .pl-info-title,
html[data-device="tv"] .notifications-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* --- 2. MOBILE & TABLET MODE: ALL TITLES clamp(20px, 2.4vw, 24px) / 700 --- */
html:not([data-device="tv"]) .playlists-screen-title,
html:not([data-device="tv"]) .media-screen-title,
html:not([data-device="tv"]) .dl-header-title,
html:not([data-device="tv"]) .search-screen-title,
html:not([data-device="tv"]) .catchup-screen-title,
html:not([data-device="tv"]) .settings-header-title,
html:not([data-device="tv"]) .pl-info-title,
html:not([data-device="tv"]) .live-screen-title,
html:not([data-device="tv"]) .notifications-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* MOBILE & TABLET MODE: LIVE CHANNELS SPECIFIC FONT & ICON COMPACT SIZES (media_1793227705061_7f46178b.png) */
html:not([data-device="tv"]) .live-screen-title,
body:not(.device-tv) .live-screen-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

html:not([data-device="tv"]) .live-back-chevron,
body:not(.device-tv) .live-back-chevron {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

html:not([data-device="tv"]) .live-back-chevron svg,
body:not(.device-tv) .live-back-chevron svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.5 !important;
}

html:not([data-device="tv"]) .live-icon-btn,
body:not(.device-tv) .live-icon-btn {
  width: 22px !important;
  height: 22px !important;
}

html:not([data-device="tv"]) .live-icon-btn svg,
body:not(.device-tv) .live-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
}

html:not([data-device="tv"]) .live-search-pill,
body:not(.device-tv) .live-search-pill {
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
}

html:not([data-device="tv"]) .live-search-input,
body:not(.device-tv) .live-search-input {
  font-size: 12px !important;
}

html:not([data-device="tv"]) .live-cat-row,
html:not([data-device="tv"]) .live-channel-row,
body:not(.device-tv) .live-cat-row,
body:not(.device-tv) .live-channel-row {
  min-height: 38px !important;
  max-height: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
}

html:not([data-device="tv"]) .live-cat-row.active,
html:not([data-device="tv"]) .live-channel-row.selected,
body:not(.device-tv) .live-cat-row.active,
body:not(.device-tv) .live-channel-row.selected {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

html:not([data-device="tv"]) .live-cat-name,
html:not([data-device="tv"]) .live-channel-name,
body:not(.device-tv) .live-cat-name,
body:not(.device-tv) .live-channel-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25px !important;
}

html:not([data-device="tv"]) .live-cat-count,
body:not(.device-tv) .live-cat-count {
  font-size: 12px !important;
  font-weight: 600 !important;
}

html:not([data-device="tv"]) .live-channel-num,
body:not(.device-tv) .live-channel-num {
  font-size: 12px !important;
  width: 18px !important;
  font-weight: 600 !important;
}

html:not([data-device="tv"]) .live-channel-logo-box,
body:not(.device-tv) .live-channel-logo-box {
  width: 30px !important;
  height: 20px !important;
  border-radius: 4px !important;
}

/* Hide Sort & Search in Mobile Live Preview Action bar (Mobile shows: Favorite, EPG, Sports) */
html:not([data-device="tv"]) .live-preview-actions #live-btn-sort,
html:not([data-device="tv"]) .live-preview-actions #live-btn-search,
body:not(.device-tv) .live-preview-actions #live-btn-sort,
body:not(.device-tv) .live-preview-actions #live-btn-search {
  display: none !important;
}

html:not([data-device="tv"]) .live-preview-actions #live-btn-sports,
body:not(.device-tv) .live-preview-actions #live-btn-sports {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

html:not([data-device="tv"]) .live-preview-actions,
body:not(.device-tv) .live-preview-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

html:not([data-device="tv"]) .live-action-pill,
body:not(.device-tv) .live-action-pill {
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  flex: 1 !important;
}

html:not([data-device="tv"]) .live-action-pill:hover,
html:not([data-device="tv"]) .live-action-pill:focus,
html:not([data-device="tv"]) .live-action-pill.nav-focused,
html:not([data-device="tv"]) .live-action-pill.active,
body:not(.device-tv) .live-action-pill:hover,
body:not(.device-tv) .live-action-pill:focus,
body:not(.device-tv) .live-action-pill.nav-focused,
body:not(.device-tv) .live-action-pill.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

html:not([data-device="tv"]) .live-action-pill svg,
body:not(.device-tv) .live-action-pill svg {
  width: 22px !important;
  height: 22px !important;
}

html:not([data-device="tv"]) .live-preview-ch-name,
body:not(.device-tv) .live-preview-ch-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

html:not([data-device="tv"]) .live-preview-ch-logo,
body:not(.device-tv) .live-preview-ch-logo {
  width: 32px !important;
  height: 22px !important;
}

html:not([data-device="tv"]) .live-program-title,
body:not(.device-tv) .live-program-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

html:not([data-device="tv"]) .live-time-label,
body:not(.device-tv) .live-time-label {
  font-size: 10.5px !important;
  font-weight: 500 !important;
}

html:not([data-device="tv"]) .live-timeline-track,
body:not(.device-tv) .live-timeline-track {
  height: 3px !important;
}

/* Base Fallback */
.playlists-screen-title,
.media-screen-title,
.dl-header-title,
.search-screen-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

html[dir="rtl"] .playlists-screen-title,
html[dir="rtl"] .media-screen-title,
html[dir="rtl"] .dl-header-title,
html[dir="rtl"] .search-screen-title,
html[dir="rtl"] .catchup-screen-title,
html[dir="rtl"] .settings-header-title,
html[dir="rtl"] .pl-info-title,
html[dir="rtl"] .notifications-title,
[dir="rtl"] .playlists-screen-title,
[dir="rtl"] .media-screen-title,
[dir="rtl"] .dl-header-title,
[dir="rtl"] .search-screen-title,
[dir="rtl"] .catchup-screen-title,
[dir="rtl"] .settings-header-title,
[dir="rtl"] .pl-info-title,
[dir="rtl"] .notifications-title {
  font-family: 'Tajawal', sans-serif !important;
}

.pl-top-right-creds {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pl-cred-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pl-cred-label {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
}

.pl-cred-val-crimson {
  font-family: 'Barlow Condensed', 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
}

.playlists-content-area {
  flex: 1;
  display: flex;
  align-items: flex-start !important;
  padding-top: 32px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box;
}

.playlists-cards-row {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  width: 100%;
}

.pl-card-crimson {
  width: clamp(240px, 24vw, 290px) !important;
  height: 96px !important;
  min-width: clamp(240px, 24vw, 290px) !important;
  min-height: 96px !important;
  background: #8b0d14 !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  outline: none !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  position: relative !important;
}

.pl-card-crimson.selected {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  background: #9b1018 !important;
}

.pl-card-crimson:hover,
.pl-card-crimson:focus,
.pl-card-crimson.nav-focused {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  background: #bd141f !important;
}

.pl-card-crimson.selected:hover,
.pl-card-crimson.selected:focus,
.pl-card-crimson.selected.nav-focused {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
  background: #c91823 !important;
}

.pl-card-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pl-card-icon-box svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.pl-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pl-card-title {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: left !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pl-card-subtitle {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-align: left !important;
  letter-spacing: 0.2px !important;
}

.pl-card-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-card-chevron svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

.playlists-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
  padding-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.playlists-legal-text {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  flex: 1 !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  max-height: 999999px !important;
}

.playlists-legal-text div,
.playlists-legal-text span,
.pl-legal-line {
  display: block !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 2px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  max-height: 999999px !important;
}

.pl-legal-link {
  color: #e50914 !important;
  text-decoration: none !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

.pl-legal-link:hover {
  text-decoration: underline !important;
}

.pl-reload-circle-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #e50914 !important;
  color: #e50914 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.pl-reload-circle-btn svg {
  width: 16px;
  height: 16px;
}

.pl-reload-circle-btn:hover,
.pl-reload-circle-btn:focus,
.pl-reload-circle-btn.nav-focused {
  background: #e50914;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.7);
  transform: scale(1.1);
}

.pl-reload-circle-btn.rotating svg {
  animation: spinRel 0.8s linear infinite;
}

/* ==========================================================================
   PLAYLISTS SCREEN (RELOAD LIST) — ARABIC RTL FIXES
   ========================================================================== */
html[dir="rtl"] .playlists-screen-title,
[dir="rtl"] .playlists-screen-title {
  font-family: 'Tajawal', sans-serif !important;
}

html[dir="rtl"] .pl-card-title,
[dir="rtl"] .pl-card-title {
  font-family: 'Tajawal', sans-serif !important;
  text-align: right !important;
}

html[dir="rtl"] .pl-cred-label,
[dir="rtl"] .pl-cred-label {
  font-family: 'Tajawal', sans-serif !important;
}

html[dir="rtl"] .playlists-legal-text,
html[dir="rtl"] .pl-legal-line,
[dir="rtl"] .playlists-legal-text,
[dir="rtl"] .pl-legal-line {
  font-family: 'Tajawal', sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .playlists-bottom-bar,
[dir="rtl"] .playlists-bottom-bar {
  direction: rtl !important;
}

/* Paywall & No Playlists Screen in RTL */
html[dir="rtl"] .activation-split-view,
[dir="rtl"] .activation-split-view {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] .act-right-content,
[dir="rtl"] .act-right-content {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .act-right-heading,
html[dir="rtl"] .act-right-sub,
html[dir="rtl"] .act-section-title,
html[dir="rtl"] .act-step-text,
html[dir="rtl"] .act-creds-line,
html[dir="rtl"] .act-notice-title,
html[dir="rtl"] .act-notice-desc,
html[dir="rtl"] .act-thanks-text,
html[dir="rtl"] .act-trial-warning {
  font-family: 'Tajawal', sans-serif !important;
}

html[dir="rtl"] .act-step-item,
[dir="rtl"] .act-step-item {
  direction: rtl !important;
}

html[dir="rtl"] .act-step-text,
[dir="rtl"] .act-step-text {
  text-align: right !important;
}

html[dir="rtl"] .act-creds-col,
[dir="rtl"] .act-creds-col {
  direction: rtl !important;
}

html[dir="rtl"] .act-creds-line strong,
[dir="rtl"] .act-creds-line strong {
  direction: ltr !important;
  display: inline-block !important;
  font-family: 'Barlow Condensed', monospace !important;
}

/* Sync & Loading Screen in RTL */
html[dir="rtl"] .sansat-sync-screen,
[dir="rtl"] .sansat-sync-screen {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] .sync-status-box,
[dir="rtl"] .sync-status-box {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .sync-status-title,
html[dir="rtl"] .sync-status-sub,
html[dir="rtl"] .sync-hero-tagline,
html[dir="rtl"] .sync-hero-desc,
html[dir="rtl"] .sync-bar-label,
html[dir="rtl"] .sync-cancel-btn {
  font-family: 'Tajawal', sans-serif !important;
}

html[dir="rtl"] .sync-bar-row,
[dir="rtl"] .sync-bar-row {
  direction: rtl !important;
}

html[dir="rtl"] .sync-bar-label,
[dir="rtl"] .sync-bar-label {
  text-align: right !important;
  font-family: 'Tajawal', sans-serif !important;
}

html[dir="rtl"] .sync-bar-pct,
[dir="rtl"] .sync-bar-pct {
  direction: ltr !important;
  font-family: 'Barlow Condensed', monospace !important;
}

/* =========================================================
   7. PWA INSTALL PROMPT MODAL (PHOTO media_1792559359876_5de13283.png)
   Luxury Obsidian & Crimson Theme with iOS Safari / Android Chrome Guides
========================================================= */
.sansat-pwa-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 10000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sansat-pwa-backdrop.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.sansat-pwa-sheet {
  background: linear-gradient(180deg, #1C040A 0%, #0D0205 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.35) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), 0 0 40px rgba(229, 9, 20, 0.25) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 20px 24px 22px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sansat-pwa-backdrop.visible .sansat-pwa-sheet {
  transform: translateY(0) scale(1);
}

.pwa-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  margin-bottom: 12px;
}

.pwa-sheet-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

html[dir=rtl] .pwa-sheet-close {
  right: auto;
  left: 16px;
}

.pwa-sheet-close:hover,
.pwa-sheet-close:focus {
  background: #e50914;
  color: #ffffff;
}

.pwa-sheet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.pwa-logo-box {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(229, 9, 20, 0.45);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}

.pwa-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pwa-sheet-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
}

.pwa-sheet-badge {
  background: rgba(229, 9, 20, 0.14);
  border: 1px solid rgba(229, 9, 20, 0.3);
  color: #FF2E6D;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.1px;
}

.pwa-sheet-body {
  width: 100%;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-step-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pwa-share-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 3px 6px;
  color: #0A84FF;
  vertical-align: middle;
}

.pwa-step-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.pwa-action-highlight {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.pwa-sheet-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-main-btn {
  width: 100%;
  background: linear-gradient(135deg, #e50914 0%, #8a060d 100%);
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.45);
}

.pwa-main-btn:hover,
.pwa-main-btn:focus,
.pwa-main-btn.nav-focused {
  background: #ff2233;
  box-shadow: 0 0 24px rgba(229, 9, 20, 0.7);
  transform: translateY(-1px);
}

.pwa-sec-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

.pwa-sec-btn:hover,
.pwa-sec-btn:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Compact Landscape Adjustments for PWA Modal */
@media (max-height: 480px) {
  .sansat-pwa-sheet {
    max-width: 480px !important;
    padding: 12px 20px 14px 20px !important;
  }
  .pwa-sheet-handle {
    display: none !important;
  }
  .pwa-sheet-header {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  .pwa-logo-box {
    width: 44px !important;
    height: 44px !important;
  }
  .pwa-sheet-title {
    font-size: 16px !important;
  }
  .pwa-sheet-badge {
    font-size: 10px !important;
    padding: 2px 10px !important;
  }
  .pwa-sheet-body {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  .pwa-step-text {
    font-size: 11px !important;
  }
  .pwa-step-box {
    padding: 6px 10px !important;
  }
  .pwa-action-highlight {
    font-size: 12px !important;
  }
  .pwa-main-btn {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .pwa-sec-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   COMPACT LANDSCAPE ADJUSTMENTS (SMARTPHONES HEIGHT <= 480px)
   Guarantees zero letterboxing and perfectly balanced spacing
========================================================= */
@media (max-height: 480px) {
  .act-split-left {
    padding: 24px 20px 20px 20px !important;
  }
  .act-left-head {
    padding-top: 6px !important;
    gap: 8px !important;
  }
  .act-logo-img {
    width: 66px !important;
    height: 66px !important;
  }
  .act-notice-title {
    font-size: 19.5px !important;
  }
  .act-notice-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .act-left-foot {
    padding-bottom: 18px !important;
    margin-bottom: 4px !important;
  }
  .act-trial-warning {
    font-size: 11px !important;
  }
  .act-thanks-text {
    font-size: 10px !important;
  }
  .act-split-right {
    padding: 12px 20px !important;
  }
  .act-right-heading {
    font-size: 20px !important;
  }
  .act-right-sub {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
  .act-section-title {
    font-size: 13px !important;
    margin: 1px 0 3px 0 !important;
  }
  .act-step-item {
    padding: 4px 10px !important;
    gap: 9px !important;
  }
  .act-step-icon {
    width: 20px !important;
    height: 20px !important;
  }
  .act-step-icon svg {
    width: 11px !important;
    height: 11px !important;
  }
  .act-step-text {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  .act-creds-line {
    font-size: 11.5px !important;
  }
  .act-creds-copy-btn {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
  }
  .act-right-buttons {
    margin-top: 4px !important;
    gap: 12px !important;
  }
  .act-btn-pill {
    width: 84px !important;
    height: 30px !important;
  }
  .act-btn-pill svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* =========================================================
   PLAYLIST / ACCOUNT INFO SCREEN (media_1792569096024_5ee5c7b4.png)
========================================================= */
.playlist-info-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative;
  padding-left: max(clamp(24px, 4.5vw, 56px), env(safe-area-inset-left));
  padding-right: max(clamp(24px, 4.5vw, 56px), env(safe-area-inset-right));
  padding-top: max(clamp(16px, 2.8vh, 26px), env(safe-area-inset-top));
  padding-bottom: max(clamp(16px, 2.8vh, 26px), env(safe-area-inset-bottom));
  background: var(--app-bg-gradient);
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

.pl-info-content-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0;
}

.pl-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2.8vh, 28px);
}

.pl-info-back-btn,
.pl-info-back-btn:hover,
.pl-info-back-btn:focus,
.pl-info-back-btn.nav-focused {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pl-info-back-btn svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff !important;
  transition: transform 0.2s ease;
}

.pl-info-back-btn:hover svg,
.pl-info-back-btn.nav-focused svg {
  transform: scale(1.16);
}

html[dir="rtl"] .pl-info-back-btn svg {
  transform: rotate(180deg);
}

html[dir="rtl"] .pl-info-back-btn:hover svg,
html[dir="rtl"] .pl-info-back-btn.nav-focused svg {
  transform: rotate(180deg) scale(1.16);
}

.pl-info-title {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin: 0;
  line-height: 1;
}

html[data-device="tv"] .pl-info-title {
  font-size: 27px !important;
  font-weight: 800 !important;
}

.pl-info-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.8vh, 16px) clamp(16px, 2vw, 26px);
  width: 100%;
}

.pl-info-card {
  background: rgba(22, 23, 27, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: clamp(12px, 1.8vh, 15px) clamp(16px, 1.8vw, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  outline: none !important;
}

.pl-info-card:hover,
.pl-info-card.nav-focused {
  border-color: rgba(211, 47, 47, 0.6);
  background: rgba(32, 34, 40, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(211, 47, 47, 0.25);
}

.pl-info-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pl-info-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #d32f2f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d32f2f;
  flex-shrink: 0;
}

.pl-info-icon-badge svg {
  width: 18px;
  height: 18px;
}

.pl-info-lbl {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.pl-info-val {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: #ffffff;
}

.pl-val-active {
  color: #00e676 !important;
  font-weight: 800;
}

/* =========================================================
   ARABIC CAIRO FONT ENGINE
========================================================= */
.ar-font,
.ar-font *,
:lang(ar),
[dir="rtl"] .sansat-detail-title,
[dir="rtl"] .sansat-detail-plot,
[dir="rtl"] .search-screen-title,
[dir="rtl"] .search-poster-title {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* =========================================================
   GENERAL SEARCH SCREEN (media_1792570303068 / media_1792570304004)
========================================================= */
.search-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  background: var(--app-bg-gradient) !important;
  color: #ffffff;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.search-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--app-header-h);
  margin-bottom: 14px;
  gap: 20px;
  flex-shrink: 0;
}

.search-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-back-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.search-back-btn svg {
  width: 26px;
  height: 26px;
  stroke: #ffffff !important;
}

.search-back-btn:hover svg,
.search-back-btn.nav-focused svg {
  transform: scale(1.18);
}

html[dir="rtl"] .search-back-btn svg {
  transform: rotate(180deg);
}

.search-input-capsule,
.search-input-capsule:focus,
.search-input-capsule:focus-visible,
.search-input-capsule:focus-within,
.search-input-capsule.nav-focused {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  width: 280px !important;
  gap: 10px !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-input-icon {
  width: 18px !important;
  height: 18px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  stroke: rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}

.search-input-field,
.search-input-field:focus,
.search-input-field:focus-visible,
.search-input-field.nav-focused,
#search-input,
#search-input:focus,
#search-input:focus-visible {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.search-input-field::placeholder,
#search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
}
#search-input:focus,
#search-input:focus-visible,
#search-input.nav-focused {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  width: 100%;
  -webkit-appearance: none !important;
}

.search-input-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-input-clear {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
}

.search-input-clear:hover {
  color: #ffffff;
}

.search-body {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  flex: 1;
  min-height: 0;
}

.search-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: clamp(140px, 16vw, 190px);
  flex-shrink: 0;
}

.search-tab-btn {
  background: transparent;
  border: none;
  outline: none !important;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  text-align: left;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

html[dir="rtl"] .search-tab-btn {
  text-align: right;
}

.search-tab-btn:hover,
.search-tab-btn.nav-focused {
  background: rgba(255, 255, 255, 0.08);
}

.search-tab-btn.active {
  background: #991414 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(153, 20, 20, 0.5);
}

.search-results-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  padding-right: 6px;
}

.search-empty-prompt {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.12);
  text-align: center;
  margin-top: clamp(80px, 22vh, 180px);
  letter-spacing: 0.5px;
  pointer-events: none;
}

.search-loading-prompt,
.search-no-results {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  margin-top: 100px;
}

/* 6-Column Poster Grid — SANSAT OTT */
.search-posters-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 14px);
  padding-bottom: 24px;
}

@media (max-width: 1024px) {
  .search-posters-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .search-posters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .search-posters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.search-poster-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 2 / 3;
  background: #14161a;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.search-poster-card:hover,
.search-poster-card.nav-focused {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(211, 47, 47, 0.4);
  border-color: rgba(211, 47, 47, 0.8);
  z-index: 5;
}

.search-poster-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background: #121418;
}

.search-poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.25);
  background: #14161a;
  z-index: 1;
}

.search-poster-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  background: transparent;
}

.search-poster-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

.search-poster-title {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  z-index: 4;
}

/* Channels List in Search */
.search-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding-bottom: 24px;
}

.search-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 22, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none !important;
}

.search-channel-card:hover,
.search-channel-card.nav-focused {
  background: rgba(32, 34, 42, 0.95);
  border-color: rgba(211, 47, 47, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(211, 47, 47, 0.3);
}

.search-channel-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.search-channel-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-channel-fallback {
  font-size: 20px;
}

.search-channel-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   MOVIE DETAIL SCREEN (media_1792570433094_e75a8b23.png)
========================================================= */
.sansat-movie-detail-screen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
  z-index: 50 !important;
  background: #080204 !important;
  animation: sansatDetailEnter 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

.sansat-movie-detail-screen.sansat-detail-exit,
.sansat-series-detail-screen.sansat-detail-exit {
  animation: sansatDetailExit 0.18s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes sansatDetailEnter {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sansatDetailExit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(28px);
  }
}

.lite .sansat-movie-detail-screen,
.lite .sansat-series-detail-screen {
  animation: none !important;
  transition: none !important;
}

/* TMDB / Cinemeta Detail Title & Logo Constraints */
.sansat-detail-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 12px !important;
  min-height: 44px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.sansat-detail-title-wrap .sansat-detail-title {
  margin: 0 !important;
}

.sansat-detail-logo,
#vod-detail-logo-img,
#series-detail-logo-img {
  display: block !important;
  max-height: 70px !important;
  max-width: 360px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
}

.sansat-detail-logo[style*="display: none"],
#vod-detail-logo-img[style*="display: none"],
#series-detail-logo-img[style*="display: none"] {
  display: none !important;
}

html[dir="rtl"] .sansat-detail-logo,
[dir="rtl"] .sansat-detail-logo,
html[dir="rtl"] #vod-detail-logo-img,
[dir="rtl"] #vod-detail-logo-img,
html[dir="rtl"] #series-detail-logo-img,
[dir="rtl"] #series-detail-logo-img {
  object-position: left center !important;
}

@media (max-width: 768px), (max-height: 550px) {
  .sansat-detail-title-wrap {
    min-height: 38px !important;
    margin-bottom: 8px !important;
  }
  .sansat-detail-logo,
  #vod-detail-logo-img,
  #series-detail-logo-img {
    max-height: 44px !important;
    max-width: min(220px, 80vw) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .sansat-detail-title-wrap {
    min-height: 34px !important;
    margin-bottom: 6px !important;
  }
  .sansat-detail-logo,
  #vod-detail-logo-img,
  #series-detail-logo-img {
    max-height: 38px !important;
    max-width: min(180px, 35vw) !important;
  }
}

.sansat-detail-backdrop-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #080204 !important;
  pointer-events: none !important;
}

.sansat-detail-backdrop-bg img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.55 !important;
  filter: brightness(0.7) saturate(1.15) !important;
}

.sansat-detail-backdrop-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 70% 30%, rgba(20, 2, 4, 0.25) 0%, rgba(8, 2, 4, 0.65) 50%, rgba(0, 0, 0, 0.92) 100%) !important;
  pointer-events: none !important;
}

.sansat-detail-top-bar {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--app-header-h) !important;
  padding: 0 var(--app-pad-r) 0 var(--app-pad-x) !important;
  margin-top: var(--app-pad-top) !important;
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  flex-direction: row !important;
}

html[data-device="tv"] .sansat-detail-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.sansat-movie-main-layout {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 var(--app-pad-r) 20px var(--app-pad-x) !important;
  box-sizing: border-box !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.sansat-movie-upper-row {
  display: flex !important;
  gap: clamp(24px, 3.5vw, 44px) !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.sansat-movie-lower-row {
  margin-top: clamp(16px, 2.5vh, 28px);
  max-width: 960px;
}

.sansat-detail-stacked-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.sansat-detail-meta-under-btns {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-width: 880px !important;
  max-height: 38vh !important;
  overflow-y: auto !important;
}
}

.sansat-detail-meta-under-btns .sansat-detail-plot {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.sansat-detail-meta-under-btns .sansat-detail-cast {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.sansat-detail-back-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.sansat-detail-back-btn svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff !important;
  stroke-width: 3.2;
}

.sansat-detail-back-btn:hover,
.sansat-detail-back-btn.nav-focused {
  opacity: 0.85;
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
}

html[dir="rtl"] .sansat-detail-back-btn svg {
  transform: rotate(180deg) !important;
}

.sansat-detail-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

html[data-device="tv"] .sansat-detail-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* RTL ARABIC: Back button on the RIGHT, Action icons (rating, fav, trailer) on the LEFT */
html[dir="rtl"] .sansat-detail-top-bar,
[dir="rtl"] .sansat-detail-top-bar,
html[dir="rtl"][data-device="tv"] .sansat-detail-top-bar {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html[dir="rtl"] .sansat-detail-actions-right,
[dir="rtl"] .sansat-detail-actions-right,
html[dir="rtl"][data-device="tv"] .sansat-detail-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Hard Lock: Keep Movie and Series Rows & Columns strictly LTR structure (never invert columns) */
.sansat-movie-detail-screen,
.sansat-series-detail-screen,
.sansat-movie-main-layout,
.sansat-movie-upper-row,
.sansat-movie-lower-row,
.sansat-detail-poster-col,
.sansat-detail-info-col,
.sansat-series-main-layout,
.sansat-series-left-col,
.sansat-series-right-col,
.sansat-series-poster-block,
.sansat-series-info-block,
.sansat-detail-main-layout,
.sansat-detail-stacked-buttons,
.sansat-detail-btn-row,
.sansat-season-header-row,
.sansat-season-selector-wrap,
.sansat-episode-card {
  direction: ltr !important;
}

/* Cairo Font on any Arabic text in detail views */
.sansat-detail-title.ar-font,
.sansat-detail-title.ar-font *,
.sansat-detail-plot.ar-font,
.sansat-detail-cast.ar-font,
.sansat-detail-genre-top.ar-font,
html[dir="rtl"] .sansat-detail-genre-top.ar-font,
[dir="rtl"] .sansat-detail-genre-top.ar-font {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.sansat-detail-plot.ar-font,
.sansat-detail-cast.ar-font {
  direction: rtl !important;
  text-align: right !important;
}

.sansat-detail-genre-top.ar-font {
  font-size: clamp(13px, 1.4vw, 16px) !important;
  font-weight: 700 !important;
}

.sansat-detail-genre-top:not(.ar-font),
.sansat-detail-duration-under,
.sansat-detail-rating-pill,
.sansat-ep-code {
  direction: ltr !important;
  font-family: 'Barlow Condensed', sans-serif !important;
}

.sansat-detail-rating-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(28, 30, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  color: #ffffff;
}

.sansat-detail-rating-pill .star-icon {
  font-size: 14px;
  line-height: 1;
}

.sansat-detail-rating-pill .star-val {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}

.sansat-detail-icon-btn {
  background: rgba(28, 30, 36, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  color: #ffffff !important;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sansat-detail-icon-btn svg {
  width: 20px;
  height: 20px;
}

.sansat-detail-icon-btn:hover,
.sansat-detail-icon-btn.nav-focused {
  background: rgba(45, 48, 56, 0.9) !important;
  transform: scale(1.08);
}

.sansat-detail-main-layout {
  display: flex;
  gap: clamp(20px, 3.5vw, 42px);
  align-items: flex-start;
  max-width: 1200px;
  padding: 0 var(--app-pad-r) 16px var(--app-pad-x);
  box-sizing: border-box;
}

.sansat-detail-poster-col {
  width: clamp(130px, 14vw, 175px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sansat-detail-genre-top {
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.3px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sansat-detail-poster-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85);
  background: #15171b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sansat-detail-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sansat-detail-duration-under {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 10px;
  letter-spacing: 0.5px;
}

.sansat-detail-info-col {
  flex: 1;
  min-width: 0;
}

.sansat-detail-title {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 clamp(16px, 2.5vh, 22px) 0;
  letter-spacing: 0.2px;
}

.sansat-detail-btn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2.5vh, 22px);
  flex-wrap: wrap;
}

.sansat-btn-action-primary,
.sansat-btn-action-secondary {
  background: rgba(28, 30, 36, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: clamp(200px, 18vw, 240px);
  height: 44px;
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  gap: 12px;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sansat-btn-action-primary svg,
.sansat-btn-action-secondary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sansat-btn-action-primary:hover,
.sansat-btn-action-primary.nav-focused,
.sansat-btn-action-secondary:hover,
.sansat-btn-action-secondary.nav-focused {
  background: rgba(45, 48, 58, 0.98);
  border-color: #e50914;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(229, 9, 20, 0.4);
}

.sansat-detail-plot-wrap {
  margin-bottom: 14px;
  max-width: 920px;
}

.sansat-detail-plot {
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  letter-spacing: 0.2px;
}

.sansat-detail-cast-wrap {
  max-width: 920px;
}

.sansat-detail-cast {
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* =========================================================
   SERIES DETAIL SCREEN (Dedicated TV & Mobile Separation)
========================================================= */
.sansat-series-detail-screen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
  z-index: 50 !important;
  background: #080204 !important;
  animation: sansatDetailEnter 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* 1. SMART TV & DESKTOP (html[data-device="tv"], body.device-tv, desktop landscape):
   Strict Non-scrolling 100vh 2-Column Grid Layout:
   Left: Poster (2:3 aspect-ratio) + Title + Actions + Plot + Cast
   Right: Season pills selector + Smooth scrolling episode cards list */
html[data-device="tv"] .sansat-series-detail-screen,
body.device-tv .sansat-series-detail-screen,
body.device-desktop .sansat-series-detail-screen {
  overflow: hidden !important;
}

html[data-device="tv"] .sansat-series-main-layout,
body.device-tv .sansat-series-main-layout,
body.device-desktop .sansat-series-main-layout,
.sansat-series-main-layout {
  position: relative !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: clamp(24px, 3.5vw, 44px) !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100vh - var(--app-header-h) - var(--app-pad-top) - 16px) !important;
  padding: 0 var(--app-pad-r) 16px var(--app-pad-x) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-device="tv"] .sansat-series-left-col,
body.device-tv .sansat-series-left-col,
body.device-desktop .sansat-series-left-col,
.sansat-series-left-col {
  display: flex !important;
  flex-direction: row !important;
  gap: clamp(16px, 2.5vw, 24px) !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
}

html[data-device="tv"] .sansat-series-poster-block,
body.device-tv .sansat-series-poster-block,
body.device-desktop .sansat-series-poster-block,
.sansat-series-poster-block {
  width: clamp(130px, 14vw, 175px) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

html[data-device="tv"] .sansat-series-info-block,
body.device-tv .sansat-series-info-block,
body.device-desktop .sansat-series-info-block,
.sansat-series-info-block {
  flex: 1 !important;
  min-width: 0 !important;
}

html[data-device="tv"] .sansat-series-right-col,
body.device-tv .sansat-series-right-col,
body.device-desktop .sansat-series-right-col,
.sansat-series-right-col {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html[data-device="tv"] .sansat-episodes-scroll-list,
body.device-tv .sansat-episodes-scroll-list,
body.device-desktop .sansat-episodes-scroll-list,
.sansat-episodes-scroll-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 2. MOBILE & TABLETS (html:not([data-device="tv"]), body.device-mobile):
   A) Mobile Portrait: Full vertical touch scroll, poster on top, episode list stacked below
   B) Mobile Landscape: Compact 2-column landscape with scrollable episodes */
@media (orientation: portrait), (max-width: 768px) {
  html:not([data-device="tv"]) .sansat-series-detail-screen,
  html[data-device="mobile"] .sansat-series-detail-screen,
  body.device-mobile .sansat-series-detail-screen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  html:not([data-device="tv"]) .sansat-series-main-layout,
  html[data-device="mobile"] .sansat-series-main-layout,
  body.device-mobile .sansat-series-main-layout {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 0 16px 32px 16px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  html:not([data-device="tv"]) .sansat-series-left-col,
  html[data-device="mobile"] .sansat-series-left-col,
  body.device-mobile .sansat-series-left-col {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    align-items: flex-start !important;
    overflow: visible !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  html:not([data-device="tv"]) .sansat-series-poster-block,
  html[data-device="mobile"] .sansat-series-poster-block,
  body.device-mobile .sansat-series-poster-block {
    width: 110px !important;
    min-width: 110px !important;
    flex-shrink: 0 !important;
  }

  html:not([data-device="tv"]) .sansat-series-right-col,
  html[data-device="mobile"] .sansat-series-right-col,
  body.device-mobile .sansat-series-right-col {
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    margin-top: 10px !important;
  }

  html:not([data-device="tv"]) .sansat-episodes-scroll-list,
  html[data-device="mobile"] .sansat-episodes-scroll-list,
  body.device-mobile .sansat-episodes-scroll-list {
    overflow: visible !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }
}

/* Mobile Landscape (< 900px width or < 550px height) */
@media (orientation: landscape) and (max-width: 900px), (max-height: 550px) and (orientation: landscape) {
  html:not([data-device="tv"]) .sansat-series-detail-screen,
  html[data-device="mobile"] .sansat-series-detail-screen,
  body.device-mobile .sansat-series-detail-screen {
    overflow: hidden !important;
  }

  html:not([data-device="tv"]) .sansat-series-main-layout,
  html[data-device="mobile"] .sansat-series-main-layout,
  body.device-mobile .sansat-series-main-layout {
    position: relative !important;
    z-index: 10 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 16px !important;
    height: calc(100vh - var(--app-header-h) - 8px) !important;
    padding: 0 16px 12px 16px !important;
    overflow: hidden !important;
  }

  html:not([data-device="tv"]) .sansat-series-left-col,
  html[data-device="mobile"] .sansat-series-left-col,
  body.device-mobile .sansat-series-left-col {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-y: auto !important;
  }

  html:not([data-device="tv"]) .sansat-series-poster-block,
  html[data-device="mobile"] .sansat-series-poster-block,
  body.device-mobile .sansat-series-poster-block {
    width: clamp(90px, 14vw, 120px) !important;
    flex-shrink: 0 !important;
  }

  html:not([data-device="tv"]) .sansat-series-right-col,
  html[data-device="mobile"] .sansat-series-right-col,
  body.device-mobile .sansat-series-right-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html:not([data-device="tv"]) .sansat-episodes-scroll-list,
  html[data-device="mobile"] .sansat-episodes-scroll-list,
  body.device-mobile .sansat-episodes-scroll-list {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

.sansat-season-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.sansat-season-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.sansat-season-selector-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.sansat-season-pill {
  background: rgba(28, 30, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  outline: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sansat-season-pill.active {
  background: #991414;
  border-color: #d32f2f;
}

.sansat-episodes-scroll-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sansat-episode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(24, 26, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none !important;
}

.sansat-episode-card:hover,
.sansat-episode-card:focus,
.sansat-episode-card.nav-focused,
.sansat-episode-card:active {
  background: rgba(36, 38, 48, 0.95);
  border-color: #e50914 !important;
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(229, 9, 20, 0.45);
}

.sansat-ep-thumb-wrap {
  width: 105px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #000;
  flex-shrink: 0;
}

.sansat-ep-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sansat-ep-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.sansat-ep-play-overlay svg {
  width: 20px;
  height: 20px;
  fill: #d32f2f;
  color: #d32f2f;
}

.sansat-ep-info-wrap {
  flex: 1;
  min-width: 0;
}

.sansat-ep-code {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.sansat-ep-subline {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 3px;
}

.sansat-ep-dl-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  outline: none !important;
}

.sansat-ep-dl-btn svg {
  width: 18px;
  height: 18px;
}

/* Season Selector, Search & Sort Modal Dialogs — SANSAT OTT (High Performance, Dark Red Theme) */
.sansat-season-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sansat-season-modal-box {
  background: linear-gradient(160deg, #220306 0%, #150204 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  border-radius: 14px;
  padding: 18px 22px;
  width: 90vw;
  max-width: 420px;
  text-align: center;
  box-shadow: none !important;
}

.sansat-season-modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sansat-season-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 2px;
}

/* Modals Buttons: Clean STB style, Zero-lag, ZERO box-shadow */
.sansat-season-modal-btn {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  outline: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  color: #800008 !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

/* Active option (e.g. current selected sort/season) - NO RED OUTLINE, ZERO SHADOW */
.sansat-season-modal-btn.active {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  color: #800008 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Focused button with D-Pad remote or keyboard - Crisp flat red border, ZERO SHADOW */
.sansat-season-modal-btn.nav-focused,
.sansat-season-modal-btn:focus-visible,
.sansat-season-modal-btn:focus {
  background: #ffffff !important;
  border: 2.5px solid #ff3344 !important;
  outline: none !important;
  color: #800008 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#series-btn-seasons-nav,
#series-btn-seasons-nav:hover,
#series-btn-seasons-nav:focus,
#series-btn-seasons-nav.nav-focused {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.sansat-ep-dl-btn:hover,
.sansat-ep-dl-btn.nav-focused {
  color: #d32f2f;
  transform: scale(1.15);
}



/* ==========================================================================
   TRAILER MODAL COMPONENT (Native App Dark Theme & Exact Screen Margins)
   ========================================================================== */
.trailer-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: radial-gradient(ellipse 90% 70% at 50% 15%, #42070f 0%, #1c0307 42%, #080103 75%, #000000 100%) !important;
  display: flex;
  flex-direction: column;
  padding: max(clamp(16px, 2.5vh, 24px), env(safe-area-inset-top)) max(clamp(24px, 4vw, 52px), env(safe-area-inset-right)) max(clamp(16px, 2.5vh, 24px), env(safe-area-inset-bottom)) max(clamp(24px, 4vw, 52px), env(safe-area-inset-left));
  box-sizing: border-box;
  animation: trailerFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.trailer-modal-backdrop.trailer-fade-out {
  animation: trailerFadeOut 0.2s ease-in forwards;
}

.trailer-modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.trailer-modal-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(14px, 2.2vh, 24px);
  gap: 20px;
  flex-shrink: 0;
}

.trailer-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.trailer-header-title {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.trailer-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.trailer-btn-yt-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  outline: none;
  cursor: pointer;
  height: 40px;
  box-sizing: border-box;
}

.trailer-btn-yt-dark svg {
  color: #ff3333;
}

.trailer-btn-yt-dark:hover,
.trailer-btn-yt-dark:focus,
.trailer-btn-yt-dark.nav-focused {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: scale(1.04);
}

.trailer-video-box {
  position: relative;
  width: 100%;
  flex: 1;
  background: #000000;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trailer-poster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.08);
  transition: transform 0.4s ease;
}

.trailer-poster-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(16, 2, 4, 0.25) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.trailer-play-center-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 600px;
  padding: 24px;
}

.trailer-big-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 36px;
  background: linear-gradient(135deg, #e50914 0%, #b8000b 100%);
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  box-shadow: 0 10px 35px rgba(229, 9, 20, 0.5);
  transition: all 0.22s ease;
  text-decoration: none;
}

.trailer-big-play-btn:hover,
.trailer-big-play-btn:focus,
.trailer-big-play-btn.nav-focused {
  background: linear-gradient(135deg, #ff1a26 0%, #d1000d 100%);
  transform: scale(1.06);
  box-shadow: 0 14px 45px rgba(229, 9, 20, 0.7);
  border-color: #ffffff;
}

.trailer-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.trailer-secondary-btn:hover,
.trailer-secondary-btn:focus,
.trailer-secondary-btn.nav-focused {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.trailer-play-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3px;
  margin: 0;
}

.trailer-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 5;
}

.trailer-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  z-index: 10;
}

.trailer-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: trailerSpin 0.8s linear infinite;
}

.trailer-error-box {
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.trailer-error-msg {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin: 0;
}

@keyframes trailerFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes trailerFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes trailerSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .trailer-modal-backdrop {
    padding: 16px;
  }
  .trailer-modal-header {
    margin-bottom: 12px;
  }
  .trailer-header-title {
    font-size: 18px;
    max-width: 50vw;
  }
  .trailer-btn-yt-dark span {
    display: none;
  }
  .trailer-btn-yt-dark {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   DESCARGAS SCREEN (EXACT MATCH media_1792617159503_5b8ef900.png)
   ========================================================================== */
.dl-screen-layout {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  background: var(--app-bg-gradient) fixed !important;
  color: #ffffff;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dl-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--app-header-h);
  margin-bottom: 14px;
  width: 100%;
  flex-shrink: 0;
}

.dl-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dl-back-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

.dl-back-btn svg {
  width: 26px;
  height: 26px;
}

.dl-back-btn:hover,
.dl-back-btn:focus,
.dl-back-btn.nav-focused {
  transform: scale(1.15);
  color: #e50914 !important;
}

.dl-header-right {
  display: flex;
  align-items: center;
}

.dl-pause-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.dl-pause-circle-btn svg {
  width: 24px;
  height: 24px;
}

.dl-pause-circle-btn:hover,
.dl-pause-circle-btn:focus,
.dl-pause-circle-btn.nav-focused {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.dl-pause-circle-btn.paused {
  background: transparent !important;
  color: #e50914 !important;
}

.dl-tabs-nav {
  display: flex;
  gap: 22px;
  width: 100%;
  margin-bottom: clamp(16px, 2.5vh, 26px);
  flex-shrink: 0;
}

.dl-tab-btn {
  flex: 1;
  height: clamp(44px, 5.5vh, 52px);
  border-radius: 8px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  letter-spacing: 0.3px;
  background: #252528;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.dl-tab-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-tab-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.dl-tab-btn:hover,
.dl-tab-btn:focus,
.dl-tab-btn.nav-focused {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.15);
}

.dl-tab-btn.active {
  background: #A8140D !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dl-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
}

.dl-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.dl-empty-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.5px;
}

/* Downloads item lists and cards */
.dl-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  width: 100%;
  padding-bottom: 24px;
}

.dl-item-card {
  background: rgba(26, 26, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
  outline: none;
}

.dl-item-card:hover,
.dl-item-card:focus,
.dl-item-card.nav-focused {
  border-color: #e50914;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35);
}

.dl-item-thumb-box {
  position: relative;
  width: 100%;
  height: 140px;
  background: #0d0d12;
  overflow: hidden;
}

.dl-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-item-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(32, 201, 151, 0.9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.dl-item-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.dl-item-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-item-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.dl-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px 14px;
}

.dl-action-play-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #8a111a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.dl-action-play-btn svg {
  width: 16px;
  height: 16px;
}

.dl-action-play-btn:hover,
.dl-action-play-btn:focus {
  background: #b31b25;
}

.dl-action-del-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.dl-action-del-btn svg {
  width: 16px;
  height: 16px;
}

.dl-action-del-btn:hover,
.dl-action-del-btn:focus {
  background: rgba(229, 9, 56, 0.3);
  color: #ff3333;
}

/* In-progress downloads list */
.dl-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 24px;
}

.dl-progress-card {
  background: rgba(24, 24, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
  outline: none;
}

.dl-progress-card:hover,
.dl-progress-card:focus,
.dl-progress-card.nav-focused {
  border-color: #8a111a;
  background: rgba(34, 34, 42, 0.9);
}

.dl-progress-thumb-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #000000;
  overflow: hidden;
  flex-shrink: 0;
}

.dl-progress-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dl-progress-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dl-status-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.dl-status-pill.active {
  background: rgba(229, 9, 56, 0.25);
  color: #ff3344;
}

.dl-status-pill.paused {
  background: rgba(255, 187, 0, 0.2);
  color: #ffbb00;
}

.dl-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.dl-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b20710, #e50914);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.dl-progress-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.dl-action-pause-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.dl-action-pause-btn svg {
  width: 16px;
  height: 16px;
}

.dl-action-pause-btn:hover,
.dl-action-pause-btn:focus {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   AJUSTES / SETTINGS SCREEN (EXACT MATCH media_1792617159631_4aab6103.png)
   ========================================================================== */
.settings-split-layout {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  background: var(--app-bg-gradient);
  color: #ffffff;
  padding: max(clamp(16px, 2.5vh, 24px), env(safe-area-inset-top)) max(clamp(24px, 4vw, 52px), env(safe-area-inset-right)) max(clamp(16px, 2.5vh, 24px), env(safe-area-inset-bottom)) max(clamp(24px, 4vw, 52px), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.settings-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(14px, 2.2vh, 24px);
  width: 100%;
  flex-shrink: 0;
}

.settings-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-back-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

.settings-back-btn svg {
  width: 26px;
  height: 26px;
}

.settings-back-btn:hover,
.settings-back-btn:focus,
.settings-back-btn.nav-focused {
  transform: scale(1.15);
  color: #e50914 !important;
}

.settings-header-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.4px;
}

.settings-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-version-label {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.settings-brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-badge-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* Two-column split body */
.settings-split-body {
  flex: 1;
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  overflow: hidden;
  width: 100%;
}

/* Left column (35%) */
.settings-left-nav {
  width: clamp(240px, 34%, 380px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.settings-nav-item {
  padding: clamp(12px, 1.8vh, 16px) 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none !important;
  display: flex;
  align-items: center;
}

.settings-nav-label {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(16px, 1.8vw, 19.5px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  transition: all 0.18s ease;
}

.settings-nav-item:not(.active):hover,
.settings-nav-item:not(.active).nav-focused {
  background: rgba(255, 255, 255, 0.07);
  padding-left: 18px;
}

.settings-nav-item:not(.active):hover .settings-nav-label,
.settings-nav-item:not(.active).nav-focused .settings-nav-label {
  color: #ffffff;
}

.settings-nav-item.active {
  background: rgba(168, 20, 13, 0.45) !important;
  padding-left: 18px;
  border-left: 4px solid #e50914 !important;
}

.settings-nav-item.active .settings-nav-label {
  color: #ffffff !important;
  font-weight: 800;
}

/* Right column (65%) */
.settings-right-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}

.settings-lang-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.settings-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 1.8vh, 16px) 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
}

.settings-lang-name {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(16.5px, 1.8vw, 20px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.settings-lang-row:hover,
.settings-lang-row:focus,
.settings-lang-row.nav-focused {
  background: rgba(255, 255, 255, 0.06);
  padding-left: 20px;
}

.settings-lang-row.selected {
  background: rgba(229, 9, 20, 0.2) !important;
  border-left: 3px solid #e50914 !important;
}

.settings-check-circle {
  width: 22px;
  height: 22px;
  color: #e50914 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-check-circle svg {
  width: 100%;
  height: 100%;
}

.settings-check-circle-empty {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

/* Other Settings Panels */
.settings-panel-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.settings-panel-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
  margin-bottom: 6px;
}

.settings-config-card {
  background: rgba(24, 24, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-config-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-config-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #ffffff;
}

.settings-config-sub {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.settings-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 6px 12px 2px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.16s ease;
  outline: none;
}

.settings-toggle-row:hover,
.settings-toggle-row:focus,
.settings-toggle-row.nav-focused {
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.22) 0%, rgba(28, 28, 34, 0.95) 100%) !important;
  border-color: #e50914 !important;
  transform: none !important;
}

.settings-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-toggle-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  letter-spacing: 0.3px;
}

.settings-toggle-sub {
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-toggle-sub.visible {
  color: rgba(255, 255, 255, 0.55);
}

.settings-toggle-sub.hidden {
  color: #e50914;
}

.settings-switch-btn {
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none; /* Clicking anywhere on row toggles it */
}

.settings-switch-btn.on {
  background: rgba(46, 125, 50, 0.25);
  border-color: rgba(76, 175, 80, 0.45);
  color: #81c784;
}

.settings-switch-btn.off {
  background: rgba(229, 9, 20, 0.2);
  border-color: rgba(229, 9, 20, 0.45);
  color: #ff6b6b;
}

.settings-toggle-row.nav-focused .settings-switch-btn.on {
  background: rgba(76, 175, 80, 0.35);
  border-color: #81c784;
  color: #ffffff;
}

.settings-toggle-row.nav-focused .settings-switch-btn.off {
  background: rgba(229, 9, 20, 0.4);
  border-color: #e50914;
  color: #ffffff;
}

.settings-pin-inputs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.settings-pin-input {
  width: 140px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  outline: none;
}

.settings-pin-input:focus {
  border-color: #e50914;
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.5);
}

.settings-action-pill {
  padding: 9px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e50914, #b20710);
  color: #ffffff;
  border: none;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(229, 9, 20, 0.35);
}

.settings-action-pill:hover,
.settings-action-pill:focus {
  background: linear-gradient(135deg, #f40612, #c40813);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.5);
}

/* Subtitle Preview Frame */
.settings-sub-preview-box {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-sub-preview-lbl {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.settings-sub-preview-frame {
  width: 100%;
  height: 90px;
  background: #08080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}

.settings-sub-preview-text {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 2px 4px #000000, 0 0 8px rgba(0,0,0,0.8);
  text-align: center;
  transition: font-size 0.2s ease;
}

/* Formats and Buffers list */
.settings-format-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
}

.settings-format-row:hover,
.settings-format-row:focus,
.settings-format-row.nav-focused {
  background: rgba(255, 255, 255, 0.06);
  padding-left: 20px;
}

.settings-format-row.selected {
  background: rgba(229, 9, 20, 0.2) !important;
  border-left: 3px solid #e50914 !important;
}

.settings-format-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-format-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

.settings-format-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* Danger actions (Clear history / cache) */
.settings-action-box {
  background: rgba(24, 24, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 580px;
  margin: 20px auto 0 auto;
}

.settings-action-icon {
  width: 50px;
  height: 50px;
  color: #e50914 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-action-icon svg {
  width: 100%;
  height: 100%;
}

.settings-action-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.settings-action-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
}

.settings-danger-btn {
  margin-top: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #e50914 0%, #b20710 100%) !important;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.45) !important;
}

.settings-danger-btn:hover,
.settings-danger-btn:focus,
.settings-danger-btn.nav-focused {
  transform: scale(1.05);
  background: linear-gradient(135deg, #f40612 0%, #c40813 100%) !important;
  box-shadow: 0 6px 24px rgba(229, 9, 20, 0.65) !important;
}

/* =========================================================
   HOME DEVICE INFO POPUP (Screenshot media_1792618763339_3fe837e0.png)
   ========================================================= */
.home-device-popup {
  background: rgba(20, 22, 32, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
  width: 260px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999;
  animation: popupFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-device-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 36px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(20, 22, 32, 0.95);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.home-popup-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.home-popup-btn {
  width: 100%;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  outline: none;
}

.home-popup-btn:hover,
.home-popup-btn:focus,
.home-popup-btn.nav-focused {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.home-popup-btn:active {
  background: #e50914;
  border-color: #e50914;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   LIVE CHANNELS SCREEN (EXACT MATCH media_1792620671116_a694f80d.png)
   ========================================================= */
.live-screen-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x);
  background: var(--app-bg-gradient) !important;
  color: #ffffff;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* TOP HEADER */
.live-top-header {
  height: var(--app-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: transparent !important;
  border-bottom: none !important;
  flex-shrink: 0;
  z-index: 20;
}

.live-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* CLEAN CHEVRON — NO ROUNDED BUTTON, NO BORDER, NO RED RING */
.live-back-chevron {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex-shrink: 0 !important;
  transform: none !important;
  transition: opacity 0.15s ease !important;
}

.live-back-chevron svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0 !important;
  stroke: #ffffff;
  display: block;
}

.live-back-chevron:hover,
.live-back-chevron:focus,
.live-back-chevron.nav-focused {
  opacity: 0.8 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

.live-screen-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  margin: 0;
  white-space: nowrap;
}

.live-header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* MULTI-SCREEN ICON BUTTON — CLEAN OUTLINE, NO ENCLOSING BOX */
.live-icon-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform 0.15s ease;
}

.live-icon-btn svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

.live-icon-btn:hover,
.live-icon-btn:focus,
.live-icon-btn.nav-focused {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* SEARCH PILL */
.live-search-pill,
.live-search-pill:focus-within,
.live-search-pill:focus,
.live-search-pill.nav-focused {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 14px !important;
  width: 280px !important;
  box-sizing: border-box !important;
}

/* Live Search: On TV mode hide top pill (TV uses remote-friendly bottom action pill). On Mobile mode keep top pill and hide bottom pill under player */
html[data-device="tv"] .live-search-pill,
html[data-device="tv"] #live-search-pill,
body.device-tv .live-search-pill,
body.device-tv #live-search-pill {
  display: none !important;
}

html:not([data-device="tv"]) #live-btn-search,
html[data-device="mobile"] #live-btn-search,
html[data-device="desktop"] #live-btn-search,
body.device-mobile #live-btn-search,
body:not(.device-tv) #live-btn-search {
  display: none !important;
}

.live-search-icon {
  width: 18px !important;
  height: 18px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  stroke: rgba(255, 255, 255, 0.6) !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.live-search-input,
.live-search-input:focus,
.live-search-input:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  width: 100% !important;
}

.live-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
}

/* 3-COLUMN MAIN BODY — SEAMLESS, NO HARD BORDERS */
.live-split-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  height: calc(100vh - var(--app-header-h) - var(--app-pad-top) - 8px);
  margin-top: 8px;
  gap: 16px;
}

/* COLUMN 1: CATEGORIES (~23%) */
.live-col-categories {
  width: var(--app-sidebar-w);
  background: transparent !important;
  border: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 6px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.live-col-categories::-webkit-scrollbar,
.live-col-channels::-webkit-scrollbar {
  width: 4px;
}

.live-col-categories::-webkit-scrollbar-thumb,
.live-col-channels::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}

.live-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  background: transparent !important;
  border: 2px solid transparent !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
  box-sizing: border-box;
}

.live-cat-row:hover,
.live-cat-row.nav-focused,
.live-cat-row:focus {
  border-color: #e50914 !important;
  background: rgba(50, 52, 62, 0.95) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.live-cat-row.active {
  background: #e50914 !important;
  border-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: none !important;
}

.live-cat-row.active:hover,
.live-cat-row.active.nav-focused,
.live-cat-row.active:focus {
  background: #e50914 !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.live-cat-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.live-cat-row.active .live-cat-name {
  color: #ffffff;
  font-weight: 800;
}

.live-cat-count {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 8px;
  flex-shrink: 0;
}

.live-cat-row.active .live-cat-count {
  color: #ffffff;
  font-weight: 700;
}

/* COLUMN 2: CHANNELS (~38%) */
.live-col-channels {
  width: clamp(270px, 38%, 450px);
  background: transparent !important;
  border: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.live-channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.12s ease;
  outline: none;
  box-sizing: border-box;
}

.live-channel-row:hover,
.live-channel-row.nav-focused,
.live-channel-row:focus {
  border: none !important;
  background: rgba(50, 52, 62, 0.95) !important;
  box-shadow: none !important;
  outline: none !important;
}

.live-channel-row.selected {
  background: #e50914 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.live-channel-row.selected:hover,
.live-channel-row.selected.nav-focused,
.live-channel-row.selected:focus {
  background: #e50914 !important;
  border: none !important;
  box-shadow: none !important;
}

.live-channel-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.live-channel-row.selected .live-channel-num {
  color: #ffffff;
  font-weight: 800;
}

.live-channel-logo-box {
  width: 36px;
  height: 26px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}

.live-channel-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.live-channel-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  flex: 1;
}

.live-channel-row.selected .live-channel-name {
  font-weight: 800;
}

.live-empty-channels,
.live-loading-msg {
  padding: 30px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* COLUMN 3: PREVIEW & EPG (~38%) */
.live-col-preview {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.live-preview-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse at center, #230c12 0%, #0d0407 65%, #050102 100%) !important;
  background-color: #0d0407 !important;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  outline: none;
}

.live-preview-poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, #2a0b12 0%, #0f0508 60%, #040102 100%) !important;
  z-index: 2;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.live-preview-poster-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(229, 9, 20, 0.5));
}

.live-preview-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(229, 9, 20, 0.4);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.8px;
}

.live-preview-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e50914;
  box-shadow: 0 0 8px #e50914;
  animation: liveDotPulse 1.5s infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.live-preview-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  display: block;
  position: relative;
  z-index: 1;
}

.live-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.live-preview-box:hover .live-preview-overlay,
.live-preview-box:focus .live-preview-overlay,
.live-preview-box.nav-focused .live-preview-overlay {
  opacity: 1;
}

.live-preview-fs-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(229, 9, 56, 0.9);
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.live-preview-fs-badge svg {
  width: 16px;
  height: 16px;
}

/* PREVIEW CHANNEL INFO */
.live-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.live-preview-logo-wrap {
  width: 44px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.live-preview-ch-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.live-preview-ch-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ACTIONS: FAVORITE & EPG BUTTONS */
.live-preview-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}

.live-action-pill {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
}

.live-action-pill svg {
  width: 20px;
  height: 20px;
}

.live-action-pill:hover,
.live-action-pill:focus,
.live-action-pill.nav-focused {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.live-action-pill.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
}

/* EPG & TIMELINE — SANSAT OTT */
.live-epg-box {
  margin-top: 10px;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.live-program-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.2px;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-timeline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-time-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  min-width: 28px;
}

.live-timeline-track {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.live-timeline-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 1px;
  transition: width 0.3s ease;
}

/* =========================================================
   LIVE EPG ENHANCEMENTS — UPCOMING ROWS & TV 3-COL MODE
   ========================================================= */
.live-epg-upcoming-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Strictly hide rows 2 & 3 on Mobile & Tablet to keep ONLY ONE single EPG under mini-player */
body:not(.device-tv) .live-epg-upcoming-row,
html:not([data-device="tv"]) .live-epg-upcoming-row {
  display: none !important;
}

/* On TV: Mini Player and informational upcoming EPG rows under it are strictly non-clickable & non-focusable */
html[data-device="tv"] #live-preview-player-box,
html[data-device="tv"] .live-preview-box,
html[data-device="tv"] .live-epg-box,
html[data-device="tv"] #live-epg-upcoming-list,
html[data-device="tv"] .live-epg-upcoming-row {
  pointer-events: none !important;
  user-select: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.live-epg-upcoming-time {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  min-width: 34px;
}

.live-epg-upcoming-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* TV 3-Column EPG Mode — Instant & Fast 0.08s transitions */
.live-col-categories {
  transition: width 0.08s ease-out, opacity 0.08s ease-out, padding 0.08s ease-out;
}

.live-col-channels {
  transition: flex 0.08s ease-out, max-width 0.08s ease-out;
}

.live-col-preview {
  transition: flex 0.08s ease-out;
}

.live-screen-container.live-tv-epg-mode .live-col-categories {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.live-screen-container.live-tv-epg-mode .live-col-channels {
  width: 32% !important;
  min-width: 0 !important;
  max-width: 32% !important;
  flex: 0 0 32% !important;
}

.live-screen-container.live-tv-epg-mode .live-col-preview {
  width: 36% !important;
  min-width: 0 !important;
  max-width: 36% !important;
  flex: 0 0 36% !important;
}

.live-col-epg-full {
  display: none;
  flex-direction: column;
  flex: 0 0 32%;
  width: 32%;
  max-width: 32%;
  height: 100%;
  padding: 4px 0 10px 14px;
  background: transparent;
  box-sizing: border-box;
  overflow-y: auto;
  opacity: 0;
  transform: translate3d(15px, 0, 0);
  transition: transform 0.08s ease-out, opacity 0.08s ease-out;
}

.live-screen-container.live-tv-epg-mode .live-col-epg-full {
  display: flex !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  flex: 0 0 32% !important;
  width: 32% !important;
  min-width: 0 !important;
  max-width: 32% !important;
}

.live-tv-epg-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.live-tv-epg-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
  margin: 0;
}

/* TV EPG LIST: EXACT SAME ROW DESIGN, HEIGHT, PADDING & ONFOCUS AS CHANNELS LIST */
.live-tv-epg-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  padding: 4px 6px 16px 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.live-tv-epg-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 32px !important;
  max-height: 34px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  border-left: 3.5px solid transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin-bottom: 2px !important;
  transition: none !important;
}

.live-tv-epg-row:hover,
.live-tv-epg-row.nav-focused,
.live-tv-epg-row:focus {
  background: #e50914 !important;
  color: #ffffff !important;
  border-left: 3.5px solid #ffffff !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.live-tv-epg-row.is-current {
  background: rgba(229, 9, 20, 0.22) !important;
  border-left: 3.5px solid #e50914 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.live-tv-epg-row.is-current:hover,
.live-tv-epg-row.is-current.nav-focused,
.live-tv-epg-row.is-current:focus {
  background: #e50914 !important;
  border-left: 3.5px solid #ffffff !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

html[dir="rtl"] .live-tv-epg-row,
.live-tv-epg-row.ar-font {
  border-left: none !important;
  border-right: 3.5px solid transparent !important;
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .live-tv-epg-row:hover,
html[dir="rtl"] .live-tv-epg-row.nav-focused,
html[dir="rtl"] .live-tv-epg-row:focus,
.live-tv-epg-row.ar-font:hover,
.live-tv-epg-row.ar-font.nav-focused,
.live-tv-epg-row.ar-font:focus {
  border-left: none !important;
  border-right: 3.5px solid #ffffff !important;
}

html[dir="rtl"] .live-tv-epg-row.is-current,
.live-tv-epg-row.ar-font.is-current {
  border-left: none !important;
  border-right: 3.5px solid #e50914 !important;
}

html[dir="rtl"] .live-tv-epg-row.is-current.nav-focused,
.live-tv-epg-row.ar-font.is-current.nav-focused {
  border-left: none !important;
  border-right: 3.5px solid #ffffff !important;
}

.live-tv-epg-row-time {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  min-width: 42px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

.live-tv-epg-row.nav-focused .live-tv-epg-row-time,
.live-tv-epg-row.is-current .live-tv-epg-row-time {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.live-tv-epg-row-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.25px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.live-tv-epg-row.nav-focused .live-tv-epg-row-title,
.live-tv-epg-row.is-current .live-tv-epg-row-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.live-tv-epg-row-badge {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  letter-spacing: 0.3px !important;
}

.live-tv-epg-row.nav-focused .live-tv-epg-row-badge {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* =========================================================
   EPG PROGRAM DETAILS MODAL (TV & Mobile - Zero Shadow)
   ========================================================= */
.sansat-epg-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.sansat-epg-detail-box {
  background: linear-gradient(160deg, #220306 0%, #150204 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  border-radius: 14px;
  padding: 22px 26px;
  width: 90vw;
  max-width: 500px;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sansat-epg-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sansat-epg-detail-ch-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ff4d5a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.3);
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.sansat-epg-detail-close-x {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.sansat-epg-detail-close-x.nav-focused,
.sansat-epg-detail-close-x:hover {
  background: #e50914 !important;
  border-color: #ffffff !important;
}

.sansat-epg-detail-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0.3px;
  word-break: break-word;
}

.sansat-epg-detail-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
}

.sansat-epg-detail-meta-time {
  font-weight: 600;
  color: #ffffff;
}

.sansat-epg-detail-meta-date {
  color: rgba(255, 255, 255, 0.6);
}

.sansat-epg-detail-meta-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  background: #e50914;
  padding: 2px 7px;
  border-radius: 4px;
}

.sansat-epg-detail-desc-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  max-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sansat-epg-detail-desc-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.sansat-epg-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

/* EPG Modal Arabic & RTL mode */
.sansat-epg-detail-box.ar-mode {
  direction: rtl !important;
  text-align: right !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-header {
  flex-direction: row-reverse !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-title {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  text-align: right !important;
  font-size: 21px !important;
  line-height: 1.4 !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-ch-badge {
  font-family: 'Tajawal', sans-serif !important;
  letter-spacing: normal !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-meta-row {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-meta-badge {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: normal !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-desc-text {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  text-align: right !important;
  line-height: 1.75 !important;
  font-size: 14px !important;
}

.sansat-epg-detail-box.ar-mode .sansat-epg-detail-actions {
  justify-content: flex-start !important;
}

.sansat-epg-detail-box.ar-mode .cat-reorder-foot-btn {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* TV & Preview EPG Arabic typography & RTL text direction */
.live-tv-epg-row.ar-font {
  direction: rtl !important;
  text-align: right !important;
}

.live-tv-epg-row.ar-font .live-tv-epg-row-time {
  direction: ltr !important;
  text-align: center !important;
}

.live-tv-epg-row.ar-font .live-tv-epg-row-title {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: normal !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate !important;
}

.live-tv-epg-row.ar-font .live-tv-epg-row-badge {
  font-family: 'Tajawal', sans-serif !important;
  letter-spacing: normal !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.live-epg-card.ar-font .live-epg-card-title,
.live-epg-card.ar-font .live-epg-card-desc {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  text-align: right !important;
  direction: rtl !important;
}

.live-epg-card.ar-font .live-epg-card-head {
  flex-direction: row-reverse !important;
}

.live-epg-card.ar-font .live-epg-card-footer {
  flex-direction: row-reverse !important;
}

.live-epg-upcoming-row.ar-font {
  direction: rtl !important;
  text-align: right !important;
}

.live-epg-upcoming-row.ar-font .live-epg-upcoming-time {
  direction: ltr !important;
  text-align: center !important;
}

.live-epg-upcoming-row.ar-font .live-epg-upcoming-title {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate !important;
}

#live-program-title.ar-font {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate !important;
}

/* =========================================================
   MOBILE & OVERLAY: FULLSCREEN EPG COMPLETO (Screenshot 1: media_1793227704519_1138bb1b.png)
   ========================================================= */
.live-epg-complete-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #09090b;
  background: radial-gradient(circle at 50% 0%, #1c070a 0%, #09090b 75%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 16px 18px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 100%, 0) scale(0.96);
  transform-origin: bottom center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, visibility 0.28s;
  will-change: transform, opacity;
  pointer-events: none;
  overflow: hidden;
}

.live-epg-complete-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.live-epg-complete-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.live-epg-back-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.live-epg-back-btn:active,
.live-epg-back-btn.nav-focused {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.12);
}

.live-epg-back-btn svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  stroke-width: 2.6;
}

.live-epg-complete-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin: 0;
}

.live-epg-complete-channel-name {
  display: none !important;
}

.live-epg-complete-grid {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 24px !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.live-epg-complete-grid::-webkit-scrollbar,
.live-tv-epg-list::-webkit-scrollbar {
  width: 5px;
}
.live-epg-complete-grid::-webkit-scrollbar-thumb,
.live-tv-epg-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.live-epg-card {
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 12px 6px 12px !important;
  display: flex;
  flex-direction: column;
  min-height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.live-epg-card:hover,
.live-epg-card.nav-focused {
  background: #181820;
  border-color: rgba(255, 255, 255, 0.22);
}

.live-epg-card.is-current {
  border: 1.5px solid #ff2a3b !important;
  box-shadow: none !important;
  background: #15131a;
}

.live-epg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.live-epg-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #e50914 !important;
  line-height: 1.2 !important;
  margin: 0;
  flex: 1;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.15px;
}

.live-epg-card-badge {
  font-family: 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  margin-left: 6px;
}

.live-epg-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.25 !important;
  margin: 2px 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.live-epg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
}

.live-epg-card-time {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.live-epg-card-date {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: lowercase;
}

.live-epg-empty {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  gap: 8px;
  text-align: center;
}

/* Star icon at the end of channel row */
.live-channel-fav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 6px;
}
.live-channel-fav-star svg {
  width: 12px;
  height: 12px;
}

/* =========================================================
   MULTI-SCREEN MODALS & CONTROLS (Screenshots:
   media_1792620418808_2609caf7.png,
   media_1792620418669_3c598315.png,
   media_1792620416569_51455dbc.png)
   ========================================================= */

/* Modals Backdrop */
.ms-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: msFadeIn 0.2s ease-out;
}

/* Modals Card — SANSAT Brand Identity (No weird purple tint) */
.ms-modal-card {
  width: clamp(320px, 86vw, 420px);
  background: rgba(20, 5, 8, 0.98) !important;
  border: 1.5px solid #ff2a4b !important;
  border-radius: 20px;
  padding: 30px 26px 26px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: msCardScale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ms-modal-top-glow {
  display: none !important;
}

.ms-modal-title {
  font-family: 'Barlow Condensed', 'Tajawal', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: 0.3px;
  margin: 0 0 14px 0;
  position: relative;
  z-index: 2;
}

.ms-modal-desc {
  font-family: 'Inter', 'Tajawal', sans-serif;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.55;
  margin: 0 0 24px 0;
  position: relative;
  z-index: 2;
}

.ms-modal-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.ms-modal-btn {
  width: 100%;
  height: 48px;
  border-radius: 9999px;
  background: #e50914 !important;
  border: 1.5px solid #ff2a4b !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Tajawal', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  box-sizing: border-box;
}

.ms-modal-btn:hover,
.ms-modal-btn:focus,
.ms-modal-btn.nav-focused {
  background: #ff1f2f !important;
  border-color: #ffffff !important;
  transform: scale(1.025) !important;
  box-shadow: none !important;
}

.ms-modal-btn:active {
  background: #c40812 !important;
  border-color: #ff2a4b !important;
}

@keyframes msFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes msCardScale {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* MULTI-SCREEN PLAYBACK CONTAINER — SANSAT OTT */
.multiscreen-container {
  width: 100vw;
  height: 100vh;
  background: var(--app-bg-gradient) fixed !important;
  overflow: hidden;
  position: relative;
  display: flex;
  user-select: none;
  box-sizing: border-box;
}

/* 1. Horizontal Layout (Izquierda + derecha) */
.multiscreen-container.layout-horizontal {
  flex-direction: row;
}

.multiscreen-container.layout-horizontal .multiscreen-pane {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #1c0305 0%, #0d0103 45%, #000000 90%) !important;
}

.multiscreen-container.layout-horizontal .multiscreen-pane:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

/* 2. Vertical Layout (Arriba + abajo) */
.multiscreen-container.layout-vertical {
  flex-direction: column;
}

.multiscreen-container.layout-vertical .multiscreen-pane {
  width: 100%;
  height: 50%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #1c0305 0%, #0d0103 45%, #000000 90%) !important;
}

.multiscreen-container.layout-vertical .multiscreen-pane:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Video Elements */
.multiscreen-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Top Bar Overlay */
.multiscreen-top-bar {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 16px);
  left: max(env(safe-area-inset-left, 0px), 18px);
  right: max(env(safe-area-inset-right, 0px), 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 30;
  transition: opacity 0.3s ease;
}

.multiscreen-close-btn {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.multiscreen-close-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.multiscreen-close-btn:hover,
.multiscreen-close-btn:focus,
.multiscreen-close-btn:focus-visible,
.multiscreen-close-btn.nav-focused {
  transform: scale(1.18);
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.multiscreen-ch-badge {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 6px 16px;
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
}

.multiscreen-ch-badge:hover,
.multiscreen-ch-badge:focus,
.multiscreen-ch-badge.nav-focused {
  background: rgba(168, 20, 13, 0.4);
  border-color: #e50914;
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.4);
}

/* Bottom Controls Bar — SANSAT OTT */
.multiscreen-controls-bar {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 32px;
  z-index: 30;
  transition: opacity 0.3s ease;
}

.multiscreen-ctrl-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease;
}

.multiscreen-ctrl-btn svg {
  width: 25px;
  height: 25px;
}

.multiscreen-ctrl-btn:hover,
.multiscreen-ctrl-btn:focus,
.multiscreen-ctrl-btn:focus-visible,
.multiscreen-ctrl-btn.nav-focused {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.22) !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.multiscreen-ctrl-btn.active-audio {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff;
}

.multiscreen-ctrl-btn.active-audio:hover,
.multiscreen-ctrl-btn.active-audio:focus,
.multiscreen-ctrl-btn.active-audio:focus-visible,
.multiscreen-ctrl-btn.active-audio.nav-focused {
  background: #e50914 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.15);
}

.multiscreen-ctrl-btn.muted {
  background: rgba(30, 30, 30, 0.75) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.6);
}

.multiscreen-ctrl-btn.muted:hover,
.multiscreen-ctrl-btn.muted:focus,
.multiscreen-ctrl-btn.muted:focus-visible,
.multiscreen-ctrl-btn.muted.nav-focused {
  background: rgba(50, 50, 50, 0.85) !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.15);
}

/* Idle Fading */
.multiscreen-container.controls-hidden .multiscreen-top-bar,
.multiscreen-container.controls-hidden .multiscreen-controls-bar {
  opacity: 0.12;
  pointer-events: none;
}

.multiscreen-pane:hover .multiscreen-top-bar,
.multiscreen-pane:hover .multiscreen-controls-bar {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================================================
   MULTISCREEN NATIVE CHANNEL SELECTOR DRAWER (NO MODALS)
========================================================= */
.ms-channel-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  justify-content: flex-end;
  pointer-events: auto;
}

.ms-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: msFadeIn 0.22s ease;
}

.ms-drawer-panel {
  position: relative;
  width: clamp(380px, 42vw, 540px);
  height: 100vh;
  background: var(--app-bg-gradient) !important;
  border-left: 1px solid rgba(229, 9, 56, 0.35);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  animation: msSlideIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ms-drawer-header {
  padding: 16px 20px 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ms-drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-drawer-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.3px;
}

.ms-drawer-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.ms-drawer-search-box {
  margin: 12px 18px 8px 18px;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 0 14px;
  height: 38px;
  flex-shrink: 0;
}

.ms-drawer-search-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
}

.ms-drawer-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.ms-drawer-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ms-drawer-cats-row {
  display: flex;
  gap: 8px;
  padding: 6px 18px 12px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: none;
}
.ms-drawer-cats-row::-webkit-scrollbar {
  display: none;
}

.ms-drawer-cat-chip {
  padding: 6px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.ms-drawer-cat-chip:hover,
.ms-drawer-cat-chip:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.ms-drawer-cat-chip.active {
  background: #A8140D !important;
  border-color: #A8140D !important;
  color: #ffffff !important;
}

.ms-drawer-channels-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-drawer-channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.ms-drawer-channel-row:hover,
.ms-drawer-channel-row:focus,
.ms-drawer-channel-row.nav-focused {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(229, 9, 56, 0.6);
  transform: translateX(-4px);
}

.ms-drawer-channel-row.active {
  background: rgba(168, 20, 13, 0.28);
  border-color: #A8140D;
}

.ms-drawer-ch-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.ms-drawer-ch-logo {
  width: 44px;
  height: 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.ms-drawer-ch-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ms-drawer-ch-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  letter-spacing: 0.2px;
}

.ms-drawer-playing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e50914;
  box-shadow: 0 0 8px #e50914;
  flex-shrink: 0;
}

.ms-drawer-empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================================
   VOD & SERIES NATIVE APP CATALOG (SCREENSHOTS media_1792630427714_138ce97e.png & media_1792630427772_46edb7c0.png)
========================================================= */
.media-catalog-screen {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--app-bg-gradient) fixed !important;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.media-top-header {
  height: var(--app-header-h);
  padding: 0 var(--app-pad-r) 0 var(--app-pad-x);
  margin-top: var(--app-pad-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 20;
}

.media-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.media-screen-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  margin: 0;
}

.media-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sort Button & Popup — SANSAT OTT */
.media-sort-wrapper {
  position: relative;
}

.media-sort-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: transform 0.15s ease;
}

.media-sort-btn svg {
  width: 24px;
  height: 24px;
}

.media-sort-btn:hover,
.media-sort-btn:focus,
.media-sort-btn:focus-visible,
.media-sort-btn.nav-focused {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.media-sort-popup {
  position: absolute;
  top: 48px;
  right: -80px;
  width: 320px;
  background: rgba(35, 36, 46, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 22px 20px 20px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: sortPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sortPopIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.media-sort-arrow {
  position: absolute;
  top: -8px;
  right: 90px;
  width: 14px;
  height: 14px;
  background: rgba(35, 36, 46, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(45deg);
}

.media-sort-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.media-sort-subtitle {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.media-sort-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-sort-option {
  width: 100%;
  padding: 12px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.media-sort-option:hover,
.media-sort-option:focus,
.media-sort-option.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Search input */
.media-search-pill,
.media-search-pill:focus,
.media-search-pill:focus-within,
.media-search-pill:focus-visible,
.media-search-pill.nav-focused {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 14px !important;
  width: 280px !important;
  box-sizing: border-box !important;
}

.media-search-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  stroke: rgba(255, 255, 255, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.media-search-input,
.media-search-input:focus,
.media-search-input:focus-visible,
.media-search-input.nav-focused {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.media-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
}

/* Two-column body */
.media-screen-body {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 0 var(--app-pad-r) 0 var(--app-pad-x);
  overflow: hidden;
  min-height: 0;
  height: calc(100vh - var(--app-header-h) - var(--app-pad-top));
  box-sizing: border-box;
}

/* Left column categories */
.media-cats-col {
  width: var(--app-sidebar-w);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 6px 30px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.media-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid transparent !important;
  cursor: pointer;
  outline: none !important;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-sizing: border-box;
}

.media-cat-item:hover,
.media-cat-item:focus,
.media-cat-item.nav-focused {
  border-color: #e50914 !important;
  background: rgba(50, 52, 62, 0.95) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.media-cat-item.active {
  background: #e50914 !important;
  border-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: none !important;
}

.media-cat-item.active:hover,
.media-cat-item.active:focus,
.media-cat-item.active.nav-focused {
  background: #e50914 !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.media-cat-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.media-cat-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.media-cat-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.media-cat-count {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0.85;
  margin-left: 10px;
  flex-shrink: 0;
}

/* Right column posters grid (4 columns responsive on all phones) */
.media-posters-col {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* The actual scroll container inside the posters column (for mobile + APK) */
.media-posters-scroll-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 16px 14px 44px 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.media-posters-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1400px) {
  .media-posters-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
@media (min-width: 1800px) {
  .media-posters-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

.media-poster-card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #14161f !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: border-color 0.12s ease, transform 0.12s ease !important;
  outline: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-sizing: border-box !important;
}

.media-poster-card .nw {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background: #ff2a6d !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px 3px 6px !important;
  border-bottom-right-radius: 8px !important;
  letter-spacing: 0.04em !important;
  z-index: 4 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.media-poster-card:hover,
.media-poster-card:focus,
.media-poster-card.nav-focused,
.media-poster-card:active {
  transform: scale(1.025) !important;
  border: 1px solid #ff2a3b !important;
  border-color: #ff2a3b !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 5;
}

.media-poster-card.nav-focused .media-poster-gradient,
.media-poster-card:focus .media-poster-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
}

.media-poster-card.nav-focused .media-poster-title,
.media-poster-card:focus .media-poster-title {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.media-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.media-poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14161f;
}

.media-fallback-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.media-poster-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%);
  pointer-events: none;
}

.media-poster-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 8px 8px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* ==========================================================================
   CATCH-UP / REPETIR SCREEN (Pixel-Perfect Reference Match)
   - Screen 1: media_1792634807908_9774abd8.png (< Repetir, 2-Col Channel Grid)
   - Screen 2: media_1792634807861_bf8ca3f3.png (< Catch-Up, 2-Col Programs Grid)
   ========================================================================== */

.catchup-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--app-bg-gradient) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x) !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 50;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
}

.catchup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--app-header-h) !important;
  min-height: var(--app-header-h) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

.catchup-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catchup-back-btn,
.catchup-back-btn:hover,
.catchup-back-btn:focus,
.catchup-back-btn:focus-visible,
.catchup-back-btn.nav-focused {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: opacity 0.2s, transform 0.15s;
}

.catchup-back-btn svg {
  width: 22px;
  height: 22px;
}

.catchup-back-btn:hover,
.catchup-back-btn:focus,
.catchup-back-btn:focus-visible,
.catchup-back-btn.nav-focused {
  opacity: 0.85;
  transform: translateX(-2px);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.catchup-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.catchup-search-pill,
.catchup-search-pill:focus,
.catchup-search-pill:focus-within,
.catchup-search-pill:focus-visible,
.catchup-search-pill.nav-focused {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 14px !important;
  width: 280px !important;
  box-sizing: border-box !important;
}

.catchup-search-icon {
  width: 18px !important;
  height: 18px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  stroke: rgba(255, 255, 255, 0.6) !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.catchup-search-input,
.catchup-search-input:focus,
.catchup-search-input:focus-visible,
.catchup-search-input.nav-focused {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.catchup-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
}

.catchup-retry-btn {
  background: #e50914;
  color: #ffffff;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.catchup-retry-btn:hover,
.catchup-retry-btn:focus,
.catchup-retry-btn:focus-visible,
.catchup-retry-btn.nav-focused {
  background: #b80710;
  transform: scale(1.04);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.catchup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 6px 0 24px 0;
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 600px) {
  .catchup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* Screen 1 Channel Card */
.catchup-ch-card {
  background: #222426;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  min-width: 0;
}

.catchup-ch-card:hover,
.catchup-ch-card:focus,
.catchup-ch-card:focus-visible,
.catchup-ch-card.nav-focused,
.catchup-ch-card:active {
  background: #2a2d30;
  border-color: #e50914 !important;
  transform: none !important;
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(229, 9, 20, 0.45);
}

.catchup-ch-logo-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.catchup-ch-logo {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.catchup-ch-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catchup-ch-name {
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.catchup-ch-snippet {
  color: #9aa0a6;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.catchup-prog-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}

.catchup-prog-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.catchup-card-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.catchup-speed-clock {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Screen 2 Program Card */
.catchup-prog-card {
  background: #181a20;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.catchup-prog-card:hover,
.catchup-prog-card:focus-visible,
.catchup-prog-card:active {
  background: #22252c;
  border-color: rgba(229, 9, 20, 0.6);
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(229, 9, 20, 0.25);
}

.catchup-prog-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.catchup-prog-title {
  color: #ffffff; /* Crisp white title */
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: clamp(15.5px, 2vw, 17.5px);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.catchup-prog-speed-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catchup-prog-desc {
  color: #a0a6b2;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 36px;
}

.catchup-prog-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 13px;
  color: #8b929e;
  min-width: 0;
}

.catchup-prog-time {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  color: #f1f2f4;
}

.catchup-prog-line {
  flex: 1;
  min-width: 8px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}

.catchup-prog-date {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  color: #8b929e;
  text-transform: capitalize;
}

.catchup-channel-badge {
  background: rgba(229, 9, 20, 0.16);
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 16px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(229, 9, 20, 0.4);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catchup-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.catchup-loading-txt {
  color: #9aa0a6;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 17px;
  font-weight: 700;
}

.catchup-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #9aa0a6;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
}
  padding: 80px 20px;
  color: #9aa0a6;
  font-size: 15px;
  text-align: center;
}

/* =========================================================
   MODERN NATIVE SKELETON LOADERS (AJAX BACKGROUND DATA)
========================================================= */
@keyframes sansat-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(229, 9, 20, 0.14) 45%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  background-size: 250% 100% !important;
  animation: sansat-shimmer 1.6s ease-in-out infinite !important;
  border-radius: 8px;
}

.skeleton-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 6px 30px 0;
}

.skeleton-cat-row {
  height: 38px;
  width: 100%;
  border-radius: 8px;
}

.skeleton-poster-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.skeleton-poster-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.skeleton-poster-text {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 14px;
  border-radius: 4px;
}

.skeleton-channel-row {
  height: 42px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 6px;
}

.skeleton-catchup-card {
  height: 54px;
  border-radius: 12px;
}

/* Series Detail Episode Skeletons */
.skeleton-episode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.skeleton-episode-thumb {
  width: 110px;
  height: 62px;
  border-radius: 8px;
  flex-shrink: 0;
}

.skeleton-episode-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-episode-title {
  width: 70%;
  height: 16px;
  border-radius: 4px;
}

.skeleton-episode-sub {
  width: 40%;
  height: 12px;
  border-radius: 4px;
}

/* Movie Detail Text Skeletons */
.skeleton-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.skeleton-text-line {
  height: 14px;
  border-radius: 4px;
}

/* =========================================================
   ANDROID APK ISOLATED STYLES (100% Zero-Touch for Safari / Web PWA)
   These rules ONLY apply when running inside the Android APK WebView
========================================================= */
html[data-platform="apk"] .media-posters-col {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html[data-platform="apk"] .media-posters-scroll-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}

html[data-platform="apk"] .media-posters-col,
html[data-platform="apk"] .media-posters-grid,
html[data-platform="apk"] .media-poster-card {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* In Android APK landscape, match PWA Edge-to-Edge immersion completely */
html[data-platform="apk"] body,
html[data-platform="apk"] #app,
html[data-platform="apk"] .app-main {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-platform="apk"][data-orientation="landscape"] .sansat-home-dashboard,
html[data-platform="apk"][data-orientation="landscape"] .playlists-native-wrap,
html[data-platform="apk"][data-orientation="landscape"] .sports-top-bar,
html[data-platform="apk"][data-orientation="landscape"] .sports-content-scroll {
  padding-left: var(--app-pad-x) !important;
  padding-right: var(--app-pad-r) !important;
}

html[data-platform="apk"][data-orientation="landscape"] .media-top-header {
  padding-left: var(--app-pad-x) !important;
  padding-right: var(--app-pad-r) !important;
}

html[data-platform="apk"][data-orientation="landscape"] .media-screen-body {
  padding-left: var(--app-pad-x) !important;
  padding-right: var(--app-pad-r) !important;
}

/* Ensure selected cards stay the exact same size in APK */
html[data-platform="apk"] .home-feature-card:hover,
html[data-platform="apk"] .home-feature-card.nav-focused,
html[data-platform="apk"] .home-feature-card:focus,
html[data-platform="apk"] .home-feature-card:active {
  transform: none !important;
}

html[data-platform="apk"]:not([data-device="tv"]) .media-poster-card:hover,
html[data-platform="apk"]:not([data-device="tv"]) .media-poster-card.nav-focused,
html[data-platform="apk"]:not([data-device="tv"]) .media-poster-card:focus,
html[data-platform="apk"]:not([data-device="tv"]) .media-poster-card:active {
  transform: none !important;
}

/* =========================================================
   SANSAT 4K ANDROID TV DASHBOARD (KING 4K TV UI)
   100% Lightweight, Pure 60 FPS, Zero Heavy Blurs, D-Pad Remote
========================================================= */
.tv-king-dashboard {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: clamp(14px, 2.5vh, 24px) clamp(20px, 3vw, 40px) clamp(10px, 1.8vh, 18px) clamp(20px, 3vw, 40px);
  background: var(--app-bg-gradient) !important;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 1. TOP HEADER BAR */
.tv-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: clamp(55px, 9vh, 72px);
  flex-shrink: 0;
}

.tv-header-left {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

/* Official SANSAT Logo */
.tv-brand-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.tv-brand-logo-img {
  height: clamp(54px, 8.2vh, 68px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(229, 9, 20, 0.65));
}

/* Weather & Time Rounded Widget */
.tv-weather-widget {
  border-radius: 14px;
  background: rgba(22, 7, 10, 0.88);
  border: 1px solid rgba(229, 9, 20, 0.22);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.tv-ww-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tv-ww-city {
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  color: #d1b5ba;
  line-height: 1.2;
}

.tv-ww-date {
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  color: #9c8388;
  line-height: 1.2;
}

.tv-ww-time {
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-top: 2px;
}

.tv-ww-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-sun-svg {
  width: clamp(20px, 2.3vw, 26px);
  height: clamp(20px, 2.3vw, 26px);
  filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.6));
}

.tv-ww-temp {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  color: #ffffff;
}

/* Expiry indicator (top-center) */
.tv-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tv-expiry-label {
  font-size: clamp(11.5px, 1.3vw, 14px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.3px;
}

.tv-expiry-line {
  width: clamp(100px, 12vw, 150px);
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  margin: 4px auto 3px auto;
  border-radius: 2px;
}

.tv-expiry-days {
  font-size: clamp(13.5px, 1.5vw, 17px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* 6 Circular Action Buttons (top-right) */
.tv-header-right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}

.tv-circle-btn {
  width: clamp(38px, 4.2vw, 46px);
  height: clamp(38px, 4.2vw, 46px);
  border-radius: 50%;
  background: rgba(26, 8, 12, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.tv-circle-btn svg {
  width: clamp(17px, 2vw, 21px);
  height: clamp(17px, 2vw, 21px);
  color: #ffffff;
  opacity: 0.88;
}

.tv-circle-btn:hover,
.tv-circle-btn.nav-focused,
.tv-circle-btn:focus {
  border-color: #ff2a3b !important;
  background: #e50914 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 2;
}

.tv-circle-btn.nav-focused svg,
.tv-circle-btn:focus svg {
  opacity: 1;
}

/* 1.5. TOP ACTIONS ROW: 4 HORIZONTAL SMALL PILLS (Sport, PlayList, Search, Downloads) */
.tv-actions-row {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin: clamp(4px, 0.8vh, 10px) 0 clamp(8px, 1.4vh, 14px) 0;
  height: clamp(42px, 6vh, 52px);
  flex-shrink: 0;
}

.tv-actions-row .tv-stacked-card {
  flex: 1 1 0;
  height: 100%;
  min-height: unset;
  border-radius: 12px;
  background: #140508;
  border: 1.5px solid #850d12 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  padding: 0 clamp(8px, 1.2vw, 16px);
  cursor: pointer;
  outline: none !important;
  transition: none !important;
  transform: none !important;
  box-sizing: border-box;
}

.tv-actions-row .tv-stacked-card:hover,
.tv-actions-row .tv-stacked-card:focus,
.tv-actions-row .tv-stacked-card.nav-focused {
  border: 2px solid #ff1e2d !important;
  background: #1c080d !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 2;
}

/* 2. CENTER MAIN 4 COLUMNS HUB */
.tv-hub-grid {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  flex: 1;
  max-height: clamp(230px, 58vh, 450px);
  margin: 0;
  box-sizing: border-box;
}

.tv-card-column {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

/* 3 Big Vertical Hero Cards (Live TV, Movies, Series) - High Performance TV */
.tv-hero-card {
  border-radius: 18px;
  background: #140508;
  border: 1.5px solid #850d12 !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  cursor: pointer;
  outline: none !important;
  transition: none !important;
  transform: none !important;
}

/* TV Card Photographic Full-Stretch Watermark Layer: Futbol, Cinema, Serie Drama (Crisp, bright, zero filters) */
.tv-card-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.45 !important;
  pointer-events: none;
  z-index: 1;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.tv-card-bg-live {
  background-image: url('bg-card-live.webp');
}

.tv-card-bg-movies {
  background-image: url('bg-card-movies.webp');
}

.tv-card-bg-series {
  background-image: url('bg-card-series.webp');
}

.tv-card-bg-kids {
  background-image: url('bg-card-kids.webp');
}

/* Active / Focused Card: Crisp, bright photographic artwork (zero blur, zero filters) */
.tv-hero-card:hover .tv-card-bg-layer,
.tv-hero-card.nav-focused .tv-card-bg-layer,
.tv-hero-card:focus .tv-card-bg-layer {
  opacity: 0.65 !important;
  filter: none !important;
}

/* Circular Icon Badge in Center of Big Card - Pure Logo Ruby Red, Flat & Clean, Zero Border, Zero Shadow */
.tv-card-badge-circle {
  width: clamp(58px, 7.5vw, 76px) !important;
  height: clamp(58px, 7.5vw, 76px) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 1.8vh, 18px);
  position: relative;
  z-index: 3;
  background: radial-gradient(circle at 40% 35%, #b50b06 0%, #9e0903 55%, #680502 100%) !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
  box-sizing: border-box;
}

.tv-card-badge-circle svg {
  width: clamp(28px, 3.8vw, 38px) !important;
  height: clamp(28px, 3.8vw, 38px) !important;
  display: block;
}

.tv-badge-live,
.tv-badge-movies,
.tv-badge-series,
.tv-badge-kids {
  background: radial-gradient(circle at 40% 35%, #b50b06 0%, #9e0903 55%, #680502 100%) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Focused / Hover State: Pure clean logo ruby red, zero border, zero shadow */
.tv-hero-card:hover .tv-card-badge-circle,
.tv-hero-card.nav-focused .tv-card-badge-circle,
.tv-hero-card:focus .tv-card-badge-circle {
  background: radial-gradient(circle at 40% 35%, #c80d07 0%, #a80a04 55%, #720603 100%) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.tv-card-title {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.15;
  position: relative;
  z-index: 3;
}

.tv-card-subtitle {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
  color: #ff3344;
  margin-top: 5px;
  text-align: center;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TV Focus State for Hero Cards: Zero lag, crisp red border, no heavy box-shadow */
.tv-hero-card:hover,
.tv-hero-card.nav-focused,
.tv-hero-card:focus {
  border: 2px solid #ff1e2d !important;
  box-shadow: none !important;
  background: #140508 !important;
  transform: none !important;
  z-index: 5;
}

/* Top-Left shadow removed completely as requested */
.tv-hero-card::before {
  display: none !important;
}

.tv-hero-card::after {
  content: '';
  position: absolute;
  bottom: -68px;
  left: -35%;
  width: 135%;
  height: 110px;
  border-radius: 50% 50% 0 0 / 85% 85% 0 0;
  background: radial-gradient(ellipse at 30% 24%,
    rgba(195, 14, 24, 0.95) 0%,
    rgba(140, 10, 18, 0.72) 26%,
    rgba(70, 5, 10, 0.32) 46%,
    rgba(24, 2, 4, 0.08) 58%,
    transparent 68%
  ) !important;
  pointer-events: none;
  z-index: 2;
  opacity: 1 !important;
  transition: none !important;
}

html[dir="rtl"] .tv-hero-card::after {
  left: auto;
  right: -35%;
  background: radial-gradient(ellipse at 70% 24%,
    rgba(195, 14, 24, 0.95) 0%,
    rgba(140, 10, 18, 0.72) 26%,
    rgba(70, 5, 10, 0.32) 46%,
    rgba(24, 2, 4, 0.08) 58%,
    transparent 68%
  ) !important;
}

.tv-hero-card.nav-focused .tv-card-badge-circle,
.tv-hero-card:focus .tv-card-badge-circle {
  transform: none !important;
}

/* Column 4: 4 Stacked Action Cards */
.tv-stack-column {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.1vh, 12px);
  height: 100%;
  justify-content: space-between;
}

.tv-stacked-card {
  flex: 1 1 0;
  min-height: 0;
  border-radius: 14px;
  background: #140508;
  border: 1.5px solid #850d12 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 0 clamp(12px, 1.6vw, 20px);
  cursor: pointer;
  outline: none !important;
  transition: none !important;
  transform: none !important;
  box-sizing: border-box;
}

.tv-stacked-card:hover,
.tv-stacked-card:focus,
.tv-stacked-card.nav-focused {
  border: 2px solid #ff1e2d !important;
  background: #1c080d !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Clean, transparent badge for stacked icons - NO red background box */
.tv-stacked-badge {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: none !important;
  transform: none !important;
}

.tv-stacked-badge svg {
  width: clamp(17px, 2vw, 21px) !important;
  height: clamp(17px, 2vw, 21px) !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.tv-stacked-title {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: clamp(15px, 1.55vw, 18.5px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rtl-layout .tv-stacked-title,
[dir="rtl"] .tv-stacked-title {
  font-family: 'Tajawal', sans-serif !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 700 !important;
}

.tv-stacked-card.nav-focused .tv-stacked-badge,
.tv-stacked-card:focus .tv-stacked-badge,
.tv-stacked-card:hover .tv-stacked-badge {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 3. BOTTOM STATUS PILL (Static Device Info Bar - No Popups, No Red Glow) */
.tv-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  padding-top: 4px;
}

.tv-status-pill {
  border-radius: 9999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px clamp(16px, 2.5vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  cursor: default !important;
  pointer-events: none !important;
  outline: none !important;
  transition: none !important;
  transform: none !important;
}

.tv-sp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: clamp(15px, 1.6vw, 18.5px);
  color: #ffffff;
}

.rtl-layout .tv-sp-item,
[dir="rtl"] .tv-sp-item {
  font-family: 'Tajawal', sans-serif !important;
  font-size: clamp(14px, 1.5vw, 17.5px) !important;
  gap: 9px;
}

.tv-sp-icon {
  width: clamp(19px, 2vw, 23px);
  height: clamp(19px, 2vw, 23px);
  color: #ffffff !important;
}

.tv-sp-label {
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.5px;
}

.tv-sp-val {
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.5px;
}

.tv-sp-sep {
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 17px);
  user-select: none;
}

.tv-status-pill:hover,
.tv-status-pill.nav-focused,
.tv-status-pill:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* HYBRID TV MODE: FULL REMOTE D-PAD + MOUSE & AIR MOUSE SUPPORT */
html[data-device="tv"] {
  -webkit-touch-callout: none !important;
}

html[data-device="tv"] * {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* On pure Android TV APK hardware, hide the mouse cursor for clean TV viewing */
html.platform-apk[data-device="tv"]:not([data-os="windows"]):not([data-os="linux"]):not([data-os="macos"]),
html.platform-apk[data-device="tv"]:not([data-os="windows"]):not([data-os="linux"]):not([data-os="macos"]) *,
html[data-platform="apk"][data-device="tv"]:not([data-os="windows"]):not([data-os="linux"]):not([data-os="macos"]),
html[data-platform="apk"][data-device="tv"]:not([data-os="windows"]):not([data-os="linux"]):not([data-os="macos"]) * {
  cursor: none !important;
}

/* =========================================================
   DESKTOP / WINDOWS / LINUX / PC & AIR MOUSE CURSOR VISIBILITY
   Guarantees that on Windows and Linux TV mode, the arrow cursor
   and hand pointer are completely visible and reactive
   ========================================================= */
html[data-os="windows"],
html[data-os="windows"] *,
html[data-os="linux"],
html[data-os="linux"] *,
html[data-os="macos"],
html[data-os="macos"] *,
html[data-platform="desktop"],
html[data-platform="desktop"] *,
body.platform-desktop,
body.platform-desktop *,
body.os-windows,
body.os-windows *,
body.os-linux,
body.os-linux *,
html:not([data-platform="apk"])[data-device="tv"],
html:not([data-platform="apk"])[data-device="tv"] * {
  cursor: default !important;
}

/* Interactive elements get pointer hand on Windows, Linux, and Desktop */
html[data-os="windows"] button,
html[data-os="windows"] a,
html[data-os="windows"] input,
html[data-os="windows"] select,
html[data-os="windows"] .focusable,
html[data-os="windows"] [data-nav-item="true"],
html[data-os="windows"] .tv-hero-card,
html[data-os="windows"] .tv-card-column,
html[data-os="windows"] .tv-stacked-card,
html[data-os="windows"] .tv-circle-btn,
html[data-os="windows"] .tv-top-btn,
html[data-os="windows"] .tv-action-btn,
html[data-os="windows"] .tv-hero-btn,
html[data-os="windows"] .media-poster-card,
html[data-os="windows"] .sansat-episode-card,
html[data-os="windows"] .kids-channel-card,
html[data-os="windows"] .kids-movie-card,
html[data-os="windows"] .kids-series-card,
html[data-os="windows"] .kids-nav-item,
html[data-os="windows"] .kids-action-btn,
html[data-os="windows"] .kids-back-btn,
html[data-os="windows"] .kids-vod-grid-card,
html[data-os="windows"] .kids-series-grid-card,
html[data-os="windows"] .live-cat-row,
html[data-os="windows"] .media-cat-item,
html[data-os="windows"] .category-item,
html[data-os="windows"] .channel-item,
html[data-os="windows"] .epg-row,
html[data-os="windows"] [onclick],
html[data-os="linux"] button,
html[data-os="linux"] a,
html[data-os="linux"] input,
html[data-os="linux"] select,
html[data-os="linux"] .focusable,
html[data-os="linux"] [data-nav-item="true"],
html[data-os="linux"] .tv-hero-card,
html[data-os="linux"] .tv-card-column,
html[data-os="linux"] .tv-stacked-card,
html[data-os="linux"] .tv-circle-btn,
html[data-os="linux"] .tv-top-btn,
html[data-os="linux"] .tv-action-btn,
html[data-os="linux"] .tv-hero-btn,
html[data-os="linux"] .media-poster-card,
html[data-os="linux"] .sansat-episode-card,
html[data-os="linux"] .kids-channel-card,
html[data-os="linux"] .kids-movie-card,
html[data-os="linux"] .kids-series-card,
html[data-os="linux"] .kids-nav-item,
html[data-os="linux"] .kids-action-btn,
html[data-os="linux"] .kids-back-btn,
html[data-os="linux"] .kids-vod-grid-card,
html[data-os="linux"] .kids-series-grid-card,
html[data-os="linux"] .live-cat-row,
html[data-os="linux"] .media-cat-item,
html[data-os="linux"] .category-item,
html[data-os="linux"] .channel-item,
html[data-os="linux"] .epg-row,
html[data-os="linux"] [onclick],
html[data-platform="desktop"] button,
html[data-platform="desktop"] a,
html[data-platform="desktop"] input,
html[data-platform="desktop"] select,
html[data-platform="desktop"] .focusable,
html[data-platform="desktop"] [data-nav-item="true"],
html[data-platform="desktop"] .tv-hero-card,
html[data-platform="desktop"] .tv-card-column,
html[data-platform="desktop"] .tv-stacked-card,
html[data-platform="desktop"] .tv-circle-btn,
html[data-platform="desktop"] .tv-top-btn,
html[data-platform="desktop"] .tv-action-btn,
html[data-platform="desktop"] .tv-hero-btn,
html[data-platform="desktop"] .media-poster-card,
html[data-platform="desktop"] .sansat-episode-card,
html[data-platform="desktop"] .kids-channel-card,
html[data-platform="desktop"] .kids-movie-card,
html[data-platform="desktop"] .kids-series-card,
html[data-platform="desktop"] .kids-nav-item,
html[data-platform="desktop"] .kids-action-btn,
html[data-platform="desktop"] .kids-back-btn,
html[data-platform="desktop"] .kids-vod-grid-card,
html[data-platform="desktop"] .kids-series-grid-card,
html[data-platform="desktop"] .live-cat-row,
html[data-platform="desktop"] .media-cat-item,
html[data-platform="desktop"] .category-item,
html[data-platform="desktop"] .channel-item,
html[data-platform="desktop"] .epg-row,
html[data-platform="desktop"] [onclick],
body.platform-desktop button,
body.platform-desktop a,
body.platform-desktop input,
body.platform-desktop select,
body.platform-desktop .focusable,
body.platform-desktop [data-nav-item="true"],
body.platform-desktop .tv-hero-card,
body.platform-desktop .tv-card-column,
body.platform-desktop .tv-stacked-card,
body.platform-desktop .tv-circle-btn,
body.platform-desktop .media-poster-card,
body.platform-desktop .sansat-episode-card,
body.platform-desktop .kids-channel-card,
body.platform-desktop .kids-movie-card,
body.platform-desktop .kids-series-card,
body.platform-desktop .kids-nav-item,
body.platform-desktop .kids-action-btn,
body.platform-desktop .kids-back-btn,
body.platform-desktop .kids-vod-grid-card,
body.platform-desktop .kids-series-grid-card,
body.os-windows button,
body.os-windows a,
body.os-windows input,
body.os-windows select,
body.os-windows .focusable,
body.os-windows [data-nav-item="true"],
body.os-windows .tv-hero-card,
body.os-windows .tv-card-column,
body.os-windows .tv-stacked-card,
body.os-windows .tv-circle-btn,
body.os-windows .media-poster-card,
body.os-windows .sansat-episode-card,
body.os-windows .kids-movie-card,
body.os-windows .kids-series-card,
body.os-windows .kids-channel-card,
body.os-windows .kids-nav-item,
body.os-windows .kids-action-btn,
body.os-windows .kids-back-btn,
body.os-windows .kids-vod-grid-card,
body.os-windows .kids-series-grid-card,
body.os-linux button,
body.os-linux a,
body.os-linux input,
body.os-linux select,
body.os-linux .focusable,
body.os-linux [data-nav-item="true"],
body.os-linux .tv-hero-card,
body.os-linux .tv-card-column,
body.os-linux .tv-stacked-card,
body.os-linux .tv-circle-btn,
body.os-linux .media-poster-card,
body.os-linux .sansat-episode-card,
body.os-linux .kids-movie-card,
body.os-linux .kids-series-card,
body.os-linux .kids-channel-card,
body.os-linux .kids-nav-item,
body.os-linux .kids-action-btn,
body.os-linux .kids-back-btn,
body.os-linux .kids-vod-grid-card,
body.os-linux .kids-series-grid-card,
html:not([data-platform="apk"])[data-device="tv"] button,
html:not([data-platform="apk"])[data-device="tv"] a,
html:not([data-platform="apk"])[data-device="tv"] input,
html:not([data-platform="apk"])[data-device="tv"] select,
html:not([data-platform="apk"])[data-device="tv"] .focusable,
html:not([data-platform="apk"])[data-device="tv"] [data-nav-item="true"],
html:not([data-platform="apk"])[data-device="tv"] .tv-hero-card,
html:not([data-platform="apk"])[data-device="tv"] .tv-card-column,
html:not([data-platform="apk"])[data-device="tv"] .tv-stacked-card,
html:not([data-platform="apk"])[data-device="tv"] .tv-circle-btn,
html:not([data-platform="apk"])[data-device="tv"] .tv-top-btn,
html:not([data-platform="apk"])[data-device="tv"] .tv-action-btn,
html:not([data-platform="apk"])[data-device="tv"] .tv-hero-btn,
html:not([data-platform="apk"])[data-device="tv"] .media-poster-card,
html:not([data-platform="apk"])[data-device="tv"] .sansat-episode-card,
html:not([data-platform="apk"])[data-device="tv"] .kids-movie-card,
html:not([data-platform="apk"])[data-device="tv"] .kids-series-card,
html:not([data-platform="apk"])[data-device="tv"] .kids-channel-card,
html:not([data-platform="apk"])[data-device="tv"] .kids-nav-item,
html:not([data-platform="apk"])[data-device="tv"] .kids-action-btn,
html:not([data-platform="apk"])[data-device="tv"] .kids-back-btn,
html:not([data-platform="apk"])[data-device="tv"] .kids-vod-grid-card,
html:not([data-platform="apk"])[data-device="tv"] .kids-series-grid-card {
  cursor: pointer !important;
}

/* =========================================================
   STRICT MOBILE TOUCH & PWA ISOLATION
   Never apply TV borders or hover effects to mobile touch
========================================================= */
html:not([data-device="tv"]) .live-cat-row,
html:not([data-device="tv"]) .live-cat-row:hover,
html:not([data-device="tv"]) .live-cat-row:focus,
html:not([data-device="tv"]) .live-cat-row.active,
html:not([data-device="tv"]) .live-cat-row.active:hover,
html:not([data-device="tv"]) .live-cat-row.active:focus,
html:not([data-device="tv"]) .media-cat-item,
html:not([data-device="tv"]) .media-cat-item:hover,
html:not([data-device="tv"]) .media-cat-item:focus,
html:not([data-device="tv"]) .media-cat-item.active,
html:not([data-device="tv"]) .media-cat-item.active:hover,
html:not([data-device="tv"]) .media-cat-item.active:focus {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

html:not([data-device="tv"]) .live-cat-row.active,
html:not([data-device="tv"]) .media-cat-item.active {
  background: #e50914 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

html:not([data-device="tv"]) .media-poster-card,
html:not([data-device="tv"]) .media-poster-card:hover,
html:not([data-device="tv"]) .media-poster-card:focus,
html:not([data-device="tv"]) .media-poster-card:active {
  border: none !important;
  border-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ANDROID TV PERFORMANCE OPTIMIZATION (60 FPS HARDWARE ACCELERATED)
   Eliminates all CPU backdrop blur fallbacks on Mali-450/G31
========================================================= */
html[data-device="tv"] *,
html[data-device="tv"] *::before,
html[data-device="tv"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide mobile header back chevron and redundant sub-page headers on TV */
html[data-device="tv"] #vod-btn-back,
html[data-device="tv"] #series-btn-back,
html[data-device="tv"] #live-btn-back,
html[data-device="tv"] #vod-detail-back-btn,
html[data-device="tv"] #series-detail-back-btn,
html[data-device="tv"] #catchup-btn-back-home,
html[data-device="tv"] #catchup-btn-back-channels,
html[data-device="tv"] #catchup-btn-back-empty,
html[data-device="tv"] #catchup-loading-back,
html[data-device="tv"] #search-back-btn,
html[data-device="tv"] #settings-back-btn,
html[data-device="tv"] #dl-back-btn,
html[data-device="tv"] #pl-back-btn,
html[data-device="tv"] #pl-info-back-btn,
html[data-device="tv"] #notif-back-btn,
html[data-device="tv"] .live-back-chevron,
html[data-device="tv"] .search-back-btn,
html[data-device="tv"] .settings-back-btn,
html[data-device="tv"] .dl-back-btn,
html[data-device="tv"] .pl-back-btn,
html[data-device="tv"] .pl-info-back-btn,
html[data-device="tv"] .catchup-back-btn,
html[data-device="tv"] [id*="back-btn"],
html[data-device="tv"] [id*="btn-back"] {
  display: none !important;
}

html[data-device="tv"] .media-top-header,
html[data-device="tv"] .live-top-header {
  display: none !important;
}

/* BASE: HIDE ALL TV HERO ELEMENTS FOR MOBILE, TABLET & PWA (ZERO POLLUTION) */
.tv-meta-preview,
.tv-hero-art,
#vod-hero-art,
#series-hero-art,
#tv-meta-preview-vod,
#tv-meta-preview-series {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

html[data-device="tv"] .tv-meta-preview,
html[data-device="tv"] .tv-meta-preview * {
  font-family: 'Tajawal', sans-serif !important;
}

html[data-device="tv"] .tv-meta-preview,
html[data-device="tv"] #tv-meta-preview-vod,
html[data-device="tv"] #tv-meta-preview-series {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 16px 28px 6px 28px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
  height: auto !important;
  min-height: 250px !important;
  max-height: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* 100% Ambient TV Hero Artwork (Floats seamlessly behind metadata and posters, progressive opacity fade into image) */
html[data-device="tv"] .tv-hero-art,
html[data-device="tv"] #vod-hero-art,
html[data-device="tv"] #series-hero-art,
body.device-tv .tv-hero-art,
body.device-tv #vod-hero-art,
body.device-tv #series-hero-art,
body.device-desktop .tv-hero-art,
body.device-desktop #vod-hero-art,
body.device-desktop #series-hero-art {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 58vh !important;
  max-height: 58vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.rtl-mode html[data-device="tv"] .tv-hero-art,
body.rtl-mode html[data-device="tv"] #vod-hero-art,
body.rtl-mode html[data-device="tv"] #series-hero-art,
html[dir="rtl"][data-device="tv"] .tv-hero-art,
html[dir="rtl"][data-device="tv"] #vod-hero-art,
html[dir="rtl"][data-device="tv"] #series-hero-art,
html[dir="rtl"] .tv-hero-art {
  left: 0 !important;
  right: 0 !important;
}

html[data-device="tv"] .tv-hero-backdrop-img,
body.device-tv .tv-hero-backdrop-img,
body.device-desktop .tv-hero-backdrop-img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 75% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right top !important;
  opacity: 0.95 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 65%) !important;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 65%) !important;
}

body.rtl-mode html[data-device="tv"] .tv-hero-backdrop-img,
html[dir="rtl"][data-device="tv"] .tv-hero-backdrop-img,
html[dir="rtl"] .tv-hero-backdrop-img {
  right: auto !important;
  left: 0 !important;
  object-position: left top !important;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 65%) !important;
  mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 65%) !important;
}

/* SANSAT TV Hero Vignette: Seamless vertical fade into posters, 100% transparent on left to reveal unified radiant background */
html[data-device="tv"] .tv-hero-vignette,
body.device-tv .tv-hero-vignette,
body.device-desktop .tv-hero-vignette,
.tv-hero-vignette {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: none !important;
  box-shadow: none !important;
  background:
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.85) 18%, transparent 45%) !important;
}

body.rtl-mode html[data-device="tv"] .tv-hero-vignette,
html[dir="rtl"][data-device="tv"] .tv-hero-vignette,
html[dir="rtl"] .tv-hero-vignette {
  background:
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.85) 18%, transparent 45%) !important;
}

/* When category sidebar is CLOSED (full-width expanded mode): extend seamless background fade behind text */
html[data-device="tv"] .media-screen-body.expanded-posters .tv-hero-backdrop-img,
body.device-tv .media-screen-body.expanded-posters .tv-hero-backdrop-img,
body.device-desktop .media-screen-body.expanded-posters .tv-hero-backdrop-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 68%), linear-gradient(to top, transparent 0%, #000 35%) !important;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 68%), linear-gradient(to top, transparent 0%, #000 35%) !important;
}

body.rtl-mode html[data-device="tv"] .media-screen-body.expanded-posters .tv-hero-backdrop-img,
html[dir="rtl"][data-device="tv"] .media-screen-body.expanded-posters .tv-hero-backdrop-img,
html[dir="rtl"] .media-screen-body.expanded-posters .tv-hero-backdrop-img {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 68%), linear-gradient(to top, transparent 0%, #000 35%) !important;
  mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.8) 45%, #000 68%), linear-gradient(to top, transparent 0%, #000 35%) !important;
}

html[data-device="tv"] .media-screen-body.expanded-posters .tv-hero-vignette,
body.device-tv .media-screen-body.expanded-posters .tv-hero-vignette,
body.device-desktop .media-screen-body.expanded-posters .tv-hero-vignette {
  background:
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.85) 18%, transparent 45%) !important;
}

body.rtl-mode html[data-device="tv"] .media-screen-body.expanded-posters .tv-hero-vignette,
html[dir="rtl"][data-device="tv"] .media-screen-body.expanded-posters .tv-hero-vignette,
html[dir="rtl"] .media-screen-body.expanded-posters .tv-hero-vignette {
  background:
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.85) 18%, transparent 45%) !important;
}

html[data-device="tv"] .tv-hero-art::after,
html[data-device="tv"] .tv-hero-art::before,
body.device-tv .tv-hero-art::after,
body.device-tv .tv-hero-art::before,
body.device-desktop .tv-hero-art::after,
body.device-desktop .tv-hero-art::before {
  display: none !important;
}

html[data-device="tv"] .tv-preview-details {
  position: relative !important;
  z-index: 5 !important;
  max-width: 48% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html[data-device="tv"] .tv-preview-title-wrap {
  display: flex !important;
  align-items: center !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}

html[data-device="tv"] .tv-preview-title-wrap.has-logo .tv-preview-title {
  display: none !important;
}

html[data-device="tv"] .tv-preview-logo-img {
  max-height: 78px !important;
  max-width: 440px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95)) !important;
}

body.rtl-mode html[data-device="tv"] .tv-preview-logo-img,
html[dir="rtl"][data-device="tv"] .tv-preview-logo-img,
html[dir="rtl"] .tv-preview-logo-img {
  object-position: right center !important;
}

html[data-device="tv"] .tv-preview-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: 82px !important;
}

html[data-device="tv"] .tv-preview-title.ar-font,
html[dir="rtl"] .tv-preview-title {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 36px !important;
  text-align: right !important;
}

html[data-device="tv"] .tv-preview-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin-top: 3px !important;
  margin-bottom: 2px !important;
  overflow: hidden !important;
}

html[data-device="tv"] .tv-preview-stars {
  color: #f5c518 !important;
  letter-spacing: 2px !important;
  font-size: 15px !important;
}

html[data-device="tv"] .tv-preview-imdb {
  background: #f5c518 !important;
  color: #0b0f19 !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
}

html[data-device="tv"] .tv-preview-duration,
html[data-device="tv"] .tv-preview-year {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

html[data-device="tv"] .tv-preview-genre {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 4px !important;
}

html[data-device="tv"] .tv-preview-plot,
#vod-preview-plot,
#series-preview-plot {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 680px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 6px !important;
  height: 4.35em !important;
  min-height: 4.35em !important;
  max-height: 4.35em !important;
  box-sizing: content-box !important;
}

html[data-device="tv"] .tv-preview-plot.ar-font,
html[dir="rtl"] .tv-preview-plot {
  font-family: 'Tajawal', sans-serif !important;
  text-align: right !important;
}

html[data-device="tv"] .tv-preview-cat-badge {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  width: fit-content !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

html[data-device="tv"] .tv-preview-extra {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

html[data-device="tv"] .tv-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html[data-device="tv"] .tv-action-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .tv-action-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
}

html[data-device="tv"] .tv-action-btn:hover,
html[data-device="tv"] .tv-action-btn:focus,
html[data-device="tv"] .tv-action-btn.nav-focused {
  background: #ff2a3b !important;
  border-color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 14px rgba(255, 42, 59, 0.7) !important;
}

html[data-device="tv"] .tv-preview-count-pill {
  font-family: 'Barlow Condensed', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 4px 14px !important;
  border-radius: 18px !important;
  letter-spacing: 0.5px !important;
}

html[data-device="tv"] .tv-preview-backdrop-box {
  display: none !important;
}

html[data-device="tv"] body,
html[data-device="tv"] #app,
html[data-device="tv"] .media-catalog-screen,
html[data-device="tv"] .media-screen-body {
  background: var(--app-bg-gradient) fixed !important;
  background-attachment: fixed !important;
}

/* HARD LOCK: LIVE, VOD, AND SERIES ARE ALWAYS STRICTLY LTR (EVEN IN ARABIC) */
.live-screen-container,
.media-catalog-screen,
.media-screen-body,
.series-screen,
#vod-posters-col,
#series-posters-col,
#vod-cats-col,
#series-cats-col,
.live-channels-layout,
.live-tv-guide,
.live-split-body {
  direction: ltr !important;
}

/* TV MODE: COLLAPSIBLE CATEGORIES SIDEBAR & DUAL 5/6 COLUMN POSTERS GRID */
html[data-device="tv"] .media-screen-body,
html[data-platform="apk"][data-device="tv"] .media-screen-body,
html[data-platform="apk"][data-device="tv"][data-orientation="landscape"] .media-screen-body {
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}

html[data-device="tv"] .media-posters-col,
html[data-platform="apk"][data-device="tv"] .media-posters-col,
html[data-platform="apk"][data-device="tv"][data-orientation="landscape"] .media-posters-col {
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100vh !important;
  background: transparent !important;
}

html[data-device="tv"] .media-cats-col {
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px 30px 8px !important;
  gap: 2px !important;
  transition: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .media-screen-body.expanded-posters .media-cats-col {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border: none !important;
  transition: none !important;
}

/* Focused & Active Category Pills on TV */
html[data-device="tv"] .media-cat-item {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  min-height: 34px !important;
  max-height: 38px !important;
  margin-bottom: 2px !important;
  transition: none !important;
  background: transparent !important;
}

html[data-device="tv"] .media-cat-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html[data-device="tv"] .media-cat-count {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html[data-device="tv"] .media-cat-item.active,
html[data-device="tv"] .media-cat-item.nav-focused,
html[data-device="tv"] .media-cat-item:focus {
  background: #ffffff !important;
  color: #0b0f19 !important;
  font-weight: 800 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .media-cat-item.active .media-cat-title,
html[data-device="tv"] .media-cat-item.active .media-cat-count,
html[data-device="tv"] .media-cat-item.nav-focused .media-cat-title,
html[data-device="tv"] .media-cat-item.nav-focused .media-cat-count {
  color: #0b0f19 !important;
  font-weight: 800 !important;
}

/* TV POSTERS COLUMN & SCROLL CONTAINER */
html[data-device="tv"] .media-posters-col {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  background: transparent !important;
}

html[data-device="tv"] .media-posters-scroll-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  padding: 6px 28px 24px 28px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
}

/* Category menu open: 5 posters per row (was 4) */
html[data-device="tv"] .media-posters-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
}

/* Category menu closed: 6 posters per row (was 5) */
html[data-device="tv"] .media-screen-body.expanded-posters .media-posters-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
}

/* SANSAT TV: Posters in both 5-card mode (sidebar open) and 6-card mode (sidebar closed) have the EXACT SAME height (205px) and width */
html[data-device="tv"] .media-poster-card,
html[data-device="tv"] .media-screen-body.expanded-posters .media-poster-card,
body.device-tv .media-poster-card,
body.device-tv .media-screen-body.expanded-posters .media-poster-card,
body.device-desktop .media-poster-card,
body.device-desktop .media-screen-body.expanded-posters .media-poster-card {
  height: 205px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  contain: layout paint !important;
}

/* Hide card title and bottom dark gradient overlay on TV */
html[data-device="tv"] .media-poster-title,
body.device-tv .media-poster-title,
html[data-device="tv"] .media-poster-gradient,
body.device-tv .media-poster-gradient {
  display: none !important;
}

html[data-device="tv"] .media-poster-card:hover,
html[data-device="tv"] .media-poster-card:focus,
html[data-device="tv"] .media-poster-card.nav-focused,
html[data-device="tv"] .media-screen-body.expanded-posters .media-poster-card:hover,
html[data-device="tv"] .media-screen-body.expanded-posters .media-poster-card:focus,
html[data-device="tv"] .media-screen-body.expanded-posters .media-poster-card.nav-focused,
body.device-tv .media-poster-card:hover,
body.device-tv .media-poster-card:focus,
body.device-tv .media-poster-card.nav-focused,
body.device-tv .media-screen-body.expanded-posters .media-poster-card:hover,
body.device-tv .media-screen-body.expanded-posters .media-poster-card:focus,
body.device-tv .media-screen-body.expanded-posters .media-poster-card.nav-focused,
body.device-desktop .media-poster-card:hover,
body.device-desktop .media-poster-card:focus,
body.device-desktop .media-poster-card.nav-focused,
body.device-desktop .media-screen-body.expanded-posters .media-poster-card:hover,
body.device-desktop .media-screen-body.expanded-posters .media-poster-card:focus,
body.device-desktop .media-screen-body.expanded-posters .media-poster-card.nav-focused {
  transform: none !important;
  border: 2.5px solid #ff2233 !important;
  border-color: #ff2233 !important;
  box-shadow: 0 0 16px rgba(255, 34, 51, 0.7) !important;
  outline: none !important;
  z-index: 10 !important;
}

/* TV MODE: LIVE SCREEN PERFORMANCE & INSTANT D-PAD FOCUS */
html[data-device="tv"] .live-screen-container {
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-device="tv"] .live-split-body {
  height: 100vh !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .live-col-categories,
body.device-tv .live-col-categories {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  gap: 2px !important;
  padding: 4px 6px 16px 0 !important;
  transition: none !important;
}

html[data-device="tv"] .live-cat-row,
html[data-device="tv"] .live-channel-row,
body.device-tv .live-cat-row,
body.device-tv .live-channel-row {
  min-height: 40px !important;
  max-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  transition: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .live-cat-row.active,
html[data-device="tv"] .live-channel-row.selected,
body.device-tv .live-cat-row.active,
body.device-tv .live-channel-row.selected {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* TV EPG List on TV: 32px height + white left indicator stripe on focus */
html[data-device="tv"] .live-tv-epg-row,
body.device-tv .live-tv-epg-row {
  min-height: 32px !important;
  max-height: 34px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-left: 3.5px solid transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}

html[data-device="tv"] .live-tv-epg-row.is-current,
body.device-tv .live-tv-epg-row.is-current {
  background: rgba(229, 9, 20, 0.22) !important;
  border-left: 3.5px solid #e50914 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: #ffffff !important;
}

html[data-device="tv"] .live-tv-epg-row.nav-focused,
body.device-tv .live-tv-epg-row.nav-focused,
html[data-device="tv"] .live-tv-epg-row.is-current.nav-focused,
body.device-tv .live-tv-epg-row.is-current.nav-focused {
  background: #e50914 !important;
  border-left: 3.5px solid #ffffff !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"][dir="rtl"] .live-tv-epg-row,
body.device-tv[dir="rtl"] .live-tv-epg-row,
html[data-device="tv"] .live-tv-epg-row.ar-font,
body.device-tv .live-tv-epg-row.ar-font {
  border-left: none !important;
  border-right: 3.5px solid transparent !important;
  direction: rtl !important;
  text-align: right !important;
}

html[data-device="tv"][dir="rtl"] .live-tv-epg-row.is-current,
body.device-tv[dir="rtl"] .live-tv-epg-row.is-current,
html[data-device="tv"] .live-tv-epg-row.is-current.ar-font,
body.device-tv .live-tv-epg-row.is-current.ar-font {
  border-left: none !important;
  border-right: 3.5px solid #e50914 !important;
}

html[data-device="tv"][dir="rtl"] .live-tv-epg-row.nav-focused,
body.device-tv[dir="rtl"] .live-tv-epg-row.nav-focused,
html[data-device="tv"][dir="rtl"] .live-tv-epg-row.is-current.nav-focused,
body.device-tv[dir="rtl"] .live-tv-epg-row.is-current.nav-focused,
html[data-device="tv"] .live-tv-epg-row.nav-focused.ar-font,
body.device-tv .live-tv-epg-row.nav-focused.ar-font,
html[data-device="tv"] .live-tv-epg-row.is-current.nav-focused.ar-font,
body.device-tv .live-tv-epg-row.is-current.nav-focused.ar-font {
  border-left: none !important;
  border-right: 3.5px solid #ffffff !important;
}

html[data-device="tv"] .live-cat-name,
html[data-device="tv"] .live-channel-name,
body.device-tv .live-cat-name,
body.device-tv .live-channel-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
}

html[data-device="tv"] .live-cat-count {
  font-size: 13px !important;
}

html[data-device="tv"] .live-col-channels,
body.device-tv .live-col-channels {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  flex: 0 0 300px !important;
  gap: 2px !important;
  padding: 4px 6px 16px 0 !important;
  transition: none !important;
}

html[data-device="tv"] .live-cat-row:hover,
html[data-device="tv"] .live-cat-row.nav-focused,
html[data-device="tv"] .live-cat-row:focus {
  background: #ffffff !important;
  color: #0b0f19 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

html[data-device="tv"] .live-cat-row:hover .live-cat-name,
html[data-device="tv"] .live-cat-row.nav-focused .live-cat-name,
html[data-device="tv"] .live-cat-row:focus .live-cat-name,
html[data-device="tv"] .live-cat-row:hover .live-cat-count,
html[data-device="tv"] .live-cat-row.nav-focused .live-cat-count,
html[data-device="tv"] .live-cat-row:focus .live-cat-count {
  color: #0b0f19 !important;
  font-weight: 800 !important;
}

html[data-device="tv"] .live-channel-row:hover,
html[data-device="tv"] .live-channel-row.nav-focused,
html[data-device="tv"] .live-channel-row:focus,
body.device-tv .live-channel-row:hover,
body.device-tv .live-channel-row.nav-focused,
body.device-tv .live-channel-row:focus {
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

html[data-device="tv"] .live-channel-row.selected,
body.device-tv .live-channel-row.selected {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .live-channel-row.selected:hover,
html[data-device="tv"] .live-channel-row.selected.nav-focused,
html[data-device="tv"] .live-channel-row.selected:focus,
body.device-tv .live-channel-row.selected:hover,
body.device-tv .live-channel-row.selected.nav-focused,
body.device-tv .live-channel-row.selected:focus {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* TV MODE: MOVIE & SERIES DETAIL + CATCHUP PERFORMANCE (ZERO LAG) */
html[data-device="tv"] .sansat-btn-action-primary,
html[data-device="tv"] .sansat-btn-action-secondary,
html[data-device="tv"] .sansat-detail-icon-btn,
html[data-device="tv"] .sansat-episode-card,
html[data-device="tv"] .sansat-season-pill,
html[data-device="tv"] .catchup-ch-card,
html[data-device="tv"] .catchup-prog-card {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .sansat-btn-action-primary:hover,
html[data-device="tv"] .sansat-btn-action-primary:focus,
html[data-device="tv"] .sansat-btn-action-primary.nav-focused,
html[data-device="tv"] .sansat-btn-action-secondary:hover,
html[data-device="tv"] .sansat-btn-action-secondary:focus,
html[data-device="tv"] .sansat-btn-action-secondary.nav-focused,
html[data-device="tv"] .sansat-detail-icon-btn:hover,
html[data-device="tv"] .sansat-detail-icon-btn:focus,
html[data-device="tv"] .sansat-detail-icon-btn.nav-focused,
html[data-device="tv"] .sansat-episode-card:hover,
html[data-device="tv"] .sansat-episode-card:focus,
html[data-device="tv"] .sansat-episode-card.nav-focused,
html[data-device="tv"] .catchup-ch-card:hover,
html[data-device="tv"] .catchup-ch-card:focus,
html[data-device="tv"] .catchup-ch-card.nav-focused,
html[data-device="tv"] .catchup-prog-card:hover,
html[data-device="tv"] .catchup-prog-card:focus,
html[data-device="tv"] .catchup-prog-card.nav-focused {
  transform: none !important;
  box-shadow: none !important;
  border: 2px solid #ffffff !important;
  outline: none !important;
}

html[data-device="tv"] .sansat-detail-title {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

html[data-device="tv"] [dir="rtl"] .sansat-detail-title,
html[data-device="tv"] .sansat-detail-title.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

html[data-device="tv"] .sansat-detail-backdrop-bg img {
  opacity: 0.28 !important;
}

/* TV MODE: DOWNLOADS SCREEN FOCUS STYLING - NO WHITE BORDERS */
html[data-device="tv"] .dl-tab-btn,
body.device-tv .dl-tab-btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .dl-tab-btn:hover,
html[data-device="tv"] .dl-tab-btn:focus,
html[data-device="tv"] .dl-tab-btn.nav-focused,
body.device-tv .dl-tab-btn:hover,
body.device-tv .dl-tab-btn:focus,
body.device-tv .dl-tab-btn.nav-focused {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.2) !important;
}

html[data-device="tv"] .dl-tab-btn.active,
body.device-tv .dl-tab-btn.active {
  background: #A8140D !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .dl-tab-btn.active:focus,
html[data-device="tv"] .dl-tab-btn.active.nav-focused,
body.device-tv .dl-tab-btn.active:focus,
body.device-tv .dl-tab-btn.active.nav-focused {
  background: #A8140D !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.15) !important;
}

html[data-device="tv"] .dl-action-pause-btn:focus,
html[data-device="tv"] .dl-action-pause-btn.nav-focused,
html[data-device="tv"] .dl-action-del-btn:focus,
html[data-device="tv"] .dl-action-del-btn.nav-focused,
html[data-device="tv"] .dl-action-play-btn:focus,
html[data-device="tv"] .dl-action-play-btn.nav-focused,
body.device-tv .dl-action-pause-btn:focus,
body.device-tv .dl-action-pause-btn.nav-focused,
body.device-tv .dl-action-del-btn:focus,
body.device-tv .dl-action-del-btn.nav-focused,
body.device-tv .dl-action-play-btn:focus,
body.device-tv .dl-action-play-btn.nav-focused {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

html[data-device="tv"] .dl-progress-card:focus-within,
html[data-device="tv"] .dl-item-card:focus-within {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* TV MODE: TRAILER MODAL FOCUS & OVERLAY */
html[data-device="tv"] .trailer-modal-backdrop .trailer-big-play-btn:focus,
html[data-device="tv"] .trailer-modal-backdrop .trailer-big-play-btn.nav-focused,
html[data-device="tv"] .trailer-modal-backdrop .trailer-secondary-btn:focus,
html[data-device="tv"] .trailer-modal-backdrop .trailer-secondary-btn.nav-focused,
html[data-device="tv"] .trailer-modal-backdrop .sansat-detail-icon-btn:focus,
html[data-device="tv"] .trailer-modal-backdrop .sansat-detail-icon-btn.nav-focused,
html[data-device="tv"] .trailer-modal-backdrop .sansat-detail-back-btn:focus,
html[data-device="tv"] .trailer-modal-backdrop .sansat-detail-back-btn.nav-focused,
html[data-device="tv"] .trailer-modal-backdrop .trailer-btn-yt-dark:focus,
html[data-device="tv"] .trailer-modal-backdrop .trailer-btn-yt-dark.nav-focused {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6) !important;
  outline: none !important;
}

/* =========================================================
   ANDROID TV PERFORMANCE: CATCH-UP & REPETIR OPTIMIZATIONS
   Ultra-fast 60 FPS rendering, zero expensive blur, TV layout
   ========================================================= */
html[data-device="tv"] .catchup-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: linear-gradient(135deg, #150306 0%, #0c0d12 55%, #050608 100%) !important;
  contain: strict !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html[data-device="tv"] .catchup-header {
  height: var(--app-header-h) !important;
  min-height: var(--app-header-h) !important;
  max-height: var(--app-header-h) !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .catchup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .catchup-ch-card {
  background: #1a1c22 !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  contain: content !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .catchup-ch-card:hover,
html[data-device="tv"] .catchup-ch-card:focus,
html[data-device="tv"] .catchup-ch-card.nav-focused {
  background: #282c35 !important;
  border: 2px solid #e50914 !important;
  border-color: #e50914 !important;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.45) !important;
  transform: none !important;
  outline: none !important;
}

html[data-device="tv"] .catchup-prog-card {
  background: #181a20 !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  contain: content !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .catchup-prog-card:hover,
html[data-device="tv"] .catchup-prog-card:focus,
html[data-device="tv"] .catchup-prog-card.nav-focused {
  background: #252830 !important;
  border: 2px solid #e50914 !important;
  border-color: #e50914 !important;
  box-shadow: 0 0 16px rgba(229, 9, 20, 0.45) !important;
  transform: none !important;
  outline: none !important;
}

html[data-device="tv"] .catchup-prog-title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html[data-device="tv"] .catchup-ch-name {
  font-size: 18px !important;
  font-weight: 700 !important;
}

html[data-device="tv"] .catchup-ch-snippet {
  font-size: 14px !important;
  color: #a0a6b2 !important;
}

html[dir="rtl"] .catchup-ch-name,
html[dir="rtl"] .catchup-prog-title,
html[dir="rtl"] .catchup-prog-desc,
.catchup-ch-name.ar-font,
.catchup-prog-title.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

/* =========================================================
   ANDROID TV PERFORMANCE: GENERAL SEARCH OPTIMIZATIONS
   Ultra-fast 60 FPS, proper padding, TV poster cards
   ========================================================= */
html[data-device="tv"] .search-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: linear-gradient(135deg, #150306 0%, #0c0d12 55%, #050608 100%) !important;
  contain: strict !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--app-pad-top) var(--app-pad-r) var(--app-pad-bottom) var(--app-pad-x) !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-top-header {
  height: var(--app-header-h) !important;
  min-height: var(--app-header-h) !important;
  max-height: var(--app-header-h) !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-body {
  display: flex !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 22px !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-sidebar {
  width: 170px !important;
  min-width: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

html[data-device="tv"] .search-tab-btn {
  padding: 12px 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* TV MODE: SEARCH TAB BUTTONS - NO WHITE BORDER */
html[data-device="tv"] .search-tab-btn,
body.device-tv .search-tab-btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .search-tab-btn:hover,
html[data-device="tv"] .search-tab-btn.nav-focused,
html[data-device="tv"] .search-tab-btn:focus,
body.device-tv .search-tab-btn:hover,
body.device-tv .search-tab-btn.nav-focused,
body.device-tv .search-tab-btn:focus {
  border: none !important;
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-device="tv"] .search-tab-btn.active,
body.device-tv .search-tab-btn.active {
  background: #e50914 !important;
  color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-device="tv"] .search-tab-btn.active.nav-focused,
html[data-device="tv"] .search-tab-btn.active:focus,
body.device-tv .search-tab-btn.active.nav-focused,
body.device-tv .search-tab-btn.active:focus {
  background: #e50914 !important;
  color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: brightness(1.15) !important;
}

html[data-device="tv"] .search-results-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 16px 28px 12px !important;
  box-sizing: border-box !important;
}

/* TV Search Poster Cards: Matching media-poster-card high performance */
html[data-device="tv"] .search-posters-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding: 2px 2px 28px 2px !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-poster-card {
  height: 225px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background: #14161f !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  contain: layout paint !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html[data-device="tv"] .search-poster-card:hover,
html[data-device="tv"] .search-poster-card:focus,
html[data-device="tv"] .search-poster-card.nav-focused {
  transform: none !important;
  border: 2px solid #e50914 !important;
  border-color: #e50914 !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 5 !important;
}

html[data-device="tv"] .search-poster-card .search-poster-img-wrap {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

html[data-device="tv"] .search-poster-card .search-poster-title {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  z-index: 4 !important;
}

/* TV Search Channel Cards - Perfect 2-column symmetric layout with zero overflow */
html[data-device="tv"] .search-channels-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
  padding: 4px 6px 36px 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-channel-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  height: 64px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background: #14161f !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  contain: content !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-device="tv"] .search-channel-card:hover,
html[data-device="tv"] .search-channel-card:focus,
html[data-device="tv"] .search-channel-card.nav-focused {
  transform: none !important;
  border: 2px solid #e50914 !important;
  border-color: #e50914 !important;
  background: #282c35 !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 5 !important;
}

html[data-device="tv"] .search-channel-icon-wrap {
  width: 54px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html[data-device="tv"] .search-channel-icon-wrap img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

html[data-device="tv"] .search-channel-name {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* TV Live Preview Player: Zero lag, no heavy shadows, border-radius 8px */
html[data-device="tv"] .live-preview-box,
body.device-tv .live-preview-box {
  background: radial-gradient(ellipse at center, #230c12 0%, #0d0407 65%, #050102 100%) !important;
  background-color: #0d0407 !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: none !important;
  transform: none !important;
}

html[data-device="tv"] .live-preview-box:hover,
html[data-device="tv"] .live-preview-box:focus,
html[data-device="tv"] .live-preview-box.nav-focused,
body.device-tv .live-preview-box:hover,
body.device-tv .live-preview-box:focus,
body.device-tv .live-preview-box.nav-focused {
  border: 2px solid #e50914 !important;
  border-color: #e50914 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  outline: none !important;
  transition: none !important;
  transform: none !important;
}

html[data-device="tv"] .live-preview-video,
body.device-tv .live-preview-video {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-device="tv"] .live-preview-overlay,
body.device-tv .live-preview-overlay {
  display: none !important;
}

html[dir="rtl"] .search-poster-title,
html[dir="rtl"] .search-channel-name,
html[dir="rtl"] .search-tab-btn,
.search-poster-title.ar-font,
.search-channel-name.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

/* TV Settings Acceleration: Zero lag, no transitions, no blurs, no shadows */
html[data-device="tv"] .settings-split-layout,
body.device-tv .settings-split-layout,
html[data-device="tv"] .settings-left-nav,
body.device-tv .settings-left-nav,
html[data-device="tv"] .settings-nav-item,
body.device-tv .settings-nav-item,
html[data-device="tv"] .settings-nav-label,
body.device-tv .settings-nav-label,
html[data-device="tv"] .settings-right-panel,
body.device-tv .settings-right-panel,
html[data-device="tv"] .settings-lang-row,
body.device-tv .settings-lang-row,
html[data-device="tv"] .settings-toggle-row,
body.device-tv .settings-toggle-row,
html[data-device="tv"] .settings-switch-btn,
body.device-tv .settings-switch-btn,
html[data-device="tv"] .settings-action-pill,
body.device-tv .settings-action-pill,
html[data-device="tv"] .settings-format-row,
body.device-tv .settings-format-row,
html[data-device="tv"] .settings-danger-btn,
body.device-tv .settings-danger-btn,
html[data-device="tv"] .settings-back-btn,
body.device-tv .settings-back-btn,
html[data-device="tv"] .settings-config-card,
body.device-tv .settings-config-card {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

html[data-device="tv"] .settings-nav-item:not(.active):hover,
html[data-device="tv"] .settings-nav-item:not(.active).nav-focused,
body.device-tv .settings-nav-item:not(.active):hover,
body.device-tv .settings-nav-item:not(.active).nav-focused {
  background: rgba(255, 255, 255, 0.08) !important;
  padding-left: 14px !important;
  border-left: 4px solid #ffffff !important;
}

html[data-device="tv"] .settings-nav-item.active,
body.device-tv .settings-nav-item.active {
  background: rgba(229, 9, 20, 0.35) !important;
  border-left: 4px solid #e50914 !important;
  padding-left: 14px !important;
}

html[data-device="tv"] .settings-lang-row:hover,
html[data-device="tv"] .settings-lang-row:focus,
html[data-device="tv"] .settings-lang-row.nav-focused,
body.device-tv .settings-lang-row:hover,
body.device-tv .settings-lang-row:focus,
body.device-tv .settings-lang-row.nav-focused {
  background: rgba(255, 255, 255, 0.08) !important;
  padding-left: 14px !important;
}

html[data-device="tv"] .settings-toggle-row:hover,
html[data-device="tv"] .settings-toggle-row:focus,
html[data-device="tv"] .settings-toggle-row.nav-focused,
body.device-tv .settings-toggle-row:hover,
body.device-tv .settings-toggle-row:focus,
body.device-tv .settings-toggle-row.nav-focused {
  background: rgba(229, 9, 20, 0.2) !important;
  border-color: #e50914 !important;
}

html[data-device="tv"] .settings-format-row:hover,
html[data-device="tv"] .settings-format-row:focus,
html[data-device="tv"] .settings-format-row.nav-focused,
body.device-tv .settings-format-row:hover,
body.device-tv .settings-format-row:focus,
body.device-tv .settings-format-row.nav-focused {
  background: rgba(229, 9, 20, 0.2) !important;
  border-color: #e50914 !important;
}

html[data-device="tv"] .dl-item-card,
html[data-device="tv"] .dl-progress-card {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   PARENTAL CONTROL PIN MODAL (TV D-Pad & Numpad Compatible)
   ========================================================================== */
/* -------------------------------------------------------------
 * Ultra-Modern High-Performance Parental Control Modal
 * Zero-lag on Android TV, Mobile APK & Safari PWA (No GPU blur)
 * ------------------------------------------------------------- */
.parental-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: rgba(5, 7, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  contain: strict;
}

.parental-modal-box {
  background: linear-gradient(160deg, #220306 0%, #150204 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  box-shadow: none !important;
  border-radius: 14px;
  width: 90vw;
  max-width: 360px;
  padding: 20px 18px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  contain: content;
}

.parental-icon-shield {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(229, 9, 20, 0.12);
  border: 1px solid rgba(229, 9, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.parental-modal-title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.parental-modal-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 12px 0;
  line-height: 1.35;
  max-width: 280px;
}

.parental-dots-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.parental-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.parental-dot.filled {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.15);
}

.parental-dot.error {
  background: #e50914 !important;
  border-color: #e50914 !important;
}

.parental-dot.correct {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.parental-error-text {
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.parental-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 280px;
  margin-bottom: 12px;
}

.parental-num-btn {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 8px;
  height: 42px;
  color: #8b0000 !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  box-shadow: none !important;
  transition: none !important;
}

.parental-num-btn:hover,
.parental-num-btn:focus,
.parental-num-btn.nav-focused {
  background: #ffffff !important;
  color: #800008 !important;
  border: 2px solid #ff3344 !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.parental-num-btn.parental-fn-btn {
  background: #ffffff !important;
  color: #8b0000 !important;
}

.parental-num-btn.parental-ok-btn {
  background: #ffffff !important;
  border-color: transparent !important;
  color: #16a34a !important;
}

.parental-num-btn.parental-ok-btn:hover,
.parental-num-btn.parental-ok-btn:focus,
.parental-num-btn.parental-ok-btn.nav-focused {
  background: #ffffff !important;
  border: 2px solid #16a34a !important;
  color: #15803d !important;
  box-shadow: none !important;
  outline: none !important;
}

.parental-actions-row {
  width: 100%;
  max-width: 280px;
}

.parental-cancel-btn {
  width: 100%;
  height: 38px;
  background: #252836 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800 !important;
  cursor: pointer;
  outline: none;
  box-shadow: none !important;
  transition: none !important;
}

.parental-cancel-btn:hover,
.parental-cancel-btn:focus,
.parental-cancel-btn.nav-focused {
  background: #ffffff !important;
  color: #800008 !important;
  border: 2px solid #ff3344 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   PARENTAL PIN MODAL — KIDS PARADISE COMPACT THEME & SLEEK PILL BUTTON
   Ultra-compact design: takes minimal screen space, sleek and elegant.
   ========================================================================== */
.parental-modal-overlay.kids-theme {
  background: rgba(8, 4, 18, 0.88) !important;
  backdrop-filter: blur(8px);
}

.parental-modal-overlay.kids-theme .parental-modal-box {
  background: linear-gradient(145deg, #1b0f2e 0%, #0b0619 100%) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.7) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 24px rgba(255, 215, 0, 0.18) !important;
  border-radius: 16px !important;
  width: clamp(260px, 26vw, 300px) !important;
  max-width: 300px !important;
  padding: 14px 16px 12px 16px !important;
  box-sizing: border-box !important;
}

.parental-modal-overlay.kids-theme .parental-icon-shield {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 64, 129, 0.25)) !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25) !important;
  margin-bottom: 4px !important;
}

.parental-modal-overlay.kids-theme .parental-icon-shield svg {
  width: 20px !important;
  height: 20px !important;
}

.parental-modal-overlay.kids-theme .parental-modal-title {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 2px !important;
  line-height: 1.25 !important;
}

.parental-modal-overlay.kids-theme .parental-modal-desc {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px !important;
  color: #fed7aa !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  max-width: 250px !important;
}

.parental-modal-overlay.kids-theme .parental-dots-wrap {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  border-radius: 16px !important;
  padding: 4px 14px !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.parental-modal-overlay.kids-theme .parental-dot {
  width: 8px !important;
  height: 8px !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
}

.parental-modal-overlay.kids-theme .parental-dot.filled {
  background: #ffd700 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.9) !important;
}

.parental-modal-overlay.kids-theme .parental-numpad {
  direction: ltr !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 230px !important;
  margin-bottom: 8px !important;
}

.parental-modal-overlay.kids-theme .parental-num-btn {
  background: #ffffff !important;
  color: #1f1135 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1.5px solid transparent !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.parental-modal-overlay.kids-theme .parental-num-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.parental-modal-overlay.kids-theme .parental-num-btn:hover,
.parental-modal-overlay.kids-theme .parental-num-btn:focus,
.parental-modal-overlay.kids-theme .parental-num-btn.nav-focused {
  background: #ffd700 !important;
  color: #0d081f !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.75) !important;
  transform: scale(1.06) !important;
}

.parental-modal-overlay.kids-theme .parental-num-btn.parental-fn-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #e50914 !important;
}

.parental-modal-overlay.kids-theme .parental-num-btn.parental-ok-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #16a34a !important;
}

.parental-modal-overlay.kids-theme .parental-actions-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.parental-modal-overlay.kids-theme .parental-cancel-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 130px !important;
  padding: 4px 16px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.parental-modal-overlay.kids-theme .parental-cancel-btn svg {
  width: 13px !important;
  height: 13px !important;
}

.parental-modal-overlay.kids-theme .parental-cancel-btn:hover,
.parental-modal-overlay.kids-theme .parental-cancel-btn:focus,
.parental-modal-overlay.kids-theme .parental-cancel-btn.nav-focused {
  background: rgba(229, 9, 20, 0.45) !important;
  border-color: #ff4081 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 64, 129, 0.65) !important;
  transform: scale(1.05) !important;
}

/* Settings quick category search */
.settings-cat-search-box {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
}

.settings-cat-search-input {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0 14px 0 38px;
  color: #ffffff;
  font-size: 14.5px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  box-sizing: border-box;
  outline: none;
}

.settings-cat-search-input:focus,
.settings-cat-search-input.nav-focused {
  border-color: #e50914 !important;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.4) !important;
}

.settings-cat-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}






/* TV Live Preview Action Buttons (Favorite, EPG, Sports, Sort, Search, Fullscreen) — With stretching as requested */
html[data-device="tv"] .live-preview-actions,
body.device-tv .live-preview-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  padding: 8px 0 !important;
  width: 100% !important;
}

html[data-device="tv"] .live-action-pill,
body.device-tv .live-action-pill {
  flex: 1 !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

html[data-device="tv"] .live-preview-actions #live-btn-sports,
body.device-tv .live-preview-actions #live-btn-sports {
  display: flex !important;
}

html[data-device="tv"] .live-action-pill:hover,
html[data-device="tv"] .live-action-pill:focus,
html[data-device="tv"] .live-action-pill.nav-focused,
html[data-device="tv"] .live-action-pill.active,
body.device-tv .live-action-pill:hover,
body.device-tv .live-action-pill:focus,
body.device-tv .live-action-pill.nav-focused,
body.device-tv .live-action-pill.active {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: none !important;
  transition: none !important;
}

html[data-device="tv"] .live-action-pill svg,
body.device-tv .live-action-pill svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  transition: none !important;
  transform: none !important;
}

/* =========================================================
   NOTIFICATIONS SCREEN (TV & Mobile Compatible — Same Width/Height as Account Info)
   ========================================================= */
.notifications-screen {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  position: relative !important;
  padding-left: max(clamp(24px, 4.5vw, 56px), env(safe-area-inset-left)) !important;
  padding-right: max(clamp(24px, 4.5vw, 56px), env(safe-area-inset-right)) !important;
  padding-top: max(clamp(16px, 2.8vh, 26px), env(safe-area-inset-top)) !important;
  padding-bottom: max(clamp(16px, 2.8vh, 26px), env(safe-area-inset-bottom)) !important;
  background: var(--app-bg-gradient) !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #ffffff !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block !important;
  z-index: 50 !important;
}

.notifications-content-wrap {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.notifications-top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
  margin-bottom: clamp(16px, 2.8vh, 28px) !important;
  height: auto !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.notifications-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.notifications-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

html[data-device="tv"] .notifications-title {
  font-size: 27px !important;
  font-weight: 800 !important;
}

html[dir="rtl"] .notifications-title,
[dir="rtl"] .notifications-title {
  font-family: 'Tajawal', sans-serif !important;
}

.notifications-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.notifications-body {
  width: 100% !important;
  box-sizing: border-box !important;
}

.notifications-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.notif-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: #e50914 !important;
  background-image: linear-gradient(135deg, #e50914 0%, #b5121b 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45) !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.notif-action-btn svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
}

.notif-action-btn:hover,
.notif-action-btn:focus,
.notif-action-btn.nav-focused {
  background: #ff1e27 !important;
  background-image: linear-gradient(135deg, #ff2a3b 0%, #e50914 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 42, 59, 0.8) !important;
  transform: scale(1.05) !important;
}

.notifications-content {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 36px 40px 36px;
  box-sizing: border-box;
}

.notifications-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #14161f;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  cursor: pointer;
  outline: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

.notif-card:hover,
.notif-card:focus,
.notif-card.nav-focused {
  border-color: #ff2a3b !important;
  background: #1c080d !important;
  box-shadow: 0 0 16px rgba(255, 42, 59, 0.4) !important;
}

.notif-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-card-icon svg {
  width: 24px;
  height: 24px;
}

.notif-icon-red {
  background: rgba(229, 9, 20, 0.18);
  color: #ff3344;
}

.notif-icon-green {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
}

.notif-icon-gold {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.notif-card-body {
  flex: 1;
  min-width: 0;
}

.notif-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.notif-card-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 9999px;
}

.badge-crimson {
  background: rgba(229, 9, 20, 0.25);
  color: #ff4d5a;
  border: 1px solid rgba(229, 9, 20, 0.4);
}

.badge-green {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-gold {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.notif-card-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.notif-card-title {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.notif-card-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.45;
}

.notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: clamp(60px, 18vh, 140px);
  text-align: center;
}

.notif-empty-icon svg {
  width: 64px;
  height: 64px;
  opacity: 0.4;
  margin-bottom: 14px;
}

.notif-empty-title {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.notif-empty-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Bell Header Unread Dot Badge */
.notif-unread-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff2a3b;
  box-shadow: 0 0 8px #ff2a3b;
  border: 1.5px solid #000;
  pointer-events: none;
  z-index: 5;
}

.notif-icon-gray {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}

.badge-gray {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.notif-read {
  opacity: 0.72;
}

.notif-read:hover,
.notif-read:focus,
.notif-read.nav-focused {
  opacity: 1;
}

.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  margin: auto;
}

.notif-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #ff3344;
}

.notif-empty-icon svg {
  width: 36px;
  height: 36px;
}

.notif-empty-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 420px;
  margin: 0;
}

/* Notifications Detail Modal */
.notif-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  box-sizing: border-box;
}

.notif-modal-card {
  width: 100%;
  max-width: 600px;
  background: #14161f;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.notif-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notif-modal-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none !important;
}

.notif-modal-close-btn:hover,
.notif-modal-close-btn:focus,
.notif-modal-close-btn.nav-focused {
  background: #e50914 !important;
  border-color: #ffffff !important;
}

.notif-modal-close-btn svg {
  width: 20px;
  height: 20px;
}

.notif-modal-title {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

.notif-modal-body {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 8px;
}

.notif-modal-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.notif-modal-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-modal-ok-btn {
  padding: 10px 24px;
  border-radius: 12px;
  background: #e50914;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  outline: none !important;
}

.notif-modal-ok-btn:hover,
.notif-modal-ok-btn:focus,
.notif-modal-ok-btn.nav-focused {
  background: #ff2a3b !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 42, 59, 0.6) !important;
}


/* ===== TV Settings: no red borders on focus ===== */
html[data-device="tv"] .settings-lang-row,
html[data-device="tv"] .settings-toggle-row,
html[data-device="tv"] .settings-format-row,
html[data-device="tv"] .settings-nav-item,
html[data-device="tv"] .settings-danger-btn,
html[data-device="tv"] .settings-lang-row.nav-focused,
html[data-device="tv"] .settings-toggle-row.nav-focused,
html[data-device="tv"] .settings-format-row.nav-focused,
html[data-device="tv"] .settings-toggle-row:focus,
html[data-device="tv"] .settings-format-row:focus,
html[data-device="tv"] .settings-lang-row:focus,
html[data-device="tv"] .settings-toggle-row:hover,
html[data-device="tv"] .settings-format-row:hover {
  outline: none !important;
  box-shadow: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-color: transparent !important;
}
html[data-device="tv"] .settings-lang-row.nav-focused,
html[data-device="tv"] .settings-toggle-row.nav-focused,
html[data-device="tv"] .settings-format-row.nav-focused {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ===== TV Live EPG mode: categories(hidden) | channels(32%) | player(36%) | EPG(32%, exact same size as channels) ===== */
html[data-device="tv"] .live-screen-container.live-tv-epg-mode .live-col-categories {
  width: 0 !important; min-width: 0 !important; max-width: 0 !important;
  flex: 0 0 0 !important; padding: 0 !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
}
html[data-device="tv"] .live-screen-container.live-tv-epg-mode .live-col-channels {
  width: 32% !important; min-width: 0 !important; max-width: 32% !important;
  flex: 0 0 32% !important;
}
html[data-device="tv"] .live-screen-container.live-tv-epg-mode .live-col-preview {
  width: 36% !important; min-width: 0 !important; max-width: 36% !important;
  flex: 0 0 36% !important;
}
html[data-device="tv"] .live-screen-container.live-tv-epg-mode .live-col-epg-full {
  display: flex !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  width: 32% !important; min-width: 0 !important; max-width: 32% !important;
  flex: 0 0 32% !important;
}

/* ===== TV Mode: Playlists Screen Focus & Selection (Prominent White 2px border & radiant glow) ===== */
html[data-device="tv"] .pl-card-crimson,
body.device-tv .pl-card-crimson {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  outline: none !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  transition: none !important;
  transform: none !important;
}

html[data-device="tv"] .pl-card-crimson.selected,
body.device-tv .pl-card-crimson.selected {
  background: #9b1018 !important;
  border: 2px solid #ffffff !important;
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-device="tv"] .pl-card-crimson:hover,
html[data-device="tv"] .pl-card-crimson:focus,
html[data-device="tv"] .pl-card-crimson.nav-focused,
body.device-tv .pl-card-crimson:hover,
body.device-tv .pl-card-crimson:focus,
body.device-tv .pl-card-crimson.nav-focused {
  background: #bd141f !important;
  border: 2px solid #ffffff !important;
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-device="tv"] .pl-card-crimson.selected:hover,
html[data-device="tv"] .pl-card-crimson.selected:focus,
html[data-device="tv"] .pl-card-crimson.selected.nav-focused,
body.device-tv .pl-card-crimson.selected:hover,
body.device-tv .pl-card-crimson.selected:focus,
body.device-tv .pl-card-crimson.selected.nav-focused {
  background: #c91823 !important;
  border: 2px solid #ffffff !important;
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   In-App Picture-in-Picture (PiP) Floating Mini Player
   ========================================================================== */
.inapp-pip-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: #14141c;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: none !important;
  overflow: hidden;
  z-index: 99999;
  cursor: pointer;
  outline: none !important;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .inapp-pip-container {
  right: auto;
  left: 24px;
}

.inapp-pip-container.inapp-pip-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.inapp-pip-container:hover,
.inapp-pip-container:focus-within,
.inapp-pip-container.nav-focused {
  border: 2px solid #ff3344 !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.inapp-pip-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.inapp-pip-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.inapp-pip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #14141c;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  height: 44px;
  box-sizing: border-box;
  gap: 8px;
}

.inapp-pip-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  letter-spacing: 0.3px;
}

.inapp-pip-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.inapp-pip-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  padding: 0;
}

#inapp-pip-container.pip-active-focus {
  border: 3px solid #ff3b4a !important;
}

.inapp-pip-btn:hover,
.inapp-pip-btn:focus,
.inapp-pip-btn.f,
.inapp-pip-btn.nav-focused {
  background: #ff3b4a !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  transform: scale(1.15) !important;
}

.inapp-pip-btn-close {
  width: 32px;
  height: 32px;
}

@media (max-width: 600px) {
  .inapp-pip-container {
    bottom: 80px;
    right: 12px;
    width: 220px;
  }
  [dir="rtl"] .inapp-pip-container {
    left: 12px;
    right: auto;
  }
}

/* ==========================================================================
   CATEGORY REORDER MODAL (Touch, Desktop & TV D-Pad Accessible)
   ========================================================================== */
.cat-reorder-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
}

.cat-reorder-fade-out {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.cat-reorder-dialog {
  background: linear-gradient(160deg, #1f0508 0%, #120204 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  border-radius: 14px;
  box-shadow: none !important;
  width: 92vw;
  max-width: 520px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.cat-reorder-head {
  margin-bottom: 12px;
}

.cat-reorder-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cat-reorder-main-wrap {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}

.cat-reorder-list-col {
  flex: 1;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

.cat-reorder-list-col::-webkit-scrollbar {
  width: 4px;
}
.cat-reorder-list-col::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.cat-reorder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #e5e5e5;
  border: 1.5px solid transparent;
  outline: none;
  cursor: pointer;
  user-select: none;
  box-shadow: none !important;
  transition: none !important;
}

.cat-reorder-row.is-selected {
  background: #6a0b12 !important;
  border-left: 4px solid #ff3344 !important;
  color: #ffffff !important;
}

.cat-reorder-row.nav-focused {
  border: 2px solid #ff3344 !important;
  outline: none !important;
  box-shadow: none !important;
}

.cat-reorder-row-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.cat-reorder-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.cat-reorder-checkbox.checked {
  background: #ffffff;
  border-color: #ffffff;
}

.cat-reorder-checkbox.checked svg {
  width: 14px;
  height: 14px;
  stroke: #7a0f16;
}

/* 4 Fixed Side Action Buttons - Distinct Dedicated Panel */
.cat-reorder-side-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
  padding: 8px 5px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.cat-reorder-side-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #222530;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

.cat-reorder-side-btn svg {
  width: 22px;
  height: 22px;
  stroke: #e0e0e0;
}

.cat-reorder-side-btn.nav-focused {
  background: #cc1016 !important;
  border: 2.5px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.cat-reorder-side-btn.nav-focused svg {
  stroke: #ffffff !important;
}

/* Footer Buttons */
.cat-reorder-foot {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.cat-reorder-foot-btn {
  min-width: 125px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  background: #252836;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

.cat-reorder-foot-btn.nav-focused {
  background: #ffffff !important;
  color: #8b0000 !important;
  border: 2.5px solid #ff3344 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* RTL layout */
[dir="rtl"] .cat-reorder-main-wrap {
  flex-direction: row-reverse;
}
[dir="rtl"] .cat-reorder-foot {
  flex-direction: row-reverse;
}

/* Sidebar Reorder Category Row (TV & Mobile - Live, VOD & Series) */
.cat-reorder-trigger-row {
  margin: 4px 0 8px 0 !important;
  background: rgba(229, 9, 20, 0.22) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.6) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.cat-reorder-trigger-row:hover,
.cat-reorder-trigger-row.nav-focused,
.cat-reorder-trigger-row:focus {
  background: #e50914 !important;
  border-color: #ff3344 !important;
  color: #ffffff !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4) !important;
}

.cat-reorder-trigger-row .media-cat-title,
.cat-reorder-trigger-row .live-cat-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
}

.cat-reorder-trigger-row svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0;
}

html[data-device="tv"] .cat-reorder-trigger-row {
  min-height: 40px !important;
  max-height: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: rgba(229, 9, 20, 0.25) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.65) !important;
}

html[data-device="tv"] .cat-reorder-trigger-row:hover,
html[data-device="tv"] .cat-reorder-trigger-row.nav-focused,
html[data-device="tv"] .cat-reorder-trigger-row:focus {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0b0f19 !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5) !important;
}

html[data-device="tv"] .cat-reorder-trigger-row:hover .media-cat-title,
html[data-device="tv"] .cat-reorder-trigger-row.nav-focused .media-cat-title,
html[data-device="tv"] .cat-reorder-trigger-row:focus .media-cat-title,
html[data-device="tv"] .cat-reorder-trigger-row:hover .live-cat-name,
html[data-device="tv"] .cat-reorder-trigger-row.nav-focused .live-cat-name,
html[data-device="tv"] .cat-reorder-trigger-row:focus .live-cat-name {
  color: #0b0f19 !important;
  font-weight: 800 !important;
}

html[data-device="tv"] .cat-reorder-trigger-row:hover svg,
html[data-device="tv"] .cat-reorder-trigger-row.nav-focused svg,
html[data-device="tv"] .cat-reorder-trigger-row:focus svg {
  color: #0b0f19 !important;
  stroke: #0b0f19 !important;
}

.cat-reorder-moving-badge {
  font-size: 11px;
  font-weight: 800;
  background: #e50914;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  animation: pulse-grab 1.2s infinite ease-in-out;
  flex-shrink: 0;
  margin: 0 6px;
}

@keyframes pulse-grab {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(0.97); }
}

[dir="rtl"] .cat-reorder-trigger-row {
  text-align: right;
  justify-content: flex-start !important;
}

/* Mobile portrait & landscape optimization for category reorder modal */
@media (max-width: 768px) {
  .cat-reorder-dialog {
    width: 94vw !important;
    max-width: 520px !important;
    padding: 14px 16px !important;
  }
  .cat-reorder-main-wrap {
    gap: 14px !important;
  }
  .cat-reorder-side-actions {
    width: 52px !important;
    padding: 8px 4px !important;
    gap: 8px !important;
  }
  .cat-reorder-side-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .cat-reorder-row {
    padding: 8px 12px !important;
    gap: 10px !important;
  }
}

@media (max-height: 520px) {
  .cat-reorder-overlay {
    padding: 6px !important;
  }
  .cat-reorder-dialog {
    max-height: 96vh !important;
    max-height: 96dvh !important;
    width: 92vw !important;
    max-width: 540px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
  }
  .cat-reorder-head {
    margin-bottom: 8px !important;
  }
  .cat-reorder-title {
    font-size: 14px !important;
  }
  .cat-reorder-main-wrap {
    margin-bottom: 8px !important;
    gap: 14px !important;
  }
  .cat-reorder-list-col {
    max-height: calc(96vh - 105px) !important;
    max-height: calc(96dvh - 105px) !important;
  }
  .cat-reorder-side-actions {
    width: 48px !important;
    gap: 6px !important;
    padding: 6px 3px !important;
  }
  .cat-reorder-side-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .cat-reorder-side-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .cat-reorder-foot {
    gap: 10px !important;
  }
  .cat-reorder-foot-btn {
    height: 34px !important;
    min-width: 100px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   SANSAT OTT — SPORTS MODULE (Partidos del Día / Football Fixtures)
   ========================================================================== */
.sports-screen-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  color: #ffffff;
  overflow: hidden;
  z-index: 10;
}

.sports-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 var(--app-pad-x, 24px) !important;
  height: var(--app-header-h, 56px) !important;
  min-height: var(--app-header-h, 56px) !important;
  max-height: var(--app-header-h, 56px) !important;
  background: transparent !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 20;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.sports-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

.sports-icon-badge {
  display: none !important;
}

.sports-screen-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

[dir="rtl"] .sports-screen-title,
.sports-screen-title.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

.sports-header-date,
.sports-header-date-badge {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-left: 8px;
  white-space: nowrap;
  align-self: center;
}

[dir="rtl"] .sports-header-date,
[dir="rtl"] .sports-header-date-badge {
  margin-left: 0;
  margin-right: 8px;
}

.sports-header-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
  pointer-events: none;
}
[dir="rtl"] .sports-header-clock-badge {
  margin-left: 0;
  margin-right: 8px;
}
.sports-header-clock-badge svg {
  color: #ff3344;
  flex-shrink: 0;
}
.sports-header-clock-badge #sports-clock-time {
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
}
.sports-header-clock-badge .sports-clock-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}
.sports-header-clock-badge #sports-clock-loc {
  color: rgba(255, 255, 255, 0.85);
}

.sports-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* White button with dark red text, border-radius 6px — Zero Red Borders */
.sports-btn-standings,
.sports-btn-transfers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: none !important;
  color: #800008 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sports-btn-standings svg,
.sports-btn-transfers svg {
  width: 14px;
  height: 14px;
  stroke: #800008 !important;
  color: #800008 !important;
  fill: none;
  flex-shrink: 0;
}

/* Hover: Red background, white text and white icon on hover/focus */
.sports-btn-standings:hover,
.sports-btn-transfers:hover,
.sports-btn-standings:focus,
.sports-btn-standings:focus-visible,
.sports-btn-standings.nav-focused,
.sports-btn-transfers:focus,
.sports-btn-transfers:focus-visible,
.sports-btn-transfers.nav-focused,
html[data-device="tv"] .sports-btn-standings:focus,
html[data-device="tv"] .sports-btn-standings:focus-visible,
html[data-device="tv"] .sports-btn-standings.nav-focused,
html[data-device="tv"] .sports-btn-transfers:focus,
html[data-device="tv"] .sports-btn-transfers:focus-visible,
html[data-device="tv"] .sports-btn-transfers.nav-focused,
body.device-tv .sports-btn-standings:focus,
body.device-tv .sports-btn-standings:focus-visible,
body.device-tv .sports-btn-standings.nav-focused,
body.device-tv .sports-btn-transfers:focus,
body.device-tv .sports-btn-transfers:focus-visible,
body.device-tv .sports-btn-transfers.nav-focused {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(229, 9, 20, 0.45) !important;
  transform: none !important;
}

.sports-btn-standings:hover svg,
.sports-btn-transfers:hover svg,
.sports-btn-standings:focus svg,
.sports-btn-standings:focus-visible svg,
.sports-btn-standings.nav-focused svg,
.sports-btn-transfers:focus svg,
.sports-btn-transfers:focus-visible svg,
.sports-btn-transfers.nav-focused svg,
html[data-device="tv"] .sports-btn-standings:focus svg,
html[data-device="tv"] .sports-btn-standings:focus-visible svg,
html[data-device="tv"] .sports-btn-standings.nav-focused svg,
html[data-device="tv"] .sports-btn-transfers:focus svg,
html[data-device="tv"] .sports-btn-transfers:focus-visible svg,
html[data-device="tv"] .sports-btn-transfers.nav-focused svg,
body.device-tv .sports-btn-standings:focus svg,
body.device-tv .sports-btn-standings:focus-visible svg,
body.device-tv .sports-btn-standings.nav-focused svg,
body.device-tv .sports-btn-transfers:focus svg,
body.device-tv .sports-btn-transfers:focus-visible svg,
body.device-tv .sports-btn-transfers.nav-focused svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* White container for date selector with border-radius 6px */
.sports-date-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  height: 32px;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
}

.sports-date-pill {
  height: 26px;
  padding: 0 9px;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #800008 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Active Date Pill (Hoy): Yellow/amber but darker and richer contrast */
.sports-date-pill.active {
  background: rgba(180, 83, 9, 0.22) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #92400e !important;
  font-weight: 800 !important;
}

/* Inactive date pill hover/focus: Red background with white text */
.sports-date-pill:not(.active):hover,
.sports-date-pill:not(.active):focus,
.sports-date-pill:not(.active):focus-visible,
.sports-date-pill:not(.active).nav-focused {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(229, 9, 20, 0.35) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Focus on active date pill: Darker amber shade */
.sports-date-pill.active:hover,
.sports-date-pill.active:focus,
.sports-date-pill.active:focus-visible,
.sports-date-pill.active.nav-focused {
  background: rgba(180, 83, 9, 0.32) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #78350f !important;
  transform: none !important;
}

/* Refresh / Reload Button: White button with dark red icon, border-radius 6px */
.sports-refresh-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
  color: #800008 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sports-refresh-btn svg {
  width: 15px;
  height: 15px;
  stroke: #800008 !important;
}

/* Refresh Button Hover / Focus: Red background with white icon */
.sports-refresh-btn:hover,
.sports-refresh-btn:focus,
.sports-refresh-btn:focus-visible,
.sports-refresh-btn.nav-focused,
html[data-device="tv"] .sports-refresh-btn:focus,
html[data-device="tv"] .sports-refresh-btn:focus-visible,
html[data-device="tv"] .sports-refresh-btn.nav-focused,
body.device-tv .sports-refresh-btn:focus,
body.device-tv .sports-refresh-btn:focus-visible,
body.device-tv .sports-refresh-btn.nav-focused {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(229, 9, 20, 0.45) !important;
  color: #ffffff !important;
  transform: none !important;
}

.sports-refresh-btn:hover svg,
.sports-refresh-btn:focus svg,
.sports-refresh-btn:focus-visible svg,
.sports-refresh-btn.nav-focused svg,
html[data-device="tv"] .sports-refresh-btn:focus svg,
html[data-device="tv"] .sports-refresh-btn:focus-visible svg,
html[data-device="tv"] .sports-refresh-btn.nav-focused svg,
body.device-tv .sports-refresh-btn:focus svg,
body.device-tv .sports-refresh-btn:focus-visible svg,
body.device-tv .sports-refresh-btn.nav-focused svg {
  stroke: #ffffff !important;
}

.sports-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vh, 24px) var(--app-pad-r, 24px) 70px var(--app-pad-x, 24px) !important;
  scrollbar-width: thin;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sports-loading-state,
.sports-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.sports-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #e50914;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.sports-leagues-list {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.sports-league-section {
  margin-bottom: 26px;
}

.sports-league-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 2px;
  border-bottom: none !important;
}

.sports-league-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sports-league-badge-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.sports-league-accent {
  width: 4px;
  height: 18px;
  background: #e50914;
  border-radius: 2px;
}

.sports-league-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.sports-league-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.sports-matches-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sports-match-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #140508;
  border: 1.5px solid #2d0b12;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: none;
}

.sports-match-card:hover,
.sports-match-card:focus,
.sports-match-card.nav-focused {
  background: #1c080d !important;
  border: 2px solid #ff1e2d !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

.sports-card-team {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.sports-card-home {
  justify-content: flex-end;
  text-align: right;
}

.sports-card-away {
  justify-content: flex-start;
  text-align: left;
}

.sports-card-team-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sports-card-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.sports-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(160px, 24vw, 300px);
  gap: 5px;
  padding: 0 12px;
  flex-shrink: 0;
}

.sports-match-time {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.sports-match-score-badge {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  background: #250910;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sports-match-live-badge {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  background: #e50914;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sports-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: spin 1.2s infinite;
}

.sports-live-minute {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 4px;
  letter-spacing: 0.3px;
}

.sports-card-channel-pill {
  font-size: 12px;
  color: #ff9aa2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(229, 9, 20, 0.12);
  padding: 3px 11px;
  border-radius: 8px;
  border: 1px solid rgba(229, 9, 20, 0.3);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sports-card-channel-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* MATCH DETAILS MODAL */
.sports-match-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  box-sizing: border-box;
}

.sports-match-modal-card {
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  border: 1.5px solid #850d12;
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
}

.sports-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent !important;
}

.sports-modal-league-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sports-modal-league-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sports-modal-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: none;
}

.sports-modal-close-btn:hover,
.sports-modal-close-btn:focus,
.sports-modal-close-btn.nav-focused {
  background: #e50914 !important;
  border-color: #ff2a4b !important;
  box-shadow: none !important;
  transform: none !important;
}

.sports-modal-league-badge {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.sports-modal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(180deg, #1f080e 0%, #140508 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sports-modal-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  text-align: center;
}

.sports-modal-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.sports-modal-team-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sports-modal-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 90px;
}

.sports-modal-time {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.sports-modal-status-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.sports-modal-status-badge.is-live {
  background: #e50914;
  color: #ffffff;
  font-weight: 700;
}

.sports-modal-status-badge.is-finished {
  background: #250910;
  color: rgba(255, 255, 255, 0.8);
}

/* 2-COLUMN METADATA GRID: Compact so all 6 rows fit with ZERO vertical scrolling */
.sports-modal-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
  padding: 8px 14px;
  box-sizing: border-box;
}

.sports-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  min-height: 26px;
  box-sizing: border-box;
  overflow: hidden;
}

.sports-meta-row-highlight {
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.35);
}

.sports-meta-lbl {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 6px;
}

.sports-meta-val {
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sports-val-channel {
  color: #ff3344;
  font-weight: 800;
  font-size: 11px;
}

.sports-modal-actions {
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a080d;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.sports-modal-watch-btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #e50914;
  border: 2px solid #e50914;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: none;
  transition: none;
  white-space: nowrap;
}

.sports-modal-watch-btn:hover,
.sports-modal-watch-btn:focus,
.sports-modal-watch-btn.nav-focused {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #850d12 !important;
  box-shadow: none !important;
  transform: none !important;
}

.sports-modal-watch-btn.is-disabled,
.sports-modal-watch-btn:disabled,
.sports-modal-watch-btn[disabled="true"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* RTL & Cairo Typography for Sports */
.ar-font,
[dir="rtl"] .sports-screen-wrap,
[dir="rtl"] .sports-top-bar,
[dir="rtl"] .sports-screen-title,
[dir="rtl"] .sports-league-header,
[dir="rtl"] .sports-league-name,
[dir="rtl"] .sports-match-card,
[dir="rtl"] .sports-match-modal-card,
[dir="rtl"] .sports-date-pill,
[dir="rtl"] .sports-card-team-name,
[dir="rtl"] .sports-modal-team-name,
[dir="rtl"] .sports-meta-lbl,
[dir="rtl"] .sports-meta-val {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[dir="rtl"] .sports-card-home,
.sports-screen-wrap.rtl-layout .sports-card-home {
  justify-content: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] .sports-card-away,
.sports-screen-wrap.rtl-layout .sports-card-away {
  justify-content: flex-start !important;
  text-align: left !important;
}

html[dir="rtl"] .sports-header-date-badge,
.sports-screen-wrap.rtl-layout .sports-header-date-badge {
  margin-left: 0;
  margin-right: 8px;
}

/* TV DEVICE OPTIMIZATION */
html[data-device="tv"] .sports-top-bar,
body.device-tv .sports-top-bar {
  padding: 0 54px !important;
  min-height: 68px !important;
}
html[data-device="tv"] .sports-content-scroll,
body.device-tv .sports-content-scroll {
  padding-left: 54px !important;
  padding-right: 54px !important;
  padding-top: 18px !important;
  padding-bottom: 70px !important;
}
html[data-device="tv"] .sports-match-card,
body.device-tv .sports-match-card {
  padding: 14px 24px !important;
  border-radius: 14px !important;
  background: #140508 !important;
  border: 1.5px solid #2d0b12 !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}
html[data-device="tv"] .sports-match-card:hover,
html[data-device="tv"] .sports-match-card:focus,
html[data-device="tv"] .sports-match-card.nav-focused,
body.device-tv .sports-match-card:hover,
body.device-tv .sports-match-card:focus,
body.device-tv .sports-match-card.nav-focused {
  background: #240a11 !important;
  border: 2.5px solid #ff1e2d !important;
  box-shadow: 0 0 20px rgba(255, 30, 45, 0.5) !important;
  transform: scale(1.012) !important;
  outline: none !important;
}
html[data-device="tv"] .sports-date-pills,
body.device-tv .sports-date-pills {
  height: 34px !important;
  border-radius: 6px !important;
}
html[data-device="tv"] .sports-date-pill,
body.device-tv .sports-date-pill {
  padding: 0 13px !important;
  font-size: 11.5px !important;
  border-radius: 4px !important;
  height: 28px !important;
}
html[data-device="tv"] .sports-btn-standings,
body.device-tv .sports-btn-standings,
html[data-device="tv"] .sports-btn-transfers,
body.device-tv .sports-btn-transfers {
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  height: 34px !important;
  background: #ffffff !important;
  color: #800008 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-device="tv"] .sports-refresh-btn,
body.device-tv .sports-refresh-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #800008 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-device="tv"] .sports-card-team-name,
body.device-tv .sports-card-team-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
html[data-device="tv"] .sports-card-logo,
body.device-tv .sports-card-logo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
}
html[data-device="tv"] .sports-card-center,
body.device-tv .sports-card-center {
  min-width: 210px !important;
  padding: 0 18px !important;
  gap: 6px !important;
}
html[data-device="tv"] .sports-match-time,
html[data-device="tv"] .sports-match-score-badge,
body.device-tv .sports-match-time,
body.device-tv .sports-match-score-badge {
  font-size: 18px !important;
  font-weight: 800 !important;
}
html[data-device="tv"] .sports-card-channel-pill,
body.device-tv .sports-card-channel-pill {
  font-size: 13.5px !important;
  max-width: 380px !important;
  padding: 4px 16px !important;
  border-radius: 8px !important;
  background: rgba(229, 9, 20, 0.15) !important;
  border: 1px solid rgba(229, 9, 20, 0.35) !important;
}

/* MOBILE RESPONSIVE PARITY */
html:not([data-device="tv"]) .sports-top-bar .pl-top-logo,
html:not([data-device="tv"]) .sports-top-bar .pl-top-sep {
  display: none !important;
}

@media (max-width: 900px) {
  .sports-top-bar {
    padding: 0 var(--app-pad-x, 24px) !important;
    gap: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .sports-header-left {
    gap: 12px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
  }
  .sports-screen-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(20px, 2.4vw, 24px) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  [dir="rtl"] .sports-screen-title,
  .sports-screen-title.ar-font {
    font-family: 'Tajawal', sans-serif !important;
  }
  .sports-header-date,
  .sports-header-date-badge {
    display: none !important;
  }
  .sports-header-right {
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .sports-btn-standings,
  .sports-btn-transfers {
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }
  .sports-btn-standings svg,
  .sports-btn-transfers svg {
    width: 13px !important;
    height: 13px !important;
  }
  .sports-date-pills {
    height: 30px !important;
    padding: 1px !important;
    gap: 1px !important;
    border-radius: 6px !important;
  }
  .sports-date-pill {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    border-radius: 4px !important;
  }
  .sports-refresh-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  .sports-refresh-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  .sports-content-scroll {
    padding: 12px var(--app-pad-r, 24px) 70px var(--app-pad-x, 24px) !important;
  }
  .sports-match-card {
    padding: 11px 14px !important;
  }
  .sports-card-team-name {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .sports-card-logo {
    width: 32px !important;
    height: 32px !important;
  }
  .sports-card-center {
    min-width: clamp(140px, 28vw, 300px) !important;
    padding: 0 8px !important;
  }
  .sports-match-time {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .sports-match-score-badge {
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .sports-match-live-badge {
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }
  .sports-card-channel-pill {
    font-size: 12px !important;
    max-width: 290px !important;
    padding: 3px 10px !important;
  }
  .sports-card-channel-pill svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  .sports-standings-tabs {
    padding: 8px 10px !important;
    gap: 8px !important;
    background: #ffffff !important;
  }
  .sports-standings-tab {
    padding: 5px 10px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #800008 !important;
  }
  .sports-standings-tab.active {
    color: #d48800 !important;
    background: transparent !important;
  }
  .sports-tab-league-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 600px) {
  .sports-top-bar {
    padding: 0 var(--app-pad-r, 24px) 0 var(--app-pad-x, 24px) !important;
    gap: 5px !important;
  }
  .sports-content-scroll {
    padding-left: var(--app-pad-x, 24px) !important;
    padding-right: var(--app-pad-r, 24px) !important;
  }
  .sports-card-team-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .sports-card-logo {
    width: 28px !important;
    height: 28px !important;
  }
  .sports-card-center {
    min-width: clamp(110px, 34vw, 210px) !important;
    padding: 0 4px !important;
  }
  .sports-card-channel-pill {
    font-size: 11px !important;
    max-width: 210px !important;
    padding: 2px 7px !important;
  }
  .sports-header-left {
    gap: 8px !important;
  }
  .sports-screen-title {
    font-size: 18px !important;
    max-width: 140px !important;
  }
  .sports-header-right {
    gap: 3px !important;
  }
  .sports-btn-standings,
  .sports-btn-transfers {
    padding: 0 6px !important;
    font-size: 10px !important;
    gap: 2px !important;
  }
  .sports-date-pills {
    height: 28px !important;
  }
  .sports-date-pill {
    height: 24px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
  }
  .sports-refresh-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .sports-refresh-btn svg {
    width: 13px !important;
    height: 13px !important;
  }
}

.sports-league-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
  border-bottom: none !important;
}

.sports-league-standings-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(229, 9, 20, 0.14);
  border: 1px solid rgba(229, 9, 20, 0.35);
  color: #ff4455;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: none;
}

.sports-league-standings-pill:hover,
.sports-league-standings-pill:focus,
.sports-league-standings-pill.nav-focused {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #850d12 !important;
  box-shadow: none !important;
  transform: none !important;
}

.sports-standings-modal-overlay {
  position: fixed;
  inset: 0;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 10001;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.sports-standings-modal-card {
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sports-standings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--app-pad-x, 24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent !important;
}

.sports-standings-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ff3344;
}

.sports-standings-header-title h3 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}

[dir="rtl"] .sports-standings-header-title h3,
.sports-standings-header-title h3.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

.sports-standings-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px clamp(20px, 3.5vw, 40px) !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sports-standings-tabs::-webkit-scrollbar {
  display: none;
}

.sports-standings-tab {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  color: #800008 !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.sports-tab-league-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.95;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sports-tab-league-name {
  pointer-events: none;
}

.sports-standings-tab:hover {
  color: #550005 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.sports-standings-tab:hover .sports-tab-league-icon {
  opacity: 1;
}

/* Active tab: yellow / golden amber text color (darker tone) */
.sports-standings-tab.active {
  background: transparent !important;
  border: none !important;
  color: #92400e !important;
  font-weight: 800;
}

.sports-standings-tab.active .sports-tab-league-icon {
  opacity: 1;
  transform: scale(1.1);
}

.sports-standings-tab:not(.active):hover,
.sports-standings-tab:not(.active):focus,
.sports-standings-tab:not(.active).nav-focused {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.sports-standings-tab.active:hover,
.sports-standings-tab.active:focus,
.sports-standings-tab.active.nav-focused {
  background: rgba(180, 83, 9, 0.22) !important;
  border: none !important;
  color: #78350f !important;
}

.sports-standings-body {
  flex: 1;
  padding: 16px 32px 36px;
  overflow-y: auto;
  max-height: none !important;
  box-sizing: border-box;
}

.sports-standings-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.sports-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.sports-standings-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}

.sports-standings-tbl th {
  padding: 7px 5px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  text-transform: uppercase;
}

.sports-standings-tbl th.th-rank {
  width: 36px;
}

.sports-standings-tbl th.th-team {
  text-align: left;
  padding-left: 10px;
}

[dir="rtl"] .sports-standings-tbl th.th-team {
  text-align: right;
  padding-left: 5px;
  padding-right: 10px;
}

.sports-standings-tbl th.th-stat {
  width: 38px;
}

.sports-standings-tbl th.th-pts {
  width: 44px;
  color: #ff3344;
}

.sports-standings-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  outline: none;
  transition: none;
}

.sports-standings-row:hover,
.sports-standings-row:focus,
.sports-standings-row.nav-focused {
  background: rgba(229, 9, 20, 0.2) !important;
  outline: 1.5px solid #e50914 !important;
  box-shadow: none !important;
}

.sports-standings-row td {
  padding: 6px 5px;
  vertical-align: middle;
  color: #ffffff;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 800;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

.zone-ucl .rank-badge {
  background: #0055ff;
  color: #ffffff;
}

.zone-uel .rank-badge {
  background: #ff8800;
  color: #ffffff;
}

.zone-rel .rank-badge {
  background: #850d12;
  color: #ff8888;
}

.td-team {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px !important;
}

[dir="rtl"] .td-team {
  text-align: right;
  padding-left: 5px !important;
  padding-right: 10px !important;
}

.standings-team-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.standings-team-name {
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standings-live-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #ff3344;
  letter-spacing: 0.5px;
  animation: livePulse 1.2s infinite ease-in-out;
}

[dir="rtl"] .standings-live-tag,
.ar-font .standings-live-tag {
  margin-left: 0;
  margin-right: 6px;
}

.td-stat {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.td-stat.text-pos {
  color: #4ade80;
  font-weight: 700;
}

.td-stat.text-neg {
  color: #f87171;
  font-weight: 700;
}

.td-pts {
  font-weight: 900;
  font-size: 13px;
  color: #ff3344;
}

.sports-standings-empty {
  text-align: center;
  padding: 30px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

html:not([data-device="tv"]) .live-preview-actions #live-btn-fullscreen,
body:not(.device-tv) .live-preview-actions #live-btn-fullscreen {
  display: none !important;
}

/* Secondary Stats Sub-Bar (Clasificación, Pichichi, Asistencias, Noticias) */
.sports-stats-subbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(20px, 3.5vw, 40px) !important;
  background: #900a12 !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.3) !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sports-stats-subbar::-webkit-scrollbar {
  display: none;
}

.sports-stats-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.sports-stats-subtab:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* Active subtab: NO background, NO border, yellow text */
.sports-stats-subtab.active {
  background: transparent !important;
  border: none !important;
  color: #ffd700 !important;
  font-weight: 800 !important;
}

.sports-stats-subtab:focus,
.sports-stats-subtab.nav-focused {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.sports-stats-subtab.active:focus,
.sports-stats-subtab.active.nav-focused {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: #ffd700 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Leaders / Pichichi & Assists Table Styles */
.sports-leaders-tbl th.th-player {
  text-align: left;
  padding-left: 12px;
}
.sports-leaders-tbl th.th-club {
  text-align: left;
  padding-left: 8px;
}
.sports-leaders-tbl th.th-stat {
  text-align: center;
  width: 70px;
}
.sports-leaders-tbl th.th-highlight {
  color: #ff4455;
  font-weight: 800;
}

.sports-leader-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s ease;
}
.sports-leader-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.sports-leader-row:focus,
.sports-leader-row.nav-focused {
  background: rgba(255, 255, 255, 0.12) !important;
  outline: 1px solid rgba(229, 9, 20, 0.6) !important;
}

.sports-leader-player-box {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 6px 12px;
}
.sports-leader-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.sports-leader-player-name {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
}

.sports-leader-club-box {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 6px 8px;
}
.sports-leader-club-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.sports-leader-club-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.sports-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.sports-rank-badge.rank-1 {
  background: #ffd700;
  color: #000000;
}
.sports-rank-badge.rank-2 {
  background: #d8d8d8;
  color: #000000;
}
.sports-rank-badge.rank-3 {
  background: #cd7f32;
  color: #ffffff;
}
.sports-rank-badge.rank-num {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.td-matches {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.sports-stat-pill {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(229, 9, 20, 0.2);
  border: 1px solid rgba(229, 9, 20, 0.4);
  border-radius: 12px;
  color: #ff4455;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
}

[dir="rtl"] .sports-leaders-tbl th.th-player,
[dir="rtl"] .sports-leaders-tbl th.th-club,
.ar-font .sports-leaders-tbl th.th-player,
.ar-font .sports-leaders-tbl th.th-club {
  text-align: right !important;
  padding-right: 12px;
  padding-left: 0;
}

[dir="rtl"] .sports-leader-player-box,
[dir="rtl"] .sports-leader-club-box,
.ar-font .sports-leader-player-box,
.ar-font .sports-leader-club-box {
  text-align: right !important;
  direction: rtl !important;
}

/* NEWS LIST TABLE (TITLES ONLY, NO PHOTOS) */
.sports-news-table-wrap {
  width: 100%;
  padding: 8px 6px 24px;
  box-sizing: border-box;
}

.sports-news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sports-news-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #140508;
  border: 1.5px solid #2d0b12;
  border-radius: 10px;
  cursor: pointer;
  outline: none !important;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.sports-news-row:hover,
.sports-news-row:focus,
.sports-news-row.nav-focused {
  background: #250910 !important;
  border-color: #e50914 !important;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35) !important;
  transform: translateX(4px);
}

[dir="rtl"] .sports-news-row:hover,
[dir="rtl"] .sports-news-row:focus,
[dir="rtl"] .sports-news-row.nav-focused {
  transform: translateX(-4px);
}

.sports-news-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 155px;
}

.sports-news-row-badge {
  background: rgba(229, 9, 20, 0.2);
  border: 1px solid rgba(229, 9, 20, 0.5);
  color: #ff9aa2;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.sports-news-row-date {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  white-space: nowrap;
}

.sports-news-row-body {
  flex: 1;
  min-width: 0;
}

.sports-news-row-headline {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sports-news-row-action {
  flex-shrink: 0;
}

.sports-news-row-arrow {
  color: #e50914;
  font-size: 16px;
  font-weight: 700;
}

/* 2-COLUMN SPLIT NEWS MODAL (FULL PAGE 100VW x 100VH) */
.sports-news-modal-overlay {
  position: fixed;
  inset: 0;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  z-index: 10002;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.sports-news-modal-card {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.sports-news-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sports-news-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #ff4455;
  margin: 0;
}

.sports-news-scroll-hint {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sports-news-split-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* LTR layout: Image on Left (42%), Text on Right (58%) */
.sports-news-split-img-box {
  flex: 0 0 42%;
  position: relative;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1.5px solid rgba(255, 255, 255, 0.08);
}

.sports-news-img-backdrop {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.35);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 0;
}

.sports-news-split-hero {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.sports-news-split-hero[src*="teamlogos"],
.sports-news-split-hero[src*="leaguelogos"],
.sports-news-split-hero[src*="football-logos"],
.sports-news-split-hero[src*="ui/teams"] {
  object-fit: contain !important;
  max-width: 60% !important;
  max-height: 60% !important;
  margin: auto !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

.sports-news-split-img-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
}

[dir="rtl"] .sports-news-split-img-overlay,
.sports-news-modal-card.ar-mode .sports-news-split-img-overlay {
  left: auto;
  right: 14px;
}

/* Full Article Story (la noticia completa en el otro lado) */
.sports-news-split-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 36px;
  overflow: hidden;
  background: transparent !important;
}

.sports-news-modal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.sports-news-modal-headline {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 12px 0 8px;
}

.sports-news-story-wrap {
  flex: 1;
  overflow-y: auto;
  margin: 12px 0;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: #e50914 transparent;
  scroll-behavior: smooth;
  outline: none !important;
  border: none !important;
}

.sports-news-story-wrap,
.sports-news-story-wrap:focus,
.sports-news-story-wrap:focus-visible,
.sports-news-story-wrap.nav-focused,
.sports-news-story-wrap * {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.sports-news-story-wrap::-webkit-scrollbar {
  width: 6px;
}
.sports-news-story-wrap::-webkit-scrollbar-thumb {
  background: #e50914;
  border-radius: 4px;
}
.sports-news-story-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.sports-news-modal-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  margin: 0;
}

.sports-news-paragraph {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  margin: 0 0 16px 0;
  text-align: left;
}

/* ========================================================
   ARABIC (RTL) FULL-PAGE NEWS LAYOUT (Cairo font & Right-aligned)
   ======================================================== */
[dir="rtl"] .sports-news-split-container,
.sports-news-modal-card.ar-mode .sports-news-split-container {
  flex-direction: row-reverse !important;
}

[dir="rtl"] .sports-news-split-img-box,
.sports-news-modal-card.ar-mode .sports-news-split-img-box {
  border-right: none !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

[dir="rtl"] .sports-news-split-info-box,
.sports-news-modal-card.ar-mode .sports-news-split-info-box {
  direction: rtl !important;
  text-align: right !important;
}

[dir="rtl"] .sports-news-modal-headline,
.sports-news-modal-card.ar-mode .sports-news-modal-headline {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: right !important;
  direction: rtl !important;
}

[dir="rtl"] .sports-news-modal-meta,
.sports-news-modal-card.ar-mode .sports-news-modal-meta {
  font-family: 'Tajawal', sans-serif !important;
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

[dir="rtl"] .sports-news-paragraph,
.sports-news-modal-card.ar-mode .sports-news-paragraph,
.sports-news-paragraph.ar-font {
  font-family: 'Tajawal', -apple-system, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
  text-align: right !important;
  direction: rtl !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 18px 0 !important;
}

[dir="rtl"] .sports-news-story-wrap,
.sports-news-modal-card.ar-mode .sports-news-story-wrap {
  padding-right: 0 !important;
  padding-left: 14px !important;
  direction: rtl !important;
}

[dir="rtl"] .sports-news-modal-title,
.sports-news-modal-card.ar-mode .sports-news-modal-title,
[dir="rtl"] .sports-news-scroll-hint,
.sports-news-modal-card.ar-mode .sports-news-scroll-hint,
[dir="rtl"] .sports-news-close-btn,
.sports-news-modal-card.ar-mode .sports-news-close-btn,
[dir="rtl"] .sports-news-modal-headline,
.sports-news-modal-card.ar-mode .sports-news-modal-headline,
[dir="rtl"] .sports-news-modal-meta,
.sports-news-modal-card.ar-mode .sports-news-modal-meta {
  font-family: 'Tajawal', sans-serif !important;
  text-align: right !important;
  direction: rtl !important;
}

.sports-news-split-footer {
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

[dir="rtl"] .sports-news-split-footer,
.sports-news-modal-card.ar-mode .sports-news-split-footer {
  justify-content: flex-start !important;
}

.sports-news-close-btn {
  padding: 8px 22px;
  border-radius: 8px;
  background: #e50914;
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none !important;
  transition: all 0.15s ease;
}

.sports-news-close-btn:hover,
.sports-news-close-btn:focus,
.sports-news-close-btn.nav-focused {
  background: #ffffff !important;
  color: #850d12 !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4) !important;
}

/* ========================================================
   RESPONSIVE NEWS MODAL (Mobile Portrait & Landscape)
   ======================================================== */
/* Landscape mode (Mobile phones held horizontally, tablets, TV): Clean 2-column split */
@media (orientation: landscape) and (max-height: 560px) {
  .sports-news-modal-header {
    padding: 8px var(--app-pad-x, 24px) !important;
    min-height: 44px !important;
  }
  .sports-news-split-container {
    flex-direction: row !important;
    height: calc(100vh - 44px) !important;
    max-height: calc(100vh - 44px) !important;
    overflow: hidden !important;
  }
  .sports-news-split-img-box {
    flex: 0 0 35% !important;
    width: 35% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-bottom: none !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  }
  [dir="rtl"] .sports-news-split-img-box,
  .sports-news-modal-card.ar-mode .sports-news-split-img-box {
    border-right: none !important;
    border-left: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  }
  .sports-news-split-info-box {
    flex: 1 1 65% !important;
    width: 65% !important;
    height: 100% !important;
    padding: 12px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .sports-news-modal-headline {
    font-size: 18px !important;
    margin: 4px 0 6px !important;
    line-height: 1.25 !important;
  }
  .sports-news-modal-meta {
    font-size: 11px !important;
  }
  .sports-news-story-wrap {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding-right: 8px !important;
  }
  .sports-news-paragraph {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 10px !important;
  }
  /* In short landscape, hide the redundant bottom button since [X] is in header */
  .sports-news-split-footer {
    display: none !important;
  }
}

/* Portrait mode: single vertical natural scrolling layout */
@media (max-width: 640px) and (orientation: portrait) {
  .sports-news-modal-header {
    padding: 10px 16px !important;
  }
  .sports-news-scroll-hint {
    display: none !important;
  }
  .sports-news-split-container {
    flex-direction: column !important;
    height: calc(100vh - 50px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sports-news-split-img-box {
    flex: 0 0 180px !important;
    height: 180px !important;
    min-height: 180px !important;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  }
  .sports-news-split-info-box {
    flex: 1 0 auto !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 16px 16px 40px !important;
    box-sizing: border-box !important;
  }
  .sports-news-modal-headline {
    font-size: 20px !important;
    margin: 8px 0 10px !important;
  }
  .sports-news-story-wrap {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .sports-news-paragraph {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  .sports-news-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sports-news-row-headline {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}






/* =========================================================================
   SPORTS ACCESS RESTRICTION / TRIAL PURCHASE MODAL (2-ROW LUXURY DESIGN)
   ========================================================================= */
.sansat-sports-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(4, 1, 3, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: sportsLockFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sportsLockFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.sansat-sports-lock-card {
  width: 92vw;
  max-width: 800px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(110% 120% at 50% 0%, #1a0b10 0%, #0d0407 55%, #050203 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 0, 0, 0.7);
  padding: 28px 34px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
}

.sansat-sports-lock-card.ar-font,
.sansat-sports-lock-card[dir="rtl"] {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
}

.sports-lock-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 9, 20, 0.18) 0%, rgba(20, 4, 8, 0.6) 80%);
  border: 1.5px solid rgba(229, 9, 20, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 24px rgba(229, 9, 20, 0.2);
  color: #ff3344;
}

.sports-lock-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.sports-lock-msg {
  font-size: 15px;
  font-weight: 600;
  color: #ff8595;
  margin: 0 0 6px 0;
  line-height: 1.4;
  max-width: 660px;
}

.sports-lock-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: #9aa0a6;
  margin: 0 0 20px 0;
  line-height: 1.4;
  max-width: 620px;
}

/* 2 Distinct Rows Layout */
.sports-lock-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sports-lock-row {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 18px;
  box-sizing: border-box;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sansat-sports-lock-card[dir="rtl"] .sports-lock-row {
  text-align: right;
}

.sports-lock-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}

.sports-lock-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sports-lock-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e50914;
}

.sports-lock-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f3f7;
  letter-spacing: 0.2px;
}

.sports-lock-row-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: center;
}

.sports-lock-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sports-lock-item-label {
  font-size: 11px;
  font-weight: 500;
  color: #8b929d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sports-lock-item-value {
  font-size: 13px;
  font-weight: 600;
  color: #f1f3f7;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sports-lock-val-whatsapp {
  color: #25d366;
  font-weight: 700;
}

.sports-lock-val-email {
  color: #e0e5ed;
}

.sports-lock-val-web {
  color: #4da3ff;
}

.sports-lock-chip-mono {
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e0e6ed;
  font-size: 12px;
  letter-spacing: 0.5px;
  display: inline-block;
  width: fit-content;
}

.sports-lock-chip-gold {
  color: #ffd54f;
  border-color: rgba(255, 213, 79, 0.25);
  background: rgba(255, 213, 79, 0.06);
}

.sports-lock-tag-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
  border: 1px solid rgba(255, 152, 0, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  width: fit-content;
}

.sports-lock-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb74d;
  box-shadow: 0 0 6px #ffb74d;
  animation: sportsLockPulse 1.8s infinite;
}

@keyframes sportsLockPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

/* Actions: Small centered pill button */
.sports-lock-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.sports-lock-btn {
  background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
  color: #ffffff;
  border: 1.5px solid transparent;
  padding: 10px 32px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35);
  width: auto !important;
  min-width: 170px;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
}

.sports-lock-btn:focus,
.sports-lock-btn.focused,
.sports-lock-btn:hover {
  background: linear-gradient(135deg, #ff1f2d 0%, #d40813 100%);
  border-color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 6px 20px rgba(229, 9, 20, 0.6);
}

/* Responsive for TV & Mobile */
@media (max-height: 600px), (max-width: 900px) {
  .sansat-sports-lock-overlay {
    padding: 8px !important;
    overflow-y: auto !important;
  }
  .sansat-sports-lock-card {
    padding: 12px 18px !important;
    max-height: 98vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
  }
  .sansat-sports-lock-card:focus,
  .sansat-sports-lock-card:focus-visible,
  .sansat-sports-lock-card.nav-focused {
    outline: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
  }
  .sports-lock-hero-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 4px !important;
  }
  .sports-lock-hero-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .sports-lock-title {
    font-size: 17px !important;
    margin-bottom: 2px !important;
  }
  .sports-lock-msg {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }
  .sports-lock-sub {
    font-size: 11.5px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }
  .sports-lock-rows {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  .sports-lock-row {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .sports-lock-row-header {
    padding-bottom: 3px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .sports-lock-row-title {
    font-size: 12.5px !important;
  }
  .sports-lock-row-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .sports-lock-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .sports-lock-item-label {
    font-size: 11.5px !important;
  }
  .sports-lock-item-value {
    font-size: 12.5px !important;
  }
  .sports-lock-chip-mono {
    font-size: 12px !important;
    padding: 2px 7px !important;
  }
  .sports-lock-tag-trial {
    font-size: 11.5px !important;
    padding: 2px 7px !important;
  }
  .sports-lock-actions {
    margin-top: 8px !important;
  }
  .sports-lock-btn {
    padding: 6px 24px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    border-radius: 9999px !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.35) !important;
  }
}

@media (max-width: 540px) and (min-height: 601px) {
  .sports-lock-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

html[data-device="mobile"] .sansat-sports-lock-overlay {
  padding: 8px !important;
  overflow-y: auto !important;
}

html[data-device="mobile"] .sansat-sports-lock-card {
  max-height: 98vh !important;
  padding: 12px 18px !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}

html[data-device="mobile"] .sports-lock-rows {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html[data-device="mobile"] .sports-lock-row-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html[data-device="mobile"] .sports-lock-item {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

html[data-device="mobile"] .sports-lock-btn {
  width: auto !important;
  min-width: 140px !important;
  max-width: 200px !important;
  margin: 6px auto 0 auto !important;
  padding: 6px 24px !important;
  font-size: 13px !important;
  min-height: 32px !important;
}

/* ==========================================================================
   SANSAT OTT — SPORTS TRANSFERS MODAL (Mercado de Fichajes / YSscores Live)
   Ultra-Fast TV Architecture: Zero Gradients, Zero Shadows, Zero Transitions
   ========================================================================== */
.sports-transfers-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 10001;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.sports-transfers-modal-card {
  background: #000000 !important;
  background-image: var(--app-bg-gradient) !important;
  background-attachment: fixed !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header: Same high-contrast header as Clasificación */
.sports-transfers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--app-pad-x, 24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent !important;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.sports-transfers-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ff3344;
}

.sports-transfers-header-title h3 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}

[dir="rtl"] .sports-transfers-header-title h3,
.sports-transfers-header-title h3.ar-font {
  font-family: 'Tajawal', sans-serif !important;
}

/* League Selector Bar: EXACT same menu banner as Clasificación */
.sports-transfers-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px clamp(20px, 3.5vw, 40px) !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.sports-transfers-tabs::-webkit-scrollbar {
  display: none;
}

.sports-transfers-tab {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  color: #800008 !important;
  font-family: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px !important;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.sports-transfers-tab .sports-tab-league-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.95;
}

.sports-transfers-tab.active {
  background: transparent !important;
  border: none !important;
  color: #92400e !important;
  font-weight: 800;
}

.sports-transfers-tab.active .sports-tab-league-icon {
  opacity: 1;
}

.sports-transfers-tab:not(.active):hover,
.sports-transfers-tab:not(.active):focus,
.sports-transfers-tab:not(.active).nav-focused {
  background: #e50914 !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
}

.sports-transfers-tab.active:hover,
.sports-transfers-tab.active:focus,
.sports-transfers-tab.active.nav-focused {
  background: rgba(180, 83, 9, 0.22) !important;
  border: none !important;
  color: #78350f !important;
}

/* Transfers Content Body: Instant TV rendering, hardware accelerated */
.sports-transfers-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px clamp(16px, 3.5vw, 40px) 36px;
  scrollbar-width: thin;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.sports-transfers-section-block {
  margin-bottom: 20px;
}

.sports-transfers-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sports-transfers-sec-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sports-transfers-sec-bar.bar-purple {
  background: #6366f1;
}

.sports-transfers-sec-bar.bar-teal {
  background: #10b981;
}

.sports-transfers-section-head h4 {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.sports-transfers-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Performant TV Transfer Cards: Zero lag, zero reflow */
.sports-transfer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-radius: 8px;
  background: #180509;
  border: 1px solid #2d0912;
  cursor: pointer;
  outline: none;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative;
}

.sports-transfer-card.is-important {
  background: #1c0816;
  border: 1px solid #481228;
}

.sports-transfer-card:focus,
.sports-transfer-card.nav-focused {
  background: #2a0812 !important;
  border-color: #ff2a4b !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.sports-transfer-card.is-important:focus,
.sports-transfer-card.is-important.nav-focused {
  background: #2e091b !important;
  border-color: #ff2a4b !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Player Column */
.transfer-player-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.transfer-player-avatar-box {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transfer-player-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
}

.transfer-origin-badge {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: hidden;
}

[dir="rtl"] .transfer-origin-badge,
.sports-transfers-modal-card.rtl-mode .transfer-origin-badge {
  left: auto !important;
  right: -2px !important;
}

.transfer-origin-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.transfer-origin-free {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transfer-player-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.transfer-player-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transfer-player-meta-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.transfer-player-pos {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.transfer-origin-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.transfer-origin-label strong {
  color: #fca5a5;
  font-weight: 700;
}

/* Badge Column */
.transfer-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  flex-shrink: 0;
}

.transfer-type-pill {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.transfer-type-pill.pill-standard {
  background: #1d4ed8;
  color: #ffffff;
}

.transfer-type-pill.pill-important {
  background: #d97706;
  color: #ffffff;
}

/* Destination Team Column */
.transfer-dest-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  max-width: 220px;
}

[dir="rtl"] .transfer-dest-wrap,
.sports-transfers-modal-card.rtl-mode .transfer-dest-wrap {
  align-items: flex-start;
}

.transfer-dest-club-info {
  display: flex;
  align-items: center;
  gap: 7px;
}

[dir="rtl"] .transfer-dest-club-info,
.sports-transfers-modal-card.rtl-mode .transfer-dest-club-info {
  flex-direction: row-reverse;
}

.transfer-dest-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.transfer-dest-logo-box {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  box-sizing: border-box;
}

.transfer-dest-logo {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

.transfer-dest-fallback {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.transfer-dest-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  white-space: nowrap;
}

/* Pagination & Load More */
.sports-transfers-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 8px;
}

.sports-transfers-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 28px;
  border-radius: 8px;
  background: #180509;
  border: 1px solid #360d17;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: none !important;
}

.sports-transfers-load-more-btn:focus,
.sports-transfers-load-more-btn.nav-focused {
  background: #ff2a4b !important;
  border-color: #ff2a4b !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.sports-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.sports-transfers-no-more {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

/* Mobile & Small Screens */
@media (max-width: 600px) {
  .sports-transfers-modal-card {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .sports-transfers-header {
    padding: 10px 14px;
  }
  .sports-transfers-tabs {
    padding: 7px 14px !important;
  }
  .sports-transfers-body {
    padding: 12px 14px 20px;
  }
  .sports-transfer-card {
    padding: 8px 10px;
  }
  .transfer-player-wrap {
    gap: 8px;
  }
  .transfer-player-avatar-box,
  .transfer-player-photo {
    width: 38px;
    height: 38px;
  }
  .transfer-player-name {
    font-size: 12.5px;
  }
  .transfer-player-pos {
    font-size: 10.5px;
  }
  .transfer-type-pill {
    padding: 3px 8px;
    font-size: 10px;
  }
  .transfer-dest-logo-box,
  .transfer-dest-logo {
    width: 26px;
    height: 26px;
  }
  .transfer-dest-date {
    font-size: 9.5px;
  }
}

/* ==========================================================================
   SANSAT OTT — KIDS PARADISE DASHBOARD (100% KIDS TV EXPERIENCE)
   ========================================================================== */

/* ==========================================================================
   SANSAT OTT — KIDS PARADISE DASHBOARD (100% KIDS TV EXPERIENCE)
   Responsive 100vh Layout • 0 Scroll • 60 FPS TV Remote Mobility
   ========================================================================== */

.kids-paradise-dashboard {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  background-color: #080511;
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: row;
  direction: ltr;
  box-sizing: border-box;
  z-index: 999;
  user-select: none;
  padding: 0;
}

/* Strictly enforce Sidebar on LEFT in LTR, and on RIGHT in RTL across all TV browsers */
.kids-paradise-dashboard.ltr .kids-vertical-sidebar {
  order: 1;
}

.kids-paradise-dashboard.ltr .kids-main-stage {
  order: 2;
  direction: ltr;
}

.kids-paradise-dashboard.rtl .kids-main-stage {
  order: 1;
  direction: rtl;
}

.kids-paradise-dashboard.rtl .kids-vertical-sidebar {
  order: 2;
  direction: rtl;
}

/* 1. Dynamic Hero Spotlight Backdrop Layer (GPU accelerated) */
.kids-hero-backdrop-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
}

.kids-hero-vignette-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 5, 17, 0.78) 0%, rgba(8, 5, 17, 0.40) 30%, transparent 65%);
  pointer-events: none;
}

.kids-paradise-dashboard.rtl .kids-hero-vignette-left {
  background: linear-gradient(270deg, rgba(8, 5, 17, 0.78) 0%, rgba(8, 5, 17, 0.40) 30%, transparent 65%);
}

.kids-hero-vignette-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 5, 17, 0.95) 0%, rgba(8, 5, 17, 0.48) 18%, transparent 45%);
  pointer-events: none;
}

/* 2. VERTICAL KIDS SIDEBAR (LEFT IN LTR, RIGHT IN RTL) */
.kids-vertical-sidebar {
  width: 88px;
  flex-shrink: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  position: relative;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-sizing: border-box;
  background: #0e091b;
  border-right: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
}

.kids-vertical-sidebar.rtl {
  border-right: none;
  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
}

.kids-sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  padding: 12px 0;
  margin: 0;
  box-sizing: border-box;
}

/* Sidebar Item: NO outer square border on focus, ONLY circular badge glows */
.kids-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  padding: 3px 0;
  border-radius: 14px;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.kids-nav-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2.5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.kids-nav-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.badge-home {
  border: 2px solid #a855f7;
  background: rgba(168, 85, 247, 0.22);
}

.badge-live {
  border: 2px solid #00c6ff;
  background: rgba(0, 198, 255, 0.22);
}

.badge-movies {
  border: 2px solid #ff3366;
  background: rgba(255, 51, 102, 0.22);
}

.badge-series {
  border: 2px solid #ff9900;
  background: rgba(255, 153, 0, 0.22);
}

.badge-islamic {
  border: 2px solid #00e676;
  background: rgba(0, 230, 118, 0.22);
}

.badge-fav {
  border: 2px solid #ffd700;
  background: rgba(255, 215, 0, 0.22);
}

.badge-exit {
  border: 2px solid #ef4444;
  background: rgba(239, 68, 68, 0.22);
}

.kids-nav-label {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.5px;
  margin-top: 3px;
  color: #cbd5e1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  transition: color 0.18s ease;
}

/* FOCUS STATE: NO rectangular yellow border, ONLY circular icon lights up! */
.kids-sidebar-item:focus,
.kids-sidebar-item:focus-visible,
.kids-sidebar-item.nav-focused {
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 5;
}

.kids-sidebar-item:focus .kids-nav-icon-badge,
.kids-sidebar-item.nav-focused .kids-nav-icon-badge {
  border-color: #ffd700 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.95), 0 0 8px #ffd700 !important;
  transform: scale(1.1);
}

.kids-sidebar-item:focus .kids-nav-label,
.kids-sidebar-item.nav-focused .kids-nav-label {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.95);
  font-weight: 950;
}

/* 3. MAIN STAGE (HERO SPOTLIGHT + TOP 5 CAROUSEL) */
.kids-main-stage {
  flex: 1;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.8vh, 26px) clamp(28px, 4vw, 44px) clamp(14px, 2.5vh, 20px) clamp(28px, 4vw, 44px);
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.kids-header-col-imdb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kids-badge-rating {
  background: linear-gradient(135deg, #f5af19, #e65c00);
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 2.5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(230, 92, 0, 0.4);
}

.kids-badge-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  padding: 2.5px 10px;
  border-radius: 6px;
}

.kids-badge-genre {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-weight: 750 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 2.5px 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ==========================================================================
   HERO SPOTLIGHT: 3-TIER STRUCTURE WITH BALANCED SPACING
   LTR: Metadata & Buttons on the RIGHT. Title & Synopsis on the LEFT.
   RTL: Metadata & Buttons on the LEFT. Title & Synopsis on the RIGHT.
   ========================================================================== */
.kids-spotlight-hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 1. TOP TIER: METADATA ROW */
.kids-spotlight-meta-row {
  width: 100%;
  display: flex;
  margin-bottom: clamp(14px, 2.2vh, 20px);
  flex-shrink: 0;
}

.kids-spotlight-meta-row.ltr {
  justify-content: flex-end; /* A LA DERECHA EN LTR */
  direction: ltr;
}

.kids-spotlight-meta-row.rtl {
  justify-content: flex-start; /* A LA IZQUIERDA EN RTL */
  direction: ltr;
}

.kids-spotlight-meta-row .kids-header-col-imdb {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 2. MIDDLE TIER: TÍTULO Y SINOPSIS */
.kids-spotlight-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: clamp(520px, 60vw, 820px);
  margin-bottom: clamp(16px, 2.5vh, 22px); /* BOTONES SUBIDOS Y CERCANOS */
  flex-shrink: 0;
}

.kids-spotlight-text-block.ltr {
  align-self: flex-start;
  text-align: left;
  direction: ltr;
  margin-right: auto;
  margin-left: 0;
}

.kids-spotlight-text-block.rtl {
  align-self: flex-start;
  text-align: right !important;
  direction: rtl !important;
  margin-left: auto;
  margin-right: 0;
  width: 100%;
}

.kids-movie-title {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 900;
  line-height: 1.18;
  color: #ffffff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95);
  margin: 0;
}

.kids-movie-title.ar-font,
.kids-spotlight-hero.rtl .kids-movie-title {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  direction: rtl !important;
  width: 100%;
}

.kids-movie-synopsis {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.kids-spotlight-hero.rtl .kids-movie-synopsis {
  text-align: right !important;
  direction: rtl !important;
  width: 100%;
}

/* 3. BOTTOM TIER: BOTONES DE VER Y FAVORITO (MISMO TAMAÑO EXACTO) */
.kids-spotlight-actions-row {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  margin-bottom: 0;
}

.kids-spotlight-actions-row.ltr {
  justify-content: flex-end; /* A LA DERECHA EN LTR */
  direction: ltr;
}

.kids-spotlight-actions-row.rtl {
  justify-content: flex-start; /* A LA IZQUIERDA EN RTL */
  direction: ltr;
}

.kids-hero-buttons-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* TWIN ACTION BUTTONS: IDENTICAL DIMENSIONS & CENTERING */
.kids-play-btn,
.kids-fav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: clamp(195px, 20vw, 215px) !important;
  min-width: clamp(195px, 20vw, 215px) !important;
  max-width: clamp(195px, 20vw, 215px) !important;
  height: clamp(44px, 5.2vh, 48px) !important;
  min-height: clamp(44px, 5.2vh, 48px) !important;
  max-height: clamp(44px, 5.2vh, 48px) !important;
  box-sizing: border-box !important;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
  outline: none !important;
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.kids-play-btn {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #ffffff;
  border: none;
  box-shadow: none !important;
}

.kids-play-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.kids-play-btn:hover,
.kids-play-btn:focus,
.kids-play-btn.nav-focused {
  transform: scale(1.08);
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.kids-fav-btn {
  background: #25163a !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

.kids-fav-btn.is-fav {
  background: #e6a100 !important;
  border-color: #ffd700 !important;
  color: #171120 !important;
}

.kids-fav-btn .kids-fav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.kids-fav-btn:hover,
.kids-fav-btn:focus,
.kids-fav-btn.nav-focused {
  transform: scale(1.08);
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%) !important;
  border-color: #ffffff !important;
  color: #171120 !important;
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.kids-fav-btn:hover .kids-fav-icon,
.kids-fav-btn:focus .kids-fav-icon,
.kids-fav-btn.nav-focused .kids-fav-icon {
  fill: #171120 !important;
}

/* TOP 5 CAROUSEL: Flexible breathing room above cards */
.kids-top5-section {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: clamp(12px, 2.2vh, 20px);
  margin-bottom: 0;
}

.kids-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(10px, 1.8vh, 16px);
}

.kids-section-heading.ltr {
  justify-content: flex-start;
  text-align: left;
}

.kids-section-heading.rtl {
  justify-content: flex-start;
  text-align: right;
  direction: rtl;
}

.kids-sparkle-icon {
  font-size: clamp(19px, 2.3vw, 24px);
  filter: none !important;
}

.kids-section-title {
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 850;
  color: #ffffff;
  letter-spacing: 0.45px;
  text-shadow: none !important;
}

.kids-section-title.ar-font {
  font-size: clamp(19px, 2.3vw, 24px) !important;
  font-weight: 850 !important;
}

.kids-top5-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}

.kids-top5-row.ltr {
  direction: ltr;
  flex-direction: row;
}

/* In RTL, direction: rtl ensures Card 1 is on the RIGHT and Card 5 on the LEFT! */
.kids-top5-row.rtl {
  direction: rtl;
  flex-direction: row;
}

/* Taller, prominent cards per user request */
.kids-top-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1;
  height: clamp(185px, 34vh, 205px);
  cursor: pointer;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.kids-top-card:focus,
.kids-top-card:focus-visible,
.kids-top-card.nav-focused,
.kids-top-card:hover,
.kids-top-card.selected {
  outline: none !important;
  outline-offset: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.07) translateY(-5px);
  z-index: 15;
}

/* Giant 3D Rank Numbers */
.kids-rank-number {
  font-size: clamp(74px, 7vw, 92px);
  font-weight: 950;
  line-height: 0.72;
  font-family: 'Arial Black', Impact, sans-serif;
  letter-spacing: -5px;
  z-index: 4;
  position: relative;
  user-select: none;
  -webkit-text-stroke: 3px #0c0814;
  flex-shrink: 0;
}

/* LTR: Number is on the left of poster -> negative margin-right pulls poster behind number */
.kids-top5-row.ltr .kids-rank-number {
  margin-right: -26px;
  margin-left: 0;
}

/* RTL: Number is on the right of poster -> negative margin-left pulls poster behind number */
.kids-top5-row.rtl .kids-rank-number {
  margin-left: -26px;
  margin-right: 0;
}

.kids-rank-number.rank-num-1 {
  color: #ffeb3b;
  text-shadow: 3px 3px 0 #f57f17, 0 0 16px rgba(255, 235, 59, 0.75);
}

.kids-rank-number.rank-num-2 {
  color: #00e5ff;
  text-shadow: 3px 3px 0 #0091ea, 0 0 16px rgba(0, 229, 255, 0.75);
}

.kids-rank-number.rank-num-3 {
  color: #ff4081;
  text-shadow: 3px 3px 0 #c2185b, 0 0 16px rgba(255, 64, 129, 0.75);
}

.kids-rank-number.rank-num-4 {
  color: #b388ff;
  text-shadow: 3px 3px 0 #651fff, 0 0 16px rgba(179, 136, 255, 0.75);
}

.kids-rank-number.rank-num-5 {
  color: #00e676;
  text-shadow: 3px 3px 0 #00b0ff, 0 0 16px rgba(0, 230, 118, 0.75);
}

.kids-poster-wrapper {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #171120;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  transition: all 0.2s ease;
}

.kids-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Skeleton Shimmer for 0 Hardcoded Flash */
@keyframes kidsShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.kids-skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: kidsShimmer 1.5s infinite;
}

/* Per-Rank Base Borders Matching Each Rank Number Color */
.kids-top-card[data-rank="1"] .kids-poster-wrapper {
  border: 2px solid #ffeb3b !important;
}
.kids-top-card[data-rank="2"] .kids-poster-wrapper {
  border: 2px solid #00e5ff !important;
}
.kids-top-card[data-rank="3"] .kids-poster-wrapper {
  border: 2px solid #ff4081 !important;
}
.kids-top-card[data-rank="4"] .kids-poster-wrapper {
  border: 2px solid #b388ff !important;
}
.kids-top-card[data-rank="5"] .kids-poster-wrapper {
  border: 2px solid #00e676 !important;
}

/* Per-Rank Focus/Selected Glow Matching Each Rank Number Color */
.kids-top-card[data-rank="1"]:hover .kids-poster-wrapper,
.kids-top-card[data-rank="1"]:focus .kids-poster-wrapper,
.kids-top-card[data-rank="1"].nav-focused .kids-poster-wrapper,
.kids-top-card[data-rank="1"].selected .kids-poster-wrapper {
  border: 3.5px solid #ffeb3b !important;
  box-shadow: none !important;
}

.kids-top-card[data-rank="2"]:hover .kids-poster-wrapper,
.kids-top-card[data-rank="2"]:focus .kids-poster-wrapper,
.kids-top-card[data-rank="2"].nav-focused .kids-poster-wrapper,
.kids-top-card[data-rank="2"].selected .kids-poster-wrapper {
  border: 3.5px solid #00e5ff !important;
  box-shadow: none !important;
}

.kids-top-card[data-rank="3"]:hover .kids-poster-wrapper,
.kids-top-card[data-rank="3"]:focus .kids-poster-wrapper,
.kids-top-card[data-rank="3"].nav-focused .kids-poster-wrapper,
.kids-top-card[data-rank="3"].selected .kids-poster-wrapper {
  border: 3.5px solid #ff4081 !important;
  box-shadow: none !important;
}

.kids-top-card[data-rank="4"]:hover .kids-poster-wrapper,
.kids-top-card[data-rank="4"]:focus .kids-poster-wrapper,
.kids-top-card[data-rank="4"].nav-focused .kids-poster-wrapper,
.kids-top-card[data-rank="4"].selected .kids-poster-wrapper {
  border: 3.5px solid #b388ff !important;
  box-shadow: none !important;
}

.kids-top-card[data-rank="5"]:hover .kids-poster-wrapper,
.kids-top-card[data-rank="5"]:focus .kids-poster-wrapper,
.kids-top-card[data-rank="5"].nav-focused .kids-poster-wrapper,
.kids-top-card[data-rank="5"].selected .kids-poster-wrapper {
  border: 3.5px solid #00e676 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   SANSAT OTT — NATIVE NETFLIX KIDS STAGE & SUBVIEWS (ULTRA-FAST • 0 BLUR SHADOWS)
   ========================================================================== */

/* 0. SANSAT KIDS FULLSCREEN SPLASH SCREEN (TRIGGERED FROM MAIN MENU HOME) */
.sansat-kids-splash-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #23124d 0%, #0d0720 70%, #06030e 100%);
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
  pointer-events: all;
  user-select: none;
}

.sansat-kids-splash-screen.splash-out {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

.kids-splash-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 0, 128, 0.15) 0%, rgba(0, 210, 255, 0.1) 40%, transparent 70%);
  pointer-events: none;
}

.kids-splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.kids-splash-logo-wrap {
  position: relative;
  animation: kidsSplashPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes kidsSplashPop {
  0% { transform: scale(0.35); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.kids-splash-logo {
  width: clamp(220px, 32vw, 380px);
  height: auto;
  object-fit: contain;
  filter: none !important;
}

.kids-splash-text {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 850;
  color: #ffd700;
  text-shadow: none !important;
  letter-spacing: 0.5px;
  animation: kidsFadeIn 0.5s ease 0.3s both;
}

.kids-splash-bar-wrap {
  width: 180px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  position: relative;
  margin-top: 6px;
}

.kids-splash-bar-fill {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff007f, #ffd700, #00e5ff);
  animation: kidsSplashBar 4.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes kidsSplashBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

/* 1. DYNAMIC CONTENT STAGE (100% FULLSCREEN • ZERO OUTER PADDING) */
.kids-stage {
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

.kids-paradise-dashboard.ltr .kids-stage {
  order: 2;
  direction: ltr;
}

.kids-paradise-dashboard.rtl .kids-stage {
  order: 1;
  direction: rtl;
}

/* Home Kids Screen fits 100vh with 0 scroll, internal safe padding only */
.kids-home-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 36px 18px 36px !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden !important;
}

/* 2. SUBVIEWS COMMON CONTAINER (100% FULLSCREEN • ZERO OUTER PADDING) */
.kids-view-container {
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.kids-tv-catalog-screen {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden !important;
}

/* 3. DYNAMIC TV HERO BACKDROP ARTWORK (KIDS MODE: 65% AMBIENT, SMOOTH RADIANT BG) */
.kids-tv-hero-art,
#kids-vod-hero-art,
#kids-series-hero-art {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 65% !important;
  height: 56vh !important;
  max-height: 56vh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kids-tv-catalog-screen.rtl .kids-tv-hero-art,
.kids-tv-catalog-screen.rtl #kids-vod-hero-art,
.kids-tv-catalog-screen.rtl #kids-series-hero-art,
body.rtl-mode .kids-tv-hero-art,
body.rtl-mode #kids-vod-hero-art,
body.rtl-mode #kids-series-hero-art,
html[dir="rtl"] .kids-tv-hero-art,
html[dir="rtl"] #kids-vod-hero-art,
html[dir="rtl"] #kids-series-hero-art {
  right: auto !important;
  left: 0 !important;
}

.kids-tv-hero-backdrop-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right top !important;
  opacity: 0.50 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.kids-tv-catalog-screen.rtl .kids-tv-hero-backdrop-img,
body.rtl-mode .kids-tv-hero-backdrop-img,
html[dir="rtl"] .kids-tv-hero-backdrop-img {
  object-position: left top !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Seamless feathering vignette in Kids mode: Zero cut border */
.kids-tv-hero-vignette {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: none !important;
  box-shadow: none !important;
  background:
    linear-gradient(to right, #080511 0%, rgba(8, 5, 17, 0.92) 18%, rgba(8, 5, 17, 0.45) 42%, transparent 72%),
    linear-gradient(to top, #080511 0%, rgba(8, 5, 17, 0.85) 18%, transparent 45%) !important;
}

.kids-tv-hero-art::after,
.kids-tv-hero-art::before {
  display: none !important;
}

.kids-tv-catalog-screen.rtl .kids-tv-hero-vignette,
body.rtl-mode .kids-tv-hero-vignette,
html[dir="rtl"] .kids-tv-hero-vignette {
  border: none !important;
  box-shadow: none !important;
  background:
    linear-gradient(to left, #080511 0%, rgba(8, 5, 17, 0.92) 18%, rgba(8, 5, 17, 0.45) 42%, transparent 72%),
    linear-gradient(to top, #080511 0%, rgba(8, 5, 17, 0.85) 18%, transparent 45%) !important;
}

/* 4. FIXED TV HERO SPOTLIGHT (TITLE, RATINGS, ACTIONS & SINOPSIS) */
.kids-tv-meta-preview {
  min-height: 190px;
  max-height: 250px;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 36px 6px 36px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  gap: 24px;
}

.kids-tv-preview-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 48% !important;
  position: relative !important;
  z-index: 5 !important;
  min-width: 0;
}

.kids-tv-preview-title {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 44px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kids-tv-preview-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
}

.kids-badge-gold {
  background: linear-gradient(135deg, #f5af19, #e65c00);
  color: #ffffff;
  font-weight: 850;
  font-size: 12.5px;
  padding: 2.5px 10px;
  border-radius: 6px;
  box-shadow: none !important;
}

/* Hero Action Buttons */
.kids-hero-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  flex-wrap: wrap;
}

.kids-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  outline: none !important;
  border: 1.5px solid transparent;
  box-shadow: none !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.kids-hero-btn svg {
  width: 15px;
  height: 15px;
}

.kids-hero-btn-play {
  background: #0072ff;
  color: #ffffff;
  border-color: #0072ff;
}

.kids-hero-btn-play:focus,
.kids-hero-btn-play.nav-focused,
.kids-hero-btn-play:hover {
  background: #0088ff !important;
  border-color: #ffd700 !important;
  transform: scale(1.04);
  box-shadow: none !important;
}

.kids-hero-btn-fav {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.kids-hero-btn-fav:focus,
.kids-hero-btn-fav.nav-focused,
.kids-hero-btn-fav:hover {
  background: rgba(255, 215, 0, 0.18) !important;
  border-color: #ffd700 !important;
  transform: scale(1.04);
  box-shadow: none !important;
}

.kids-hero-btn-fav.is-fav {
  background: rgba(255, 215, 0, 0.22) !important;
  border-color: #ffd700 !important;
  color: #ffd700 !important;
}

.kids-tv-preview-plot {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 650px !important;
  margin-top: 1px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  height: 4.35em !important;
  min-height: 4.35em !important;
  max-height: 4.35em !important;
  box-sizing: content-box !important;
}

.kids-tv-preview-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.kids-tv-counter-pill {
  background: rgba(0, 0, 0, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 850;
  color: #ffd700;
  box-shadow: none !important;
  white-space: nowrap;
}

/* 5. ALWAYS VISIBLE HORIZONTAL CATEGORY PILLS BAR */
.kids-filter-bar-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 36px 10px 36px;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  z-index: 4;
  position: relative;
  scrollbar-width: none;
}

.kids-filter-bar-scroll::-webkit-scrollbar {
  display: none;
}

.kids-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.kids-filter-pill .pill-icon {
  font-size: 14px;
}

.kids-filter-pill:hover,
.kids-filter-pill:focus,
.kids-filter-pill.nav-focused {
  transform: scale(1.05);
  background: rgba(255, 215, 0, 0.22) !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.kids-filter-pill.active {
  background: #ff3366 !important;
  border-color: #ff3366 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.kids-filter-pill.active:focus,
.kids-filter-pill.active.nav-focused {
  border-color: #ffd700 !important;
  box-shadow: none !important;
}

/* 6. MOVIES & SERIES POSTERS GRID WITH CENTER SCROLLING */
.kids-media-posters-scroll-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 36px 40px 36px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

.kids-media-posters-scroll-wrap::-webkit-scrollbar {
  width: 6px;
}

.kids-media-posters-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 9999px;
}

.kids-media-posters-grid,
.kids-vod-movies-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
}

.kids-vod-grid-card,
.kids-series-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.12s ease !important;
}

.kids-card-poster-wrap {
  position: relative !important;
  width: 100% !important;
  padding-top: 145% !important; /* Rock-solid 2:3 vertical poster ratio across ALL Android WebViews */
  height: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #171120 !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease !important;
}

.kids-vod-poster-img,
.kids-series-poster-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.kids-vod-play-badge {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.kids-vod-play-badge svg {
  width: 38px;
  height: 38px;
  color: #ffd700;
}

.kids-vod-rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 850;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: none !important;
}

.kids-view-container.rtl .kids-vod-rating-badge {
  right: auto;
  left: 8px;
}

.kids-series-ep-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  padding: 14px 8px 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
}

.kids-series-ep-badge svg {
  width: 14px;
  height: 14px;
  color: #ffd700;
}

.kids-type-tag {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  padding: 2.5px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.kids-view-container.rtl .kids-type-tag,
body.rtl-mode .kids-type-tag,
html[dir="rtl"] .kids-type-tag {
  left: auto !important;
  right: 8px !important;
}

.kids-type-tag.badge-vod {
  background: rgba(229, 9, 20, 0.95) !important;
}

.kids-type-tag.badge-series {
  background: rgba(138, 43, 226, 0.95) !important;
}

.kids-type-tag.badge-live {
  background: rgba(0, 114, 255, 0.95) !important;
}

.kids-vod-poster-img.is-channel-logo {
  object-fit: contain !important;
  padding: 18px !important;
  background: #0f0a1d !important;
  box-sizing: border-box !important;
}

.kids-card-meta {
  display: none !important;
}

.kids-card-title {
  font-size: 13px;
  font-weight: 850;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.kids-card-genre {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* POSTERS FOCUS STATES: CLEAN CRISP YELLOW BORDER • 60 FPS TV */
.kids-vod-grid-card:hover,
.kids-vod-grid-card:focus,
.kids-vod-grid-card.nav-focused,
.kids-series-card:hover,
.kids-series-card:focus,
.kids-series-card.nav-focused {
  transform: scale(1.04) !important;
  z-index: 10 !important;
  box-shadow: none !important;
}

.kids-vod-grid-card:hover .kids-card-poster-wrap,
.kids-vod-grid-card:focus .kids-card-poster-wrap,
.kids-vod-grid-card.nav-focused .kids-card-poster-wrap {
  border-color: #ffd700 !important;
  box-shadow: none !important;
}

.kids-vod-grid-card:hover .kids-vod-play-badge,
.kids-vod-grid-card:focus .kids-vod-play-badge,
.kids-vod-grid-card.nav-focused .kids-vod-play-badge {
  opacity: 1;
}

.kids-series-card:hover .kids-card-poster-wrap,
.kids-series-card:focus .kids-card-poster-wrap,
.kids-series-card.nav-focused .kids-card-poster-wrap {
  border-color: #ffd700 !important;
  box-shadow: none !important;
}

/* 7. LIVE TV CHANNELS SCREEN & CARDS (ZERO SHADOWS • VIBRANT CARDS) */
.kids-channels-scroll-wrap,
.kids-fav-scroll-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 36px 40px 36px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
}

.kids-channels-scroll-wrap::-webkit-scrollbar,
.kids-fav-scroll-wrap::-webkit-scrollbar {
  width: 6px;
}

.kids-channels-scroll-wrap::-webkit-scrollbar-thumb,
.kids-fav-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 9999px;
}

.kids-view-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  padding: 16px 36px 4px 36px;
  box-sizing: border-box;
}

.kids-view-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kids-view-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 9999px;
  color: #ffffff;
  box-shadow: none !important;
  text-transform: uppercase;
}

.kids-view-badge.badge-live {
  background: #0072ff;
}

.kids-view-badge.badge-gold {
  background: linear-gradient(135deg, #f5af19, #e65c00) !important;
}

.kids-view-badge.badge-green {
  background: #10b981 !important;
}

.kids-view-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.kids-channel-count-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  box-shadow: none !important;
}

.kids-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* KIDS HEADER SEARCH BAR (ZERO SHADOWS • FIXED WIDTH • 60 FPS) */
.kids-header-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  margin-left: auto !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease, background 0.12s ease !important;
}

.kids-view-container.rtl .kids-header-search-wrap,
.kids-tv-catalog-screen.rtl .kids-header-search-wrap {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.kids-header-search-icon {
  font-size: 14px !important;
  opacity: 0.8 !important;
}

.kids-header-search-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  width: 200px !important;
  transition: none !important;
}

.kids-header-search-input:focus {
  width: 200px !important;
}

.kids-header-search-wrap:focus-within {
  border-color: #ffd700 !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.kids-search-clear-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}

.kids-search-clear-btn:hover {
  color: #ffffff !important;
}

.kids-channel-card {
  position: relative;
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.12) 0%, rgba(255, 154, 0, 0.09) 25%, rgba(0, 230, 118, 0.09) 50%, rgba(0, 210, 255, 0.11) 75%, rgba(157, 0, 255, 0.12) 100%), #161129;
  border: 2px solid rgba(255, 255, 255, 0.18);
  padding: 10px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.kids-channel-card:hover,
.kids-channel-card:focus,
.kids-channel-card.nav-focused {
  transform: scale(1.04);
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.22) 0%, rgba(255, 154, 0, 0.18) 25%, rgba(0, 230, 118, 0.18) 50%, rgba(0, 210, 255, 0.22) 75%, rgba(157, 0, 255, 0.22) 100%), #21173d !important;
  border: 3.5px solid #ffd700 !important;
  box-shadow: none !important;
  z-index: 10;
}

.channel-num-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 11px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 6px;
  border-radius: 6px;
}

.kids-view-container.rtl .channel-num-badge {
  left: auto;
  right: 10px;
}

.channel-live-dot-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.6);
  padding: 2px 7px;
  border-radius: 9999px;
}

.kids-view-container.rtl .channel-live-dot-badge {
  right: auto;
  left: 10px;
}

.dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

.live-text {
  font-size: 9.5px;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 0.5px;
}

.channel-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 6px 4px 6px;
}

.channel-logo-img {
  max-width: 85%;
  max-height: 56px;
  object-fit: contain;
  filter: none !important;
}

.channel-logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.channel-fallback-icon {
  font-size: 28px;
}

.channel-fallback-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.channel-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.channel-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.channel-cat-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 198, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.channel-play-overlay svg {
  width: 38px;
  height: 38px;
  color: #ffffff;
}

.kids-channel-card:focus .channel-play-overlay,
.kids-channel-card.nav-focused .channel-play-overlay {
  opacity: 1;
}

/* 8. PARAÍSO KIDS: SERIES DETAIL & EPISODES SCREEN (2-COLUMN FULLSCREEN) */
.kids-series-detail-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #080512;
  box-sizing: border-box;
}

.kids-detail-backdrop-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: #080512 !important;
}

.kids-series-detail-screen.rtl .kids-detail-backdrop-layer {
  right: 0 !important;
  left: 0 !important;
}

.kids-detail-bg-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.38 !important;
  filter: none !important;
  display: block !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.kids-series-detail-screen.rtl .kids-detail-bg-img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.kids-detail-bg-vignette {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: 
    linear-gradient(to right, #080512 0%, #080512 35%, rgba(8, 5, 18, 0.94) 55%, rgba(8, 5, 18, 0.6) 75%, rgba(8, 5, 18, 0.2) 100%),
    linear-gradient(to top, #080512 0%, #080512 25%, rgba(8, 5, 18, 0.85) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(8, 5, 18, 0.85) 0%, transparent 22%) !important;
}

.kids-series-detail-screen.rtl .kids-detail-bg-vignette,
body.rtl-mode .kids-detail-bg-vignette,
html[dir="rtl"] .kids-detail-bg-vignette {
  background: 
    linear-gradient(to left, #080512 0%, #080512 35%, rgba(8, 5, 18, 0.94) 55%, rgba(8, 5, 18, 0.6) 75%, rgba(8, 5, 18, 0.2) 100%),
    linear-gradient(to top, #080512 0%, #080512 25%, rgba(8, 5, 18, 0.85) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(8, 5, 18, 0.85) 0%, transparent 22%) !important;
}

.kids-detail-top-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 36px 8px 36px;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}

.kids-back-chevron-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 850;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.18s ease;
}

.kids-back-chevron-btn svg {
  width: 18px;
  height: 18px;
}

.kids-back-chevron-btn:hover,
.kids-back-chevron-btn:focus,
.kids-back-chevron-btn.nav-focused {
  transform: scale(1.06);
  background: #ffd700 !important;
  border-color: #ffffff !important;
  color: #171120 !important;
  box-shadow: none !important;
}

.kids-back-chevron-btn:hover svg,
.kids-back-chevron-btn:focus svg,
.kids-back-chevron-btn.nav-focused svg {
  stroke: #171120 !important;
}

.kids-detail-nav-title {
  font-size: 18px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* 2-COLUMN SPLIT: MATCHES NORMAL SERIES DETAIL (sansat-series-main-layout) */
.kids-series-main-layout {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: clamp(24px, 3.5vw, 44px) !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  padding: 0 36px 16px 36px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  position: relative !important;
}

.kids-series-left-col {
  display: flex !important;
  flex-direction: row !important;
  gap: clamp(16px, 2.5vw, 24px) !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
  width: auto !important;
  flex-shrink: 1 !important;
}

.kids-series-detail-screen.rtl .kids-series-left-col {
  flex-direction: row !important;
  padding-right: 0 !important;
  padding-left: 8px !important;
}

/* 2:3 POSTER BLOCK MIRRORS NORMAL SERIES */
.kids-series-poster-block {
  width: clamp(140px, 15vw, 185px) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.kids-series-poster-block .sansat-detail-poster-wrap {
  width: 100% !important;
  min-height: 220px !important;
  height: clamp(210px, 32vh, 260px) !important;
  aspect-ratio: 2 / 3 !important;
  max-width: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85) !important;
  background: #15171b !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  padding: 0 !important;
  display: block !important;
}

.kids-series-poster-block .kids-detail-poster-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
  display: block !important;
}

.kids-series-info-block {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.kids-detail-series-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.kids-detail-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* SMALLER ACTION BUTTONS WITH MARGIN-LEFT (COPIED/ADAPTED FROM NORMAL SERIES) */
.kids-detail-stacked-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-left: 20px !important;
  margin-top: 6px !important;
  margin-bottom: 16px !important;
  width: auto !important;
  max-width: none !important;
}

.kids-series-detail-screen.rtl .kids-detail-stacked-buttons {
  margin-left: 0 !important;
  margin-right: 20px !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-primary,
.kids-detail-stacked-buttons .sansat-btn-action-secondary {
  width: clamp(210px, 18vw, 250px) !important;
  min-width: 210px !important;
  max-width: 250px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 20px !important;
  gap: 12px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  flex: none !important;
  letter-spacing: 0.3px !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-primary {
  background: #e50914 !important;
  border: 2px solid #e50914 !important;
  color: #ffffff !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-primary svg {
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-secondary {
  background: #25163a !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-secondary.active,
.kids-detail-stacked-buttons .sansat-btn-action-secondary.is-fav {
  background: #e6a100 !important;
  border-color: #ffd700 !important;
  color: #171120 !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-secondary svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.kids-detail-stacked-buttons .sansat-btn-action-primary:hover,
.kids-detail-stacked-buttons .sansat-btn-action-primary:focus,
.kids-detail-stacked-buttons .sansat-btn-action-primary.nav-focused,
.kids-detail-stacked-buttons .sansat-btn-action-secondary:hover,
.kids-detail-stacked-buttons .sansat-btn-action-secondary:focus,
.kids-detail-stacked-buttons .sansat-btn-action-secondary.nav-focused {
  border-color: #ffd700 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.45) !important;
}

/* Kids Season Selector Modal (Matches Adult Series Modal with Kids Dark Theme) */
.kids-season-modal .sansat-season-modal-box {
  background: linear-gradient(160deg, #25143a 0%, #150924 100%) !important;
  border: 1.5px solid rgba(255, 215, 0, 0.45) !important;
}

.kids-season-modal .sansat-season-modal-btn {
  background: #ffffff !important;
  color: #25143a !important;
  border: 2px solid transparent !important;
}

.kids-season-modal .sansat-season-modal-btn.active {
  background: #ffd700 !important;
  color: #171120 !important;
  border: 2px solid #ffd700 !important;
}

.kids-season-modal .sansat-season-modal-btn:focus,
.kids-season-modal .sansat-season-modal-btn.nav-focused {
  border: 2.5px solid #ffd700 !important;
  transform: scale(1.02) !important;
}

/* RIGHT COLUMN & EPISODES SCROLL LIST */
.kids-series-right-col {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
}

.kids-series-detail-screen .sansat-episodes-scroll-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.kids-series-detail-screen .sansat-episode-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(24, 26, 32, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  gap: 14px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  box-shadow: none !important;
}

.kids-series-detail-screen .sansat-episode-card:hover,
.kids-series-detail-screen .sansat-episode-card:focus,
.kids-series-detail-screen .sansat-episode-card.nav-focused {
  background: rgba(38, 42, 54, 0.95) !important;
  border-color: #ffd700 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35) !important;
}

.kids-season-pill {
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.16s ease;
}

.kids-season-pill.active {
  background: #ff9900;
  border-color: #ff9900;
  color: #ffffff;
  box-shadow: none !important;
}

.kids-season-pill:focus,
.kids-season-pill.nav-focused {
  border-color: #ffd700 !important;
  box-shadow: none !important;
  transform: scale(1.05);
}

.kids-detail-synopsis {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.kids-detail-right-col {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kids-detail-episodes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kids-episodes-section-title {
  font-size: 18px;
  font-weight: 850;
  color: #ffffff;
  margin: 0;
}

.kids-episodes-count-pill {
  font-size: 12px;
  font-weight: 800;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.15);
  padding: 3px 10px;
  border-radius: 9999px;
}

.kids-episodes-scroll-list {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 18px 40px 10px !important;
  box-sizing: border-box !important;
  scroll-behavior: smooth;
}

.kids-episodes-scroll-list::-webkit-scrollbar {
  width: 6px;
}

.kids-episodes-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 153, 0, 0.4);
  border-radius: 9999px;
}

.kids-episode-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.kids-episode-item:hover,
.kids-episode-item:focus,
.kids-episode-item.nav-focused {
  border-color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.18) !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 5;
}

.kids-ep-thumb-wrap {
  width: 140px;
  height: 80px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #000;
}

.kids-ep-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kids-ep-play-circle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  transition: transform 0.16s ease;
}

.kids-ep-play-circle svg {
  width: 32px;
  height: 32px;
  color: #ffffff;
}

.kids-episode-item:focus .kids-ep-play-circle svg,
.kids-episode-item.nav-focused .kids-ep-play-circle svg {
  color: #ffd700;
  transform: scale(1.15);
}

.kids-ep-number-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffd700;
  font-size: 10.5px;
  font-weight: 850;
  padding: 1.5px 6px;
  border-radius: 4px;
}

.kids-view-container.rtl .kids-ep-number-tag {
  left: auto;
  right: 6px;
}

.kids-ep-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.kids-ep-title {
  font-size: 14px;
  font-weight: 850;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kids-ep-duration-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

/* 9. EMPTY STATES & READY SCREENS (ZERO SHADOWS) */
.kids-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 6vh, 60px) 20px;
  text-align: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  margin: 20px 36px;
  box-shadow: none !important;
}

.kids-empty-emoji {
  font-size: 54px;
}

.kids-religion-moon-icon,
.kids-fav-star-icon {
  font-size: 64px;
  filter: none !important;
}

.kids-empty-state h3 {
  font-size: 20px;
  font-weight: 850;
  color: #ffffff;
  margin: 0;
}

.kids-empty-state p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 480px;
  line-height: 1.5;
}

/* Active tab state in vertical sidebar */
.kids-sidebar-item.active .kids-nav-icon-badge {
  border-color: #ffd700 !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.7) !important;
}

.kids-sidebar-item.active .kids-nav-label {
  color: #ffd700 !important;
  font-weight: 950 !important;
}


/* =========================================================
   MOBILE CATEGORY REORDER MODAL (Live TV, VOD, Series)
   Strictly scoped to Mobile — Never touches Android TV
   ========================================================= */

#rOv.is-mobile,
body.device-mobile #rOv {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
  padding: env(safe-area-inset-top, 8px) env(safe-area-inset-right, 12px) env(safe-area-inset-bottom, 8px) env(safe-area-inset-left, 12px) !important;
  box-sizing: border-box !important;
  direction: ltr !important;
}

#rCard.is-mobile,
body.device-mobile #rCard {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 58px !important;
  grid-template-rows: 40px 1fr 48px !important;
  grid-template-areas:
    "title title"
    "list  side"
    "foot  foot" !important;
  gap: 10px 14px !important;
  width: 95vw !important;
  max-width: 760px !important;
  height: 94vh !important;
  max-height: 380px !important;
  padding: 14px 18px 12px 18px !important;
  background: linear-gradient(135deg, rgba(32, 8, 14, 0.98) 0%, rgba(13, 3, 6, 0.98) 100%) !important;
  border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(229, 9, 20, 0.18) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
  direction: ltr !important;
}

/* Portrait mobile fallback */
@media (orientation: portrait) {
  #rCard.is-mobile,
  body.device-mobile #rCard {
    width: 94vw !important;
    max-width: 440px !important;
    height: 85vh !important;
    max-height: 680px !important;
    grid-template-columns: 1fr 54px !important;
    grid-template-rows: 44px 1fr 52px !important;
    padding: 14px 14px 12px 14px !important;
  }
}

/* Header */
#rCard.is-mobile #rT,
body.device-mobile #rT {
  grid-area: title !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: 'Barlow Condensed', 'Tajawal', 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  direction: ltr !important;
  text-align: left !important;
}

#rCard.is-mobile #rT .r-title-text,
body.device-mobile #rT .r-title-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  margin-right: 12px !important;
}

#rCard.is-mobile .r-close-btn,
body.device-mobile .r-close-btn {
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.12s ease, background 0.12s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#rCard.is-mobile .r-close-btn svg,
body.device-mobile .r-close-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

#rCard.is-mobile .r-close-btn:active,
body.device-mobile .r-close-btn:active {
  transform: scale(0.9) !important;
  background: rgba(229, 9, 20, 0.6) !important;
}

/* Category List Container */
#rCard.is-mobile #rL,
body.device-mobile #rL {
  grid-area: list !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-sizing: border-box !important;
  direction: ltr !important;
}

#rCard.is-mobile #rL-vp,
body.device-mobile #rL-vp {
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 6px 8px 6px 6px !important;
  box-sizing: border-box !important;
  direction: ltr !important;
}

#rCard.is-mobile #rL-vp::-webkit-scrollbar,
body.device-mobile #rL-vp::-webkit-scrollbar {
  width: 4px !important;
}
#rCard.is-mobile #rL-vp::-webkit-scrollbar-track,
body.device-mobile #rL-vp::-webkit-scrollbar-track {
  background: transparent !important;
}
#rCard.is-mobile #rL-vp::-webkit-scrollbar-thumb,
body.device-mobile #rL-vp::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}

/* Category Item Rows */
#rCard.is-mobile .ro,
body.device-mobile .ro {
  position: relative !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  margin-bottom: 6px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f6eef0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease !important;
  box-sizing: border-box !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: none !important;
  direction: ltr !important;
}

#rCard.is-mobile .ro:active,
body.device-mobile .ro:active {
  transform: scale(0.99) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

#rCard.is-mobile .ro .nm,
body.device-mobile .ro .nm {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: 'Barlow Condensed', 'Tajawal', 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  text-align: left !important;
  margin-right: 10px !important;
  direction: ltr !important;
}

#rCard.is-mobile .ro small,
body.device-mobile .ro small {
  flex: 0 0 auto !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  margin-right: 12px !important;
  letter-spacing: 0.3px !important;
  direction: ltr !important;
}

#rCard.is-mobile .ro i,
body.device-mobile .ro i {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}

#rCard.is-mobile .ro.sel,
body.device-mobile .ro.sel {
  background: rgba(229, 9, 20, 0.22) !important;
  border-color: rgba(229, 9, 20, 0.65) !important;
  color: #ffffff !important;
}

#rCard.is-mobile .ro.sel i,
body.device-mobile .ro.sel i {
  background: #e50914 !important;
  border-color: #ff3b4b !important;
  color: #ffffff !important;
}

#rCard.is-mobile .ro.sel i:after,
body.device-mobile .ro.sel i:after {
  content: "\2713" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Prevent TV white focus on mobile */
#rCard.is-mobile .ro.f:not(.sel),
body.device-mobile .ro.f:not(.sel) {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: none !important;
}
#rCard.is-mobile .ro.f:not(.sel) small,
body.device-mobile .ro.f:not(.sel) small {
  color: rgba(255, 255, 255, 0.8) !important;
}
#rCard.is-mobile .ro.f:not(.sel) i,
body.device-mobile .ro.f:not(.sel) i {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Side Move Buttons */
#rCard.is-mobile #rS,
body.device-mobile #rS {
  grid-area: side !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

#rCard.is-mobile .rb,
body.device-mobile .rb {
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 38px !important;
  max-height: 52px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #ffffff !important;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: none !important;
}

#rCard.is-mobile .rb svg,
body.device-mobile .rb svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
}

#rCard.is-mobile .rb:active,
body.device-mobile .rb:active {
  background: #e50914 !important;
  border-color: #ff3b4b !important;
  color: #ffffff !important;
  transform: scale(0.92) !important;
}

#rCard.is-mobile .rb.f,
body.device-mobile .rb.f {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: none !important;
}

/* Footer Buttons */
#rCard.is-mobile #rF,
body.device-mobile #rF {
  grid-area: foot !important;
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

#rCard.is-mobile .pmb,
body.device-mobile .pmb {
  width: auto !important;
  min-width: 100px !important;
  height: 38px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  font-family: 'Barlow Condensed', 'Tajawal', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: none !important;
}

#rCard.is-mobile #rCa,
body.device-mobile #rCa {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

#rCard.is-mobile #rCa:active,
body.device-mobile #rCa:active {
  transform: scale(0.95) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

#rCard.is-mobile #rOk,
body.device-mobile #rOk {
  background: linear-gradient(135deg, #e50914 0%, #b80710 100%) !important;
  border: 1.5px solid #ff2a4b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45) !important;
}

#rCard.is-mobile #rOk:active,
body.device-mobile #rOk:active {
  transform: scale(0.95) !important;
  background: #c40812 !important;
}

#rCard.is-mobile .pmb.r-rst,
body.device-mobile .pmb.r-rst {
  margin-right: auto !important;
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

#rCard.is-mobile .pmb.r-rst:active,
body.device-mobile .pmb.r-rst:active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* =========================================================
   KIDS GLOBAL FONT ENFORCEMENT (Tajawal for Arabic / Kids)
   Fast, crisp, and lightweight across all TV and Mobile screens
   ========================================================= */
.kids-paradise-dashboard,
.kids-paradise-dashboard *,
.kids-tv-catalog-screen,
.kids-tv-catalog-screen *,
.kids-series-detail-screen,
.kids-series-detail-screen *,
.sansat-kids-splash-screen,
.sansat-kids-splash-screen *,
[data-module="kids"],
[data-module="kids"] * {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[dir="rtl"] .kids-paradise-dashboard *,
html[dir="rtl"] .kids-tv-catalog-screen *,
html[dir="rtl"] .kids-series-detail-screen *,
html[dir="rtl"] [data-module="kids"] *,
.kids-paradise-dashboard.rtl *,
.kids-tv-catalog-screen.rtl *,
.kids-series-detail-screen.rtl * {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}