:root {
    --bg: #030816;
    --bg-2: #061124;
    --surface: rgba(8, 20, 42, 0.86);
    --surface-strong: rgba(12, 30, 60, 0.96);
    --surface-soft: rgba(17, 38, 72, 0.72);
    --glass: rgba(255, 255, 255, 0.075);
    --ink: #f3fbff;
    --ink-soft: #9eb7ce;
    --ink-faint: #66849d;
    --line: rgba(100, 218, 255, 0.22);
    --line-strong: rgba(113, 246, 255, 0.42);
    --cyan: #19d7ff;
    --cyan-soft: #72f8ff;
    --blue: #287cff;
    --mint: #46ffd6;
    --danger: #ff647c;
    --shadow: 0 36px 90px rgba(0, 0, 0, 0.42);
    --soft-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);
    --neon-shadow: 0 0 26px rgba(25, 215, 255, 0.26), 0 20px 54px rgba(40, 124, 255, 0.20);
    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 10%, rgba(40, 124, 255, 0.18), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(70, 255, 214, 0.16), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(25, 215, 255, 0.10), transparent 36%),
        linear-gradient(135deg, #030816 0%, #071426 46%, #02050d 100%);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(114, 248, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(114, 248, 255, 0.028) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, black, transparent 72%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.035), transparent);
    opacity: .55;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

.app-stage {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 34px 14px;
    position: relative;
    z-index: 1;
}

.phone-frame {
    width: min(430px, 100%);
    min-height: 850px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(113, 246, 255, 0.16);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 16% 0%, rgba(25, 215, 255, 0.18), transparent 34%),
        radial-gradient(circle at 95% 8%, rgba(70, 255, 214, 0.15), transparent 32%),
        linear-gradient(155deg, rgba(10, 24, 48, .94), rgba(4, 10, 24, .98));
    box-shadow: var(--shadow), 0 0 0 10px rgba(255,255,255,0.018);
    isolation: isolate;
}

.phone-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.12), transparent 18%, transparent 80%, rgba(114, 248, 255, .08)),
        radial-gradient(circle at 50% -8%, rgba(114, 248, 255, .16), transparent 26%);
    z-index: 40;
    mix-blend-mode: screen;
}

.clean-frame,
.map-frame,
.splash-frame {
    border-radius: var(--radius-xl);
}

.screen,
.splash-screen,
.map-screen {
    min-height: 850px;
    position: relative;
    overflow: hidden;
}

.screen {
    background:
        radial-gradient(circle at 15% 0%, rgba(25, 215, 255, 0.12), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(70, 255, 214, 0.10), transparent 25%),
        linear-gradient(165deg, rgba(8, 19, 41, .94), rgba(3, 8, 22, .98));
}

.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.055), transparent 34%);
    pointer-events: none;
}

h1,
h2,
p {
    margin: 0;
}

h1 {
    color: var(--ink);
    font-size: clamp(27px, 7vw, 34px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: .98;
}

h1 strong,
h2 strong {
    font-weight: 900;
}

.muted {
    color: var(--ink-soft);
}

.compact {
    width: min(275px, 100%);
    margin: 12px auto 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 1px solid rgba(113, 246, 255, .22);
    border-radius: 999px;
    background: rgba(25, 215, 255, .08);
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .01em;
    box-shadow: 0 0 22px rgba(25, 215, 255, .10);
}

.primary-btn {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--blue), var(--cyan) 52%, var(--mint));
    color: #02101e;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 18px 42px rgba(25, 215, 255, .26);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.20) inset, 0 24px 55px rgba(25, 215, 255, .33);
    filter: saturate(1.08);
}

.primary-btn:active {
    transform: translateY(1px) scale(.99);
}

.primary-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.form-message {
    min-height: 18px;
    margin: 10px 0;
    color: var(--cyan-soft);
    font-size: 12px;
    text-align: center;
}

.form-message.is-error {
    color: var(--danger);
}

/* Splash */
.splash-frame {
    background: #020714;
}

.splash-screen {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 34%, rgba(25, 215, 255, .24), transparent 25%),
        radial-gradient(circle at 52% 55%, rgba(40, 124, 255, .22), transparent 34%),
        #020714;
}

.splash-screen::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(114, 248, 255, .18);
    border-radius: 50%;
    box-shadow: inset 0 0 70px rgba(25, 215, 255, .08), 0 0 70px rgba(25, 215, 255, .10);
}

.splash-logo {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 20px;
    color: rgba(243, 251, 255, .62);
    font-size: 27px;
    font-weight: 350;
    letter-spacing: .12em;
}

.logo-mark.big {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 0 28px rgba(25, 215, 255, .44));
}

/* Welcome */
.screen-welcome {
    padding: calc(20px + env(safe-area-inset-top)) 32px 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-arc {
    position: absolute;
    top: -70px;
    left: 50%;
    width: 420px;
    height: 318px;
    transform: translateX(-50%);
    border: 1px solid rgba(114, 248, 255, .18);
    border-radius: 0 0 230px 230px;
    background:
        radial-gradient(circle at 50% 30%, rgba(114, 248, 255, .28), transparent 34%),
        linear-gradient(135deg, rgba(14, 52, 103, .94), rgba(5, 12, 28, .96));
    box-shadow: 0 24px 80px rgba(25, 215, 255, .16);
}

.hero-arc::after {
    content: "";
    position: absolute;
    inset: 38px 32px auto;
    height: 170px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    opacity: .65;
}

.hero-car {
    position: relative;
    z-index: 1;
    width: 190px;
    margin-top: 52px;
    filter: drop-shadow(0 0 28px rgba(25, 215, 255, .34)) drop-shadow(0 30px 34px rgba(0, 0, 0, .36));
}

.welcome-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 72px;
    text-align: center;
}

.welcome-copy h1 strong {
    background: linear-gradient(135deg, var(--cyan-soft), var(--cyan), var(--mint));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-copy p {
    margin: 14px auto 0;
    max-width: 310px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
}

.phone-form {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 34px;
}

.input-label {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.phone-input {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 24px rgba(25, 215, 255, .08) inset;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.phone-input select,
.phone-input input {
    border: 0;
    outline: 0;
    background: transparent;
    min-width: 0;
    height: 54px;
}

.phone-input select {
    padding: 0 14px 0 20px;
    color: var(--ink);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
    background-position: calc(100% - 18px) 24px, calc(100% - 13px) 24px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.phone-input option {
    background: #071426;
    color: var(--ink);
}

.phone-input input {
    padding-right: 20px;
    color: var(--ink);
    font-weight: 800;
}

.phone-input input::placeholder {
    color: rgba(158, 183, 206, .62);
    font-weight: 700;
}

/* Verification */
.screen-verify {
    padding: calc(62px + env(safe-area-inset-top)) 42px 28px;
    text-align: center;
}

.verify-icon {
    width: 134px;
    height: 134px;
    margin: 0 auto 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(114, 248, 255, .22);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 25%, rgba(114, 248, 255, .20), transparent 38%),
        rgba(7, 17, 36, .96);
    color: var(--cyan);
    box-shadow: var(--neon-shadow);
}

.verify-icon svg {
    width: 78px;
    filter: drop-shadow(0 0 18px rgba(25, 215, 255, .42));
}

.demo-code {
    margin-top: 10px;
    color: var(--cyan-soft);
    font-size: 12px;
}

.otp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 34px auto 10px;
}

.otp-input {
    width: 52px;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 50%;
    text-align: center;
    outline: none;
    font-weight: 900;
    font-size: 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 0 24px rgba(25, 215, 255, .05);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.otp-input:focus,
.otp-input:not(:placeholder-shown) {
    border-color: var(--cyan-soft);
    background: rgba(25, 215, 255, .10);
    box-shadow: 0 0 0 5px rgba(25, 215, 255, .12), 0 0 22px rgba(25, 215, 255, .20);
}

.countdown {
    min-height: 22px;
    color: var(--ink-faint);
    font-size: 12px;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 26px;
    margin-top: 20px;
}

.keypad button {
    height: 54px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--ink);
    font-size: 26px;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease, color .16s ease;
}

.keypad button:hover {
    background: rgba(25, 215, 255, .08);
    color: var(--cyan-soft);
}

.keypad button:active {
    transform: scale(.96);
}

.keypad .key-action {
    width: 38px;
    height: 38px;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #02101e;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 0 22px rgba(25, 215, 255, .24);
}

/* Shared topbar */
.topbar,
.places-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: calc(28px + env(safe-area-inset-top)) 32px 20px;
}

.back-link,
.floating-back {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .20), 0 0 18px rgba(25, 215, 255, .08) inset;
    backdrop-filter: blur(14px);
}

.topbar h1 {
    font-size: 28px;
}

/* Card */
.screen-card {
    padding-bottom: 42px;
}

.bank-card {
    position: relative;
    z-index: 1;
    width: calc(100% - 64px);
    height: 154px;
    margin: 8px auto 28px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(114, 248, 255, .30);
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 4%, rgba(114, 248, 255, .30), transparent 26%),
        radial-gradient(circle at 90% 100%, rgba(40, 124, 255, .28), transparent 34%),
        linear-gradient(135deg, rgba(7, 17, 36, .96), rgba(2, 7, 20, .98));
    color: #fff;
    box-shadow: 0 24px 58px rgba(0,0,0,.28), 0 0 42px rgba(25, 215, 255, .16);
    overflow: hidden;
}

.bank-card::after {
    content: "";
    position: absolute;
    inset: auto -18px -42px auto;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.bank-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-logo {
    width: 46px;
    filter: drop-shadow(0 0 18px rgba(25, 215, 255, .46));
}

.bank-card p {
    margin-bottom: 8px;
    font-weight: 900;
    font-size: 13px;
}

.bank-card span {
    letter-spacing: .05em;
    font-weight: 900;
    font-size: 13px;
}

.stack-form {
    position: relative;
    z-index: 1;
    width: calc(100% - 64px);
    margin: 0 auto;
}

.stack-form label {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.stack-form label span {
    color: var(--ink-soft);
    font-size: 12px;
}

.stack-form input,
.driver-card textarea,
.route-input input {
    color: var(--ink);
}

.stack-form input {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-bottom: 1px solid var(--line);
    outline: none;
    background: transparent;
    color: var(--ink);
    font-weight: 850;
}

.stack-form input:focus {
    border-bottom-color: var(--cyan-soft);
    box-shadow: 0 7px 12px -11px rgba(25, 215, 255, .8);
}

.two-cols {
    display: grid;
    grid-template-columns: 1fr 84px;
    gap: 28px;
}

/* OSM map */
.map-screen {
    background: #020714;
}

.osm-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 40%, rgba(25, 215, 255, .12), transparent 28%),
        #061124;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    font: inherit;
    background: #061124;
    color: var(--ink);
}

.map-screen .leaflet-tile {
    filter: grayscale(.25) invert(.96) hue-rotate(175deg) saturate(1.45) brightness(.72) contrast(.98);
}

.leaflet-control-attribution {
    padding: 3px 7px !important;
    border-radius: 999px 0 0 0;
    background: rgba(3, 8, 22, .72) !important;
    color: rgba(243, 251, 255, .72) !important;
    font-size: 10px !important;
    backdrop-filter: blur(8px);
}

.leaflet-control-attribution a {
    color: var(--cyan-soft) !important;
}

.map-ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 16%, rgba(25, 215, 255, .18), transparent 30%),
        linear-gradient(to top, rgba(2, 7, 20, .92) 0%, rgba(2, 7, 20, .38) 28%, rgba(2, 7, 20, .08) 52%, rgba(2, 7, 20, .22) 100%);
}

.full-map::after,
.booking-screen::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 210px;
    background: linear-gradient(to top, rgba(2, 7, 20, .98), rgba(2, 7, 20, 0));
    pointer-events: none;
}

.floating-menu,
.floating-back {
    position: absolute;
    z-index: 8;
    top: calc(28px + env(safe-area-inset-top));
    left: 28px;
    border: 1px solid var(--line);
    background: rgba(7, 17, 36, .72);
    box-shadow: var(--soft-shadow), 0 0 24px rgba(25, 215, 255, .10) inset;
    cursor: pointer;
    backdrop-filter: blur(18px);
}

.floating-menu {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ink);
    font-size: 20px;
}

.floating-back {
    font-size: 35px;
}

.map-status {
    position: absolute;
    z-index: 8;
    top: calc(30px + env(safe-area-inset-top));
    left: 84px;
    right: 28px;
    min-height: 42px;
    padding: 11px 14px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 999px;
    background: rgba(7, 17, 36, .66);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(18px);
}

.map-controls {
    position: absolute;
    z-index: 8;
    left: 30px;
    right: 30px;
    bottom: calc(122px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.map-controls a,
.map-controls button {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(7, 17, 36, .72);
    color: var(--ink);
    box-shadow: var(--soft-shadow), 0 0 24px rgba(25, 215, 255, .10) inset;
    pointer-events: auto;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(18px);
}

.map-controls button {
    color: var(--cyan-soft);
}

.where-card {
    position: absolute;
    z-index: 9;
    left: 30px;
    right: 30px;
    bottom: calc(34px + env(safe-area-inset-bottom));
    padding: 14px 18px 16px;
    display: grid;
    gap: 5px;
    border: 1px solid rgba(113, 246, 255, .22);
    border-radius: 24px;
    background: rgba(7, 17, 36, .82);
    box-shadow: 0 24px 58px rgba(0,0,0,.35), 0 0 34px rgba(25, 215, 255, .12) inset;
    backdrop-filter: blur(22px);
}

.where-card small {
    color: var(--ink-soft);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.where-card small::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.where-card button {
    border: 0;
    background: none;
    text-align: left;
    color: var(--ink);
    font-size: 21px;
    font-weight: 800;
    cursor: pointer;
}

.geo-dot,
.dest-dot,
.car-dot {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.geo-dot::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 9px rgba(25, 215, 255, .18), 0 0 30px rgba(25, 215, 255, .88);
}

.dest-dot::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 5px solid #061124;
    border-radius: 50% 50% 50% 0;
    background: var(--mint);
    transform: rotate(-45deg);
    box-shadow: 0 0 26px rgba(70, 255, 214, .62), 0 12px 24px rgba(0,0,0,.35);
}

.car-dot {
    position: relative;
    width: 28px;
    height: 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #02101e;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(25, 215, 255, .50);
}

.car-dot::before,
.car-dot::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #02101e;
}

.car-dot::before { left: 4px; }
.car-dot::after { right: 4px; }

.route-label {
    padding: 7px 10px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 999px;
    background: rgba(7, 17, 36, .76);
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 0 18px rgba(25, 215, 255, .10) inset;
    backdrop-filter: blur(12px);
}

.map-unavailable {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 34px;
    color: var(--ink-soft);
    text-align: center;
    background: radial-gradient(circle at center, rgba(25, 215, 255, .12), transparent 35%);
}

/* Booking */
.route-mini-card {
    position: absolute;
    z-index: 8;
    top: calc(84px + env(safe-area-inset-top));
    left: 28px;
    right: 28px;
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 7px 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(113, 246, 255, .22);
    border-radius: 22px;
    background: rgba(7, 17, 36, .76);
    box-shadow: var(--soft-shadow), 0 0 34px rgba(25, 215, 255, .10) inset;
    backdrop-filter: blur(20px);
}

.route-mini-card strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 16px currentColor;
}

.route-dot.from {
    color: var(--cyan);
    background: var(--cyan);
}

.route-dot.to {
    color: var(--mint);
    background: var(--mint);
}

