/* =====================================================================
   UNIBOX — modern mobile streaming UI
   Dark cinematic theme · brand orange accent · touch-first
   ===================================================================== */

/* Yekan Bakh (Persian) — only the weights shipped in the bundle, with
   nearby weights aliased to the closest available file. */
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:400;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-Regular.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-Regular.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:500;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-Regular.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-Regular.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:600;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-Bold.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-Bold.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:700;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-Bold.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-Bold.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:800;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-ExtraBlack.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-ExtraBlack.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Yekan Bakh'; font-style:normal; font-weight:900;
  src:url('../fonts/yekanBakh/YekanBakhFaNum-ExtraBlack.woff2') format('woff2'),
      url('../fonts/yekanBakh/YekanBakhFaNum-ExtraBlack.woff') format('woff'); font-display:swap; }

:root{
  --bg:        #08090c;
  --bg-2:      #0d0f14;
  --surface:   #14171e;
  --surface-2: #1b1f29;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --text:      #f3f4f7;
  --text-2:    #9aa0ad;
  --text-3:    #646b78;
  --accent:    #ff6b2b;   /* brand orange */
  --accent-2:  #ff9a1a;   /* warm orange */
  --accent-soft: rgba(255,107,43,.14);
  --accent-glow: rgba(255,107,43,.35);
  --on-accent: #fff;       /* text/icon color on accent fills */
  --live:      #ff9a1a;
  --good:      #3ddc97;
  --radius:    18px;
  --radius-sm: 12px;
  --tabbar-h:  64px;
  --topbar-h:  56px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font:      'Inter', system-ui, sans-serif;
  --display:   'Sora', system-ui, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; height:100dvh; background:var(--bg); }
body{
  font-family:var(--font);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; color:inherit; border:0; background:none; cursor:pointer; }
input{ font-family:inherit; }
[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:0; height:0; }

/* ============ SPLASH ============ */
.splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(120% 80% at 50% 0%, #161922 0%, var(--bg) 60%);
}
.splash-logo{
  width:74px; height:74px; border-radius:22px; color:#0b0b0e;
  display:grid; place-items:center;
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow:0 20px 60px var(--accent-glow);
  animation:pop .6s cubic-bezier(.2,.8,.2,1);
}
.splash-name{ font-family:var(--display); font-weight:800; letter-spacing:.18em; font-size:15px; color:var(--text-2); }
.splash-spinner{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.12); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pop{ from{ transform:scale(.7); opacity:0; } }

/* ============ AUTH ============ */
.auth-screen{ position:fixed; inset:0; z-index:900; overflow:auto; }
.auth-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 60% at 75% 0%, rgba(255,122,69,.22), transparent 60%),
    radial-gradient(80% 50% at 10% 10%, rgba(255,107,43,.16), transparent 55%),
    var(--bg);
}
.auth-bg::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 80%);
}
.auth-inner{
  position:relative; z-index:1;
  min-height:100%; padding:calc(var(--safe-top) + 64px) 24px calc(var(--safe-bottom) + 40px);
  display:flex; flex-direction:column; justify-content:center; max-width:440px; margin:0 auto;
}
.auth-brand{ display:flex; align-items:center; gap:11px; margin-bottom:38px; }
.auth-brand-mark{
  width:42px; height:42px; border-radius:13px; color:#0b0b0e; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 30px rgba(255,107,43,.3);
}
.auth-brand span{ font-family:var(--display); font-weight:800; letter-spacing:.14em; font-size:16px; }
.auth-title{ font-family:var(--display); font-weight:700; font-size:30px; margin:0 0 8px; letter-spacing:-.01em; }
.auth-sub{ color:var(--text-2); margin:0 0 30px; font-size:15px; line-height:1.5; }

