/* =====================================================================
   Design system — extracted from the Marker mockups.
   Palette, type, and RTL Arabic layout faithful to the original design.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Core palette. Navy base retained from the mockups; the old lime/yellow
     accent is replaced with a modern teal for a fresher, premium look.
     The accent is a single variable — change --accent to re-theme instantly. */
  --navy: #0f1720;
  --navy-2: #17212e;
  --navy-3: #22303f;
  --accent: #16c8a3;        /* modern teal (replaces yellow) */
  --accent-strong: #0fae8c; /* darker teal for hovers */
  --accent-soft: #d3f4ec;   /* teal tint for surfaces */
  --lime: var(--accent);    /* back-compat alias for existing rules */
  --teal: #5f7470;
  --teal-2: #889696;
  --sand: #eef0ea;
  --surface: #e4e7df;
  --surface-2: #f4f5f0;
  --error: #c2412f;
  --ok: #128a6a;

  --text: #101720;
  --text-muted: #5f7470;
  --text-invert: #e0e2db;

  --radius: 14px;
  --radius-lg: 20px;
  --gap: 16px;
  --maxw: 1120px;

  --font: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow: 0 8px 30px rgba(15, 23, 32, 0.07);
  --shadow-sm: 0 2px 10px rgba(15, 23, 32, 0.06);
  --ring: 0 0 0 3px rgba(22, 200, 163, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--sand);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  direction: rtl;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

/* Mobile-first: comfortable padding on phones, roomier on larger screens. */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 14px; }
@media (min-width: 768px) { .container { padding-inline: 20px; } }

/* ---- Top navigation ---- */
.nav {
  background: var(--navy);
  color: var(--text-invert);
  position: sticky; top: 0; z-index: 50;
}
.nav .container { display: flex; align-items: center; gap: 20px; height: 64px; }
.nav .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.nav .brand .dot { color: var(--lime); }
.nav .spacer { flex: 1; }
.nav a.navlink { color: var(--text-invert); opacity: .8; padding: 8px 10px; border-radius: 8px; font-size: .95rem; }
.nav a.navlink:hover { opacity: 1; background: rgba(255,255,255,.06); }
.nav .badge { background: var(--lime); color: var(--navy); border-radius: 999px; padding: 1px 8px; font-size: .8rem; font-weight: 700; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer;
  min-height: 44px; /* comfortable touch target on mobile */
  background: var(--navy-2); color: var(--text-invert); transition: transform .05s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--navy-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #04211b; box-shadow: 0 4px 14px rgba(15,174,140,.28); }
.btn.primary:hover { filter: brightness(1.03); }
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--teal-2); }
.btn.danger { background: var(--error); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: .88rem; border-radius: 8px; }