.route-divider {
    width: 1px;
    height: 14px;
    margin-left: 5px;
    background: linear-gradient(var(--cyan), var(--mint));
    opacity: .6;
}

.ride-panel {
    position: absolute;
    z-index: 9;
    left: 28px;
    right: 28px;
    bottom: calc(26px + env(safe-area-inset-bottom));
    display: grid;
    gap: 15px;
}

.class-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ride-class {
    min-height: 94px;
    padding: 12px 8px;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(113, 246, 255, .16);
    border-radius: 18px;
    background: rgba(7, 17, 36, .72);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24), 0 0 22px rgba(25, 215, 255, .06) inset;
    cursor: pointer;
    backdrop-filter: blur(18px);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ride-class input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ride-class.selected {
    border-color: rgba(114, 248, 255, .68);
    background: rgba(25, 215, 255, .13);
    box-shadow: 0 18px 42px rgba(25, 215, 255, .18), 0 0 28px rgba(25, 215, 255, .18) inset;
}

.ride-class:hover {
    transform: translateY(-1px);
}

.class-icon {
    font-size: 25px;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(25, 215, 255, .45));
}

.ride-class strong {
    color: var(--ink);
    font-size: 12px;
}

.ride-class small {
    color: var(--ink-soft);
    font-size: 9px;
}

.payment-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    color: var(--ink);
    text-align: center;
}

.payment-line strong {
    font-size: 18px;
    font-style: italic;
}

.payment-line span {
    color: var(--ink-soft);
    font-size: 12px;
}

.payment-line b {
    margin-left: auto;
    color: var(--cyan-soft);
    font-size: 15px;
}

/* Places */
.screen-places {
    padding: 0 0 30px;
}

.places-header {
    align-items: flex-start;
}

.route-box {
    position: relative;
    z-index: 1;
    width: calc(100% - 56px);
    margin: 4px auto 0;
    padding: 12px;
    border: 1px solid rgba(113, 246, 255, .20);
    border-radius: 24px;
    background: rgba(7, 17, 36, .72);
    box-shadow: var(--soft-shadow), 0 0 32px rgba(25, 215, 255, .08) inset;
    backdrop-filter: blur(18px);
}

.route-input {
    position: relative;
    min-height: 54px;
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(113, 246, 255, .12);
}

.route-input:last-of-type {
    border-bottom: 0;
}

.route-input > span {
    width: 10px;
    height: 10px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.route-input.to > span {
    background: var(--mint);
    box-shadow: 0 0 14px var(--mint);
}

.route-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.geo-action {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 16px;
    background: rgba(25, 215, 255, .08);
    color: var(--cyan-soft);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.geo-action span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(25, 215, 255, .12);
}

.place-list {
    position: relative;
    z-index: 1;
    padding: 22px 28px 112px;
    display: grid;
    gap: 12px;
}

.place-item {
    width: 100%;
    min-height: 66px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 20px;
    background: rgba(255,255,255,.065);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.place-item:hover,
.place-item.is-selected {
    border-color: rgba(114, 248, 255, .54);
    background: rgba(25, 215, 255, .11);
    transform: translateY(-1px);
}

.place-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #02101e;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    font-weight: 950;
    box-shadow: 0 0 18px rgba(25, 215, 255, .26);
}

.place-icon.home {
    font-size: 22px;
}

.place-icon.history {
    font-size: 18px;
}

.place-item span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 850;
}

.place-item small {
    margin-left: 6px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

.bottom-btn {
    position: absolute;
    z-index: 4;
    left: 32px;
    right: 32px;
    bottom: calc(42px + env(safe-area-inset-bottom));
    width: auto;
}

/* Receipt */
.screen-receipt {
    text-align: center;
}

.receipt-topbar {
    justify-content: flex-start;
}

.receipt-topbar h1 {
    margin-left: 34px;
}

.fare-summary {
    position: relative;
    z-index: 1;
    width: calc(100% - 56px);
    margin: 10px auto 0;
    padding: 30px 24px 28px;
    display: grid;
    gap: 9px;
    border: 1px solid rgba(113, 246, 255, .20);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 215, 255, .20), transparent 42%),
        rgba(7, 17, 36, .72);
    box-shadow: var(--soft-shadow), 0 0 42px rgba(25, 215, 255, .10) inset;
    backdrop-filter: blur(18px);
}

.fare-summary small {
    color: var(--ink-soft);
    font-size: 12px;
}

.fare-summary strong {
    display: block;
    color: var(--ink);
    font-size: 58px;
    line-height: .96;
    letter-spacing: -0.07em;
    text-shadow: 0 0 24px rgba(25, 215, 255, .22);
}

.fare-summary span {
    color: var(--ink-soft);
    font-size: 12px;
}

.receipt-route {
    margin-top: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.receipt-route span {
    min-width: 0;
    max-width: 42%;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-route b {
    color: var(--cyan-soft);
}

.driver-card {
    position: relative;
    z-index: 1;
    padding: 42px 32px 34px;
    display: grid;
    justify-items: center;
    gap: 12px;
}

.driver-avatar {
    width: 90px;
    height: 90px;
    border: 3px solid rgba(114, 248, 255, .42);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 16px 34px rgba(0,0,0,.30), 0 0 28px rgba(25, 215, 255, .30);
}

.driver-card h2 {
    margin-top: 6px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.driver-card p {
    color: var(--ink-soft);
    font-size: 12px;
}

.stars {
    display: inline-flex;
    gap: 7px;
}

.stars button {
    border: 0;
    background: none;
    color: rgba(158, 183, 206, .35);
    font-size: 34px;
    cursor: pointer;
    text-shadow: 0 0 12px rgba(25, 215, 255, .10);
    transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

.stars button.is-on,
.stars button:hover {
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(25, 215, 255, .64);
}

.stars button:active {
    transform: scale(.92);
}

.driver-card textarea {
    width: 100%;
    height: 92px;
    margin: 18px 0 2px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    outline: none;
    resize: none;
    background: rgba(255,255,255,.065);
    color: var(--ink);
    box-shadow: 0 0 20px rgba(25, 215, 255, .05) inset;
}

.driver-card textarea::placeholder {
    color: rgba(158, 183, 206, .48);
}

/* Showcase */
.showcase-body .app-stage {
    display: block;
    padding: 44px;
}

.showcase-header {
    max-width: 1200px;
    margin: 0 auto 28px;
}

.showcase-header h1 {
    margin-bottom: 10px;
    font-weight: 950;
}

.showcase-header p {
    color: var(--ink-soft);
    line-height: 1.5;
}

.showcase-header code {
    color: var(--cyan-soft);
}

.showcase-grid {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 34px;
}

.showcase-item {
    display: grid;
    gap: 12px;
}

.showcase-item h2 {
    color: var(--ink);
    font-size: 16px;
}

.showcase-item iframe {
    width: 430px;
    max-width: 100%;
    height: 850px;
    border: 1px solid rgba(113, 246, 255, .16);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    background: #020714;
}

@media (max-width: 460px) {
    .app-stage {
        padding: 0;
    }

    .phone-frame {
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .clean-frame,
    .map-frame,
    .splash-frame {
        border-radius: 0;
    }

    .screen,
    .splash-screen,
    .map-screen {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-arc {
        width: 108vw;
    }

    .showcase-body .app-stage {
        padding: 24px 14px;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .app-stage {
        padding: 0;
    }

    body:not(.showcase-body) .phone-frame {
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body:not(.showcase-body) .clean-frame,
    body:not(.showcase-body) .map-frame,
    body:not(.showcase-body) .splash-frame {
        border-radius: 0;
    }

    body:not(.showcase-body) .screen,
    body:not(.showcase-body) .splash-screen,
    body:not(.showcase-body) .map-screen {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .screen-welcome {
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        grid-template-columns: minmax(260px, 1fr) minmax(320px, 440px);
        align-items: center;
        gap: 36px;
        padding: 56px clamp(44px, 7vw, 80px);
    }

    .screen-welcome .hero-arc {
        top: 50%;
        left: 26%;
        width: min(430px, 48vw);
        height: min(430px, 48vw);
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    .screen-welcome .hero-car {
        grid-row: 1 / span 2;
        width: clamp(220px, 30vw, 310px);
        margin: 0 auto;
    }

    .welcome-copy,
    .phone-form {
        grid-column: 2;
        margin-top: 0;
        text-align: left;
    }

    .welcome-copy p {
        margin-left: 0;
    }

    .screen-verify > *,
    .screen-card > *:not(.topbar),
    .screen-receipt > *:not(.topbar),
    .screen-places > *:not(.bottom-btn):not(.places-header) {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .bank-card,
    .stack-form,
    .fare-summary,
    .route-box {
        width: min(560px, calc(100% - 80px));
    }

    .place-list {
        width: min(620px, calc(100% - 80px));
        padding-left: 0;
        padding-right: 0;
    }

    .ride-panel,
    .where-card,
    .route-mini-card {
        left: 50%;
        right: auto;
        width: min(720px, calc(100% - 80px));
        transform: translateX(-50%);
    }

    .map-status {
        left: 90px;
        right: 44px;
    }

    .map-controls {
        left: clamp(44px, 9vw, 96px);
        right: clamp(44px, 9vw, 96px);
    }

    .bottom-btn {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 80px));
        transform: translateX(-50%);
    }
}

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

.roxio-marker,
.roxio-label-marker {
    border: 0 !important;
    background: transparent !important;
}

.leaflet-control-zoom {
    margin-left: 24px !important;
    margin-bottom: 190px !important;
    border: 1px solid rgba(113, 246, 255, .18) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 24px rgba(25, 215, 255, .08) inset;
    backdrop-filter: blur(14px);
}

.leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    background: rgba(7, 17, 36, .76) !important;
    color: var(--cyan-soft) !important;
    line-height: 36px !important;
}

.leaflet-control-zoom a + a {
    border-top: 1px solid rgba(113, 246, 255, .12) !important;
}

/* Route search overlay: GPS, map point selection and address search */
.map-search-panel {
    position: absolute;
    z-index: 9;
    top: calc(84px + env(safe-area-inset-top));
    left: 20px;
    right: 20px;
    padding: 14px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(10, 24, 48, .88), rgba(3, 8, 22, .82)),
        radial-gradient(circle at 100% 0%, rgba(25, 215, 255, .16), transparent 35%);
    box-shadow: 0 24px 58px rgba(0,0,0,.36), 0 0 36px rgba(25, 215, 255, .12) inset;
    backdrop-filter: blur(24px);
}

.map-search-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.map-search-head .eyebrow {
    min-height: 24px;
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 9px;
}

.map-search-head strong {
    display: block;
    color: var(--ink);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.025em;
}

.map-search-head small {
    max-width: 155px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    text-align: right;
}

.map-route-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
}

.map-route-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.map-route-tabs button.is-active {
    background: linear-gradient(135deg, rgba(40, 124, 255, .96), rgba(25, 215, 255, .94), rgba(70, 255, 214, .92));
    color: #02101e;
    box-shadow: 0 0 26px rgba(25, 215, 255, .28);
}

.map-search-field {
    min-height: 48px;
    display: grid;
    grid-template-columns: 18px 1fr 58px;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 0 8px 0 12px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.map-search-field.is-active {
    border-color: rgba(114, 248, 255, .56);
    background: rgba(25, 215, 255, .09);
    box-shadow: 0 0 22px rgba(25, 215, 255, .12) inset;
}

.field-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.field-dot.pickup {
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.field-dot.destination {
    background: var(--mint);
    box-shadow: 0 0 14px var(--mint);
}

.map-search-field input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.map-search-field input::placeholder,
.route-input input::placeholder {
    color: rgba(158, 183, 206, .68);
}

.map-search-field button,
.inline-search-btn {
    min-height: 32px;
    border: 1px solid rgba(113, 246, 255, .20);
    border-radius: 999px;
    background: rgba(25, 215, 255, .10);
    color: var(--cyan-soft);
    font-size: 10px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(25, 215, 255, .08) inset;
}

.map-search-field button:disabled,
.inline-search-btn:disabled,
.geo-action:disabled,
.map-controls button:disabled,
.where-card button:disabled {
    opacity: .7;
    cursor: progress;
}

.search-results {
    display: grid;
    gap: 8px;
    max-height: 172px;
    margin-top: 10px;
    overflow: auto;
    overscroll-behavior: contain;
}

.search-result-item,
.search-empty {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 16px;
    background: rgba(3, 8, 22, .72);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.search-result-item {
    cursor: pointer;
}

.search-result-item:hover {
    border-color: rgba(114, 248, 255, .50);
    background: rgba(25, 215, 255, .10);
}

.search-result-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 950;
}

.search-result-item small,
.search-empty {
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.35;
}

.search-result-item small {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.map-search-note {
    margin: 10px 3px 0;
    color: var(--ink-faint);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.where-card button[data-save-map-route] {
    width: 100%;
    min-height: 38px;
    margin-top: 3px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--cyan) 55%, var(--mint));
    color: #02101e;
    text-align: center;
    font-size: 13px;
    font-weight: 950;
    box-shadow: var(--neon-shadow);
}

.route-input.has-action {
    grid-template-columns: 28px minmax(0, 1fr) 62px;
}

.route-input.has-action:last-of-type {
    border-bottom: 1px solid rgba(113, 246, 255, .12);
}

.route-results {
    max-height: 210px;
    margin: 10px 0 6px;
}

.route-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.leaflet-marker-draggable .geo-dot::before,
.leaflet-marker-draggable .dest-dot::before {
    cursor: grab;
}

.leaflet-marker-draggable:active .geo-dot::before,
.leaflet-marker-draggable:active .dest-dot::before {
    cursor: grabbing;
}

@media (max-width: 380px) {
    .map-search-panel {
        top: calc(76px + env(safe-area-inset-top));
        left: 14px;
        right: 14px;
        padding: 12px;
        border-radius: 22px;
    }

    .map-search-head {
        margin-bottom: 8px;
    }

    .map-search-head small {
        display: none;
    }

    .map-search-field {
        grid-template-columns: 16px 1fr 52px;
        min-height: 44px;
    }

    .map-search-note {
        display: none;
    }

    .search-results {
        max-height: 118px;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .map-search-panel {
        left: clamp(44px, 9vw, 96px);
        right: auto;
        width: min(520px, calc(100% - 88px));
        top: calc(90px + env(safe-area-inset-top));
    }

    body:not(.showcase-body) .map-search-head small {
        max-width: 190px;
    }

    body:not(.showcase-body) .map-controls {
        bottom: calc(130px + env(safe-area-inset-bottom));
    }
}

.where-card button.needs-destination {
    border: 1px solid rgba(113, 246, 255, .22);
    background: rgba(25, 215, 255, .10);
    color: var(--cyan-soft);
    box-shadow: 0 0 24px rgba(25, 215, 255, .08) inset;
}

.fare-summary strong {
    font-size: clamp(38px, 11vw, 58px);
}

/* Real routing and live navigation */
.route-summary-line,
.where-route-summary,
.route-metrics,
.route-disclaimer {
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 900;
    font-style: normal;
    line-height: 1.35;
    text-shadow: 0 0 18px rgba(25, 215, 255, .22);
}

.route-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 20px;
    margin-top: 2px;
}

.route-summary-line.is-fallback,
.where-route-summary.is-fallback,
.route-metrics.is-fallback,
.route-disclaimer.is-fallback {
    color: #ffd479;
    text-shadow: 0 0 16px rgba(255, 212, 121, .18);
}

.route-dot.nav {
    color: var(--cyan-soft);
    background: var(--cyan-soft);
}

.route-metrics {
    color: var(--cyan-soft) !important;
}

.navigation-screen::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 340px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(2, 7, 20, 1), rgba(2, 7, 20, .66) 55%, rgba(2, 7, 20, 0));
}

.nav-recenter {
    position: absolute;
    z-index: 8;
    top: calc(28px + env(safe-area-inset-top));
    right: 28px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(7, 17, 36, .72);
    color: var(--cyan-soft);
    box-shadow: var(--soft-shadow), 0 0 24px rgba(25, 215, 255, .10) inset;
    cursor: pointer;
    backdrop-filter: blur(18px);
}

.nav-route-card {
    position: absolute;
    z-index: 8;
    top: calc(84px + env(safe-area-inset-top));
    left: 28px;
    right: 28px;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 7px 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(113, 246, 255, .22);
    border-radius: 22px;
    background: rgba(7, 17, 36, .72);
    box-shadow: var(--soft-shadow), 0 0 34px rgba(25, 215, 255, .10) inset;
    backdrop-filter: blur(20px);
}

.nav-route-card strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-panel {
    position: absolute;
    z-index: 9;
    left: 22px;
    right: 22px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 215, 255, .14), transparent 34%),
        linear-gradient(145deg, rgba(10, 24, 48, .91), rgba(3, 8, 22, .90));
    box-shadow: 0 28px 68px rgba(0,0,0,.44), 0 0 42px rgba(25, 215, 255, .13) inset;
    backdrop-filter: blur(24px);
}

.nav-driver-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 12px;
}

.nav-driver-avatar {
    width: 54px;
    height: 54px;
    border: 2px solid rgba(113, 246, 255, .42);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 24px rgba(25, 215, 255, .18);
}

.nav-driver-row .eyebrow {
    min-height: 22px;
    margin: 0 0 5px;
    padding: 0 9px;
    font-size: 9px;
}

.nav-driver-row h2 {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    letter-spacing: -.03em;
}

.nav-driver-row small,
.nav-next-turn span,
.nav-metrics small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
}

.nav-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.nav-metrics div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
}

.nav-metrics strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-next-turn {
    padding: 12px 14px;
    border: 1px solid rgba(113, 246, 255, .16);
    border-radius: 18px;
    background: rgba(3, 8, 22, .58);
    box-shadow: 0 0 26px rgba(25, 215, 255, .08) inset;
}

.nav-next-turn strong {
    display: block;
    margin-top: 4px;
    color: var(--cyan-soft);
    font-size: 15px;
    line-height: 1.25;
}

.nav-next-turn small {
    display: block;
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 850;
}

.nav-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.nav-progress-track span {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--blue), var(--cyan), var(--mint));
    box-shadow: 0 0 20px rgba(25, 215, 255, .42);
    transition: width .28s ease;
}