.auth-tabs{ display:flex; gap:8px; background:var(--surface); padding:5px; border-radius:14px; margin-bottom:24px; }
.auth-tab{
  flex:1; padding:11px; border-radius:10px; font-size:14px; font-weight:600; color:var(--text-2);
  transition:.2s;
}
.auth-tab.active{ background:var(--surface-2); color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,.3); }

.field{ display:block; margin-bottom:16px; }
.field span{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:8px; }
.field input{
  width:100%; padding:15px 16px; border-radius:14px; font-size:16px;
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  transition:.2s; outline:none;
}
.field input:focus{ border-color:var(--accent); background:var(--surface-2); }
.field input::placeholder{ color:var(--text-3); }

.auth-err{ color:var(--live); font-size:13px; font-weight:500; min-height:18px; margin:2px 0 12px; }

.btn-primary{
  width:100%; padding:16px; border-radius:14px; font-size:16px; font-weight:700; color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 30px rgba(255,107,43,.28); transition:.15s;
}
.btn-primary:active{ transform:scale(.98); filter:brightness(1.05); }
.btn-primary:disabled{ opacity:.6; }
.btn-primary.btn-sm{ width:auto; padding:12px 22px; font-size:15px; }
.btn-ghost{
  padding:14px 20px; border-radius:14px; font-size:15px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line-2); transition:.15s;
}
.btn-ghost:active{ transform:scale(.98); }

/* ============ APP SHELL ============ */
.app{
  position:fixed; left:0; right:0; top:0; bottom:0; display:flex; flex-direction:column; background:var(--bg);
  height:100vh;            /* fallback */
  height:100svh;           /* small viewport: excludes browser/standalone chrome */
  height:100dvh;           /* dynamic viewport where supported */
}

.topbar{
  position:relative; z-index:50; flex:none;
  height:calc(var(--topbar-h) + var(--safe-top)); padding-top:var(--safe-top);
  display:flex; align-items:center; gap:6px; padding-left:14px; padding-right:14px;
  background:rgba(11,12,16,.55); backdrop-filter:saturate(160%) blur(22px);
  -webkit-backdrop-filter:saturate(160%) blur(22px);
  border-bottom:1px solid var(--line);
}
.topbar-title{ flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-brand{ background:linear-gradient(120deg,#fff,#cfd3db); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.06em; }
.icon-btn{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--text);
  transition:.15s;
}
.icon-btn:active{ background:var(--surface-2); transform:scale(.94); }
.icon-btn-light{ color:#fff; }
.back-btn{ margin-left:-6px; }
.rtl .back-btn{ margin-left:0; margin-right:-6px; }
.rtl .back-btn svg{ transform:scaleX(-1); }

.view{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 20px);
  scroll-behavior:smooth;
}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  display:flex; align-items:stretch;
  background:rgba(11,12,16,.82); backdrop-filter:saturate(150%) blur(20px);
  -webkit-backdrop-filter:saturate(150%) blur(20px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.02em; transition:.18s;
  padding-top:8px;
}
.tab svg{ width:23px; height:23px; transition:.18s; }
.tab span{ opacity:.9; }
.tab.active{ color:var(--accent); }
.tab.active svg{ transform:translateY(-1px); filter:drop-shadow(0 4px 10px rgba(255,107,43,.4)); }
.tab:active{ transform:scale(.92); }

/* ============ HERO SLIDER ============ */
.hero-slider{ position:relative; margin:0 0 8px; overflow:hidden; }
.hero-track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; }
.hero-slide{
  flex:none; width:100%; position:relative; aspect-ratio:16/13; max-height:62vh;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-dots{
  position:absolute; bottom:12px; left:0; right:0; z-index:10;
  display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.hero-dot{
  width:6px; height:6px; border-radius:3px;
  background:rgba(255,255,255,.35); transition:width .3s, background .3s;
  cursor:pointer; pointer-events:all;
}
.hero-dot.active{ width:18px; background:var(--accent); }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,12,.35) 0%, transparent 28%, rgba(8,9,12,.35) 58%, var(--bg) 100%); }
.hero-body{ position:relative; z-index:2; padding:20px 20px 36px; width:100%; }
.hero-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; margin-bottom:10px; }
.hero-title{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1.08; margin:0 0 10px; letter-spacing:-.02em;
  text-shadow:0 4px 24px rgba(0,0,0,.6); max-width:90%; }