/* ---- Cards & surfaces ---- */
.card { background: var(--surface-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card .pad { padding: 18px; }
.panel { background: var(--surface-2); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }

/* ---- Course grid (mobile-first: fluid, never overflows a phone) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
@media (min-width: 768px) { .grid { gap: var(--gap); } }
.course-card .thumb { aspect-ratio: 16/10; background: var(--navy-3) linear-gradient(135deg, #2a3340, #1b2530); display: grid; place-items: center; color: var(--teal-2); }
.course-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.course-card .meta { color: var(--text-muted); font-size: .85rem; display: flex; gap: 10px; flex-wrap: wrap; }
/* Modern price treatment: clean tabular numerals on a soft accent tint. */
.price {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 700; color: var(--accent-strong);
  background: var(--accent-soft); border-radius: 999px; padding: 5px 13px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.price.free { color: var(--ok); background: #dcefe1; }
.chip { background: var(--surface); color: var(--teal); border-radius: 999px; padding: 2px 10px; font-size: .78rem; }

/* ---- Forms ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .9rem; margin-bottom: 6px; color: var(--text); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #c7ccc2; border-radius: 10px;
  background: #fff; color: var(--text); outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(95,116,112,.15); }
.field .hint { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

.auth-wrap { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 30px 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 20px; }

/* ---- Alerts / toasts ---- */
.alert { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: .92rem; }
.alert.error { background: #f6dcd7; color: var(--error); }
.alert.ok { background: #dcefe1; color: var(--ok); }
.alert.info { background: var(--surface); color: var(--teal); }
.hidden { display: none !important; }

/* ---- Stat tiles (mobile-first: 2-up on phones, more on wider screens) ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: var(--gap); } }
.stat { background: var(--navy); color: var(--text-invert); border-radius: var(--radius); padding: 18px; }
.stat .n { font-family: var(--mono); font-size: 1.8rem; font-weight: 600; color: var(--lime); }
.stat .l { color: var(--teal-2); font-size: .85rem; margin-top: 4px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; background: var(--surface-2); }
table.data th, table.data td { text-align: right; padding: 11px 14px; border-bottom: 1px solid #d3d7cd; font-size: .9rem; }
table.data th { color: var(--text-muted); font-weight: 600; background: var(--surface); }
.status { border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 600; }
.status.PENDING_REVIEW, .status.PENDING { background: #f3ecc9; color: #8a6d1a; }
.status.PUBLISHED, .status.APPROVED, .status.ACTIVE, .status.PAID { background: #dcefe1; color: var(--ok); }
.status.REJECTED, .status.DISABLED, .status.FAILED { background: #f6dcd7; color: var(--error); }
.status.DRAFT { background: var(--surface); color: var(--teal); }

/* ---- Lesson list / player ---- */
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #d3d7cd; }
.lesson-row .idx { width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: var(--lime); display: grid; place-items: center; font-family: var(--mono); font-size: .85rem; }
.lesson-row.locked { opacity: .6; }
.lesson-row .lock { margin-inline-start: auto; color: var(--text-muted); }
.progress-bar { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--lime); }

.section-title { font-size: 1.3rem; margin: 24px 0 14px; }
.muted { color: var(--text-muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
footer.site { text-align: center; color: var(--text-muted); padding: 30px; font-size: .85rem; }

/* =====================================================================
   MOBILE-FIRST layout system.
   Base rules below target phones; min-width queries enhance upward.
   ===================================================================== */

/* Two-pane pages (content + aside). Phones: single column, purchase/side
   panel floated to the top via order. Desktop: content + sticky sidebar. */
.split { display: flex; flex-direction: column; gap: 18px; }
.split > aside { order: -1; position: static; }   /* buy card first on mobile */
@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
  .split > aside { order: 0; position: sticky; top: 84px; }
}

/* Inputs: 16px font prevents iOS zoom-on-focus; full-width on mobile. */
.field input, .field select, .field textarea { font-size: 16px; }

/* Hero + section titles scale fluidly. */
.course-hero { padding: 22px 18px; }
.course-hero h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
.section-title { font-size: clamp(1.15rem, 4.5vw, 1.3rem); }
@media (min-width: 768px) { .course-hero { padding: 30px; } }

/* Top nav trims links on phones (bottom nav covers navigation). */
.nav .container { gap: 10px; }
@media (max-width: 720px) { .nav a.navlink.hide-sm { display: none; } }

/* App-style bottom navigation — phones only. Rendered by ui.js when signed in. */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--navy); border-top: 1px solid rgba(255,255,255,.08);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--teal-2); font-size: .68rem; padding: 4px 10px; min-width: 56px; min-height: 44px;
    justify-content: center; border-radius: 10px;
  }
  .bottom-nav a .ic { font-size: 1.2rem; line-height: 1; }
  .bottom-nav a.active { color: var(--accent); }
  /* Keep page content clear of the fixed bar. */
  body.has-bottom-nav { padding-bottom: 68px; }
  /* A fixed bottom purchase bar would overlap; lift it above the nav. */
}

/* Tables stay scrollable on small screens (already .table-wrap overflow-x). */
@media (max-width: 560px) {
  table.data th, table.data td { padding: 9px 10px; font-size: .84rem; white-space: nowrap; }
  .course-hero .hero-meta { gap: 10px; font-size: .85rem; }
  .stat .n { font-size: 1.5rem; }
}

/* ===== Modern additions ===== */

/* Ad banner (top of screen) */
.ad-strip { display: grid; gap: 10px; margin: 16px 0; }
.ad-banner {
  display: flex; align-items: center; gap: 14px; overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--navy), var(--navy-3));
  color: var(--text-invert); padding: 14px 18px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.05);
}
.ad-banner .ad-emoji { font-size: 1.4rem; }
.ad-banner .ad-title { font-weight: 600; }
.ad-banner .ad-cta { margin-inline-start: auto; background: var(--accent); color: #04211b; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.ad-banner img.ad-img { max-height: 64px; border-radius: 8px; }

/* Hero for course detail */
.course-hero {
  border-radius: var(--radius-lg); overflow: hidden; color: var(--text-invert);
  background: radial-gradient(1200px 300px at 100% -20%, rgba(22,200,163,.25), transparent),
              linear-gradient(135deg, var(--navy), var(--navy-3));
  padding: 30px; margin-bottom: 22px; box-shadow: var(--shadow);
}
.course-hero h1 { font-size: 1.9rem; line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.02em; }
.course-hero .hero-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--teal-2); font-size: .92rem; }
.course-hero .hero-meta b { color: var(--accent); }
.badge-soft { background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; }

/* Buy / sticky card */
.buy-card { border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow); padding: 20px; }
.buy-card .price-big { font-family: var(--font); font-size: 2.1rem; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.buy-card .price-cur { font-size: .95rem; color: var(--text-muted); font-weight: 600; }
.buy-card .price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }

/* Lesson list refined */
.lesson-list { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: rgba(22,200,163,.05); }

/* Card hover lift */
.card { transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,32,.12); }

/* Section band */
.band { display:flex; align-items:center; gap:10px; margin: 26px 0 14px; }
.band h2 { font-size: 1.25rem; }
.band .line { flex:1; height:1px; background: #d3d7cd; }

/* Live session row */
.live-row { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #d9ddd3; border-radius:12px; margin-bottom:10px; background:#fff; }
.live-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(22,200,163,.2); }
.live-row.LIVE .live-dot { background:var(--error); box-shadow:0 0 0 4px rgba(194,65,47,.2); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ===== Icon alignment (inline SVG icons replace emoji) ===== */
[data-icon] { display: inline-flex; align-items: center; vertical-align: middle; }
.btn svg, .price svg, .status svg, .chip svg { vertical-align: middle; flex-shrink: 0; }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lesson-row .lock { display: inline-flex; align-items: center; gap: 4px; }
.course-hero .hero-meta b { margin: 0 2px; }

/* ===== Brand logo (Mansah / منصّه) ===== */
.brand-logo { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo svg { display: block; flex-shrink: 0; }
.brand-word { font-family: var(--font); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text-invert); }
/* On light backgrounds (auth pages) the wordmark should be dark. */
.auth-card .brand-logo .brand-word, .on-light .brand-word { color: var(--navy); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }

/* Clickable ad banner */
a.ad-banner.clickable { cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.ad-banner.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,32,.16); }
.ad-cta { transition: filter .12s ease; }
a.ad-banner.clickable:hover .ad-cta { filter: brightness(1.05); }

/* ===== Catalog filters ===== */
.filters { margin: 8px 0 18px; display: grid; gap: 12px; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  border: 1px solid #c7ccc2; background: #fff; color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: .85rem; cursor: pointer;
  min-height: 0; transition: all .12s ease;
}
.filter-chip:hover { border-color: var(--teal); }
.filter-chip.active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }