/* SparCab v227.6.0 — map-first active ride UI and iPhone safe-area correction */

body.customer-active-ride-lock #appScreen,
body.driver-active-ride-lock #appScreen{min-height:100dvh;}

body.customer-active-ride-lock #appScreen .topbar,
body.driver-active-ride-lock #appScreen .topbar{
  top:0;
  padding-top:calc(8px + env(safe-area-inset-top));
  padding-right:calc(10px + env(safe-area-inset-right));
  padding-left:calc(10px + env(safe-area-inset-left));
  min-height:calc(64px + env(safe-area-inset-top));
  flex-wrap:nowrap;
  overflow:visible;
}
body.customer-active-ride-lock #appScreen .topbar .brand,
body.driver-active-ride-lock #appScreen .topbar .brand{min-width:0;flex:0 1 auto;}
body.customer-active-ride-lock #appScreen .topbar .brand span,
body.driver-active-ride-lock #appScreen .topbar .brand span{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.customer-active-ride-lock #appScreen .topbar .connection,
body.driver-active-ride-lock #appScreen .topbar .connection{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;}
body.customer-active-ride-lock #profileBtn,
body.driver-active-ride-lock #driverHeaderStatus{display:none!important;}
body.customer-active-ride-lock #appScreen .main,
body.driver-active-ride-lock #appScreen .main{padding-top:8px;scroll-padding-top:calc(74px + env(safe-area-inset-top));}

/* Customer: the live map is the first visible ride object. */
body.customer-active-ride-lock [data-page="ride"] > .grid.two:first-child{display:flex;flex-direction:column;gap:8px;}
body.customer-active-ride-lock .customer-map-first-v2276{order:-10;padding:8px;border-radius:20px;overflow:visible;}
body.customer-active-ride-lock .customer-map-first-v2276 > h2{display:none!important;}
body.customer-active-ride-lock .customer-map-first-v2276 #rideMap{
  order:-10;
  width:100%;
  height:min(64dvh,680px)!important;
  min-height:420px;
  margin:0!important;
  border-radius:18px;
}
body.customer-active-ride-lock .customer-map-details-v2276{margin:8px 0 0;}
body.customer-active-ride-lock .customer-map-details-v2276 > summary{font-weight:850;}
body.customer-active-ride-lock .customer-map-details-v2276 #driverCard{margin:0 0 8px;}
body.customer-active-ride-lock .customer-map-details-v2276 #customerLiveTripSummary{margin:0;}
body.customer-active-ride-lock .compact-customer-info-card{order:-9;}

/* Driver: map first, then only the current phase action/timer. Route and GPS are collapsed. */
body.driver-active-ride-lock .driver-map-first-v2276{padding:8px;border-radius:20px;overflow:visible;}
body.driver-active-ride-lock .driver-map-first-v2276 > .driver-map-shell{margin:0;}
body.driver-active-ride-lock .driver-map-first-v2276 #driverMap{
  width:100%;
  height:min(66dvh,700px)!important;
  min-height:430px;
  border-radius:18px;
}
body.driver-active-ride-lock .driver-map-first-v2276 #driverMapActionPanel{margin:8px 0 0;padding:10px;border-radius:16px;}
body.driver-active-ride-lock .driver-map-first-v2276 .driver-navigation-actions{margin:8px 0 0!important;}
body.driver-active-ride-lock .driver-map-details-v2276{margin:8px 0 0;}
body.driver-active-ride-lock .driver-map-details-v2276 > summary{font-weight:850;}
body.driver-active-ride-lock .driver-map-details-v2276 #driverLiveTripSummary{margin:0 0 8px;}
body.driver-active-ride-lock .driver-map-details-v2276 details.app-collapsible{margin:8px 0 0;}

@media(max-width:620px){
  body.customer-active-ride-lock #appScreen .topbar,
  body.driver-active-ride-lock #appScreen .topbar{gap:7px;}
  body.customer-active-ride-lock #appScreen .topbar .brand img,
  body.driver-active-ride-lock #appScreen .topbar .brand img{width:44px;height:44px;}
  body.customer-active-ride-lock #appScreen .topbar .brand span,
  body.driver-active-ride-lock #appScreen .topbar .brand span{max-width:96px;font-size:16px;}
  body.customer-active-ride-lock #appScreen .topbar .connection,
  body.driver-active-ride-lock #appScreen .topbar .connection{max-width:102px;font-size:11px;padding:6px 8px;}
  body.customer-active-ride-lock #appScreen .topbar .lang-switch,
  body.driver-active-ride-lock #appScreen .topbar .lang-switch{gap:3px;flex-wrap:nowrap;}
  body.customer-active-ride-lock #appScreen .topbar .lang-switch button,
  body.driver-active-ride-lock #appScreen .topbar .lang-switch button{padding:5px 7px;min-width:38px;}
  body.customer-active-ride-lock .customer-map-first-v2276 #rideMap{height:61dvh!important;min-height:400px;}
  body.driver-active-ride-lock .driver-map-first-v2276 #driverMap{height:63dvh!important;min-height:410px;}
}

@media(max-width:390px){
  body.customer-active-ride-lock #appScreen .topbar .brand span,
  body.driver-active-ride-lock #appScreen .topbar .brand span{display:none;}
  body.customer-active-ride-lock #appScreen .topbar .connection,
  body.driver-active-ride-lock #appScreen .topbar .connection{max-width:94px;}
  body.customer-active-ride-lock .customer-map-first-v2276 #rideMap,
  body.driver-active-ride-lock .driver-map-first-v2276 #driverMap{min-height:380px;}
}