/* RideArrivo rider layer and driver pill: island logo pill, offers strip, collapsed dock, map credits, driver status pill.
   Light glass for the rider app, dark glass for the driver app. PArAsYtE */

/* ---- Map credits: Google's logo and "Keyboard shortcuts / Map data / Terms" ride just above the booking panel so
   they are never hidden under the home indicator. They stay visible and unmodified, only moved. */
.map-canvas .gm-style .gm-style-cc,
.map-canvas .gm-style div:has(> a[href^="https://maps.google.com/maps"]){translate:0 calc(-1 * (var(--sheet-h, 0px) + 6px));transition:translate .28s cubic-bezier(.2,.8,.2,1)}
.map-canvas .gm-style .gm-style-cc{border-radius:8px}
.map-canvas .gm-style .gm-style-cc>div:first-child{opacity:.92!important}
.map-canvas .gm-style .gm-style-cc,.map-canvas .gm-style .gm-style-cc a,.map-canvas .gm-style .gm-style-cc button,.map-canvas .gm-style .gm-style-cc span{color:#1b2b3d!important;font-size:11px!important}
.map-canvas .gm-style div:has(> a[href^="https://maps.google.com/maps"]) img{filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)) drop-shadow(0 0 1px rgba(0,0,0,.35))}
@media(prefers-reduced-motion:reduce){.map-canvas .gm-style .gm-style-cc,.map-canvas .gm-style div:has(> a[href^="https://maps.google.com/maps"]){transition:none}}