.hero-meta{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--text-2); margin-bottom:16px; flex-wrap:wrap; }
.hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.hero-actions{ display:flex; gap:10px; }
.hero-play{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; border-radius:14px; font-weight:700; font-size:15px; color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 10px 26px rgba(255,107,43,.3);
}
.hero-play:active{ transform:scale(.98); }
.hero-info{ width:54px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:rgba(255,255,255,.1); border:1px solid var(--line-2); backdrop-filter:blur(8px); color:#fff; }
.hero-info:active{ transform:scale(.96); }

/* ============ ROWS / SECTIONS ============ */
.section{ margin:22px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 18px; margin-bottom:13px; }
.section-title{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; margin:0; }
.section-more{ font-size:13px; color:var(--accent); font-weight:600; }

.row{ display:flex; gap:12px; overflow-x:auto; padding:2px 18px 4px; scroll-snap-type:x proximity; scroll-padding-left:18px; }
.row::before, .row::after{ content:''; flex:none; width:0; }
.row::-webkit-scrollbar{ display:none; }

/* poster card */
.card{ flex:none; width:128px; scroll-snap-align:start; }
.card-poster{
  position:relative; width:128px; height:188px; border-radius:14px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
}
.card-poster img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.card:active .card-poster img{ transform:scale(1.04); }
.card-poster.is-empty{ display:grid; place-items:center; }
.card-poster.is-empty svg{ width:34px; height:34px; color:var(--text-3); }
.card-rank{ position:absolute; left:6px; top:6px; padding:3px 7px; border-radius:8px; font-size:11px; font-weight:800;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px); color:var(--accent); }
.card-badge{ position:absolute; right:6px; top:6px; padding:3px 7px; border-radius:7px; font-size:9px; font-weight:800; letter-spacing:.06em;
  background:var(--live); color:#fff; }
.card-rating{ position:absolute; right:6px; bottom:6px; display:flex; align-items:center; gap:3px;
  padding:3px 6px; border-radius:8px; font-size:11px; font-weight:700; background:rgba(0,0,0,.62); backdrop-filter:blur(6px); }
.card-rating svg{ width:11px; height:11px; color:var(--accent); }
.card-title{ font-size:13px; font-weight:600; margin-top:8px; line-height:1.3; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-sub{ font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* large landscape card (continue/live) */
.card-wide{ flex:none; width:236px; scroll-snap-align:start; }
.card-wide .wide-thumb{ position:relative; width:236px; height:134px; border-radius:14px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); }
.card-wide .wide-thumb img{ width:100%; height:100%; object-fit:cover; }
.card-wide .wide-thumb.is-empty{ display:grid; place-items:center; }
.card-wide .wide-thumb.is-empty svg{ width:38px; height:38px; color:var(--text-3); }
.live-now{ position:absolute; left:8px; top:8px; display:flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:8px; font-size:10px; font-weight:800; letter-spacing:.04em;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--live); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ============ GRID PAGE ============ */
.page{ padding-top:8px; }
.page-bar{ display:flex; gap:9px; overflow-x:auto; padding:6px 18px 14px; }
.page-bar::-webkit-scrollbar{ display:none; }
.chip{ flex:none; padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap;
  background:var(--surface); color:var(--text-2); border:1px solid var(--line); transition:.18s; }
.chip.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); border-color:transparent; font-weight:700; }
.chip:active{ transform:scale(.95); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 18px 0; }
.grid .card{ width:auto; }
.grid .card-poster{ width:100%; height:auto; aspect-ratio:2/3; }

