/* ═══════════════════════════════════════════════════════════════════
   معتمد — Premium RTL Design System
   Palette: Gold #B8860B · Navy #1A2530 · Off-white #FAFAF8
═══════════════════════════════════════════════════════════════════ */

/* ── Vazirmatn self-hosted ───────────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  --gold:          #B8860B;
  --gold-dk:       #9A6F09;
  --gold-lt:       #D4A830;
  --gold-pale:     #FFF8E7;
  --gold-tint:     rgba(184,134,11,.08);
  --gold-border:   rgba(184,134,11,.25);
  --gold-shadow:   rgba(184,134,11,.14);

  --navy:          #1A2530;
  --navy-mid:      #243347;
  --navy-lt:       #2E4057;
  --navy-ghost:    rgba(26,37,48,.06);

  --white:         #FFFFFF;
  --off-white:     #FAFAF8;
  --gray-50:       #F5F4EF;
  --gray-100:      #EDE9DF;
  --gray-200:      #D4CFC4;
  --gray-400:      #9CA3AF;
  --gray-600:      #6B7280;
  --text:          #1A2530;
  --text-body:     #374151;
  --text-muted:    #6B7280;

  --whatsapp:      #25D366;
  --whatsapp-dk:   #1DAA55;
  --telegram:      #229ED9;
  --telegram-dk:   #1A87C0;

  --r:             12px;
  --r-sm:          8px;
  --r-lg:          18px;
  --r-xl:          24px;
  --shadow:        0 4px 24px var(--gold-shadow);
  --shadow-hover:  0 8px 36px rgba(184,134,11,.22);
  --shadow-card:   0 2px 16px rgba(26,37,48,.08);
  --t:             0.28s ease;
  --container:     1220px;
  --hdr:           72px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body {
  font-family: 'Vazirmatn', Tahoma, 'Arial', sans-serif;
  direction: rtl; text-align: right;
  background: var(--off-white); color: var(--text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
button { font-family:inherit; cursor:pointer }
svg { flex-shrink:0 }

/* ── Utilities ───────────────────────────────────────────────────── */
.container { max-width:var(--container); margin:0 auto; padding:0 28px }
.section    { padding:80px 0 }
.section-sm { padding:52px 0 }
.text-gold  { color:var(--gold) }
.text-navy  { color:var(--navy) }
.text-muted { color:var(--text-muted) }
.fw-700     { font-weight:700 }
.ltr        { direction:ltr; unicode-bidi:embed }

.section-head { text-align:center; margin-bottom:52px }
.section-head h2 {
  font-size:clamp(22px,3vw,32px); font-weight:700;
  color:var(--navy); margin-bottom:12px; line-height:1.3
}
.section-head .eyebrow {
  display:inline-block; font-size:13px; font-weight:600;
  color:var(--gold); letter-spacing:1px;
  border-bottom:2px solid var(--gold-border); padding-bottom:4px;
  margin-bottom:14px
}
.section-head p {
  color:var(--text-muted); font-size:15px; max-width:560px; margin:0 auto
}
.divider-gold {
  display:block; width:52px; height:3px; background:var(--gold);
  border-radius:4px; margin:16px auto 0
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 26px; border-radius:var(--r-sm);
  font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; border:2px solid transparent;
  transition:all var(--t); white-space:nowrap; line-height:1.4;
  text-decoration:none
}
.btn svg { pointer-events:none }
.btn-gold {
  background:var(--gold); color:#fff; border-color:var(--gold)
}
.btn-gold:hover {
  background:var(--gold-dk); border-color:var(--gold-dk);
  transform:translateY(-2px); box-shadow:var(--shadow)
}
.btn-outline-gold {
  background:transparent; color:var(--gold); border-color:var(--gold)
}
.btn-outline-gold:hover {
  background:var(--gold); color:#fff;
  transform:translateY(-2px)
}
.btn-navy {
  background:var(--navy); color:#fff; border-color:var(--navy)
}
.btn-navy:hover { background:var(--navy-mid); transform:translateY(-2px) }
.btn-whatsapp {
  background:var(--whatsapp); color:#fff; border-color:var(--whatsapp)
}
.btn-whatsapp:hover {
  background:var(--whatsapp-dk); border-color:var(--whatsapp-dk);
  transform:translateY(-2px)
}
.btn-telegram {
  background:var(--telegram); color:#fff; border-color:var(--telegram)
}
.btn-telegram:hover {
  background:var(--telegram-dk); transform:translateY(-2px)
}
.btn-lg { padding:14px 34px; font-size:16px }
.btn-sm { padding:7px 16px; font-size:13px }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position:fixed; inset:0 0 auto; z-index:9999;
  height:var(--hdr);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gray-100);
  box-shadow:0 2px 20px rgba(26,37,48,.06);
  transition:box-shadow var(--t)
}
.site-header.scrolled { box-shadow:0 4px 32px rgba(26,37,48,.12) }
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; gap:20px
}