/* ---- RideArrivo island pill: the real wordmark, floating at the top, takes the rider to the website. */
.ra-island{position:fixed;z-index:60;left:50%;top:calc(12px + var(--safe-top, env(safe-area-inset-top, 0px)));display:flex;align-items:center;justify-content:center;height:52px;padding:0 18px;border-radius:999px;background:rgba(9,20,33,.88);border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 32px rgba(5,14,24,.32),0 1px 0 rgba(255,255,255,.1) inset;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);text-decoration:none;opacity:0;pointer-events:none;transform:translate(-50%,-14px) scale(.6);transform-origin:50% 0;transition:opacity .2s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.ra-island img{display:block;height:20px;width:auto}
.ra-island:focus-visible{outline:2px solid #ffc25f;outline-offset:3px}
.ra-island:active{transform:translate(-50%,0) scale(.95)}
body.sheet-collapsed .ra-island{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
@media(min-width:560px){.ra-island{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}.ra-island img{height:22px}}
/* In the map-first view the side pills shrink to icons so the island has the middle to itself. */
body.sheet-collapsed .mini-pills .mini-brand>div,body.sheet-collapsed .mini-pills .pill-right #tripButton{display:none}
body.sheet-collapsed .mini-pills .pill-left{padding-right:6px}
@media(prefers-reduced-motion:reduce){.ra-island{transition:opacity .15s}}

/* ---- Offers strip: our own cards, swipe sideways, dismiss with the cross. */
.ra-offers{display:flex;gap:10px;margin:2px -16px 12px;padding:2px 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ra-offers::-webkit-scrollbar{display:none}
.ra-offers:empty{display:none}
.ra-offer{position:relative;flex:0 0 auto;width:min(82%,330px);scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:10px 38px 10px 10px;border-radius:20px;border:1px solid rgba(245,166,35,.38);background:linear-gradient(135deg,rgba(255,226,170,.7),rgba(255,244,222,.82));color:#0b1623;text-align:left;box-shadow:0 8px 22px rgba(245,166,35,.16),inset 0 1px 0 rgba(255,255,255,.7);cursor:pointer;animation:raOfferIn .45s cubic-bezier(.3,1.5,.5,1) both}
.ra-offer[data-kind="credit"]{border-color:rgba(29,107,255,.28);background:linear-gradient(135deg,rgba(207,225,255,.8),rgba(236,244,255,.85));box-shadow:0 8px 22px rgba(29,107,255,.13),inset 0 1px 0 rgba(255,255,255,.7)}
.ra-offer[data-kind="signup"]{border-color:rgba(79,70,229,.3);background:linear-gradient(135deg,rgba(214,211,255,.8),rgba(240,239,255,.86));box-shadow:0 8px 22px rgba(79,70,229,.13),inset 0 1px 0 rgba(255,255,255,.7)}
.ra-offer:active{transform:scale(.985)}
.ra-offer:focus-visible{outline:2px solid #1d6bff;outline-offset:2px}
.ra-offer-badge{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#0b1a2b;color:#ffc25f}
.ra-offer[data-kind="credit"] .ra-offer-badge{color:#9ec2ff}.ra-offer[data-kind="signup"] .ra-offer-badge{color:#c9c5ff}
.ra-offer-copy{min-width:0;display:grid;gap:1px}
.ra-offer-copy strong{font-size:15px;line-height:1.2;letter-spacing:-.01em;color:#0b1623}
.ra-offer-copy small{font-size:12.5px;color:#3b4b5f;line-height:1.3}
.ra-offer-code{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;background:#0b1a2b;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;width:max-content}
.ra-offer-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(11,22,35,.08);color:#0b1623;font-size:16px;line-height:1}
.ra-offer-x:active{background:rgba(11,22,35,.18)}
@keyframes raOfferIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ra-offer{animation:none}}

/* ---- Collapsed dock: the booking panel folds away to a search bar and three tabs. */
.ra-dock{position:fixed;z-index:55;left:12px;right:12px;bottom:calc(10px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));display:grid;gap:6px;padding:8px 10px 6px;border-radius:26px;background:rgba(255,255,255,.9);border:1px solid rgba(11,22,35,.07);box-shadow:0 18px 50px rgba(11,22,35,.24),0 2px 8px rgba(11,22,35,.08),inset 0 1px 0 rgba(255,255,255,.8);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.2,.9,.25,1.05),opacity .2s}
body.sheet-collapsed .ra-dock{transform:none;opacity:1;pointer-events:auto}
.ra-dock-grip{display:grid;place-items:center;width:100%;height:18px;border:0;background:none;padding:0;touch-action:none}
.ra-dock-grip::before{content:"";width:40px;height:5px;border-radius:999px;background:rgba(11,22,35,.2)}
.ra-search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 8px 0 14px;border-radius:18px;background:#eef1f5;color:#0b1623}
.ra-search-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:52px;border:0;background:none;padding:0;text-align:left;font-size:17px;font-weight:750;letter-spacing:-.01em;color:#0b1623}
.ra-search-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra-later{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:12px;background:#fff;color:#0b1623;font-size:14px;font-weight:750;box-shadow:0 1px 3px rgba(11,22,35,.12)}
.ra-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
.ra-tab{display:grid;justify-items:center;gap:2px;padding:6px 0 4px;border:0;background:none;color:#4a5b6e;font-size:12px;font-weight:700}
.ra-tab svg{width:24px;height:24px}
.ra-tab.on{color:#0b1623}
.ra-tab.on svg{color:#f5a623}
.ra-tab:active{transform:scale(.94)}
.ra-dock button:focus-visible,.ra-dock .ra-search-main:focus-visible{outline:2px solid #1d6bff;outline-offset:2px;border-radius:12px}
@media(min-width:820px){.ra-dock{left:50%;right:auto;width:min(560px,92vw);margin-left:calc(min(560px,92vw) / -2)}}
@media(prefers-reduced-motion:reduce){.ra-dock{transition:opacity .15s}}
@media(prefers-reduced-transparency:reduce){.ra-dock,.ra-island{-webkit-backdrop-filter:none;backdrop-filter:none}.ra-dock{background:#fff}}
/* the locate button rides above the credits so the two never touch */
@media(max-width:819px){.locate-fab{bottom:calc(var(--sheet-h) + 46px)}}

/* ---- Driver pill: always there, tap for every detail. */
.dp{position:fixed;z-index:90;left:50%;top:calc(70px + var(--safe-top, env(safe-area-inset-top, 0px)));width:min(calc(100% - 24px),420px);transform:translateX(-50%);color:#fff}
.dp-bar{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px 6px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(9,20,33,.9);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 12px 32px rgba(5,14,24,.36),inset 0 1px 0 rgba(255,255,255,.1);color:#fff;text-align:left;font-weight:750;animation:dpIn .5s cubic-bezier(.3,1.6,.5,1) both}
.dp-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#8a97a8;box-shadow:0 0 0 3px rgba(138,151,168,.25)}
.dp.on .dp-dot{background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.28);animation:dpPulse 2s ease-in-out infinite}
.dp.trip .dp-dot{background:#ffc25f;box-shadow:0 0 0 3px rgba(255,194,95,.3)}
.dp-line{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.dp-line b{font-size:15px;color:#fff}.dp-line span{font-size:13px;color:#c9d6e5;overflow:hidden;text-overflow:ellipsis}
.dp-chev{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.dp.open .dp-chev{transform:rotate(180deg)}
.dp-card{margin-top:8px;padding:14px;border-radius:24px;border:1px solid rgba(255,255,255,.16);background:rgba(9,20,33,.94);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);box-shadow:0 18px 50px rgba(5,14,24,.45);display:none;max-height:calc(100dvh - 190px);overflow:auto}
.dp.open .dp-card{display:grid;gap:12px;animation:dpIn .35s cubic-bezier(.3,1.4,.5,1) both}
.dp-id{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dp-id strong{font-size:18px;letter-spacing:-.01em}.dp-id small{display:block;color:#c9d6e5;font-size:12.5px}
.dp-code{font-variant-numeric:tabular-nums;letter-spacing:.07em;font-weight:800;user-select:all;-webkit-user-select:all}
.dp-copy{flex:none;min-height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:750;font-size:13px}
.dp-copy.ok{background:#fff;color:#0b1a2b}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp-cell{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.dp-cell small{display:block;color:#c9d6e5;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.dp-cell b{display:block;margin-top:2px;font-size:16px;color:#fff;letter-spacing:-.01em}
.dp-cell.wide{grid-column:1/-1}
.dp-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dp-act{min-height:40px;border:0;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-weight:750;font-size:13px}
.dp-act:active{background:rgba(255,255,255,.2)}
.dp button:focus-visible{outline:2px solid #ffc25f;outline-offset:2px}
@keyframes dpIn{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dpPulse{50%{box-shadow:0 0 0 6px rgba(46,204,113,.08)}}
body.has-dvpill .driver-shell{padding-top:calc(146px + var(--safe-top, env(safe-area-inset-top, 0px)))!important}
body.trip-open .dp{top:calc(66px + var(--safe-top, env(safe-area-inset-top, 0px)))}
@media(prefers-reduced-motion:reduce){.dp-bar,.dp.open .dp-card{animation:none}.dp.on .dp-dot{animation:none}}
@media(prefers-reduced-transparency:reduce){.dp-bar,.dp-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0b1b30}}

/* ---- Driver trip panel folds down to a compact bar (title, ETA and the main button) so the map is the star. */
.tp-grab{display:grid;place-items:center;width:100%;height:20px;margin:-8px 0 -2px;padding:0;border:0;background:none;touch-action:manipulation}
.tp-grab::before{content:"";width:40px;height:5px;border-radius:999px;background:rgba(11,22,35,.22)}
.trip-mode.min .trip-panel>:is(#tripWho,#tripAddr,#tripStops,#tripNextOffer,#commsMount,#tripNav,#tripNote){display:none!important}
.trip-mode.min .trip-panel{gap:6px}