/* SparCab v227.4.0 — clean active-ride focus mode for Customer and Driver */

body.customer-active-ride-lock #appScreen .main,
body.driver-active-ride-lock #appScreen .main{padding:8px 8px calc(88px + env(safe-area-inset-bottom));}

body.customer-active-ride-lock #appScreen .topbar,
body.driver-active-ride-lock #appScreen .topbar{padding:8px 10px;gap:8px;min-height:64px;}
body.customer-active-ride-lock #appScreen .topbar .brand span,
body.driver-active-ride-lock #appScreen .topbar .brand span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.customer-active-ride-lock #appScreen .topbar .brand img,
body.driver-active-ride-lock #appScreen .topbar .brand img{width:48px;height:48px;}

/* Customer: map and live arrival information first. */
body.customer-active-ride-lock [data-page="ride"]{gap:8px;}
body.customer-active-ride-lock [data-page="ride"] > .grid.two:first-child{display:flex;flex-direction:column;gap:8px;}
body.customer-active-ride-lock .compact-customer-map-card{order:-2;padding:10px;border-radius:20px;}
body.customer-active-ride-lock .compact-customer-info-card{order:-1;padding:10px;border-radius:20px;}
body.customer-active-ride-lock .compact-customer-map-card > h2{display:none;}
body.customer-active-ride-lock .compact-customer-map-card #driverCard{margin:0 0 6px;}
body.customer-active-ride-lock .compact-customer-map-card #driverCard .row{gap:10px;align-items:center;}
body.customer-active-ride-lock .compact-customer-map-card #driverCard .avatar{width:48px;height:48px;}
body.customer-active-ride-lock .compact-customer-map-card #driverCard strong{font-size:1.05rem;}
body.customer-active-ride-lock #customerLiveTripSummary{margin:6px 0 8px;padding:10px;border-radius:16px;}
body.customer-active-ride-lock #customerLiveTripSummary > strong{font-size:1.05rem;}
body.customer-active-ride-lock #customerLiveTripSummary .live-trip-grid{gap:6px;}
body.customer-active-ride-lock #customerLiveTripSummary .live-trip-metric{padding:8px;min-height:70px;}
body.customer-active-ride-lock #customerLiveTripSummary .live-trip-metric b{font-size:1.15rem;}
body.customer-active-ride-lock #rideMap{height:min(52vh,520px)!important;min-height:340px;border-radius:18px;margin-top:6px!important;}

body.customer-active-ride-lock .compact-customer-info-card > .row.between{margin-bottom:6px;}
body.customer-active-ride-lock .compact-customer-info-card > .row.between h2{font-size:1.45rem;margin:0;}
body.customer-active-ride-lock #customerRideEssentials{display:grid;gap:8px;margin:6px 0;}
body.customer-active-ride-lock #customerRideEssentials:empty{display:none;}
body.customer-active-ride-lock #customerRideEssentials .waiting-timer-card{margin:0;padding:12px;text-align:center;border-radius:16px;}
body.customer-active-ride-lock #customerRideEssentials .waiting-clock{font-size:2.35rem;line-height:1.05;}
body.customer-active-ride-lock #customerRideEssentials .notice{margin:0;padding:12px;border-radius:16px;font-size:1.05rem;}
body.customer-active-ride-lock #rideActions{display:flex;gap:8px;margin:6px 0;}
body.customer-active-ride-lock #rideActions .btn{min-height:52px;flex:1;font-size:1.05rem;}
body.customer-active-ride-lock #rideActions:empty{display:none;}
body.customer-active-ride-lock .compact-customer-route-details,
body.customer-active-ride-lock .compact-customer-timeline-details,
body.customer-active-ride-lock .compact-customer-safety-details,
body.customer-active-ride-lock [data-page="ride"] > .grid.two:nth-of-type(2) > details{margin-top:8px;border-radius:16px;}
body.customer-active-ride-lock .compact-customer-route-details summary,
body.customer-active-ride-lock .compact-customer-timeline-details summary,
body.customer-active-ride-lock .compact-customer-safety-details summary{font-weight:800;}
body.customer-active-ride-lock .compact-customer-route-details #activeRideCard .list-item{padding:10px;}
body.customer-active-ride-lock .compact-customer-timeline-details .timeline-wrap{margin:0;}
body.customer-active-ride-lock [data-page="ride"] > .grid.two:nth-of-type(2){display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px!important;}
body.customer-active-ride-lock .compact-customer-safety-details .card{box-shadow:none;border:0;padding:6px;background:transparent;}
body.customer-active-ride-lock .compact-customer-safety-details .card > h2,
body.customer-active-ride-lock .compact-customer-safety-details .card > p{display:none;}

/* Driver: navigation map, customer position, timer and ride action only. */
body.driver-active-ride-lock .driver-navigation-card{padding:8px;border-radius:20px;}
body.driver-active-ride-lock .driver-navigation-head,
body.driver-active-ride-lock .driver-navigation-card > .row.between{display:none!important;}
body.driver-active-ride-lock #driverLiveTripSummary{margin:0 0 8px;padding:10px;border-radius:16px;}
body.driver-active-ride-lock #driverLiveTripSummary > strong{font-size:1.05rem;}
body.driver-active-ride-lock #driverLiveTripSummary .live-trip-grid{gap:6px;}
body.driver-active-ride-lock #driverLiveTripSummary .live-trip-metric{padding:8px;min-height:68px;}
body.driver-active-ride-lock #driverLiveTripSummary .live-trip-metric b{font-size:1.1rem;}
body.driver-active-ride-lock .driver-navigation-card > .app-collapsible{margin:0 0 8px;border-radius:14px;}
body.driver-active-ride-lock .driver-map-shell{border-radius:18px;overflow:hidden;}
body.driver-active-ride-lock #driverMap{height:min(56vh,590px)!important;min-height:390px;}
body.driver-active-ride-lock #driverMapActionPanel{margin-top:8px;padding:10px;border-radius:16px;}
body.driver-active-ride-lock #driverMapActionPanel > .row.between{margin-bottom:6px;}
body.driver-active-ride-lock #mapCurrentRideActions{display:grid;gap:8px;}
body.driver-active-ride-lock #mapCurrentRideActions .waiting-timer-card{margin:0;padding:12px;text-align:center;border-radius:16px;}
body.driver-active-ride-lock #mapCurrentRideActions .waiting-clock{font-size:2.35rem;line-height:1.05;}
body.driver-active-ride-lock #mapCurrentRideActions .btn{min-height:54px;font-size:1.08rem;width:100%;}
body.driver-active-ride-lock .driver-navigation-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
body.driver-active-ride-lock .driver-navigation-actions .btn{min-height:48px;}

@media (max-width:720px){
  body.customer-active-ride-lock [data-page="ride"] > .grid.two:nth-of-type(2){grid-template-columns:1fr;}
  body.customer-active-ride-lock #rideMap{height:48vh!important;min-height:330px;}
  body.driver-active-ride-lock #driverMap{height:52vh!important;min-height:370px;}
  body.customer-active-ride-lock #customerLiveTripSummary .live-trip-grid,
  body.driver-active-ride-lock #driverLiveTripSummary .live-trip-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.customer-active-ride-lock #customerLiveTripSummary .live-trip-metric,
  body.driver-active-ride-lock #driverLiveTripSummary .live-trip-metric{font-size:.82rem;}
}