/*
Theme Name: Tyreon
Theme URI: https://tyreon.com
Description: Egypt's premier tire shop directory theme
Version: 2.0.0
Author: Tyreon Team
Text Domain: tyreon
*/

/* ============================================
   TOKENS
   ============================================ */
:root {
  --c-bg:        #f8f9fa;
  --c-sur:       #ffffff;
  --c-sur2:      #f1f3f5;
  --c-sur3:      #e9ecef;
  --c-bor:       #dee2e6;

  /* ── BRAND (ADR-027) ──────────────────────────────────────────────────
     One blue. The theme carried two — #1B6FE8 here and #1B4FD8 in
     tyreon-modern.css — so a component rendered whichever its token happened
     to reach for. The owner picked the deeper one from the identity artwork
     (2026-07-27); every other blue in the theme now resolves to this.
     Changing the brand colour is now this one line. */
  --c-pri:       #1B4FD8;
  --c-pri-d:     #1640B0;   /* hover / pressed */
  --c-pri-l:     #EEF3FF;   /* pale wash behind badges and callouts */
  /* The wordmark, hero and footer navy from the identity. It already existed
     but only as --sb-bg, named for the sidebar it happened to be used in
     rather than for what it is. A brand colour needs a brand name. */
  --c-ink:       #0F1E3C;
  --c-ink-2:     #1E3055;
  /* ── SEMANTIC ─────────────────────────────────────────────────────────
     Each has three jobs and needs three values: the FILL (a badge, a bar, an
     icon), the pale WASH behind it (-l), and a TEXT-safe darker variant (-d).
     The third one is not decoration: #10b981 is 2.54:1 on white and #ef4444 is
     3.76:1 — both fail AA as body text, and both were being used as body text.
     The codebase had already invented the darker variants ad hoc (#047857 in
     14 places, #b45309 in 12, #b91c1c in 6) without naming them, so they drifted
     — five different greens, four ambers. Named once, used everywhere. */
  --c-grn:       #10b981;
  --c-grn-l:     #d1fae5;
  --c-grn-d:     #047857;   /* 5.5:1 on white — safe as text */
  --c-amb:       #f59e0b;
  --c-amb-l:     #fef3c7;
  --c-amb-d:     #b45309;   /* 5.0:1 */
  --c-red:       #ef4444;
  --c-red-l:     #fee2e2;
  --c-red-d:     #b91c1c;   /* 6.5:1 */
  /* Violet has no fill/wash counterpart — it exists only as a text accent for
     the agent/team surfaces, so only the -d value is declared. */
  --c-vio-d:     #5b21b6;   /* 9.0:1 */

  --c-txt:       #111827;
  --c-txt2:      #4b5563;
  --c-txt3:      #6b7280; /* S0-3b: was #9ca3af (~2.6:1 on white — fails WCAG AA); #6b7280 ≈ 4.8:1 */

  --rad:         8px;
  --rad-lg:      12px;
  --rad-xl:      16px;

  --sh-sm:       0 1px 3px rgba(0,0,0,.06);
  --sh:          0 2px 8px rgba(0,0,0,.08);
  --sh-lg:       0 8px 24px rgba(0,0,0,.1);

  --fnt: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
  --sidebar-w: 240px;
  --header-h: 60px;
  /* The mobile bottom bar's height, as a token rather than a number repeated in
     four places (.bottom-nav, .portal-bottom-nav, .mobile-bottom-nav, and the
     body padding that keeps content off it). Anything that has to sit ABOVE the
     bar — the preferences widget, floating buttons — measures from this, so a
     change to the bar moves them with it instead of leaving one behind on top
     of a nav item. */
  --bottom-nav-h: 60px;

  /* ── Aliases for token names the codebase already uses ──────────────────
   * Reported 2026-08-01: the customer's car-selection overlay is WHITE in dark
   * mode. Its background is `var(--card, #fff)` — and `--card` is not a token
   * this theme has ever defined, so the fallback wins permanently and no theme
   * switch can reach it.
   *
   * A scan found forty sites doing this, under sixteen names: --card, --c-bg2,
   * --c-muted, --c-mut, --c-border, --c-danger, --c-suc, --c-wrn… Each was
   * written from memory of what the token "should" be called, each fell back to
   * a light-mode literal, and none of them failed loudly — the page just looked
   * right in the theme the author happened to be using.
   *
   * Defining the aliases fixes all forty in one place. The alternative — editing
   * forty call sites — is forty chances to pick the wrong replacement, for the
   * same result. These are deliberately aliases and not new colours: every one
   * points at the token that already carries the value in both themes, so dark
   * mode gets its answer and nothing changes in light mode.
   *
   * New code should use the canonical names below the arrow. */
  --card:      var(--c-sur);    /* → --c-sur   */
  --c-bg2:     var(--c-sur2);   /* → --c-sur2  */
  --c-muted:   var(--c-txt3);   /* → --c-txt3  */
  --c-mut:     var(--c-txt3);   /* → --c-txt3  */
  --c-border:  var(--c-bor);    /* → --c-bor   */
  --c-danger:  var(--c-red-d);  /* → --c-red-d */
  --c-suc:     var(--c-grn);    /* → --c-grn   */
  --c-suc-l:   var(--c-grn-l);  /* → --c-grn-l */
  --c-wrn:     var(--c-amb);    /* → --c-amb   */
  --c-wrn-l:   var(--c-amb-l);  /* → --c-amb-l */
  --c-wrn-d:   var(--c-amb-d);  /* → --c-amb-d */
  --warn-l:    var(--c-amb-l);  /* → --c-amb-l */
  --err-l:     var(--c-red-l);  /* → --c-red-l */
  --c-pri10:   var(--c-pri-l);  /* → --c-pri-l */

  /* ── Stacking order, for the layers that actually collide ───────────────
   * Reported the same day: the map renders ON TOP of the mobile menu.
   *
   * That is not a bug in the map. Leaflet ships its own z-indexes — panes at
   * 400, controls at 1000 — and the drawer was at 201, chosen when nothing on
   * the page went above 200. A number picked against today's neighbours stops
   * being right the moment a library arrives with its own opinion.
   *
   * So the few layers that can overlap are named, above Leaflet's ceiling. */
  --z-drawer: 1200;   /* mobile menu + its backdrop — must clear Leaflet's 1000 */
  --z-modal:  2000;   /* dialogs and overlays, above the drawer */
}

html[data-tyreon-theme="dark"] {
  --c-bg:   #0d1117;
  --c-sur:  #161b22;
  --c-sur2: #21262d;
  --c-sur3: #30363d;
  --c-bor:  #30363d;
  --c-pri-l: rgba(27,79,216,.20);  /* ADR-027: was rgba(27,111,232,…) — the OLD brand blue; the dark tint has to be the tint of the CURRENT one */
  --c-grn-l: rgba(16,185,129,.15);
  --c-amb-l: rgba(245,158,11,.15);
  --c-red-l: rgba(239,68,68,.15);
  --c-txt:  #c9d1d9;
  --c-txt2: #8b949e;
  /* S0-3b raised this from #484f58 and recorded "#6e7681 ≈ 4.5:1". Measured, it
     is 4.12:1 on --c-bg and 3.77:1 on --c-sur — the surface is the lighter of
     the two and the one most muted text actually sits on, so the estimate was
     made against the easier background and still missed. #7d8590 is 5.07 / 4.64.
     Now measured by validate-dark-mode-contrast.js rather than estimated. */
  --c-txt3: #7d8590;
  /* غالي: "لون السعر يبقا افتح اكتر .. اريح للعين".
     ─────────────────────────────────────────────────────────────────────────
     --c-pri was NOT overridden here, alone among the accents. Green, amber, red
     and violet all get a lighter dark-mode value, under a comment right below
     explaining exactly why they need one — the brand blue was simply left out
     of that pass. #1B4FD8 on #0d1117 measures 2.60:1, and 139 places in this
     codebase set --c-pri as a text colour, so one missing override is 139
     unreadable strings. The price in the report is one of them.
     #6ea8fe measures 7.84 / 7.16.

     A blue light enough to read on near-black cannot also carry white text —
     white on #6ea8fe is 2.42:1 — so the components FILLED with the brand colour
     flip to dark text below. That pair is what makes this safe, and both halves
     are checked numerically. */
  --c-pri:  #6ea8fe;
  /* The -d variants exist to be legible on WHITE. On #0d1117 they invert the
     problem — #047857 is 2.6:1 there — so dark mode uses the lighter fills,
     which clear AA against this background. */
  --c-grn-d: #34d399;
  --c-amb-d: #fbbf24;
  --c-red-d: #f87171;
  --c-vio-d: #a78bfa;
  /* --muted's dark value moved to tyreon-modern.css, the file that declares
     it, alongside the 12 other tokens from that family that were missing one.
     Overriding a token from a file that does not own it is how the gap went
     unnoticed for so long. */
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* A11Y #15: skip-to-content link — off-screen until it receives keyboard focus. */
.skip-link{position:fixed;top:-60px;left:8px;z-index:100000;background:var(--pri,#1B4FD8);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .15s ease;}
.skip-link:focus{top:8px;outline:3px solid #fff;outline-offset:2px;}
#main{scroll-margin-top:80px;} /* keep the jump target clear of the fixed header */

body {
  font-family: var(--fnt);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-txt);
  background: var(--c-bg);
  direction: rtl;
}

body.ltr { direction: ltr; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-pri); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; color: var(--c-txt); }

p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--c-bor); border-radius: 3px; }

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
.text-xs  { font-size: 11px; }
.text-sm  { font-size: 13px; }
.text-md  { font-size: 15px; }
.text-lg  { font-size: 18px; }
.text-xl  { font-size: 22px; }
.text-2xl { font-size: 28px; }
.text-3xl { font-size: 36px; }
.text-muted  { color: var(--c-txt2); }
.text-dim    { color: var(--c-txt3); }
.text-green  { color: var(--c-grn); }
.text-red    { color: var(--c-red); }
.text-pri    { color: var(--c-pri); }
.font-bold   { font-weight: 700; }
.font-semi   { font-weight: 600; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* ============================================
   LAYOUT
   ============================================ */
.tyreon-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 32px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none !important; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  height: var(--header-h);
  background: var(--c-sur);
  border-bottom: 1px solid var(--c-bor);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sh-sm);
}

.site-header .inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-pri);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover { text-decoration: none; color: var(--c-pri-d); }