.grid-tv{ grid-template-columns:1fr; }
.grid-tv .tile{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; gap:12px; align-items:center; }
.grid-tv .tile:active{ background:var(--surface-2); }
.tv-logo{ width:54px; height:54px; flex:none; border-radius:12px; background:var(--surface-2); overflow:hidden; display:grid; place-items:center; }
.tv-logo img{ width:100%; height:100%; object-fit:contain; }
.tv-logo svg{ width:24px; height:24px; color:var(--text-3); }
.tv-meta{ min-width:0; }
.tv-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-epg{ font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }

/* radio list */
.radio-list{ padding:6px 18px 0; display:flex; flex-direction:column; gap:10px; }
.radio-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); }
.radio-row:active{ background:var(--surface-2); }
.radio-row.playing{ border-color:var(--accent); background:var(--accent-soft); }
.radio-ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); overflow:hidden; }
.radio-ic img{ width:100%; height:100%; object-fit:contain; }
.radio-ic svg{ width:22px; height:22px; color:var(--text-3); }
.radio-name{ flex:1; font-size:15px; font-weight:600; }
.radio-eq{ display:flex; align-items:flex-end; gap:2.5px; height:18px; }
.radio-eq i{ width:3px; background:var(--accent); border-radius:2px; animation:eq 1s infinite ease-in-out; }
.radio-eq i:nth-child(2){ animation-delay:.2s; } .radio-eq i:nth-child(3){ animation-delay:.4s; }
@keyframes eq{ 0%,100%{ height:5px; } 50%{ height:17px; } }

/* ============ LOADERS / STATES ============ */
.skeleton{ position:relative; overflow:hidden; background:var(--surface); }
.skeleton::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.3s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
.row-skel{ display:flex; gap:12px; padding:2px 18px; }
.row-skel .sk{ flex:none; width:128px; height:188px; border-radius:14px; }
.empty-state{ text-align:center; padding:70px 30px; color:var(--text-3); }
.empty-state svg{ width:48px; height:48px; margin-bottom:14px; opacity:.5; }
.empty-state p{ font-size:14px; margin:0; }
.center-spin{ display:grid; place-items:center; padding:60px 0; }
.center-spin .splash-spinner{ width:30px; height:30px; }
.list-sentinel{ height:40px; display:grid; place-items:center; }

/* ============ SEARCH ============ */
.search-overlay{ position:fixed; inset:0; z-index:700; background:var(--bg); display:flex; flex-direction:column;
  padding-top:var(--safe-top); animation:slideUp .25s ease; }
@keyframes slideUp{ from{ transform:translateY(14px); opacity:0; } }
.search-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; }
.search-input-wrap{ flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); color:var(--text-3); }
.search-input-wrap input{ flex:1; background:none; border:0; outline:none; color:var(--text); font-size:16px; }
.search-input-wrap input::placeholder{ color:var(--text-3); }
.search-clear{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--text-2); font-size:16px; line-height:1; }
.search-cancel{ font-size:15px; font-weight:600; color:var(--accent); padding:6px; }
.search-scope{ display:flex; gap:8px; padding:0 16px 12px; overflow-x:auto; }
.scope-chip{ flex:none; padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--surface); color:var(--text-2); border:1px solid var(--line); }
.scope-chip.active{ background:var(--accent-soft); color:var(--accent); border-color:rgba(255,107,43,.4); }
.search-results{ flex:1; overflow-y:auto; padding:8px 16px calc(var(--safe-bottom) + 20px); }
.search-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.search-grid .card{ width:auto; }
.search-grid .card-poster{ width:100%; height:auto; aspect-ratio:2/3; }

