/* ==========================================================================
   FirasMovies — legacy compatibility layer.

   Loaded AFTER fm.css on pages whose markup predates the design system
   (watch, profile, login, settings, channels, sports, and the rest).

   WHY THIS EXISTS RATHER THAN REWRITING EACH PAGE

   Those pages carry most of the site's real logic — the player and its
   provider switching, the guest gate, episode pickers, the channel guide.
   Rewriting their markup wholesale to adopt new class names would risk all
   of that for a purely visual gain. Instead the old class names are restyled
   here in the new visual language, so every page adopts the new look with no
   change to its markup or its JavaScript.

   Two jobs:
     1. Alias the old design tokens onto the new ones, so any stylesheet still
        written against --card / --border / --accent keeps working. This is
        what keeps channels.css and sports.css correct.
     2. Restyle the legacy components (.panel, .field, .empty, .switch, …) to
        match fm.css.

   New pages should use the fm.css vocabulary; this file is for the ones that
   already exist.
   ========================================================================== */

:root {
  /* --- token aliases: old name -> new value --- */
  --bg-soft: var(--surface);
  --card: var(--surface);
  --border: var(--line);
  --accent: var(--brand);
  --accent-hover: var(--brand-2);
  --accent-soft: rgba(229, 9, 20, 0.14);
  --radius: var(--r);
  --maxw: 1240px;
  --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(8, 8, 12, 0.82);
}

/* Depth is a capable-tier luxury; flat everywhere else. */
.t-lite { --shadow-card: none; }

/*
 * Light theme.
 *
 * The Settings page has always had a dark-mode switch, and silently ignoring
 * someone's saved preference would be a regression. The new palette is
 * dark-first, so light is expressed as a token override rather than a second
 * design — the layout, spacing and type are untouched.
 */