/* Logo */
.logo {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  text-decoration:none
}
.logo-badge {
  width:42px; height:42px; border-radius:10px; background:var(--gold);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:20px; font-weight:800; flex-shrink:0;
  box-shadow:0 3px 12px var(--gold-shadow)
}
.logo-text { line-height:1.25 }
.logo-name {
  font-size:18px; font-weight:800; color:var(--navy); display:block
}
.logo-desc {
  font-size:11px; font-weight:400; color:var(--text-muted); display:block
}

/* Nav */
.main-nav { display:flex; align-items:center; gap:2px }
.main-nav a {
  display:block; padding:7px 15px; font-size:15px; font-weight:500;
  color:var(--text-body); border-radius:var(--r-sm);
  transition:color var(--t), background var(--t)
}
.main-nav a:hover,
.main-nav a.active {
  color:var(--gold); background:var(--gold-pale)
}

/* Header actions */
.hdr-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.hdr-phone {
  display:flex; align-items:center; gap:6px;
  color:var(--text-muted); font-size:13px
}
.hdr-phone span[dir=ltr] { font-size:14px; font-weight:600; color:var(--navy) }

/* Mobile toggle */
.menu-toggle {
  display:none; background:none; border:none;
  padding:8px; color:var(--navy); border-radius:var(--r-sm);
  transition:background var(--t); cursor:pointer
}
.menu-toggle:hover { background:var(--gray-50) }
.hamburger {
  display:flex; flex-direction:column; gap:5px; width:22px
}
.hamburger span {
  display:block; height:2px; background:currentColor; border-radius:2px;
  transition:transform var(--t), opacity var(--t), width var(--t)
}
.hamburger span:last-child { width:70% }
.menu-toggle[aria-expanded=true] .hamburger span:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] .hamburger span:nth-child(2) {
  opacity:0
}
.menu-toggle[aria-expanded=true] .hamburger span:nth-child(3) {
  width:100%; transform:translateY(-7px) rotate(-45deg)
}

/* Mobile nav drawer */
.mobile-nav {
  display:none; position:fixed;
  inset:var(--hdr) 0 0;
  background:rgba(26,37,48,.55);
  z-index:9998
}
.mobile-nav.open { display:block }
.mobile-nav-panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(320px,85vw); background:#fff;
  padding:28px 24px; overflow-y:auto;
  box-shadow:-4px 0 40px rgba(26,37,48,.18);
  display:flex; flex-direction:column; gap:6px
}
.mobile-nav-panel a {
  display:block; padding:14px 16px; font-size:16px; font-weight:500;
  color:var(--text); border-radius:var(--r-sm);
  border-bottom:1px solid var(--gray-50);
  transition:background var(--t), color var(--t)
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a.active { background:var(--gold-pale); color:var(--gold) }
.mobile-nav-panel .btn { margin-top:16px; justify-content:center; width:100% }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:92vh;
  display:flex; align-items:center;
  padding-top:var(--hdr); overflow:hidden
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  background-repeat:no-repeat
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    115deg,
    rgba(26,37,48,.82) 0%,
    rgba(26,37,48,.65) 55%,
    rgba(26,37,48,.30) 100%
  )
}
.hero-content {
  position:relative; z-index:2;
  max-width:680px; padding:72px 0
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(184,134,11,.18); border:1px solid rgba(184,134,11,.4);
  color:var(--gold-lt); font-size:13px; font-weight:600;
  padding:6px 14px; border-radius:30px; margin-bottom:24px
}
.hero h1 {
  font-size:clamp(26px,4.5vw,44px); font-weight:800;
  color:#fff; line-height:1.35; margin-bottom:20px
}
.hero h1 .accent { color:var(--gold-lt) }
.hero-sub {
  font-size:clamp(14px,1.6vw,17px); color:rgba(255,255,255,.82);
  margin-bottom:36px; max-width:520px; line-height:1.9
}
.hero-btns {
  display:flex; flex-wrap:wrap; gap:14px; align-items:center
}
.hero-trust {
  position:absolute; bottom:28px; right:0; left:0; z-index:2
}
.hero-trust-inner {
  display:flex; gap:32px; align-items:center;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r);
  padding:14px 28px; width:fit-content
}
.hero-trust-item {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.85); font-size:13px; font-weight:500
}
.hero-trust-item svg { color:var(--gold-lt) }

