/* StreamTV - Tizen TV CSS */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');

:root {
  --bg: #0a0a0f;
  --card: #161620;
  --accent: #e50914;
  --accent2: #f5a623;
  --text: #fff;
  --muted: #888;
  --border: #222230;
  --focus: #fff;
  --overlay: rgba(0,0,0,.85);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:1920px; height:1080px; overflow:hidden; }
body { font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--text); font-size:18px; }

/* Screens */
.screen { position:absolute; inset:0; display:none; overflow:hidden; }
.screen.active { display:block; }

/* ─── Login ─────────────────────────────────────────── */
.login-bg {
  position:absolute; inset:0;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a0005 50%, #0a0a0f 100%);
}
.login-bg::after {
  content:'';position:absolute;inset:0;
  background: radial-gradient(ellipse at center, rgba(229,9,20,.15) 0%, transparent 70%);
}
.login-box {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:560px; background:rgba(22,22,32,.9); border:1px solid var(--border);
  border-radius:24px; padding:56px 48px; text-align:center; backdrop-filter:blur(20px);
  z-index:1;
}
.logo-big { font-size:42px; font-weight:700; color:var(--accent); margin-bottom:8px; }
.logo-big span { color:var(--text); }
.login-sub { color:var(--muted); margin-bottom:36px; font-size:16px; }
.input-group { margin-bottom:16px; }
.tv-input {
  width:100%; background:rgba(255,255,255,.06); border:2px solid var(--border);
  color:var(--text); padding:16px 20px; border-radius:12px; font-size:18px;
  font-family:inherit; outline:none; transition:.2s; text-align:right;
}
.tv-input:focus { border-color:var(--accent); background:rgba(229,9,20,.08); }
.tv-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; border-radius:12px; border:2px solid transparent;
  font-size:18px; font-weight:600; cursor:pointer; font-family:inherit; transition:.2s;
}
.tv-btn.primary { background:var(--accent); color:#fff; width:100%; }
.tv-btn.primary:hover,.tv-btn.primary.focused { background:#ff0f1e; transform:scale(1.02); box-shadow:0 0 30px rgba(229,9,20,.4); }
.tv-btn.ghost { background:transparent; border-color:var(--border); color:var(--text); }
.tv-btn.ghost.focused,.tv-btn.ghost:hover { border-color:var(--text); }
.error-msg { color:#e74c3c; margin-top:12px; font-size:15px; min-height:20px; }

/* ─── Header ────────────────────────────────────────── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:0;
  padding:0 60px; height:80px;
  background:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 100%);
}
.logo { font-size:26px; font-weight:700; color:var(--accent); margin-left:48px; flex-shrink:0; }
.logo span { color:var(--text); }
.nav { display:flex; gap:8px; }
.nav-item {
  padding:10px 24px; border-radius:50px; cursor:pointer;
  color:var(--muted); font-size:17px; transition:.2s;
}
.nav-item.active,.nav-item:focus { background:var(--accent); color:#fff; }
.nav-item:hover { color:var(--text); }
.user-info { margin-left:auto; color:var(--muted); font-size:15px; }

/* ─── Hero ──────────────────────────────────────────── */
.hero {
  height:620px; position:relative; overflow:hidden;
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
}
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center top; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(10,10,15,.9) 30%, transparent 70%); }
.hero-bg::before { content:''; position:absolute; bottom:0; left:0; right:0; height:200px; background:linear-gradient(to bottom, transparent, var(--bg)); }
.hero-info { position:absolute; bottom:60px; right:60px; max-width:600px; z-index:1; }
[dir="ltr"] .hero-info { right:auto; left:60px; }
.hero-title { font-size:48px; font-weight:700; margin-bottom:8px; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.hero-meta { color:var(--muted); margin-bottom:14px; font-size:16px; }
.hero-overview { color:#ccc; font-size:16px; line-height:1.6; margin-bottom:24px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-btns { display:flex; gap:12px; }

/* ─── Content Rows ──────────────────────────────────── */
.content-area { padding:0 60px; margin-top:20px; }
.row-section { margin-bottom:40px; }
.row-title { font-size:22px; font-weight:600; margin-bottom:16px; padding-right:4px; }
.row-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; scroll-behavior:smooth; }
.row-scroll::-webkit-scrollbar { display:none; }

/* ─── Card ──────────────────────────────────────────── */
.card-item {
  flex-shrink:0; width:200px; border-radius:12px; overflow:hidden;
  cursor:pointer; transition:.25s; position:relative;
  background:var(--card); border:2px solid transparent;
}
.card-item:hover,.card-item.focused {
  transform:scale(1.07); border-color:var(--text);
  box-shadow:0 8px 40px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.2);
  z-index:5;
}
.card-item img { width:100%; height:290px; object-fit:cover; display:block; }
.card-item .card-info { padding:10px 12px; }
.card-item .card-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-item .card-meta { color:var(--muted); font-size:12px; margin-top:4px; }
.card-item .progress-bar { height:3px; background:rgba(255,255,255,.1); margin-top:6px; border-radius:2px; }
.card-item .progress-fill { height:100%; background:var(--accent); border-radius:2px; }
.free-badge { position:absolute; top:8px; right:8px; background:var(--accent2); color:#000; font-size:10px; font-weight:700; padding:2px 8px; border-radius:50px; }

/* ─── Grid Pages ─────────────────────────────────────── */
.grid-page { padding:100px 60px 60px; overflow-y:auto; height:100%; }
.page-title { font-size:28px; font-weight:700; margin-bottom:28px; }
.content-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:20px; }
.search-bar-tv { display:flex; gap:16px; margin-bottom:28px; }
.search-bar-tv .tv-input { flex:1; }

/* ─── Pagination ─────────────────────────────────────── */
.pagination { display:flex; gap:12px; justify-content:center; margin-top:32px; }
.pagination button {
  background:var(--card); border:2px solid var(--border); color:var(--muted);
  padding:12px 24px; border-radius:10px; font-size:16px; cursor:pointer; font-family:inherit;
}
.pagination button.active,.pagination button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ─── Detail Screen ──────────────────────────────────── */
.detail-backdrop { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(2px) brightness(.4); }
.detail-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(to left, rgba(10,10,15,.3) 0%, rgba(10,10,15,.95) 50%); }
.detail-content { position:relative; z-index:1; display:flex; gap:48px; padding:80px 60px; height:100%; align-items:flex-start; overflow-y:auto; }
.detail-poster-wrap { flex-shrink:0; }
.detail-poster { width:280px; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.8); }
.detail-info { flex:1; padding-top:20px; }
.detail-info h1 { font-size:40px; font-weight:700; margin-bottom:6px; }
.detail-meta { display:flex; gap:16px; align-items:center; margin-bottom:16px; font-size:15px; color:var(--muted); flex-wrap:wrap; }
.detail-meta .rating { color:var(--accent2); font-weight:700; font-size:18px; }
.detail-overview { color:#ccc; font-size:16px; line-height:1.8; margin-bottom:28px; max-width:720px; }
.detail-actions { display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.detail-actions .tv-btn { width:auto; }

/* Episodes */
.season-tabs { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.season-tab { padding:10px 24px; border-radius:50px; border:2px solid var(--border); cursor:pointer; font-size:15px; }
.season-tab.active { background:var(--accent); border-color:var(--accent); }
.episodes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-height:320px; overflow-y:auto; }
.episode-card { background:var(--card); border-radius:10px; padding:14px; cursor:pointer; border:2px solid transparent; transition:.2s; }
.episode-card:hover,.episode-card.focused { border-color:var(--accent); }
.episode-card .ep-num { color:var(--muted); font-size:13px; }
.episode-card .ep-title { font-size:15px; margin-top:4px; }

/* Quality */
.quality-list { display:flex; gap:12px; flex-wrap:wrap; }
.quality-btn { padding:12px 28px; border-radius:10px; border:2px solid var(--border); cursor:pointer; font-size:16px; font-family:inherit; background:transparent; color:var(--text); transition:.2s; }
.quality-btn:hover,.quality-btn.focused { background:var(--accent); border-color:var(--accent); }

/* ─── Player ─────────────────────────────────────────── */
.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: black;
  display: block;
}
.player-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

/* لایه UI روی ویدیو */
.player-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.65) 0%,
    transparent 25%,
    transparent 65%,
    rgba(0,0,0,0.85) 100%
  );
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.player-ui.hidden { opacity: 0; pointer-events: none; }
.player-ui.hidden .player-top,
.player-ui.hidden .player-bottom { pointer-events: none; }
.player-ui:not(.hidden) .player-top,
.player-ui:not(.hidden) .player-bottom { pointer-events: all; }