.nav-steps {
    max-height: 132px;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    overflow: auto;
    list-style: none;
    overscroll-behavior: contain;
}

.nav-steps li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(113, 246, 255, .10);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
}

.nav-steps li.is-current {
    border-color: rgba(114, 248, 255, .46);
    background: rgba(25, 215, 255, .10);
}

.nav-steps li span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(25, 215, 255, .11);
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 950;
}

.nav-steps li strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-steps li small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.nav-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 98px;
    gap: 10px;
}

.ghost-btn {
    min-height: 48px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 999px;
    background: rgba(25, 215, 255, .10);
    color: var(--cyan-soft);
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(25, 215, 255, .08) inset;
}

.ghost-btn:disabled,
.nav-actions .primary-btn:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.nav-complete {
    min-height: 42px;
}

.route-disclaimer {
    margin: 0;
    text-align: center;
}

.nav-car-marker .car-dot {
    width: 34px;
    height: 24px;
}

@media (max-width: 380px) {
    .nav-route-card {
        display: none;
    }

    .navigation-panel {
        left: 12px;
        right: 12px;
        padding: 13px;
        gap: 9px;
    }

    .nav-steps {
        max-height: 92px;
    }

    .nav-metrics strong {
        font-size: 13px;
    }

    .nav-actions {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .navigation-panel,
    body:not(.showcase-body) .nav-route-card {
        left: 50%;
        right: auto;
        width: min(720px, calc(100% - 88px));
        transform: translateX(-50%);
    }

    body:not(.showcase-body) .navigation-panel {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

.nav-dot {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.82);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--mint), var(--cyan) 48%, var(--blue));
    color: #031023;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 0 0 10px rgba(25, 215, 255, .14), 0 0 34px rgba(25, 215, 255, .72);
    transform-origin: 50% 50%;
    transition: transform .22s ease, box-shadow .22s ease;
}

.nav-marker {
    z-index: 700 !important;
}

.route-progress-line {
    filter: drop-shadow(0 0 12px rgba(255,255,255,.42));
}

/* Road routing preview and turn-by-turn details */
.route-glow-line {
    filter: drop-shadow(0 0 20px rgba(25, 215, 255, .55));
}

.route-main-line {
    stroke-dasharray: 14 18;
    animation: roxioRouteFlow 1.1s linear infinite;
    filter: drop-shadow(0 0 14px rgba(70, 255, 214, .55));
}

.route-progress-line {
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, .55)) drop-shadow(0 0 22px rgba(25, 215, 255, .45));
}

@keyframes roxioRouteFlow {
    to { stroke-dashoffset: -64; }
}

.nav-dot {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--cyan), var(--mint));
    color: #02101e;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 0 0 8px rgba(25, 215, 255, .14), 0 0 32px rgba(25, 215, 255, .78);
    transform-origin: center;
    transition: transform .18s linear;
}

.route-details-card {
    padding: 13px;
    border: 1px solid rgba(113, 246, 255, .20);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 215, 255, .14), transparent 34%),
        rgba(7, 17, 36, .76);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .30), 0 0 30px rgba(25, 215, 255, .10) inset;
    backdrop-filter: blur(20px);
}

.route-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.route-details-grid span {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(113, 246, 255, .12);
    border-radius: 15px;
    background: rgba(255, 255, 255, .05);
}

.route-details-grid small,
.turn-list-wrap summary,
.turn-list li small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 850;
}

.route-details-grid strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turn-list-wrap {
    margin-top: 10px;
}

.turn-list-wrap summary {
    cursor: pointer;
    color: var(--cyan-soft);
    text-shadow: 0 0 16px rgba(25, 215, 255, .20);
}

.turn-list,
.turn-list-wrap .nav-steps {
    max-height: 112px;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
    overflow: auto;
    list-style: none;
    overscroll-behavior: contain;
}

.turn-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(113, 246, 255, .10);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
}

.turn-list li.is-current {
    border-color: rgba(114, 248, 255, .46);
    background: rgba(25, 215, 255, .10);
}

.turn-list li span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(25, 215, 255, .11);
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 950;
}

.turn-list li strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .route-details-card {
        padding: 10px;
        border-radius: 18px;
    }

    .route-details-grid {
        grid-template-columns: 1fr 1fr;
    }

    .route-details-grid span:last-child {
        grid-column: 1 / -1;
    }

    .turn-list {
        max-height: 78px;
    }
}

.navigation-panel .nav-actions {
    grid-template-columns: minmax(108px, 1fr) 96px 96px;
}

@media (max-width: 380px) {
    .navigation-panel .nav-actions {
        grid-template-columns: 1fr 1fr;
    }

    .navigation-panel .nav-actions .primary-btn {
        grid-column: 1 / -1;
    }
}

/* Uber-style dispatch / driver pickup flow */
.request-screen::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 310px;
    background: linear-gradient(to top, rgba(2, 7, 20, .99), rgba(2, 7, 20, .08));
    pointer-events: none;
}

.dispatch-top-card {
    position: absolute;
    z-index: 8;
    top: calc(86px + env(safe-area-inset-top));
    left: 28px;
    right: 28px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(113, 246, 255, .26);
    border-radius: 24px;
    background:
        radial-gradient(circle at 0% 0%, rgba(25, 215, 255, .18), transparent 45%),
        rgba(5, 15, 33, .80);
    box-shadow: var(--soft-shadow), 0 0 34px rgba(25, 215, 255, .12) inset;
    backdrop-filter: blur(22px);
}

.dispatch-top-card small,
.driver-pickup-card p,
.dispatch-metrics small,
.dispatch-route-card strong {
    min-width: 0;
}

.dispatch-top-card small {
    display: block;
    margin-bottom: 4px;
    color: var(--cyan-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dispatch-top-card strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-top-card b {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(25, 215, 255, .12);
    color: var(--cyan-soft);
    font-size: 12px;
    box-shadow: 0 0 18px rgba(25, 215, 255, .15) inset;
}

.pulse-ring {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(25, 215, 255, .15);
    box-shadow: 0 0 22px rgba(25, 215, 255, .36);
}

.pulse-ring::before,
.pulse-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--cyan-soft);
    box-shadow: 0 0 18px rgba(114, 248, 255, .85);
}

.pulse-ring::after {
    inset: 0;
    border: 1px solid rgba(114, 248, 255, .44);
    background: transparent;
    animation: dispatchPulse 1.55s ease-out infinite;
}

@keyframes dispatchPulse {
    0% { transform: scale(.72); opacity: .95; }
    100% { transform: scale(1.48); opacity: 0; }
}

.dispatch-panel {
    position: absolute;
    z-index: 9;
    left: 20px;
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: grid;
    gap: 11px;
    padding: 15px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 215, 255, .15), transparent 38%),
        linear-gradient(145deg, rgba(10, 24, 48, .93), rgba(3, 8, 22, .92));
    box-shadow: 0 30px 72px rgba(0, 0, 0, .48), 0 0 45px rgba(25, 215, 255, .12) inset;
    backdrop-filter: blur(25px);
}

.dispatch-loader {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 12px;
}

.dispatch-loader > span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(113, 246, 255, .17);
    border-top-color: var(--cyan-soft);
    box-shadow: 0 0 18px rgba(25, 215, 255, .22);
    animation: dispatchSpin 1s linear infinite;
}

.dispatch-panel[data-status="driver_arrived"] .dispatch-loader > span,
.dispatch-panel[data-status="in_progress"] .dispatch-loader > span {
    animation: none;
    border-color: rgba(70, 255, 214, .34);
    background: radial-gradient(circle, rgba(70, 255, 214, .48), rgba(70, 255, 214, .05));
}

@keyframes dispatchSpin {
    to { transform: rotate(360deg); }
}

.dispatch-loader strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -.02em;
}

.dispatch-loader small {
    display: block;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
}

.driver-pickup-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .055);
}

.driver-pickup-card h2 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.driver-pickup-card p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-plate {
    min-width: 74px;
    padding: 9px 10px;
    border: 1px solid rgba(114, 248, 255, .22);
    border-radius: 16px;
    background: rgba(3, 8, 22, .46);
    text-align: center;
}

.car-plate strong,
.car-plate small {
    display: block;
}

.car-plate strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .03em;
}

.car-plate small {
    max-width: 92px;
    margin-top: 2px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-route-card {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(113, 246, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
}

.dispatch-route-card div {
    min-width: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.dispatch-route-card strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.dispatch-stages span {
    position: relative;
    min-width: 0;
    padding: 8px 3px;
    border: 1px solid rgba(113, 246, 255, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--ink-faint);
    font-size: 9px;
    font-weight: 950;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dispatch-stages span.is-active {
    border-color: rgba(114, 248, 255, .58);
    background: rgba(25, 215, 255, .16);
    color: var(--cyan-soft);
    box-shadow: 0 0 22px rgba(25, 215, 255, .13) inset;
}

.dispatch-stages span.is-done {
    border-color: rgba(70, 255, 214, .26);
    background: rgba(70, 255, 214, .09);
    color: var(--mint);
}

.dispatch-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dispatch-metrics div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(113, 246, 255, .13);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
}

.dispatch-metrics small,
.dispatch-metrics strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-metrics small {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 850;
}

.dispatch-metrics strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
}

.driver-actions,
.dispatch-actions {
    display: grid;
    gap: 9px;
}

.driver-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dispatch-actions {
    grid-template-columns: 108px minmax(0, 1fr);
}

.driver-actions .ghost-btn,
.dispatch-actions .ghost-btn,
.dispatch-actions .primary-btn {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}

.ghost-btn.danger {
    border-color: rgba(255, 100, 124, .34);
    color: #ff9cac;
}

.dispatch-pickup-line {
    filter: drop-shadow(0 0 10px rgba(25, 215, 255, .58));
}

.dispatch-trip-line {
    filter: drop-shadow(0 0 12px rgba(70, 255, 214, .50));
}

.driver-car-marker {
    display: grid;
    place-items: center;
}

.driver-car-dot {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(114, 248, 255, .82);
    border-radius: 50%;
    background: rgba(3, 8, 22, .88);
    box-shadow: 0 0 28px rgba(25, 215, 255, .45), 0 0 18px rgba(70, 255, 214, .22) inset;
    font-size: 20px;
}

@media (max-width: 380px) {
    .dispatch-panel {
        left: 14px;
        right: 14px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 8px;
        padding: 12px;
        border-radius: 24px;
    }

    .dispatch-top-card {
        left: 18px;
        right: 18px;
        top: calc(78px + env(safe-area-inset-top));
        grid-template-columns: 34px minmax(0, 1fr) auto;
        padding: 11px 12px;
    }

    .pulse-ring,
    .dispatch-loader > span {
        width: 34px;
        height: 34px;
    }

    .driver-pickup-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .driver-pickup-card .car-plate {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        text-align: left;
    }

    .dispatch-stages span {
        font-size: 8px;
    }

    .dispatch-actions {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 760px) and (max-width: 1180px) {
    body:not(.showcase-body) .request-screen .dispatch-panel,
    body:not(.showcase-body) .request-screen .dispatch-top-card {
        width: min(520px, calc(100% - 44px));
        left: 22px;
        right: auto;
    }

    body:not(.showcase-body) .request-screen .dispatch-top-card {
        top: calc(96px + env(safe-area-inset-top));
    }
}

.active-ride-chip {
    position: absolute;
    z-index: 8;
    top: calc(86px + env(safe-area-inset-top));
    left: 28px;
    right: 28px;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-areas: "icon title" "icon text";
    align-items: center;
    gap: 2px 10px;
    padding: 11px 14px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 22px;
    background: rgba(5, 15, 33, .82);
    box-shadow: var(--soft-shadow), 0 0 30px rgba(25, 215, 255, .12) inset;
    backdrop-filter: blur(20px);
}

.active-ride-chip span {
    grid-area: icon;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(25, 215, 255, .13);
    box-shadow: 0 0 20px rgba(25, 215, 255, .2) inset;
}

.active-ride-chip strong {
    grid-area: title;
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.active-ride-chip small {
    grid-area: text;
    color: var(--cyan-soft);
    font-size: 10px;
    font-weight: 850;
}

.active-ride-chip {
    top: calc(338px + env(safe-area-inset-top));
}

@media (max-width: 380px) {
    .active-ride-chip {
        top: calc(288px + env(safe-area-inset-top));
        left: 14px;
        right: 14px;
    }
}

/* Simplified Uber-style order flow */
.simple-booking-screen .osm-map {
    inset: 0;
}

.simple-booking-screen .map-status.simple-map-status {
    left: 76px;
    right: 76px;
    top: calc(26px + env(safe-area-inset-top));
    z-index: 11;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.18;
    color: var(--cyan-soft);
    background: rgba(3, 10, 24, .78);
    border-color: rgba(113, 246, 255, .24);
    box-shadow: 0 0 28px rgba(25, 215, 255, .10) inset, 0 16px 38px rgba(0,0,0,.28);
}

.simple-booking-screen .floating-menu {
    top: calc(26px + env(safe-area-inset-top));
}

.simple-locate {
    position: absolute;
    z-index: 13;
    right: 22px;
    top: calc(26px + env(safe-area-inset-top));
    width: 48px;
    height: 48px;
    border: 1px solid rgba(113, 246, 255, .26);
    border-radius: 50%;
    background: rgba(4, 12, 28, .78);
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .03em;
    box-shadow: 0 0 28px rgba(25, 215, 255, .16) inset, 0 16px 38px rgba(0,0,0,.30);
    backdrop-filter: blur(20px);
    cursor: pointer;
}

.simple-order-sheet {
    position: absolute;
    z-index: 12;
    left: 18px;
    right: 18px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-height: min(620px, calc(100dvh - 118px));
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(113, 246, 255, .28);
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 0%, rgba(25, 215, 255, .20), transparent 30%),
        radial-gradient(circle at 100% 12%, rgba(70, 255, 214, .15), transparent 30%),
        linear-gradient(155deg, rgba(7, 17, 36, .92), rgba(3, 8, 22, .94));
    box-shadow: 0 28px 70px rgba(0,0,0,.46), 0 0 38px rgba(25, 215, 255, .13) inset;
    backdrop-filter: blur(28px);
}

.simple-route-form,
.simple-ride-form {
    display: grid;
    gap: 12px;
}

.simple-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.simple-order-head .eyebrow {
    min-height: 24px;
    margin: 0 0 6px;
    padding-inline: 10px;
    font-size: 9px;
}

.simple-order-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -.045em;
}

.simple-order-head small {
    max-width: 150px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

.simple-location-box {
    display: grid;
    gap: 8px;
}

.simple-location-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border: 1px solid rgba(113, 246, 255, .16);
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.simple-location-row.is-active {
    border-color: rgba(114, 248, 255, .56);
    background: rgba(25, 215, 255, .10);
    box-shadow: 0 0 24px rgba(25, 215, 255, .13) inset;
}

.simple-location-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.simple-location-copy small {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.simple-location-copy input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.simple-location-copy input::placeholder {
    color: rgba(158, 183, 206, .72);
}

.simple-location-row button,
.simple-pick-tabs button,
.quick-destinations button {
    border: 1px solid rgba(113, 246, 255, .22);
    background: rgba(25, 215, 255, .10);
    color: var(--cyan-soft);
    border-radius: 999px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(25, 215, 255, .08) inset;
}

.simple-location-row button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 10px;
}

.simple-pick-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
}

.simple-pick-tabs button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--ink-soft);
    background: transparent;
}