/* ── Rates band ──────────────────────────────────────────────────── */
.rates-band {
  background:var(--navy); padding:0;
  overflow:hidden; position:relative
}
.rates-band-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px 0; border-bottom:1px solid rgba(255,255,255,.08)
}
.rates-band-title {
  color:rgba(255,255,255,.7); font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase
}
.rates-update {
  color:rgba(255,255,255,.4); font-size:12px;
  display:flex; align-items:center; gap:6px
}
.rates-update::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--whatsapp); display:inline-block;
  animation:pulse 2s infinite
}
@keyframes pulse {
  0%,100% { opacity:1 } 50% { opacity:.4 }
}
.rates-scroll {
  display:flex; overflow-x:auto;
  scroll-snap-type:x mandatory; gap:0;
  scrollbar-width:none
}
.rates-scroll::-webkit-scrollbar { display:none }
.rate-card {
  flex:0 0 auto; min-width:180px;
  display:flex; flex-direction:column;
  padding:18px 22px; gap:6px;
  border-left:1px solid rgba(255,255,255,.07);
  scroll-snap-align:start; cursor:default;
  transition:background var(--t)
}
.rate-card:hover { background:rgba(255,255,255,.05) }
.rate-card-head {
  display:flex; align-items:center; gap:10px; margin-bottom:4px
}
.rate-flag {
  width:32px; height:22px; border-radius:4px; overflow:hidden;
  background:var(--navy-lt); display:flex; align-items:center;
  justify-content:center; font-size:18px; flex-shrink:0
}
.rate-symbol {
  font-size:13px; font-weight:700; color:#fff
}
.rate-name {
  font-size:11px; color:rgba(255,255,255,.5); margin-bottom:2px
}
.rate-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px
}
.rate-label { color:rgba(255,255,255,.45) }
.rate-val   { color:#fff; font-weight:600; font-size:13px }
.rate-val.buy  { color:#6EE7B7 }
.rate-val.sell { color:#FCA5A5 }

/* Shimmer bar below rates */
.rates-shimmer {
  height:3px;
  background:linear-gradient(90deg,
    var(--navy) 0%, var(--gold) 40%, var(--gold-lt) 60%, var(--navy) 100%);
  background-size:200% 100%;
  animation:shimmer 3s linear infinite
}
@keyframes shimmer {
  0% { background-position:200% center }
  100% { background-position:-200% center }
}

/* ── Trust badges ────────────────────────────────────────────────── */
.trust-badges { background:var(--gray-50); padding:56px 0 }
.trust-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px
}
.trust-card {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gold-border);
  padding:30px 22px; text-align:center;
  box-shadow:var(--shadow); transition:transform var(--t), box-shadow var(--t)
}
.trust-card:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-hover)
}
.trust-icon {
  width:56px; height:56px; border-radius:14px;
  background:var(--gold-pale); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; border:1px solid var(--gold-border)
}
.trust-card h3 {
  font-size:15px; font-weight:700; color:var(--navy); margin-bottom:6px
}
.trust-card p { font-size:13px; color:var(--text-muted); line-height:1.6 }

/* ── Rates table section ─────────────────────────────────────────── */
.rates-table-section { background:#fff }
.rates-table-wrap { overflow-x:auto; border-radius:var(--r); box-shadow:var(--shadow-card) }
.rates-table {
  width:100%; border-collapse:collapse;
  font-size:14px
}
.rates-table thead tr {
  background:var(--navy); color:#fff
}
.rates-table thead th {
  padding:14px 20px; font-weight:600; font-size:13px;
  text-align:right; white-space:nowrap
}
.rates-table thead th:first-child { text-align:center; width:56px }
.rates-table tbody tr {
  border-bottom:1px solid var(--gray-50);
  transition:background var(--t)
}
.rates-table tbody tr:last-child { border-bottom:none }
.rates-table tbody tr:hover { background:var(--gold-tint) }
.rates-table td {
  padding:14px 20px; vertical-align:middle
}
.rates-table td:first-child { text-align:center; padding:10px }
.rt-thumb {
  width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover;
  border:1px solid var(--gray-100)
}
.rt-name { font-weight:600; color:var(--navy); font-size:14px }
.rt-cat  { font-size:12px; color:var(--text-muted) }
.rt-price { font-weight:700; color:var(--gold); font-size:15px; white-space:nowrap }
.rt-sell  { color:var(--navy-mid); font-weight:600; font-size:14px }
.badge-cat {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600;
  background:var(--gold-pale); color:var(--gold); border:1px solid var(--gold-border)
}

/* ── Branches ────────────────────────────────────────────────────── */
.branches { background:var(--off-white) }
.branches-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px
}
.branch-card {
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--t), box-shadow var(--t);
  border:1px solid var(--gray-100)
}
.branch-card:hover {
  transform:translateY(-6px); box-shadow:var(--shadow-hover)
}
.branch-img {
  width:100%; height:200px; object-fit:cover
}
.branch-body { padding:24px }
.branch-city {
  font-size:11px; font-weight:700; color:var(--gold);
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px
}
.branch-name {
  font-size:17px; font-weight:700; color:var(--navy); margin-bottom:12px
}
.branch-detail {
  display:flex; align-items:flex-start; gap:8px;
  color:var(--text-muted); font-size:13px; margin-bottom:8px;
  line-height:1.6
}
.branch-detail svg { color:var(--gold); margin-top:2px; flex-shrink:0 }
.branch-phone {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; color:var(--navy); font-weight:600; font-size:14px
}