/* نوار بالا */
.player-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 40px 0;
}
.player-back-btn {
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: .2s;
  flex-shrink: 0;
  z-index: 10;
}
.player-back-btn:hover { background: rgba(229,9,20,0.7); border-color: var(--accent); }
.player-top-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* نوار پایین */
.player-bottom {
  padding: 0 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* seekbar */
.player-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.player-time { color: #ddd; font-size: 15px; min-width: 46px; text-align: center; }
.player-seekbar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.player-seekbar:hover { height: 10px; }
.player-seek-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  width: 0%;
  transition: width 0.25s linear;
}
.player-seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  cursor: pointer;
}

/* دکمه‌های کنترل */
.player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pctrl-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: .2s;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.pctrl-btn:hover { background: rgba(229,9,20,0.7); }
.pctrl-play { width: 60px; height: 60px; font-size: 22px; background: var(--accent); }
.pctrl-play:hover { background: #ff0f1e; }
.pctrl-fs { margin-right: auto; }

/* volume */
.pctrl-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}
.volume-slider {
  -webkit-appearance: none;
  width: 100px; height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.3);
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}


/* ─── Subscribe ──────────────────────────────────────── */
.subscribe-wrap { padding:100px 120px; overflow-y:auto; height:100%; }
.sub-title { font-size:40px; font-weight:700; margin-bottom:12px; }
.sub-desc { color:var(--muted); font-size:18px; margin-bottom:40px; }
.plans-row { display:flex; gap:24px; margin-bottom:36px; }
.plan-card {
  background:var(--card); border:2px solid var(--border); border-radius:16px;
  padding:32px 28px; cursor:pointer; transition:.2s; text-align:center; flex:1;
}
.plan-card:hover,.plan-card.active { border-color:var(--accent); background:rgba(229,9,20,.08); }
.plan-card.popular { border-color:var(--accent2); }
.plan-name { font-size:20px; font-weight:700; margin-bottom:8px; }
.plan-price { font-size:36px; font-weight:700; color:var(--accent); margin-bottom:4px; }
.plan-price-irr { color:var(--muted); font-size:14px; margin-bottom:12px; }
.plan-days { color:var(--muted); font-size:15px; }
.payment-methods { display:flex; gap:16px; margin-bottom:24px; }
.pay-method {
  background:var(--card); border:2px solid var(--border); border-radius:12px;
  padding:20px 32px; cursor:pointer; text-align:center; flex:1; transition:.2s;
}
.pay-method:hover,.pay-method.active { border-color:var(--accent); }
.pay-icon { font-size:32px; margin-bottom:8px; }

