/* ============================================================
   nav.css — Shared navigation component for tradingline.net
   Modern glass-morphism header with mobile hamburger menu
   ============================================================ */

/* --- Header Container --- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(243, 246, 246, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border, #DCE6E4);
  transition: box-shadow 0.3s ease;
}
#site-header.scrolled {
  box-shadow: 0 2px 20px rgba(14, 92, 86, 0.06);
}

/* --- Nav Bar --- */
.nav-bar {
  position: relative; /* .nav-logo below is absolutely centered against this */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Logo — true dead-center regardless of how wide the start/end groups
   are (a plain flex "space-between" 3rd child only centers when both
   siblings are equal width, which they never are here). Pulled out of
   flex flow entirely and centered against .nav-bar directly. --- */
.nav-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink, #132B2A);
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo-mark {
  /* fluid, not tiered: scales continuously with viewport width so there's
     no hard breakpoint boundary where it can suddenly become too wide
     relative to the header-icon zones on either side (which is what
     caused real overlap at some in-between widths when this was a set of
     fixed per-breakpoint heights) */
  height: clamp(28px, 5vw + 14px, 60px);
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: none; /* one of .nav-logo-day / .nav-logo-dark is shown, per theme, below — transparent-bg artwork, no card/box styling needed */
}
/* Two full logo files, swapped instantly on theme toggle — light theme
   (default, no data-theme or data-theme="light") shows the light/day
   artwork; data-theme="dark" shows the dark/night artwork. */
:root:not([data-theme="dark"]) .nav-logo-day { display: block; }
:root[data-theme="dark"] .nav-logo-dark { display: block; }
.nav-brand-text { line-height: 1; }
html[dir="ltr"] .nav-brand-text {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 6px;
  font-size: 18px;
  font-weight: 800;
}
.nav-logo .mark {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 22px;
}
.nav-logo .mark span {
  width: 5px;
  border-radius: 2px;
}

/* --- Center Nav Links (Desktop) --- */
.nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-soft, #4C6462);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover {
  background: var(--surface-soft, #EAF1F0);
  color: var(--ink, #132B2A);
}
.nav-link.active {
  background: var(--primary-tint, #DCEBE9);
  color: var(--primary-dark, #0A3F3B);
  font-weight: 700;
  border-color: rgba(14, 92, 86, 0.1);
}

/* --- Right Side Actions --- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Language Toggle */
.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--primary, #0E5C56);
  background: transparent;
  border: 1.5px solid var(--primary, #0E5C56);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-lang-btn:hover {
  background: var(--primary, #0E5C56);
  color: #fff;
}

/* Forex / Crypto Mode Toggle */
.nav-mode-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--border, #DCE6E4);
  overflow: hidden;
  background: var(--surface-soft, #EAF1F0);
}
.nav-mode-btn {
  padding: 6px 12px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-soft, #5B6B69);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nav-mode-btn.active {
  background: var(--primary, #0E5C56);
  color: #fff;
}
@media (max-width: 900px) {
  .nav-mode-btn { padding: 5px 9px; font-size: 10.5px; }
}

/* Theme Toggle */
.nav-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--primary, #0E5C56);
  background: transparent;
  border: 1.5px solid var(--border, #DCE6E4);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-theme-btn:hover {
  border-color: var(--primary, #0E5C56);
  background: var(--surface-soft, #EAF1F0);
}

/* Join / Sign Up Button */
.nav-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--primary, #0E5C56);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(14, 92, 86, 0.25);
}
.nav-join-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 92, 86, 0.35);
}

/* Greeting */
.nav-greeting {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink, #132B2A);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logout (desktop) */
.nav-logout-btn {
  display: none;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--coral, #E1614F);
  background: transparent;
  border: 1.5px solid var(--coral, #E1614F);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-logout-btn:hover {
  background: var(--coral, #E1614F);
  color: #fff;
}

/* Notification Bell */
.nav-notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #DCE6E4);
  background: var(--surface, #fff);
  color: var(--muted, #7C918F);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}
.nav-notif-btn:hover {
  border-color: var(--primary, #0E5C56);
  color: var(--primary, #0E5C56);
}
.nav-notif-btn .notif-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  min-width: 16px;
  height: 16px;
  background: var(--coral, #E1614F);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 4px;
  border: 2px solid var(--bg, #F3F6F6);
}

/* --- Hamburger Button --- */
.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #DCE6E4);
  background: var(--surface, #fff);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  transition: all 0.2s ease;
}
.nav-hamburger:hover {
  border-color: var(--primary, #0E5C56);
}

/* --- Start Group (hamburger + back button) --- */
.nav-start-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* --- Back Button --- */
.nav-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #DCE6E4);
  background: var(--surface, #fff);
  color: var(--ink-soft, #4C6462);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nav-back-btn:hover {
  border-color: var(--primary, #0E5C56);
  color: var(--primary, #0E5C56);
  background: var(--surface-soft, #EAF1F0);
}
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink, #132B2A);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Dropdown Menu — appears below header, no scroll needed --- */
#site-header { position: sticky; }
.nav-bar { position: relative; }
.nav-mobile {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DCE6E4);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0,0,0,0.06);
  padding: 10px;
  z-index: 999;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-mobile.open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* RTL = dropdown from right (Arabic) — under hamburger */
html[dir="rtl"] .nav-mobile { right: 16px; left: auto; }
html[dir="ltr"] .nav-mobile { left: 16px; right: auto; }
/* backdrop — subtle, covers page */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 58px;
  background: rgba(19, 43, 42, 0.12);
  z-index: 998;
}
.nav-backdrop.open { display: block; }
.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft, #4C6462);
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-mobile-link:hover,
.nav-mobile-link.active {
  background: var(--primary-tint, #DCEBE9);
  color: var(--primary-dark, #0A3F3B);
}
.nav-mobile-divider {
  height: 1px;
  background: var(--border, #DCE6E4);
  margin: 8px 0;
}
.nav-shortcuts-btn {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: inherit;
}
/* --- Grouped collapsible sections (native <details>/<summary>) --- */
.nav-group { margin: 2px 0; }
.nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink, #132B2A);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s ease;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-inline-end: 2px solid var(--muted, #7C918F);
  border-bottom: 2px solid var(--muted, #7C918F);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-inline-end: 2px;
}
.nav-group[open] summary::after { transform: rotate(-135deg); }
.nav-group summary:hover { background: var(--surface-soft, #EAF1F0); }
.nav-group-items {
  display: flex;
  flex-direction: column;
  padding-inline-start: 10px;
  margin-top: 2px;
}
.nav-group-items .nav-mobile-link { font-size: 14px; padding: 10px 16px; }
.nav-mobile-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  color: var(--coral, #E1614F);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-mobile-logout:hover {
  background: var(--coral-tint, #FBE7E3);
}

/* Desktop uses drawer like mobile — click ☰ to see full menu */
.nav-center { display: none !important; }
.nav-hamburger { display: flex !important; }
.nav-greeting { display: none !important; }
.nav-logout-btn { display: none !important; }

@media (max-width: 480px) {
  .nav-bar { padding: 10px 16px; }
  .nav-logo { font-size: 18px; }
  .nav-join-btn { padding: 7px 14px; font-size: 12px; }
  .nav-mobile { padding: 8px 16px 16px; }
}

/* ============================================================
   Mobile header decluttering (≤640px) — desktop layout/DOM order
   is untouched; this block only changes what's VISIBLE and WHERE
   a couple of elements sit at phone widths.

   Result: hamburger alone at the start corner · logo truly centered
   (see .nav-logo above, absolute-positioned at all widths) · language
   + theme + notif bell (+ join button for guests) at the other
   corner, all real 40px touch targets · Forex/Crypto moves into the
   drawer as a "quick settings" row (language stays in the header per
   the owner's explicit requirement — never hidden in the hamburger)
   · the back arrow becomes a floating button pinned to the bottom of
   the screen instead of fighting for row space.
   ============================================================ */
.nav-back-fab { display: none; }
.nav-drawer-settings { display: none; }

@media (max-width: 640px) {
  .nav-bar { gap: 4px; }

  .nav-mode-toggle-desktop { display: none !important; }

  .nav-start-group { gap: 3px; }
  .nav-right { gap: 3px; }
  .nav-hamburger, .nav-theme-btn, .nav-notif-btn {
    width: 40px; height: 40px; /* min 40px touch target, true circles */
  }
  .nav-lang-btn { min-width: 40px; height: 40px; padding: 0 8px; font-size: 11.5px; }
  .nav-theme-btn { font-size: 16px; }
  .nav-join-btn { padding: 0 12px; font-size: 11.5px; height: 40px; }
  /* guests: the join CTA needs the room theme-toggle would otherwise take —
     language stays (required), theme is one tap away in the drawer instead */
  .nav-right:has(.nav-join-btn) .nav-theme-btn { display: none; }

  /* Forex/Crypto: quick-settings row at the top of the drawer */
  .nav-drawer-settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--surface-soft, #EAF1F0);
    border-radius: 12px;
  }
  .nav-drawer-settings .nav-mode-toggle-mobile { margin-inline-end: auto; }
  .nav-theme-btn-drawer { width: 36px; height: 36px; flex-shrink: 0; }

  /* back arrow — hide the desktop inline one, .nav-back-fab (a sibling of
     #site-header, see nav.js) takes over as a floating button pinned to
     the bottom of the screen, out of the crowded top row entirely */
  .nav-back-btn { display: none !important; }
  .nav-back-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    inset-inline-start: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--border, #DCE6E4);
    color: var(--ink-soft, #4C6462);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    z-index: 900;
    background: var(--surface, #fff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
      transform: translateY(calc(-1 * var(--mf-dodge-start)));
    transition: transform 0.18s ease;
}
}

@media (max-width: 400px) {
  /* extra-narrow phones: the language button's own text can get tight
     next to theme+notif — drop its horizontal padding a touch further */
  .nav-lang-btn { padding: 0 9px; font-size: 11px; }
  .nav-join-btn { padding: 0 10px; font-size: 11px; }
}

@media (max-width: 350px) {
  /* very small/old phones (≤iPhone 5 width) — shrink the corner icons
     themselves rather than let anything overlap the centered logo
     (.nav-logo-mark itself doesn't need a rule here — it's already
     fluid via clamp(), see the base rule) */
  .nav-hamburger, .nav-theme-btn, .nav-notif-btn { width: 34px; height: 34px; }
  .nav-lang-btn { min-width: 34px; height: 34px; padding: 0 7px; font-size: 10.5px; }
  .nav-join-btn { padding: 0 8px; font-size: 10.5px; height: 34px; }
}

/* RTL/LTR text alignment inside drawer */
html[dir="rtl"] .nav-mobile { direction: rtl; }
html[dir="rtl"] .nav-mobile-link,
html[dir="rtl"] .nav-mobile-logout { text-align: right; }
html[dir="ltr"] .nav-mobile { direction: ltr; }
html[dir="ltr"] .nav-mobile-link,
html[dir="ltr"] .nav-mobile-logout { text-align: left; }

/* Top nav — prevent wrapping on mid-width screens */
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-center { gap: 0; }
  .nav-link { padding: 7px 10px; font-size: 12.5px; }
  .nav-bar { padding: 10px 14px; }
}

/* Scroll behavior */
body { padding-top: 0; }

/* ============================================================
   KEYBOARD SHORTCUTS MODAL (Batch 7) — opened via "?" or the drawer
   entry. Premium purple (light theme) / gold (dark theme) accent glow,
   matching the showpiece logo halo used elsewhere on the platform.
   ============================================================ */
.nav-shortcuts-modal { display: none; position: fixed; inset: 0; z-index: 10050; align-items: center; justify-content: center; }
.nav-shortcuts-modal.open { display: flex; }
.nav-shortcuts-backdrop { position: absolute; inset: 0; background: rgba(19, 43, 42, 0.45); backdrop-filter: blur(3px); }
.nav-shortcuts-panel {
  position: relative;
  width: 420px;
  max-width: 92vw;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #DCE6E4);
  border-radius: 18px;
  padding: 20px 22px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(139, 92, 246, 0.12);
  animation: navShortcutsPop 0.18s ease;
}
:root[data-theme="dark"] .nav-shortcuts-panel {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(216, 180, 92, 0.16);
}
@keyframes navShortcutsPop {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.nav-shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nav-shortcuts-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink, #132B2A); }
.nav-shortcuts-x {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border, #DCE6E4);
  background: var(--surface, #fff); color: var(--ink-soft, #4C6462); cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.nav-shortcuts-x:hover { border-color: rgba(139, 92, 246, 0.5); color: rgba(139, 92, 246, 1); }
:root[data-theme="dark"] .nav-shortcuts-x:hover { border-color: rgba(216, 180, 92, 0.5); color: #D8B45C; }
.nav-shortcuts-section { margin-top: 14px; }
.nav-shortcuts-section-title { font-size: 12.5px; font-weight: 800; color: rgba(139, 92, 246, 1); margin-bottom: 8px; }
:root[data-theme="dark"] .nav-shortcuts-section-title { color: #D8B45C; }
.nav-shortcuts-section-title small { font-weight: 600; color: var(--muted, #7C918F); }
.nav-shortcuts-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft, #4C6462);
  border-bottom: 1px solid var(--border, #DCE6E4);
}
.nav-shortcuts-row:last-child { border-bottom: none; }
.nav-shortcuts-keys { display: flex; gap: 4px; }
.nav-shortcuts-keys kbd {
  display: inline-block; min-width: 22px; text-align: center; padding: 3px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 700;
  color: var(--ink, #132B2A); background: var(--surface-soft, #EAF1F0);
  border: 1px solid var(--border, #DCE6E4); border-bottom-width: 2px; border-radius: 6px;
}
@media (max-width: 480px) {
  .nav-shortcuts-panel { padding: 16px 16px 18px; }
  .nav-shortcuts-row { font-size: 12.5px; }
}

/* ============================================================
   FLOATING LAYOUT SYSTEM — every floating control on the page shares
   ONE bottom-trailing-edge stack, so nothing can overlap:
     bottom slot  : the AI assistant FAB (assistant-widget.js, logged-in only)
     slot above   : the social FAB (this file + nav.js); when there is no
                    AI FAB (guests), the social FAB drops into the bottom slot
     above that   : the social menu, opening UPWARD (never toward a composer)
   The mobile back-fab lives on the OPPOSITE (leading) edge.
   nav.js (MasarFloat) measures the stack against every text input /
   composer row on the page and lifts the whole stack (--mf-dodge) so the
   clear zone around a chat / message / comment box is always kept.
   RTL/LTR: everything is inset-inline-*, so the side mirrors with dir.
   ============================================================ */
:root {
  --mf-edge: 20px;     /* distance from the trailing edge */
  --mf-bottom: 20px;   /* distance from the bottom of the viewport */
  --mf-gap: 10px;      /* gap between stacked floating controls */
  --mf-ai: 56px;       /* AI FAB size (assistant-widget.js reads these too) */
  --mf-social: 48px;   /* social FAB size — ≥ 44px touch target */
  --mf-dodge: 0px;     /* set by MasarFloat: how far the stack is lifted above a composer */
  --mf-dodge-start: 0px;   /* same, for the leading-edge back-fab */
  --mf-social-bottom: var(--mf-bottom);
}
@media (max-width: 768px) {
  :root { --mf-edge: 14px; --mf-ai: 50px; }
}
body.mf-has-ai { --mf-social-bottom: calc(var(--mf-bottom) + var(--mf-ai) + var(--mf-gap)); }

.nav-social-fab {
  position: fixed;
  bottom: var(--mf-social-bottom);
  /* centred on the AI FAB's column */
  inset-inline-end: calc(var(--mf-edge) + (var(--mf-ai) - var(--mf-social)) / 2);
  width: var(--mf-social);
  height: var(--mf-social);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #DCE6E4);
  background: var(--surface, #fff);
  color: var(--ink-soft, #4C6462);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 9997;
  transform: translateY(calc(-1 * var(--mf-dodge)));
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-social-fab:hover { box-shadow: 0 10px 26px rgba(139, 92, 246, 0.3); border-color: rgba(139, 92, 246, 0.55); color: rgba(139, 92, 246, 1); }
.nav-social-fab:focus-visible { outline: 3px solid rgba(139, 92, 246, 0.9); outline-offset: 3px; }
:root[data-theme="dark"] .nav-social-fab:hover,
:root[data-theme="dark"] .nav-social-fab[aria-expanded="true"] { border-color: rgba(216, 180, 92, 0.6); color: #D8B45C; }
.nav-social-fab[aria-expanded="true"] { border-color: rgba(139, 92, 246, 0.6); color: rgba(139, 92, 246, 1); }
/* the icon: a share glyph that rotates 90° and cross-fades into a close mark */
.nav-social-fab .nav-social-ico { position: relative; width: 22px; height: 22px; transform: rotate(0deg); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); }
.nav-social-fab[aria-expanded="true"] .nav-social-ico { transform: rotate(90deg); }
.nav-social-fab .nav-social-ico svg { position: absolute; inset: 0; width: 22px; height: 22px; transition: opacity 0.16s ease; }
.nav-social-fab .nav-social-ico-close { opacity: 0; }
.nav-social-fab[aria-expanded="true"] .nav-social-ico-share { opacity: 0; }
.nav-social-fab[aria-expanded="true"] .nav-social-ico-close { opacity: 1; }
/* the AI assistant panel covers this corner while it is open — step aside instead of sitting underneath it */
body.mf-ai-open .nav-social-fab, body.mf-ai-open .nav-social-menu { opacity: 0; pointer-events: none; visibility: hidden; }

.nav-social-menu {
  position: fixed;
  bottom: calc(var(--mf-social-bottom) + var(--mf-social) + var(--mf-gap));
  inset-inline-end: var(--mf-edge);
  z-index: 9996;
  display: flex;
  flex-direction: column-reverse;   /* first link sits nearest the button; the list grows upward */
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - var(--mf-social-bottom) - var(--mf-social) - var(--mf-gap) - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--mf-dodge)));
  transition: transform 0.18s ease, opacity 0.15s ease;
}
.nav-social-menu::-webkit-scrollbar { display: none; }
.nav-social-menu.open { pointer-events: auto; }
.nav-social-menu li { list-style: none; margin: 0; padding: 0; }
.nav-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 6px;   /* icon side is tightened below per direction */
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #DCE6E4);
  color: var(--ink, #132B2A);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  /* closed state: invisible, slightly below and smaller; each item animates in sequence (delay set inline by nav.js) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.2s, border-color 0.15s ease, box-shadow 0.15s ease;
}
html[dir="rtl"] .nav-social-link { padding: 6px 6px 6px 14px; }
.nav-social-menu.open .nav-social-link {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(.2,.8,.2,1), visibility 0s, border-color 0.15s ease, box-shadow 0.15s ease;
  transition-delay: var(--mf-i, 0s), var(--mf-i, 0s), 0s, 0s, 0s;
}
.nav-social-link:hover { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 8px 22px rgba(139, 92, 246, 0.28); }
.nav-social-link:focus-visible { outline: 3px solid rgba(139, 92, 246, 0.9); outline-offset: 2px; }
.nav-social-link .nav-social-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ink-soft, #4C6462);
}
.nav-social-link .nav-social-glyph svg { width: 18px; height: 18px; }
.nav-social-link .nav-social-label { flex: 1 1 auto; }
/* brand colours are the brand identity, identical in both themes */
.nav-social-glyph-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.nav-social-glyph-threads, .nav-social-glyph-x, .nav-social-glyph-tiktok { background: #000; }
.nav-social-glyph-facebook { background: #1877F2; }
.nav-social-glyph-telegram { background: #229ED9; }
.nav-social-glyph-youtube { background: #FF0000; }
.nav-social-glyph-whatsapp { background: #25D366; }
.nav-social-glyph-snapchat { background: #FFFC00; color: #000; }
.nav-social-glyph-linkedin { background: #0A66C2; }
.nav-social-glyph-discord { background: #5865F2; }
.nav-social-glyph-website { background: var(--primary, #0E5C56); }
.nav-social-badge {
  position: absolute;
  bottom: -4px;
  inset-inline-end: -5px;
  font-size: 10px;
  line-height: 1;
  background: var(--surface, #fff);
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .nav-social-fab, .nav-social-fab .nav-social-ico, .nav-social-menu, .nav-social-link { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ============================================================
   VOICE CALL WIDGET (call-widget.js) — a small floating card, not a
   full-screen takeover, so an incoming call never blocks the rest of
   the page. Purple/gold premium accents matching the rest of the
   platform's branding.
   ============================================================ */
#masarCallWidget { display: none; }
#masarCallWidget.mc-show { display: block; }
.mc-backdrop { position: fixed; inset: 0; z-index: 10060; background: transparent; pointer-events: none; }
.mc-card {
  /* Top + inline-start corner — the only genuinely free one. Bottom is
     claimed everywhere (AI assistant FAB + social-bar mobile toggle at
     inset-inline-end/bottom:20px, the back-fab + tools.html demo-CTA at
     inset-inline-start/bottom:20px). inset-inline-end is ALSO where the
     social bar lives at top:50% (vertically centered, so any top-side
     placement on that edge still collides with it on shorter viewports).
     inset-inline-start has nothing above the bottom row, at any height. */
  position: fixed;
  top: 76px;
  inset-inline-start: 20px;
  z-index: 10061;
  width: 260px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #DCE6E4);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.15);
  animation: mcPop 0.2s ease;
}
:root[data-theme="dark"] .mc-card { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(216, 180, 92, 0.2); }
@keyframes mcPop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mc-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  background: linear-gradient(135deg, #8B5CF6, #6D5AE6);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; font-family: 'Cairo', sans-serif; overflow: hidden;
  animation: mcPulse 1.6s ease-in-out infinite;
}
:root[data-theme="dark"] .mc-avatar { background: linear-gradient(135deg, #D8B45C, #8B5CF6); }
.mc-connected .mc-avatar { animation: none; }
@keyframes mcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } }
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-name { font-weight: 800; font-size: 15px; color: var(--ink, #132B2A); font-family: 'Cairo', sans-serif; margin-bottom: 3px; }
.mc-status { font-size: 12.5px; color: var(--ink-soft, #4C6462); font-weight: 600; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.mc-actions { display: flex; gap: 8px; justify-content: center; }
.mc-btn {
  flex: 1; border: none; border-radius: 999px; padding: 10px 12px; font-weight: 700; font-size: 12.5px;
  cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: transform 0.15s ease;
}
.mc-btn:hover { transform: scale(1.04); }
.mc-accept { background: #0E5C56; color: #fff; }
.mc-reject { background: #E1614F; color: #fff; }
.mc-mute { background: var(--surface-soft, #EAF1F0); color: var(--ink-soft, #4C6462); }
@media (max-width: 480px) {
  .mc-card { inset-inline-end: 12px; inset-inline-start: 12px; width: auto; top: 66px; }
}

/* ============================================================
   GUIDANCE BRAIN (Phase 3 Batch 0) — guidance-widget.js. Shared
   building blocks for the persistent strip (.mg-strip, injected right
   below the header) and the embedded card (.mg-card, used on the home
   page + dashboard) + the "Your Journey" timeline. Premium purple/gold,
   the pulse animation matches the platform's established logo-pulse
   keyframe values (0.82->1.18 scale, 0.45->1 opacity, 3s) for a
   consistent "breathing" language across every pulsing element.
   ============================================================ */
.mg-clickzone { color: inherit; text-decoration: none; cursor: pointer; }
.mg-icon {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}
:root[data-theme="dark"] .mg-icon { background: linear-gradient(135deg, rgba(216, 180, 92, 0.2), rgba(216, 180, 92, 0.06)); }
.mg-icon-big { width: 46px; height: 46px; font-size: 20px; }
.mg-pulse-dot {
  position: absolute; top: -2px; inset-inline-end: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #8B5CF6; box-shadow: 0 0 0 2px var(--surface, #fff);
  animation: mgPulseDot 3s ease-in-out infinite;
}
:root[data-theme="dark"] .mg-pulse-dot { background: #D8B45C; }
@keyframes mgPulseDot { 0%, 100% { transform: scale(0.82); opacity: 0.45; } 50% { transform: scale(1.18); opacity: 1; } }

/* ---- persistent strip ---- */
.mg-strip {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.07), rgba(139, 92, 246, 0.02));
  border-bottom: 1px solid var(--border, #DCE6E4);
  /* This strip is injected asynchronously after the header (a sticky
     element) has already rendered. Without this, Chrome's CSS scroll
     anchoring "compensates" for the late-inserted content by auto-
     scrolling the page down by exactly the strip's height, which then
     makes the sticky header visually overlap/cover the strip. */
  overflow-anchor: none;
  /* Pages with zero top padding on their own content wrapper (e.g.
     rooms.html's back-link, margin-bottom-only) would otherwise sit
     flush against this strip's border with no breathing room at all —
     this margin belongs here, not per-page, since any page's first
     element can have the same zero-top-margin pattern. */
  margin-bottom: 14px;
}
:root[data-theme="dark"] .mg-strip { background: linear-gradient(90deg, rgba(216, 180, 92, 0.09), rgba(216, 180, 92, 0.02)); }
/* PHASE5 batch 4 — at tier 0 the strip IS the way forward, not a tip beside it: a brand-new
   member is looking at a deliberately short menu, so this has to read as the primary action.
   Still closeable; only louder. */
.mg-strip.mg-strip-primary { background: linear-gradient(90deg, var(--tint-blue, rgba(45,108,246,.12)), rgba(45,108,246,.03)); border-bottom: 2px solid var(--blue, #2D6CF6); }
.mg-strip.mg-strip-primary .mg-body b, .mg-strip.mg-strip-primary .mg-title { font-weight: 900; }
.mg-strip.mg-strip-primary .mg-cta, .mg-strip.mg-strip-primary .btn { background: var(--blue, #2D6CF6); color: #fff; border-color: var(--blue, #2D6CF6); }
:root[data-theme="dark"] .mg-strip.mg-strip-primary { background: linear-gradient(90deg, rgba(45,108,246,.18), rgba(45,108,246,.04)); }
@media (prefers-reduced-motion: reduce) { .mg-strip.mg-strip-primary { transition: none; } }
.mg-strip-inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 12px;
}
.mg-strip .mg-icon { width: 28px; height: 28px; font-size: 13px; }
.mg-strip .mg-body { flex: 1; min-width: 0; }
.mg-strip .mg-title { font-size: 12.5px; font-weight: 700; color: var(--ink, #132B2A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-strip .mg-text { display: none; }
.mg-cta {
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: #8B5CF6;
  text-decoration: none; white-space: nowrap; padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid rgba(139, 92, 246, 0.35);
}
:root[data-theme="dark"] .mg-cta { color: #D8B45C; border-color: rgba(216, 180, 92, 0.4); }
.mg-cta:hover { background: rgba(139, 92, 246, 0.1); }
:root[data-theme="dark"] .mg-cta:hover { background: rgba(216, 180, 92, 0.12); }
.mg-dismiss {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted, #7C918F); cursor: pointer; font-size: 12px;
}
.mg-dismiss:hover { background: var(--surface-soft, #EAF1F0); }
@media (max-width: 600px) { .mg-strip .mg-title { max-width: 140px; } }

/* ---- embedded card (home / dashboard) ---- */
.mg-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #DCE6E4);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.08);
}
:root[data-theme="dark"] .mg-card { box-shadow: 0 10px 30px rgba(216, 180, 92, 0.08); }
.mg-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #8B5CF6;
  margin-bottom: 12px; text-transform: uppercase;
}
:root[data-theme="dark"] .mg-label { color: #D8B45C; }
.mg-primary { display: flex; align-items: flex-start; gap: 14px; }
.mg-primary .mg-body { flex: 1; }
.mg-primary .mg-title { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 15.5px; color: var(--ink, #132B2A); margin-bottom: 4px; }
.mg-primary .mg-text { font-size: 13px; color: var(--ink-soft, #4C6462); line-height: 1.6; margin-bottom: 10px; }
.mg-primary .mg-cta { background: linear-gradient(135deg, #8B5CF6, #6D5AE6); color: #fff; border: none; padding: 8px 18px; }
:root[data-theme="dark"] .mg-primary .mg-cta { background: linear-gradient(135deg, #D8B45C, #8B5CF6); color: #241F00; }
.mg-secondary { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #DCE6E4); display: flex; flex-direction: column; gap: 10px; }
.mg-secondary-item { display: flex; align-items: center; gap: 10px; }
.mg-secondary-item .mg-body { flex: 1; }
.mg-secondary-item .mg-title { font-size: 13px; font-weight: 700; color: var(--ink-soft, #4C6462); }
.mg-secondary-item .mg-cta { font-size: 11.5px; padding: 4px 10px; background: transparent; }
@media (max-width: 480px) { .mg-primary { flex-wrap: wrap; } .mg-primary .mg-cta { width: 100%; text-align: center; } }

/* ---- "Your Journey" timeline ---- */
.mg-journey-title { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 15.5px; color: var(--ink, #132B2A); margin-bottom: 16px; }
.mg-journey-track { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.mg-jstep { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 84px; text-align: center; }
.mg-jdot {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; margin-bottom: 6px; border: 2px solid var(--border, #DCE6E4);
  background: var(--surface, #fff); color: var(--muted, #7C918F);
}
.mg-jstep-done .mg-jdot { background: linear-gradient(135deg, #8B5CF6, #6D5AE6); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .mg-jstep-done .mg-jdot { background: linear-gradient(135deg, #D8B45C, #8B5CF6); color: #241F00; }
.mg-jstep-todo .mg-jdot { border-color: #8B5CF6; color: #8B5CF6; }
:root[data-theme="dark"] .mg-jstep-todo .mg-jdot { border-color: #D8B45C; color: #D8B45C; }
.mg-jstep-locked .mg-jdot { opacity: 0.5; }
.mg-jlabel { font-size: 11px; font-weight: 600; color: var(--ink-soft, #4C6462); line-height: 1.4; }
.mg-jstep-locked .mg-jlabel { color: var(--muted, #7C918F); }
.mg-jline { flex-shrink: 0; width: 24px; height: 2px; background: var(--border, #DCE6E4); margin-top: 19px; }

/* ============================================================
   WELCOME TOUR (Phase 3 Batch 1) — welcome-tour.js. Short first-login
   modal, same purple/gold premium language as the Guidance Brain above.
   ============================================================ */
.wt-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(10, 8, 20, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
}
.wt-modal {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #DCE6E4);
  border-radius: 22px;
  padding: 34px 26px 26px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.18);
}
:root[data-theme="dark"] .wt-modal { box-shadow: 0 20px 60px rgba(216, 180, 92, 0.14); }
.wt-skip {
  position: absolute; top: 14px; inset-inline-end: 16px;
  background: transparent; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--muted, #7C918F);
}
.wt-skip:hover { color: var(--ink, #132B2A); }
.wt-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.05));
}
:root[data-theme="dark"] .wt-icon { background: linear-gradient(135deg, rgba(216, 180, 92, 0.22), rgba(216, 180, 92, 0.06)); }
.wt-title { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink, #132B2A); margin-bottom: 10px; }
.wt-body { font-size: 14px; color: var(--ink-soft, #4C6462); line-height: 1.7; margin-bottom: 22px; }
.wt-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 20px; }
.wt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #DCE6E4); transition: all .2s ease; }
.wt-dot-active { width: 20px; border-radius: 4px; background: #8B5CF6; }
:root[data-theme="dark"] .wt-dot-active { background: #D8B45C; }
.wt-next {
  width: 100%; padding: 13px; border: none; border-radius: 999px;
  font-family: 'Tajawal', sans-serif; font-weight: 800; font-size: 14.5px; cursor: pointer;
  background: linear-gradient(135deg, #8B5CF6, #6D5AE6); color: #fff;
}
:root[data-theme="dark"] .wt-next { background: linear-gradient(135deg, #D8B45C, #8B5CF6); color: #241F00; }
.wt-next:hover { opacity: 0.92; }
@media (max-width: 480px) { .wt-modal { padding: 30px 20px 22px; } }

/* ============================================================
   IA STAGE 2 (2026-09-18) — merged sections share a tab strip under the
   header (injected by nav.js injectSubnav), and the drawer's reveal toggle.
   ============================================================ */
.nav-subnav { position: sticky; top: 58px; z-index: 990; background: var(--bg, #F3F6F6); border-bottom: 1px solid var(--border, #DCE6E4); }
.nav-subnav-inner { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-subnav-inner::-webkit-scrollbar { display: none; }
.nav-subnav-tab { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border, #DCE6E4); background: var(--surface, #fff); color: var(--ink-soft, #4C6462); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-subnav-tab.active { background: var(--primary, #0E5C56); border-color: var(--primary, #0E5C56); color: #fff; }
.nav-subnav-tab:focus-visible { outline: 3px solid rgba(139, 92, 246, 0.9); outline-offset: 2px; }
:root[data-theme="dark"] .nav-subnav { background: var(--bg, #0f1817); }
.nav-reveal-btn { width: 100%; text-align: start; border: 1px dashed var(--border, #DCE6E4); background: transparent; color: var(--primary, #0E5C56); font-family: inherit; cursor: pointer; margin-top: 6px; }
.nav-reveal-btn:disabled { opacity: 0.6; cursor: wait; }
.nav-reveal-count { font-size: 12px; color: var(--muted, #7C918F); font-weight: 600; }
.nav-reveal-hint { font-size: 12px; color: var(--muted, #7C918F); padding: 4px 16px 8px; line-height: 1.6; }

/* ============================================================
   MASAR DESIGN SYSTEM HEADER (2026-09-22) — the same header on every page.
   Literal colours on purpose: this block must work on pages that do not
   load masar.css yet (the redesign lands page by page). Layout: hamburger ·
   brand (mark + MASAR wordmark + tagline) · quick links (desktop) · actions.
   ============================================================ */
#site-header { background: rgba(245, 247, 255, 0.92); border-bottom: 1px solid #E6E9F5; }
#site-header.scrolled { box-shadow: 0 6px 24px rgba(30, 27, 75, 0.08); }
#site-header .nav-bar { max-width: 1180px; padding: 10px 20px; gap: 12px; }
#site-header .nav-logo { position: static; transform: none; left: auto; top: auto; gap: 8px; }
#site-header .nav-logo-mark { height: 34px; }
.nav-brand-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.nav-wordmark { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: .12em; direction: ltr; unicode-bidi: isolate; color: #1E1B4B; }
.nav-tagline { font-family: 'Cairo', sans-serif; font-size: 10.5px; font-weight: 700; color: #6B7280; white-space: nowrap; }
:root[data-theme="dark"] .nav-wordmark { color: #F1F1FF; }
.nav-quick { display: flex; align-items: center; gap: 2px; margin-inline: auto; flex-wrap: nowrap; }
.nav-quick a { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 14px; color: #2B2A6E; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.nav-quick a:hover, .nav-quick a.active { background: #E8ECFF; color: #2D6CF6; }
:root[data-theme="dark"] .nav-quick a { color: #C9CCF5; }
:root[data-theme="dark"] .nav-quick a:hover, :root[data-theme="dark"] .nav-quick a.active { background: #22245A; color: #fff; }
.nav-search-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #D6DBEF; background: #fff; color: #1E1B4B; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }
.nav-search-btn svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .nav-search-btn { background: #1A1940; border-color: #3A3A7A; color: #F1F1FF; }
.nav-login-btn { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #1E1B4B; color: #1E1B4B; background: transparent; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.nav-login-btn:hover { background: #1E1B4B; color: #fff; }
:root[data-theme="dark"] .nav-login-btn { border-color: #F1F1FF; color: #F1F1FF; }
#site-header .nav-join-btn { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 13.5px; padding: 9px 18px; background: #2D6CF6; box-shadow: 0 8px 20px rgba(45, 108, 246, 0.3); }
#site-header .nav-join-btn:hover { background: #1F55D6; transform: translateY(-2px); }
#site-header .nav-lang-btn, #site-header .nav-logout-btn, #site-header .nav-mode-btn, .nav-mobile, .nav-mobile-link, .nav-group summary { font-family: 'Cairo', sans-serif; }
@media (max-width: 1100px) { .nav-quick a { font-size: 13px; padding: 8px 9px; } }
/* 2026-09-23 nav brief: Home and Crypto are primary and must stay visible on a phone too.
   Only the secondary quick links collapse into the drawer below 900px. */
@media (max-width: 900px) { .nav-quick a:not(.nav-quick-primary) { display: none; }
  /* Home + Crypto do not fit beside the logo and the controls on a phone, and shrinking
     them to fit would make "العملات الرقمية" unreadable. They get their own row under the
     header instead, centred and full width — still one tap, nothing hidden. */
  .nav-bar { flex-wrap: wrap; row-gap: 6px; }
  .nav-quick { order: 9; flex: 1 0 100%; margin-inline: 0; justify-content: center;
               gap: 6px; border-top: 1px solid var(--line, #E5E7EB); padding-top: 7px; }
  .nav-quick a.nav-quick-primary { font-size: 13px; padding: 6px 14px; }
  .nav-tagline { display: none; } .nav-login-btn { display: none; } }
@media (max-width: 768px) { #site-header .nav-logo-mark { height: 30px; } .nav-wordmark { font-size: 19px; } .nav-search-btn { display: none; } }
@media (max-width: 420px) { #site-header .nav-logo-mark { display: none !important; } }
/* header density: everything must fit on one row at 1280 in Arabic with a logged-out visitor (search · lang · theme · log in · start) */
@media (max-width: 1500px) { .nav-tagline { display: none; } .nav-quick a { font-size: 13.5px; padding: 8px 9px; } .nav-login-btn { padding: 8px 12px; font-size: 13px; } #site-header .nav-join-btn { padding: 9px 14px; font-size: 13px; } #site-header .nav-bar { gap: 8px; } }
@media (max-width: 420px) { #site-header .nav-right { gap: 5px; } #site-header .nav-join-btn { padding: 8px 11px; font-size: 12.5px; } #site-header .nav-lang-btn { padding: 6px 9px; font-size: 12px; } }
.nav-area-ico { display: inline-flex; width: 22px; height: 22px; margin-inline-end: 8px; vertical-align: middle; }
.nav-area-ico svg { width: 22px; height: 22px; }

/* the Crypto section link in the header row — a section of the site, given its own weight */
.nav-quick a.nav-quick-primary { font-weight: 900; }
.nav-quick a.nav-quick-primary.active { background: #E8ECFF; color: #2D6CF6; }
:root[data-theme="dark"] .nav-quick a.nav-quick-primary.active { background: #22245A; color: #fff; }

/* A closed section (admin coverage audit, 2026-09-23): the page's own content is hidden rather
   than removed, so the page's script can finish against its own DOM without throwing, while the
   visitor sees only the closed notice. */
html.masar-section-closed #app,
html.masar-section-closed main,
html.masar-section-closed body > .wrap:not(.masar-closed),
html.masar-section-closed body > section,
html.masar-section-closed .nav-subnav { display: none !important; }

/* The Arabic header does not fit on one line, at ANY window width.
   The bar's content box is capped at 1180px, and measured Arabic content is 1221px for a member
   and 1392px for a guest (who gets both a login and a join button) — so a wider screen never
   rescues it. The first fix hid the secondary links below 1440px, which traded an overflow for
   links the visitor could no longer see. Giving the links their own centred second row keeps
   every one of them on screen instead, and matches what the phone layout already does. English
   measures 1001px (member) / 1132px (guest) and stays on one line. */
html[lang="ar"] #site-header .nav-bar { flex-wrap: wrap; row-gap: 2px; }
html[lang="ar"] #site-header .nav-quick {
  order: 9; flex: 1 0 100%; margin-inline: 0; justify-content: center; }

/* English fits on one line only on a wide screen. Measured content that does not fit: a guest
   (who carries a login AND a join button, 131px more than a member) needs 1156px at 1100px, and
   a member needs 1025px at 1024px. Rather than one threshold per case, every header below 1200px
   uses the same second row — which is also what the phone layout does, so the behaviour changes
   once on the way down instead of three times. */
@media (max-width: 1320px) {
  #site-header .nav-bar { flex-wrap: wrap; row-gap: 2px; }
  #site-header .nav-quick {
    order: 9; flex: 1 0 100%; margin-inline: 0; justify-content: center; }
}

/* site-wide announcement banner (2026-09-23) — only for announcements the admin marks as banners */
.masar-ann-bar{background:var(--tint-yellow,#FFF0B3);border-bottom:2px solid var(--yellow,#FFD23F);
  font-family:'Cairo',system-ui,sans-serif;color:#5b4410}
.masar-ann-bar .wrap{display:flex;align-items:center;gap:10px;padding:11px 20px;flex-wrap:wrap}
.masar-ann-bar b{font-size:14px;font-weight:900;flex:0 0 auto}
.masar-ann-bar span{font-size:13.5px;font-weight:600;line-height:1.7;flex:1 1 200px;min-width:0}
.masar-ann-bar button{background:transparent;border:none;font-size:16px;line-height:1;cursor:pointer;
  color:inherit;flex:0 0 auto;padding:4px 8px;border-radius:8px}
.masar-ann-bar button:hover{background:rgba(0,0,0,.08)}
:root[data-theme="dark"] .masar-ann-bar{background:rgba(255,210,63,.14);color:#FFD96B}
@media (max-width:560px){.masar-ann-bar .wrap{padding:10px 14px}.masar-ann-bar b{flex:1 1 100%}}