/* ── About strip ─────────────────────────────────────────────────── */
.about-strip {
  background:var(--navy); padding:72px 0; overflow:hidden
}
.about-strip-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center
}
.about-img-wrap {
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 8px 40px rgba(26,37,48,.4);
  aspect-ratio:4/3
}
.about-img-wrap img { width:100%; height:100%; object-fit:cover }
.about-text { color:rgba(255,255,255,.9) }
.about-text .eyebrow {
  color:var(--gold-lt); font-size:12px; font-weight:700;
  letter-spacing:1.5px; display:block; margin-bottom:16px
}
.about-text h2 {
  font-size:clamp(20px,2.8vw,30px); font-weight:800; color:#fff;
  margin-bottom:20px; line-height:1.35
}
.about-text p {
  font-size:15px; color:rgba(255,255,255,.7); line-height:1.9; margin-bottom:16px
}
.about-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px
}
.about-stat {
  background:rgba(255,255,255,.08); border-radius:var(--r-sm);
  padding:18px 16px; text-align:center; border:1px solid rgba(255,255,255,.1)
}
.about-stat-num {
  font-size:26px; font-weight:800; color:var(--gold-lt);
  display:block; line-height:1
}
.about-stat-lbl {
  font-size:12px; color:rgba(255,255,255,.55); margin-top:4px; display:block
}

/* ── Contact ─────────────────────────────────────────────────────── */
.contact { background:var(--gray-50) }
.contact-grid {
  display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:start
}
.contact-info-card {
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border-radius:var(--r);
  padding:20px; margin-bottom:16px;
  border:1px solid var(--gray-100);
  box-shadow:var(--shadow-card);
  transition:transform var(--t), box-shadow var(--t)
}
.contact-info-card:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
.contact-info-icon {
  width:44px; height:44px; border-radius:11px;
  background:var(--gold-pale); color:var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--gold-border)
}
.contact-info-body { flex:1 }
.contact-info-label {
  font-size:12px; font-weight:600; color:var(--text-muted);
  margin-bottom:4px; display:block
}
.contact-info-val {
  font-size:15px; font-weight:600; color:var(--navy)
}
.contact-btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px }
.contact-map {
  background:var(--gray-100); border-radius:var(--r-lg);
  overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  position:relative
}
.contact-map img {
  width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg)
}
.map-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:rgba(26,37,48,.55); color:#fff
}
.map-overlay svg { color:var(--gold-lt); opacity:.9 }
.map-overlay p { font-size:13px; opacity:.8 }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background:var(--navy); color:rgba(255,255,255,.7);
  padding-top:56px
}
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.footer-brand .logo-name { color:#fff }
.footer-brand .logo-desc { color:rgba(255,255,255,.45) }
.footer-tagline {
  font-size:14px; color:rgba(255,255,255,.55);
  margin:16px 0 24px; max-width:280px; line-height:1.8
}
.footer-social { display:flex; gap:10px; margin-top:8px }
.social-btn {
  width:38px; height:38px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6);
  transition:background var(--t), border-color var(--t), color var(--t)
}
.social-btn:hover {
  background:var(--gold); border-color:var(--gold); color:#fff
}
.footer-col h4 {
  font-size:14px; font-weight:700; color:#fff; margin-bottom:20px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.1)
}
.footer-links { display:flex; flex-direction:column; gap:10px }
.footer-links a {
  font-size:14px; color:rgba(255,255,255,.55);
  transition:color var(--t); padding:2px 0
}
.footer-links a:hover { color:var(--gold-lt) }
.footer-contact-item {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:rgba(255,255,255,.55); margin-bottom:12px
}
.footer-contact-item svg { color:var(--gold); flex-shrink:0 }
.footer-contact-item span[dir=ltr] { color:rgba(255,255,255,.8) }
.footer-bottom {
  padding:18px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:8px
}
.footer-bottom a { color:rgba(255,255,255,.35) }
.footer-bottom a:hover { color:var(--gold-lt) }

/* ── Back to top ──────────────────────────────────────────────────── */
.back-top {
  position:fixed; bottom:28px; left:28px; z-index:8888;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px var(--gold-shadow);
  opacity:0; pointer-events:none;
  transition:opacity var(--t), transform var(--t)
}
.back-top.show { opacity:1; pointer-events:auto }
.back-top:hover { transform:translateY(-3px) }