.simple-pick-tabs button.is-active {
    color: #02101e;
    background: linear-gradient(135deg, var(--blue), var(--cyan), var(--mint));
    box-shadow: 0 0 26px rgba(25, 215, 255, .25);
}

.simple-results {
    max-height: 160px;
}

.quick-destinations {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.quick-destinations::-webkit-scrollbar {
    display: none;
}

.quick-destinations button {
    flex: 0 0 auto;
    min-height: 38px;
    max-width: 180px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: var(--ink);
    background: rgba(255,255,255,.045);
}

.quick-destinations button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.simple-ride-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(113, 246, 255, .14);
}

.simple-route-ready {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 20px;
    background: rgba(25, 215, 255, .08);
    box-shadow: 0 0 24px rgba(25, 215, 255, .10) inset;
}

.simple-route-ready[hidden] {
    display: none;
}

.simple-route-ready small {
    display: block;
    max-width: 100%;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 850;
}

.simple-route-ready strong {
    display: flex;
    gap: 12px;
    margin-top: 3px;
    color: var(--cyan-soft);
    font-size: 13px;
    font-weight: 950;
}

.simple-route-ready > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #02101e;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    box-shadow: 0 0 22px rgba(25, 215, 255, .24);
}

.simple-fare-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.simple-fare-title strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.simple-fare-title small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.simple-class-list {
    gap: 8px;
}

.simple-class-list .ride-class {
    min-height: 76px;
    padding: 9px 6px;
    border-radius: 17px;
}

.simple-class-list .class-icon {
    font-size: 22px;
}

.simple-class-list .ride-class strong {
    font-size: 11px;
}

.simple-class-list .ride-class small {
    font-size: 9px;
}

.simple-payment-line {
    min-height: 42px;
    margin-top: 0;
    padding: 0 3px;
}

.simple-payment-line span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 850;
}

.simple-payment-line b {
    color: var(--cyan-soft);
    text-shadow: 0 0 18px rgba(25, 215, 255, .24);
}

.simple-ride-form .primary-btn.needs-destination {
    opacity: .78;
    background: rgba(25, 215, 255, .12);
    color: var(--cyan-soft);
    border: 1px solid rgba(113, 246, 255, .22);
    box-shadow: 0 0 24px rgba(25, 215, 255, .08) inset;
}

.simple-order-sheet .form-message {
    min-height: 17px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.simple-order-sheet .form-message.is-error {
    color: var(--danger);
}

@media (max-width: 380px) {
    .simple-order-sheet {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        max-height: calc(100dvh - 94px);
        padding: 12px;
        border-radius: 24px;
    }

    .simple-order-head small,
    .simple-fare-title small {
        display: none;
    }

    .simple-location-row {
        min-height: 52px;
        grid-template-columns: 12px minmax(0, 1fr) auto;
        padding-left: 12px;
    }

    .simple-location-copy input {
        font-size: 12px;
    }

    .simple-pick-tabs button {
        min-height: 34px;
        font-size: 10px;
    }

    .simple-class-list .ride-class {
        min-height: 68px;
    }

    .simple-booking-screen .map-status.simple-map-status {
        left: 66px;
        right: 66px;
        font-size: 10px;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .simple-order-sheet {
        left: clamp(36px, 7vw, 80px);
        right: auto;
        bottom: calc(34px + env(safe-area-inset-bottom));
        width: min(500px, 45vw);
        max-height: calc(100dvh - 142px);
    }

    body:not(.showcase-body) .simple-booking-screen .map-status.simple-map-status {
        left: clamp(36px, 7vw, 80px);
        right: auto;
        width: min(500px, 45vw);
    }

    body:not(.showcase-body) .simple-locate {
        right: clamp(36px, 7vw, 80px);
    }
}

.simple-order-sheet:not(.has-route) .simple-route-ready,
.simple-order-sheet:not(.has-route) .simple-fare-title,
.simple-order-sheet:not(.has-route) .simple-class-list,
.simple-order-sheet:not(.has-route) .simple-payment-line {
    display: none;
}

/* Compact location-picking state: when the user taps Pickup or Destination,
   keep only the point selection controls visible. The sheet becomes about 60%
   smaller than the full booking panel and expands again after a point is chosen. */
.simple-order-sheet {
    transition: max-height .24s ease, padding .24s ease, border-radius .24s ease, box-shadow .24s ease;
}

.simple-order-sheet.is-picking-location {
    max-height: min(285px, calc(100dvh - 118px));
    padding: 12px;
    overflow-y: hidden;
}

.simple-order-sheet.is-picking-location.has-search-results {
    max-height: min(455px, calc(100dvh - 118px));
    overflow-y: auto;
}

.simple-order-sheet.is-picking-location .simple-route-form {
    gap: 10px;
}

.simple-order-sheet.is-picking-location .simple-order-head {
    gap: 8px;
}

.simple-order-sheet.is-picking-location .simple-order-head .eyebrow {
    min-height: 22px;
    margin-bottom: 4px;
    padding-inline: 9px;
    font-size: 8.5px;
}

.simple-order-sheet.is-picking-location .simple-order-head h2 {
    font-size: 20px;
}

.simple-order-sheet.is-picking-location .simple-order-head small {
    max-width: 185px;
    color: var(--cyan-soft);
    font-size: 9.5px;
    line-height: 1.2;
}

.simple-order-sheet.is-picking-location .simple-location-box {
    gap: 8px;
}

.simple-order-sheet.is-picking-location .simple-location-row {
    min-height: 50px;
    padding: 7px 8px 7px 13px;
    border-radius: 18px;
}

.simple-order-sheet.is-picking-location .simple-location-copy small {
    font-size: 8.5px;
}

.simple-order-sheet.is-picking-location .simple-location-copy input {
    font-size: 13px;
}

.simple-order-sheet.is-picking-location .simple-location-row button {
    min-height: 31px;
    padding: 0 11px;
    font-size: 9.5px;
}

.simple-order-sheet.is-picking-location .simple-pick-tabs {
    gap: 6px;
    padding: 4px;
}

.simple-order-sheet.is-picking-location .simple-pick-tabs button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
}

.simple-order-sheet.is-picking-location .quick-destinations,
.simple-order-sheet.is-picking-location .simple-ride-form {
    display: none !important;
}

.simple-order-sheet.is-picking-location .simple-results[hidden] {
    display: none !important;
}

.simple-order-sheet.is-picking-location .simple-results:not([hidden]) {
    max-height: 170px;
    overflow-y: auto;
}

@media (max-width: 380px) {
    .simple-order-sheet.is-picking-location {
        max-height: min(270px, calc(100dvh - 94px));
        padding: 11px;
    }

    .simple-order-sheet.is-picking-location.has-search-results {
        max-height: min(430px, calc(100dvh - 94px));
    }

    .simple-order-sheet.is-picking-location .simple-order-head small {
        max-width: 150px;
        font-size: 9px;
    }

    .simple-order-sheet.is-picking-location .simple-location-row {
        min-height: 48px;
    }

    .simple-order-sheet.is-picking-location .simple-pick-tabs button {
        min-height: 31px;
        font-size: 9.5px;
    }
}

/* 40% location picker panel
   When the user is choosing Pickup or Destination on the map, the order sheet
   becomes a compact bottom panel that uses only the lower 40% of the screen. */
.simple-order-sheet.is-picking-location {
    height: 40vh !important;
    height: 40svh !important;
    height: 40dvh !important;
    max-height: 40vh !important;
    max-height: 40svh !important;
    max-height: 40dvh !important;
    min-height: 0 !important;
    padding: clamp(10px, 1.45dvh, 14px) !important;
    overflow: hidden !important;
}

.simple-order-sheet.is-picking-location.has-search-results {
    height: 40vh !important;
    height: 40svh !important;
    height: 40dvh !important;
    max-height: 40vh !important;
    max-height: 40svh !important;
    max-height: 40dvh !important;
    overflow: hidden !important;
}

.simple-order-sheet.is-picking-location .simple-route-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 1dvh, 10px);
    min-height: 0;
}

.simple-order-sheet.is-picking-location .simple-order-head {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 8px;
}

.simple-order-sheet.is-picking-location .simple-order-head .eyebrow {
    min-height: 20px;
    margin-bottom: 3px;
    padding: 0 9px;
    font-size: clamp(7px, 1.05dvh, 8.5px);
}

.simple-order-sheet.is-picking-location .simple-order-head h2 {
    font-size: clamp(17px, 2.35dvh, 20px);
}

.simple-order-sheet.is-picking-location .simple-order-head small {
    max-width: 46%;
    color: var(--cyan-soft);
    font-size: clamp(8px, 1.12dvh, 9.5px);
    line-height: 1.16;
}

.simple-order-sheet.is-picking-location .simple-location-box {
    flex: 0 0 auto;
    gap: clamp(6px, .85dvh, 8px);
}

.simple-order-sheet.is-picking-location .simple-location-row {
    min-height: clamp(45px, 6.15dvh, 54px);
    padding: clamp(6px, .85dvh, 8px) 8px clamp(6px, .85dvh, 8px) 13px;
    border-radius: 18px;
}

.simple-order-sheet.is-picking-location .simple-location-copy small {
    font-size: clamp(7.5px, .95dvh, 8.5px);
}

.simple-order-sheet.is-picking-location .simple-location-copy input {
    font-size: clamp(12px, 1.55dvh, 13.5px);
}

.simple-order-sheet.is-picking-location .simple-location-row button {
    min-height: clamp(28px, 3.75dvh, 32px);
    padding: 0 10px;
    font-size: clamp(8.5px, 1.05dvh, 9.5px);
}

.simple-order-sheet.is-picking-location .simple-pick-tabs {
    flex: 0 0 auto;
    gap: 6px;
    padding: 4px;
}

.simple-order-sheet.is-picking-location .simple-pick-tabs button {
    min-height: clamp(30px, 4dvh, 34px);
    padding: 0 8px;
    font-size: clamp(9px, 1.15dvh, 10px);
}

.simple-order-sheet.is-picking-location .quick-destinations,
.simple-order-sheet.is-picking-location .simple-ride-form,
.simple-order-sheet.is-picking-location .simple-route-ready,
.simple-order-sheet.is-picking-location .simple-fare-title,
.simple-order-sheet.is-picking-location .simple-class-list,
.simple-order-sheet.is-picking-location .simple-payment-line,
.simple-order-sheet.is-picking-location .form-message,
.simple-order-sheet.is-picking-location [data-request-map-ride] {
    display: none !important;
}

