/* ==========================================================================
   FindMotos — Global Layout & Base
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { color: var(--color-text); }

/* ---- Accessibility helpers ------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  z-index: var(--z-toast);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Container ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.section { padding-block: var(--space-7); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

/* User-area pages (_UserLayout) sit right under the sticky header with no hero
   in between, so the full .section top padding leaves an awkward empty band.
   Pull the top in to a tight, uniform gap across every user-area page — the
   logo and the page content stay closely aligned. Bottom padding is left at
   the .section default so the footer keeps its breathing room. This replaces
   the per-page negative-margin hacks the Sell / My-listings pages used. */
.section--dash { padding-top: var(--space-5); }
@media (min-width: 768px) {
  .section--dash { padding-top: var(--space-6); }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--fs-xl); }
.section-head .link-more {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.section-head .link-more:hover { text-decoration: underline; }

/* ---- Site header ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  box-shadow: 0 2px 14px rgba(26, 35, 48, 0.08);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Desktop: keep the page content and top menu on the same horizontal edges. */
@media (min-width: 1024px) {
  .container { max-width: var(--container-max); }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  font-size: var(--fs-2xl);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.brand__mark {
  width: 28px; height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.site-nav { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.site-nav__primary,
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav a,
.site-nav__menu summary {
  padding: var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .site-nav { gap: var(--space-3); }
  .site-nav a,
  .site-nav__menu summary {
    font-size: var(--fs-base);
    padding: var(--space-2) var(--space-3);
  }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .site-nav { gap: var(--space-2); }
  .site-nav a,
  .site-nav__menu summary {
    font-size: var(--fs-sm);
    padding-inline: var(--space-2);
  }
}
.site-nav a:hover,
.site-nav__menu summary:hover { color: var(--color-text); background: var(--color-gray-soft); }
.site-nav a.is-active,
.site-nav__menu summary.is-active { color: var(--color-primary); }
/* Active main-nav link gets a soft-blue pill (matches the mockup). */
.site-nav__primary a.is-active { background: var(--color-primary-soft); }
.site-nav a.site-nav__signout { display: inline-flex; align-items: center; gap: 6px; }
.site-nav a.site-nav__signout svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-nav__sell-cta {
  border: 1px solid var(--color-primary);
  color: var(--color-primary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: max-content;
  padding-inline: var(--space-4) !important;
}
.site-nav__sell-cta:hover {
  background: var(--color-primary-soft) !important;
}
@media (min-width: 981px) {
  .site-header {
    position: relative;
    top: auto;
  }
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(0, auto) minmax(max-content, 1fr);
    gap: var(--space-4);
  }
  .site-header__inner .brand {
    justify-self: start;
  }
  .site-nav {
    display: contents;
  }
  .site-nav__primary {
    grid-column: 2;
    justify-self: center;
    gap: var(--space-2);
  }
  .site-nav__actions {
    grid-column: 3;
    justify-self: end;
    gap: var(--space-2);
  }
  .site-nav a,
  .site-nav__menu summary,
  .lang-switch {
    min-height: 40px;
  }
}
.site-nav__menu {
  position: relative;
}
.site-nav__menu summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  list-style: none;
}
.site-nav__menu summary::-webkit-details-marker { display: none; }
.site-nav__menu summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  height: 6px;
  margin-top: -2px;
  transform: rotate(45deg);
  transition: transform var(--transition);
  width: 6px;
}
.site-nav__menu[open] summary::after {
  margin-top: 2px;
  transform: rotate(225deg);
}
.site-nav__dropdown {
  background: var(--color-surface);
  border: 1px solid var(--color-gray-light);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  min-width: 232px;
  opacity: 0;
  padding: var(--space-2);
  pointer-events: none;
  position: absolute;
  /* Open downward-and-toward-the-end from the avatar (matches the mockup);
     mirrors correctly under RTL. */
  inset-inline-start: 0;
  top: calc(100% + var(--space-2));
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: calc(var(--z-header) + 1);
}
.site-nav__menu[open] .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__dropdown a {
  align-items: center;
  color: var(--color-text);
  display: flex;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}
.site-nav__dropdown a svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.site-nav__dropdown a:hover svg { color: var(--color-primary); }
/* Thin separator before "Log out", matching the mockup. */
.site-nav__dropdown-divider {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--color-gray-light);
}
.site-nav__avatar {
  align-items: center;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  height: 24px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 24px;
}
/* Person-icon fallback (phone-login users with no name/email) sits inside the
   avatar badge in place of letter initials. */
.site-nav__avatar svg,
.mobile-header-account__avatar svg { width: 62%; height: 62%; }

/* ---- Language switcher ----------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: var(--transition);
}
.lang-switch:hover { color: var(--color-primary); background: var(--color-gray-soft); }
.lang-switch .icon { width: 18px; height: 18px; flex: 0 0 auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle__label { display: none; }

.mobile-header-account { display: none; }

.mobile-drawer,
.nav-backdrop { display: none; }

@media (max-width: 980px) {
  body { overflow-x: hidden; --drawer-width: 100vw; }
  .site-header__inner {
    /* Menu toggle hugs one edge; the brand is absolutely centred over the bar.
       In English the toggle is on the left; under RTL the flow mirrors so it
       lands on the right — satisfying the EN-left / AR-right rule. */
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--space-1);
    height: 80px;
    padding-inline: var(--space-3);
  }
  /* Logo sits beside the menu toggle (start edge) instead of centred — left in
     English, right under RTL. Scoped to the header bar (the footer also uses
     .brand and must stay in normal flow). */
  .site-header__inner .brand {
    position: static;
    transform: none;
    justify-content: flex-start;
    min-width: 0;
    font-size: 1.875rem;
    line-height: 1;
    text-align: start;
    margin-inline-start: 0;   /* sit close to the menu icon */
  }
  .nav-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-text);
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    margin: 0;
    min-width: 44px;
    padding: 4px 2px;
    text-align: center;
  }
  .nav-toggle:hover {
    background: var(--color-gray-soft);
    color: var(--color-primary);
  }
  .mobile-header-account {
    position: absolute;
    inset-inline-end: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
  }
  .mobile-header-account:hover {
    background: var(--color-gray-soft);
    color: var(--color-primary);
  }
  .mobile-header-sell {
    position: absolute;
    inset-inline-end: calc(var(--space-3) + 48px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(215, 25, 32, 0.22);
    border-radius: 999px;
    background: rgba(215, 25, 32, 0.07);
    color: #C81924;
    font-size: 0.82rem;
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(215, 25, 32, 0.08);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .mobile-header-sell:hover {
    background: rgba(215, 25, 32, 0.11);
    border-color: rgba(215, 25, 32, 0.34);
    color: #AA1320;
  }
  .mobile-header-sell span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #C81924;
    color: #fff;
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    line-height: 1;
  }
  .mobile-header-account svg {
    width: 27px;
    height: 27px;
  }
  .mobile-header-account__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: rgba(47, 83, 155, 0.1);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0;
  }
  /* "Menu" label stays hidden on every page (matches the Home toggle).
     It remains in the markup for screen readers via aria-label. */
  .site-nav { display: none; }

  @media (max-width: 430px) {
    .site-header__inner .brand { font-size: 1.65rem; }
    .mobile-header-sell {
      min-height: 32px;
      padding-inline: 8px;
      font-size: 0.76rem;
    }
  }

  @media (max-width: 370px) {
    .mobile-header-sell { font-size: 0; gap: 0; width: 34px; padding-inline: 0; }
    .mobile-header-sell span { width: 18px; height: 18px; font-size: 1rem; }
  }

  /* ---- Drawer account section (top of the bottom sheet) -------------- */
  /* Compact, lightweight — a small avatar + name row that links to Profile,
     followed by the account link cluster. No big profile card. */
  .mobile-drawer__profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-gray-light);
  }
  .mobile-drawer__profile:hover { background: var(--color-gray-soft); }
  .mobile-drawer__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
  }
  .mobile-drawer__profile-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .mobile-drawer__name {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-drawer__profile-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
  }
  .mobile-drawer__profile-link::after { content: " →"; }
  .mobile-drawer__signout,
  .mobile-drawer__signout svg { color: #B11E45 !important; }

  /* The side drawer overlays the page — it slides in from the edge and the
     backdrop dims what's behind. The page content is intentionally NOT shifted. */

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    width: 28px;
    height: 3px;
  }
  .nav-toggle__bars::before { top: -9px; }
  .nav-toggle__bars::after  { top: 9px; }
  /* The top/bottom bars are absolutely-positioned pseudo-elements (out of
     flow), so reserve vertical space here. */
  .nav-toggle__bars { margin: 9px 0; }

  /* Side drawer: fixed-width panel anchored to the start edge, full height.
     Slides IN from the side. The start edge mirrors with direction, so it
     opens from the LEFT in English and the RIGHT in Arabic — matching the
     hamburger's EN-left / AR-right position. The off-screen (closed) transform
     is flipped for RTL in rtl.css. */
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--drawer-width);
    max-width: 100%;
    background: var(--color-bg);
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
    z-index: var(--z-sheet);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
    box-shadow: 0 8px 30px rgba(26, 35, 48, 0.18);
  }

  /* Drawer header — brand on one side, close (✕) on the other. Flex auto-mirrors
     under RTL, so the logo sits right / close left in Arabic. */
  .mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
  }
  .mobile-drawer__brand {
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
  }
  .mobile-drawer__brand .brand__word {
    font-size: 1.7rem;
  }
  .mobile-drawer__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__close:hover { background: var(--color-gray-soft); color: var(--color-text); }
  .mobile-drawer__close svg { width: 22px; height: 22px; }

  /* Top-right: language pill + close button. */
  .mobile-drawer__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }
  .mobile-drawer__langpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
  }
  .mobile-drawer__langpill:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .mobile-drawer__langpill-globe { width: 18px; height: 18px; flex: none; }
  .mobile-drawer__langpill-chev { width: 15px; height: 15px; flex: none; color: var(--color-text-muted); }

  /* Account entry row at the top of the drawer (Sign in/Sign up for guests). */
  .mobile-drawer__account-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 var(--space-4) var(--space-3);
    padding: var(--space-1) 0 var(--space-3);
    border-bottom: 1px solid var(--color-gray-light);   /* hairline under the row */
    color: var(--color-primary);        /* Sign in/Sign up in the brand blue */
    text-decoration: none;
    transition: color var(--transition);
  }
  .mobile-drawer__account-cta:hover { color: var(--color-primary-hover); }
  .mobile-drawer__account-avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: none;
    background: transparent;            /* no circle background */
    color: var(--color-primary);       /* brand blue icon */
  }
  .mobile-drawer__account-avatar svg { width: 24px; height: 24px; }
  .mobile-drawer__account-label {
    flex: 1 1 auto; min-width: 0;
    font-weight: var(--fw-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-drawer__account-chev { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }

  .mobile-drawer__quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
  }
  .mobile-drawer__quick-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg, 12px);
    color: var(--color-text);
    text-decoration: none;
    transition: filter var(--transition);
  }
  .mobile-drawer__quick-card:hover { filter: brightness(0.97); }
  .mobile-drawer__quick-card--sell   { background: #EEF2FC; }   /* light blue */
  .mobile-drawer__quick-card--search { background: #FFF2E8; }   /* light peach */

  .mobile-drawer__quick-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgba(47, 83, 155, 0.12);
    color: var(--color-primary);
  }
  .mobile-drawer__quick-card--search .mobile-drawer__quick-icon {
    background: rgba(240, 133, 31, 0.14);
    color: #EF8420;
  }
  .mobile-drawer__quick-icon svg { width: 24px; height: 24px; }

  .mobile-drawer__quick-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-drawer__quick-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); }
  .mobile-drawer__quick-desc { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; }

  .mobile-drawer__quick-chev { width: 20px; height: 20px; flex: none; color: var(--color-primary); }
  .mobile-drawer__quick-card--search .mobile-drawer__quick-chev { color: #EF8420; }
  .mobile-drawer__hairline {
    height: 1px;
    margin: var(--space-1) var(--space-4);
    background: var(--color-gray-light);
  }

  /* Flat link clusters — no group labels; clusters are separated by whitespace
     and a hairline. The last cluster's items push the footer to the bottom. */
  @media (max-width: 360px) {
    .mobile-drawer__quick {
      padding-inline: var(--space-3);
      gap: var(--space-1);
    }
    .mobile-drawer__quick-card {
      min-height: 104px;
      padding: var(--space-2);
      font-size: var(--fs-sm);
    }
    .mobile-drawer__quick-icon {
      width: 48px;
      height: 48px;
    }
    .mobile-drawer__quick-icon svg {
      width: 28px;
      height: 28px;
    }
  }

  .mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    flex: 0 0 auto;
  }
  .mobile-drawer__nav + .mobile-drawer__nav {
    border-top: 0;
  }

  /* "Account" group label — a slim divider heading between the Browse cluster
     and the account links. Acts as the hairline separator itself, so the nav
     that follows it does NOT also get a top border. */
  .mobile-drawer__section {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-1);
    border-top: 0;
    color: var(--color-text-faint);
    font-size: 0.75rem;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-drawer__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    padding: 11px var(--space-3);
    color: #4C5D74;
    font-weight: var(--fw-regular);
    font-size: 0.95rem;
    line-height: 1.35;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__nav a:hover {
    background: rgba(47, 83, 155, 0.06);
    color: var(--color-primary);
  }
  .mobile-drawer__nav a.is-active {
    background: transparent;
    color: var(--color-primary);
    font-weight: var(--fw-medium);
  }
  .mobile-drawer__nav a.is-active span { position: relative; }
  .mobile-drawer__nav a.is-active span::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    background: #D71920;
    border-radius: var(--radius-pill);
  }
  .mobile-drawer__nav svg {
    width: 18.5px;
    height: 18.5px;
    color: #73849A;
    flex-shrink: 0;
  }
  .mobile-drawer__nav a:hover svg,
  .mobile-drawer__nav a.is-active svg {
    color: var(--color-primary);
  }
  .mobile-drawer__nav a.mobile-drawer__login {
    min-height: 46px;
    margin: var(--space-1) var(--space-1) var(--space-2);
    background: rgba(47, 83, 155, 0.08);
    border: 1px solid rgba(47, 83, 155, 0.12);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
  }
  .mobile-drawer__nav a.mobile-drawer__login:hover {
    background: rgba(47, 83, 155, 0.12);
    color: var(--color-primary-hover);
  }
  .mobile-drawer__nav a.mobile-drawer__login svg {
    color: var(--color-primary);
  }

  /* Pinned footer: a prominent Sell CTA + a slim utility row. */
  .mobile-drawer__foot {
    margin-top: auto;
    padding: var(--space-3) var(--space-3) var(--space-4);
  }

  .mobile-drawer__footrow {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-gray-light);
  }
  .mobile-drawer__lang {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__lang:hover {
    background: rgba(47, 83, 155, 0.06);
    color: var(--color-primary);
  }
  .mobile-drawer__lang svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
  }
  .mobile-drawer__lang-text {
    min-width: 0;
  }
  .mobile-drawer__lang-target {
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    white-space: nowrap;
  }
  .mobile-drawer__lang svg.mobile-drawer__lang-arrow {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
  }
  .mobile-drawer__footactions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .mobile-drawer__footicon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__footicon:hover { background: var(--color-gray-soft); color: var(--color-primary); }
  .mobile-drawer__footicon svg { width: 20px; height: 20px; }
  .mobile-drawer__footout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: 10px var(--space-3);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
  }
  .mobile-drawer__footout:hover { background: rgba(47, 83, 155, 0.06); color: var(--color-danger, #d92d20); }
  .mobile-drawer__footout svg { width: 18px; height: 18px; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    z-index: var(--z-overlay);
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  body.nav-open { overflow: hidden; }
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--color-gray-soft);
  border-top: 1px solid var(--color-gray-light);
  padding-block: var(--space-7);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-col h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--color-text-muted); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--color-primary); }
