/* Arash Movie — vivid 2026 layer (2026-10-21).
   Owner: «سایت هم مثل اپ مدیریت خوشگل‌تر بشه، ولی بدون آپدیت اپ‌ها». Loaded last by
   index.html; colours, gradients, edges and hover only — no layout, no script, so the
   phone app (which shows this site) gets it with no update and nothing can break.
   Gold→orange for what is active or primary, gold→violet depth, glowing posters. */

:root {
  --v-gold: #ffd36e;
  --v-orange: #ff9a3d;
  --v-violet: #8b5cf6;
  --v-rose: #ff5d8f;
  --v-ink: #1b1206;
  --v-glow: rgba(255, 170, 70, .28);
  --v-edge: rgba(255, 196, 92, .22);
  --v-surface: rgba(30, 24, 16, .72);
}

/* ---- Page: warm light from the top, violet from the bottom (beats design-2026's
   `html[data-theme] body.d26` solid fill) */
html[data-theme] body.d26.d26 {
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(255, 170, 60, .11), transparent 62%),
    radial-gradient(900px 620px at 0% 108%, rgba(139, 92, 246, .10), transparent 60%),
    #0c0a08 !important;
}

/* ---- Header and navigation */
html body.d26 .top-bar.perf-header {
  border-bottom: 1px solid rgba(255, 196, 92, .10) !important;
}
html body.d26 #bottom-tabs.perf-desktop-nav {
  border: 1px solid var(--v-edge) !important;
  background: linear-gradient(180deg, rgba(36, 28, 18, .9), rgba(22, 18, 12, .9)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 220, 150, .06) !important;
}
html body.d26 #bottom-tabs button.active {
  background: linear-gradient(90deg, var(--v-orange), var(--v-gold)) !important;
  color: var(--v-ink) !important;
  box-shadow: 0 6px 18px var(--v-glow) !important;
}
html body.d26 #bottom-tabs button.active svg,
html body.d26 #bottom-tabs button.active .ui-icon { color: var(--v-ink) !important; fill: currentColor; }
html body.d26 #guest-login-button,
html body.d26 .hero-cta,
html body.d26 #home-view .hero .hero-cta:not(.hero-cta--ghost),
html body.d26 .play-btn,
html body.d26 .select-btn.play-btn {
  background: linear-gradient(90deg, var(--v-orange), var(--v-gold)) !important;
  color: var(--v-ink) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px var(--v-glow) !important;
  font-weight: 800 !important;
}
html body.d26 #guest-login-button:hover,
html body.d26 .hero-cta:hover,
html body.d26 .play-btn:hover { filter: brightness(1.06); }

/* ---- Search and filters */
html body.d26 .search-panel {
  background: linear-gradient(180deg, rgba(34, 27, 18, .82), rgba(20, 16, 11, .82)) !important;
  border: 1px solid var(--v-edge) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32) !important;
}
html body.d26 #search-input:focus { outline: none; }
html body.d26 .search-panel:focus-within {
  border-color: rgba(255, 180, 70, .55) !important;
  box-shadow: 0 0 0 3px rgba(255, 170, 60, .14), 0 12px 34px rgba(0, 0, 0, .32) !important;
}
html body.d26 .chip.active {
  background: linear-gradient(90deg, var(--v-orange), var(--v-gold)) !important;
  color: var(--v-ink) !important;
  border-color: transparent !important;
}

/* ---- Hero: gold into violet, a soft glow round the artwork */
html body.d26 section.hero {
  border: 1px solid rgba(160, 120, 255, .28) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 196, 92, .06) inset !important;
}
html body.d26 section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 160, 60, .10), transparent 45%, rgba(139, 92, 246, .14));
}

/* ---- Shelves: an accent bar before every title, a pill for «همه» */
html body.d26 .row-head h3 { position: relative; padding-inline-start: 14px; }
html body.d26 .row-head h3::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--v-gold), var(--v-orange));
  box-shadow: 0 0 10px var(--v-glow);
}
html body.d26 .row-more {
  border: 1px solid var(--v-edge) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  background: rgba(40, 30, 18, .6) !important;
  color: var(--v-gold) !important;
}
html body.d26 .row-more:hover { border-color: var(--v-orange) !important; }

/* ---- Posters: rounded, lit edge, lift on hover (pointer devices only) */
html body.d26 .poster-tile {
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 220, 150, .07) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body.d26 .poster-card .poster-tile { transition: transform .18s ease, box-shadow .18s ease; }
  html body.d26 .poster-card:hover .poster-tile {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 180, 70, .55), 0 0 26px var(--v-glow) !important;
  }
}
html body.d26 .kind-badge {
  background: linear-gradient(90deg, rgba(20, 16, 11, .82), rgba(40, 30, 18, .82)) !important;
  border: 1px solid rgba(255, 196, 92, .35) !important;
  color: #ffe2a3 !important;
}
html body.d26 .kind-badge.series { border-color: rgba(167, 139, 250, .55) !important; color: #e4dbff !important; }
html body.d26 .poster-title { color: #fff3dc !important; }

/* ---- Title page */
html body.d26 #detail-modal .detail-seasons button.active,
html body.d26 #detail-modal .detail-seasons [aria-selected="true"] {
  background: linear-gradient(90deg, var(--v-orange), var(--v-gold)) !important;
  color: var(--v-ink) !important;
  border-color: transparent !important;
}
html body.d26 #detail-modal .detail-series {
  border-top-color: rgba(255, 196, 92, .18) !important;
}

/* The site's design (body.d26) stays dark in both theme modes, so this layer has no
   separate light variant: a light page under it made the white text unreadable. */

/* ---- Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body.d26 .poster-card .poster-tile { transition: none !important; }
  html body.d26 .poster-card:hover .poster-tile { transform: none !important; }
}