/* =========================================================
   services.taxi — DARK PRO 2026
   Modern · minimal · high FPS · Steve-level craft
   ========================================================= */

:root,
html[data-theme="dark"],
html:not([data-theme="light"]){
  color-scheme: dark;
  --bg: #050705;
  --bg-elev: #0c100d;
  --bg-card: #121812;
  --bg-card-2: #171d18;
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.12);
  --text: #f3f6f3;
  --text-2: #a7b1aa;
  --text-3: #6f7a73;
  --lime: #b6ff3d;
  --lime-2: #8eef00;
  --lime-dim: rgba(182,255,61,.12);
  --lime-glow: rgba(182,255,61,.28);
  --danger: #ff6b6b;
  --danger-dim: rgba(255,80,80,.12);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 10px 32px rgba(0,0,0,.42);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.28);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{overscroll-behavior-y:none}

/* —— Shell —— */
.app-shell{
  width:min(100%,420px)!important;
  min-height:100dvh!important;
  background:var(--bg)!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(min-width:600px){
  body{display:grid;place-items:center;padding:28px;background:#020302}
  .app-shell{
    width:390px!important;
    min-height:min(844px, calc(100dvh - 56px))!important;
    border-radius:40px!important;
    border:1px solid #151a16!important;
    box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03)!important;
  }
}

/* —— Map full —— */
.booking-screen .map-stage,
body.booking-screen .map-stage{
  position:absolute!important;inset:0!important;
  height:100%!important;min-height:100%!important;z-index:1!important;
}
.booking-screen .map-shade{
  background:linear-gradient(
    180deg,
    rgba(5,7,5,.72) 0%,
    transparent 18%,
    transparent 58%,
    rgba(5,7,5,.25) 100%
  )!important;
}
.leaflet-tile{
  filter:grayscale(.92) invert(.9) brightness(.52) contrast(1.18) hue-rotate(72deg)!important;
}
.leaflet-control-attribution{display:none!important}

/* —— TOPBAR: logo center + 4 boxes —— */
.topbar{
  position:absolute!important;z-index:1000!important;
  left:0!important;right:0!important;top:0!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;gap:8px!important;
  padding:max(12px, env(safe-area-inset-top)) 12px 6px!important;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.topbar .wordmark{
  font-size:14px!important;font-weight:800!important;
  letter-spacing:-.3px!important;color:rgba(255,255,255,.92)!important;
  text-decoration:none!important;line-height:1!important;
  text-shadow:0 2px 14px rgba(0,0,0,.55)!important;
}
.topbar .wordmark b{color:var(--lime)!important;font-weight:900!important}

.topbar .top-tray{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.4fr) minmax(52px,.9fr) 40px 40px auto!important;
  align-items:center!important;
  gap:6px!important;
}
.topbar .locate-btn{
  position:static!important;inset:auto!important;
  width:36px!important;min-width:36px!important;height:36px!important;
  padding:0!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:rgba(10,14,11,.88)!important;color:var(--lime)!important;
  box-shadow:var(--shadow-soft)!important;
}
.topbar .locate-btn svg{width:18px!important;height:18px!important}
.topbar .locate-btn::after{content:none!important;display:none!important}
.topbar .tray-box,
.topbar .role-btn,
.topbar .language-btn,
.topbar .theme-btn,
.topbar .account-points{
  height:36px!important;min-height:36px!important;
  margin:0!important;padding:0 8px!important;
  border-radius:14px!important;
  border:1px solid var(--line-strong)!important;
  background:rgba(10,14,11,.88)!important;
  color:var(--text)!important;
  box-shadow:var(--shadow-soft)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;
  transition:transform .15s var(--ease), border-color .15s ease, background .15s ease!important;
}
.topbar .tray-box:active,
.topbar .role-btn:active,
.topbar .language-btn:active,
.topbar .theme-btn:active{transform:scale(.97)}

.topbar .role-btn{justify-content:flex-start!important;padding-left:4px!important}
.topbar .role-track{
  position:relative!important;width:40px!important;height:22px!important;
  flex:0 0 40px!important;border-radius:var(--radius-pill)!important;
  background:#1a221c!important;display:block!important;
}
.topbar .role-track i{
  position:absolute!important;top:2px!important;font-style:normal!important;
  font-size:11px!important;line-height:18px!important;width:18px!important;
  text-align:center!important;opacity:.4!important;transition:opacity .2s ease!important;
}
.topbar .role-track .role-client{left:2px!important}
.topbar .role-track .role-driver{right:2px!important}
.topbar .role-track b{
  position:absolute!important;top:2px!important;left:2px!important;
  width:18px!important;height:18px!important;border-radius:50%!important;
  background:linear-gradient(180deg,var(--lime),var(--lime-2))!important;
  box-shadow:0 2px 8px var(--lime-glow)!important;
  transition:transform .28s var(--ease)!important;
}
.topbar .role-btn[aria-pressed="true"] .role-track b{transform:translateX(18px)!important}
.topbar .role-btn[aria-pressed="true"] .role-driver{opacity:1!important}
.topbar .role-btn:not([aria-pressed="true"]) .role-client{opacity:1!important}
.topbar .role-btn small{
  font:750 10px/1 var(--font)!important;color:var(--text-2)!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

.topbar .language-btn{font:750 10px var(--font)!important}
.topbar .language-btn span{max-width:4.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .theme-btn{min-width:48px!important;padding:0 6px!important}
.topbar .account-points{min-width:52px!important;padding:0 8px 0 4px!important;border-color:rgba(182,255,61,.22)!important}
.topbar .account-points i{
  width:22px!important;height:22px!important;border-radius:50%!important;
  background:linear-gradient(180deg,var(--lime),var(--lime-2))!important;
  color:#0c1400!important;display:grid!important;place-items:center!important;
  font:900 10px var(--font)!important;
}
.topbar .account-points b{font:900 12px var(--font)!important;color:var(--lime)!important}
.topbar .account-points small{display:none!important}
.brand-stack,.topbar .top-actions{display:contents!important}

/* —— LIVE chip + Annulla (sotto tray, centrati) —— */
.booking-search-chip{
  position:absolute!important;z-index:900!important;
  left:50%!important;transform:translateX(-50%)!important;
  top:max(92px, calc(env(safe-area-inset-top) + 78px))!important;
  display:none;align-items:center;gap:8px;
  max-width:min(300px, calc(100% - 24px));
  padding:9px 14px;border-radius:var(--radius-pill);
  background:rgba(10,14,11,.94)!important;
  border:1px solid rgba(182,255,61,.28)!important;
  color:var(--text)!important;
  font:750 11px/1.25 var(--font)!important;
  box-shadow:var(--shadow)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.booking-search-chip.show{display:inline-flex!important;animation:fadeUp .28s var(--ease)}
.booking-search-chip b{color:var(--lime)!important}
.booking-search-chip .spin{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(182,255,61,.2);border-top-color:var(--lime);
  animation:spin .7s linear infinite;flex:0 0 auto;
}

.cancel-order-btn{
  position:absolute!important;z-index:900!important;
  left:50%!important;transform:translateX(-50%)!important;
  top:max(132px, calc(env(safe-area-inset-top) + 118px))!important;
  display:none;align-items:center;justify-content:center;
  height:30px;padding:0 14px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,100,100,.35)!important;
  background:rgba(40,12,12,.94)!important;
  color:#ffb4b4!important;font:750 11px var(--font)!important;
  box-shadow:var(--shadow-soft)!important;cursor:pointer;
}
.cancel-order-btn.show{display:inline-flex!important}

/* —— Route floating cards —— */
.map-route-actions{
  position:absolute!important;z-index:800!important;
  top:max(108px, calc(env(safe-area-inset-top) + 94px))!important;
  left:14px!important;right:14px!important;
  display:none;flex-direction:column;gap:8px!important;
}
.booking-screen.sheet-collapsed .map-route-actions{display:flex!important}
body[data-perspective="driver"] .map-route-actions,
body[data-perspective="driver"] .booking-screen .map-route-actions,
body[data-perspective="driver"] .booking-screen.sheet-collapsed .map-route-actions{
  display:none!important;visibility:hidden!important;pointer-events:none!important;height:0!important;overflow:hidden!important;
}
body:has(.booking-search-chip.show) .map-route-actions,
body:has(.cancel-order-btn.show) .map-route-actions{
  top:max(178px, calc(env(safe-area-inset-top) + 164px))!important;
}
.map-route-actions button{
  height:54px!important;padding:8px 12px!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  border-radius:16px!important;
  border:1px solid var(--line-strong)!important;
  background:rgba(12,16,13,.92)!important;
  color:var(--text)!important;text-align:left!important;
  box-shadow:var(--shadow)!important;
  transition:transform .15s var(--ease)!important;
}
.map-route-actions button:active{transform:scale(.985)}
.map-route-actions button>i{
  width:12px!important;height:12px!important;flex:0 0 12px!important;
  border-radius:50%!important;border:2.5px solid #fff!important;background:transparent!important;
}
.map-route-actions button>i.destination,
.map-route-actions button>i.to{
  border:0!important;background:var(--lime)!important;
  box-shadow:0 0 0 3px var(--lime-dim), 0 0 12px var(--lime-glow)!important;
}
.map-route-actions small{color:var(--text-3)!important;font:700 9px var(--font)!important;display:block}
.map-route-actions b{color:var(--text)!important;font:750 13px/1.25 var(--font)!important;display:block;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-route-actions svg{width:16px;height:16px;stroke:var(--text-3);fill:none;stroke-width:2;opacity:.7}

/* —— Bottom sheet —— */
.booking-screen .control-panel,
.booking-screen.sheet-collapsed > .control-panel{
  background:linear-gradient(180deg, #121812 0%, #0a0e0b 50%, #060806 100%)!important;
  border-top:1px solid var(--line)!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -16px 48px rgba(0,0,0,.5)!important;
}
.sheet-toggle{color:var(--text-3)!important;font:750 11px var(--font)!important}
.sheet-grabber{
  width:40px!important;height:4px!important;border-radius:var(--radius-pill)!important;
  background:rgba(255,255,255,.18)!important;box-shadow:none!important;
}
.sheet-pull-hint i{border-color:var(--lime)!important;opacity:.8}

.route-card,.route-row{
  border-radius:16px!important;
  border-color:var(--line)!important;
  background:var(--bg-card)!important;
}

/* —— Primary CTA —— */
.book-btn,.route-minibar-book,.confirm-btn,
button.book-btn,a.book-btn{
  height:52px!important;border:0!important;border-radius:16px!important;
  background:linear-gradient(180deg, #c6ff52, #8eef00)!important;
  color:#0b1400!important;font:900 15px/1 var(--font)!important;
  box-shadow:0 12px 28px rgba(140,230,0,.28)!important;
  transition:transform .15s var(--ease)!important;
  letter-spacing:-.2px;
}
.book-btn:active,.route-minibar-book:active,.confirm-btn:active{transform:scale(.98)}

/* —— Minibar —— */
.route-minibar{
  border-radius:22px 22px 0 0!important;
  background:linear-gradient(180deg, #141a15, #0a0e0b)!important;
  border-top:1px solid rgba(182,255,61,.15)!important;
  box-shadow:0 -12px 40px rgba(0,0,0,.45)!important;
}

/* —— Vehicles —— */
.vehicle,.mini-vehicle{
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.03)!important;
  transition:border-color .18s ease, transform .15s var(--ease), background .18s ease!important;
}
.vehicle:active,.mini-vehicle:active{transform:scale(.98)}
.vehicle.active,.mini-vehicle.active,.vehicle.selected,.mini-vehicle.selected{
  border-color:rgba(182,255,61,.5)!important;
  background:var(--lime-dim)!important;
  box-shadow:0 0 0 1px rgba(182,255,61,.12)!important;
}

/* —— FAB chat —— */
.chat-fab,button.chat-fab,a.chat-fab,#openChat,.messenger-fab{
  width:52px!important;height:52px!important;border-radius:50%!important;border:0!important;
  background:linear-gradient(180deg, #c6ff52, #8eef00)!important;
  color:#0b1400!important;
  box-shadow:0 12px 28px rgba(140,230,0,.35)!important;
}

/* —— Status chips —— */
.driver-live-chip,.map-status{
  border-radius:var(--radius-pill)!important;
  border:1px solid rgba(182,255,61,.25)!important;
  background:rgba(10,14,11,.92)!important;
  box-shadow:var(--shadow-soft)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* —— Arriving card —— */
.driver-arriving-card{
  background:linear-gradient(165deg, #141c16, #0c110e)!important;
  border:1px solid rgba(182,255,61,.28)!important;
  border-radius:22px!important;
  box-shadow:0 20px 50px rgba(0,0,0,.5)!important;
}
.driver-arriving-card h3{color:var(--lime)!important;font:900 16px/1.2 var(--font)!important}
.driver-arriving-card p{color:var(--text-2)!important}
.driver-arriving-card .eta{
  background:var(--lime-dim)!important;
  border:1px solid rgba(182,255,61,.2)!important;
  border-radius:14px!important;color:#e8ffc8!important;
}
.driver-arriving-card .eta b{color:var(--lime)!important}

/* —— Location dialog —— */
.location-dialog{
  width:min(94vw,400px)!important;max-height:min(88dvh,720px)!important;
  margin:auto!important;padding:0!important;
  border:1px solid var(--line-strong)!important;border-radius:28px!important;
  background:var(--bg-elev)!important;color:var(--text)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.6)!important;overflow:hidden!important;
}
.location-dialog::backdrop{
  background:rgba(0,0,0,.65)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.location-dialog form{
  display:flex!important;flex-direction:column!important;
  padding:18px 14px 14px!important;max-height:min(88dvh,720px)!important;overflow:hidden!important;
}
.location-kicker{
  color:var(--lime)!important;font:900 9px/1 var(--font)!important;
  letter-spacing:1.2px!important;text-transform:uppercase!important;
}
.location-dialog h2{
  margin:6px 40px 14px 0!important;
  font:900 24px/1.15 var(--font)!important;letter-spacing:-.5px!important;color:var(--text)!important;
}
.location-close{
  position:absolute!important;right:12px!important;top:12px!important;
  width:34px!important;height:34px!important;border-radius:50%!important;
  border:1px solid var(--line)!important;background:var(--bg-card)!important;
  color:var(--text-2)!important;font-size:18px!important;cursor:pointer!important;
}
.location-route-pair{
  margin:0 0 12px!important;padding:4px!important;border-radius:16px!important;
  border:1px solid var(--line)!important;background:var(--bg-card)!important;box-shadow:none!important;
}
.location-route-pair button{
  width:100%!important;min-height:52px!important;padding:8px 10px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border:1px solid transparent!important;border-radius:12px!important;
  background:transparent!important;color:var(--text)!important;text-align:left!important;
  transition:background .12s ease,border-color .12s ease!important;
}
.location-route-pair button.active{
  border-color:rgba(182,255,61,.4)!important;background:var(--lime-dim)!important;
}
.location-route-pair button>i{
  width:12px!important;height:12px!important;flex:0 0 12px!important;
  border-radius:50%!important;border:2.5px solid #fff!important;background:transparent!important;
}
.location-route-pair button>i.destination{
  border:0!important;background:var(--lime)!important;
  box-shadow:0 0 0 3px var(--lime-dim)!important;
}
.location-route-pair small{color:var(--text-3)!important;font:700 9px var(--font)!important}
.location-route-pair b{color:var(--text)!important;font:750 13px var(--font)!important;margin-top:2px!important}
.location-route-connector{background:var(--lime)!important;opacity:.7!important}

.location-search-wrap{
  display:flex!important;align-items:center!important;gap:10px!important;
  height:48px!important;margin:0 0 10px!important;padding:0 12px!important;
  border-radius:14px!important;border:1px solid var(--line-strong)!important;
  background:var(--bg-card)!important;
}
.location-search-wrap svg{width:18px;height:18px;fill:none;stroke:var(--lime);stroke-width:2;flex:0 0 18px}
.location-search-wrap input{
  flex:1!important;border:0!important;background:transparent!important;
  color:var(--text)!important;font:600 14px var(--font)!important;outline:0!important;margin:0!important;padding:0!important;
}
.location-search-wrap input::placeholder{color:var(--text-3)}

.location-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0 0 12px!important}
.location-actions button{
  min-height:54px!important;padding:8px 10px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border-radius:14px!important;border:1px solid var(--line)!important;
  background:var(--bg-card)!important;color:var(--text)!important;text-align:left!important;
  transition:transform .15s var(--ease)!important;
}
.location-actions button:active{transform:scale(.97)}
.location-actions svg{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:1.8;flex:0 0 20px}
.location-actions b{display:block;font:750 12px var(--font)!important;color:var(--text)!important}
.location-actions small{display:block;margin-top:2px;font:600 10px var(--font)!important;color:var(--text-3)!important}

.location-results{
  flex:1!important;min-height:100px!important;max-height:min(42dvh,320px)!important;
  overflow:auto!important;overscroll-behavior:contain!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
}
.location-results button,[role="option"]{
  width:100%!important;min-height:50px!important;padding:10px 12px!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  border:0!important;border-radius:14px!important;background:transparent!important;
  color:var(--text)!important;text-align:left!important;cursor:pointer!important;
  transition:background .12s ease!important;
}
.location-results button:active{background:var(--lime-dim)!important}
.location-status{color:var(--text-3)!important;font:600 11px var(--font)!important;margin:8px 2px 0!important}

/* —— Order / generic dialogs —— */
dialog{
  border:1px solid var(--line-strong)!important;
  border-radius:28px!important;
  background:var(--bg-elev)!important;
  color:var(--text)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.6)!important;
}
dialog::backdrop{background:rgba(0,0,0,.65)!important;backdrop-filter:none!important}
dialog h2{font:900 22px/1.2 var(--font)!important;letter-spacing:-.4px!important}
dialog input,dialog textarea{
  border:1px solid var(--line)!important;border-radius:14px!important;
  background:var(--bg-card)!important;color:var(--text)!important;
}
.modal-kicker{color:var(--lime)!important}

/* —— Toast —— */
.toast{
  border-radius:14px!important;border:1px solid var(--line)!important;
  background:var(--bg-card-2)!important;color:var(--text)!important;
  box-shadow:var(--shadow)!important;
}

/* —— Driver panel —— */
.driver-requests-panel{
  background:linear-gradient(180deg, rgba(12,16,13,.96), rgba(6,8,7,.98))!important;
  border-top:1px solid rgba(182,255,61,.18)!important;
  border-radius:22px 22px 0 0!important;
  box-shadow:0 -12px 36px rgba(0,0,0,.4)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.drp-item{
  border:1px solid var(--line)!important;border-radius:14px!important;
  background:rgba(255,255,255,.03)!important;
}
.drp-item.is-new{border-color:rgba(182,255,61,.4)!important;background:var(--lime-dim)!important}
.drp-item .price,.drp-title b,.st-badge.open{color:var(--lime)!important}
.drp-gps{
  border:1px solid rgba(182,255,61,.3)!important;
  background:var(--lime-dim)!important;color:var(--lime)!important;
}

/* —— Markers —— */
.route-marker{
  border:3px solid #fff!important;box-shadow:0 4px 14px rgba(0,0,0,.4)!important;
}
.route-marker.to{
  background:var(--lime)!important;border-color:#0c1400!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 16px var(--lime-glow)!important;
}
.route-glow{filter:none!important}

/* —— Motion —— */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{
  from{opacity:0;transform:translateX(-50%) translateY(6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.booking-screen .control-panel,
.route-minibar,
.map-route-actions button,
.topbar .tray-box,
.book-btn,.route-minibar-book{
  transform:translateZ(0);backface-visibility:hidden;
}

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

/* touch */
button,input,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}