.rides-shell { max-width: 1080px; }
.rides-panel { margin: 18px 0; padding: 20px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-bg); }
.rides-panel h2 { margin: 0 0 12px; font-size: 1.22rem; }
.rides-panel h2 span { color: #8cb5cb; font-size: .85rem; }
.rides-panel p { color: #b9d5e8; }
.rides-panel small, .rides-hint { color: #a5c6d8; line-height: 1.5; }
.rides-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rides-live { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #4387a4; background: linear-gradient(120deg, #102e47, #0b2238); }
.rides-live p { margin: 0 0 7px; color: #e6f7ff; font-weight: 800; }
.rides-live small { display: block; max-width: 650px; }
.rides-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rides-actions button, .rides-card button, .rides-card-actions a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid #53bbea; border-radius: 10px; background: #35a5df; color: #061b2e; font: 800 .88rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.rides-actions button.secondary, .rides-card button.secondary { border-color: #607d91; background: #193a50; color: #e4f7ff; }
.rides-actions button:disabled, .rides-card button:disabled { opacity: .5; cursor: not-allowed; }
.rides-list { display: grid; gap: 12px; }
.rides-card { padding: 16px; border: 1px solid rgba(117,207,255,.2); border-radius: 14px; background: #0c2942; }
.rides-card h3 { margin: 0 0 5px; font-size: 1.03rem; }
.rides-card p { margin: 5px 0; font-size: .9rem; overflow-wrap: anywhere; }
.rides-card .rides-meta { color: #9cd9ed; font-size: .82rem; }
.rides-card .rides-state { display: inline-block; margin: 0 0 7px; padding: 4px 9px; border-radius: 999px; background: #164b61; color: #aeeaff; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.rides-card .rides-state.accepted { background: #145546; color: #adf4ce; }
.rides-card .rides-state.ended { background: #354657; color: #d5e0e9; }
.rides-card .rides-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.rides-empty { padding: 12px 0; color: #a5c6d8; }
[hidden] { display: none !important; }
@media (max-width: 760px) { .rides-columns { grid-template-columns: 1fr; } .rides-live { align-items: stretch; flex-direction: column; } }

.driver-map-body { height: 100dvh; min-height: 0; overflow: hidden; background: #0b1c2b; }
.driver-topbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding: 6px 18px; border-bottom: 1px solid #23516b; background: #0a2135; }
.driver-topbar .tappa-logo-link { font-size: 1rem; }
.driver-topbar .tappa-logo-link img { width: 37px; height: 37px; }
.driver-topbar nav { display: flex; gap: 17px; font-size: .83rem; font-weight: 800; }
.driver-map-shell { position: relative; width: 100%; height: calc(100dvh - 58px); }
.driver-map { position: absolute; inset: 0; }
.driver-map-status { position: absolute; z-index: 3; top: 12px; left: 12px; max-width: min(370px, calc(100% - 140px)); margin: 0; padding: 9px 12px; border: 1px solid #568baa; border-radius: 10px; background: #09253ce9; color: #ecf9ff; font-size: .84rem; font-weight: 700; }
.driver-map-status[hidden] { display: none; }
.driver-map-actions { position: absolute; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%); }
.driver-hand-button { display: grid; justify-items: center; gap: 1px; min-width: 96px; padding: 7px 12px; border: 1px solid #90b8ca; border-radius: 16px; background: #09253cef; color: #fff; font: 800 .72rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 7px 22px #00172777; }
.driver-hand-button img { display: block; width: 54px; height: 54px; }
.driver-hand-button:disabled { opacity: .6; cursor: wait; }
.driver-center-button { position: absolute; z-index: 4; top: 105px; right: 15px; width: 45px; height: 45px; border: 1px solid #608eaa; border-radius: 10px; background: #f6fdff; color: #0984b9; font-size: 27px; cursor: pointer; }
.driver-stack-panel { position: absolute; z-index: 4; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-height: min(65dvh, 620px); display: flex; flex-direction: column; border: 1px solid #5da9c7; border-radius: 18px; background: #08243af2; box-shadow: 0 16px 40px #00182788; color: #fff; overflow: hidden; }
.driver-stack-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #32617a; }
.driver-stack-heading > div { display: grid; gap: 2px; }
.driver-stack-heading strong { font-size: 1rem; }
.driver-stack-heading span { color: #a3d8ea; font-size: .78rem; font-weight: 700; }
.driver-stack-heading button { min-height: 36px; padding: 6px 11px; border: 1px solid #5a9bb9; border-radius: 9px; background: #123d58; color: #ebfaff; font-weight: 800; cursor: pointer; }
.driver-stack-content { padding: 12px 15px 15px; overflow-y: auto; }
.driver-stack-content section + section { margin-top: 16px; }
.driver-stack-content h2 { margin: 0 0 9px; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; }
.driver-stack-content h2 span { color: #9dccdf; }
.driver-stack-content small { display: block; margin-top: 13px; }
.driver-queue-stack { gap: 0; }
.driver-queue-stack .rides-card { position: relative; margin-top: -5px; border-color: #6bb9d1; box-shadow: 0 5px 14px #00192977; cursor: pointer; }
.driver-queue-stack .rides-card:first-child { margin-top: 0; }
.driver-queue-stack .rides-card:focus-visible, .driver-queue-stack .rides-card.is-focused { outline: 2px solid #70e2ff; outline-offset: 2px; z-index: 2; }
.driver-passenger-control { display: inline-flex; align-items: center; gap: 7px; color: #d5f2ff; font: 700 .8rem system-ui, sans-serif; }
.driver-passenger-control select { min-height: 40px; min-width: 58px; padding: 6px; border: 1px solid #70aaca; border-radius: 9px; background: #eaf8ff; color: #08243a; font: 800 .9rem system-ui, sans-serif; }
.driver-stack-panel.is-collapsed .driver-stack-content { display: none; }
.driver-status-toast { position: fixed; z-index: 6; left: 15px; bottom: 15px; max-width: min(350px, calc(100vw - 30px)); padding: 9px 13px; border: 1px solid #478aad; border-radius: 11px; background: #09253cf2; color: #d4f4ff; font-size: .82rem; font-weight: 700; box-shadow: 0 7px 22px #00172777; }
.driver-status-toast.error { border-color: #cc6470; color: #ffd0d0; }
.driver-status-toast.online { border-color: #3cbb90; color: #c5f8e2; }
.driver-access { width: min(600px, calc(100% - 30px)); margin: 50px auto; padding: 25px; border: 1px solid var(--card-border); border-radius: 17px; background: var(--card-bg); }
.driver-pickup-marker { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: #ff953d; box-shadow: 0 3px 9px #061b2b9c; cursor: pointer; }
.driver-pickup-marker.is-queued { background: #37cd9b; }
.rider-tracking-map { width: 100%; height: min(45vh, 390px); min-height: 230px; border: 1px solid #4e93b0; border-radius: 13px; overflow: hidden; background: #173a50; }
#riderTrackingPanel h2 small { color: #9fc8d9; font-size: .7rem; font-weight: 600; }
#riderTrackingStatus { margin: 9px 0 0; font-size: .82rem; }
.driver-map-body:has(.driver-stack-panel.is-collapsed) .driver-status-toast { bottom: 15px; }
@media (max-width: 700px) {
  .driver-topbar { padding: 6px 10px; }
  .driver-topbar .tappa-logo-link span { font-size: .86rem; }
  .driver-topbar nav { gap: 9px; font-size: .72rem; }
  .driver-map-status { max-width: 170px; font-size: .72rem; }
  .driver-stack-panel { right: 0; bottom: 0; width: 100%; max-height: 47dvh; border-radius: 18px 18px 0 0; }
  .driver-status-toast { bottom: calc(47dvh + 8px); font-size: .72rem; }
  .driver-stack-panel.is-collapsed + .driver-status-toast { bottom: 15px; }
  .driver-hand-button { min-width: 78px; padding: 4px 8px; }
  .driver-hand-button img { width: 46px; height: 46px; }
}