/* Any logo fits INSIDE the bar — whatever is uploaded, forever.
 *
 * the_custom_logo() prints the image at whatever size the media library
 * registered, with hard width/height attributes and no CSS of its own. The
 * header is a fixed 60px, so a logo taller than that simply hangs out of it —
 * which is what happened the first time a real logo was uploaded.
 *
 * Written as a rule about the SLOT rather than a size for one picture: bound by
 * the header's own token, so changing --header-h moves this with it, and the
 * next logo — taller, wider, a different aspect ratio — is contained without
 * anyone remembering to come back here.
 *
 * max-height derives from --header-h so the two cannot drift apart. object-fit
 * keeps the aspect ratio no matter what the intrinsic attributes say; width:auto
 * is what lets max-height win over the width attribute WordPress emits.
 * max-width stops a wide mascot logo from eating the navigation beside it. */
/* The custom logo is a SIBLING of .site-logo, not a child — WordPress gives it
   its own .custom-logo-link anchor (see header.php). Sized here so it occupies
   the same slot the fallback would. */
.site-header .custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;   /* no descender gap under the image */
}

.site-header .custom-logo,
.site-logo img,
.site-logo .custom-logo {
  /* var(--header-h, 60px) with the fallback, not var(--header-h) bare. An
     undefined custom property makes the whole calc() invalid at computed-value
     time, and an invalid max-height is not ignored — it resolves to `none`, so
     the constraint disappears entirely and the logo overflows again. The rest
     of the theme already writes it this way (tyreon-modern.css); this rule did
     not, which is a silent way to lose the fix in any context where the token
     is not in scope. */
  max-height: calc(var(--header-h, 60px) - 14px);
  width: auto;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  /* Tighter still on mobile: the bar carries the search and the menu button
     too, and a logo at desktop width pushes them off the row.
     .site-header .custom-logo is listed here for the same reason it is listed
     above: once the custom logo became a SIBLING of .site-logo instead of a
     child, both `.site-logo img` and `.site-logo .custom-logo` stopped matching
     anything, and this cap silently applied to nothing — the uploaded logo kept
     its 190px desktop width on a 360px screen and pushed the rest of the row
     off, which is exactly what the comment above predicted. A rule that matches
     no element fails silently; there is no warning anywhere. */
  .site-header .custom-logo,
  .site-logo img,
  .site-logo .custom-logo { max-width: 132px; }
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--c-pri), var(--c-pri-d));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
}

/* Main nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.main-nav a {
  padding: 7px 14px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt2);
  text-decoration: none;
  transition: all .12s;
  white-space: nowrap;
}

.main-nav a:hover {
  background: var(--c-sur2);
  color: var(--c-txt);
  text-decoration: none;
}

.main-nav a.active,
.main-nav a[aria-current="page"] {
  background: var(--c-pri-l);
  color: var(--c-pri-d);
  font-weight: 600;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hamburger - mobile only */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--c-txt2);
  margin-right: auto;
}

.mob-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  /* Was 200 — under Leaflet's map panes (400) and controls (1000), so on any
     page carrying a map the menu opened UNDERNEATH it. */
  z-index: var(--z-drawer, 1200);
}

.mob-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--c-sur);
  z-index: calc(var(--z-drawer, 1200) + 1);   /* one above its own backdrop */
  padding: 20px 16px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}

body.ltr .mob-nav { right: auto; left: 0; transform: translateX(-100%); }

/* Both selectors, and the reason is specificity rather than direction.
 *
 * `body.ltr .mob-nav` weighs (0,2,1); `.mob-nav.open` weighs (0,2,0). In Arabic
 * the closed state is plain `.mob-nav` (0,1,0), so `.open` outranks it and the
 * drawer slides in. In English the ltr rule outranks `.open`, so the drawer
 * stayed at translateX(-100%) — off-screen, forever. The menu button worked, the
 * class was added, and nothing moved.
 *
 * Matching the specificity rather than reaching for !important: the same
 * collision elsewhere (.stores-side) was solved with !important, which works and
 * then makes the next override impossible. */
.mob-nav.open,
body.ltr .mob-nav.open {
  transform: translateX(0);
}

.mob-nav-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.mob-nav-close button {
  width: 32px;
  height: 32px;
  background: var(--c-sur2);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  cursor: pointer;
  font-size: 16px;
  color: var(--c-txt2);
}

.mob-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--rad);
  color: var(--c-txt);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* The account widget already sits on --c-sur2, so the shared :hover below would
   be invisible on it — it would look unclickable on hover, which is the whole
   thing being fixed. */
.mob-nav .mob-nav-me:hover { box-shadow: inset 0 0 0 1px var(--c-pri); }

.mob-nav a:hover {
  background: var(--c-sur2);
  text-decoration: none;
}

/* ============================================
   BUTTONS
   ============================================ */
.tyreon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .13s;
  border: none;
  white-space: nowrap;
  line-height: 1.2;
}

.tyreon-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh); }
.tyreon-btn:active { transform: translateY(0); }

.tyreon-btn.primary     { background: var(--c-pri); color: #fff; }
.tyreon-btn.primary:hover { background: var(--c-pri-d); }
.tyreon-btn.secondary   { background: var(--c-sur2); color: var(--c-txt); border: 1px solid var(--c-bor); }
.tyreon-btn.secondary:hover { background: var(--c-sur3); }
.tyreon-btn.outline     { background: transparent; color: var(--c-pri); border: 1.5px solid var(--c-pri); }
.tyreon-btn.outline:hover { background: var(--c-pri-l); }
.tyreon-btn.ghost       { background: transparent; color: var(--c-txt2); border: 1px solid var(--c-bor); }
.tyreon-btn.ghost:hover { background: var(--c-sur2); color: var(--c-txt); }
.tyreon-btn.success     { background: var(--c-grn); color: #fff; }
.tyreon-btn.danger      { background: var(--c-red); color: #fff; }
.tyreon-btn.sm          { padding: 6px 14px; font-size: 12.5px; }
.tyreon-btn.xs          { padding: 4px 10px; font-size: 11.5px; font-weight: 500; }
.tyreon-btn.full        { width: 100%; justify-content: center; }
.tyreon-btn[disabled]   { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================
   CARDS
   ============================================ */
.tyreon-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
}

/* The same card at list density. 22 places hand-roll exactly this with an
   inline style (padding:12px, no shadow) because the standard 20px is too
   generous inside a list — so the variant already exists in practice, it just
   had no name and therefore drifted. Naming it gives those call sites somewhere
   to move to without changing how they look (DUP-47). */
.tyreon-card.compact { padding: 12px; box-shadow: none; }

/* A form field's label. 20 places declare these five properties inline,
   identically. Purely additive: the declarations are copied verbatim, so
   adopting the class changes nothing visually. */
.tyreon-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-txt3);
  margin-bottom: 4px;
}

/* An image filling its frame — 26 identical inline copies. The parent supplies
   the box; this only says how the picture sits in it. */
.tyreon-cover { width: 100%; height: 100%; object-fit: cover; }

.tyreon-card h4 { font-size: 15px; margin-bottom: 8px; }

.card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-bor);
  gap: 12px;
}

.card-hdr h3 {
  font-size: 16px;
  font-weight: 700;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge.active, .badge.approved, .badge.accepted, .badge.completed { background: var(--c-grn-l); color: #047857; }
.badge.pending, .badge.pending_review, .badge.pending_admin, .badge.pending_supervisor, .badge.in_progress, .badge.under_review { background: var(--c-amb-l); color: #b45309; }
.badge.rejected, .badge.cancelled, .badge.overdue { background: var(--c-red-l); color: #b91c1c; }
.badge.gray { background: var(--c-sur2); color: var(--c-txt2); }
.badge.blue { background: var(--c-pri-l); color: var(--c-pri-d); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 16px; }

label, .tyreon-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-txt2);
  margin-bottom: 6px;
}

.req { color: var(--c-red); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select,
.tyreon-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--c-bor);
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: 14px;
  color: var(--c-txt);
  background: var(--c-sur);
  outline: none;
  transition: all .13s;
  -webkit-appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--c-pri);
  box-shadow: 0 0 0 3px rgba(27,111,232,.1);
}

/* Form controls do NOT inherit font-family from body — browsers give them their
   own default. .tyreon-input sets it, but 26 fields across the portals are
   styled with an inline `style="width:100%;padding:9px 12px;border:…"` that
   reimplements that class and omits the font, so those fields have been
   rendering in the browser's default face instead of IBM Plex Sans Arabic —
   visibly wrong next to every other field, in Arabic especially.

   Fixing the element rather than the 26 call sites: one line, no markup churn,
   and it also covers any field written the same way tomorrow. Extracting those
   inline styles onto the class is still worth doing (DUP-47) — this just stops
   the visible symptom now, without a risky sweep. */
input, select, textarea, button { font-family: var(--fnt); }

textarea { min-height: 100px; resize: vertical; line-height: 1.6; }

select { cursor: pointer; }

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .input-row { grid-template-columns: 1fr; }
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-bor);
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-pri);
}

/* ============================================
   TABLES
   ============================================ */
.table-wrap {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  overflow: hidden;
  overflow-x: auto;
}

.tyreon-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.tyreon-table th {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-txt3);
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid var(--c-bor);
  background: var(--c-sur2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.tyreon-table td {
  font-size: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-bor);
  color: var(--c-txt);
  vertical-align: middle;
}

.tyreon-table tr:last-child td { border-bottom: none; }
.tyreon-table tr:hover td { background: var(--c-sur2); }

.table-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-txt3);
  font-size: 14px;
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

/* Filter chips — a row of toggles above a list, one of which is active (the
   review queue's "browse by kind of request" tabs).

   Deliberately NOT .portal-tab-chips: despite the name, that class is the
   MOBILE BOTTOM NAVIGATION BAR — display:none on desktop and a fixed bar at the
   bottom of the screen on mobile. Anything put in it disappears on desktop and
   lands inside the bottom nav on a phone. This is its own component. */
.tyreon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tyreon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-bor);
  background: var(--c-sur);
  color: var(--c-txt);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tyreon-chip:hover { border-color: var(--c-pri); color: var(--c-pri); }
.tyreon-chip.active {
  background: var(--c-pri);
  border-color: var(--c-pri);
  color: #fff;
}
@media (max-width: 780px) {
  /* one scrollable line rather than a wall of wrapped chips on a phone */
  .tyreon-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .tyreon-chips::-webkit-scrollbar { display: none; }
}