.simple-order-sheet.is-picking-location .simple-results {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.simple-order-sheet.is-picking-location .simple-results[hidden] {
    display: none !important;
}

@media (max-width: 380px) {
    .simple-order-sheet.is-picking-location,
    .simple-order-sheet.is-picking-location.has-search-results {
        height: 40vh !important;
        height: 40svh !important;
        height: 40dvh !important;
        max-height: 40vh !important;
        max-height: 40svh !important;
        max-height: 40dvh !important;
        padding: 10px !important;
    }

    .simple-order-sheet.is-picking-location .simple-order-head small {
        max-width: 44%;
    }
}

/* Final map order sheet size fix
   The whole Book a ride bottom sheet must occupy about 40% of the phone/tablet
   viewport, not 60%+. Content inside the sheet scrolls when needed. */
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet {
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: calc(40dvh - env(safe-area-inset-bottom)) !important;
    max-height: calc(40dvh - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: clamp(10px, 1.35dvh, 14px) !important;
    border-radius: clamp(22px, 3.2dvh, 30px) !important;
    scrollbar-width: thin;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet::-webkit-scrollbar {
    width: 4px;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(113, 246, 255, .35);
}

body:not(.showcase-body) .simple-booking-screen .simple-route-form,
body:not(.showcase-body) .simple-booking-screen .simple-ride-form {
    gap: clamp(8px, 1.1dvh, 11px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-head {
    gap: 8px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-head .eyebrow {
    min-height: 22px !important;
    margin-bottom: 4px !important;
    padding-inline: 10px !important;
    font-size: clamp(8px, 1.05dvh, 9px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-head h2 {
    font-size: clamp(20px, 2.75dvh, 26px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-head small {
    max-width: 46% !important;
    font-size: clamp(9px, 1.25dvh, 11px) !important;
    line-height: 1.22 !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-location-box {
    gap: clamp(7px, 1dvh, 9px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-location-row {
    min-height: clamp(50px, 6.2dvh, 58px) !important;
    padding: clamp(7px, .95dvh, 8px) 8px clamp(7px, .95dvh, 8px) 14px !important;
    border-radius: clamp(18px, 2.4dvh, 22px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-location-copy small {
    font-size: clamp(8px, 1dvh, 9px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-location-copy input {
    font-size: clamp(13px, 1.65dvh, 15px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-location-row button {
    min-height: clamp(32px, 4dvh, 36px) !important;
    padding: 0 clamp(10px, 1.7dvh, 14px) !important;
    font-size: clamp(9px, 1.25dvh, 11px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-pick-tabs {
    gap: 7px !important;
    padding: 4px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-pick-tabs button {
    min-height: clamp(34px, 4.6dvh, 40px) !important;
    font-size: clamp(10px, 1.35dvh, 12px) !important;
}

body:not(.showcase-body) .simple-booking-screen .quick-destinations button {
    min-height: clamp(34px, 4.2dvh, 38px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-ride-form {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-route-ready {
    padding: 10px 12px !important;
    border-radius: 18px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-route-ready > span {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-class-list .ride-class {
    min-height: clamp(62px, 7.8dvh, 76px) !important;
    padding: 8px 6px !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-payment-line {
    min-height: 38px !important;
}

/* In map-point selection mode the same sheet remains 40%, but the lower fare
   area is hidden so the user gets a clean map-picking UI. */
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.is-picking-location,
body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet[data-picker-active="true"] {
    height: calc(40dvh - env(safe-area-inset-bottom)) !important;
    max-height: calc(40dvh - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.is-picking-location .quick-destinations,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.is-picking-location .simple-ride-form,
body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet .quick-destinations,
body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet .simple-ride-form,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet[data-picker-active="true"] .quick-destinations,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet[data-picker-active="true"] .simple-ride-form {
    display: none !important;
}

@supports not (height: 40dvh) {
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet,
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.is-picking-location,
    body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet,
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet[data-picker-active="true"] {
        height: 40vh !important;
        max-height: 40vh !important;
    }
}

/* Uber-style route picker update: location information stays at the top,
   while the price and confirmation sheet appears at the bottom after the
   destination is selected. */
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel {
    top: calc(88px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: 18px !important;
    right: 18px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(46dvh, 430px) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    border-radius: 28px !important;
    transform: translateZ(0);
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel.has-route {
    max-height: min(34dvh, 330px) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel.is-picking-location,
body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet.uber-route-panel,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel[data-picker-active="true"] {
    top: calc(88px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    height: auto !important;
    max-height: min(46dvh, 430px) !important;
    overflow-y: auto !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel.has-search-results {
    max-height: min(58dvh, 520px) !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel .simple-route-form {
    gap: 10px !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel .simple-order-head {
    align-items: flex-start;
    gap: 10px !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel.has-route .simple-order-head h2 {
    display: none;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel.has-route .simple-order-head .eyebrow {
    margin-bottom: 0 !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel.has-route .quick-destinations {
    display: none !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel .simple-location-row {
    min-height: 54px !important;
}

body:not(.showcase-body) .simple-booking-screen .uber-route-panel .simple-pick-tabs button {
    min-height: 36px !important;
}

.uber-confirm-sheet.simple-ride-form {
    position: absolute;
    z-index: 14;
    left: 18px;
    right: 18px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-height: min(42dvh, 420px);
    display: grid;
    gap: 11px;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(113, 246, 255, .30);
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 0%, rgba(25, 215, 255, .22), transparent 32%),
        radial-gradient(circle at 100% 10%, rgba(70, 255, 214, .16), transparent 30%),
        linear-gradient(155deg, rgba(7, 17, 36, .94), rgba(3, 8, 22, .96));
    box-shadow: 0 28px 70px rgba(0,0,0,.50), 0 0 42px rgba(25, 215, 255, .14) inset;
    backdrop-filter: blur(28px);
    transform: translateY(calc(100% + 34px));
    opacity: 0;
    pointer-events: none;
    transition: transform .26s ease, opacity .2s ease;
}

.uber-confirm-sheet.simple-ride-form.is-visible:not(.is-hidden-while-picking) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.uber-confirm-sheet.simple-ride-form.is-hidden-while-picking {
    transform: translateY(calc(100% + 34px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.uber-confirm-sheet .simple-route-ready {
    padding: 11px 13px !important;
}

.uber-confirm-sheet .simple-fare-title strong {
    font-size: 15px !important;
}

.uber-confirm-sheet .simple-class-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
}

.uber-confirm-sheet .simple-class-list .ride-class {
    min-height: 72px !important;
}

.uber-confirm-sheet .simple-payment-line {
    min-height: 36px !important;
}

.uber-confirm-sheet .primary-btn {
    min-height: 50px;
}

@media (max-width: 380px) {
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel {
        top: calc(78px + env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        max-height: min(48dvh, 410px) !important;
        padding: 10px !important;
        border-radius: 24px !important;
    }

    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel.has-route {
        max-height: min(36dvh, 320px) !important;
    }

    .uber-confirm-sheet.simple-ride-form {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        max-height: min(44dvh, 390px);
        padding: 12px !important;
        border-radius: 24px;
    }

    .uber-confirm-sheet .simple-class-list .ride-class {
        min-height: 66px !important;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel {
        left: clamp(36px, 7vw, 80px) !important;
        right: auto !important;
        width: min(520px, 46vw) !important;
        top: calc(94px + env(safe-area-inset-top)) !important;
        max-height: min(48dvh, 460px) !important;
    }

    .uber-confirm-sheet.simple-ride-form {
        left: clamp(36px, 7vw, 80px);
        right: auto;
        width: min(520px, 46vw);
        bottom: calc(26px + env(safe-area-inset-bottom));
        max-height: min(40dvh, 420px);
    }
}

/* Driver and admin applications */
.admin-body,
.driver-body {
    margin: 0;
    min-height: 100vh;
    color: var(--text, #f7fbff);
    background:
        radial-gradient(circle at 10% 0%, rgba(25, 215, 255, .18), transparent 34%),
        radial-gradient(circle at 90% 20%, rgba(70, 255, 214, .12), transparent 28%),
        #030816;
    font-family: var(--font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.admin-shell,
.admin-dashboard,
.driver-login-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
}

.login-shell,
.install-shell,
.driver-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.admin-header,
.admin-card,
.driver-card,
.driver-bottom-sheet,
.driver-request-card,
.driver-live-box {
    border: 1px solid rgba(113, 246, 255, .28);
    background: linear-gradient(145deg, rgba(12, 31, 52, .94), rgba(3, 8, 22, .96));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42), inset 0 0 45px rgba(25, 215, 255, .06);
    border-radius: 32px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 24px;
    margin-bottom: 20px;
}

.admin-header h1,
.admin-card h1,
.admin-card h2,
.driver-card h1,
.driver-profile-row h1,
.driver-request-card h2 {
    margin: 0;
    letter-spacing: -.04em;
}

.admin-header p,
.admin-muted,
.driver-card p,
.driver-profile-row p {
    color: var(--muted, #a7bed8);
}

.admin-header nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-card,
.driver-card {
    padding: 24px;
}

.admin-login-card {
    width: min(440px, 100%);
}

.admin-alert {
    border-radius: 18px;
    padding: 12px 14px;
    margin: 12px 0;
    font-weight: 800;
}

.admin-alert.error {
    border: 1px solid rgba(255, 110, 130, .5);
    background: rgba(255, 70, 95, .14);
    color: #ffb8c4;
}

.admin-alert.success {
    border: 1px solid rgba(70, 255, 214, .42);
    background: rgba(70, 255, 214, .11);
    color: #7fffe8;
}

.admin-field {
    display: grid;
    gap: 8px;
    color: var(--muted, #a7bed8);
    font-weight: 900;
    margin: 12px 0;
}

.admin-field input,
.admin-field select {
    width: 100%;
    border: 1px solid rgba(113, 246, 255, .26);
    background: rgba(7, 15, 34, .72);
    color: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    font: inherit;
    outline: none;
}

.admin-field input:focus,
.admin-field select:focus {
    border-color: rgba(70, 255, 214, .9);
    box-shadow: 0 0 0 4px rgba(25, 215, 255, .12);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.admin-stats article {
    border-radius: 24px;
    padding: 20px;
    border: 1px solid rgba(113, 246, 255, .24);
    background: rgba(8, 20, 39, .82);
}

.admin-stats small {
    display: block;
    color: var(--muted, #a7bed8);
    font-weight: 900;
}

.admin-stats strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(28px, 5vw, 46px);
    color: #71f6ff;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.admin-form {
    display: grid;
    gap: 4px;
}

.admin-map-card {
    min-height: 560px;
}

.admin-map,
.driver-map {
    width: 100%;
    min-height: 460px;
    border-radius: 26px;
    overflow: hidden;
    background: #071121;
    border: 1px solid rgba(113, 246, 255, .2);
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.admin-table th,
.admin-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(113, 246, 255, .12);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: #71f6ff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    border: 1px solid rgba(113, 246, 255, .22);
    color: #c6d7ed;
    background: rgba(255, 255, 255, .04);
    white-space: nowrap;
}

.status-pill.online {
    color: #61ffd9;
    border-color: rgba(70, 255, 214, .55);
    background: rgba(70, 255, 214, .12);
}

.status-pill.idle {
    color: #71f6ff;
    background: rgba(25, 215, 255, .1);
}

.status-pill.off {
    color: #ffb8c4;
    background: rgba(255, 70, 95, .12);
}

.mini-btn,
.ghost-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(113, 246, 255, .24);
    background: rgba(255, 255, 255, .04);
    color: #71f6ff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.admin-driver-marker,
.driver-div-icon {
    display: grid;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    border-radius: 18px;
    background: linear-gradient(135deg, #229cff, #46ffd6);
    box-shadow: 0 10px 30px rgba(25, 215, 255, .36);
    color: #031020;
    font-weight: 900;
}

.driver-app {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #030816;
}

.driver-map-wrap {
    position: absolute;
    inset: 0;
}

.driver-map {
    min-height: 100vh;
    border-radius: 0;
    border: 0;
}

.driver-map-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(3, 8, 22, .96) 0%, rgba(3, 8, 22, .34) 45%, rgba(3, 8, 22, .12) 100%);
    z-index: 400;
}

.driver-map-top {
    position: absolute;
    z-index: 800;
    top: calc(24px + env(safe-area-inset-top));
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.driver-status-pill {
    flex: 1;
    text-align: center;
    border: 1px solid rgba(113, 246, 255, .28);
    background: rgba(8, 20, 39, .86);
    color: #b8c9dd;
    border-radius: 999px;
    padding: 18px 20px;
    font-weight: 1000;
    box-shadow: 0 12px 42px rgba(0, 0, 0, .35);
}

.driver-status-pill.is-online {
    color: #46ffd6;
    box-shadow: 0 0 40px rgba(70, 255, 214, .18);
}

.driver-bottom-sheet {
    position: fixed;
    z-index: 850;
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    max-width: 720px;
    margin: 0 auto;
    padding: 22px;
    display: grid;
    gap: 14px;
}

.driver-profile-row,
.driver-request-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.driver-avatar-small {
    width: 64px;
    height: 64px;
    border-radius: 24px;
    border: 1px solid rgba(113, 246, 255, .28);
    background: rgba(255, 255, 255, .08);
}

.driver-actions-main,
.driver-request-actions,
.driver-trip-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.driver-trip-actions {
    grid-template-columns: repeat(2, 1fr);
}

.driver-live-box {
    padding: 16px;
    border-radius: 22px;
}

.driver-live-box small {
    display: block;
    color: #71f6ff;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.driver-live-box strong {
    display: block;
    margin-top: 5px;
    color: #dff7ff;
}

.driver-request-card {
    padding: 18px;
    border-radius: 26px;
}

.driver-request-card[hidden],
.driver-trip-actions[hidden],
.driver-request-actions[hidden],
[data-start-shift][hidden],
[data-end-shift][hidden],
[data-driver-arrived][hidden],
[data-driver-start-trip][hidden],
[data-driver-complete-trip][hidden] {
    display: none !important;
}

.driver-div-icon.pickup-pin {
    background: #2ff4d0;
}

.driver-div-icon.destination-pin {
    background: #71f6ff;
}

@media (max-width: 760px) {
    .admin-dashboard,
    .admin-shell,
    .driver-login-shell {
        width: min(100% - 20px, 1180px);
        padding: 16px 0;
    }

    .admin-header,
    .admin-grid,
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-header {
        display: grid;
    }

    .admin-header nav {
        justify-content: stretch;
    }

    .admin-header nav > * {
        flex: 1;
    }

    .admin-map-card {
        min-height: 380px;
    }

    .admin-map {
        min-height: 320px;
    }

    .driver-bottom-sheet {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 18px;
        border-radius: 28px;
    }

    .driver-profile-row {
        align-items: flex-start;
    }

    .driver-profile-row > strong {
        font-size: 13px;
    }

    .driver-actions-main,
    .driver-request-actions,
    .driver-trip-actions {
        grid-template-columns: 1fr;
    }
}

/* Driver app: polished top safe-area island */
.driver-map-top {
    position: absolute;
    z-index: 920;
    top: max(12px, calc(14px + env(safe-area-inset-top)));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    height: 68px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 8px;
    justify-content: initial;
    padding: 8px;
    border: 1px solid rgba(113, 246, 255, .28);
    border-radius: 32px;
    background:
        radial-gradient(circle at 18% 0%, rgba(25, 215, 255, .22), transparent 38%),
        radial-gradient(circle at 86% 15%, rgba(70, 255, 214, .16), transparent 34%),
        linear-gradient(145deg, rgba(12, 31, 52, .94), rgba(3, 8, 22, .92));
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .42),
        0 0 36px rgba(25, 215, 255, .14) inset;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow: hidden;
}

.driver-map-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(114, 248, 255, .16), transparent);
    opacity: .75;
    pointer-events: none;
}

.driver-map-top .floating-menu,
.driver-map-top .nav-recenter {
    position: relative !important;
    z-index: 1;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 52px;
    height: 52px;
    min-width: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(113, 246, 255, .24);
    border-radius: 24px;
    background: rgba(5, 15, 33, .72);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .26), 0 0 24px rgba(25, 215, 255, .10) inset;
    color: #eaffff;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.driver-map-top .floating-menu {
    font-size: 22px;
    line-height: 1;
}

.driver-map-top .floating-menu span {
    display: block;
    transform: translateY(-1px);
}

.driver-map-top .nav-recenter {
    width: auto;
    min-width: 64px;
    padding: 0 14px;
    color: #71f6ff;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: -.01em;
}

.driver-map-top .floating-menu:active,
.driver-map-top .nav-recenter:active {
    transform: scale(.97);
}

.driver-map-top .driver-status-pill {
    position: relative;
    z-index: 1;
    min-width: 0;
    height: 52px;
    display: flex;
    flex: initial;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(9, 24, 45, .76), rgba(5, 13, 29, .66));
    color: #b8c9dd;
    text-align: left;
    box-shadow: 0 0 26px rgba(25, 215, 255, .08) inset;
    overflow: hidden;
}

.driver-status-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 999px;
    background: #8aa1b8;
    box-shadow: 0 0 0 5px rgba(138, 161, 184, .12);
}

.driver-map-top .driver-status-pill.is-online .driver-status-dot {
    background: #46ffd6;
    box-shadow: 0 0 0 5px rgba(70, 255, 214, .14), 0 0 18px rgba(70, 255, 214, .95);
    animation: driverStatusPulse 1.8s ease-out infinite;
}

@keyframes driverStatusPulse {
    0% { box-shadow: 0 0 0 3px rgba(70, 255, 214, .22), 0 0 18px rgba(70, 255, 214, .95); }
    70% { box-shadow: 0 0 0 12px rgba(70, 255, 214, 0), 0 0 18px rgba(70, 255, 214, .75); }
    100% { box-shadow: 0 0 0 3px rgba(70, 255, 214, .14), 0 0 18px rgba(70, 255, 214, .95); }
}

.driver-status-copy {
    min-width: 0;
    display: grid;
    line-height: 1.05;
}

.driver-status-copy small {
    display: block;
    overflow: hidden;
    color: rgba(183, 210, 228, .78);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-status-copy strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #eefcff;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-map-top .driver-status-pill.is-online .driver-status-copy strong {
    color: #46ffd6;
    text-shadow: 0 0 20px rgba(70, 255, 214, .26);
}

@media (max-width: 380px) {
    .driver-map-top {
        top: max(10px, calc(10px + env(safe-area-inset-top)));
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        height: 62px;
        grid-template-columns: 48px minmax(0, 1fr) 58px;
        gap: 7px;
        padding: 7px;
        border-radius: 28px;
    }

    .driver-map-top .floating-menu,
    .driver-map-top .nav-recenter,
    .driver-map-top .driver-status-pill {
        height: 48px;
        border-radius: 22px;
    }

    .driver-map-top .floating-menu {
        width: 48px;
    }

    .driver-map-top .nav-recenter {
        min-width: 58px;
        padding: 0 10px;
        font-size: 12px;
    }

    .driver-status-copy small {
        font-size: 8px;
    }

    .driver-status-copy strong {
        font-size: 14px;
    }
}

@media (min-width: 760px) and (max-width: 1180px) {
    body:not(.showcase-body) .driver-map-top {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 42px));
        transform: translateX(-50%);
    }
}

/* Driver manual testing location */
.driver-map-hint {
    position: absolute;
    z-index: 18;
    left: 22px;
    right: 22px;
    top: 88px;
    padding: 13px 16px;
    border: 1px solid rgba(113, 246, 255, .38);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 20%, rgba(70, 255, 214, .24), transparent 34%),
        rgba(5, 17, 34, .84);
    color: var(--cyan-soft);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .32), 0 0 34px rgba(25, 215, 255, .16) inset;
    backdrop-filter: blur(18px);
}

.driver-manual-location-card {
    margin-top: 14px;
    padding: 16px;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(113, 246, 255, .18);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(25, 215, 255, .10), rgba(70, 255, 214, .045)),
        rgba(4, 13, 30, .72);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .20), 0 0 24px rgba(25, 215, 255, .08) inset;
}

.driver-manual-location-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.driver-manual-location-head strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.driver-manual-location-head > span {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(113, 246, 255, .25);
    border-radius: 999px;
    background: rgba(25, 215, 255, .10);
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 0 18px rgba(25, 215, 255, .10) inset;
}

.driver-manual-location-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.driver-location-actions {
    display: grid;
    grid-template-columns: 1.1fr .9fr .9fr;
    gap: 9px;
}

.driver-location-actions .ghost-btn {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
    border-radius: 16px;
    white-space: normal;
}

.driver-location-actions .ghost-btn.is-active,
.driver-location-actions .ghost-btn:focus-visible {
    border-color: rgba(70, 255, 214, .82);
    color: #02111f;
    background: linear-gradient(135deg, var(--blue), var(--mint));
    box-shadow: 0 0 28px rgba(25, 215, 255, .24);
}

.driver-manual-location-card small[data-manual-location-text] {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.form-message.is-error {
    color: #ff8faa;
}

@media (max-width: 520px) {
    .driver-location-actions {
        grid-template-columns: 1fr;
    }

    .driver-map-hint {
        top: 82px;
        left: 18px;
        right: 18px;
        font-size: 12px;
    }
}

/* Driver orders, offer confirmation and balance */
.driver-bottom-sheet {
    max-height: min(62vh, 680px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 246, 255, .45) rgba(4, 13, 30, .35);
}

.driver-wallet-row,
.driver-available-card {
    border: 1px solid rgba(113, 246, 255, .22);
    background:
        radial-gradient(circle at 0% 0%, rgba(25, 215, 255, .16), transparent 42%),
        rgba(4, 13, 30, .72);
    border-radius: 24px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .20), 0 0 28px rgba(25, 215, 255, .07) inset;
}

.driver-wallet-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.driver-wallet-row div {
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
}

.driver-wallet-row small,
.driver-offer-metrics small {
    display: block;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.driver-wallet-row strong {
    display: block;
    margin-top: 5px;
    color: var(--cyan-soft);
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(25, 215, 255, .24);
}

.driver-available-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.driver-available-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.driver-available-head strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
}

.driver-available-head > span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--mint));
    color: #02111f;
    font-weight: 1000;
    box-shadow: 0 0 26px rgba(25, 215, 255, .24);
}

.driver-orders-list {
    display: grid;
    gap: 10px;
}

.driver-orders-empty {
    padding: 14px;
    border: 1px dashed rgba(113, 246, 255, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
}

.driver-orders-empty[hidden] {
    display: none !important;
}

.driver-orders-empty strong,
.driver-orders-empty small {
    display: block;
}

.driver-orders-empty strong {
    color: var(--ink);
    font-size: 13px;
}

.driver-orders-empty small {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
}

.driver-order-item {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(113, 246, 255, .26);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(25, 215, 255, .11), rgba(70, 255, 214, .045)),
        rgba(5, 15, 33, .82);
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), 0 0 22px rgba(25, 215, 255, .05) inset;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.driver-order-item:hover,
.driver-order-item:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(70, 255, 214, .82);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28), 0 0 30px rgba(25, 215, 255, .15) inset;
    outline: none;
}

.driver-order-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(35, 160, 255, .28), rgba(70, 255, 214, .20));
    box-shadow: 0 0 22px rgba(25, 215, 255, .18) inset;
}

.driver-order-main,
.driver-order-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.driver-order-main strong,
.driver-order-main small,
.driver-order-meta b,
.driver-order-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-order-main strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 1000;
}

.driver-order-main small,
.driver-order-meta small {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
}

.driver-order-meta {
    justify-items: end;
    text-align: right;
}

.driver-order-meta b {
    color: var(--cyan-soft);
    font-size: 13px;
    font-weight: 1000;
}

.driver-offer-modal[hidden] {
    display: none !important;
}

.driver-offer-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: end center;
    padding: 18px;
}

.driver-offer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 16, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.driver-offer-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(113, 246, 255, .35);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 0%, rgba(25, 215, 255, .22), transparent 42%),
        radial-gradient(circle at 88% 10%, rgba(70, 255, 214, .16), transparent 38%),
        linear-gradient(145deg, rgba(12, 31, 52, .98), rgba(3, 8, 22, .98));
    box-shadow: 0 26px 90px rgba(0, 0, 0, .55), 0 0 48px rgba(25, 215, 255, .10) inset;
}

.driver-offer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(113, 246, 255, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.driver-offer-dialog h2 {
    margin: 0;
    padding-right: 44px;
    color: var(--ink);
    font-size: clamp(20px, 5vw, 30px);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.driver-offer-price {
    color: var(--cyan-soft);
    font-size: clamp(24px, 7vw, 40px);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 0 26px rgba(25, 215, 255, .30);
}

.driver-offer-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.driver-offer-metrics div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(113, 246, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
}

.driver-offer-metrics strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-offer-dialog p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .driver-bottom-sheet {
        max-height: min(64vh, 660px);
    }

    .driver-wallet-row,
    .driver-offer-metrics {
        grid-template-columns: 1fr;
    }

    .driver-order-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .driver-order-meta {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .driver-offer-dialog {
        padding: 20px;
        border-radius: 26px;
    }
}

/* Technical specification MVP additions */
.auth-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(circle at 20% 0%,rgba(42,168,255,.18),transparent 40%),#030816;color:#fff}
.auth-card{width:min(92vw,520px);padding:28px;border:1px solid rgba(100,240,255,.35);border-radius:32px;background:linear-gradient(145deg,rgba(11,36,61,.94),rgba(3,8,22,.96));box-shadow:0 28px 90px rgba(0,240,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.auth-card.wide-card{width:min(94vw,760px)}
.auth-logo{width:74px;height:74px;border-radius:22px;margin-bottom:14px;filter:drop-shadow(0 0 22px rgba(56,242,213,.38))}
.auth-switch,.auth-actions-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.auth-switch a{color:#72faff;font-weight:800}.auth-actions-row .ghost-btn,.auth-actions-row .primary-btn{flex:1;text-align:center;justify-content:center;text-decoration:none}.check-row{display:flex;align-items:center;gap:10px;color:#bdd4e8;font-weight:800}.check-row input{width:18px;height:18px;accent-color:#38f2d5}.list-stack{display:grid;gap:12px}.history-card{border:1px solid rgba(85,220,255,.22);border-radius:22px;padding:16px;background:rgba(4,13,31,.72);color:#fff}.history-card div{display:flex;gap:8px;flex-wrap:wrap}.history-card p{color:#bdd4e8;margin:6px 0}.history-card small{color:#88a5bc}.repeat-form{margin-top:8px}.customer-profile-chip{position:absolute;top:120px;right:18px;z-index:460;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:22px;background:rgba(5,19,38,.82);border:1px solid rgba(85,220,255,.38);box-shadow:0 14px 36px rgba(0,0,0,.25);color:#fff;text-decoration:none}.customer-profile-chip span{font-size:20px}.customer-profile-chip strong{display:block;font-size:12px;max-width:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-profile-chip small{display:block;color:#79f8ff;font-size:10px;font-weight:900}.pickup-note-field,.promo-field{display:grid;gap:7px;margin-top:12px;color:#a9bed3;font-weight:900}.pickup-note-field input,.promo-field input{border:1px solid rgba(94,224,255,.28);border-radius:18px;background:rgba(5,12,30,.85);color:#fff;padding:13px 16px;font-weight:800}.ride-options-row,.payment-method-row{display:flex;gap:10px;overflow-x:auto;padding:8px 0}.ride-options-row label,.payment-method-row label{white-space:nowrap;border:1px solid rgba(94,224,255,.28);border-radius:999px;padding:10px 14px;background:rgba(4,17,35,.75);color:#d7edff;font-weight:900}.ride-options-row input,.payment-method-row input{accent-color:#38f2d5}.driver-nav-links{display:flex;gap:10px;margin:12px 0;overflow-x:auto}.mini-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(94,224,255,.35);background:rgba(6,24,46,.9);border-radius:999px;color:#9ffcff;font-weight:900;padding:9px 14px;text-decoration:none;cursor:pointer}.driver-page-shell{min-height:100vh;background:#030816;padding:18px;display:grid;gap:16px;align-content:start;color:#fff}.driver-pin-box{border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:12px;background:rgba(0,0,0,.25);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:12px 0}.driver-pin-box label{display:grid;gap:6px;color:#b9d0e6;font-weight:900}.driver-pin-box input{border:1px solid rgba(94,224,255,.35);background:rgba(2,9,23,.9);color:#fff;border-radius:14px;padding:12px;font-size:18px;font-weight:900;letter-spacing:6px;text-align:center}.inline-admin-form{display:flex;gap:8px;flex-wrap:wrap}.inline-admin-form input,.inline-admin-form select{border:1px solid rgba(94,224,255,.25);background:rgba(3,8,22,.8);color:#fff;border-radius:12px;padding:8px}.admin-alert.warning{background:rgba(255,184,77,.12);border-color:rgba(255,184,77,.35);color:#ffd899}@media(max-width:640px){.customer-profile-chip{top:104px;right:12px}.driver-pin-box{grid-template-columns:1fr}.auth-card{padding:22px;border-radius:28px}.ride-options-row label,.payment-method-row label{font-size:12px}}
.ride-pin-card{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;border:1px solid rgba(56,242,213,.38);background:linear-gradient(135deg,rgba(21,130,161,.22),rgba(3,8,22,.85));border-radius:22px;padding:14px 16px;margin:12px 0;box-shadow:0 16px 42px rgba(22,236,255,.12)}.ride-pin-card span{color:#9ebbd4;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.12em}.ride-pin-card strong{font-size:30px;color:#75fbff;letter-spacing:.18em;text-align:right;text-shadow:0 0 18px rgba(117,251,255,.45)}.ride-pin-card small{grid-column:1/-1;color:#bdd4e8;font-weight:800}

/* Technical specification admin extensions */
.admin-nav-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:18px 0 22px;
}
.admin-nav-tabs .mini-btn{
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.admin-nav-tabs .mini-btn.is-active{
    border-color:rgba(75,255,232,.8);
    background:linear-gradient(135deg, rgba(24,158,255,.35), rgba(67,255,216,.25));
    color:#eaffff;
    box-shadow:0 0 22px rgba(41,222,255,.22);
}
.admin-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
}
.admin-section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin:0 0 14px;
}
.admin-muted strong{color:#eaffff}
.auth-form{display:grid;gap:14px;margin-top:18px}.auth-form label{display:grid;gap:8px;color:#bcd5e9;font-weight:900}.auth-form input,.auth-form select,.auth-form textarea{width:100%;border:1px solid rgba(94,224,255,.28);border-radius:18px;background:rgba(5,12,30,.88);color:#fff;padding:14px 16px;font:inherit;font-weight:800}.list-screen{min-height:100%;display:grid;place-items:center;padding:24px}.mini-list{display:grid;gap:12px;margin:16px 0}.mini-list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border-radius:20px;border:1px solid rgba(94,224,255,.22);background:rgba(4,13,31,.76)}.mini-list-row small{display:block;color:#a7bed4;margin-top:4px}.mini-list-row b{color:#77fbff;white-space:nowrap}.auth-screen{min-height:100%;display:grid;place-items:center;padding:24px}.auth-card .ghost-link{display:inline-flex;margin-top:12px;color:#80fbff;font-weight:900;text-decoration:none}.auth-card .ghost-btn{margin-top:10px;text-decoration:none;justify-content:center}.auth-card .primary-btn{margin-top:8px;text-decoration:none;justify-content:center}

/* ==========================================================
   Ordely Ride premium redesign
   Light Ordely-inspired UI system for customer, driver and admin apps
   ========================================================== */
:root {
    --bg: #f6fbff;
    --bg-2: #edf7ff;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: rgba(255, 255, 255, 0.98);
    --surface-soft: rgba(246, 251, 255, 0.78);
    --glass: rgba(255, 255, 255, 0.68);
    --ink: #061333;
    --ink-soft: #64738f;
    --ink-faint: #93a1ba;
    --line: rgba(22, 119, 255, 0.14);
    --line-strong: rgba(23, 176, 255, 0.34);
    --cyan: #14c8ff;
    --cyan-soft: #26d7f5;
    --blue: #1677ff;
    --mint: #20e0bf;
    --danger: #ff5574;
    --text: #061333;
    --muted: #64738f;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shadow: 0 28px 90px rgba(20, 67, 130, 0.14), 0 8px 24px rgba(7, 25, 55, 0.08);
    --soft-shadow: 0 18px 42px rgba(20, 67, 130, 0.12), 0 5px 14px rgba(7, 25, 55, 0.06);
    --neon-shadow: 0 18px 50px rgba(22, 119, 255, 0.18), 0 0 28px rgba(32, 224, 191, 0.10);
}

html,
body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 12%, rgba(22, 119, 255, 0.10), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(32, 224, 191, 0.12), transparent 28%),
        radial-gradient(circle at 50% 105%, rgba(20, 200, 255, 0.14), transparent 36%),
        linear-gradient(135deg, #f8fcff 0%, #eef8ff 46%, #f7fffc 100%);
}

body::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(22, 119, 255, 0.08), transparent 17%),
        radial-gradient(circle at 83% 12%, rgba(32, 224, 191, 0.10), transparent 18%),
        linear-gradient(115deg, transparent 0 24%, rgba(22, 119, 255, 0.035) 24% 25%, transparent 25% 100%);
    background-size: auto;
    mask-image: none;
    opacity: 1;
}

body::after {
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.66) 48%, transparent 100%),
        radial-gradient(circle at 70% 18%, transparent 0 18%, rgba(255,255,255,.70) 18.2% 18.7%, transparent 19% 100%);
    opacity: .56;
}

.app-stage {
    background:
        radial-gradient(circle at 18% 12%, rgba(22, 119, 255, .08), transparent 34%),
        radial-gradient(circle at 80% 0%, rgba(32, 224, 191, .09), transparent 28%);
}

.phone-frame {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,251,255,.92));
    border: 1px solid rgba(216, 232, 255, .86);
    box-shadow:
        0 35px 80px rgba(22, 119, 255, .14),
        0 14px 34px rgba(16, 45, 96, .10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.phone-frame::before {
    background:
        linear-gradient(120deg, rgba(255,255,255,.64), transparent 28%, transparent 78%, rgba(32,224,191,.13)),
        radial-gradient(circle at 50% -8%, rgba(22,119,255,.10), transparent 30%);
    mix-blend-mode: normal;
}

.screen,
.splash-screen,
.map-screen {
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 0%, rgba(22,119,255,.10), transparent 32%),
        radial-gradient(circle at 92% 4%, rgba(32,224,191,.10), transparent 30%),
        linear-gradient(165deg, rgba(255,255,255,.96), rgba(243,250,255,.98));
}

.screen::before {
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 36%);
}

h1, h2, h3,
.simple-order-head h2,
.admin-header h1,
.admin-card h1,
.admin-card h2,
.driver-card h1,
.driver-profile-row h1,
.driver-request-card h2 {
    color: var(--ink) !important;
}

p,
.muted,
.admin-header p,
.admin-muted,
.driver-card p,
.driver-profile-row p,
.dispatch-loader small,
.dispatch-metrics small,
.nearby-drivers-list small {
    color: var(--ink-soft) !important;
}

.eyebrow {
    color: #0c92df !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(22, 119, 255, .13) !important;
    box-shadow: 0 12px 26px rgba(22,119,255,.07), inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

.primary-btn,
.bottom-btn,
[data-request-map-ride],
.uber-confirm-sheet .primary-btn,
.driver-offer-dialog .primary-btn,
.driver-trip-actions .primary-btn,
.driver-actions-main .primary-btn {
    background: linear-gradient(135deg, #1677ff 0%, #12b7ff 50%, #20e0bf 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 20px 42px rgba(22, 119, 255, .24), 0 8px 18px rgba(32,224,191,.15) !important;
}

.primary-btn:hover,
.bottom-btn:hover,
[data-request-map-ride]:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 52px rgba(22,119,255,.30), 0 10px 24px rgba(32,224,191,.18) !important;
}

.ghost-btn,
.mini-btn,
.ghost-link,
.auth-card .ghost-link,
.auth-card .ghost-btn {
    color: #1577f2 !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(22,119,255,.14) !important;
    box-shadow: 0 10px 24px rgba(22,119,255,.07), inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.ghost-btn.danger,
.mini-btn.danger,
.dispatch-actions .danger,
.driver-request-actions .danger {
    color: #e64667 !important;
    border-color: rgba(255,85,116,.20) !important;
    background: rgba(255,255,255,.76) !important;
}

/* Splash / onboarding */
.splash-screen {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 25% 18%, rgba(22,119,255,.14), transparent 28%),
        radial-gradient(circle at 75% 22%, rgba(32,224,191,.15), transparent 26%),
        linear-gradient(160deg, #ffffff 0%, #eef8ff 100%);
}

.splash-logo {
    display: grid;
    place-items: center;
    gap: 18px;
    text-align: center;
}

.splash-logo .logo-mark.big,
.logo-mark.big {
    width: 106px !important;
    height: 106px !important;
    border-radius: 32px;
    filter: drop-shadow(0 24px 28px rgba(22,119,255,.18));
}

.splash-logo span {
    color: var(--ink) !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
}

.hero-arc {
    background:
        radial-gradient(circle at 50% 50%, rgba(22,119,255,.09), transparent 62%),
        linear-gradient(180deg, rgba(32,224,191,.16), rgba(255,255,255,.02)) !important;
}

.hero-car {
    filter: drop-shadow(0 24px 34px rgba(22,119,255,.18)) !important;
}

.phone-input,
.input-shell,
.auth-form input,
.auth-form select,
.auth-form textarea,
.admin-field input,
.admin-field select,
.inline-admin-form input,
.inline-admin-form select,
.driver-pin-box input,
.pickup-note-field input,
.promo-field input,
.add-card-form input,
.add-card-form select,
.add-card-form textarea {
    color: var(--ink) !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(22,119,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 22px rgba(22,119,255,.05) !important;
}

.phone-input input,
.phone-input select,
.simple-location-copy input {
    color: var(--ink) !important;
}

input::placeholder,
textarea::placeholder,
.simple-location-copy input::placeholder {
    color: #9aa8bd !important;
}

/* Map style */
.map-screen,
.driver-app {
    background: #eef8ff !important;
}

.osm-map,
.leaflet-container,
.admin-map,
.driver-map {
    background: #eef8ff !important;
}

.map-screen .leaflet-tile,
.driver-map .leaflet-tile,
.admin-map .leaflet-tile {
    filter: grayscale(.12) saturate(.72) brightness(1.10) contrast(.90) !important;
    opacity: .82 !important;
}

.map-ambient {
    background:
        radial-gradient(circle at 50% 18%, rgba(22,119,255,.08), transparent 28%),
        linear-gradient(to top, rgba(246,251,255,.92) 0%, rgba(246,251,255,.32) 26%, rgba(246,251,255,.08) 58%, rgba(246,251,255,.20) 100%) !important;
}

.full-map::after,
.booking-screen::after {
    background: linear-gradient(to top, rgba(246,251,255,.96), rgba(246,251,255,0)) !important;
}

.leaflet-control-attribution {
    background: rgba(255,255,255,.72) !important;
    color: #6f7f9b !important;
    border: 1px solid rgba(22,119,255,.10) !important;
}

.leaflet-control-attribution a {
    color: #1677ff !important;
}

.leaflet-control-zoom {
    border-color: rgba(22,119,255,.12) !important;
    box-shadow: 0 12px 30px rgba(22,119,255,.10) !important;
}

.leaflet-control-zoom a {
    background: rgba(255,255,255,.88) !important;
    color: #1677ff !important;
}

.floating-menu,
.floating-back,
.nav-recenter,
.map-status,
.simple-map-status,
.active-ride-chip,
.customer-profile-chip,
.driver-map-action,
.driver-exit-action {
    color: var(--ink) !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(22,119,255,.14) !important;
    box-shadow: 0 18px 40px rgba(22,119,255,.12), inset 0 1px 0 rgba(255,255,255,.78) !important;
    backdrop-filter: blur(24px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.25) !important;
}

.map-status,
.simple-map-status {
    color: #0c2250 !important;
    font-weight: 900 !important;
}

.nav-recenter,
.simple-locate {
    color: #1677ff !important;
}

.customer-profile-chip small,
.active-ride-chip small {
    color: #0aa8e6 !important;
}

.route-main-line,
.route-progress-line {
    stroke: #1677ff !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.route-glow-line {
    stroke: rgba(20, 200, 255, .26) !important;
    stroke-width: 16px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.geo-dot,
.dest-dot {
    box-shadow: 0 18px 36px rgba(22,119,255,.20), 0 0 0 10px rgba(22,119,255,.14) !important;
}

.geo-dot {
    background: linear-gradient(135deg, #1677ff, #18b9ff) !important;
}

.dest-dot {
    background: linear-gradient(135deg, #18b9ff, #20e0bf) !important;
}

.driver-car-dot,
.driver-car-marker {
    background: linear-gradient(135deg, #1677ff, #18b9ff) !important;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(22,119,255,.20) !important;
}

.route-label {
    color: var(--ink) !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(22,119,255,.12) !important;
    box-shadow: 0 14px 30px rgba(22,119,255,.11) !important;
}

/* Customer booking cards */
.simple-order-sheet,
.simple-order-sheet.uber-route-panel,
.uber-confirm-sheet.simple-ride-form,
.dispatch-panel,
.dispatch-top-card,
.driver-pickup-card,
.nearby-drivers-card,
.ride-pin-card,
.simple-route-ready,
.driver-car-card,
.nav-card,
.history-card,
.mini-list-row,
.auth-card,
.receipt-card,
.driver-card {
    color: var(--ink) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(22,119,255,.08), transparent 34%),
        radial-gradient(circle at 100% 6%, rgba(32,224,191,.08), transparent 28%),
        rgba(255,255,255,.92) !important;
    border: 1px solid rgba(22,119,255,.14) !important;
    box-shadow: 0 28px 70px rgba(22,119,255,.12), 0 12px 30px rgba(6,19,51,.06), inset 0 1px 0 rgba(255,255,255,.80) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
}

body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel,
body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet.uber-route-panel,
body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel[data-picker-active="true"] {
    background: rgba(255,255,255,.90) !important;
    border-color: rgba(22,119,255,.13) !important;
    border-radius: 32px !important;
    box-shadow: 0 28px 70px rgba(22,119,255,.13), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.uber-confirm-sheet.simple-ride-form {
    background: rgba(255,255,255,.94) !important;
    border-radius: 34px !important;
    box-shadow: 0 -4px 56px rgba(22,119,255,.14), 0 18px 60px rgba(6,19,51,.08) !important;
}

.simple-order-head small,
.pickup-note-field,
.promo-field,
.promo-field span,
.pickup-note-field span,
.simple-fare-title small,
.ride-options-row label,
.payment-method-row label,
.simple-payment-line span,
.payment-line span,
.form-message {
    color: var(--ink-soft) !important;
}

.simple-location-row,
.ride-class,
.quick-destinations button,
.simple-pick-tabs,
.simple-route-ready,
.ride-options-row label,
.payment-method-row label,
.dispatch-route-card,
.dispatch-metrics div,
.driver-offer-metrics div,
.nearby-driver-item,
.driver-order-item,
.driver-live-box,
.driver-wallet-row,
.driver-manual-location-card,
.driver-available-card,
.driver-pin-box,
.car-plate {
    color: var(--ink) !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(22,119,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 10px 22px rgba(22,119,255,.055) !important;
}

.simple-location-row.is-active,
.ride-class.selected,
.simple-pick-tabs button.is-active,
.payment-method-row label:has(input:checked),
.ride-options-row label:has(input:checked) {
    color: var(--ink) !important;
    border-color: rgba(20,200,255,.55) !important;
    background: linear-gradient(135deg, rgba(22,119,255,.09), rgba(32,224,191,.10)), rgba(255,255,255,.88) !important;
    box-shadow: 0 18px 36px rgba(22,119,255,.11), inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

.simple-pick-tabs button,
.simple-location-row button,
.quick-destinations button {
    color: #1677ff !important;
}

.simple-pick-tabs button.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #1677ff, #12b7ff, #20e0bf) !important;
}

.simple-location-copy small,
.simple-route-ready small,
.dispatch-route-card strong,
.dispatch-metrics strong,
.nearby-driver-item strong,
.driver-order-main strong,
.driver-order-meta b {
    color: var(--ink) !important;
}

.simple-location-copy input {
    font-weight: 850 !important;
}

.simple-route-ready strong,
.simple-payment-line b,
.payment-line b,
.ride-pin-card strong,
.driver-offer-price,
.driver-wallet-row strong,
.driver-live-box small,
.driver-available-head > span,
.admin-stats strong {
    color: #0db7d9 !important;
    text-shadow: none !important;
}

.class-icon {
    filter: drop-shadow(0 12px 18px rgba(22,119,255,.12));
}

.form-message.is-error,
.form-message[data-form-message]:not(:empty),
.admin-alert.error {
    color: #e64667 !important;
}

/* Request / active ride */
.dispatch-top-card,
.dispatch-panel {
    background: rgba(255,255,255,.92) !important;
}

.dispatch-loader > span {
    border-color: rgba(22,119,255,.12) !important;
    border-top-color: #1677ff !important;
}

.pulse-ring {
    background: radial-gradient(circle, rgba(32,224,191,.42), rgba(32,224,191,.08) 56%, transparent 58%) !important;
}

.dispatch-stages {
    background: rgba(246,251,255,.80) !important;
    border: 1px solid rgba(22,119,255,.10) !important;
}

.dispatch-stages span {
    color: #7b88a3 !important;
    background: rgba(255,255,255,.58) !important;
    border-color: rgba(22,119,255,.08) !important;
}

.dispatch-stages span.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #1677ff, #12b7ff, #20e0bf) !important;
    border-color: transparent !important;
}

.dispatch-stages span.is-done {
    color: #098b80 !important;
    background: rgba(32,224,191,.12) !important;
}

/* Driver app */
.driver-body,
.admin-body {
    color: var(--ink) !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(22,119,255,.10), transparent 32%),
        radial-gradient(circle at 88% 6%, rgba(32,224,191,.10), transparent 28%),
        linear-gradient(135deg, #f8fcff 0%, #eef8ff 50%, #f7fffc 100%) !important;
}

.driver-map-wrap::after {
    background: linear-gradient(to top, rgba(246,251,255,.94) 0%, rgba(246,251,255,.38) 46%, rgba(246,251,255,.10) 100%) !important;
}

.driver-map-top {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(22,119,255,.12) !important;
    box-shadow: 0 18px 42px rgba(22,119,255,.12), inset 0 1px 0 rgba(255,255,255,.76) !important;
}

.driver-status-pill {
    color: var(--ink) !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(22,119,255,.12) !important;
    box-shadow: 0 12px 28px rgba(22,119,255,.08) !important;
}

.driver-status-pill.is-online {
    color: #09a989 !important;
    box-shadow: 0 14px 30px rgba(32,224,191,.14) !important;
}

.driver-status-dot,
.field-dot.destination,
.route-dot.to {
    background: linear-gradient(135deg, #20e0bf, #18d7ff) !important;
    box-shadow: 0 0 0 7px rgba(32,224,191,.12), 0 10px 24px rgba(32,224,191,.16) !important;
}

.field-dot.pickup,
.route-dot.from {
    background: linear-gradient(135deg, #1677ff, #18b9ff) !important;
    box-shadow: 0 0 0 7px rgba(22,119,255,.11), 0 10px 24px rgba(22,119,255,.15) !important;
}

.driver-bottom-sheet,
.driver-request-card,
.driver-card,
.driver-live-box,
.driver-offer-dialog {
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(22,119,255,.13) !important;
    color: var(--ink) !important;
    box-shadow: 0 30px 80px rgba(22,119,255,.13), 0 10px 28px rgba(6,19,51,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.driver-avatar-small,
.nav-driver-avatar,
.driver-avatar {
    background: linear-gradient(135deg, #ffffff, #eef8ff) !important;
    border-color: rgba(22,119,255,.13) !important;
    box-shadow: 0 14px 26px rgba(22,119,255,.10) !important;
}

.driver-offer-backdrop {
    background: rgba(225,239,255,.66) !important;
}

.driver-offer-close {
    background: rgba(255,255,255,.86) !important;
    color: var(--ink) !important;
    border-color: rgba(22,119,255,.12) !important;
}

.driver-map-hint {
    color: var(--ink) !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(22,119,255,.14) !important;
    box-shadow: 0 16px 34px rgba(22,119,255,.11) !important;
}

/* Admin */
.admin-header,
.admin-card,
.admin-stats article,
.admin-login-card {
    color: var(--ink) !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(22,119,255,.13) !important;
    box-shadow: 0 24px 70px rgba(22,119,255,.11), 0 9px 25px rgba(6,19,51,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.admin-table th {
    color: #1677ff !important;
}

.admin-table td,
.admin-table th {
    border-bottom-color: rgba(22,119,255,.09) !important;
    color: var(--ink) !important;
}

.admin-table small,
.admin-stats small,
.status-pill,
.admin-field {
    color: var(--ink-soft) !important;
}

.admin-map,
.driver-map {
    border-color: rgba(22,119,255,.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 18px 44px rgba(22,119,255,.09) !important;
}

.status-pill.online {
    color: #08a884 !important;
    background: rgba(32,224,191,.11) !important;
    border-color: rgba(32,224,191,.24) !important;
}

.status-pill.idle {
    color: #1677ff !important;
    background: rgba(22,119,255,.09) !important;
}

.status-pill.off {
    color: #e64667 !important;
    background: rgba(255,85,116,.10) !important;
}

.admin-nav-tabs .mini-btn.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #1677ff, #12b7ff, #20e0bf) !important;
    box-shadow: 0 18px 40px rgba(22,119,255,.20) !important;
}

.admin-alert.success {
    color: #098b80 !important;
    background: rgba(32,224,191,.11) !important;
    border-color: rgba(32,224,191,.24) !important;
}

.admin-alert.warning {
    color: #a76a00 !important;
    background: rgba(255,184,77,.13) !important;
    border-color: rgba(255,184,77,.28) !important;
}

.admin-driver-marker,
.driver-div-icon {
    color: #fff !important;
    background: linear-gradient(135deg, #1677ff, #12b7ff, #20e0bf) !important;
    box-shadow: 0 16px 30px rgba(22,119,255,.18) !important;
}

/* Auth and secondary pages */
.auth-screen,
.list-screen,
.screen-receipt,
.driver-page-shell {
    color: var(--ink) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(22,119,255,.11), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(32,224,191,.12), transparent 28%),
        linear-gradient(160deg, #ffffff, #eef8ff) !important;
}

.auth-card,
.driver-card,
.receipt-card {
    background: rgba(255,255,255,.93) !important;
}

.auth-card p,
.auth-form label,
.check-row,
.history-card p,
.history-card small,
.driver-card small {
    color: var(--ink-soft) !important;
}

.auth-logo {
    filter: drop-shadow(0 18px 30px rgba(22,119,255,.16)) !important;
}

.receipt-route,
.driver-card textarea {
    background: rgba(246,251,255,.82) !important;
    border-color: rgba(22,119,255,.13) !important;
    color: var(--ink) !important;
}

/* Brand polish */
.splash-logo::after,
.auth-card::before,
.driver-card::before,
.admin-header::before,
.simple-order-sheet::before,
.uber-confirm-sheet::before {
    content: "";
    pointer-events: none;
}

.auth-card::before,
.driver-card::before,
.admin-header::before,
.simple-order-sheet::before,
.uber-confirm-sheet::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.70), transparent 30%, transparent 78%, rgba(32,224,191,.08));
    opacity: .65;
}

.auth-card,
.driver-card,
.admin-header,
.simple-order-sheet,
.uber-confirm-sheet {
    position: relative;
    overflow: hidden;
}

.auth-card > *,
.driver-card > *,
.admin-header > *,
.simple-order-sheet > *,
.uber-confirm-sheet > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px) {
    .phone-frame {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
        min-height: 100dvh;
    }

    .screen,
    .splash-screen,
    .map-screen {
        min-height: 100dvh;
    }

    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel,
    body:not(.showcase-body).is-map-location-picking .simple-booking-screen .simple-order-sheet.uber-route-panel,
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel[data-picker-active="true"] {
        border-radius: 28px !important;
        top: calc(102px + env(safe-area-inset-top)) !important;
        left: 18px !important;
        right: 18px !important;
    }

    .uber-confirm-sheet.simple-ride-form {
        border-radius: 30px !important;
    }

    .floating-menu,
    .nav-recenter,
    .map-status {
        top: calc(24px + env(safe-area-inset-top)) !important;
    }

    .customer-profile-chip {
        top: calc(104px + env(safe-area-inset-top)) !important;
        background: rgba(255,255,255,.84) !important;
    }

    .driver-map-top {
        border-radius: 24px !important;
    }
}

@media (min-width: 700px) and (max-width: 1180px) {
    body:not(.showcase-body) .simple-booking-screen .simple-order-sheet.uber-route-panel,
    .uber-confirm-sheet.simple-ride-form {
        width: min(520px, 46vw) !important;
    }
}

/* === Ordely Ride booking page redesign (pickup / drop-off) === */
.ordely-booking-v3 {
    --ordely-surface: rgba(255,255,255,.94);
    --ordely-surface-soft: rgba(248,251,255,.94);
    --ordely-border: rgba(22,119,255,.12);
    --ordely-shadow: 0 18px 48px rgba(22,119,255,.12), 0 10px 24px rgba(6,19,51,.06);
}

.ordely-booking-v3 .osm-map {
    filter: saturate(.88) brightness(1.04);
}

.ordely-booking-v3 .map-ambient {
    background:
        linear-gradient(180deg, rgba(247,250,255,.45) 0%, rgba(247,250,255,0) 34%),
        linear-gradient(0deg, rgba(247,250,255,.72) 0%, rgba(247,250,255,0) 32%);
}

.ordely-booking-v3 .ordely-float-btn {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--ordely-border) !important;
    color: #25344d !important;
    box-shadow: var(--ordely-shadow) !important;
}

.ordely-booking-v3 .ordely-gps-btn {
    width: 74px;
    font-weight: 900;
    letter-spacing: .02em;
}

.ordely-booking-v3 .ordely-map-status {
    max-width: 540px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--ordely-border) !important;
    color: #1472ff !important;
    box-shadow: var(--ordely-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 17px;
    font-weight: 800;
}

.ordely-booking-v3 .ordely-profile-chip {
    top: calc(108px + env(safe-area-inset-top));
    right: 20px;
    gap: 8px;
    padding: 11px 14px;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--ordely-border) !important;
    box-shadow: var(--ordely-shadow) !important;
    color: #25344d !important;
}

.ordely-booking-v3 .ordely-profile-chip small,
.ordely-booking-v3 .ordely-profile-chip strong {
    color: #25344d !important;
}

.ordely-booking-stack {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 360;
    display: grid;
    gap: 14px;
}

.ordely-booking-v3 .simple-order-sheet.uber-route-panel,
.ordely-booking-v3 .uber-confirm-sheet.simple-ride-form {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--ordely-surface) !important;
    border: 1px solid var(--ordely-border) !important;
    box-shadow: var(--ordely-shadow) !important;
}

.ordely-booking-v3 .simple-order-sheet.uber-route-panel {
    border-radius: 34px !important;
    padding: 18px 18px 16px !important;
}

.ordely-booking-v3 .uber-confirm-sheet.simple-ride-form {
    border-radius: 34px !important;
    padding: 18px 18px 16px !important;
}

.ordely-booking-v3 .ordely-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.ordely-booking-v3 .ordely-order-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #f8fbff;
    border: 1px solid var(--ordely-border);
    font-size: 14px;
    color: #1a9b8a;
}

.ordely-booking-v3 .ordely-order-head small {
    max-width: 210px;
    text-align: right;
    font-size: 14px;
    line-height: 1.35;
}

.ordely-booking-v3 .ordely-location-box {
    display: grid;
    gap: 12px;
}

.ordely-booking-v3 .ordely-location-row {
    min-height: 88px;
    border-radius: 24px;
    background: var(--ordely-surface-soft) !important;
    border: 1px solid rgba(22,119,255,.10) !important;
    padding: 16px 16px 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.ordely-booking-v3 .ordely-location-row .simple-location-copy {
    min-width: 0;
}

.ordely-booking-v3 .ordely-location-row .simple-location-copy small {
    margin-bottom: 6px;
    display: block;
    color: #7382a0 !important;
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 700;
}

.ordely-booking-v3 .ordely-location-row .simple-location-copy input {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 850;
    color: #10192d !important;
}

.ordely-booking-v3 .ordely-location-row button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f9ff !important;
    border: 1px solid rgba(22,119,255,.12) !important;
    color: #8d9cbc !important;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
}

.ordely-booking-v3 .ordely-meta-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0 12px;
}

.ordely-booking-v3 .ordely-meta-pills span {
    min-height: 48px;
    border-radius: 16px;
    background: #f9fbff;
    border: 1px solid rgba(22,119,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #4b5b77;
    font-weight: 800;
}

.ordely-booking-v3 .ordely-meta-pills b {
    color: inherit;
}

.ordely-booking-v3 .ordely-pick-tabs {
    margin-top: 0;
    padding: 6px;
    border-radius: 20px;
    background: #f8fbff !important;
    border: 1px solid rgba(22,119,255,.10) !important;
}

.ordely-booking-v3 .ordely-pick-tabs button {
    min-height: 50px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
}

.ordely-booking-v3 .ordely-quick-destinations {
    margin-top: 12px;
    padding-bottom: 2px;
}

.ordely-booking-v3 .ordely-quick-destinations button {
    min-width: 155px;
    min-height: 54px;
    border-radius: 18px;
    background: #fff !important;
}

.ordely-booking-v3 .ordely-route-ready {
    margin-bottom: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(250,252,255,.96), rgba(245,250,255,.92)) !important;
}

.ordely-booking-v3 .ordely-fare-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ordely-booking-v3 .ordely-fare-head strong {
    font-size: 20px;
}

.ordely-booking-v3 .ordely-class-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ordely-booking-v3 .ordely-ride-class {
    border-radius: 24px;
    padding: 16px 12px 14px;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 6px;
    min-height: 174px;
}

.ordely-booking-v3 .ordely-ride-class input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ordely-booking-v3 .ordely-car-visual {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(22,119,255,.10));
}

.ordely-booking-v3 .ordely-ride-class strong {
    font-size: 18px;
    line-height: 1.15;
}

.ordely-booking-v3 .ordely-ride-class b {
    color: #10192d;
    font-size: 18px;
    line-height: 1.15;
}

.ordely-booking-v3 .ordely-ride-class small {
    color: #6d7d9a !important;
    font-size: 14px;
    line-height: 1.15;
}

.ordely-booking-v3 .ordely-payment-methods {
    margin-top: 14px;
    padding: 0;
    gap: 10px;
}

.ordely-booking-v3 .ordely-payment-methods label {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
    background: #f8fbff !important;
}

.ordely-booking-v3 .ordely-promo-field {
    margin-top: 14px;
}

.ordely-booking-v3 .ordely-promo-field input {
    min-height: 52px;
    border-radius: 18px;
    background: #f9fbff !important;
    color: #0f1a30 !important;
}

.ordely-booking-v3 .ordely-payment-line {
    margin-top: 14px;
    min-height: 58px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248,251,255,.95), rgba(244,249,255,.92)) !important;
}

.ordely-booking-v3 .ordely-payment-line b {
    font-size: 20px;
}

.ordely-booking-v3 .ordely-form-message {
    min-height: 24px;
    margin: 10px 4px 6px;
    text-align: center;
}

.ordely-booking-v3 .ordely-confirm-btn {
    min-height: 60px;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 850;
    background: linear-gradient(90deg, #1677ff 0%, #12b7ff 45%, #20e0bf 100%) !important;
    box-shadow: 0 20px 42px rgba(22,119,255,.20) !important;
}

.ordely-booking-v3 .ordely-trust-line {
    margin-top: 12px;
    text-align: center;
    color: #7f8ca8;
    font-size: 14px;
    font-weight: 700;
}

.ordely-booking-v3 .ordely-trust-line::before {
    content: "🛡️";
    margin-right: 8px;
}

@media (min-width: 701px) {
    .ordely-booking-stack {
        width: min(430px, 36vw);
        right: 24px;
        left: auto;
    }
}

@media (max-width: 700px) {
    .ordely-booking-v3 .ordely-map-status {
        max-width: calc(100% - 170px);
        font-size: 16px;
        line-height: 1.25;
        min-height: 56px;
        padding: 14px 18px;
    }

    .ordely-booking-v3 .ordely-profile-chip {
        top: calc(96px + env(safe-area-inset-top));
        right: 12px;
        padding: 9px 12px;
        gap: 6px;
    }

    .ordely-booking-stack {
        left: 14px;
        right: 14px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .ordely-booking-v3 .simple-order-sheet.uber-route-panel,
    .ordely-booking-v3 .uber-confirm-sheet.simple-ride-form {
        border-radius: 28px !important;
        padding: 14px !important;
    }

    .ordely-booking-v3 .ordely-order-head {
        gap: 10px;
        margin-bottom: 12px;
    }

    .ordely-booking-v3 .ordely-order-head .eyebrow {
        font-size: 13px;
        padding: 8px 13px;
    }

    .ordely-booking-v3 .ordely-order-head small {
        font-size: 12px;
        max-width: 160px;
    }

    .ordely-booking-v3 .ordely-location-row {
        min-height: 80px;
        padding: 14px 14px 14px 16px;
        gap: 12px;
    }

    .ordely-booking-v3 .ordely-location-row .simple-location-copy input {
        font-size: 18px;
    }

    .ordely-booking-v3 .ordely-location-row button {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .ordely-booking-v3 .ordely-meta-pills {
        gap: 8px;
    }

    .ordely-booking-v3 .ordely-meta-pills span {
        min-height: 44px;
        font-size: 13px;
    }

    .ordely-booking-v3 .ordely-pick-tabs button {
        min-height: 46px;
        font-size: 14px;
    }

    .ordely-booking-v3 .ordely-quick-destinations {
        display: none;
    }

    .ordely-booking-v3 .ordely-fare-head strong {
        font-size: 18px;
    }

    .ordely-booking-v3 .ordely-fare-head small {
        font-size: 12px;
        max-width: 118px;
        text-align: right;
    }

    .ordely-booking-v3 .ordely-class-list {
        gap: 10px;
    }

    .ordely-booking-v3 .ordely-ride-class {
        min-height: 154px;
        padding: 14px 8px 12px;
        gap: 5px;
        border-radius: 20px;
    }

    .ordely-booking-v3 .ordely-car-visual {
        width: 56px;
        height: 56px;
    }

    .ordely-booking-v3 .ordely-ride-class strong,
    .ordely-booking-v3 .ordely-ride-class b {
        font-size: 16px;
    }

    .ordely-booking-v3 .ordely-ride-class small {
        font-size: 12px;
    }

    .ordely-booking-v3 .ordely-payment-methods label {
        min-height: 44px;
        font-size: 14px;
        padding: 8px 12px;
    }

    .ordely-booking-v3 .ordely-promo-field {
        display: none;
    }

    .ordely-booking-v3 .ordely-payment-line {
        margin-top: 12px;
        min-height: 54px;
    }

    .ordely-booking-v3 .ordely-payment-line b {
        font-size: 18px;
    }

    .ordely-booking-v3 .ordely-confirm-btn {
        min-height: 56px;
        font-size: 18px;
    }

    .ordely-booking-v3 .ordely-trust-line {
        font-size: 12px;
    }
}