@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --st-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* رنگ‌های سرویس‌ها (طبق سند طراحی) */
  --st-women: #6f42c1;   /* Purple */
  --st-electric: #198754;/* Green */
  --st-hamyar: #0d6efd;  /* Blue (طبق نیاز صفحه مسافر) */

  /* پایه */
  --st-body-bg: #f8f9fa;
  --st-surface: #ffffff;
  --st-text: #212529;
  --st-muted: #6c757d;
}

html, body{
  height: 100%;
}

body{
  font-family: var(--st-font);
  background: var(--st-body-bg);
  color: var(--st-text);
  text-rendering: optimizeLegibility;
}

/* هماهنگی تایپوگرافی فرم‌ها */
button, input, select, textarea{
  font-family: inherit;
}

/* سرویس‌ها */
.text-women{ color: var(--st-women) !important; }
.bg-women{ background-color: var(--st-women) !important; }
.border-women{ border-color: var(--st-women) !important; }

.text-electric{ color: var(--st-electric) !important; }
.bg-electric{ background-color: var(--st-electric) !important; }
.border-electric{ border-color: var(--st-electric) !important; }

.text-hamyar{ color: var(--st-hamyar) !important; }
.bg-hamyar{ background-color: var(--st-hamyar) !important; }
.border-hamyar{ border-color: var(--st-hamyar) !important; }

.btn-women{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--st-women);
  --bs-btn-border-color: var(--st-women);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5b35a4;
  --bs-btn-hover-border-color: #5b35a4;
  --bs-btn-focus-shadow-rgb: 111, 66, 193;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4e2f90;
  --bs-btn-active-border-color: #4e2f90;
}

.btn-electric{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--st-electric);
  --bs-btn-border-color: var(--st-electric);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #157347;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #115c39;
  --bs-btn-active-border-color: #115c39;
}

/* Outline سفارشی برای سرویس‌ها */
.btn-outline-women{
  --bs-btn-color: var(--st-women);
  --bs-btn-border-color: rgba(111,66,193,.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--st-women);
  --bs-btn-hover-border-color: var(--st-women);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-women);
  --bs-btn-active-border-color: var(--st-women);
}

.btn-outline-electric{
  --bs-btn-color: var(--st-electric);
  --bs-btn-border-color: rgba(25,135,84,.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--st-electric);
  --bs-btn-hover-border-color: var(--st-electric);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-electric);
  --bs-btn-active-border-color: var(--st-electric);
}

.btn-outline-hamyar{
  --bs-btn-color: var(--st-hamyar);
  --bs-btn-border-color: rgba(13,110,253,.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--st-hamyar);
  --bs-btn-hover-border-color: var(--st-hamyar);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-hamyar);
  --bs-btn-active-border-color: var(--st-hamyar);
}

/* Placeholder نقشه برای پروتوتایپ */
.map-placeholder{
  background-color: #e9ecef;
  background-image: radial-gradient(rgba(108,117,125,.35) 1px, transparent 1px);
  background-size: 18px 18px;
  position: relative;
  overflow: hidden;
}

.map-placeholder::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.35));
  pointer-events: none;
}

/* Map Container - Layer 1 (Background) */
#map-container{
  z-index: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* UI Layer - Layer 2 (Overlay) */
#ui-layer{
  z-index: 100;
  pointer-events: none;
}

#ui-layer > *{
  pointer-events: none;
}

#ui-layer button,
#ui-layer input,
#ui-layer .st-service-card,
#ui-layer .st-origin-card,
#ui-layer .st-destination-card,
#ui-layer .st-destination-search,
#ui-layer .st-ride-details-card{
  pointer-events: auto;
}