.filter-bar input,
.filter-bar select {
  padding: 9px 13px;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: 13.5px;
  color: var(--c-txt);
  background: var(--c-sur);
  outline: none;
  transition: all .13s;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--c-pri);
  box-shadow: 0 0 0 3px rgba(27,111,232,.1);
}

.filter-bar .grow { flex: 1; min-width: 200px; }

/* ============================================
   KPI GRID (portal overview stat cards)
   v63.2: CRITICAL FIX — .kpi-grid / .kpi-card / .kpi-icon / .kpi-val /
   .kpi-lbl are used in agent-portal.php and staff-portal.php's overview
   pages (the very first thing rendered on those portals) but had ZERO
   CSS rules anywhere in this file. Completely unstyled — no grid, no
   card box, no responsive collapse — which is exactly why the overview
   page showed as a row of tall, empty, unreadable strips on mobile: an
   <a> with no display rule set and no width constraint, four of them in
   a row, is exactly what breaks like that. This is likely the single
   biggest cause of "كل البوابات بايظة ع الموبايل."
   ============================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .15s;
  min-width: 0; /* prevents grid item content from forcing overflow */
}

.kpi-card:hover { border-color: var(--c-pri); box-shadow: var(--sh); }

.kpi-icon {
  font-size: 22px;
  margin-bottom: 4px;
}

.kpi-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
}

.kpi-lbl {
  font-size: 12.5px;
  color: var(--c-txt2);
  font-weight: 500;
}

