/* =============================================================================
   PHASE 5 — NAVIGATOR ekrani uslubi (spec 11).
   Yuqorida keyingi burilish banneri, pastda ETA/manzil/tugmalar.
   Kontrast kunduz va tunda ham AA darajadan past bo'lmasin.
   ============================================================================= */
.nv-screen {
  position: fixed;
  inset: 0;
  z-index: 80;                 /* taksi ekranidan (60) yuqori — navigatsiya ustun */
  pointer-events: none;        /* xarita bosilishi ishlashda davom etsin */
}
.nv-screen[hidden] { display: none; }

/* --- Yuqoridagi burilish banneri --- */
.nv-banner {
  pointer-events: auto;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #14130F;
  color: #fff;
  box-shadow: 0 8px 26px rgba(10, 12, 18, .34);
  min-height: 74px;
}
.nv-banner[data-type="arrive"] { background: #15803D; }

.nv-ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; }
.nv-ico svg { width: 40px; height: 40px; }

.nv-banner-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nv-banner-tx b { font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -.3px; }
.nv-banner-tx span {
  font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Pastdagi panel --- */
.nv-bottom {
  pointer-events: auto;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 -6px 26px rgba(10, 12, 18, .2);
}
.nv-info { display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; }
.nv-info b { font-size: 19px; font-weight: 900; color: #15803D; line-height: 1.1; }
.nv-info span { font-size: 12.5px; font-weight: 700; color: #79808B; }

.nv-dest { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nv-dest i { font-style: normal; font-size: 11px; font-weight: 700; color: #8A9099; text-transform: uppercase; letter-spacing: .3px; }
.nv-dest b { font-size: 14.5px; font-weight: 800; color: #14130F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nv-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.nv-btn {
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #E6E9EE;
  border-radius: 13px;
  background: #fff;
  color: #14130F;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.nv-btn.is-on { background: #FFD21F; border-color: #F2C400; }
.nv-btn.is-stop { background: #B3242F; border-color: #B3242F; color: #fff; }
.nv-btn:active { transform: scale(.97); }

/* --- Kunduzgi/tungi rejim (spec 11.19) --- */
@media (prefers-color-scheme: dark) {
  .nv-bottom { background: #1D2128; box-shadow: 0 -6px 26px rgba(0, 0, 0, .5); }
  .nv-dest b { color: #F4F6F8; }
  .nv-btn { background: #252A33; border-color: #313846; color: #F4F6F8; }
  .nv-btn.is-on { background: #FFD21F; color: #14130F; }
  .nv-btn.is-stop { background: #C41C2E; border-color: #C41C2E; color: #fff; }
}

/* --- Harakatni kamaytirish (spec 15/11) --- */
@media (prefers-reduced-motion: reduce) {
  .nv-btn:active { transform: none; }
}

/* --- Planshet va kompyuter: banner torroq, panel o'ngda --- */
@media (min-width: 760px) {
  .nv-banner { right: auto; width: 380px; }
  .nv-bottom { left: auto; width: 420px; }
}