/* =========================================================
   Taxirooz — اپ رزرو صفحه اول (نقشه + پنل)
   فقط روی صفحه اول و فقط وقتی taxirooz_is_app_screen() درست باشد لود می‌شود.
   وابسته به توکن‌های :root در taxirooz.css
   ========================================================= */

:root{
  --tr-app-panel-w:420px;
  --tr-app-gap:clamp(12px,2.4vw,20px);
  --tr-app-sheet:min(56vh,520px);
  /* ارتفاعی که پنل از پایینِ نقشه اشغال می‌کند؛ از JS ست می‌شود (موبایل). */
  --tr-app-map-bottom:0px;
}

html.tr-app-html,
body.tr-app-screen{
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--tr-bg);
  color:var(--tr-ink);
  font-family:Vazirmatn,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.tr-app{
  position:fixed;
  inset:0;
  display:block;
  direction:rtl;
}

/* ---------- نقشه ---------- */
.tr-app__map{
  position:absolute;
  top:0;
  inset-inline:0;
  /* نقشه همیشه تمام‌صفحه است (حتی زیرِ شیت) تا لوگوی نشان پشتِ پنل مخفی
     بماند و اندازه‌ی واقعیِ نقشه با تغییرِ ارتفاعِ شیت عوض نشود (باعثِ
     invalidateSize/moveendِ ناخواسته و رفرش‌شدنِ پیاپیِ آدرس می‌شد).
     فقط سوزنِ وسط با --tr-app-map-bottom بالا می‌آید، نه خودِ نقشه. */
  bottom:0;
  background:#E8E3D8;
  z-index:0;
}
/* کنترل‌های پیش‌فرض Leaflet/نشان (زوم، لوگو، کپی‌رایت) حس بومیِ اپ را
   می‌شکنند؛ در initMap با zoomControl:false و attributionControl:false
   غیرفعال شده‌اند — این‌جا فقط یک محافظِ احتیاطی برای هر کنترلِ باقی‌مانده. */
.tr-app__map .leaflet-control-container{display:none}

/* سوزنِ وسط نقشه */
.tr-app__defs{position:absolute;width:0;height:0;overflow:hidden}
.tr-app__pin{
  position:absolute;
  /* دقیقاً وسط بخشِ دیده‌شده‌ی نقشه (بالای شیت). */
  top:calc((100% - var(--tr-app-map-bottom)) / 2);
  left:50%;
  transition:top .28s cubic-bezier(.25,.9,.3,1),opacity .3s ease,visibility .3s ease;
  width:0;
  height:0;
  z-index:2;
  pointer-events:none;
}
/* نقطه‌ی خیلی کوچیک که دقیقاً مختصاتِ مرکز نقشه را نشان می‌دهد؛ فقط حین
   جابه‌جایی نقشه دیده می‌شود (وقتی marker بالا رفته و از روی نقطه بلند شده). */
.tr-app__pin-ground{
  position:absolute;
  left:0;
  top:0;
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--tr-accent-deep);
  box-shadow:0 0 0 4px rgba(249,155,28,.3);
  opacity:0;
  transform:scale(.3);
  transition:opacity .16s ease,transform .16s ease;
}
.tr-app.is-dragging .tr-app__pin-ground{opacity:1;transform:scale(1)}

/* نوکِ سوزن دقیقاً روی مرکز نقشه می‌نشیند: ظرف ۰×۰ است و خودِ نشان با
   bottom:0 روی همان نقطه تکیه می‌کند. شکل به‌جای بادکنکِ اشکی، پونزِ
   کوچک با سایه‌ی ملایم است. */
.tr-app__pin-mark{
  position:absolute;
  left:0;
  bottom:0;
  display:block;
  transform:translateX(-50%);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 3px 5px rgba(20,18,12,.25));
  pointer-events:auto;
  cursor:pointer;
}
.tr-app__pin-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  margin:0 auto;
  border-radius:16px;
  background:linear-gradient(135deg,#FFD27A 0%,#F99B1C 55%,#C9760A 100%);
  border:2px solid #fff;
  transition:width .22s cubic-bezier(.34,1.56,.64,1);
}
.tr-app__pin-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#fff;
  transition:opacity .16s ease,transform .16s ease;
}
/* هنگام کشیدنِ نقشه، «مبدا/مقصد» به‌جای برچسبِ شناور، توی دلِ خودِ نشان می‌آید؛
   عرضِ خودِ نشان هم بزرگ‌تر می‌شود تا متن از آن بیرون نزند؛ در حالت عادی
   عرض و ارتفاع برابرند و شکل کاملاً گرد می‌ماند. */
