/* ARUmediaTV — Telegram Mini App.
 *
 * Hamma o'lcham va rang ilovaning Flutter kodidan AYNAN olingan
 * (`lib/widgets/glass.dart` -> AppColors, `lib/screens/*`). Flutter'dagi
 * 1 dp = CSS'dagi 1 px (Android WebView'da ham shunday). */

:root {
  --bg: #0A0A0C;
  --surface: #101012;
  --card: #151517;
  --card-alt: #1B1B1E;
  --accent: #C2410C;
  --accent2: #E2620F;
  --accent3: #FFC93C;
  --accent-tint: #281914;
  --border: rgba(255, 255, 255, 0.06);       /* 0x0F */
  --border-bright: rgba(255, 255, 255, 0.10); /* 0x1A */
  --text: #F2F2F3;
  --text-dim: #9A9AA0;
  --text-faint: #6B6B70;
  --success: #4ADE80;
  --gold: #FFC93C;
  --danger: #E5484D;
  --telegram: #229ED9;

  /* Xavfsiz hudud: Telegram (8.0+) o'z o'zgaruvchilarini beradi. */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body { overflow: hidden; }

#app { position: fixed; inset: 0; background: var(--bg); }

/* ── Ikonkalar (Flutter `Icons.*_rounded`) ───────────────────── */
.ic {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.ic.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Sahifalar (IndexedStack) ────────────────────────────────── */
.pages { position: absolute; inset: 0; padding-top: calc(var(--safe-top) + var(--content-top)); }
.page {
  position: absolute;
  inset: calc(var(--safe-top) + var(--content-top)) 0 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
}
.page.active { visibility: visible; }
.page::-webkit-scrollbar { display: none; }

/* ── Pastki navigatsiya (`root_screen.dart` -> _BottomNav) ───── */
.bottom-nav-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* chekinish: kamida 26 + 12 */
  padding-bottom: calc(max(var(--safe-bottom), 26px) + 12px);
  pointer-events: none;
}
.bottom-nav {
  pointer-events: auto;
  margin: 0 16px;
  padding: 10px 6px;
  background: var(--surface);
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
}
.bottom-nav-inner { position: relative; height: 52px; display: flex; }
.nav-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
  will-change: transform;
}
.nav-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-item .ic { font-size: 22px; width: 22px; height: 22px; will-change: transform; }
.nav-icon { position: relative; display: inline-block; }
.nav-dot {
  position: absolute;
  right: -2px;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.4px solid #fff;
  display: none;
}
.nav-label-clip { overflow: hidden; width: 100%; text-align: center; }
.nav-label {
  padding-top: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Bosh sahifa (`home_screen.dart`) ────────────────────────── */
.home-head { display: flex; align-items: center; padding: 16px 20px 8px 20px; }
.home-head .logo { height: 30px; width: auto; display: block; }
.home-head .sub { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.45); line-height: normal; }
.home-head .spacer { flex: 1; }
.bell {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bell .ic { font-size: 22px; color: rgba(255, 255, 255, 0.7); }
.section-title { padding: 12px 20px 12px 20px; font-size: 18px; font-weight: 700; color: #fff; line-height: normal; }

.center-box { height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.center-box .ic { font-size: 52px; color: rgba(255, 255, 255, 0.2); }
.center-box .msg { margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 14px; }

.grid {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 14px;
}
.bottom-space { height: 120px; }

/* Flutter `CircularProgressIndicator` (strokeWidth 2). */
.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bo'lim kartochkasi (`SeasonCard`) ───────────────────────── */
.tap { transition: transform 100ms linear; }
.tap.down { transform: scale(0.95); }

.season-card {
  position: relative;
  aspect-ratio: 0.65;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.season-card .ph {
  position: absolute;
  inset: 0;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.season-card .ph .ic { font-size: 36px; color: rgba(255, 255, 255, 0.38); }
.season-card img.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 120ms;
}
.season-card img.poster.ok { opacity: 1; }
.badges { position: absolute; top: 8px; left: 8px; right: 8px; }
.badge-row { display: flex; align-items: center; }
.badge-row .grow { flex: 1; }
.badge-row + .badge-row { margin-top: 6px; }

.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.card-badge .ic { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.card-badge .ic.gold { color: var(--gold); }
.card-badge span.t { margin-left: 3px; color: #fff; font-size: 10.5px; font-weight: 700; line-height: normal; }

.age-badge {
  padding: 2.5px 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: normal;
}

.paid-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7px;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  border: 1px solid rgba(255, 201, 60, 0.7);
}
.paid-badge .ic { font-size: 12px; color: var(--gold); }
.paid-badge span.t { margin-left: 3px; color: var(--gold); font-size: 10.5px; font-weight: 800; line-height: normal; }

.card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-foot .tag {
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-foot .name {
  font-weight: 700;
  color: #fff;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ── Vaqtinchalik sahifa (keyingi bosqichlar) ────────────────── */
.soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 140px; }
.soon .ic { font-size: 52px; color: rgba(255, 255, 255, 0.2); }
.soon .msg { margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 14px; }

/* ── Xabar (SnackBar o'rnida) ────────────────────────────────── */
.toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(max(var(--safe-bottom), 26px) + 12px + 72px + 12px);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-alt);
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms, transform 180ms;
  pointer-events: none;
  z-index: 50;
}
.toast.show { opacity: 1; transform: none; }

/* ── Telegram'dan tashqarida ochilganda ──────────────────────── */
.gate { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.gate img { height: 40px; margin-bottom: 18px; }
.gate .msg { color: rgba(255, 255, 255, 0.6); font-size: 14.5px; line-height: 1.45; }