.kpi-card.blue  { border-top: 3px solid #3B82F6; }
.kpi-card.green { border-top: 3px solid #10B981; }
.kpi-card.amber { border-top: 3px solid #F59E0B; }
.kpi-card.cyan  { border-top: 3px solid #06B6D4; }
.kpi-card.red   { border-top: 3px solid #EF4444; }
.kpi-card.purple{ border-top: 3px solid #8B5CF6; }

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card { padding: 12px; }
  .kpi-val { font-size: 22px; }
}

/* ============================================
   QUICK ACTIONS (portal overview shortcuts)
   v63.2: same bug as .kpi-grid right above — .quick-actions/.qa-card/
   .qa-icon used in agent-portal.php with zero CSS anywhere.
   ============================================ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.qa-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: all .15s;
  min-width: 0;
}

.qa-card:hover { border-color: var(--c-pri); box-shadow: var(--sh); transform: translateY(-1px); }

.qa-card.primary-action {
  background: linear-gradient(135deg, var(--c-pri), #1557b8);
  border-color: transparent;
  color: #fff;
}
.qa-card.primary-action p { color: rgba(255,255,255,.85); }

.qa-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--c-pri-l, #eff6ff);
  color: var(--c-pri);
}

.qa-card h4 { margin: 0; font-size: 14px; font-weight: 700; }
.qa-card p { margin: 0; font-size: 12.5px; color: var(--c-txt2); }
.qa-card.primary-action .qa-icon { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 480px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qa-card { padding: 12px; }
}

/* ============================================
   STAFF PORTAL — v63.2: was entirely unstyled (see CHANGELOG). Reuses
   the shared .portal-wrap/.portal-layout/.portal-sidebar/.portal-main
   structure (nav links already inherit styling from ".portal-sidebar a"
   above), so only these staff-portal-specific inner pieces needed real
   CSS: the sidebar brand header, the sidebar user block, the mobile
   topbar, and the store cards on the "My Stores" tab.
   ============================================ */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--sb-bor, rgba(255,255,255,.08));
}
.sidebar-brand-logo { font-size: 26px; }
.sidebar-brand-name { font-weight: 800; font-size: 15px; color: var(--sb-txt, #fff); letter-spacing: .5px; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.05);
  border-radius: var(--rad-lg, 12px);
}
.sidebar-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-pri,#1B4FD8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.sidebar-user-name { font-size: 13.5px; font-weight: 600; color: var(--sb-txt, #fff); }
.sidebar-user-role { font-size: 11.5px; color: var(--sb-txt-muted, rgba(255,255,255,.55)); }

.sidebar-nav { display: flex; flex-direction: column; }

.badge-count {
  background: var(--c-red, #ef4444); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px;
  padding: 1px 6px; margin-inline-start: auto;
}

.tyreon-topbar {
  display: none; /* only shown on mobile via media query below */
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-sur, #fff);
  border-bottom: 1px solid var(--c-bor, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-toggle { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; }
.topbar-title { font-weight: 700; font-size: 15px; }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-icon-btn { position: relative; background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px; }
.dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red, #ef4444); }
.topbar-chip { display: flex; align-items: center; gap: 8px; }
.topbar-chip-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-pri,#1B4FD8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.topbar-chip-name { font-size: 12.5px; font-weight: 600; }
.topbar-chip-role { font-size: 10.5px; color: var(--c-txt2, #64748b); }

.portal-content { padding: 20px; }

@media (max-width: 780px) {
  .tyreon-topbar { display: flex; }
  .portal-content { padding: 14px; }
}

.store-card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.store-card-name { font-weight: 700; font-size: 14px; }
.store-card-rating { font-size: 12px; margin: 2px 0; letter-spacing: 1px; }
.store-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }


   Found via a systematic scan comparing every class= used across all
   portal templates against what's actually defined here. These are used
   repeatedly across admin/agent/merchant/supervisor portals with zero
   styling.
   ============================================ */
.welcome-banner {
  background: linear-gradient(135deg, var(--c-pri,#1B4FD8), #1557b8);
  color: #fff;
  border-radius: var(--rad-xl, 16px);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.welcome-banner h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.welcome-banner p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.85); }

.logout-link { color: var(--c-red, #ef4444) !important; }

.card-hdr-action {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-pri);
  text-decoration: none;
}
.card-hdr-action:hover { text-decoration: underline; }

.portal-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.badge-blue  { background: var(--c-pri-l, #eff6ff); color: var(--c-pri,#1B4FD8); }
.badge-green { background: var(--c-grn-l, #ecfdf5); color: #047857; }
.badge-red   { background: var(--c-red-l, #fef2f2); color: #b91c1c; }
.badge-gray  { background: var(--c-sur2, #f1f5f9); color: var(--c-txt2, #64748b); }
.badge-blue, .badge-green, .badge-red, .badge-gray {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
@media (max-width: 600px) { .form-row { flex-direction: column; align-items: stretch; } }

.fw-7 { font-weight: 700; }

.tpf-l {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-txt2, #475569);
  margin-bottom: 6px;
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .15s;
}

.stat-card:hover {
  border-color: var(--c-pri);
  box-shadow: var(--sh);
}

.stat-card .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 4px;
}

.stat-card strong {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
}

.stat-card span {
  font-size: 13px;
  color: var(--c-txt2);
  font-weight: 500;
}

.stat-card .trend {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  width: fit-content;
}

.stat-card .trend.up { background: var(--c-grn-l); color: #047857; }
.stat-card .trend.down { background: var(--c-red-l); color: #b91c1c; }

/* ============================================
   GRID LAYOUTS
   ============================================ */
.tyreon-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.tyreon-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tyreon-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .tyreon-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tyreon-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tyreon-grid-4,
  .tyreon-grid-3,
  .tyreon-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================
   PORTAL LAYOUT (ADMIN / SUPERVISOR / AGENT / MERCHANT)
   ============================================ */
.portal-wrap {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.portal-layout {
  display: flex;
  gap: 0;
  flex: 1;
  /* #90, owner 2026-07-29: "في يمين و شمال في جزء فاضي ملهاش استخدام و في
     المقابل البيانات بتكون مضغوطه."
     This was `max-width: 1440px; margin: 0 auto`. On anything wider the whole
     portal — sidebar included — was centred with dead margins down both sides,
     and because the sidebar takes a fixed 240px out of that cap, the content got
     ~1200px no matter how large the monitor was. A dashboard of dense tables was
     rendering in 1200px on a 2560px screen and leaving 1120px empty.
     A portal is not an article: it is a working surface, and the width is the
     product. The public marketplace pages keep their reading measure — that cap
     lives on .site-header .inner and the content templates, not here. */
  width: 100%;
}

/* Sidebar */
.portal-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-sur);
  border-left: 1px solid var(--c-bor);
  padding: 20px 12px;
  min-height: calc(100vh - var(--header-h));
  position: sticky;
  top: var(--header-h);
  align-self: flex-start;
  overflow-y: auto;
}

body.ltr .portal-sidebar {
  border-left: none;
  border-right: 1px solid var(--c-bor);
}

.portal-sidebar .sidebar-user {
  padding: 0 8px 16px;
  border-bottom: 1px solid var(--c-bor);
  margin-bottom: 12px;
}

.portal-sidebar .sidebar-user .name {
  font-weight: 700;
  font-size: 14.5px;
  /* #90 — measured, not guessed. This was var(--c-txt), the PAGE text colour:
     #111827 in the light theme. The sidebar's background is --sb-bg #0F1E3C.
     Contrast ratio 1.07:1, against a 4.5:1 minimum for normal text — near-black
     on near-black, which is what the owner reported as «اسم المستخدم مش واضح».

     It only showed in the LIGHT theme, which is the default: in dark, --c-txt is
     #c9d1d9 and happens to be readable on the same background. A page-level
     variable was never the right source here — the sidebar is dark in BOTH
     themes, so its text colour has to come from the sidebar's own palette. */
  color: var(--sb-txt-strong, #fff);
}

.portal-sidebar .sidebar-user .role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--c-pri-l);
  color: var(--c-pri-d);
  border-radius: 20px;
  margin-top: 4px;
  display: inline-block;
}

.sidebar-sec {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c-txt3);
  padding: 14px 8px 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sidebar-sec:first-child { padding-top: 4px; }

.portal-sidebar a,
.portal-sidebar button.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt2);
  text-decoration: none;
  transition: all .1s;
  margin-bottom: 2px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: right;
  font-family: var(--fnt);
}

body.ltr .portal-sidebar a,
body.ltr .portal-sidebar button.sidebar-link { text-align: left; }

.portal-sidebar a:hover,
.portal-sidebar button.sidebar-link:hover {
  background: var(--c-sur2);
  color: var(--c-txt);
  text-decoration: none;
}

.portal-sidebar a.active,
.portal-sidebar button.sidebar-link.active {
  background: var(--c-pri-l);
  color: var(--c-pri-d);
  font-weight: 600;
}

.portal-sidebar a .icon,
.portal-sidebar button.sidebar-link .icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-badge {
  margin-right: auto;
  background: var(--c-red);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* Main content */
.portal-main {
  flex: 1;
  padding: 28px 28px 48px;
  min-width: 0;
}

@media (max-width: 780px) {
  .portal-main { padding: 16px 14px 40px; }
}

.portal-page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.portal-page-hdr h2 {
  font-size: 22px;
  font-weight: 700;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 50;
  backdrop-filter: blur(2px);
}

.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--c-sur2);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  font-family: var(--fnt);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt);
  cursor: pointer;
  margin-bottom: 16px;
}

/* ============================================
   STORE CARD
   ============================================ */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.store-card {
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  overflow: hidden;
  transition: all .15s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.store-card:hover {
  border-color: var(--c-pri);
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.store-card-img {
  height: 160px;
  background: linear-gradient(135deg, var(--c-sur2) 0%, var(--c-sur3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* contain, not cover. Reported 2026-08-01: «الصورة الخاصة بالمنتجات مش كاملة
 * مقصوصة» — a tyre photographed on white, cropped top and bottom by a 160px
 * box.
 *
 * cover is right for a PHOTOGRAPH of a shop, where the edges carry nothing and
 * filling the frame looks better. It is wrong for what stores actually upload
 * here, which is overwhelmingly a product or a logo on a plain background —
 * the subject IS the image, and cropping it removes the thing the card exists
 * to show. A letterboxed tyre reads as a smaller picture; a cropped one reads
 * as a broken one.
 *
 * The gradient behind it is already a deliberate backdrop, so the padding this
 * leaves is a designed surface rather than a gap. */
.store-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

/* The avatar keeps cover: it is a small round crop where filling the circle is
   the point, and a letterboxed circle looks like a mistake. */

.store-card-body { padding: 16px; flex: 1; }

.store-card-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--c-txt);
}

.store-card-meta {
  font-size: 13px;
  color: var(--c-txt2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.store-card-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-card-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--c-bor);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ============================================
   STORE PROFILE
   ============================================ */
.store-profile-hero {
  background: var(--c-sur);
  border-bottom: 1px solid var(--c-bor);
  padding: 32px 0;
}

.store-profile-hero .inner {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: start;
}

.store-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--rad-xl);
  background: linear-gradient(135deg, var(--c-pri-l), var(--c-sur2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  flex-shrink: 0;
  border: 1px solid var(--c-bor);
  overflow: hidden;
}

.store-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-profile-name { font-size: 26px; font-weight: 800; margin-bottom: 8px; }

.store-profile-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.store-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--c-txt2);
}

.store-meta-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.store-profile-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 28px 0;
  align-items: start;
}

.store-section { margin-bottom: 28px; }

.store-section-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-pri-l);
  color: var(--c-txt);
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.hours-item {
  background: var(--c-sur2);
  border-radius: var(--rad);
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
}

.hours-item .day { font-weight: 700; margin-bottom: 4px; }
.hours-item .time { color: var(--c-txt2); font-size: 12px; }
.hours-item.closed { opacity: .5; }

/* ============================================
   PAGINATION
   ============================================ */
.tyreon-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.tyreon-pagination a,
.tyreon-pagination span {
  padding: 8px 14px;
  border-radius: var(--rad);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--c-bor);
  color: var(--c-txt2);
  text-decoration: none;
  background: var(--c-sur);
}

.tyreon-pagination a:hover { background: var(--c-sur2); text-decoration: none; }
.tyreon-pagination .current { background: var(--c-pri); color: #fff; border-color: var(--c-pri); }

/* ============================================
   HERO
   ============================================ */
.hero {
  background: linear-gradient(135deg, #0f2057 0%, var(--c-pri, #1B4FD8) 100%);
  color: #fff;
  padding: 72px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero .inner { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero p {
  font-size: clamp(15px, 2.5vw, 20px);
  color: rgba(255,255,255,.85);
  max-width: 640px;
  margin: 0 auto 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Car search bar */
.car-search-bar {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border-radius: var(--rad-xl);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.2);
}

.car-search-bar .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.car-search-bar select {
  flex: 1;
  min-width: 140px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: var(--rad);
  color: #111;
  padding: 11px 14px;
  font-size: 14px;
}

.car-search-bar .tyreon-btn {
  padding: 11px 24px;
  flex-shrink: 0;
}

/* ============================================
   SECTION
   ============================================ */
.section { padding: 48px 0; }
.section-sm { padding: 28px 0; }

.section-hdr {
  text-align: center;
  margin-bottom: 36px;
}

.section-hdr h2 { font-size: clamp(22px, 4vw, 32px); }
.section-hdr p { color: var(--c-txt2); margin-top: 8px; }

/* ============================================
   MODAL
   ============================================ */
.tyreon-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tyreon-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.tyreon-modal-box {
  position: relative;
  background: var(--c-sur);
  border-radius: var(--rad-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--c-bor);
  z-index: 1;
}

.tyreon-modal-box.lg { max-width: 780px; }

.modal-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-bor);
}

.modal-hdr h3 { font-size: 18px; }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--rad);
  background: var(--c-sur2);
  border: 1px solid var(--c-bor);
  cursor: pointer;
  font-size: 18px;
  color: var(--c-txt2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: var(--c-sur3); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

/* ============================================
   TOAST
   ============================================ */
.tyreon-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  padding: 14px 20px;
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-right: 4px solid var(--c-grn);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt);
  max-width: 320px;
  min-width: 220px;
  animation: toastIn .25s ease;
}

body.ltr .tyreon-toast { right: auto; left: 20px; border-right: 1px solid var(--c-bor); border-left: 4px solid var(--c-grn); }

.tyreon-toast.error   { border-right-color: var(--c-red); }
.tyreon-toast.warning { border-right-color: var(--c-amb); }

@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ============================================
   LOADING
   ============================================ */
.tyreon-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-txt3);
  font-size: 14px;
}

.tyreon-loading::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 8px;
  border: 2.5px solid var(--c-bor);
  border-top-color: var(--c-pri);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--c-txt2);
}

.empty-state .icon { font-size: 48px; margin-bottom: 14px; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--c-txt3); }

/* ============================================
   MAP
   ============================================ */
.tyreon-map {
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid var(--c-bor);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: #0f1723;
  color: rgba(255,255,255,.75);
  padding: 52px 0 24px;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand .logo {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.footer-brand p { font-size: 14px; line-height: 1.7; }

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
  text-decoration: none;
  transition: color .12s;
}

.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================
   PREFERENCES WIDGET
   ============================================ */
.tyreon-prefs-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  /* v63.2: CRITICAL FIX — was z-index:200, low enough that any
     external floating widget in the same corner (the unidentified chat
     bubble seen throughout this project's screenshots, which appears to
     use a very high z-index typical of third-party embeds) could sit on
     top of it and block clicks — the exact same root cause already
     fixed for #work-float-btn earlier this session. Same fix here. */
  z-index: 2147483000;
}

body:not(.ltr) .tyreon-prefs-widget { left: auto; right: 20px; }

/* ⚙️ floats OVER the open drawer (غالي: "زر الاعدادات لما تفتح المينو بيظهر فوق منها").
 *
 * The z-index above is 2147483000 on purpose — it was raised to beat an
 * unidentified third-party embed that was covering it. That fix was scoped to
 * the collision it was found in, and it beats EVERYTHING, our own drawer at
 * var(--z-drawer)+1 included. Lowering it would just hand the corner back to
 * the embed, so the number stays and the widget steps aside while the drawer
 * is open instead.
 *
 * #mob-nav and .tyreon-prefs-widget are both direct children of <body>
 * (header.php:250 and footer.php:64), so the general sibling combinator
 * reaches it with no JS and no body class to keep in sync. */
.mob-nav.open ~ .tyreon-prefs-widget { display: none; }

.tyreon-prefs-toggle {
  width: 48px;  /* #15 (a11y): ≥48px tap target (was 44px) */
  height: 48px;
  border-radius: 50%;
  background: var(--c-pri);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-lg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}

.tyreon-prefs-toggle:hover { transform: scale(1.06); }

.tyreon-prefs-panel {
  position: absolute;
  bottom: 52px;
  left: 0;
  background: var(--c-sur);
  border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg);
  padding: 16px;
  box-shadow: var(--sh-lg);
  min-width: 200px;
}

body:not(.ltr) .tyreon-prefs-panel { left: auto; right: 0; }

.tyreon-prefs-panel h4 {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--c-txt3);
  margin: 10px 0 6px;
  letter-spacing: 0.5px;
}

.tyreon-prefs-panel h4:first-child { margin-top: 0; }

.tyreon-prefs-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tyreon-prefs-opt {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--c-bor);
  border-radius: var(--rad);
  cursor: pointer;
  text-align: right;
  font-family: var(--fnt);
  font-size: 13px;
  color: var(--c-txt);
  transition: all .1s;
}

.tyreon-prefs-opt:hover { background: var(--c-sur2); }
.tyreon-prefs-opt.active { background: var(--c-pri); color: #fff; border-color: var(--c-pri); }

/* ============================================
   RESPONSIVE - MOBILE FIRST
   ============================================ */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .store-profile-hero .inner { grid-template-columns: 80px 1fr; }
  .store-profile-hero .store-profile-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .store-profile-body { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  /* Header */
  .main-nav { display: none; }
  .menu-toggle { display: flex; }

  /* Portal */
  .portal-sidebar {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer, 1200);   /* was 101 — under Leaflet's panes (400) */
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    overflow-y: auto;
    height: auto;
    min-height: 0;
  }

  body.ltr .portal-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }

  /* Same specificity trap as .mob-nav above, and this one covers EVERY portal —
     admin, supervisor, agent, merchant, customer. In English the sidebar could
     not be opened on any of them.
     ───────────────────────────────────────────────────────────────────────
     …and the previous version of this rule did not fix it, because it invented
     the class names `.mob-open` and `.visible`. Nothing anywhere adds either
     one. theme.js:1535 adds `.open` to the sidebar and `.show` to the overlay,
     which is also what tyreon-modern.css and mobile.css listen for. Three
     vocabularies for one drawer, and the odd one out was written here — so the
     rule was dead from the moment it was committed and the bug it names
     survived it, reported again on the merchant portal.

     A CSS class that matches nothing fails in complete silence: no console
     warning, no visual difference from a rule that simply lost. The only way to
     know is to check what the JavaScript actually adds, which is what the
     harness beside this now does.

     The doubled selector is still needed for the original reason:
     `body.ltr .portal-sidebar` is (0,2,1) and beats a bare `.portal-sidebar
     .open` at (0,2,0), so in English the closed transform wins and the drawer
     never slides in. */
  .portal-sidebar.open,
  body.ltr .portal-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.show,
  body.ltr .sidebar-overlay.show {
    display: block;
  }

  .sidebar-toggle-btn {
    display: flex;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  :root { --header-h: 56px; }

  .tyreon-container { padding: 0 12px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .stat-card { padding: 14px; }
  .stat-card strong { font-size: 22px; }

  .hero { padding: 48px 12px; }

  .section { padding: 32px 0; }

  .footer-grid { grid-template-columns: 1fr; }

  .portal-main { padding: 12px 12px 36px; }

  .portal-page-hdr h2 { font-size: 18px; }

  .tyreon-table { font-size: 13px; }
  .tyreon-table th, .tyreon-table td { padding: 10px 12px; }
}

/* ── PORTAL PLATFORM BUTTON (back to public site) ── */
.portal-platform-btn {
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
  background:var(--c-sur2);border:1px solid var(--c-bor);border-radius:var(--rad);
  font-size:12.5px;font-weight:600;color:var(--c-txt2);text-decoration:none;
}
.portal-platform-btn:hover{background:var(--c-bor);color:var(--c-txt)}

/* Sidebar: platform link at bottom */
.portal-sidebar a.platform-link {
  margin-top:auto;color:rgba(255,255,255,.35);border-top:1px solid rgba(255,255,255,.08);
  margin:8px 8px 0;padding-top:10px;
}
.portal-sidebar a.platform-link:hover{color:rgba(255,255,255,.6);background:none}

/* Sidebar nav divider label */
.portal-sidebar .nav-divider {
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(255,255,255,.22);padding:14px 16px 4px;
}

/* Country-city-zone cascade filters */
.geo-cascade { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.geo-cascade select { padding:8px 12px;border:1.5px solid var(--c-bor);border-radius:var(--rad);font-family:var(--fnt);font-size:13px;background:var(--c-sur);color:var(--c-txt);min-width:140px; }
.geo-cascade select:focus { border-color:var(--c-pri); }

/* ── PORTAL PAGES: hide site header/footer nav ── */
/* v63.2: CRITICAL FIX — this targeted .nav-menu, but header.php's actual
   markup is <nav class="main-nav">. .nav-menu matches nothing at all, so
   the full public top nav (Home/Stores/Products/About/Contact) rendered
   on EVERY portal page this whole time, stacked right above each
   portal's own sidebar — exactly the "أكتر من مينو" duplication reported
   repeatedly. The intended design (per Ghali) is Sidebar-only on
   desktop, Bottom Nav-only on mobile — no public nav bar in a portal at
   all. */
body.tyreon-portal-page .site-header .main-nav,
body.tyreon-portal-page .site-header .header-actions > a:not(.portal-btn),
body.tyreon-portal-page .site-header .menu-toggle,
body.tyreon-portal-page #wpadminbar { display: none !important; }

body.tyreon-portal-page .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;
}

/* #90: the header has to span what the portal spans.
   .site-header .inner is capped at 1280px and centred, which is right for the
   public site. Now that the portal layout fills the viewport, leaving the header
   centred would put the logo and the account menu floating in the middle while
   the sidebar sits flush against the edge — the two surfaces disagreeing about
   where the page begins. */
body.tyreon-portal-page .site-header .inner {
  max-width: none;
}

/* Login/Register pages: no header at all */
body.tyreon-portal-page .site-footer { display: none; }

/* v63.4: per Ghali's confirmation — settings (language/theme) are
   reachable from inside the Profile tab on every portal now, so this
   floating widget is redundant there. More importantly, it was also a
   real visual bug: both this widget and .portal-bottom-nav are
   position:fixed at the bottom of the screen with a near-max z-index,
   so on portal pages the widget's gear icon was rendering ON TOP of the
   bottom nav's own "Home" button, visually replacing it — this is very
   likely the real explanation for "the navbar isn't showing right" —
   the nav IS there, its leftmost icon is just covered by this widget. */
body.tyreon-portal-page .tyreon-prefs-widget { display: none !important; }

/* …and the same collision on the PUBLIC pages, where hiding it is not the answer.
 *
 * The v63.4 note above diagnosed this exactly — a fixed widget at bottom:20px
 * landing inside a 60px bottom bar, covering its first item — and fixed it for
 * portals only. The public directory has its own .bottom-nav and the identical
 * overlap: in RTL the widget sits over "الرئيسية", so Home cannot be tapped.
 * Reported from /stores/ on a phone, 2026-08-01.
 *
 * Hiding it here would be wrong. On a portal the language and theme controls
 * live in the Profile tab, so the widget is redundant; a logged-out visitor on
 * the public site has nowhere else to change either. So it moves ABOVE the bar
 * rather than away.
 *
 * Measured from --bottom-nav-h, not from 60: whatever the bar becomes, the
 * widget clears it, and nobody has to remember this rule exists. */
@media (max-width: 768px) {
  body.has-bottom-nav .tyreon-prefs-widget {
    bottom: calc(var(--bottom-nav-h, 60px) + 14px);
  }
}

/* ═══════════════════════════════════════════════
   BOTTOM NAV — fixed at bottom, mobile only
   ═══════════════════════════════════════════════ */
.bottom-nav {
  display: none; /* hidden on desktop */
}

/* v63.2: CRITICAL FIX — .portal-tab-chips (rendered inline at the top of
   every portal template, e.g. agent-portal.php) had ZERO CSS rules
   anywhere in the stylesheet. With no styling at all it rendered as a
   plain block of stacked/wrapped links, visible on every screen size —
   a second, unstyled navigation duplicating the sidebar, exactly what
   showed up as the mystery top row in Ghali's screenshots. This was
   clearly meant to be the mobile bottom-nav equivalent for portals (the
   site's own .bottom-nav is deliberately hidden on portal pages via
   body.tyreon-portal-page .bottom-nav, since portals have their own
   nav) — so: hidden entirely on desktop, a real fixed bottom bar on
   mobile only, matching Ghali's explicit rule (Sidebar on desktop,
   Bottom Nav on mobile — nothing else). */
.portal-tab-chips { display: none; }

@media (max-width: 780px) {
  body.tyreon-portal-page .portal-tab-chips {
    display: flex;
    align-items: center;
    height: 64px;
    max-height: 64px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--c-sur, #fff);
    border-top: 1px solid var(--c-bor, #e2e8f0);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    box-sizing: border-box;
  }
  body.tyreon-portal-page .portal-tab-chips .ptab-chip {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--c-txt3, #94a3b8);
    text-decoration: none;
    border-radius: var(--rad, 8px);
    white-space: nowrap;
    height: auto;
  }
  body.tyreon-portal-page .portal-tab-chips .ptab-chip.active {
    color: var(--c-pri,#1B4FD8);
    background: var(--c-pri-l, #eff6ff);
  }
  /* content needs bottom padding so the fixed bar never covers it */
  body.tyreon-portal-page main,
  body.tyreon-portal-page .portal-main {
    padding-bottom: 64px;
  }
}

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 48px; /* #15 (a11y): meet the ≥48px tap-target minimum */
  font-size: 10px;
  font-weight: 600;
  color: var(--c-txt3, #94a3b8);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s;
}
.bn-item .bn-icon { font-size: 20px; line-height: 1; }
.bn-item.active { color: var(--c-pri,#1B4FD8); }

/* Show ONLY on mobile, fixed to bottom */
@media (max-width: 768px) {
  .bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h, 60px);
    background: var(--c-sur, #fff);
    border-top: 1px solid var(--c-bor, #e2e8f0);
    z-index: 900;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Add padding so content isn't hidden behind bottom nav */
  body.has-bottom-nav { padding-bottom: var(--bottom-nav-h, 60px); }
}

/* Hide the desktop main-nav on mobile (bottom-nav replaces it) */
@media (max-width: 768px) {
  .site-header .main-nav { display: none; }
}

/* Hide bottom-nav inside portal pages (portals have their own nav) */
body.tyreon-portal-page .bottom-nav { display: none !important; }
body.tyreon-portal-page.has-bottom-nav { padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   v63.27 — ONE navigation per breakpoint on the public site too
   (غالي: "التجربة من الموبايل زحمة اوي مقدرش اوصل لباقي الكاتيجوريز")

   The header bar was rendering, on a 360px phone: logo + car switcher +
   ملفي الشخصي + خروج + ☰. The ☰ was the item pushed off the end — and the
   drawer it opens is where البراندات · الماركات · المقاسات · التصنيفات ·
   الخدمات · العروض all live. So the one control that reached the rest of
   the site was the one the crowding removed.

   This is the rule the portals already follow, written above in Ghali's
   own words: "Sidebar-only on desktop, Bottom Nav-only on mobile." The
   public site never got it, so its bottom nav was ADDED to the header row
   instead of REPLACING it, and every destination was drawn twice.

   Breakpoint is 768px, not the 780px used by .menu-toggle, because it must
   match where .bottom-nav actually appears. Between 769–780px the bottom
   nav is gone and .main-nav is already hidden, so the header ☰ is the only
   way in and must survive — hence ≤768 and not ≤780.

   .site-header prefix (0,1,1) so this wins over `.menu-toggle{display:flex}`
   at line ~1948 regardless of where in the file it ends up.

   What is NOT hidden, deliberately:
     · /register/  — its only entry point on the whole site is this bar.
                     The drawer has merchant-register, not customer signup.
     · .veh-switch — the active-vehicle switcher has no second surface, and
                     it is the context for everything the customer browses.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header .hdr-mobile-dup { display: none !important; }

  /* With the duplicates gone the row is logo + car switcher, so give the
     switcher the room — but cap the label: a long car name ("سيارتي العزيزه")
     would otherwise grow the button until the logo starts shrinking again. */
  .site-header .veh-switch { min-width: 0; }
  .site-header #veh-switch-label {
    display: inline-block;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .header-actions { gap: 6px; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.18 — PUBLIC SITE MODERN REFRESH (غالي: "الموقع بشكل عام عصري أكتر")
   Token-based, append-only. Richer hero, softer cards, springy buttons.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: deeper multi-stop gradient + soft radial glow (when no bg image set;
   inline style from front-page.php takes over when an image IS uploaded). */
.hero {
  background: linear-gradient(135deg, #0b1838 0%, #1B4FD8 52%, #0EA5E9 100%);
  padding: clamp(56px, 9vw, 92px) 16px;
}
.hero::after {
  content: '';
  position: absolute;
  top: -40%; inset-inline-end: -20%;
  width: 70%; height: 160%;
  background: radial-gradient(circle, rgba(14,165,233,.35), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.hero h1 { letter-spacing: -.5px; text-shadow: 0 2px 20px rgba(0,0,0,.15); }

/* Car search bar: crisper glass */
.car-search-bar {
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 12px 40px rgba(3,12,40,.28);
}

/* Public cards & buttons — mirror the portal refresh so the whole product
   feels consistent. Uses the public --c-* token set. */
.card, .store-card, .product-card, .stat-card {
  border-radius: 16px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.card:hover, .store-card:hover, .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
.tyreon-btn { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, filter .2s, background .2s; }
.tyreon-btn:active { transform: translateY(1px) scale(.99); }
.tyreon-btn.primary { box-shadow: 0 4px 14px rgba(27,111,232,.3); }
.tyreon-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,111,232,.4); }

@media (prefers-reduced-motion: reduce) {
  .card, .store-card, .product-card, .stat-card, .tyreon-btn { transition: none; }
  .card:hover, .store-card:hover, .product-card:hover, .tyreon-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.19 — HOMEPAGE AUTOMOTIVE REDESIGN (غالي: صور تعبّر عن مجال السيارات)
   Styles for the automotive SVG scene + new sections. Token-based.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero automotive scene (shown only when no custom hero image) */
.hero { position: relative; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-road {
  position: absolute; inset-inline: 0; bottom: 0; height: 50%;
  opacity: .6;
}
.hero-car {
  position: absolute; bottom: 6%; inset-inline-start: 5%;
  width: min(360px, 42vw); opacity: .92;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
  animation: heroCarIn 1s cubic-bezier(.2,.7,.3,1) both;
}
.hero-tire {
  position: absolute;
  animation: heroSpin 9s linear infinite;
}
.hero-tire--a { width: 210px; height: 210px; top: -46px; inset-inline-end: -34px; opacity: .22; }
.hero-tire--b { width: 130px; height: 130px; bottom: 14%; inset-inline-end: 10%; opacity: .16; animation-duration: 6s; }
@keyframes heroSpin { to { transform: rotate(360deg); } }
@keyframes heroCarIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: .9; transform: none; } }
.hero .inner { position: relative; z-index: 2; }

/* Search bar lead row (steering wheel + label) */
.car-search-lead {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 14px;
  margin-bottom: 10px; opacity: .95;
}

/* Stats: automotive icon above the number */
.home-stats-sec { background: var(--c-sur); border-bottom: 1px solid var(--c-bor); }
.home-stat { text-align: center; align-items: center; }
.home-stat-ico {
  display: flex; align-items: center; justify-content: center;
  height: 46px; margin-bottom: 2px; color: var(--c-pri);
}
.home-stat strong { font-size: clamp(22px, 4vw, 30px); font-weight: 900; color: var(--c-txt); }
.home-stat span { font-size: 12.5px; color: var(--c-txt2); }

/* How-it-works steps */
.home-steps {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.home-step {
  flex: 1 1 200px; max-width: 260px; text-align: center;
  padding: 24px 18px; border-radius: var(--rad-lg);
  background: var(--c-bg); border: 1px solid var(--c-bor);
  transition: transform .2s, box-shadow .2s;
}
.home-step:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.home-step-art {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  width: 92px; height: 92px; margin: 0 auto 14px;
  border-radius: 50%; color: var(--c-pri);
  background: radial-gradient(circle, var(--c-pri-l), transparent 72%);
}
.home-step-num {
  position: absolute; top: -2px; inset-inline-end: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(27,79,216,.4);
}
.home-step h4 { font-size: 16px; margin-bottom: 4px; }
.home-step-arrow {
  display: flex; align-items: center;
  font-size: 26px; color: var(--c-pri); opacity: .45; font-weight: 700;
}
html[dir="rtl"] .home-step-arrow { transform: scaleX(-1); }

/* Feature cards: icon in a tinted disc */
.home-feature { text-align: center; }
.home-feature-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin-bottom: 12px;
  border-radius: 20px; color: var(--c-pri);
  background: var(--c-pri-l);
}

/* Store card automotive placeholder (no photo) */
.store-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--c-pri-l), var(--c-sur2));
}
.store-verified {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(27,79,216,.4); z-index: 2;
}

/* Merchant CTA with automotive backdrop */
.home-cta {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, #0b1838 0%, #1B4FD8 55%, #0EA5E9 100%);
}
.home-cta-art {
  position: absolute; top: 50%; inset-inline-end: -6%;
  width: 360px; height: 360px; transform: translateY(-50%);
  opacity: .12; pointer-events: none;
}
.home-cta-inner { display: flex; flex-direction: column; align-items: center; }
.home-cta-icon { margin-bottom: 10px; opacity: .9; }

@media (max-width: 640px) {
  .hero-car { width: 46vw; bottom: 4%; }
  .home-step-arrow { display: none; }
  .home-cta-art { width: 220px; height: 220px; opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tire, .hero-car { animation: none; }
  .home-step:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v63.20 — STORES DIRECTORY REDESIGN (غالي: فلاتر أكتر + تقسيم + تصميم أفضل)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero header */
.stores-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b1838 0%, #1B4FD8 60%, #0EA5E9 100%);
  color: #fff; padding: 40px 16px 44px;
}
.stores-hero h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 900; margin-bottom: 6px; }
.stores-hero p { opacity: .9; font-size: 14px; max-width: 560px; }
.stores-hero-art {
  position: absolute; top: 50%; inset-inline-end: -40px;
  width: 220px; height: 220px; transform: translateY(-50%);
  opacity: .14; pointer-events: none;
  animation: heroSpin 12s linear infinite;
}

/* Filter card */
.stores-filters {
  background: var(--c-sur); border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg); padding: 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  margin-top: -22px; position: relative; z-index: 3;
}

/* Mode toggle segmented control */
.stores-mode {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--c-sur2); border-radius: 12px; margin-bottom: 14px;
}
.stores-mode-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 700;
  color: var(--c-txt2); font-family: inherit; transition: all .15s;
}
.stores-mode-btn.active { background: var(--c-pri); color: #fff; box-shadow: 0 2px 8px rgba(27,79,216,.3); }

/* Primary filter row */
.stores-filter-primary {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.stores-search {
  position: relative; flex: 1; min-width: 240px;
}
.stores-search-ico {
  position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%);
  font-size: 15px; opacity: .5; pointer-events: none;
}
.stores-search input {
  width: 100%; padding: 12px 14px; padding-inline-start: 38px;
  border: 1.5px solid var(--c-bor); border-radius: 12px;
  font-size: 14px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.stores-search input:focus {
  outline: none; border-color: var(--c-pri); background: var(--c-sur);
  box-shadow: 0 0 0 4px rgba(27,79,216,.1);
}
.stores-sel {
  padding: 12px 14px; border: 1.5px solid var(--c-bor); border-radius: 12px;
  font-size: 13.5px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  cursor: pointer; transition: border-color .15s; min-width: 140px;
}
.stores-sel:focus { outline: none; border-color: var(--c-pri); }
.stores-adv-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1.5px solid var(--c-bor); border-radius: 12px;
  background: var(--c-sur2); color: var(--c-txt2); font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap;
}
.stores-adv-toggle:hover, .stores-adv-toggle.active { border-color: var(--c-pri); color: var(--c-pri); }

/* Advanced filter grid */
.stores-filter-adv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-bor);
}
.stores-adv-field { display: flex; flex-direction: column; gap: 5px; }
.stores-adv-field label { font-size: 11px; font-weight: 700; color: var(--c-txt2); text-transform: uppercase; letter-spacing: .04em; }
.stores-adv-field .stores-sel { width: 100%; }

/* Active filter chips */
.stores-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stores-chips:empty { margin-top: 0; }
.stores-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: 20px;
  background: var(--c-pri-l); color: var(--c-pri-d);
  font-size: 12.5px; font-weight: 600;
}
html[dir="rtl"] .stores-chip { padding: 5px 12px 5px 6px; }
.stores-chip button {
  border: none; background: rgba(0,0,0,.08); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.stores-chip button:hover { background: rgba(0,0,0,.18); }
.stores-chip-clear {
  border: none; background: transparent; color: var(--c-red, #dc2626);
  cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 5px 10px;
}
.stores-chip-clear:hover { text-decoration: underline; }

/* Result bar */
.stores-resultbar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 12px;
}
.stores-view-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--c-sur2); border-radius: 9px; }
.stores-view-toggle button {
  border: none; background: transparent; cursor: pointer;
  width: 32px; height: 30px; border-radius: 7px; font-size: 15px; color: var(--c-txt2);
  transition: all .15s;
}
.stores-view-toggle button.active { background: var(--c-sur); color: var(--c-pri); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* Verified badge on store card image */
.store-verified {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-pri); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; z-index: 2;
  box-shadow: 0 3px 8px rgba(27,79,216,.4);
}
.store-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--c-pri-l), var(--c-sur2));
}

/* LIST VIEW — horizontal cards */
.stores-grid.stores-list { grid-template-columns: 1fr; }
.stores-grid.stores-list .store-card {
  flex-direction: row; align-items: stretch;
}
.stores-grid.stores-list .store-card-img {
  width: 130px; height: auto; min-height: 100px; flex-shrink: 0;
}
.stores-grid.stores-list .store-card-body { flex: 1; }
.stores-grid.stores-list .store-card-foot {
  flex-direction: column; justify-content: center; align-items: flex-start;
  border-top: none; border-inline-start: 1px solid var(--c-bor);
  min-width: 130px; padding: 12px;
}
@media (max-width: 560px){
  /* غالي 2026-08-01, pointing at the ⊞/☰ pair: "مش شغال".
   *
   * The toggle was working — setView() flips the class, the .active state
   * moves, the layout recomputes. It produced an IDENTICAL result, which is
   * indistinguishable from a dead button.
   *
   * On a phone, grid mode is one column (mobile.css forces
   * .stores-grid{grid-template-columns:1fr!important}) with a stacked card and
   * a full-width image. This block then gave list mode flex-direction:column
   * and a full-width 150px image — the same card, in the same single column.
   * Two modes, one layout.
   *
   * The point of a list is density: more results per screen. So it stays
   * horizontal here, with a thumbnail sized for a narrow screen; only the
   * footer — the part that genuinely could not fit beside a 130px thumb and a
   * body — wraps to its own full-width row. That is what the old override was
   * protecting against, solved by moving one element instead of collapsing all
   * three. */
  .stores-grid.stores-list .store-card { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .stores-grid.stores-list .store-card-img { width: 96px; height: auto; min-height: 96px; flex-shrink: 0; }
  .stores-grid.stores-list .store-card-body { flex: 1 1 0; min-width: 0; }
  .stores-grid.stores-list .store-card-foot {
    flex: 1 0 100%;
    flex-direction: row; justify-content: flex-start; align-items: center;
    border-inline-start: none; border-top: 1px solid var(--c-bor);
    min-width: 0; padding: 10px 12px;
  }
  .stores-filter-primary .stores-sel { flex: 1; min-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v63.21 — دليل المتاجر: Sidebar فلاتر + نجوم تقييم العملاء الدهبية
   (بلاغ غالي 2026-07-05: "الفلاتر في الجانب مش فوق" + "نجوم لونها دهبي")
   ══════════════════════════════════════════════════════════════════════ */

.stores-hero--slim { padding: 28px 16px 30px; }

/* Layout: sidebar + main. RTL: العمود الأول = يمين تلقائيًا. */
.stores-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ── Sidebar ── */
.stores-side {
  position: sticky; top: 76px;
  background: var(--c-sur); border: 1px solid var(--c-bor);
  border-radius: var(--rad-lg); padding: 16px;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  max-height: calc(100vh - 92px); overflow-y: auto;
}
.stores-side-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 14px;
}
.stores-side-close {
  display: none; border: none; background: var(--c-sur2); color: var(--c-txt2);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.stores-mode--full { display: flex; width: 100%; margin-bottom: 14px; }
.stores-mode--full .stores-mode-btn { flex: 1; text-align: center; padding: 9px 8px; font-size: 12.5px; }

.stores-side-groups { display: flex; flex-direction: column; gap: 13px; }
.stores-side-group { display: flex; flex-direction: column; gap: 6px; }
.stores-side-group > label {
  font-size: 11.5px; font-weight: 800; color: var(--c-txt2);
  letter-spacing: .03em;
}
.stores-side-group .stores-sel,
.stores-side-group .stores-search input { width: 100%; }
.stores-side-divider { border-top: 1px dashed var(--c-bor); }

.stores-side-backdrop {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(15,23,42,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s;
}
.stores-side-backdrop.show { display: block; opacity: 1; }

/* زرار "فلاتر" — موبايل بس */
.stores-filters-btn {
  display: none; align-items: center; gap: 7px;
  border: 1.5px solid var(--c-bor); background: var(--c-sur);
  color: var(--c-txt); font-weight: 800; font-size: 13px;
  padding: 9px 14px; border-radius: 11px; cursor: pointer; font-family: inherit;
}
.stores-filters-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--c-pri); color: #fff; font-size: 11px; font-weight: 800;
}

@media (max-width: 1023px) {
  .stores-layout { grid-template-columns: 1fr; }
  .stores-filters-btn { display: inline-flex; }
  .stores-side {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(320px, 86vw); max-height: none; z-index: 999;
    border-radius: 0; border: none;
    transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,.18);
  }
  html[dir="rtl"] .stores-side { transform: translateX(105%); box-shadow: -8px 0 30px rgba(0,0,0,.18); }
  .stores-side.open { transform: translateX(0) !important; }
  .stores-side-close { display: flex; align-items: center; justify-content: center; }
}

/* ── نجوم التقييم الدهبية (مكوّن مشترك — دليل المتاجر + صفحة المتجر) ──
   طبقتين ★★★★★: رمادية كقاعدة + دهبية فوقها مقصوصة بعرض = المتوسط/5،
   فالتعبئة الجزئية (4.1 من 5) بتظهر بدقة. direction:ltr جوّه الودجت
   عشان التعبئة تبدأ من نفس الجهة حتى في RTL. */
.tyr-stars {
  display: inline-flex; align-items: center; gap: 6px;
  direction: ltr; line-height: 1;
}
.tyr-stars-track {
  position: relative; display: inline-block;
  font-size: var(--star-size, 14px); letter-spacing: 1.5px;
}
.tyr-stars-base { color: #d7dbe3; }
.tyr-stars-fill {
  position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap;
  color: #f5a623;
  text-shadow: 0 1px 2px rgba(245,166,35,.35);
}
.tyr-stars-num {
  font-size: calc(var(--star-size, 14px) - 1px);
  font-weight: 800; color: var(--c-txt);
}
.tyr-stars-cnt {
  font-size: calc(var(--star-size, 14px) - 2px);
  color: var(--c-txt3, #94a3b8); font-weight: 600;
}
/* نسخة على خلفية غامقة (هيرو صفحة المتجر) */
.tyr-stars--onblue .tyr-stars-base { color: rgba(255,255,255,.32); }
.tyr-stars--onblue .tyr-stars-num { color: #fff; }
.tyr-stars--onblue .tyr-stars-cnt { color: rgba(255,255,255,.75); }

.store-card-rating { margin: 4px 0 2px; }

/* ── v63.21: تابات صفحة المتجر (معلومات/المنتجات/التقييمات) ──
   Pill segmented بارز مع عدّادات — بدل أزرار underline باهتة كانت
   بتتلخبط مع النص العادي (بلاغ غالي: "التابات مش واضحة"). */
.sp-tabs {
  display: flex; gap: 8px; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 12px;
  border: 1.5px solid var(--c-bor, #e2e8f0);
  background: var(--c-sur2, #f8fafc); color: var(--c-txt2, #475569);
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .16s ease;
}
.sp-tab-btn:hover { border-color: var(--c-pri, #1B4FD8); color: var(--c-pri, #1B4FD8); }
.sp-tab-btn.active {
  background: var(--c-pri, #1B4FD8); border-color: var(--c-pri, #1B4FD8);
  color: #fff; box-shadow: 0 4px 12px rgba(27,79,216,.28);
}
.sp-tab-ico { font-size: 15px; line-height: 1; }
.sp-tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: rgba(0,0,0,.12); color: inherit;
  font-size: 11px; font-weight: 800;
}
.sp-tab-btn.active .sp-tab-cnt { background: rgba(255,255,255,.25); color: #fff; }

/* ── v63.23: البحث العام الذكي في الهيدر ── */
.gsearch { position: relative; flex: 1; max-width: 340px; min-width: 150px; margin-inline: 12px; }
.gsearch-ico { position: absolute; top: 50%; inset-inline-start: 11px; transform: translateY(-50%); font-size: 13px; opacity: .5; pointer-events: none; }
.gsearch input {
  width: 100%; padding: 9px 12px; padding-inline-start: 33px;
  border: 1.5px solid var(--c-bor); border-radius: 11px;
  font-size: 13px; font-family: inherit; background: var(--c-sur2); color: var(--c-txt);
  transition: border-color .15s, box-shadow .15s;
}
.gsearch input:focus { outline: none; border-color: var(--c-pri); background: var(--c-sur); box-shadow: 0 0 0 4px rgba(27,79,216,.1); }
.gsearch-drop {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline: 0;
  background: var(--c-sur); border: 1px solid var(--c-bor); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14); z-index: 300;
  max-height: 380px; overflow-y: auto; padding: 6px;
}
.gsearch-drop.open { display: block; }
.gsearch-grp { font-size: 11px; font-weight: 800; color: var(--c-txt3, #94a3b8); padding: 8px 10px 4px; letter-spacing: .03em; }
.gsearch-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
}
.gsearch-item:hover { background: var(--c-sur2); }
.gsearch-item-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-item-meta { font-size: 11.5px; color: var(--c-txt3, #94a3b8); flex-shrink: 0; }
.gsearch-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--c-txt3, #94a3b8); }
@media (max-width: 860px) { .gsearch { display: none; } } /* v1: ديسكتوب فقط — الموبايل في نسخة تالية (الهيدر ضيّق) */

/* ═══════════════════════════════════════════════════════════════════════
   v63.27 — HERO ARTWORK: the whole frame, one per theme
   (غالي: "واحدة تكون درايك مود و التاني لايت و يكونوا واضحين مفيش حاجة بتقطعهم")

   The artwork used to be a CSS background with background-size:cover under a
   darkening gradient. `cover` is defined to crop — it scales until the box is
   full and discards the overflow — and on a wide, short hero band that removes
   the top and bottom of a 16:9 banner. These banners carry the mascot, the
   product line-up and their own headline, so what `cover` threw away was the
   message. The gradient on top is right for a photograph behind white text and
   wrong for finished artwork.

   It is an <img> beside the copy now, object-fit:contain, so nothing is ever
   cut. Both variants ship in the HTML and CSS picks one — the theme toggle
   switches on the client, so a server-chosen <img> would keep showing the old
   theme's artwork until the next reload.
   ═══════════════════════════════════════════════════════════════════════ */
/* غالي: "لما ضفت الصورة اصلا المفروض يكون بردوا البحث موجود بقي مختفي تحت".
 *
 * A 16:9 banner at full viewport width is 56vw tall — on a 1900px screen that
 * is over 1000px, taller than the screen itself, so the search landed below the
 * fold. Three things were in conflict and only two can hold at once:
 *
 *   · the banner spans the full width      (no blue margin)
 *   · the banner is never cropped          (contain)
 *   · the search is on the first screen
 *
 * `contain` with a height cap is what put the side bars back, because a
 * contained image inside a shorter box shrinks and leaves the sides empty. So
 * the height is capped and the fit is `cover`: the frame fills the band and
 * loses a little off the top and bottom rather than the left and right, and the
 * banner's own margins are where that loss lands. On a screen close to 16:9
 * nothing is cropped at all.
 *
 * The remaining height is bought back by the search card riding up onto the
 * banner — which is how the design has it anyway.
 */
/* غالي: "ما الصورة اتقصت و في ازرق تحت لوحده مش منطقي" — both true, and the
 * `cover` version above was my error. I claimed nothing would be cropped on a
 * screen near 16:9; his is 1914×830, which is 2.3:1. On a viewport that wide,
 * `cover` on a 16:9 banner throws away a third of its height, and what it threw
 * away was the top of the headline.
 *
 * The three requirements really are mutually exclusive at that aspect ratio —
 * whole frame, full width, fits the screen. Every previous attempt picked one
 * to sacrifice: cropping lost the headline, a height cap with `contain` lost
 * the full width to side bars, no cap at all lost the search below the fold.
 *
 * So the SIDES become part of the picture. The band carries the same artwork
 * scaled to cover and blurred behind the whole, uncropped frame. Nothing is
 * cut, the width is full, the height fits, and the edges read as a continuation
 * of the image rather than as dead space — which is what "اجزاء فاضيه" was
 * about in the first place.
 */
/* Final shape, per Ghali: the artwork fills the hero, whole, and the search sits
   BELOW it on the page's own background.
   ─────────────────────────────────────────────────────────────────────────
   Every earlier version tried to keep the search on the first screen at the
   same time, and each one paid for it somewhere: cropping the headline,
   letterbox bars, or a blurred surround that read as noise. Letting the banner
   take its natural height and putting the search after it costs a scroll and
   nothing else — the banner is whole, edge to edge, at full width, and the
   search is a normal part of the page rather than a card floating on a
   gradient. */
.hero-art { display: block; width: 100%; }
.hero-art-img {
  display: block;
  width: 100%;
  height: auto;             /* natural ratio — no cap, so nothing is cropped */
}

/* غالي: "ممكن تصغير حاجة الهيرو عشان اللي تحته يبكون بيان و توضيح في الاعدادات
   المقاس المطلوب".
   ─────────────────────────────────────────────────────────────────────────
   The two asks are the same ask. A full-width image's height is decided by its
   own ratio, so the only ways to shorten it are to crop it or to change the
   file. Cropping silently is what produced the last three rounds of this, so
   the ratio becomes a STATED CONTRACT instead: the band is 2.6:1 on desktop,
   the admin field says so in pixels, and an image at that ratio is displayed
   whole — `cover` never has anything to remove.

   `cover` is still there as the behaviour for an image that does NOT match. It
   has to do something, and trimming the edges of a mismatched upload is better
   than either letting it push the page down or barring its sides. The settings
   text is what keeps it from ever engaging.

   Desktop only. On a phone the screen is tall and the banner is short, so
   nothing needs shortening and the natural height above still applies — a 2.6:1
   crop of a phone-width image would cut the artwork for no gain. */
@media (min-width: 900px) {
  .hero-art { aspect-ratio: 2.6 / 1; overflow: hidden; }
  .hero-art-img { height: 100%; object-fit: cover; object-position: center; }
}
/* Light is the default; dark replaces it only when the toggle says so. Both
   directions are written explicitly so the rule survives either theme being
   the one stamped on <html>. */
.hero-art-img--dark { display: none; }
html[data-tyreon-theme="dark"] .hero-art-img--light { display: none; }
html[data-tyreon-theme="dark"] .hero-art-img--dark  { display: block; }

/* غالي 2026-08-01, looking at it live: "انا عاوز الصورة اخد المكان كله و ممكن
   نحط البحث تحت الصورة، ع دول كأن في تدخل بينهم".

   The first attempt put the artwork in a second column with
   `grid-column:2; grid-row:1/-1`, meaning to span every row beside the copy. It
   does not. With no EXPLICIT rows declared, `-1` names the last explicit row
   line, so `1 / -1` collapses to a single row — the artwork held row 1 of
   column 2 and auto-placement then dropped the NEXT item, the search bar, into
   row 2 of the same column, directly under the image. That is the collision in
   the screenshot: not two things overlapping by accident of z-index, but the
   search bar being placed exactly where the grid was told to put it.

   Now the hero is one column, in DOM order: artwork · headline · subtitle ·
   search · buttons. The artwork spans the full width — "تاخد المكان كله" — and
   the search sits below it with real space between them.

   max-height is capped in vh as well as px: unbounded, a 16:9 banner across a
   1400px container is 787px tall and pushes everything below it off the first
   screen. */
/* غالي, comparing the live hero with the design he sent: "لا طبعا ما اجزاء
   فاضيه انا عاوز اصلحه زي ما انا بعت في التصميم".
   ─────────────────────────────────────────────────────────────────────────
   The gap between the two was empty blue. The artwork sat inside
   .tyreon-container — capped width, side padding — and had a max-height and a
   border-radius on top of that, so it floated as a card in the middle of a
   gradient band with dead space all around it. In the design the banner IS the
   hero: it runs edge to edge, and the search sits on it.

   So the hero stops padding itself when artwork is set, the artwork moves
   outside the container (see front-page.php), and the max-height and radius
   come off — a capped height on a `contain` image is exactly what produces
   bars at the sides.

   The headline and subtitle are VISUALLY hidden rather than removed. These
   banners already carry their own headline, so rendering ours underneath says
   the same sentence twice in two typefaces. Hidden this way it still reaches
   screen readers and crawlers — the h1 is the page's main heading and deleting
   it costs real SEO for a purely visual duplication. */
.hero.hero--has-img {
  /* .hero.hero--has-img, doubled up, because assets/css/mobile.css sets
     `.hero { padding: 40px 16px !important }`. An !important declaration beats a
     normal one whatever the specificity, so the only way past it is another
     !important with HIGHER specificity — otherwise the side padding survives on
     phones and puts the blue strips back exactly where they were reported. */
  padding: 0 0 clamp(28px, 4vw, 44px) !important;
  overflow: hidden;
}
.hero--has-img .inner { display: block; }

.hero--has-img > .inner > h1,
.hero--has-img > .inner > p {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The search sits BELOW the banner on the PAGE's own background — not on a
   gradient, and not as a white card floating on one (غالي: "البحث يكون بخلفية
   الصفحة نفسه و بيتغير مع الدارك و اللايت").
   ─────────────────────────────────────────────────────────────────────────
   That is why it is written in TOKENS rather than colours. --c-bg/--c-txt are
   what html[data-tyreon-theme="dark"] reassigns, so the strip follows the theme
   toggle on its own. The hero's gradient and its ::after glow are switched off
   for the same reason: a fixed blue band cannot follow a theme, and it was the
   thing that made the search look bolted onto the picture instead of part of
   the page. */
.hero.hero--has-img {
  background: var(--c-bg) !important;
}
.hero.hero--has-img::after { display: none; }

.hero--has-img .inner {
  position: relative;
  z-index: 2;
  margin-top: clamp(16px, 2.4vw, 26px);
  color: var(--c-txt);
}

/* The search as the design has it: a solid, elevated white card riding the
   bottom edge of the banner — not a translucent panel floating in a blue field.
   The glass treatment above is right when the hero is a gradient behind it; over
   finished artwork it reads as a smudge, and its white-on-white select labels
   lose contrast against the light parts of the banner.

   Scoped to .hero--has-img so the no-artwork hero keeps the glass look it was
   designed with. */
/* No card: the search IS the page here. Transparent background, no shadow, no
   border — the only thing left is the controls, on whatever --c-bg currently
   is. A white card would be a fixed colour that cannot follow the theme, which
   is exactly what was asked against. */
.hero--has-img .car-search-bar {
  max-width: 980px;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero--has-img .car-search-bar,
.hero--has-img .car-search-bar .car-search-lead {
  color: var(--c-txt, #0f172a);
}
.hero--has-img .car-search-bar .car-search-lead svg { color: var(--c-pri, #1B4FD8) !important; }
.hero--has-img .car-search-bar select {
  background: var(--c-sur2, #f8fafc);
  border: 1px solid var(--c-bor, #e2e8f0);
  color: var(--c-txt, #0f172a);
}

/* The secondary links sat on the gradient; under a white card they need their
   own contrast rather than inheriting hero-white. */
.hero--has-img .inner > .hero-cta-row,
.hero--has-img .inner > .hero-links { margin-top: 16px; }

/* Hero search tabs. Sits above .row, so the card reads: which search · the
   fields · the button. */
.hs-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.hs-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--c-bor, #e2e8f0);
  background: var(--c-sur2, #f8fafc);
  color: var(--c-txt2, #475569);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.hs-tab:hover { border-color: var(--c-pri, #1B4FD8); }
.hs-tab.is-active {
  background: var(--c-pri, #1B4FD8);
  border-color: var(--c-pri, #1B4FD8);
  color: #fff;
}
/* [hidden] loses to the pane's own display in some resets — restated so a
   hidden pane is actually gone rather than merely marked. */
.hs-pane[hidden] { display: none; }
#home-ts-note { color: var(--c-txt3, #64748b); }

/* The one non-search action, on the tab row. Visually distinct from the tabs so
   it does not read as a third search mode. */
.hs-alt {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--c-pri, #1B4FD8);
  text-decoration: none;
  border: 1.5px dashed var(--c-bor, #e2e8f0);
}
.hs-alt:hover { border-style: solid; border-color: var(--c-pri, #1B4FD8); text-decoration: none; }

/* With nothing following the card, the hero ends just past it. The bottom
   padding was sized for a row of buttons that no longer exists — left as it
   was, it IS the lone blue band that was reported. */
.hero.hero--has-img { padding-bottom: clamp(18px, 2.2vw, 26px) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Dark mode: text ON the brand fill
   ─────────────────────────────────────────────────────────────────────────
   --c-pri is lightened in dark mode so the 139 places that use it as TEXT are
   readable (2.60:1 → 7.84:1). White text on that lighter blue measures 2.42:1,
   so every component filled with it flips to dark text — 7.75:1.

   These are the rules in this stylesheet that pair `background: var(--c-pri)`
   with a colour of their own. Enumerated rather than matched by a wildcard,
   because a wildcard would also catch the ones filled with a GRADIENT that
   stays dark at one end, and flip those wrongly.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-tyreon-theme="dark"] .tyreon-btn.primary,
html[data-tyreon-theme="dark"] .tyreon-pagination .current,
html[data-tyreon-theme="dark"] .tyreon-prefs-opt.active,
html[data-tyreon-theme="dark"] .stores-mode-btn.active,
html[data-tyreon-theme="dark"] .tyreon-chip.active,
html[data-tyreon-theme="dark"] .hs-tab.is-active {
  color: #0b1220;
}