/* ============ DETAIL SHEET ============ */
.detail{ position:fixed; inset:0; z-index:750; background:var(--bg); overflow:hidden; animation:slideUp .28s ease; }
.detail-scroll{ height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--safe-bottom) + 30px); }
.detail-hero{ position:relative; aspect-ratio:16/11; }
.detail-hero img{ width:100%; height:100%; object-fit:cover; }
.detail-hero .ph{ width:100%; height:100%; display:grid; place-items:center; background:var(--surface); }
.detail-hero .ph svg{ width:54px; height:54px; color:var(--text-3); }
.detail-hero-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,9,12,.2),transparent 35%,var(--bg)); }
.detail-close{ position:absolute; top:calc(var(--safe-top) + 12px); left:14px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.detail-fav{ position:absolute; top:calc(var(--safe-top) + 12px); right:14px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.detail-fav.active{ color:var(--accent); }
.detail-body{ padding:0 20px; margin-top:-26px; position:relative; z-index:2; }
.detail-title{ font-family:var(--display); font-weight:800; font-size:26px; line-height:1.1; margin:0 0 12px; letter-spacing:-.02em; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:13px; color:var(--text-2); margin-bottom:18px; }
.detail-pill{ padding:4px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line); font-weight:600; }
.detail-pill.rating{ color:var(--accent); }
.detail-actions{ display:flex; gap:11px; margin-bottom:22px; }
.detail-overview{ font-size:14.5px; line-height:1.6; color:var(--text-2); margin-bottom:22px; }
.detail-info-line{ font-size:13.5px; color:var(--text-2); margin-bottom:8px; }
.detail-info-line b{ color:var(--text); font-weight:600; }
.detail-section-title{ font-family:var(--display); font-weight:700; font-size:16px; margin:26px 0 14px; }

/* seasons / episodes */
.season-tabs{ display:flex; gap:9px; overflow-x:auto; margin-bottom:16px; }
.episode{ display:flex; gap:13px; padding:12px; border-radius:14px; background:var(--surface); border:1px solid var(--line); margin-bottom:11px; }
.episode:active{ background:var(--surface-2); }
.ep-thumb{ width:120px; height:68px; flex:none; border-radius:10px; overflow:hidden; background:var(--surface-2); position:relative; display:grid; place-items:center; }
.ep-thumb img{ width:100%; height:100%; object-fit:cover; }
.ep-thumb svg{ width:26px; height:26px; color:var(--text-3); }
.ep-play{ position:absolute; inset:0; display:grid; place-items:center; }
.ep-play svg{ width:30px; height:30px; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.ep-meta{ min-width:0; flex:1; }
.ep-num{ font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.04em; }
.ep-title{ font-size:14px; font-weight:600; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ============ PLAYER ============ */
.player{ position:fixed; inset:0; z-index:850; background:#000; }
.video{ position:absolute; inset:0; width:100%; height:100%; background:#000; object-fit:contain; }
.player-loading{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.player-spinner{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.player-error{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:30px; }
.player-error-icon{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:28px; font-weight:800; background:rgba(255,154,26,.16); color:var(--live); }
.player-error p{ color:var(--text-2); font-size:15px; margin:0; }

.player-chrome{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 70%,rgba(0,0,0,.65));
  transition:opacity .25s; }
.player-chrome.hidden{ opacity:0; pointer-events:none; }
.player-top{ display:flex; align-items:center; gap:10px; padding:calc(var(--safe-top) + 12px) 16px 0; }
.player-title{ flex:1; font-weight:600; font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* subtitle menu */
.cc-menu{ position:absolute; top:calc(var(--safe-top) + 56px); right:16px; z-index:10;
  min-width:160px; max-height:50vh; overflow-y:auto; padding:6px;
  background:rgba(20,22,28,.96); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5); backdrop-filter:blur(10px); }
.cc-row{ display:block; width:100%; text-align:left; padding:10px 12px; border-radius:8px;
  font-size:14px; color:#e8eaf0; background:transparent; }
.cc-row:active{ background:rgba(255,255,255,.08); }
.cc-row.active{ background:rgba(255,255,255,.12); color:#fff; font-weight:700; }

/* force subtitles centered + readable (iOS sometimes right-aligns the default render) */
.video::cue{ text-align:center; background:rgba(0,0,0,.6); color:#fff;
  font-size:1em; line-height:1.3; white-space:pre-line; }

.player-center{ display:flex; align-items:center; justify-content:center; gap:34px; }
.round-btn{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px); transition:.15s; }
.round-btn:active{ transform:scale(.92); background:rgba(255,255,255,.2); }
.round-btn-lg{ width:74px; height:74px; background:rgba(255,255,255,.16); }
.player-bottom{ display:flex; align-items:center; gap:11px; padding:0 18px calc(var(--safe-bottom) + 20px); }
.player-time{ font-size:12px; color:#dfe2e8; font-variant-numeric:tabular-nums; min-width:38px; text-align:center; }
.player-track{ position:relative; flex:1; height:34px; display:flex; align-items:center; }
.player-track::before{ content:''; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:rgba(255,255,255,.22); }
.player-buffered{ position:absolute; left:0; height:4px; border-radius:3px; background:rgba(255,255,255,.32); }
.player-progress{ position:absolute; left:0; height:4px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.player-knob{ position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5); transform:translateX(-50%); }
.player-live-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:800;
  background:var(--live); color:#fff; }

/* ============ MODAL / TOAST / OFFLINE ============ */
.modal{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:24px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px); animation:fade .2s; }
@keyframes fade{ from{ opacity:0; } }
.modal-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line-2); border-radius:22px; padding:26px; }
.modal-card h3{ font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 8px; }
.modal-card p{ color:var(--text-2); font-size:14px; margin:0 0 18px; line-height:1.5; }
.modal-input{ width:100%; padding:14px 16px; border-radius:13px; font-size:16px; background:var(--bg-2); color:var(--text); border:1px solid var(--line); outline:none; margin-bottom:6px; }
.modal-input:focus{ border-color:var(--accent); }
.modal-actions{ display:flex; gap:11px; justify-content:flex-end; margin-top:14px; }

.toast{ position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 22px); transform:translateX(-50%);
  z-index:980; padding:12px 20px; border-radius:13px; font-size:14px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line-2); box-shadow:0 14px 40px rgba(0,0,0,.5);
  animation:toastIn .3s; max-width:88vw; text-align:center; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,10px); } }

.offline-banner{ position:fixed; left:0; right:0; top:0; z-index:990; padding:calc(var(--safe-top) + 9px) 16px 9px;
  background:var(--live); color:#fff; font-size:13px; font-weight:600; text-align:center; }

/* account */
.acct{ padding:22px 20px 0; }
.acct-card{ background:linear-gradient(140deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:20px; padding:24px; margin-bottom:22px; position:relative; overflow:hidden; }
.acct-card::after{ content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,var(--accent-soft),transparent 70%); pointer-events:none; }
.acct-avatar{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--on-accent); }
.acct-avatar svg{ width:30px; height:30px; }
.acct-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.acct-row:last-child{ border-bottom:0; }
.acct-row .k{ color:var(--text-2); }
.acct-row .v{ font-weight:600; }
.acct-row .v.good{ color:var(--good); }
.logout-btn{ width:100%; padding:15px; border-radius:14px; font-size:15px; font-weight:700; color:var(--live);
  background:rgba(255,154,26,.1); border:1px solid rgba(255,154,26,.25); margin-top:6px; }
.logout-btn:active{ transform:scale(.98); }
.app-foot{ text-align:center; color:var(--text-3); font-size:12px; padding:26px 0 8px; }

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle{ position:relative; z-index:1; display:flex; gap:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
.lang-opt{ padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-2); background:transparent; transition:.15s; }
.lang-opt.active{ background:var(--accent); color:var(--on-accent); }
.lang-opt:active{ transform:scale(.96); }

/* ============ RTL (Persian) ============ */
.rtl body, .rtl .view, .rtl .acct, .rtl .detail-body, .rtl .search-results{ direction:rtl; }
.rtl .section-head{ text-align:right; }
/* horizontal carousels read right-to-left */
.rtl .row{ flex-direction:row-reverse; scroll-padding-left:0; scroll-padding-right:18px; }
.rtl .row-skel{ flex-direction:row-reverse; }
.rtl .card-title, .rtl .card-sub, .rtl .tv-name, .rtl .tv-epg, .rtl .radio-name{ text-align:right; }
/* hero + detail text aligns right */
.rtl .hero-body, .rtl .hero-title, .rtl .hero-meta{ text-align:right; }
.rtl .hero-actions, .rtl .detail-actions{ flex-direction:row-reverse; justify-content:flex-end; }
.rtl .detail-title, .rtl .detail-meta, .rtl .detail-overview, .rtl .detail-info-line{ text-align:right; }
.rtl .detail-meta{ flex-direction:row-reverse; }
/* lists / rows */
.rtl .radio-row, .rtl .tv-meta{ text-align:right; }
.rtl .grid-tv .tile{ flex-direction:row-reverse; }
.rtl .radio-row{ flex-direction:row-reverse; }
/* detail close/fav swap sides */
.rtl .detail-close{ left:auto; right:14px; }
.rtl .detail-fav{ right:auto; left:14px; }
/* search */
.rtl .search-input-wrap input{ text-align:right; }
/* persian numerals/text render better with a touch more line-height */
.rtl .card-title, .rtl .tv-name{ line-height:1.5; }

/* Persian font (Yekan Bakh) when RTL is active — applies to everything */
.rtl, .rtl body, .rtl button, .rtl input,
.rtl .topbar-title, .rtl .hero-title, .rtl .detail-title, .rtl .section-title, .rtl .auth-title{
  font-family:'Yekan Bakh','Tahoma',system-ui,sans-serif;
  letter-spacing:0;
}

/* ============ INSTALL BANNER (Add to Home Screen) ============ */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px); z-index:970;
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:rgba(20,23,30,.96); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:toastIn .3s; cursor:pointer;
}
.install-icon{ width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--on-accent); }
.install-text{ flex:1; min-width:0; }
.install-title{ font-weight:700; font-size:14px; color:var(--text); }
.install-sub{ font-size:12px; color:var(--text-2); line-height:1.35; margin-top:2px; }
.install-action{ flex:none; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700;
  background:var(--accent); color:var(--on-accent); }