.tr-app__pin-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  font-size:10.5px;
  font-weight:800;
  color:#fff;
  letter-spacing:-.2px;
  white-space:nowrap;
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s ease,transform .18s ease;
}
.tr-app__pin-tail{
  display:block;
  width:0;height:0;
  margin:-2px auto 0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:14px solid var(--tr-ink);
}
.tr-app.is-dragging .tr-app__pin-mark{transform:translateX(-50%) translateY(-16px) scale(1.04)}
.tr-app.is-dragging .tr-app__pin-head{width:72px}
.tr-app.is-dragging .tr-app__pin-dot{opacity:0;transform:scale(.4)}
.tr-app.is-dragging .tr-app__pin-text{opacity:1;transform:scale(1)}

/* وقتی مبدا و مقصد مشخص شده و نیازی به کار با نقشه نیست: سوزن پنهان و نقشه قفل می‌شود. */
.tr-app--locked .tr-app__pin{opacity:0;visibility:hidden}

/* نشان‌های ثابتِ نقاطِ تایید‌شده روی نقشه (مبدا/مقصد نهایی)؛ برچسب همیشه
   بالای نقطه می‌ماند تا مشخص باشد کدام نقطه مبدا و کدام مقصد است. */
.tr-app__marker{position:relative;display:block;width:16px;height:16px}
.tr-app__marker-dot{
  display:block;
  width:16px;height:16px;
  border:3px solid #fff;
  box-shadow:0 4px 10px -3px rgba(20,18,12,.7);
}
.tr-app__marker-label{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  margin-bottom:8px;
  white-space:nowrap;
  padding:4px 10px;
  border-radius:99px;
  background:var(--tr-ink);
  color:#fff;
  font-family: Vazirmatn,system-ui,-apple-system,sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:-.2px;
  box-shadow:0 8px 16px -10px rgba(20,18,12,.7);
}
.tr-app__marker-label::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:var(--tr-ink);
}

/* ---------- باکسِ شناورِ «افزودن مقصد جدید» زیرِ نشانِ مقصد ---------- */
.tr-app__map-add-dest{
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 10px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:var(--tr-ink);
  font-family:inherit;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 10px 20px -12px rgba(20,18,12,.85);
  cursor:pointer;
  transition:opacity .2s ease,visibility .2s ease;
}
.tr-app__map-add-dest::before{
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-bottom-color:#fff;
}

