/* =========================================================
   SANDPAD MAP — Leaflet permanent pin
   ========================================================= */

.sand-map-pin-wrapper {
    background: transparent !important;
    border: none !important;
}

.sand-map-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    animation: sandPinDrop .25s ease;
}

@keyframes sandPinDrop {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sand-map-pin-label {
    color: #fff;
    padding: 6px 13px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif;
    direction: rtl;
}

.sand-map-pin-line {
    width: 3px;
    height: 40px;
    border-radius: 2px;
    margin-top: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* =========================================================
   SANDPAD MAP — Driver car (top-down, rotates with heading)
   ========================================================= */

.sand-driver-wrapper {
    background: transparent !important;
    border: none !important;
}

/* اندازه‌ی واقعی marker ثابت است؛ مقیاس زوم و چرخش روی این
   عنصر اعمال می‌شود تا لنگر marker روی مرکز خودرو بماند. */
.sand-car {
    width: 44px;
    height: 44px;
    transform-origin: 50% 50%;
    transform: scale(var(--car-scale, 1)) rotate(var(--car-heading, 0deg));
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.sand-car-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sand-car-shadow {
    fill: rgba(11,21,38,.22);
}

.sand-car-body {
    fill: #ffb52e;
    stroke: #ffffff;
    stroke-width: 3;
}

.sand-car-glass {
    fill: #2b3446;
    opacity: .82;
}

.sand-car-roof {
    fill: #2b3446;
    opacity: .42;
}

.sand-car-headlight {
    fill: #fff8e0;
}

.sand-car-taillight {
    fill: #ff6b5a;
}

.sand-car-mirror {
    fill: #ffb52e;
    stroke: #ffffff;
    stroke-width: 2.4;
}
/* ─── فونت وزیرمتن ───────────────────────────────────────────────
   فایل‌های واقعی در wwwroot/fonts با نام وزن‌دار هستند؛
   برای هر وزن یک @font-face جداگانه تعریف می‌شود. */
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-ExtraLight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn[wght].woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#14161c;
  --ink-2:#23262f;
  --paper:#fbf9f3;
  --card:#ffffff;
  --sun:#ffc20e;
  --sun-d:#f0ad00;
  --sun-glow:rgba(255,194,14,.35);
  --night:#0b1526;
  --night-2:#12203a;
  --mute:#6a6f7a;
  --line:#e9e5d8;
  --ok:#1a9f5b;
  --r:18px;
  --shadow-sm:0 4px 14px rgba(20,22,28,.06);
  --shadow-md:0 14px 34px rgba(20,22,28,.10);
  --shadow-lg:0 30px 70px rgba(11,21,38,.25);
  --grad-sun:linear-gradient(135deg,#ffd34d,var(--sun) 55%,#f5a800);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;direction:rtl;font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background-image:radial-gradient(rgba(20,22,28,.045) 1px,transparent 1px);background-size:26px 26px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.4;margin:0 0 .5em}
::selection{background:var(--sun);color:var(--ink)}

/* ─── دکمه‌ها ─────────────────────────────────────────────────── */
.btn{display:inline-block;border:0;border-radius:999px;padding:.65em 1.6em;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-yellow{background:var(--grad-sun);color:var(--ink);box-shadow:0 10px 26px var(--sun-glow)}
.btn-yellow:hover{box-shadow:0 14px 34px var(--sun-glow);filter:brightness(1.04)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-dark:hover{background:var(--ink-2);box-shadow:var(--shadow-md)}
.btn-ghost{border:2px solid rgba(255,255,255,.85);color:#fff;padding:.55em 1.5em;background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.w{width:100%;margin-top:1rem}
.link{background:none;border:0;font:inherit;color:var(--mute);text-decoration:underline;cursor:pointer}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

input,textarea{width:100%;font:inherit;padding:.65em .95em;border:2px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus{border-color:var(--ink);outline:0;box-shadow:0 0 0 4px rgba(255,194,14,.18)}
label{display:block;font-weight:600;margin:.8rem 0 .2rem}
.ltr{text-align:left}.code{font-size:1.6rem;letter-spacing:.5em;text-align:center}
.err{color:#b3261e}.hint{color:var(--mute);font-size:.92rem}

/* ─── هدر ─────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:2rem;padding:.65rem clamp(1rem,5vw,4rem);background:rgba(11,21,38,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.top nav{display:flex;gap:1.6rem;margin-inline-end:auto}
.top nav a{text-decoration:none;color:rgba(255,255,255,.78);font-weight:500;position:relative;padding:.25rem 0}
.top nav a::after{content:"";position:absolute;inset:auto 0 -2px;height:2px;border-radius:2px;background:var(--sun);transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
.top nav a:hover{color:#fff}
.top nav a:hover::after{transform:scaleX(1)}
.who{display:flex;gap:1rem;align-items:center}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;text-decoration:none;color:#fff}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--grad-sun);color:var(--ink);font-weight:900;box-shadow:0 6px 16px var(--sun-glow)}

/* ─── هیرو ────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:center;min-height:min(88vh,860px);padding:5.5rem clamp(1rem,5vw,4rem) 4rem;color:#fff;overflow:hidden;background:var(--night)}
.hero::before{content:"";position:absolute;inset:0;background:url("images/hero-taxi.png") center/cover no-repeat;opacity:.9;transform:scale(1.04);animation:heroZoom 18s ease-in-out infinite alternate;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(11,21,38,.92) 0%,rgba(11,21,38,.78) 32%,rgba(11,21,38,.42) 60%,rgba(11,21,38,.18) 100%),
             linear-gradient(to top,var(--night) 0%,rgba(11,21,38,0) 34%)}
@keyframes heroZoom{to{transform:scale(1.12) translateX(-2%)}}

.hero-text{position:relative;z-index:2;max-width:36rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);border-radius:999px;padding:.35rem 1rem;font-size:.9rem;font-weight:600;color:#ffe9a8;margin-bottom:1.2rem}
.hero-badge .pulse{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(26,159,91,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(26,159,91,0)}100%{box-shadow:0 0 0 0 rgba(26,159,91,0)}}
.hero h1{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;margin-bottom:.4em;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p{max-width:32rem;font-size:1.12rem;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0}
.hero .btn-ghost{border-color:rgba(255,255,255,.6)}
.stats{display:flex;gap:2.2rem;list-style:none;padding:1.2rem 0 0;margin:1.6rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.stats b{display:block;font-size:1.45rem;font-weight:900;color:var(--sun)}
.stats span{font-size:.88rem;color:rgba(255,255,255,.75)}
.stats li{position:relative}
.stats li+li::before{content:"";position:absolute;right:-1.1rem;top:50%;transform:translateY(-50%);width:1px;height:60%;background:rgba(255,255,255,.18)}

/* ─── صحنه گوشی ───────────────────────────────────────────────── */
.stage{perspective:1400px;display:grid;place-items:center;position:relative;min-height:560px;z-index:2}
.phone{width:260px;height:520px;border-radius:44px;background:#0d0e11;padding:12px;transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(8deg) rotateZ(3deg);
  box-shadow:-30px 40px 60px rgba(0,0,0,.5),0 0 0 2px #333,0 0 60px rgba(255,194,14,.15);animation:float 7s ease-in-out infinite}
.phone::before{content:"";position:absolute;inset:6px -10px 6px 10px;border-radius:44px;background:#1d1f25;transform:translateZ(-14px)}
@keyframes float{50%{transform:rotateY(-18deg) rotateX(5deg) rotateZ(2deg) translateY(-14px)}}
.screen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#f6f3e7;
  background-image:linear-gradient(#e5e0cc 1px,transparent 1px),linear-gradient(90deg,#e5e0cc 1px,transparent 1px);background-size:36px 36px}
.citymap{position:absolute;inset:0;width:100%;height:100%}
.dot{position:absolute;width:18px;height:18px;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:2}
.dot.a{left:79%;top:72%;background:var(--ok)}.dot.b{left:10%;top:19%;background:#d33}
.car{position:absolute;left:46%;top:41%;font-size:1.6rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:bob 2.4s ease-in-out infinite;z-index:2}
@keyframes bob{50%{transform:translateY(-6px)}}
.sheet{position:absolute;inset:auto 0 0;background:#fff;border-radius:24px 24px 0 0;padding:1rem;text-align:center;font-size:.85rem;box-shadow:0 -10px 30px rgba(0,0,0,.15)}
.sheet i{display:block;width:40px;height:4px;background:var(--line);border-radius:4px;margin:0 auto .6rem}
.sheet u{display:block;margin-top:.7rem;padding:.5rem;border-radius:999px;background:var(--sun);text-decoration:none;font-weight:700}
/* ─── بخش‌ها ──────────────────────────────────────────────────── */
.band,.options{padding:4rem clamp(1rem,5vw,4rem);max-width:1150px;margin:auto}
.band{scroll-margin-top:80px}.options{scroll-margin-top:80px}
.band h2,.options h2{text-align:center;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;margin-bottom:.4em}
.sub{text-align:center;color:var(--mute);max-width:34rem;margin:0 auto 2rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;justify-content:center}
.tabs button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:.45em 1.4em;font:inherit;font-weight:600;cursor:pointer;transition:all .18s ease}
.tabs button:hover{border-color:var(--ink)}
.tabs .on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-sm)}
.tab-body{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 2.2rem;box-shadow:var(--shadow-sm)}
.tab-body li{margin:.35rem 0}
.tab-body li::marker{color:var(--sun-d)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.grid article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.3rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.grid article::before{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--grad-sun);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.grid article:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.grid article:hover::before{transform:scaleX(1)}
.grid article:nth-child(1){background:var(--grad-sun);border:0;box-shadow:0 14px 34px var(--sun-glow)}
.grid span{font-size:2.6rem;display:block;margin-bottom:.4rem}
.grid p{margin:0;opacity:.78;font-size:.95rem}

/* ─── فوتر ────────────────────────────────────────────────────── */
.foot{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center;padding:2.4rem clamp(1rem,5vw,4rem);background:var(--night);color:#d9d6c8}
.foot p{margin:0;color:rgba(255,255,255,.65)}
.foot strong{color:#fff;font-size:1.1rem}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--sun)}

/* ─── ورود ────────────────────────────────────────────────────── */
.auth{display:grid;place-items:center;padding:3rem 1rem;min-height:70vh;
  background:linear-gradient(160deg,var(--night) 0%,var(--night-2) 55%,#1a2c4e 100%)}
.auth .card{width:min(100%,420px);background:var(--card);border:0;border-radius:22px;padding:2.2rem;box-shadow:var(--shadow-lg)}
.auth.wide .card{width:min(100%,720px)}
.legal{font-size:.85rem;color:var(--mute)}
.legal a{color:var(--sun-d)}
.legal-page{max-width:820px;margin:auto;padding:3rem 1rem}
.legal-page article{white-space:pre-wrap;text-align:justify}

/* ─── سفر ─────────────────────────────────────────────────────── */
.trip{display:grid;grid-template-columns:380px 1fr;height:calc(100vh - 65px)}
.panel{padding:1.2rem;overflow:auto;background:#fff;border-inline-end:1px solid var(--line)}
.map{height:100%;min-height:360px;z-index:1}.row{display:flex;gap:.5rem}.row .btn{padding:.4em 1em}
.seg{display:flex;background:var(--paper);border-radius:999px;padding:4px}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:.4em;font:inherit;cursor:pointer;display:flex;gap:.4rem;justify-content:center;align-items:center}
.seg .on{background:var(--ink);color:#fff}
.pin{display:inline-block;width:18px;height:18px;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pin.origin{background:var(--ok)}.pin.dest{background:#d33}.pin.car{background:var(--sun);width:24px;height:24px;border-color:var(--ink)}
.status{display:flex;gap:.6rem;align-items:center;margin-top:1rem;padding:.8rem;background:var(--paper);border-radius:12px}
.spin{width:16px;height:16px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
.driver{margin-top:1rem;padding:1rem;background:var(--sun);border-radius:var(--r)}.driver dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:0}.driver dd{margin:0;font-weight:700}

/* ─── ریسپانسیو ───────────────────────────────────────────────── */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:4.5rem;text-align:center}
  .hero-text{margin:auto}
  .hero p{margin-inline:auto}
  .hero-cta,.stats{justify-content:center}
  .stage{min-height:480px;margin-top:1rem}
  .trip{grid-template-columns:1fr;grid-template-rows:55vh 1fr;height:auto}.map{order:-1;height:55vh}
}
@media(max-width:860px){
  .top nav{display:none}
  .hero::after{background:linear-gradient(to top,rgba(11,21,38,.94) 0%,rgba(11,21,38,.65) 55%,rgba(11,21,38,.45) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .phone,.hero::before,.car,.hero-badge .pulse{animation:none}
  html{scroll-behavior:auto}
}
#blazor-error-ui{display:none;position:fixed;inset:auto 0 0;background:#fff3cd;padding:.7rem 1rem;z-index:1000}#blazor-error-ui .dismiss{cursor:pointer;float:left}

/* ─── کارت‌های ورود (نسخه مدرن) ─────────────────────────────────── */
.auth-card{position:relative;overflow:hidden;text-align:center;padding:2.4rem 2rem 2rem;backdrop-filter:blur(10px)}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-sun)}
.auth-card h1{font-size:1.5rem;font-weight:800;margin:.2rem 0 .3rem}
.auth-card label{text-align:start;font-size:.9rem;color:var(--mute);font-weight:600}
.steps{display:flex;gap:.45rem;justify-content:center;list-style:none;margin:0 0 1.2rem;padding:0}
.steps li{width:26px;height:6px;border-radius:6px;background:var(--line,#e8e4d6);transition:all .3s ease}
.steps li.now{width:46px;background:var(--sun)}.steps li.done{background:var(--ink)}
.auth-icon{width:68px;height:68px;margin:0 auto .8rem;display:grid;place-items:center;font-size:2rem;border-radius:22px;
  background:linear-gradient(145deg,#fff7d6,#ffe27a);box-shadow:0 12px 28px var(--sun-glow),inset 0 1px 0 #fff;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.sub{color:var(--mute);font-size:.93rem;margin:0 0 1rem}.sub b{color:var(--ink);letter-spacing:.04em}
.field{display:flex;direction:ltr;align-items:stretch;border:2px solid var(--line,#e8e4d6);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,194,14,.2)}
.field-pre{display:grid;place-items:center;padding:0 .9rem;background:#f6f3e8;color:var(--mute);font-weight:700;border-inline-end:2px solid var(--line,#e8e4d6)}
.field input{border:0;box-shadow:none;border-radius:0;font-size:1.1rem;letter-spacing:.08em}
.code{font-size:1.9rem;font-weight:800;letter-spacing:.55em;text-align:center;padding:.5em .3em .5em 0;border-radius:16px}
.code::placeholder{letter-spacing:.3em;color:#c9c5b4;font-weight:400}
.resend{display:flex;justify-content:center;align-items:center;gap:.7rem;margin-top:1rem}
.resend-btn{background:none;border:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;padding:.3em .8em;border-radius:999px;transition:background .15s}
.resend-btn:not(:disabled):hover{background:#fff3c4}.resend-btn:disabled{color:var(--mute);cursor:not-allowed;opacity:.7}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:#f6f3e8;border-radius:999px;padding:.1em .8em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.two>div{text-align:start}
.ok{color:#1a7f4b;font-size:.9rem;margin:.8rem 0 0}.auth-card .err{margin:.8rem 0 0;font-size:.9rem}
.auth-card .legal{margin:1rem 0 0}.auth-card .link{font-size:.85rem;padding:0 .3rem}
@media(max-width:420px){.two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.auth-icon{animation:none}}

/* ---- admin: ride settings ---- */
label.check{display:flex;align-items:center;gap:.6rem;font-weight:600;cursor:pointer}
label.check input[type=checkbox]{width:auto;flex:0 0 auto;accent-color:var(--ink,#111)}
label.check span{font-size:.9rem;line-height:1.5}
.card hr{margin:1.6rem 0;border:0;border-top:1px solid var(--line,#e8e4d6)}