.footer-about p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
  max-width: 38ch;
}
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-light);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}
/* Locale info + language switch grouped on the footer-bottom's trailing side. */
.footer-bottom__locale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.footer-bottom__locale .lang-switch { font-size: var(--fs-xs); }

/* ---- Generic grid for listings -------------------------------------- */
.grid-listings {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 560px)  { .grid-listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-listings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-listings { grid-template-columns: repeat(4, 1fr); } }

/* Search-results page: one car per row on desktop, horizontal card layout */
@media (min-width: 980px) {
  .results-layout .grid-listings { grid-template-columns: 1fr; }
}

/* Page transitions: the cross-document View-Transitions slide was removed —
   on real devices the whole-page slide janked the sticky header / bottom
   contact bar, cross-document transitions freeze the old page while the next
   loads (a visible stutter on mobile networks), and it added a forced ~320ms
   animation on top of prefetch.js (which already makes same-origin navigation
   near-instant). Standard navigation + prefetch is smoother. If a transition
   is wanted again, re-add it pinning the header/contact-bar with their own
   view-transition-name so only the content animates. */

/* ============================================================================
   App-wide header: lowercase "findmotos" wordmark + carsales-style
   "Sell my car ›" link. This is the standard header on every Public/Users
   page (Admin keeps its own layout). Mobile (<=980px) shows the centred
   wordmark with the hamburger on its edge (left in EN, right in AR) and the
   sell link hugging the opposite edge; desktop keeps the full .site-nav.
   ========================================================================== */