/* State View System */
.state-view{
  display: none !important;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.state-view.active{
  display: flex !important;
}

.state-view:not(.d-flex).active{
  display: block !important;
}

/* Searching View Background */
#searching-view{
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Passenger UI */
.st-floating-top{
  pointer-events: none;
}
.st-floating-top > .container-fluid{
  pointer-events: auto;
}

.st-hamburger-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  width: 48px;
  height: 48px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-hamburger-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.st-hamburger-btn:active{
  transform: scale(0.95);
}

.st-user-chip{
  font-weight: 500;
  color: #212529;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.st-user-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.st-bottom-sheet{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(33,37,41,.12);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -16px 40px rgba(0,0,0,.12);
}

.st-sheet-handle{
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(108,117,125,.45);
}

.st-service-btn{
  text-align: start;
}

.st-service-card{
  background: #ffffff;
  border-radius: 16px;
  min-height: 140px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  color: #212529;
  cursor: pointer;
  font-size: 1rem;
}

.st-service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.st-service-card:active{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.st-service-smart{
  background: #ffffff;
}

.st-service-smart:hover{
  background: #f8f9fa;
}

.st-service-women{
  background: #ffffff;
}

.st-service-women:hover{
  background: rgba(111,66,193,.05);
}

.st-service-electric{
  background: #ffffff;
}

.st-service-electric:hover{
  background: rgba(25,135,84,.05);
}

.st-service-hamyar{
  background: #ffffff;
}

.st-service-hamyar:hover{
  background: rgba(13,110,253,.05);
}

.st-active-overlay .st-overlay-backdrop{
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.st-sos-fab{
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 112px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Driver UI (High Contrast) */
.st-driver{
  background: #0b1220;
  color: #fff;
}

.st-driver-topbar{
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.12) !important;
}

.st-driver-metric{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.st-driver-active{
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.st-driver-sos{
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 112px;
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.st-offer-modal{
  background: radial-gradient(1200px 600px at 80% 10%, rgba(111,66,193,.35), transparent 60%),
              linear-gradient(180deg, #0b1220, #070b13);
  color: #fff;
}

.st-offer-kv{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.st-offer-timer{
  width: 140px;
  height: 140px;
  position: relative;
}

.st-offer-timer-svg{
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}

.st-offer-timer-bg{
  fill: none;
  stroke: rgba(255,255,255,.12);
  stroke-width: 6;
}

.st-offer-timer-fg{
  fill: none;
  stroke: #22c55e;
  stroke-linecap: round;
  stroke-width: 6;
  stroke-dasharray: 113.1; /* 2*pi*18 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .2s linear, stroke .2s linear;
}

.st-offer-timer-text{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Admin UI (Enterprise) */
.st-admin{
  background: #f6f7fb;
  color: #212529;
}

.st-admin-topbar{
  z-index: 1035;
}

.st-admin-card{
  border: 1px solid rgba(33,37,41,.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.st-admin-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,.10);
  color: #0d6efd;
}

.st-admin-sidebar{
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0; /* در RTL یعنی سمت راست */
  width: 280px;
  background: #ffffff;
  border-inline-end: 1px solid rgba(33,37,41,.08);
  z-index: 1030;
}

.st-admin-sidebar-inner{
  height: 100%;
  overflow: auto;
}

.st-admin-main{
  min-height: calc(100vh - 56px);
}

@media (min-width: 992px){
  .st-admin-main{
    padding-inline-start: 280px;
  }
}

.st-admin-navlink{
  border: 0;
  border-radius: 12px;
  margin-bottom: 6px;
  color: #212529;
}

.st-admin-navlink:hover{
  background: rgba(13,110,253,.08);
}

.st-admin-navlink.active{
  background: rgba(13,110,253,.12);
  color: #0d6efd;
  font-weight: 700;
}

.st-admin-offcanvas{
  width: 280px;
}

/* Loading + Document Preview */
.st-loading{
  position: relative;
  pointer-events: none;
  opacity: .9;
}

.st-loading .st-loading-content{
  visibility: hidden;
}

.st-loading .st-loading-spinner{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.st-id-preview{
  border: 2px dashed rgba(111,66,193,.35);
  border-radius: 16px;
  background: rgba(111,66,193,.04);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.st-id-preview:hover{
  border-color: var(--st-women);
  background: rgba(111,66,193,.08);
  transform: translateY(-1px);
}

/* دکمه SOS */
.btn-sos{
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #bb2d3b;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a52834;
  --bs-btn-active-border-color: #a52834;
}

/* خوانایی بهتر اعداد */
.num{
  font-variant-numeric: tabular-nums;
}

/* Origin Pin */
.st-origin-pin{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.st-origin-pin i{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  color: #212529;
}

.st-back-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  width: 48px;
  height: 48px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-back-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.st-back-btn:active{
  transform: scale(0.95);
}

.st-origin-card{
  pointer-events: auto;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 8px));
  }
}

.st-origin-pin.bounce{
  animation: bounce 1s ease-in-out infinite;
}

/* Destination Pin */
.st-destination-pin{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.st-destination-pin i{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  color: #dc3545;
}

.st-destination-search{
  pointer-events: auto;
}

.st-destination-card{
  pointer-events: auto;
}

.st-destination-pin.bounce{
  animation: bounce 1s ease-in-out infinite;
}

.st-ride-details-card{
  pointer-events: auto;
}

/* ==================== Driver UI v2 (Glassmorphism Dark) ==================== */

/* Driver Map Placeholder Override */
.st-driver .map-placeholder{
  background-color: #1a1f2e;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}

.st-driver .map-placeholder::after{
  background: linear-gradient(180deg, rgba(11,18,32,.0), rgba(11,18,32,.5));
}

/* Driver Bottom Sheet */
.st-driver-bottom-sheet{
  background: rgba(11,18,32,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -16px 48px rgba(0,0,0,.35);
}

.st-driver-bottom-sheet .st-sheet-handle{
  background: rgba(255,255,255,.25);
}

/* Driver Metric Cards */
.st-driver-metric-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.st-driver-metric-card:hover{
  background: rgba(255,255,255,.10);
}

/* Driver Buttons */
.st-driver-btn-glass{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.st-driver-btn-glass:hover{
  background: rgba(255,255,255,.15);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.st-driver-btn-glass:active{
  transform: scale(0.95);
}

.st-driver-btn-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.st-driver-btn-outline:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

.st-driver-btn-outline:active{
  background: rgba(255,255,255,.12);
}

.st-driver-btn-primary{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-driver-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34,197,94,.35);
  color: #fff;
}

.st-driver-btn-primary:active{
  transform: translateY(0);
}

/* Driver Status Chip */
.st-driver-status-chip{
  background: rgba(11,18,32,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}


.women-taxi {
  background: #FFF0F5;
  color: #D63384;
}

.electric-taxi{
  background:#fff9e1;
  color:#e0a500;
}

.hamyar-taxi{
  background: #E1F5FE;
  color: #0288D1;
}