/* ── Form elements ────────────────────────────────────────────────── */
.form-group { margin-bottom:18px }
.form-label {
  display:block; font-size:13px; font-weight:600; color:var(--navy);
  margin-bottom:6px
}
.form-control {
  width:100%; padding:11px 16px; border-radius:var(--r-sm);
  border:1px solid var(--gray-200); background:#fff;
  font-family:inherit; font-size:14px; color:var(--text);
  transition:border-color var(--t), box-shadow var(--t);
  direction:rtl
}
.form-control:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,11,.12)
}
.form-control::placeholder { color:var(--gray-400) }
textarea.form-control { resize:vertical; min-height:100px }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert {
  padding:14px 18px; border-radius:var(--r-sm);
  font-size:14px; margin-bottom:16px
}
.alert-success {
  background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0
}
.alert-error {
  background:#FEF2F2; color:#991B1B; border:1px solid #FECACA
}

/* ── Stub page ───────────────────────────────────────────────────── */
.stub-hero {
  min-height:40vh; background:var(--navy);
  display:flex; align-items:center; padding-top:var(--hdr)
}
.stub-hero-inner { padding:56px 0; color:#fff; text-align:center; width:100% }
.stub-hero h1 { font-size:clamp(22px,3vw,32px); font-weight:700; margin-bottom:10px }
.stub-hero p { color:rgba(255,255,255,.6); font-size:15px }
.breadcrumb {
  display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:13px; color:rgba(255,255,255,.45); margin-top:16px
}
.breadcrumb a { color:var(--gold-lt) }
.breadcrumb-sep { opacity:.4 }

/* ── Admin ────────────────────────────────────────────────────────── */
.admin-layout {
  min-height:100vh; background:var(--gray-50)
}
.admin-login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--navy); padding:24px
}
.admin-login-box {
  background:#fff; border-radius:var(--r-xl);
  padding:40px 36px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(26,37,48,.3)
}
.admin-login-box h1 {
  font-size:22px; font-weight:700; color:var(--navy);
  margin-bottom:8px; text-align:center
}
.admin-login-box p { font-size:13px; color:var(--text-muted); text-align:center; margin-bottom:28px }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .trust-grid { grid-template-columns:repeat(2,1fr) }
  .branches-grid { grid-template-columns:repeat(2,1fr) }
  .about-strip-inner { grid-template-columns:1fr; gap:40px }
  .about-img-wrap { max-width:560px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .footer-grid > :first-child { grid-column:1/-1 }
}
@media (max-width: 768px) {
  :root { --hdr:64px }
  .container { padding:0 18px }
  .section { padding:56px 0 }

  .main-nav,
  .hdr-phone { display:none }
  .menu-toggle { display:flex }
  .hdr-actions .btn-outline-gold { display:none }

  .hero { min-height:80vh }
  .hero h1 { font-size:clamp(22px,6vw,32px) }
  .hero-trust { display:none }
  .hero-btns { flex-direction:column; align-items:flex-start }
  .hero-btns .btn { width:100%; justify-content:center }

  .rates-scroll { padding:0 8px }
  .rate-card { min-width:160px; padding:14px 16px }

  .trust-grid { grid-template-columns:repeat(2,1fr); gap:14px }
  .branches-grid { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr }
  .footer-grid > :first-child { grid-column:auto }
  .about-strip-inner { grid-template-columns:1fr }
  .about-stats { grid-template-columns:repeat(3,1fr) }
  .footer-bottom { justify-content:center; text-align:center }
  .back-top { bottom:20px; left:16px; width:40px; height:40px }
}
@media (max-width: 390px) {
  .hero-btns .btn-lg { padding:12px 20px; font-size:14px }
  .trust-grid { grid-template-columns:1fr }
  .rates-table { font-size:12px }
  .rates-table thead th,
  .rates-table td { padding:10px 12px }
  .about-stats { grid-template-columns:1fr 1fr }
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px) }
  to   { opacity:1; transform:translateY(0) }
}
.fade-up { animation:fadeUp .5s ease both }
.fade-up-1 { animation-delay:.1s }
.fade-up-2 { animation-delay:.2s }
.fade-up-3 { animation-delay:.3s }
.fade-up-4 { animation-delay:.4s }

/* ── Header cart / account icons ─────────────────────────────────── */
.hdr-icon-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-sm);
  color:var(--navy); transition:background var(--t), border-color var(--t);
  border:1px solid transparent
}
.hdr-icon-btn:hover { background:var(--gray-50); border-color:var(--gray-100) }
.cart-badge {
  position:absolute; top:-5px; left:-5px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--gold); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1
}

/* ── Shop ────────────────────────────────────────────────────────── */
.shop-filter {
  display:flex; align-items:center; gap:8px; margin-bottom:36px; flex-wrap:wrap
}
.filter-btn {
  padding:7px 20px; border-radius:20px; font-size:14px; font-weight:600;
  border:1.5px solid var(--gray-200); background:#fff; color:var(--text-body);
  cursor:pointer; transition:all var(--t); font-family:inherit
}
.filter-btn:hover { border-color:var(--gold); color:var(--gold) }
.filter-btn.active { background:var(--gold); border-color:var(--gold); color:#fff }
.shop-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px
}
.shop-card {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform var(--t), box-shadow var(--t)
}
.shop-card:hover { transform:translateY(-5px); box-shadow:var(--shadow) }
.shop-card-img-wrap { overflow:hidden; aspect-ratio:1 }
.shop-card-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease
}
.shop-card:hover .shop-card-img { transform:scale(1.05) }
.shop-card-body { padding:16px }
.shop-card-symbol {
  font-size:11px; font-weight:700; color:var(--gold);
  letter-spacing:1px; margin-bottom:4px; display:block
}
.shop-card-name {
  font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.3
}
.shop-card-price { font-size:13px; color:var(--text-muted); margin-bottom:14px; line-height:1.5 }
.shop-card-price strong { display:block; color:var(--gold); font-size:15px; margin-top:2px }

/* ── Product detail ───────────────────────────────────────────────── */
.product-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start
}
.product-main-img-wrap {
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1; box-shadow:var(--shadow); margin-bottom:12px
}
.product-main-img-wrap img {
  width:100%; height:100%; object-fit:cover; transition:filter .3s ease
}
.product-thumbs { display:flex; gap:10px }
.product-thumb {
  width:72px; height:72px; border-radius:var(--r-sm);
  border:2px solid var(--gray-200); overflow:hidden; cursor:pointer;
  transition:border-color var(--t), transform var(--t); flex-shrink:0;
  padding:0; background:none
}
.product-thumb:hover { border-color:var(--gold-border) }
.product-thumb.active  { border-color:var(--gold) }
.product-thumb img { width:100%; height:100%; object-fit:cover; pointer-events:none }
.product-info { position:sticky; top:calc(var(--hdr) + 20px) }
.product-cat {
  font-size:12px; font-weight:700; color:var(--gold);
  letter-spacing:1px; margin-bottom:10px; display:block; text-transform:uppercase
}
.product-name {
  font-size:clamp(20px,2.5vw,28px); font-weight:800; color:var(--navy);
  margin-bottom:8px; line-height:1.3
}
.product-symbol-tag {
  display:inline-block; padding:4px 14px; background:var(--gold-pale);
  color:var(--gold); border:1px solid var(--gold-border);
  border-radius:20px; font-size:13px; font-weight:700; margin-bottom:22px
}
.product-price-label { font-size:13px; color:var(--text-muted); margin-bottom:4px }
.product-price {
  font-size:30px; font-weight:800; color:var(--gold); margin-bottom:8px; line-height:1.2
}
.product-price-sub { font-size:13px; color:var(--text-muted); margin-bottom:24px }
.product-divider { height:1px; background:var(--gray-100); margin:24px 0 }
.option-label {
  font-size:13px; font-weight:700; color:var(--navy); margin-bottom:10px; display:block
}
.option-btns { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px }
.option-btn {
  padding:9px 18px; border-radius:var(--r-sm);
  border:1.5px solid var(--gray-200); background:#fff;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--text-body);
  cursor:pointer; transition:all var(--t)
}
.option-btn:hover { border-color:var(--gold); color:var(--gold) }
.option-btn.selected { background:var(--gold); border-color:var(--gold); color:#fff }
.qty-wrap {
  display:inline-flex; align-items:center; margin-bottom:24px;
  border:1.5px solid var(--gray-200); border-radius:var(--r-sm); overflow:hidden
}
.qty-btn {
  width:40px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--gray-50); border:none; color:var(--navy);
  font-size:18px; font-weight:700; cursor:pointer; transition:background var(--t);
  font-family:inherit
}
.qty-btn:hover { background:var(--gold-pale); color:var(--gold) }
.qty-input {
  width:60px; height:42px; text-align:center;
  border:none; border-right:1.5px solid var(--gray-200); border-left:1.5px solid var(--gray-200);
  font-family:inherit; font-size:16px; font-weight:700; color:var(--navy);
  background:#fff; direction:ltr
}
.qty-input:focus { outline:none; background:var(--gold-tint) }
.product-total-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--gold-tint); border-radius:var(--r-sm);
  margin-bottom:20px; border:1px solid var(--gold-border)
}
.product-total-lbl { font-size:14px; font-weight:600; color:var(--navy) }
.product-total-price { font-size:20px; font-weight:800; color:var(--gold) }

/* ── Cart ─────────────────────────────────────────────────────────── */
.cart-layout {
  display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start
}
.cart-items { display:flex; flex-direction:column; gap:14px }
.cart-item {
  display:flex; gap:16px; align-items:center;
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); padding:16px;
  box-shadow:var(--shadow-card); transition:box-shadow var(--t)
}
.cart-item:hover { box-shadow:var(--shadow) }
.cart-item-img {
  width:80px; height:80px; border-radius:var(--r-sm);
  object-fit:cover; flex-shrink:0; border:1px solid var(--gray-100)
}
.cart-item-info { flex:1; min-width:0 }
.cart-item-name {
  font-size:15px; font-weight:700; color:var(--navy); margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.cart-item-detail { font-size:13px; color:var(--text-muted); margin-bottom:10px }
.cart-item-qty-form { display:flex; align-items:center; gap:8px }
.cart-qty-ctrl {
  display:inline-flex; align-items:center;
  border:1px solid var(--gray-200); border-radius:var(--r-sm); overflow:hidden
}
.cart-qty-btn {
  width:32px; height:32px; background:var(--gray-50); border:none;
  font-size:16px; cursor:pointer; transition:background var(--t);
  display:flex; align-items:center; justify-content:center; font-family:inherit
}
.cart-qty-btn:hover { background:var(--gold-pale); color:var(--gold) }
.cart-qty-val {
  width:44px; text-align:center; font-weight:700; font-size:14px;
  border:none; border-right:1px solid var(--gray-200); border-left:1px solid var(--gray-200);
  background:#fff; color:var(--navy); font-family:inherit; direction:ltr;
  height:32px
}
.cart-qty-val:focus { outline:none }
.cart-item-subtotal {
  font-size:16px; font-weight:700; color:var(--gold);
  white-space:nowrap; text-align:left; min-width:100px
}
.cart-remove-btn {
  background:none; border:none; color:var(--gray-400);
  cursor:pointer; padding:8px; border-radius:var(--r-sm);
  transition:color var(--t), background var(--t); display:flex
}
.cart-remove-btn:hover { color:#DC2626; background:#FEF2F2 }
.cart-summary {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); padding:24px;
  box-shadow:var(--shadow); position:sticky; top:calc(var(--hdr)+20px)
}
.cart-summary h3 {
  font-size:16px; font-weight:700; color:var(--navy);
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--gray-100)
}
.summary-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; color:var(--text-muted); margin-bottom:10px
}
.summary-row.total {
  font-size:17px; font-weight:700; color:var(--navy);
  padding-top:14px; border-top:1px solid var(--gray-100); margin-top:10px; margin-bottom:20px
}
.summary-row.total span:last-child { color:var(--gold) }
.cart-empty {
  text-align:center; padding:80px 24px; color:var(--text-muted)
}
.cart-empty svg { color:var(--gray-200); margin:0 auto 20px; display:block }
.cart-empty h3 { font-size:20px; color:var(--navy); margin-bottom:8px; font-weight:700 }
.cart-empty p { margin-bottom:28px }

/* ── Checkout ─────────────────────────────────────────────────────── */
.checkout-layout {
  display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start
}
.checkout-form-box {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); padding:32px;
  box-shadow:var(--shadow-card)
}
.checkout-form-box h2 {
  font-size:18px; font-weight:700; color:var(--navy);
  margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid var(--gray-100)
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.checkout-success {
  text-align:center; padding:56px 24px; background:#fff;
  border-radius:var(--r); border:1px solid var(--gray-100); box-shadow:var(--shadow)
}
.checkout-success-icon {
  width:72px; height:72px; border-radius:50%;
  background:#ECFDF5; color:#059669;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:32px
}
.checkout-success h2 { font-size:22px; font-weight:700; color:var(--navy); margin-bottom:10px }
.checkout-success p { color:var(--text-muted); font-size:15px; margin-bottom:28px }
.order-items-summary {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); padding:24px; box-shadow:var(--shadow-card)
}
.order-items-summary h3 {
  font-size:15px; font-weight:700; color:var(--navy);
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--gray-100)
}
.order-item-row {
  display:flex; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--gray-50)
}
.order-item-row:last-of-type { border-bottom:none }
.order-item-img {
  width:52px; height:52px; border-radius:var(--r-sm);
  object-fit:cover; flex-shrink:0; border:1px solid var(--gray-100)
}
.order-item-info { flex:1; min-width:0 }
.order-item-name { font-size:14px; font-weight:600; color:var(--navy) }
.order-item-qty  { font-size:12px; color:var(--text-muted); margin-top:3px }
.order-item-price{ font-size:14px; font-weight:700; color:var(--gold); white-space:nowrap }

/* ── Auth (login / register) ─────────────────────────────────────── */
.auth-section {
  min-height:calc(100vh - var(--hdr));
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--hdr) + 32px) 24px 48px; background:var(--gray-50)
}
.auth-box {
  background:#fff; border-radius:var(--r-xl);
  padding:40px 36px; width:100%; max-width:440px;
  box-shadow:var(--shadow); border:1px solid var(--gray-100)
}
.auth-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:28px; justify-content:center
}
.auth-box h1 {
  font-size:22px; font-weight:700; color:var(--navy);
  margin-bottom:6px; text-align:center
}
.auth-sub {
  font-size:14px; color:var(--text-muted); margin-bottom:28px; text-align:center
}
.auth-foot {
  font-size:14px; text-align:center; margin-top:22px;
  color:var(--text-muted); padding-top:20px; border-top:1px solid var(--gray-100)
}
.auth-foot a { color:var(--gold); font-weight:600 }

/* ── Account ─────────────────────────────────────────────────────── */
.account-layout {
  display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start
}
.account-sidebar {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); overflow:hidden;
  box-shadow:var(--shadow-card); position:sticky; top:calc(var(--hdr)+20px)
}
.account-sidebar-user {
  background:var(--navy); padding:24px 20px; text-align:center
}
.account-avatar {
  width:60px; height:60px; border-radius:50%;
  background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; margin:0 auto 12px
}
.account-sidebar-user .u-name { color:#fff; font-weight:700; font-size:15px; display:block }
.account-sidebar-user .u-email {
  color:rgba(255,255,255,.5); font-size:12px; margin-top:3px; display:block
}
.account-nav { display:flex; flex-direction:column }
.account-nav a {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  font-size:14px; font-weight:500; color:var(--text-body);
  border-bottom:1px solid var(--gray-50);
  transition:background var(--t), color var(--t)
}
.account-nav a:last-child { border-bottom:none }
.account-nav a:hover,
.account-nav a.active { background:var(--gold-pale); color:var(--gold) }
.account-nav a.danger { color:#DC2626 }
.account-nav a.danger:hover { background:#FEF2F2; color:#991B1B }
.account-card {
  background:#fff; border-radius:var(--r);
  border:1px solid var(--gray-100); padding:24px;
  box-shadow:var(--shadow-card); margin-bottom:20px
}
.account-card h3 {
  font-size:16px; font-weight:700; color:var(--navy);
  margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--gray-100)
}
.orders-table { width:100%; border-collapse:collapse; font-size:14px }
.orders-table thead th {
  background:var(--gray-50); padding:11px 16px;
  text-align:right; font-weight:600; color:var(--navy);
  border-bottom:1px solid var(--gray-100)
}
.orders-table tbody td {
  padding:13px 16px; border-bottom:1px solid var(--gray-50);
  vertical-align:middle; color:var(--text-body)
}
.orders-table tbody tr:last-child td { border-bottom:none }
.orders-table tbody tr:hover { background:var(--gold-tint) }
.status-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600
}
.status-pending   { background:#FEF9C3; color:#854D0E }
.status-confirmed { background:#D1FAE5; color:#065F46 }
.status-delivered { background:#DBEAFE; color:#1E40AF }
.status-cancelled { background:#FEE2E2; color:#991B1B }
.empty-orders {
  text-align:center; padding:56px 24px; color:var(--text-muted)
}
.empty-orders svg { margin:0 auto 16px; display:block; color:var(--gray-200) }

/* ── Responsive (shop/product/cart etc.) ─────────────────────────── */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns:repeat(3,1fr) }
  .product-layout { grid-template-columns:1fr; gap:32px }
  .product-info { position:static }
  .cart-layout    { grid-template-columns:1fr }
  .cart-summary   { position:static }
  .checkout-layout{ grid-template-columns:1fr }
  .account-layout { grid-template-columns:1fr }
  .account-sidebar{ position:static }
}
@media (max-width: 768px) {
  .shop-grid   { grid-template-columns:repeat(2,1fr); gap:14px }
  .cart-item   { flex-wrap:wrap }
  .cart-item-subtotal { min-width:auto }
  .form-row    { grid-template-columns:1fr }
}
@media (max-width: 390px) {
  .shop-grid  { grid-template-columns:1fr }
  .auth-box   { padding:28px 18px }
  .option-btns{ gap:6px }
  .option-btn { padding:7px 12px; font-size:13px }
}
/* #B64 mobile-reachability fix 2026-09-03 */
@media (max-width:860px){
  main.adm-main,div.adm-content{min-width:0}
  div.adm-card-hd{flex-wrap:wrap;row-gap:8px}
}