.install-action:active{ transform:scale(.96); }
.install-close{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--text-3); }
.install-close:active{ background:var(--surface-2); }

/* iOS instructions sheet */
.ios-install{ position:fixed; inset:0; z-index:990; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.55); animation:fadeIn .2s; padding:0 12px calc(var(--safe-bottom) + 16px); }
@keyframes fadeIn{ from{ opacity:0; } }
.ios-install-card{ position:relative; width:100%; max-width:440px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:20px; padding:24px 20px 20px; box-shadow:0 -10px 40px rgba(0,0,0,.5);
  animation:slideUp .3s ease; }
.ios-install-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; color:var(--text-3); background:var(--surface-2); }
.ios-install-card h3{ font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 18px; }
.ios-step{ display:flex; align-items:center; gap:12px; padding:10px 0; font-size:14px; color:var(--text); line-height:1.45; }
.ios-step b{ font-weight:700; }
.ios-step-n{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:800; }
.ios-share, .ios-add{ vertical-align:middle; margin:0 3px; }

/* RTL adjustments for install UI */
.rtl .install-banner{ flex-direction:row-reverse; }
.rtl .install-title, .rtl .install-sub{ text-align:right; }
.rtl .install-close{ } /* flex-reverse already places it on the left */
.rtl .ios-install-x{ right:auto; left:14px; }
.rtl .ios-step{ flex-direction:row-reverse; text-align:right; }