/* ─── Back Button ────────────────────────────────────── */
.back-btn {
  position:absolute; top:28px; right:40px; z-index:10;
  background:rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.2);
  color:var(--text); padding:12px 24px; border-radius:10px;
  font-size:16px; cursor:pointer; font-family:inherit; transition:.2s;
}
.back-btn:hover { background:rgba(255,255,255,.15); }

/* ─── Loading & Toast ────────────────────────────────── */
.loading-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; display:flex; align-items:center; justify-content:center; }
.spinner { width:60px; height:60px; border:4px solid rgba(255,255,255,.1); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); background:#222; color:#fff; padding:16px 32px; border-radius:12px; font-size:16px; z-index:300; opacity:0; transition:.3s; pointer-events:none; min-width:300px; text-align:center; }
.toast.show { opacity:1; }

/* ─── Auth Tabs ──────────────────────────────────────── */
.auth-tabs { display:flex; gap:4px; margin-bottom:24px; background:rgba(255,255,255,.06); border-radius:12px; padding:4px; }
.auth-tab { flex:1; padding:12px; text-align:center; border-radius:10px; cursor:pointer; color:var(--muted); font-size:16px; transition:.2s; }
.auth-tab.active { background:var(--accent); color:#fff; }
.auth-tab:hover:not(.active) { color:var(--text); }

/* ─── Language Select ────────────────────────────────── */
.lang-box { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1; }
.lang-options { display:flex;gap:32px;justify-content:center;margin-top:8px; }
.lang-card { background:rgba(22,22,32,.9);border:2px solid var(--border);border-radius:20px;padding:40px 56px;cursor:pointer;transition:.25s; }
.lang-card:hover,.lang-card.focused { border-color:var(--accent);transform:scale(1.05);box-shadow:0 0 40px rgba(229,9,20,.3); }
.lang-flag { font-size:56px;margin-bottom:16px; }
.lang-name { font-size:22px;font-weight:600; }


/* Fix search input */
#search-input { background: #1e1e2a !important; color: #ffffff !important; border: 2px solid #444 !important; width: 100% !important; padding: 10px 14px !important; font-size: 16px !important; border-radius: 8px !important; }
@media (max-width: 1024px) {
  html, body { width: 100vw !important; height: 100vh !important; overflow: auto !important; }
  .screen { position: fixed !important; width: 100vw !important; height: 100vh !important; overflow-y: auto !important; }
  .lang-box { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; width: 90vw !important; }
  .lang-options { flex-direction: row !important; justify-content: center !important; }
  .lang-card { width: 40vw !important; padding: 24px 16px !important; }
  .lang-flag { font-size: 40px !important; }
  .login-box { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; width: 90vw !important; padding: 32px 20px !important; }
}
.plyr {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.plyr__controls {
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.plyr__control--overlaid {
  background: rgba(229, 9, 20, 0.9) !important;
}

/* ─── Scrollbars ─────────────────────────────────────── */
.grid-page::-webkit-scrollbar,
.detail-content::-webkit-scrollbar,
.subscribe-wrap::-webkit-scrollbar,
.episodes-grid::-webkit-scrollbar {
  width: 6px;
}
.grid-page::-webkit-scrollbar-track,
.detail-content::-webkit-scrollbar-track,
.subscribe-wrap::-webkit-scrollbar-track,
.episodes-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}
.grid-page::-webkit-scrollbar-thumb,
.detail-content::-webkit-scrollbar-thumb,
.subscribe-wrap::-webkit-scrollbar-thumb,
.episodes-grid::-webkit-scrollbar-thumb {
  background: rgba(229,9,20,0.6);
  border-radius: 4px;
}
.grid-page::-webkit-scrollbar-thumb:hover,
.detail-content::-webkit-scrollbar-thumb:hover,
.subscribe-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* اسکرول افقی ردیف‌های خانه */
.row-scroll::-webkit-scrollbar { display: block; height: 4px; }
.row-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.row-scroll::-webkit-scrollbar-thumb { background: rgba(229,9,20,0.5); border-radius: 4px; }
.row-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }