/* BYekan @font-face removed to prevent 404.
   To enable, place BYekan.woff2/woff in assets/fonts and add:
@font-face{font-family:'BYekan';src:url('./fonts/BYekan.woff2') format('woff2'),url('./fonts/BYekan.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}*/
:root{
  --brand: #b62126;
  --brand-dark: #8f1519;
  --bg-soft: #f6f7f9;
  --card: #ffffff;
  --ink: #1f2937;
  --ink-soft:#6b7280;
  --ok:#16a34a;
  --warn:#f59e0b;
  --ring: rgba(182,33,38,.25);
}
html[dir="rtl"] body{
  font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans Arabic', sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans Arabic', sans-serif;
  background: var(--bg-soft);
  color: var(--ink);
}
.app-header{
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.card{
  background: var(--card);
  border-radius: 1.2rem;
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
  border: 1px solid rgba(17,24,39,.06);
}
.card.glass{ background: rgba(255,255,255,.75); backdrop-filter: blur(10px); }
.btn{
  border-radius: .9rem; padding: .75rem 1rem; font-weight: 700; transition: all .2s ease;
  box-shadow: 0 10px 20px rgba(182,33,38,.15);
}
.btn-brand{ background: var(--brand); color:#fff; }
.btn-brand:hover{ background: var(--brand-dark); transform: translateY(-1px); }
.btn-ok{ background: var(--ok); color:#fff;}
.btn-call{ background:#2563eb; color:#fff;}
.pill{ display:inline-flex; align-items:center; gap:.4rem; background: #fff; color: var(--brand);
  border:1px solid var(--ring); border-radius:999px; padding:.35rem .6rem; font-size:.8rem; font-weight:700;}
.summary{ position: fixed; inset-inline-end: 1rem; inset-block-end: 6.5rem;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius:1rem; padding: .75rem 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12); }
#map{ height: 56vh; border-radius: 1.2rem; overflow:hidden; }
.app-footer{ background:#111827; color:#e5e7eb; }
.card.next{ outline: 2px solid var(--ring); background: #fff5f5; }


/* --- Dark mode overrides --- */
html.dark body{ background:#0f1115; color:#e5e7eb; }
html.dark .app-header{ background: linear-gradient(135deg, #7f0f12, #b62126); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
html.dark .card{ background:#131720; border-color:#1f2533; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html.dark .card.glass{ background: rgba(19,23,32,.72); }
html.dark .app-footer{ background:#0b0e13; color:#9ca3af; }
html.dark .summary{ background:#131720; border-color:#1f2533; }
html.dark .pill{ background:#1b2230; color:#fff; border-color:#2a3548; }
html.dark .card.next{ background:#1b0f11; }
/* toggle */
.theme-toggle{ position:fixed; inset-inline-end:1rem; inset-block-start:1rem; z-index:1000; }
.theme-toggle button{ border-radius:999px; padding:.5rem .75rem; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,.25); }
.marker-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }


/* === Gradient & Graphic Enhancements (v11) === */
:root{
  --g1: #b62126;
  --g2: #ff6b6b;
  --g3: #f59e0b;
  --g4: #ffb199;
  --bg-grad: radial-gradient(60% 60% at 90% 0%, rgba(182,33,38,.12) 0%, rgba(182,33,38,0) 60%), 
             radial-gradient(40% 40% at 0% 100%, rgba(255,177,153,.15) 0%, rgba(255,177,153,0) 60%);
}

/* Animated gradient header */
.app-header{
  background: linear-gradient(120deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 200%;
  animation: headerFlow 12s ease infinite;
}
@keyframes headerFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Page background with subtle decorative gradients */
html[dir="rtl"] body{
  background-image: var(--bg-grad);
  background-attachment: fixed;
}

/* Gradient buttons */
.btn-grad{
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color:#fff;
  border: 0;
  box-shadow: 0 12px 24px rgba(182,33,38,.25);
}
.btn-grad:hover{ filter: brightness(.98); transform: translateY(-1px); }
.btn-grad-alt{
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color:#fff;
  box-shadow: 0 12px 24px rgba(37,99,235,.25);
}

/* Card with gradient border and glass */
.card.gfx{
  position: relative;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
}
.card.gfx:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 1.3rem;
  padding:1px;
  background: linear-gradient(135deg, rgba(182,33,38,.65), rgba(255,177,153,.65));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
html.dark .card.gfx{
  background: rgba(19,23,32,.72);
}

/* Gradient numeric marker */
.num-icon{
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color:#fff; width:30px; height:30px; line-height:30px; text-align:center; border-radius:999px;
  border:2px solid #fff; font-weight:800; box-shadow: 0 6px 14px rgba(0,0,0,.28);
}

/* Floating summary with gradient accent */
.summary{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.summary:before{
  content:""; position:absolute; inset:0; border-radius:1rem; pointer-events:none;
  background: linear-gradient(135deg, rgba(182,33,38,.08), rgba(255,177,153,.08));
}

/* Map container subtle inner shadow */
#map{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.12);
}

/* Next stop highlight with gradient wash */
.card.next{
  background: linear-gradient(180deg, rgba(255,235,235,.9), rgba(255,255,255,.9));
  outline: 2px solid rgba(182,33,38,.25);
}

/* Dark mode adaptations for gradients */
html.dark .btn-grad{ box-shadow: 0 12px 24px rgba(182,33,38,.35); }
html.dark .btn-grad-alt{ box-shadow: 0 12px 24px rgba(37,99,235,.35); }
html.dark .num-icon{ border-color: #0f1115; }
html.dark .card.next{
  background: linear-gradient(180deg, rgba(27,15,17,.9), rgba(19,23,32,.9));
  outline-color: rgba(255,177,153,.25);
}


/* === Micro-animations & Gradient Blobs (v12) === */
.card.gfx{
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.card.gfx:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
}
.btn-grad, .btn-grad-alt{
  position: relative; overflow: hidden; isolation:isolate;
}
.btn-grad:after, .btn-grad-alt:after{
  content:""; position:absolute; inset:auto -30% -60% -30%;
  height:200%; transform: translateY(0);
  background: radial-gradient(40% 40% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(12px); transition: transform .4s ease, opacity .4s ease; opacity:.6;
}
.btn-grad:hover:after, .btn-grad-alt:hover:after{
  transform: translateY(-20%); opacity:.85;
}

/* Pulsing marker ring for next stop */
.leaflet-marker-icon.next-stop::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  border: 2px solid rgba(182,33,38,.5); animation: pulse 1.8s infinite ease-out;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity:.9; }
  70%{ transform: scale(1.35); opacity:0; }
  100%{ transform: scale(1.35); opacity:0; }
}

/* Decorative gradient blobs */
.blobs{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.blob{
  position:absolute; width:320px; height:320px; border-radius:999px;
  filter: blur(40px); opacity:.25; transform: translateZ(0);
  animation: floaty 18s ease-in-out infinite;
}
.blob.b1{ background: radial-gradient(circle at 30% 30%, #ffb199, #b62126); top:-60px; right:-40px; animation-delay:0s; }
.blob.b2{ background: radial-gradient(circle at 70% 70%, #60a5fa, #2563eb); bottom:-80px; left:-60px; animation-delay:3s; }
.blob.b3{ background: radial-gradient(circle at 60% 40%, #f59e0b, #b62126); top:40%; left:-80px; animation-delay:6s; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-12px) scale(1.05); }
}

/* Lift nav hover */
.app-header a:hover{ transform: translateY(-2px); transition: transform .2s ease; }