/* =====================================================================
   Souq — سوق. Marketplace surface (subdomain). Arabic RTL-first, built on
   the shared brand tokens (tokens.css). Lifetime-deal store for builder
   products. Prototype styling — visual pass for review before backend.
   ===================================================================== */

.sq-body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-arabic);
  -webkit-font-smoothing: antialiased;
}

/* ---- Nav — reuses the site's .ao-nav smart navbar (navbar.css/.js) ----
   Only the Souq-specific brand + dark-fold + offset tweaks live here. */
/* Two-line brand: سوق (big) over من عبدول أسامة (small), beside the round mark. */
.sq-brandtext { display: inline-flex; flex-direction: column; line-height: 1.04; }
.sq-brandtext b { font-family: var(--font-arabic-display); font-weight: 800; font-size: 19px; font-feature-settings: var(--ff-display); }
.sq-brandtext small { font-size: 11px; font-weight: 600; color: var(--fg-tertiary); margin-top: 2px; }
/* Flat over the dark hero → brand text goes light (matches .ao-brand-name). */
.nav-top.nav-on-dark .sq-brandtext b { color: #fff; }
.nav-top.nav-on-dark .sq-brandtext small { color: rgba(255,255,255,.65); }
/* Sign-in — salmon so it reads on both the dark hero and the light pill. */

/* The dark hero slides under the transparent bar — give it headroom. */
body.nav-overlap .sq-hero-inner { padding-top: clamp(104px, 13vh, 140px); }
/* (Skyline bottom-anchoring is now handled globally in tokens.css.) */

/* ---- Buttons ---------------------------------------------------------- */
.sq-btn {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s, filter .15s, background .15s, border-color .15s;
}
/* Block buttons are width:100% — border-box keeps padding INSIDE that width
   so a full-width CTA never spills past its card. */

.sq-btn:active { transform: scale(.98); }
/* Grounded shadow (negative spread) sits directly under the button — no
   wide salmon halo bleeding out on light cards like the buybox. */
.sq-btn-primary { background: var(--abdul-gradient-salmon); color: #fff; box-shadow: 0 6px 16px -8px rgba(245,83,106,.55); }
.sq-btn-primary:hover { filter: brightness(1.04) saturate(1.05); box-shadow: 0 9px 20px -8px rgba(245,83,106,.6); }

.sq-btn-lg { padding: 15px 30px; font-size: 16px; }

/* ---- Nav -------------------------------------------------------------- */

/* ---- Hero (night-sky band, ties Souq to the brand) -------------------- */
.sq-hero { position: relative; overflow: hidden; background: var(--abdul-gradient-core); color: #fff; }
.sq-hero-inner { max-width: 1120px; margin-inline: auto; padding: 62px 20px 56px; position: relative; z-index: 2; text-align: center; }
.sq-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
}
.sq-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--abdul-salmon-400); }
.sq-hero-title { font-family: var(--font-arabic-display); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.28; margin: 0 auto 16px; max-width: 16ch; font-feature-settings: var(--ff-display); }
.sq-hero-title .accent { background: var(--abdul-gradient-salmon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sq-hero-sub { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.85; color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 26px; }

.sq-hero-note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.62); }

/* ---- Toolbar ---------------------------------------------------------- */

/* ---- Product grid + cards -------------------------------------------- */

/* cover uses the shared 8-palette recipe via [data-cover] (vars in tokens.css) */

/* card upvote — a boxed ▲-over-count score, so a high vote count reads
   clearly as "more people recommend this" (Product-Hunt style). */

/* ---- Product page ----------------------------------------------------- */
/* padding-block only — the 3-value shorthand this replaced also zeroed
   left/right, which fought .sq-wrap's padding-inline and let this page's
   content (cover, title, prose, buy box) run flush to the screen edges
   on mobile. */

/* buy box (sticky sidebar) */

/* prominent upvote (product page) — social proof + action in one control.
   The count lives in a filled ▲-chip so the vote reads as a real signal. */

/* builder mini card on product page */

/* ---- Builder page ----------------------------------------------------- */

/* ---- Forms (become a builder / submit product) ----------------------- */

/* status chips (builder dashboard / product states) */

/* ---- Footer ----------------------------------------------------------- */
.sq-foot { border-top: 1px solid var(--border-subtle); padding: 30px 20px; text-align: center; color: var(--fg-tertiary); font-size: 13px; }
.sq-foot a { color: var(--fg-secondary); text-decoration: none; font-weight: 600; }
.sq-foot .row { display: flex; gap: 16px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }

/* ---- Responsive ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
   .sq-btn { transition: none; }
}

/* ---- Flash + feedback ------------------------------------------------- */

/* Match the site-wide homepage gradient + leave room for the skyline seam. */
.sq-hero { background: var(--abdul-gradient-radial-glow); }
.sq-hero-inner { padding-bottom: clamp(96px, 13vh, 150px); }

/* ======================================================================
   Souq v2 — creator wizard (resumable, mobile-first RTL)
   ====================================================================== */

/* progress rail — horizontal, scrolls on small screens */

/* upload dropzones */

/* flash */

/* codes table */

/* review */

.sq-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- Phase 5: payout nudge + terms/legal ------------------------------ */