/* ═══════════════════════════════════════
   Wheelz Cars — Shared Frontend Styles
   Only rules used across multiple pages.
   Page-specific styles go in @push('styles').
═══════════════════════════════════════ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  color: #1a1a2e;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lang-ar {
  font-family: 'Cairo', sans-serif;
}

/* ── Scroll Reveal ────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1),
              transform .65s cubic-bezier(.16,1,.3,1);
}
.sr.in  { opacity: 1; transform: translateY(0); }
.sr.d1  { transition-delay: .08s; }
.sr.d2  { transition-delay: .16s; }
.sr.d3  { transition-delay: .24s; }
.sr.d4  { transition-delay: .32s; }

/* ── Fade-in (show page) ──────────────── */
.fi { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.fi.in { opacity: 1; transform: translateY(0); }
.fi.d1 { transition-delay: .08s; }
.fi.d2 { transition-delay: .16s; }
.fi.d3 { transition-delay: .24s; }

/* ── Navbar ──────────────────────────── */
#main-nav {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-link { position: relative; transition: color .2s; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  inset-inline-start: 0; /* handles RTL + LTR automatically */
  width: 0;
  height: 2px;
  background: #C40000;
  border-radius: 2px;
  transition: width .25s;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link:hover,
.nav-link.active { color: #C40000; }

/* ── Footer ──────────────────────────── */
#site-footer { background: #1a1a2e; }

.footer-link {
  color: rgba(255,255,255,.55);
  transition: color .2s;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
}
.footer-link:hover { color: #D4AF37; }