.brand--logo {
  flex-direction: column;
  gap: 1px;
  line-height: 1;
  text-decoration: none;
}
.brand--logo .brand__word {
  font-weight: var(--fw-bold, 700);
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand--logo .brand__find  { color: var(--color-primary); }  /* navy */
.brand--logo .brand__motos { color: #2E86FF; }               /* blue */

.mobile-header-sell-link { display: none; }

@media (max-width: 980px) {
  .site-header__inner .brand--logo {
    flex-direction: column;
    font-size: 1rem;          /* override the bumped mobile brand size */
  }
  .site-header__inner .brand--logo .brand__word { font-size: 1.7rem; }

  .mobile-header-sell-link {
    position: absolute;
    inset-inline-end: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding-inline: 4px;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition);
  }
  .mobile-header-sell-link:hover { color: var(--color-text); }
  .mobile-header-sell-link__chev { width: 18px; height: 18px; flex: none; }
  /* The chevron points "forward"; in RTL forward is leftwards, so flip it. */
  [dir="rtl"] .mobile-header-sell-link__chev { transform: scaleX(-1); }
}

@media (max-width: 430px) {
  .site-header__inner .brand--logo .brand__word { font-size: 1.51rem; }
}
@media (max-width: 360px) {
  .mobile-header-sell-link { font-size: 0.85rem; }
}