/* ---------- نوار بالا ---------- */
.tr-app__topbar{
  position:absolute;
  top:0;left:0;right:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:var(--tr-app-gap);
  pointer-events:none;
}
.tr-app__topbar > *{pointer-events:auto}
.tr-app__logo{
  display:flex;
  align-items:center;
  height:46px;
  padding:0 14px;
  border-radius:var(--tr-r-sm);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -18px rgba(20,18,12,.8);
}
.tr-app__logo img{height:26px;width:auto}
.tr-app__topbar-actions{display:flex;align-items:center;gap:8px}
.tr-app__icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:var(--tr-r-sm);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -18px rgba(20,18,12,.8);
  color:var(--tr-ink);
  transition:transform .2s,background .2s;
}
.tr-app__icon-btn svg{width:21px;height:21px;fill:currentColor;flex:0 0 auto}
.tr-app__icon-btn:hover{transform:translateY(-2px);background:#fff;color:var(--tr-ink)}
/* نسخه‌ی متن‌دار: دکمه‌ی تماس/رزرو تلفنی، کنار آیکون یک برچسب هم دارد. */
.tr-app__icon-btn--text{
  width:auto;
  gap:8px;
  padding:0 16px 0 14px;
  font-size:13.5px;
  font-weight:800;
  white-space:nowrap;
}
.tr-app__site-btn{
  display:inline-flex;
  align-items:center;
  height:46px;
  padding:0 18px;
  border-radius:var(--tr-r-sm);
  background:var(--tr-ink);
  color:#fff;
  font-size:14.5px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 14px 30px -18px rgba(20,18,12,1);
  transition:transform .2s,background .2s;
}
.tr-app__site-btn:hover{transform:translateY(-2px);background:#000;color:#fff}

/* ---------- دکمه موقعیت من ---------- */
.tr-app__locate{
  position:absolute;
  z-index:4;
  inset-inline-start:var(--tr-app-gap);
  bottom:calc(var(--tr-app-map-bottom) + var(--tr-app-gap));
  width:46px;height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:var(--tr-ink);
  box-shadow:0 14px 30px -16px rgba(20,18,12,.9);
  transition:transform .2s,bottom .28s ease,opacity .3s ease,visibility .3s ease;
}
.tr-app__locate svg{width:22px;height:22px;fill:currentColor}
.tr-app__locate:hover{transform:scale(1.06)}
.tr-app__locate.is-busy{position:relative;opacity:.55;pointer-events:none;color:transparent}
.tr-app--locked .tr-app__locate{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- نماد اعتماد الکترونیک (مجوز الزامی؛ فقط نسخه‌ی دسکتاپ) ---------- */
.tr-app__enamad{display:none}

/* ---------- پنل ---------- */
.tr-app__panel{
  position:absolute;
  z-index:6;
  background:var(--tr-card);
  display:flex;
  flex-direction:column;
  /* موبایل: شیت پایینی */
  inset-inline:0;
  bottom:0;
  max-height:var(--tr-app-sheet);
  border-radius:var(--tr-r-lg) var(--tr-r-lg) 0 0;
  box-shadow:0 -10px 35px -28px rgba(20,18,12,.75);
  transition:max-height .28s cubic-bezier(.25,.9,.3,1);
  overflow-x:hidden;
}
/* با دکمه‌ی دستگیره، شیت تا کل صفحه باز می‌شود (برای لیست‌های بلند). */
.tr-app__panel.is-tall{max-height:min(86vh,760px)}
/* با کلیک روی کادر جست‌وجو، شیت کامل باز می‌شود و فقط ۱۵px از بالا فاصله می‌گیرد. */
@media (max-width:899px){
  .tr-app__panel.is-searching,
  .tr-app__panel.is-expanded{
    height:calc(100vh - 70px);
    max-height:calc(100vh - 70px);
  }
}

.tr-app__grab{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 0 4px;
  flex:0 0 auto;
  touch-action:none;
}
.tr-app__grab span{
  display:block;
  width:44px;height:5px;
  border-radius:99px;
  background:rgba(20,18,12,.18);
}

.tr-app__scroller{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:6px clamp(14px,3.4vw,22px) 0;
  scrollbar-width:none;
}

.tr-app__stage{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:100%;
  padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));
}
.tr-app__title{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.4px;
  margin:0;
}
.tr-app__hint{font-size:12.5px;color:var(--tr-muted)}
.tr-app__loading{font-size:13.5px;color:var(--tr-body);margin:0}

.tr-app__alert{
  margin:0 0 12px;
  padding:11px 14px;
  border-radius:var(--tr-r-sm);
  background:#FDECEC;
  color:#8E2020;
  font-size:13.5px;
  line-height:1.7;
}
.tr-app__alert--ok{background:#E9F6EC;color:#1D6B33}

/* ---------- جست‌وجو ---------- */
.tr-app__search{position:relative}
.tr-app__search-icon{
  position:absolute;
  inset-inline-start:14px;
  top:50%;
  transform:translateY(-50%);
  width:19px;height:19px;
  fill:var(--tr-faint);
  pointer-events:none;
}
.tr-app__search input{
  width:100%;
  height:50px;
  padding-inline:44px 16px;
  border:1px solid var(--tr-line);
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  color:var(--tr-ink);
  font-size:14.5px;
  outline:none;
  transition:border-color .2s,background .2s;
}
.tr-app__search input:focus{border-color:var(--tr-accent);background:#fff}
.tr-app__search input::-webkit-search-cancel-button{display:none}

.tr-app__suggest{
  /* در جریان عادی لِی‌اوت (نه overlay مطلق) تا از کف صفحه بیرون نزند؛
     خودش هم سقف ارتفاع دارد و اسکرول داخلی می‌گیرد. */
  position:static;
  max-height:min(230px,38vh);
  overflow-y:auto;
  margin:8px 0 0;
  padding:6px;
  list-style:none;
  background:#fff;
  border:1px solid var(--tr-line);
  border-radius:var(--tr-r-sm);
  box-shadow:0 14px 30px -20px rgba(20,18,12,.5);
}
.tr-app__suggest li{
  padding:10px 12px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.6;
  cursor:pointer;
  transition:background .15s;
}
.tr-app__suggest li:hover,
.tr-app__suggest li.is-active{background:var(--tr-bg)}
.tr-app__suggest small{display:block;color:var(--tr-muted);font-size:12px;margin-top:2px}

.tr-app__picked{
  padding:12px 14px;
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  border:1px dashed rgba(20,18,12,.16);
}
.tr-app__picked-label{
  display:inline-block;
  font-size:11.5px;
  font-weight:800;
  color:var(--tr-accent-deep);
  margin-bottom:4px;
}
.tr-app__picked-address{
  margin:0;
  font-size:14px;
  line-height:1.75;
  font-weight:700;
}

/* ---------- دکمه‌ها ---------- */
/* همیشه چسبیده به پایینِ پنل می‌ماند؛ هرچند نقطه‌ی مسیر اضافه شود. */
.tr-app__actions{
  position:sticky;
  bottom:0;
  z-index:3;
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--tr-card);
}
.tr-app__actions::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:-18px;
  height:18px;
  pointer-events:none;
  background:linear-gradient(to top,var(--tr-card),rgba(255,255,255,0));
}
.tr-app__btn{
  flex:1 1 132px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:50px;
  padding:0 18px;
  border-radius:var(--tr-r-sm);
  font-size:15px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s,opacity .2s;
}
.tr-app__btn--primary{
  background:var(--tr-accent);
  color:var(--tr-ink);
  box-shadow:0 14px 28px -16px rgba(249,155,28,.95);
}
.tr-app__btn--primary:hover:not(:disabled){transform:translateY(-2px)}
.tr-app__btn--ghost{
  flex:0 0 auto;
  border:1px solid rgba(20,18,12,.16);
  color:var(--tr-ink);
  font-weight:700;
  background:#fff;
}
.tr-app__btn--ghost:hover{background:var(--tr-bg)}
.tr-app__btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.tr-app__btn.is-busy{position:relative;opacity:.65;pointer-events:none;color:transparent}
/* اسپینرِ مشترکِ دکمه‌ها/دکمه‌ی موقعیت‌یاب: متنِ دکمه با color:transparent
   مخفی می‌شود (نه visibility) تا برای screen reader همچنان خوانده شود؛
   حلقه با inset:0 + margin:auto وسط‌چین می‌شود، مستقل از عرض/شکل دکمه. */
.tr-app__btn.is-busy::after,
.tr-app__locate.is-busy::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(20,18,12,.2);
  border-inline-start-color:var(--tr-ink);
  animation:tr-app-spin .7s linear infinite;
}
@keyframes tr-app-spin{to{transform:rotate(360deg)}}