html[data-theme="light"] {
  --bg:        #f6f7fb;
  --surface:   #ffffff;
  --raised:    #ffffff;
  --raised-2:  #eef0f6;
  --line:      #e2e5ee;
  --line-soft: #edeff5;

  --text:      #14151b;
  --dim:       #454a59;
  --muted:     #646b7e;

  --accent-soft: rgba(229, 9, 20, 0.08);
  --shadow-card: 0 10px 30px rgba(20, 24, 40, 0.10);
  --nav-bg: rgba(255, 255, 255, 0.86);
}
html[data-theme="light"] .top.solid { background: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .t-full .top.solid { background: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .tabbar { background: rgba(255, 255, 255, 0.94); }
html[data-theme="light"] .chip.on { background: #14151b; color: #fff; }
html[data-theme="light"] .hero::after {
  background: linear-gradient(to top, var(--bg) 2%, rgba(246, 247, 251, 0.7) 38%, rgba(246, 247, 251, 0.05) 70%);
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero .meta { color: var(--text); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Legacy pages mount the old nav into #nav. Those that have switched to
   FM.chrome() leave it empty; collapse it so it never adds a gap. */
#nav:empty { display: none; }

/* Keep content clear of the fixed top bar on pages that assume a static one. */
body.has-top main,
body.has-top .container.page { padding-top: var(--topbar-total); }

/* ==========================================================================
   Panels and cards
   ========================================================================== */
.panel, .card-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px);
}

.section { padding-block: clamp(20px, 4vw, 34px); }

/* ==========================================================================
   Type
   ========================================================================== */
.row-title, .h-info h2 {
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sub, .wc-note { color: var(--muted); font-size: 0.9rem; }
.lbl, .wc-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 16px; }
.field label, .lbl {
  display: block;
  margin-bottom: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--dim);
}

.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select,
.search-input, .sort-select {
  width: 100%;
  padding: 13px 15px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--speed) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, textarea:focus, select:focus,
.search-input:focus, .sort-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus { border-color: var(--brand); }

.sort-select, select { width: auto; min-width: 150px; cursor: pointer; }

.form-msg { min-height: 20px; font-size: 0.86rem; margin: 8px 0 12px; }
.form-msg.err, .err { color: var(--bad); }
.form-msg.ok, .ok { color: var(--ok); }

/* ==========================================================================
   Switches
   ========================================================================== */
.toggle-row, .switch-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.switch { position: relative; display: inline-block; width: 50px; height: 29px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider {
  position: absolute;
  inset: 0;
  background: var(--raised-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.slider::before {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 21px; height: 21px;
  margin-top: -10.5px;
  background: var(--text);
  border-radius: 50%;
  transition: transform var(--speed) var(--ease);
}
.switch input:checked + .slider { background: var(--brand); border-color: transparent; }
.switch input:checked + .slider::before { transform: translateX(21px); background: #fff; }
.switch input:focus-visible + .slider { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* ==========================================================================
   States
   ========================================================================== */
.empty, .empty-state, .loading {
  padding: clamp(32px, 6vw, 64px) var(--gutter);
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.empty-state .ico, .empty .ico { font-size: 2.6rem; margin-bottom: 12px; display: block; }
.empty-state h3, .empty h3 { color: var(--text); font-size: 1.1rem; margin-bottom: 8px; }

/* ==========================================================================
   Legacy skeletons
   ========================================================================== */
.sk, .sk-shimmer { background: var(--raised); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sk-line { height: 11px; margin-top: 9px; border-radius: var(--r-sm); }
.sk-line.short { width: 55%; }
.sk-art { aspect-ratio: 2 / 3; border-radius: var(--r); }

/* ==========================================================================
   Legacy poster cards (.pcard-*) — the old row/grid item
   ========================================================================== */
.pcard-art, .poster, .lb-preview, .wc-thumb {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--line-soft);
}
.pcard-art { aspect-ratio: 2 / 3; }
.pcard-art img, .poster img { width: 100%; height: 100%; object-fit: cover; }
.t-full .pcard-art { transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.t-full a:hover .pcard-art { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-card); }

.pcard-title { margin-top: 9px; font-size: 0.87rem; font-weight: 600; line-height: 1.35; }
.pcard-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.pcard-badge, .badge-chip {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(8, 8, 12, 0.82);
  color: #fff;
}
.pcard-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  background: rgba(8, 8, 12, 0.5);
  opacity: 0; transition: opacity var(--speed) var(--ease);
}
@media (hover: hover) { .t-full a:hover .pcard-play { opacity: 1; } }

/* ==========================================================================
   Legacy horizontal rows
   ========================================================================== */
.scroll-row, .row-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-row::-webkit-scrollbar, .row-track::-webkit-scrollbar { display: none; }
.row-viewport { overflow: hidden; }

/* ==========================================================================
   Progress
   ========================================================================== */
.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar > * , .progress-bar i, .progress-bar span { display: block; height: 100%; background: var(--brand); }

/* ==========================================================================
   Misc legacy bits
   ========================================================================== */
.avatar {
  border-radius: 50%;
  background: var(--raised-2);
  object-fit: cover;
  flex: 0 0 auto;
}

.stat b { font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; display: block; }
.stat span { font-size: 0.8rem; color: var(--muted); }

.hist-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 32px);
}

.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: 16px; }
.reveal-up { opacity: 1; }   /* legacy animation hook; fm.css owns reveals now */

/* Old pages used .grid for their own layouts; keep it working. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* Anything that still asks for the old page max width. */
.page, main.container { max-width: var(--maxw); margin-inline: auto; }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-wrap {
  max-width: 440px;
  margin: clamp(28px, 7vh, 72px) auto;
  padding-inline: var(--gutter);
}
.auth-wrap .panel { padding: clamp(26px, 5vw, 38px); }
.auth-wrap h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-wrap .sub { margin-bottom: 26px; }
.auth-wrap .field:first-of-type { margin-top: 4px; }

/*
 * A full-width button is the page's main action in every place this site uses
 * one — sign in, create account, verify, unlock. It was rendering in the
 * neutral style, which left the primary action looking like a secondary one.
 */
.btn-block {
  background: var(--brand-grad);
  color: var(--brand-ink);
  border-color: transparent;
  margin-top: 6px;
}
.btn-block:hover { background: var(--brand-grad); box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13); }
.t-lite .btn-block, .t-lite .btn-block:hover { background: var(--brand); box-shadow: none; }
.t-full .btn-block { box-shadow: 0 6px 22px color-mix(in srgb, var(--brand) 30%, transparent); }

/* Secondary links under an auth form. */
.auth-wrap a { color: var(--brand-2); font-weight: 600; }
.auth-wrap a:hover { color: var(--text); }


/* ==========================================================================
   Safe-area spacer

   The converted pages carry a plain <div style="height:var(--topbar-h)">
   under the fixed bar. On a notched iPhone the bar is taller than that by the
   status-bar inset, so the spacer left the first heading tucked underneath it.
   Styling the element by its inline height means every one of those pages is
   corrected without editing them again.
   ========================================================================== */
header.top + div[style*="--topbar-h"] { height: var(--topbar-total) !important; }

/* ==========================================================================
   Page transition target

   The other half of the shared-element transition set up in fm.css. A poster
   clicked in a rail is stamped view-transition-name:fm-art by fm.js; the
   player here answers to the same name, so the browser tweens the poster into
   the video frame instead of blanking the page between them.

   Full tier only, and only where motion is welcome. The name must exist on
   exactly one element per document or the browser discards the transition.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .t-full #player-container { view-transition-name: fm-art; }
}