/* ---------- خط مسیر روی نقشه ---------- */
.tr-app__route-casing{
  stroke:#14120C;
  stroke-opacity:.18;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* رنگِ این خط عمداً اینجا نیست: در یک CSS خارجی، url(#trAppRouteGrad) نسبت به
   آدرسِ همین فایل حل می‌شود (…/assets/css/#trAppRouteGrad) نه نسبت به صفحه،
   و مرورگر آن paintِ نامعتبر را مثل none رندر می‌کند. گرادیان به‌صورت اتریبیوتِ
   stroke از drawRoute() در taxirooz-app.js ست می‌شود. */
.tr-app__route-path{
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 4px 8px rgba(154,102,8,.35));
}
/* خط‌چینِ روانِ روی مسیر: حسِ حرکت می‌دهد. */
.tr-app__route-dash{
  stroke:#fff;
  stroke-opacity:.95;
  stroke-linecap:round;
  stroke-dasharray:2 22;
  animation:tr-app-dash 1.6s linear infinite;
}
.tr-app__route-path.is-straight{stroke-dasharray:10 12;animation:tr-app-dash 1.6s linear infinite}
@keyframes tr-app-dash{to{stroke-dashoffset:-48}}

/* برچسب فاصله/زمان بالای پنل */
.tr-app__route-badge{
  position:absolute;
  z-index:4;
  inset-inline-end:var(--tr-app-gap);
  bottom:calc(var(--tr-app-map-bottom) + var(--tr-app-gap));
  margin:0;
  max-width:min(70vw,340px);
  padding:9px 15px;
  border-radius:99px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -16px rgba(20,18,12,.9);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:bottom .28s cubic-bezier(.25,.9,.3,1);
}
.tr-app__route-badge b{color:var(--tr-accent-deep)}

/* ---------- کارت مسیر سفر (همیشه باز، با دکمه‌ی ویرایشِ دیدنی) ---------- */
.tr-app__route-card{
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  padding:12px 12px 6px;
}
.tr-app__route-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 10px;
  padding-inline:4px;
  margin-bottom:6px;
}
.tr-app__route-head .tr-app__title{font-size:15px}
.tr-app__route-info{
  font-size:12.5px;
  font-weight:700;
  color:var(--tr-muted);
}
.tr-app__route-info b{color:var(--tr-accent-deep)}
.tr-app__route{
  position:relative;
  display:flex;
  flex-direction:column;
  font-size:13.5px;
  line-height:1.7;
}
.tr-app__route-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 4px;
}
/* خط اتصالِ نقطه‌ها (مبدا ← مقصد) */
.tr-app__route-row:not(:first-child)::before,
.tr-app__route-row:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-start:15px;
  border-inline-start:2px dotted rgba(20,18,12,.22);
}
.tr-app__route-row:not(:first-child)::before{top:0;height:50%}
.tr-app__route-row:not(:last-child)::after{top:50%;bottom:0}
.tr-app__route-dot{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:12px;height:12px;
  margin-inline:4px;
  background:#14120C;
  border:2px solid var(--tr-bg);
  box-sizing:content-box;
  border-radius:4px;
}
.tr-app__route-row--origin .tr-app__route-dot{background:#F99B1C;border-radius:50%}
.tr-app__route-text{flex:1 1 auto;min-width:0}
.tr-app__route-text b{
  display:block;
  color:var(--tr-muted);
  font-size:11.5px;
  font-weight:800;
  line-height:1.4;
}
.tr-app__route-text span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-weight:700;
  overflow-wrap:anywhere;
}
.tr-app__route-edit{
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(20,18,12,.16);
  border-radius:99px;
  background:#fff;
  color:var(--tr-ink);
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.tr-app__route-edit:hover{background:var(--tr-card);border-color:var(--tr-accent)}
.tr-app__route-del{
  flex:0 0 auto;
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:99px;
  color:var(--tr-muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.tr-app__route-del:hover{background:rgba(20,18,12,.07);color:var(--tr-ink)}

/* ---------- نوار افقی خودروها ---------- */
.tr-app__cars-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.tr-app__cars-wrap{
  position:relative;
}
.tr-app__cars-wrap::after{
  content:'';
  position:absolute;
  top:0;left:-20px;bottom:8px;
  width:80px;
  background:linear-gradient(to left,rgba(250,247,241,0),var(--tr-bg) 78%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.tr-app__cars-wrap.has-more::after{opacity:1}
.tr-app__cars{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 0 8px;
  /*margin-inline:calc(-1 * clamp(14px,3.4vw,22px));*/
  padding-inline:clamp(14px,3.4vw,22px);
}
.tr-app__cars::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){
  .tr-app__cars{cursor:grab}
  .tr-app__cars.is-grabbing{cursor:grabbing;scroll-snap-type:none}
}
.tr-app__car{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:152px;
  padding:12px;
  border:1.5px solid var(--tr-line);
  border-radius:var(--tr-r-md);
  background:#fff;
  text-align:start;
  cursor:pointer;
}
.tr-app__car.is-selected{
  border-color:var(--tr-accent);
  background:#FFF9F0;
}
.tr-app__car-img{
  width:100%;
  height:58px;
  object-fit:cover;
  margin-bottom:8px;
}
.tr-app__car-ph{
  width:100%;
  height:58px;
  margin-bottom:8px;
  border-radius:12px;
  background:linear-gradient(135deg,#F3EFE6,#E8E2D6);
}
.tr-app__car-name{
  display:block;
  font-size:13.5px;
  font-weight:800;
  line-height:1.5;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tr-app__car-price{
  display:block;
  font-size:15px;
  font-weight:900;
  color:var(--tr-accent-deep);
  font-variant-numeric:tabular-nums;
}
.tr-app__car-unit{font-size:11.5px;font-weight:700;color:var(--tr-muted);margin-inline-start:3px}
.tr-app__car-meta{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  color:var(--tr-muted);
  line-height:1.6;
}
.tr-app__car-skel{
  flex:0 0 auto;
  width:152px;
  height:150px;
  border-radius:var(--tr-r-md);
  background:linear-gradient(100deg,#F3EFE6 30%,#FAF7F1 50%,#F3EFE6 70%);
  background-size:220% 100%;
  animation:tr-app-skel 1.1s linear infinite;
}
@keyframes tr-app-skel{from{background-position:180% 0}to{background-position:-20% 0}}

/* ---------- فیلدها ---------- */
.tr-app__field{display:flex;flex-direction:column;gap:8px}
.tr-app__label{font-size:12.5px;font-weight:800;color:var(--tr-ink-2)}
.tr-app__input{
  width:100%;
  min-height:50px;
  padding:13px 15px;
  border:1px solid var(--tr-line);
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  color:var(--tr-ink);
  font-size:14.5px;
  line-height:1.7;
  outline:none;
  resize:vertical;
  transition:border-color .2s,background .2s;
}
.tr-app__input:focus{border-color:var(--tr-accent);background:#fff}
.tr-app__input.is-invalid{border-color:#D14343;background:#FFF5F5}

/* چیپ‌های روز و ساعت */
.tr-app__chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
  margin-inline:calc(-1 * clamp(14px,3.4vw,22px));
  padding-inline:clamp(14px,3.4vw,22px);
}
.tr-app__chips::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){
  .tr-app__chips{cursor:grab}
  .tr-app__chips.is-grabbing{cursor:grabbing}
}
.tr-app__chip{
  flex:0 0 auto;
  min-width:74px;
  padding:9px 14px;
  border:1.5px solid var(--tr-line);
  border-radius:14px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.tr-app__chip small{display:block;font-size:11px;color:var(--tr-muted);font-weight:600;margin-top:2px}
.tr-app__chip.is-active{
  border-color:var(--tr-accent);
  background:var(--tr-accent);
  color:var(--tr-ink);
}
.tr-app__chip.is-active small{color:rgba(20,18,12,.7)}
.tr-app__chip:disabled{opacity:.35;cursor:not-allowed}

/* فیلدِ ساعتِ حرکت با پلاگین flatpickr؛ فقط جایگزینِ چیپ‌های ساعت روی وب
   می‌شود (پایین‌تر در @media (min-width:900px)) و روی موبایل مخفی است. */
.tr-app__time-inputs{display:none}
.tr-app__time-picker{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--tr-line);
  border-radius:12px;
  background:#fff;
  font-family:inherit;
  font-size:14.5px;
  font-weight:800;
  text-align:center;
  font-variant-numeric:tabular-nums;
  color:var(--tr-ink);
  cursor:pointer;
}
.tr-app__time-picker:focus{border-color:var(--tr-accent);outline:none}

/* ظاهرِ تقویمِ flatpickr هماهنگ با استایلِ اپ (این فایل فقط روی صفحه‌ی اپ
   لود می‌شود، پس بازنویسیِ کلاس‌های عمومیِ flatpickr این‌جا امن است). */
.flatpickr-calendar{
  font-family:Vazirmatn,system-ui,-apple-system,sans-serif;
  border-radius:var(--tr-r-lg);
  box-shadow:var(--tr-shadow),0 0 0 1px rgba(20,18,12,.05);
  border:0;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after{display:none}
/* به‌جای اسپینرهای عددیِ پیش‌فرضِ flatpickr (که تجربه‌ی خوبی برای لمس/کلیک
   ندارند)، فهرستِ ساعت‌های معتبر به‌صورت چیپ‌های قابل‌کلیک نمایش داده
   می‌شود؛ ساختِ DOM آن در JS انجام می‌شود (رجوع کنید به renderTimeSlots). */
.flatpickr-time{display:none}
.tr-time-slots__head{padding:14px 16px 2px;font-size:12px;font-weight:800;color:var(--tr-muted)}
.tr-time-slots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  max-height:250px;
  overflow-y:auto;
  padding:10px 14px 16px;
  min-width:250px;
}
.tr-time-slots::-webkit-scrollbar{width:6px}
.tr-time-slots::-webkit-scrollbar-thumb{background:var(--tr-line);border-radius:99px}
.tr-time-slot{
  border:1.5px solid var(--tr-line);
  background:#fff;
  border-radius:10px;
  padding:9px 6px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--tr-ink);
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.tr-time-slot:hover{border-color:var(--tr-accent);color:var(--tr-accent)}
.tr-time-slot.is-active{background:var(--tr-accent);border-color:var(--tr-accent);color:#fff}

/* شمارنده مسافر / چمدان */
.tr-app__grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-app__stepper{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--tr-line);
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
}
.tr-app__stepper-ctl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.tr-app__stepper-ctl button{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#fff;
  border:1px solid var(--tr-line);
  font-size:18px;
  font-weight:800;
  line-height:1;
  transition:background .15s,border-color .15s;
}
.tr-app__stepper-ctl button:hover{border-color:var(--tr-accent);background:#FFF8EE}
.tr-app__stepper-ctl b{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}

/* سوییچ‌ها */
.tr-app__switches{display:flex;flex-direction:column;gap:8px}
.tr-app__switch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid var(--tr-line);
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.tr-app__switch input{position:absolute;opacity:0;pointer-events:none}
.tr-app__switch-ui{
  flex:0 0 auto;
  position:relative;
  width:42px;height:24px;
  border-radius:99px;
  background:rgba(20,18,12,.16);
  transition:background .2s;
}
.tr-app__switch-ui::after{
  content:'';
  position:absolute;
  top:3px;
  inset-inline-start:3px;
  width:18px;height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(20,18,12,.3);
  transition:inset-inline-start .2s;
}
.tr-app__switch input:checked + .tr-app__switch-ui{background:var(--tr-accent)}
.tr-app__switch input:checked + .tr-app__switch-ui::after{inset-inline-start:21px}
.tr-app__switch input:focus-visible + .tr-app__switch-ui{outline:2px solid var(--tr-accent-deep);outline-offset:2px}

/* ---------- خلاصه و مبلغ ---------- */
.tr-app__summary{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:13px 15px;
  border-radius:var(--tr-r-sm);
  background:var(--tr-bg);
  font-size:13.5px;
  line-height:1.75;
}
.tr-app__summary-row{display:flex;gap:10px;align-items:flex-start}
.tr-app__summary-row b{flex:0 0 auto;min-width:68px;color:var(--tr-muted);font-size:12px;font-weight:800;padding-top:2px}
.tr-app__summary-row span{flex:1 1 auto;min-width:0;font-weight:700}

.tr-app__total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px 17px;
  border-radius:var(--tr-r-md);
  background:var(--tr-ink);
  color:#fff;
}
.tr-app__total span{font-size:13.5px;font-weight:700;color:var(--tr-dark-body)}
.tr-app__total b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}

.tr-app__prepay{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  padding:13px 15px;
  border-radius:var(--tr-r-md);
  background:#FFF8EE;
  border:1px solid rgba(249,155,28,.35);
}
.tr-app__prepay span{font-size:13.5px;font-weight:800}
.tr-app__prepay b{font-size:17px;font-weight:900;color:var(--tr-accent-deep);font-variant-numeric:tabular-nums}
.tr-app__prepay small{flex:1 1 100%;font-size:11.5px;color:var(--tr-body);line-height:1.7}

.tr-app__terms{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  line-height:1.8;
  color:var(--tr-body);
  cursor:pointer;
}
.tr-app__terms input{
  flex:0 0 auto;
  width:19px;height:19px;
  margin-top:2px;
  accent-color:var(--tr-accent);
}
.tr-app__terms.is-invalid{color:#B22C2C}

/* ---------- رسید ---------- */
.tr-app__receipt{
  padding:18px;
  border-radius:var(--tr-r-md);
  background:var(--tr-bg);
  border:1px solid var(--tr-line);
}
.tr-app__receipt-icon{
  width:56px;height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#E9F6EC;
  color:#1D6B33;
  font-size:28px;
  font-weight:900;
}
.tr-app__receipt-icon--fail{background:#FDECEC;color:#8E2020}
.tr-app__receipt-title{
  text-align:center;
  font-size:17px;
  font-weight:900;
  margin:0 0 6px;
}
.tr-app__receipt-sub{
  text-align:center;
  font-size:13px;
  color:var(--tr-body);
  line-height:1.8;
  margin:0 0 14px;
}
.tr-app__receipt-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:12px;
  border-top:1px dashed rgba(20,18,12,.18);
}
.tr-app__receipt-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
  line-height:1.7;
}
.tr-app__receipt-row > span:first-child{flex:0 0 auto;color:var(--tr-muted);font-weight:700}
.tr-app__receipt-row > span:last-child{flex:1 1 auto;text-align:end;font-weight:800;min-width:0;word-break:break-word}
.tr-app__receipt-row--code > span:last-child{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  letter-spacing:.5px;
}

/* =========================================================
   دسکتاپ: نقشه تمام‌صفحه + پنل شناور سمت راست
   ========================================================= */
@media (min-width:900px){
  .tr-app__panel{
    inset-inline:auto;
    inset-inline-start:var(--tr-app-gap);
    top:calc(var(--tr-app-gap) + 62px);
    bottom:var(--tr-app-gap);
    width:var(--tr-app-panel-w);
    max-height:none;
    border-radius:var(--tr-r-lg);
    box-shadow:var(--tr-shadow),0 0 0 1px rgba(20,18,12,.05);
  }
  .tr-app__grab{display:none}
  .tr-app__scroller{
    padding:clamp(18px,1.6vw,24px) clamp(18px,1.6vw,24px) 0;
  }
  .tr-app__stage{padding-bottom:0}
  .tr-app__actions{padding:12px 0 clamp(18px,1.6vw,24px)}
  /* روی دسکتاپ نقشه تمام‌صفحه است و پنل شناور روی آن می‌نشیند. */
  .tr-app__map{bottom:0}
  .tr-app__pin{top:50%}
  .tr-app__locate{
    inset-inline-end:var(--tr-app-gap);
    bottom:var(--tr-app-gap);
  }
  .tr-app__enamad{
    display:flex;
    position:absolute;
    z-index:4;
    align-items:center;
    justify-content:center;
    inset-inline-end:var(--tr-app-gap);
    bottom:calc(var(--tr-app-gap) + 46px + 10px);
    width:70px;height:70px;
    padding:4px;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
  }
  .tr-app__enamad img{width:100%;height:100%;object-fit:contain;display:block}
  .tr-app__enamad:hover{transform:scale(1.06)}
  .tr-app__route-badge{
    inset-inline-start:calc(var(--tr-app-panel-w) + var(--tr-app-gap) * 2);
    bottom:var(--tr-app-gap);
  }
  .tr-app__stage{gap:16px}

  /* لیست خودروها/نرخ اولیه روی وب به‌صورت شبکه‌ی دو ستونه نمایش داده می‌شود؛
     چون اسکرول لمسی روی دسکتاپ وجود ندارد و کشیدن با ماوس UX خوبی ندارد. */
  .tr-app__cars-head .tr-app__hint{display:none}
  .tr-app__cars-wrap::after{display:none}
  .tr-app__cars{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    overflow-x:visible;
    overflow-y:visible;
    scroll-snap-type:none;
    cursor:auto;
  }
  .tr-app__car,
  .tr-app__car-skel{
    width:auto;
    scroll-snap-align:none;
  }
  /* عکسِ ماشین کامل دیده شود و نصفه crop نشود؛ چون آپلودهای ادمین نسبت
     ابعادِ متفاوتی دارند، object-fit:contain تضمین می‌کند چیزی بریده نشود. */
  .tr-app__car-img{
    height:96px;
    object-fit:cover;
    background:linear-gradient(135deg,#F3EFE6,#E8E2D6);
    border-radius:12px;
  }
  .tr-app__car-ph{height:96px}

  /* روزها/ساعت‌ها روی وب به‌صورت شبکه‌ی هم‌عرض نمایش داده می‌شوند تا نیازی
     به اسکرول افقی (که UX خوبی روی دسکتاپ ندارد) نباشد. تعداد روزها
     (dayCount) روی ۱۲ ثابت شده تا دقیقاً در ۴ ستون × ۳ ردیف جا شود. */
  .tr-app__chips{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow-x:visible;
    scroll-snap-type:none;
    margin-inline:0;
    cursor:auto;
  }
  .tr-app__chip{width:100%}

  /* روی وب، به‌جای چیپ‌های ساعت (که برای انتخاب دقیق زمان مناسب نیستند)،
     دو فیلدِ عددیِ ساعت/دقیقه نمایش داده می‌شود؛ روزِ حرکت همچنان چیپ می‌ماند. */
  [data-app-times],
  [data-app-times-empty]{display:none}
  .tr-app__time-inputs{display:flex;align-items:center;gap:8px}
}

@media (min-width:1280px){
  :root{--tr-app-panel-w:456px}
}

/* تبلت و موبایل بزرگ: شیت کمی بلندتر و فونت‌ها کمی ریزتر
   (روی صفحه‌ی کوچک، متنِ درشت جا را برای نقشه/محتوا می‌گیرد). */
@media (max-width:899px){
  :root{--tr-app-sheet:min(60vh,540px)}
  /* روی موبایل فاصله/زمان داخل کارتِ مسیرِ شیت نشان داده می‌شود؛ برچسبِ روی نقشه فقط جا می‌گیرد. */
  .tr-app__route-badge{display:none}
  .tr-app__title{font-size:15.5px}
  .tr-app__label{font-size:11.5px}
  .tr-app__hint{font-size:11.5px}
  .tr-app__loading{font-size:12.5px}
  .tr-app__picked-address{font-size:13px}
  .tr-app__search input{font-size:13.5px}
  .tr-app__suggest li{font-size:12.5px}
  .tr-app__route{font-size:12.5px}
  .tr-app__route-info{font-size:12px}
  .tr-app__car-name{font-size:12.5px}
  .tr-app__car-price{font-size:14px}
  .tr-app__car-meta{font-size:11px}
  .tr-app__chip{font-size:12.5px}
  .tr-app__total b{font-size:18px}
  .tr-app__prepay b{font-size:15.5px}
}

/* موبایل کوچک */
@media (max-width:420px){
  .tr-app__site-btn{padding:0 13px;font-size:13.5px}
  .tr-app__logo img{height:22px}
  .tr-app__car,
  .tr-app__car-skel{width:138px}
}

/* صفحه‌های خیلی کوتاه (موبایل افقی) */
@media (max-height:520px) and (max-width:899px){
  :root{--tr-app-sheet:64vh}
  .tr-app__topbar{padding:8px var(--tr-app-gap)}
}

@media (prefers-reduced-motion:reduce){
  .tr-app *,
  .tr-app *::before,
  .tr-app *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}