:root {
    --font-family-app: "LiftLink Roboto", Roboto, "Noto Sans", system-ui, sans-serif;
    --text-primary: #083A28;
    --text-secondary: #526B61;
    --text-accent: #18B95F;
    --text-on-dark: #FFFFFF;
    --text-muted: #7B8C85;
    --text-error: #C62828;
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --line: #e3ebe7;
    --paper: #ffffff;
    --wash: #f5f0e4; /* matches .public-home's parchment background so every page reads as one product */
    --brand: var(--text-primary);
    --brand-2: var(--text-accent);
    --accent: var(--text-accent);
    --warn: #a14a00;
}


@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-Thin.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-ThinItalic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-Light.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-LightItalic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-Regular.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-Italic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-Medium.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-MediumItalic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-SemiBold.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-SemiBoldItalic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-SemiBold.ttf?v=20260809-2") format("truetype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}
@font-face {
    font-family: "LiftLink Roboto";
    src: url("../fonts/roboto/Roboto-SemiBoldItalic.ttf?v=20260809-2") format("truetype");
    font-style: italic;
    font-weight: 700 900;
    font-display: swap;
}

.driver-card-payment-card{display:flex;gap:12px;padding:15px;margin-bottom:14px;border:1px solid #bfe7cf;border-radius:16px;background:#effaf3}.driver-card-payment-card>div{display:grid;gap:4px}.driver-card-payment-card small,.driver-card-payment-note{color:#65736b;font-size:.76rem;line-height:1.45}.driver-card-payment-lock{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:50%;background:#26c970;color:#082615;font-weight:900}.driver-card-payment-form{padding:16px;border:1px solid #dce5e0;border-radius:18px;background:#fff}.driver-card-payment-note{padding:11px;border-radius:12px;background:#f2f5f3}
.lift-join-sheet{max-height:min(88vh,720px);overflow-y:auto}.lift-join-sheet>label{display:block;margin-top:11px;font-size:.78rem;font-weight:700}.lift-join-sheet input,.lift-join-sheet textarea{width:100%;box-sizing:border-box;margin-top:5px;padding:12px;border:1px solid #cdd9d2;border-radius:12px;background:#fff;font:inherit}.lift-join-sheet textarea{min-height:70px;resize:vertical}.lift-join-fare{display:block;margin-top:10px;padding:12px;border-radius:12px;background:#edf5f0;color:#103d2a}
.lift-trip-terms-preview,.lift-terms-box{margin:12px 0;padding:13px;border:1px solid #cfe2d7;border-radius:14px;background:#f3faf6}.lift-trip-terms-preview small{display:block;margin-top:4px;color:#607068}.lift-terms-box>strong{font-size:.9rem}.lift-terms-box ul{margin:8px 0;padding-left:18px;color:#435149;font-size:.78rem}.lift-terms-box p{padding:9px;border-radius:9px;background:#fff;color:#435149;font-size:.78rem;white-space:pre-wrap}.lift-terms-accept{display:flex!important;align-items:flex-start;gap:9px;margin-top:10px!important;font-weight:700!important}.lift-terms-accept input{width:20px!important;height:20px;margin:0!important;flex:0 0 20px}.lift-terms-accept span{font-size:.78rem;line-height:1.35}
#backToRideBtn{display:none !important}

/* Ensure [hidden] always wins over any display rule */
[hidden] { display: none !important; }

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

/* Allow selection inside text inputs and textareas */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}
.d-none{display: none !important;}
html, body {
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    background: var(--wash);
    color: var(--ink);
    font-family: var(--font-family-app);
    font-size: 15px;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Resume freeze ─────────────────────────────────────────────────────────
   Applied for ~350 ms after app foreground so that no CSS transition or
   animation re-runs and causes visual "jumps".  JS adds / removes this class
   via the Cordova "resume" event.
   ───────────────────────────────────────────────────────────────────────── */
body.app-resuming * {
    transition-duration: 0ms !important;
    animation-duration:  0ms !important;
}

.bolt-shell {
    --brand: var(--text-primary);
    --brand-2: var(--text-accent);
    --accent: var(--text-accent);
}

button, input, textarea, select {
    font-family: var(--font-family-app);
    font-size: inherit;
    line-height: inherit;
}

/* Enforce the bundled Android typeface across static and API-rendered UI. */
html, body, body *, body *::before, body *::after,
button, input, textarea, select, option, optgroup {
    font-family: var(--font-family-app) !important;
}

button {
    border: 0;
    cursor: pointer;
}

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

/* Native Android-style interaction: no sticky browser highlight after a tap. */
a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
input[type="reset"]:focus:not(:focus-visible) {
    outline: none !important;
}

/* Touch devices must not retain desktop hover treatments after activation. */
@media (hover:none), (pointer:coarse) {
.vehicle-wizard-progress{display:grid;grid-template-columns:30px minmax(20px,1fr) 30px;align-items:center;gap:7px;margin-bottom:17px}.vehicle-wizard-progress>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#dfe9e3;color:#6a7b73;font-weight:800}.vehicle-wizard-progress>span.active{background:#20c970;color:#073f30}.vehicle-wizard-progress>i{height:3px;border-radius:99px;background:#dfe9e3}.vehicle-wizard-progress>small{grid-column:1/-1;color:var(--muted);text-align:center}.vehicle-wizard-step>h3{margin:0 0 4px}.vehicle-wizard-step>p{margin:0 0 13px;color:var(--muted);font-size:.8rem}.vehicle-editor-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.vehicle-editor-actions #cancelVehicleEditBtn{grid-column:1/-1}
    .google-btn:hover { box-shadow:0 1px 3px rgba(0,0,0,.08); }
    .facebook-btn:hover { box-shadow:0 1px 3px rgba(24,119,242,.25); }
    .lp-side-nav-item:hover { background:transparent; }
}

/* Unified native data-entry controls. Ordinary fields use one filled Android
   treatment throughout authenticated, sign-up and password-reset flows. Rich
   interaction controls (chat composers, file inputs and Google suggestions)
   keep their purpose-built presentation. */
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),select,textarea):not(.pac-target-input),
.pac-target-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 4px 0;
    padding: 14px 15px;
    border: 0;
    border-bottom: 2px solid #a9bbb2;
    border-radius: 9px 9px 0 0;
    outline: 0;
    background: #eaf1ed;
    color: #073f30;
    font: inherit;
    line-height: 1.3;
    box-shadow: none;
    caret-color: #078b50;
    transition: background-color .14s ease,border-color .14s ease;
}
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea):focus,
.pac-target-input:focus {
    border-bottom-color: #13b967;
    background: #e2f2e9;
    outline: 0;
    box-shadow: none;
}
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  :is(input,select,textarea)::placeholder { color: #71837b; opacity: 1; }
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  :is(input,select,textarea):disabled,
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  :is(input,textarea)[readonly] { background:#edf1ef; color:#74837c; opacity:1; }
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  textarea { min-height: 96px; resize: vertical; }

/* Address fields with route icons use the same material surface on the wrapper
   so their inner inputs do not draw a second underline. */
.lift-request-location-field {
    border: 0 !important;
    border-bottom: 2px solid #a9bbb2 !important;
    border-radius: 9px 9px 0 0 !important;
    background: #eaf1ed !important;
    box-shadow: none !important;
}
.lift-request-location-field:focus-within {
    border-bottom-color: #13b967 !important;
    background: #e2f2e9 !important;
}
.lift-request-location-field input {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* WhatsApp-like composers are toolbars, not form fields. */
:is(.lift-chat-composer,.lift-club-message-compose,.group-booking-chat form) :is(input,textarea,select) {
    min-height: 44px;
    margin: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;
    resize: none;
}

/* Browser autofill must retain the app surface rather than painting blue or
   yellow HTML fields over it. */
:is(body[data-page="app"],body[data-page="signup"],body[data-page="reset-password"])
  input:-webkit-autofill {
    -webkit-text-fill-color: #073f30;
    -webkit-box-shadow: 0 0 0 1000px #eaf1ed inset;
    transition: background-color 9999s ease-out 0s;
}

.view, .tab, .auth-panel, .role-view {
    display: none;
}

.view.active, .tab.active, .auth-panel.active, .role-view.active {
    display: block;
}

.boot {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #071311;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}
#sessionLabel{display: none !important;}
.landing-nav {
    position: absolute;
    z-index: 3;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-link {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 999px;
    padding: 0 16px;
    background: #e8efed;
    color: var(--ink);
    font-weight: 800;
}

.landing-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    border-radius: 0;
    background: #071311;
    color: #fff;
}

.landing-map {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(30deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 68px 68px,
        radial-gradient(circle at 76% 18%, rgba(15,122,93,0.55), transparent 32%),
        radial-gradient(circle at 20% 78%, rgba(240,201,76,0.28), transparent 30%);
}

.live-landing .landing-map {
    background: #dfe8e5;
}

.live-landing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 19, 17, 0.06), rgba(7, 19, 17, 0.74));
}

.landing-copy {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: calc(var(--sab, 0px) + 72px);
    left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 22px;
    background: rgba(7, 19, 17, 0.9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

.landing-copy h1 {
    max-width: 720px;
    margin: 0;
    font-size: 34px;
    line-height: 1.02;
}

.landing-copy p {
    max-width: 600px;
    margin: 18px 0 24px;
    color: rgba(255,255,255,0.78);
    font-size: 17px;
    line-height: 1.5;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.landing-grid article {
    min-height: 148px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
}

.landing-grid strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}

.landing-grid span {
    color: var(--muted);
    line-height: 1.4;
}

/* ── Redesigned boot / splash screen ──────────────────────────────────── */

/* Subtle dot-grid overlay */
.boot-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 60% 20%, rgba(52,201,107,0.18) 0%, transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(52,201,107,0.10) 0%, transparent 45%),
        radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.08) 1px, transparent 0) 0 0 / 28px 28px;
    pointer-events: none;
}

/* Large circular icon in the upper half */
.boot-splash-icon {
    position: relative;
    z-index: 1;
    margin-top: calc(env(safe-area-inset-top, 0px) + 14vh);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.boot-splash-ring {
    /* Container — no background, no border, no clipping.
       The image already contains the full green circle design. */
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bootRingPulse 3s ease-in-out infinite;
}

@keyframes bootRingPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(52,201,107,0.35)) drop-shadow(0 0 28px rgba(52,201,107,0.18)); }
    50%       { filter: drop-shadow(0 0 18px rgba(52,201,107,0.55)) drop-shadow(0 0 50px rgba(52,201,107,0.28)); }
}

.boot-splash-img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* App name below the icon */
.boot-app-name {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    text-align: center;
    flex-shrink: 0;
}
.boot-app-wordmark {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
}

/* Bottom content block */
.boot-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding: 28px 22px calc(var(--sab, 0px) + 28px);
}

.brand-lockup {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 800;
    font-size: 16px;
}

/* "Ride" accent colour — used wherever the brand name appears */
.brand-ride { color: #18B95F; }

.brand-lockup.dark {
    color: var(--ink);
}

/* spacing only when used as a standalone block (boot screen) */
.boot-content .brand-lockup {
    margin-bottom: 20px;
    display: none; /* replaced by .boot-app-name above the content block */
}

.brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.brand-logo-lockup {
    display: block;
    width: 124px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--accent);
    color: #071311;
}

.boot h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(38px, 11vw, 62px);
    line-height: 0.96;
}

.boot p {
    max-width: 560px;
    margin: 18px 0 24px;
    color: rgba(255,255,255,0.78);
    font-size: 16px;
    line-height: 1.5;
}

.boot-actions, .social-row, .field-pair, .segment-row, .landing-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.landing-actions button {
    border: 0;
}

.landing-actions.logged-in {
    grid-template-columns: 1fr;
}

/* ── Landing-page bottom nav bar ── */
.landing-bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 0;
    grid-template-columns: unset;
    padding: 0 0 var(--sab, 0px);
    background: rgba(7, 19, 17, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.landing-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 12px;
    color: rgba(255,255,255,0.55);
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    text-decoration: none;
}

.landing-action.active,
.landing-action:active {
    color: var(--accent);
}

.landing-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.landing-action-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.landing-action strong {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.primary, .ghost, .secondary, .mode-switch button, .tabs button, .segment-row button, .social-row button, .link-button {
    display: grid;
    place-items: center;
    min-height: 44px;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 800;
}

.primary {
    background: var(--brand);
    color: #fff;
}

.bolt-cta {
    min-height: 48px;
    background: var(--brand-2);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 14px 28px rgba(52,201,107,0.28);
}

.boot .primary {
    background: #fff;
    color: var(--ink);
}

.ghost {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.secondary, .social-row button, .segment-row button {
    background: #eef4f1;
    color: var(--ink);
}

/* .view.active sets display:block (2-class specificity) so we must match it */
.auth-screen.view,
.auth-screen {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    background: var(--wash);
    padding-top: calc(62px + var(--visual-viewport-top, 0px));
}

/* Fixed toolbar area */
.auth-header-wrap {
    position: fixed;
    top: var(--visual-viewport-top, 0px);
    left: 0;
    right: 0;
    flex-shrink: 0;
    padding: 10px 14px 0;
    background: var(--wash);
    z-index: 410;
    transform: translateZ(0);
    will-change: top;
}

/* Scrollable content below the toolbar */
.auth-body {
    flex: 1 1 0;
    min-height: 0;       /* required — flex children don't shrink below content height by default */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 14px calc(var(--sab, 0px) + 20px);
}

.policy-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    padding: 64px 14px calc(var(--sab, 0px) + 24px);
    background: var(--wash);
}

.policy-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: var(--wash);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 8px rgba(7,19,17,0.07);
}

.policy-header .brand-lockup {
    margin-bottom: 0;
    color: var(--ink);
}

.policy-card {
    display: grid;
    gap: 12px;
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(7,19,17,0.06);
}

.policy-card h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.05;
}

.policy-card p {
    margin: 0;
    color: #3f4c47;
    line-height: 1.55;
}

.auth-header, .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.auth-header {
    min-height: 44px;
    margin-bottom: 0;
}

.auth-header .brand-lockup {
    margin-bottom: 0;
}

.round-btn {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: var(--ink);
    font-size: 18px;
    box-shadow: 0 12px 28px rgba(17,24,22,0.1);
}

.external-back-btn {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
    place-items: center;
    border: 0;
    text-decoration: none;
}

.external-back-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.auth-card, .sheet, .hero-panel, .item {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
    box-shadow: 0 18px 50px rgba(7,19,17,0.07);
}

.auth-card {
    padding: 12px;
    max-width: 520px;
    margin: 0 auto;
}

/* Registration and sign-in are primary app screens, not desktop dialogs. */
body[data-page="signup"] .auth-body {
    width: 100%;
}

body[data-page="signup"] .auth-card {
    width: 100%;
    max-width: none;
    margin: 0;
}

.mode-switch, .tabs, .role-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: #edf3f1;
}

.role-switch {
    min-width: 124px;
    padding: 3px;
    border: 1px solid rgba(17,24,22,0.06);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 12px 28px rgba(17,24,22,0.1);
}

.mode-switch button, .tabs button, .role-switch button {
    min-height: 34px;
    background: transparent;
    color: var(--muted);
}

.auth-screen .mode-switch button,
.auth-screen .primary,
.auth-screen .social-row button {
    min-height: 40px;
}

.mode-switch button.active, .tabs button.active, .role-switch button.active {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 8px 18px rgba(17,24,22,0.14);
}

.auth-panel {
    padding-top: 12px;
}

.auth-panel-intro {
    margin: -7px 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.auth-method-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border-radius: 14px;
    background: #edf3f1;
}

.auth-method-switch button {
    min-height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
}

.auth-method-switch button.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(5, 67, 48, .10);
}

.phone-auth-fields {
    margin-bottom: 8px;
}

.phone-auth-fields .secondary {
    margin: 0 0 10px;
}

h2, h3 {
    margin: 0 0 14px;
}

h2 {
    font-size: 24px;
    line-height: 1.05;
}

h3 {
    font-size: 18px;
}

label {
    display: grid;
    gap: 5px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

input, textarea, select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 12px;
    background: #fbfdfc;
    color: var(--ink);
}

textarea {
    min-height: 82px;
    resize: vertical;
}

/* ── Auth full-width buttons ── */
.auth-full-btn,
.auth-panel .primary {
    width: 100%;
    margin-top: 4px;
}

/* ── Password field with toggle ── */
.pw-field {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-field input {
    padding-right: 48px;
}
.pw-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 16px 16px 0;
    min-height: unset;
}
.pw-toggle:hover { color: var(--ink); }

/* ── Password strength bar ── */
.pw-strength {
    display: flex;
    gap: 5px;
    height: 4px;
    margin: 6px 0 2px;
}
.pw-strength-seg {
    flex: 1;
    border-radius: 2px;
    background: var(--line);
    transition: background .2s;
}
.pw-strength[data-score="1"] .pw-strength-seg:nth-child(1) { background: #ef4444; }
.pw-strength[data-score="2"] .pw-strength-seg:nth-child(-n+2) { background: #f97316; }
.pw-strength[data-score="3"] .pw-strength-seg:nth-child(-n+3) { background: #eab308; }
.pw-strength[data-score="4"] .pw-strength-seg { background: #22c55e; }
.pw-strength-label {
    font-size: 11px;
    color: var(--muted);
    margin: 0 0 8px;
    min-height: 16px;
}

/* ── Social divider ── */
.social-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.social-divider::before,
.social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Social login buttons ── */
.social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border-radius: 16px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: opacity .15s, box-shadow .15s;
    padding: 0 16px;
}
.social-btn:active { opacity: .85; }

.google-btn {
    background: #fff;
    color: #3c4043;
    border: 1.5px solid #dadce0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.google-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.13); }

.facebook-btn {
    background: #1877f2;
    color: #fff;
    box-shadow: 0 1px 3px rgba(24,119,242,.25);
}
.facebook-btn:hover { box-shadow: 0 2px 8px rgba(24,119,242,.4); }

.social-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.social-auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1800;
    background: rgba(7, 25, 19, .52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.social-auth-backdrop.open { opacity: 1; pointer-events: auto; }
.social-auth-modal {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 1810;
    display: grid;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
    box-shadow: 0 22px 60px rgba(7, 25, 19, .24);
    transform: translateY(calc(100% + 30px));
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.social-auth-modal.open { transform: translateY(0); }
.social-auth-modal[hidden] { display: none !important; }
.social-auth-handle { width: 38px; height: 4px; margin: 0 auto 4px; border-radius: 99px; background: var(--line); }
.social-auth-provider-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.social-auth-provider-icon svg { width: 28px; height: 28px; }
.social-auth-modal h2 { margin: 0; }
.social-auth-modal p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.social-auth-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; margin-top: 4px; }
.social-auth-actions button { min-height: 46px; }

body[data-page] > .view,
body[data-page] > .policy-page { animation: liftlink-page-enter .18s cubic-bezier(.2,.8,.2,1) both; }
body.native-page-leaving > .view,
body.native-page-leaving > .policy-page {
    animation: liftlink-page-exit .13s ease both;
    pointer-events: none;
}
@keyframes liftlink-page-enter { from { opacity: .88; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes liftlink-page-exit { from { opacity: 1; transform: none; } to { opacity: .88; transform: translateX(-8px); } }
@media (prefers-reduced-motion: reduce) {
    body[data-page] > .view,
    body[data-page] > .policy-page,
    body.native-page-leaving > .view,
    body.native-page-leaving > .policy-page { animation: none; }
    .social-auth-backdrop, .social-auth-modal { transition: none; }
}

/* Legacy .social-block kept for any older references */
.social-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.social-block span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.message, .toast {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--warn);
    font-size: 13px;
    line-height: 1.35;
}
.message--success {
    color: #22a05a;
}

/* ── SA phone number live hint ───────────────────────────────────────────── */
.phone-hint {
    display: block;
    min-height: 16px;
    font-size: 12px;
    margin: -8px 0 10px;   /* sit just below the label, above the next field */
    transition: color 0.15s;
}
.phone-hint--ok  { color: #22a05a; font-weight: 600; }
.phone-hint--err { color: #e53e3e; }

.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--wash);
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 10px;
    min-height: 44px;
    background: transparent;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 10px;
    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.app-mark {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-mark img {
    width: 124px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

/* Page-level title shown in the fixed header when a detail view is active */
.app-page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 190px);
    pointer-events: none;
}

/* Hide the in-page row header on rideView — title lives in the fixed header */
#rideView .page-row-header {
    display: none;
}

.side-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.side-menu.active {
    display: block;
}

.side-menu-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(7,19,17,0.42);
    backdrop-filter: blur(8px);
}

.side-menu-panel {
    position: absolute;
    top: 0;                /* full height — no header gap */
    bottom: 0;
    left: 0;
    display: flex;
    width: min(86vw, 360px);
    flex-direction: column;
    padding: 0;            /* padding handled per-section below */
    background: #fff;
    box-shadow: 22px 0 70px rgba(7,19,17,0.24);
    overflow: hidden;      /* panel clips; only the nav body scrolls */
}

/* Pinned brand + close button row — never scrolls away */
.side-menu-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(var(--sat, 0px) + 14px) 16px 12px;
}

/* Pinned user / role card — never scrolls away */
.side-menu-account {
    flex-shrink: 0;
    margin: 0 16px 4px;
    padding: 14px;
    border-radius: 18px;
    background: #f2f7f4;
}

/* Scrollable nav items area */
.side-menu-nav-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 16px calc(var(--sab, 0px) + 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.side-menu-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.side-menu-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--ink);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-menu-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.side-menu-avatar-initial {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

.side-menu-account-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.side-menu-account-info strong {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-menu-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #1a7a5a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    width: fit-content;
}

/* Driver mode — amber tint */
.side-menu-role-badge.driver-badge {
    background: #b35a00;
}

/* Role-switch button inside the drawer */
.role-switch-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #1a7a5a;
    background: #f0faf5;
    color: #1a7a5a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
}

/* SVG icon must not shrink — text takes the remaining space */
.role-switch-drawer-btn svg {
    flex-shrink: 0;
}

/* Label text truncates instead of pushing the button wider */
.role-switch-drawer-btn span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}
.role-switch-drawer-btn:active {
    background: #dff5ea;
}
/* Variant when currently in driver mode (switching to passenger) */
.role-switch-drawer-btn.to-passenger {
    border-color: #b35a00;
    background: #fef8f0;
    color: #b35a00;
}
.role-switch-drawer-btn.to-passenger:active {
    background: #fdebd0;
}

/* Header role badge — replaces the Ride/Drive toggle pill */
.header-role-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
    background: #e8f5ef;
    color: #1a7a5a;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;   /* tapping the header opens the drawer via hamburger */
}
.header-role-badge.driver-badge {
    background: #fef3e2;
    color: #b35a00;
}
.header-notification-btn {
    position:relative;
    width:40px;
    height:40px;
    margin-right:6px;
    display:grid;
    place-items:center;
    flex:0 0 40px;
    border-radius:50%;
    background:#fff;
    color:#17231d;
    box-shadow:0 3px 12px rgba(14,35,25,.08);
}
.header-notification-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.header-notification-btn span { position:absolute; top:0; right:-2px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:99px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; }
.lift-notifications-page { width:100%; max-width:none; box-sizing:border-box; padding-bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 20px); }
.lift-notification-status-list { display:grid; gap:9px; margin-bottom:14px; }
.lift-notification-status-list h3 { margin:0 0 3px; }
.lift-notification-status-card,.lift-notification-item { width:100%; display:block; text-align:left; }
.lift-notification-status-card { padding:14px; border:1px solid #cfe0d6; border-radius:15px; background:#eaf7ef; color:#17231d; }
.lift-notification-status-card.in-progress { border-color:#28c86f; background:#d8f7e4; }
.lift-notification-status-card span,.lift-notification-status-card strong,.lift-notification-status-card small { display:block; }
.lift-notification-status-card span { color:#087b3d; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.lift-notification-status-card strong { margin-top:4px; }
.lift-notification-status-card small { margin-top:4px; color:#68766e; }
.lift-notification-detail-page{background:#f4f8f5}
.lift-notification-detail-card{width:100%;padding:20px;border:1px solid #d7e3dc;border-radius:20px;background:#fff;box-shadow:0 5px 16px rgba(8,58,40,.06)}
.lift-notification-detail-type{display:inline-flex;padding:5px 9px;border-radius:999px;background:#def7e8;color:#087844;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.lift-notification-detail-card h2{margin:14px 0 5px;font-size:1.25rem;line-height:1.25}
.lift-notification-detail-card time{display:block;color:#687a71;font-size:.75rem}
.lift-notification-detail-body{margin:20px 0;padding-top:18px;border-top:1px solid #e0e9e4;color:#29483d;font-size:.92rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.lift-notification-detail-card .action{width:100%;margin-top:8px}
@media(max-width:600px){.lift-notification-detail-card{padding:17px;border-radius:17px}}
.lift-public-reviews-list { display:grid; gap:10px; }
.lift-public-review-card { padding:15px; border:1px solid #dce5e0; border-radius:15px; background:#fff; }
.lift-public-review-card strong { color:#e39b13; letter-spacing:2px; }
.lift-public-review-card p { margin:8px 0; color:#33423a; }
.lift-public-review-card small { color:#718078; }

/* Accent menu link for "Create Account" on the landing side nav */
.menu-link.menu-link--accent {
    background: #f0faf5;
    color: #1a7a5a;
    font-weight: 700;
}

.drawer-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.drawer-list .eyebrow {
    padding: 0 4px;
    margin-bottom: 2px;
}

.menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    padding: 0 14px;
    background: #f7faf8;
    color: var(--ink);
    font-weight: 850;
    text-align: left;
    position: relative;
}

.menu-link.danger {
    margin-top: auto;
    background: #fff3ef;
    color: #9a3214;
}

.drawer-list {
    margin-top: 4px;
}

.eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

main {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.tab {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 64px 14px calc(var(--sab, 0px) + 92px);
}

#passengerTab {
    padding: 0;
    overflow: hidden;
}

.address-step {
    display: none;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    padding: 64px 14px calc(var(--sab, 0px) + 18px);
    background:
        linear-gradient(180deg, rgba(52,201,107,0.12), transparent 42%),
        var(--wash);
}

.address-step.active {
    display: block;
}

.address-card {
    display: grid;
    gap: 12px;
    width: min(560px, 100%);
    margin: 0 auto;
    margin-top:50px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 26px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 18px 46px rgba(17,24,22,0.12);
}

.role-view {
    height: 100vh;
    height: 100dvh;
}

.driver-view {
    overflow-y: auto;
    padding: 64px 14px calc(var(--sab, 0px) + 18px);
    background: var(--wash);
}

.app-page {
    display: none;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 64px 14px calc(var(--sab, 0px) + 18px);
    background: var(--wash);
}

.app-page.active {
    display: block;
}

.page-sheet {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
}

.activity-shell {
    display: grid;
    gap: 12px;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--sab, 0px) - 78px);
}

#historyView {
    background: #fff;
}

#historyView .list {
    align-content: start;
    margin-top: 0;
}

#historyView .item {
    border-radius: 18px;
    background: #f7faf8;
}

.detail-stack {
    display: grid;
    gap: 10px;
}

.muted-copy {
    color: var(--muted);
    line-height: 1.4;
}

.profile-photo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0;
}

.profile-photo-row img {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    object-fit: cover;
    background: #dfe8e5;
}

.vehicle-list {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.vehicle-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fbfdfc;
}

.vehicle-card img {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    object-fit: cover;
    background: #dfe8e5;
}

.vehicle-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.vehicle-card strong,
.vehicle-card span,
.vehicle-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-card span,
.vehicle-card small {
    color: var(--muted);
    line-height: 1.35;
}

.vehicle-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.vehicle-actions button {
    width: auto;
    min-height: 36px;
    border-radius: 999px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 800;
}

.vehicle-actions button.danger {
    background: #ffe7e1;
    color: #a12b18;
}

.vehicle-editor {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.vehicle-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.photo-picker {
    position: relative;
    overflow: hidden;
}

.photo-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(15,122,93,0.14), transparent 52%),
        #fff;
}

.hero-panel.drive {
    background:
        linear-gradient(135deg, rgba(240,201,76,0.22), transparent 56%),
        #fff;
}

.hero-panel.trips {
    background:
        linear-gradient(135deg, rgba(6,31,26,0.11), transparent 58%),
        #fff;
}

.route-card {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.sheet {
    margin-bottom: 12px;
    padding: 16px;
}

.priority-sheet {
    border-color: rgba(52,201,107,0.45);
}

.collapsible-panel summary {
    cursor: pointer;
    list-style: none;
    font-weight: 900;
}

.collapsible-panel summary::-webkit-details-marker {
    display: none;
}

/* ── Expandable booking bottom sheet ─────────────────────────── */
.ride-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-nav-height, 56px) + var(--safe-bottom, 0px));
    z-index: 902;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 40px rgba(17,24,22,0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.34s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Three snap heights — driven by data-sheet-state */
.ride-bottom-sheet[data-sheet-state="peek"]    { height: 112px; }
.ride-bottom-sheet[data-sheet-state="default"] { height: min(50vh, 440px); }
.ride-bottom-sheet[data-sheet-state="full"]    { height: min(86vh, 680px); }

.ride-bottom-sheet:not(.active) { display: none; }

/* Drag handle bar */
.sheet-handle-bar {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}
.sheet-handle-bar:active { cursor: grabbing; }
.sheet-handle-pill {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #c8d4cf;
}

/* Scrollable body */
.sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px 8px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* Sticky CTA at the bottom of the sheet */
.sheet-cta {
    flex-shrink: 0;
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 6px);
    background: #fff;
    border-top: 1px solid #f0f5f2;
}
.sheet-cta .bolt-cta,
.sheet-cta #requestRideBtn {
    width: 100%;
    margin: 0;
}

.ride-details-panel.collapsed { display: none; }

.coord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action {
    width: 100%;
    margin-top: 4px;
}

.list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.item {
    padding: 14px;
    box-shadow: none;
}

.item strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.item small {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    line-height: 1.35;
}

.item button {
    width: 100%;
    min-height: 38px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.item-actions,
.trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Trip-card action buttons ─────────────────────────────────────────────── */
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .12s, transform .1s;
    white-space: nowrap;
    min-width: 0;
    /* default — neutral ghost */
    background: var(--wash, #f0f4f2);
    color: var(--ink, #111);
}
.icon-action:active { opacity: 0.78; transform: scale(0.96); }

/* View — subtle outline */
.icon-action--view {
    background: transparent;
    border: 1.5px solid var(--line, #dde8e4);
    color: var(--ink, #111);
}

/* Live location — teal tint */
.icon-action--share {
    background: #e6f7f0;
    color: #0a6b3e;
}

/* Live button — ACTIVE state (location currently being shared) */
.icon-action--live-active {
    background: #14a85b !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(20,168,91,0.25);
    animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(20,168,91,0.25); }
    50%       { box-shadow: 0 0 0 6px rgba(20,168,91,0.10); }
}
.icon-action--live-active .action-svg { stroke: #fff; }

/* Track (passenger side of Live) */
.icon-action--track {
    background: #e6f7f0;
    color: #0a6b3e;
}

/* Arrived — amber */
.icon-action--arrived {
    background: #fff3cd;
    color: #7a5800;
}

/* Start — primary brand green */
.icon-action--start {
    background: #14a85b;
    color: #fff;
    box-shadow: 0 3px 10px rgba(20,168,91,0.30);
}

/* Complete / Done — dark green */
.icon-action--complete {
    background: #0c6939;
    color: #fff;
    box-shadow: 0 3px 10px rgba(12,105,57,0.28);
}

/* Rate — amber star */
.icon-action--rate {
    background: #fff3cd;
    color: #7a5800;
}

/* Accept (open requests list) */
.icon-action--accept {
    background: #14a85b;
    color: #fff;
}

.action-svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

input[readonly] {
    background: #eef4f1;
    color: #61706a;
}

.comms-panel {
    display: grid;
    gap: 12px;
}

.call-button {
    display: inline-grid;
    min-height: 42px;
    place-items: center;
    border-radius: 999px;
    padding: 0 16px;
    font-weight: 800;
}

.chat-message {
    display: grid;
    gap: 4px;
    max-width: 84%;
    justify-self: start;
    padding: 10px 12px;
    border-radius: 18px 18px 18px 6px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 8px 20px rgba(17,24,22,0.08);
}

.chat-message.mine {
    justify-self: end;
    border-radius: 18px 18px 6px 18px;
    background: var(--ink);
    color: #fff;
}

.chat-message strong {
    font-size: 11px;
}

.chat-message span {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.chat-message small {
    color: inherit;
    opacity: 0.7;
}

.inbox-item span {
    display: block;
    margin-bottom: 10px;
    color: var(--ink);
    line-height: 1.35;
}

.rating-panel {
    display: grid;
    gap: 12px;
}

.rating-panel[hidden] {
    display: none;
}

/* ── Trip PIN card (shown to passenger, status 1–2) ───────────────── */
.trip-pin-card {
    background: linear-gradient(135deg, #14a85b 0%, #0d7a42 100%);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.trip-pin-card .pin-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.trip-pin-card .pin-digits {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
}

.trip-pin-card .pin-hint {
    font-size: 12px;
    opacity: 0.8;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   ENHANCED PIN / TRIP-CODE ENTRY  (security-focused, driver)
   ════════════════════════════════════════════════════════════ */
.pin-entry-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9000;
    display: flex; align-items: flex-end; justify-content: center;
}
.pin-entry-sheet {
    background: #fff;
    border-radius: 24px 24px 0 0;
    width: 100%; max-width: 480px;
    display: flex; flex-direction: column; overflow: hidden;
}
/* Dark security header */
.pin-entry-header {
    background: #0d1a14;
    padding: 22px 20px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pin-entry-icon {
    width: 52px; height: 52px;
    background: rgba(20,168,91,0.18);
    border: 1.5px solid rgba(20,168,91,0.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2px;
}
.pin-entry-icon svg {
    width: 26px; height: 26px;
    stroke: #18B95F; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pin-entry-title { font-size: 17px; font-weight: 800; color: #fff; }
.pin-entry-subtitle { font-size: 12px; color: rgba(255,255,255,0.65); text-align: center; line-height: 1.45; }
/* Body */
.pin-entry-body { padding: 20px 20px 4px; }
.pin-booking-ref {
    font-size: 11px; font-weight: 600; color: #8a9e96;
    text-align: center; letter-spacing: 0.05em; margin-bottom: 14px;
}
#pinEntryInput {
    font-size: 38px !important;
    letter-spacing: 0.45em !important;
    text-align: center !important;
    width: 100% !important; box-sizing: border-box !important;
    border: 2px solid #e4ece8 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    background: #f9fbfa !important;
    font-weight: 900 !important; color: #083A28 !important;
    transition: border-color .15s;
}
#pinEntryInput:focus {
    border-color: #14a85b !important;
    background: #fff !important;
    outline: none !important;
}
/* Security note row */
.pin-security-note {
    display: flex; align-items: flex-start; gap: 7px;
    background: #f5f7f6; border-radius: 10px; padding: 10px 12px;
    margin-top: 14px; font-size: 11px; color: #526B61; line-height: 1.5;
}
.pin-security-note svg {
    width: 14px; height: 14px; stroke: #8a9e96; fill: none;
    stroke-width: 2; stroke-linecap: round; flex-shrink: 0; margin-top: 1px;
}
/* Buttons */
.pin-entry-btns {
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 8px;
}

/* ════════════════════════════════════════════════════════════
   TRIP AUDIT TIMELINE
   ════════════════════════════════════════════════════════════ */
.timeline-card { padding: 0 !important; overflow: hidden; }

.timeline-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px; border-bottom: 1px solid #f0f5f2;
}
.timeline-header-left {
    display: flex; align-items: center; gap: 8px;
}
.timeline-icon {
    width: 18px; height: 18px;
    stroke: #526B61; fill: none; stroke-width: 2; stroke-linecap: round;
    flex-shrink: 0;
}
.timeline-header h3 { font-size: 15px; font-weight: 700; margin: 0; color: #083A28; }

/* Receipt button in header */
.timeline-receipt-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: #14a85b;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 20px; padding: 5px 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.timeline-receipt-btn[hidden] { display: none !important; }
.timeline-receipt-btn svg {
    width: 13px; height: 13px; stroke: #14a85b; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.timeline-list { padding: 16px 18px 10px; }
.tl-loading, .tl-empty {
    font-size: 13px; color: #8a9e96; text-align: center; padding: 10px 0 4px;
}

/* Individual event */
.tl-item { display: flex; gap: 14px; }
.tl-track {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; width: 32px;
}
.tl-dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tl-dot svg {
    width: 14px; height: 14px; stroke: #fff; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.tl-line {
    flex: 1; width: 2px; min-height: 16px; background: #e4ece8;
    margin: 3px 0;
}
.tl-body { flex: 1; padding-bottom: 20px; min-width: 0; }
.tl-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px; margin-bottom: 3px; padding-top: 6px;
}
.tl-title { font-size: 13px; font-weight: 700; color: #083A28; line-height: 1.3; }
.tl-time  { font-size: 11px; color: #8a9e96; font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.tl-detail { font-size: 12px; color: #526B61; line-height: 1.5; }

/* Inline badges inside timeline events */
.tl-badge {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
    font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
    border-width: 1px; border-style: solid;
}
.tl-badge--email   { color: #0369a1; background: #e0f2fe; border-color: #bae6fd; }
.tl-badge--secure  { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.tl-badge--warning { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tl-badge--error   { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.tl-badge svg {
    width: 11px; height: 11px; stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   TRIP RECEIPT MODAL
   ════════════════════════════════════════════════════════════ */
.receipt-modal-overlay {
    position: fixed; inset: 0; z-index: 1600;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-end; justify-content: center;
}
.receipt-modal-overlay[hidden] { display: none !important; }
.receipt-modal-sheet {
    background: #fff; border-radius: 24px 24px 0 0;
    width: 100%; max-width: 480px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.receipt-modal-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid #f0f5f2; flex-shrink: 0;
}
.receipt-modal-title { font-size: 16px; font-weight: 800; color: #083A28; }
.receipt-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: #f5f7f6; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.receipt-close-btn svg {
    width: 16px; height: 16px; stroke: #526B61; fill: none;
    stroke-width: 2.5; stroke-linecap: round;
}
.receipt-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Receipt sections */
.receipt-brand-bar {
    background: #0d1a14; padding: 20px 20px 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.receipt-brand-name { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.receipt-brand-sub  { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.receipt-section { padding: 14px 20px; border-bottom: 1px solid #f5f7f6; }
.receipt-section:last-child { border-bottom: none; }
.receipt-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8a9e96; margin-bottom: 9px;
}
.receipt-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 3px 0;
}
.receipt-row-label { font-size: 13px; color: #526B61; font-weight: 500; }
.receipt-row-value { font-size: 13px; color: #083A28; font-weight: 600; text-align: right; max-width: 58%; }
.receipt-total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 12px 0 2px; border-top: 2px solid #083A28; margin-top: 8px;
}
.receipt-total-label { font-size: 15px; font-weight: 800; color: #083A28; }
.receipt-total-value { font-size: 26px; font-weight: 900; color: #14a85b; letter-spacing: -0.02em; }
/* Monospace audit log box */
.receipt-audit-box {
    background: #f5f7f6; border-radius: 10px; padding: 12px 14px;
    font-size: 11px; color: #526B61; line-height: 1.7;
    font-family: 'Courier New', Courier, monospace;
    word-break: break-all;
}
.receipt-actions {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f0f5f2;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.receipt-actions > button { flex: 1 1 120px; }
.receipt-actions .primary {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.receipt-actions .primary svg {
    width: 16px; height: 16px; stroke: #fff; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.rating-stars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.rating-stars button {
    min-height: 46px;
    border-radius: 999px;
    background: #eef4f1;
    color: var(--ink);
    font-weight: 900;
}

.rating-stars button.active {
    background: var(--brand-2);
    color: #fff;
}

.map-shell {
    position: relative;
    width: 100%;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #dfe8e5;
}

.map-ride-shell {
    position: fixed;
    inset: 0;
    display: none;
    overflow: hidden;
    background: #dfe8e5;
}

.map-ride-shell.active {
    display: block;
}

.map-ride-shell .map-shell {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.floating-ride-card {
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    z-index: 25;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 22px;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 18px 46px rgba(17,24,22,0.18);
    backdrop-filter: blur(16px);
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.floating-ride-card.collapsed {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

.route-summary-bar {
    position: absolute;
    top: 64px;
    left: 12px;
    right: 12px;
    z-index: 26;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 8px 10px 8px 16px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 46px rgba(17,24,22,0.16);
    backdrop-filter: blur(16px);
}

.route-summary-bar.active {
    display: flex;
}

.route-summary-bar span {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-summary-bar .route-dot {
    flex: 0 0 auto;
}

.route-summary-bar button {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 999px;
    padding: 0 14px;
    background: var(--brand-2);
    color: #fff;
    font-weight: 900;
}

.driver-hero {
    display: grid;
    gap: 16px;
    margin-bottom: 12px;
    padding: 20px;
    border-radius: 24px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 18px 50px rgba(7,19,17,0.14);
}

.driver-hero .eyebrow {
    color: rgba(255,255,255,0.7);
}

.driver-hero h2 {
    margin-bottom: 0;
}

.driver-hero p {
    margin: -6px 0 0;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
}

.driver-status-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12px;
}

/* legacy – kept for backward compat */
.driver-sheet { box-shadow: none; }

.compact-list:empty { display: none; }

/* ── Flat driver page layout ─────────────────────────── */
/* .driver-page padding is controlled by the !important layout block */
.driver-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0 10px;
}

.driver-section-header--divided {
    border-top: 1px solid var(--line, #e8edeb);
    margin-top: 8px;
    padding-top: 20px;
}

.driver-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink, #111);
    margin: 0;
    flex: 1;
}

.driver-section-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Small pill buttons in section headers */
.driver-section-action {
    background: #f0f4f2;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #111);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.driver-section-action:active { opacity: .7; }

.saved-address-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
    vertical-align: -3px;
    margin-right: 4px;
}

/* Passenger trip-request screen */
.lift-home-page {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    color: #083A28;
}
.lift-home-intro { padding: 8px 2px 4px; }
.lift-home-intro h1 { margin: 0; font-size: clamp(27px, 7vw, 36px); line-height: 1.12; letter-spacing: -.035em; }
.lift-home-intro p { margin: 7px 0 0; color: #69736f; font-size: 17px; }
.lift-home-request-card {
    width: 100%;
    min-height: 142px;
    margin: 20px 0 24px;
    padding: 20px;
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) 42px;
    align-items: center;
    gap: 18px;
    border: 0;
    border-radius: 18px;
    background: #168542;
    color: #fff;
    text-align: left;
    box-shadow: 0 7px 18px rgba(20,112,57,.18);
}
.lift-home-route-art { width: 84px; height: 84px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#168542; }
.lift-home-route-art svg { width:58px; height:58px; }
.lift-home-request-copy { display:grid; gap:7px; min-width:0; }
.lift-home-request-copy strong { font-size:26px; line-height:1.05; }
.lift-home-request-copy small { font-size:15px; line-height:1.4; opacity:.96; }
.lift-home-request-arrow { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.2); font-size:38px; line-height:1; }
.lift-home-section { margin: 0 0 24px; }
.lift-home-section h2 { margin:0 0 12px; font-size:20px; letter-spacing:-.02em; }
.lift-home-saved-places { display:flex; gap:12px; overflow-x:auto; padding:1px 1px 5px; scrollbar-width:none; }
.lift-home-saved-places::-webkit-scrollbar { display:none; }
.lift-home-place-btn { min-width:150px; min-height:66px; padding:13px 17px; display:flex; align-items:center; gap:13px; border:1px solid #d7dfda; border-radius:14px; background:#fff; color:#083A28; box-shadow:0 3px 9px rgba(14,35,25,.06); text-align:left; }
.lift-home-place-btn svg { width:25px; height:25px; flex:0 0 25px; fill:#168542; }
.lift-home-place-btn span { min-width:0; }
.lift-home-place-btn strong { display:block; font-size:16px; }
.lift-home-place-btn small { display:block; max-width:170px; margin-top:2px; overflow:hidden; color:#6c7772; text-overflow:ellipsis; white-space:nowrap; }
.lift-home-card { width:100%; padding:18px; display:grid; align-items:center; border:1px solid #d7dfda; border-radius:17px; background:#fff; box-shadow:0 4px 12px rgba(14,35,25,.07); }
.lift-home-upcoming { grid-template-columns:56px minmax(0,1fr) 28px; gap:14px; text-align:left; color:inherit; }
.lift-home-card-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:#eaf7ee; color:#168542; }
.lift-home-card-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:2; }
.lift-home-card-copy { min-width:0; display:grid; gap:5px; }
.lift-home-card-copy strong { overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.lift-home-card-copy small { color:#69736f; font-size:14px; }
.lift-home-status { color:#168542 !important; font-weight:700; }
.lift-home-status::before { content:""; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:currentColor; }
.lift-home-chevron { color:#168542; font-size:34px; line-height:1; }
.lift-home-nearby-list { display:grid; gap:12px; }
.lift-home-nearby-card { grid-template-columns:52px minmax(0,1fr) auto 24px; gap:13px; padding:14px; text-align:left; color:inherit; }
.lift-home-avatar { position:relative; width:52px; height:52px; display:grid; flex:none; place-items:center; overflow:hidden; border-radius:50%; background:#eaf7ee; color:#168542; font-size:18px; font-weight:900; }
.lift-home-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; background:#eaf7ee; }
.lift-home-trip-price { min-width:76px; padding-left:12px; border-left:1px solid #e0e6e2; }
.lift-home-trip-price small,.lift-home-trip-price strong { display:block; }
.lift-home-trip-price small { color:#168542; font-size:12px; font-weight:700; white-space:nowrap; }
.lift-home-trip-price strong { margin-top:3px; font-size:21px; }
.lift-home-inline-state { width:100%; padding:18px; border:1px dashed #cfd9d3; border-radius:14px; color:#6c7772; text-align:center; background:rgba(255,255,255,.55); }
.lift-home-empty-action { color:#168542; font-weight:800; }
.lift-town-search{margin:18px 0;padding:15px;border:1px solid #d7dfda;border-radius:20px;background:#fff;box-shadow:0 4px 12px rgba(14,35,25,.05)}
.lift-town-search h2{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:.9rem}.lift-town-search h2 svg{width:18px;height:18px;fill:none;stroke:#168542;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lift-town-origin{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;background:#edf8f1}.lift-town-origin>svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:#168542;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lift-town-origin span,.lift-town-origin strong,.lift-town-origin small{display:block}.lift-town-origin strong{font-size:.9rem}.lift-town-origin small{margin-top:2px;color:#687970;font-size:.72rem}
.lift-town-destination-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 8px}.lift-town-destination-head strong{font-size:.88rem}.lift-town-destination-head small{color:#718078;font-size:.7rem}
.lift-town-adjust-btn{border:0;background:transparent;color:#07863f;font:inherit;font-size:.75rem;font-weight:700;padding:5px 0}.lift-town-search-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.45fr);gap:8px;margin:0 0 10px;padding:10px;border-radius:14px;background:#f2f8f4}.lift-town-search-controls[hidden]{display:none}.lift-town-search-controls label{display:grid;gap:4px;color:#456057;font-size:.68rem;font-weight:700}.lift-town-search-controls input,.lift-town-search-controls select{width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid #cad8d0;border-radius:11px;background:#fff;color:#073f2d;font:inherit;font-size:.78rem;outline:none}.lift-town-search-controls input:focus,.lift-town-search-controls select:focus{border-color:#19b95f;box-shadow:0 0 0 2px rgba(25,185,95,.13)}
.lift-home-search-controls{grid-template-columns:minmax(0,1fr)}
.pac-container{z-index:12000!important;border:1px solid #cad8d0;border-radius:12px;box-shadow:0 12px 30px rgba(5,57,39,.16);font-family:Roboto,Arial,sans-serif}.pac-item{min-height:44px;padding:7px 10px;font-size:.78rem}.pac-item-query{font-size:.82rem;color:#073f2d}
.lift-driver-section-actions{display:flex;align-items:center;gap:10px}.lift-driver-search-controls{grid-template-columns:minmax(0,1fr);margin:9px 0 13px}
.lift-driver-town-chips{margin:9px 0 13px;padding-bottom:3px}.lift-driver-town-chips .lift-town-chip{min-height:34px;padding:6px 12px;font-size:.73rem}
@media(max-width:420px){.lift-town-search-controls{grid-template-columns:minmax(0,1fr) 130px}.lift-home-search-controls,.lift-driver-search-controls{grid-template-columns:minmax(0,1fr)}}
.lift-town-chips{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 6px;scrollbar-width:none}.lift-town-chips::-webkit-scrollbar{display:none}.lift-town-chip{flex:0 0 auto;min-height:38px;padding:8px 13px;border:1px solid #cad8d0;border-radius:999px;background:#fff;color:#173b2c;font:inherit;font-size:.78rem;font-weight:650}.lift-town-chip[aria-pressed=true]{border-color:#20bd66;background:#dff7e8;color:#075d32}.lift-town-chip-state{padding:8px 2px;color:#718078;font-size:.75rem}
.lift-town-results-section{margin-bottom:12px}.lift-town-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}.lift-town-results-head h2{margin:0}.lift-town-results-head>span{color:#168542;font-size:.75rem;font-weight:750}
.lift-town-result{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px;border:1px solid #d9e1dc;border-radius:17px;background:#fff;color:#083a28;text-align:left;box-shadow:0 3px 10px rgba(14,35,25,.05)}.lift-town-result-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#e6f7ec;color:#168542}.lift-town-result-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lift-town-result .lift-home-card-copy strong{font-size:.86rem}.lift-town-result .lift-home-card-copy small{font-size:.72rem;white-space:normal}.lift-town-result-price{text-align:right;color:#168542}.lift-town-result-price strong,.lift-town-result-price small{display:block}.lift-town-result-price strong{font-size:1rem}.lift-town-result-price small{margin-top:2px;font-size:.66rem;white-space:nowrap}
.lift-town-request-fallback{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding:15px 16px;border:0;border-radius:17px;background:#0a4632;color:#fff;text-align:left}.lift-town-request-fallback span,.lift-town-request-fallback strong,.lift-town-request-fallback small{display:block}.lift-town-request-fallback strong{font-size:.87rem}.lift-town-request-fallback small{margin-top:4px;color:#d1eadc;font-size:.71rem}.lift-town-request-fallback svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lift-chat-page { display:none; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden !important; }
.lift-chat-page.active { display:grid !important; }
.lift-chat-messages { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:8px 0 14px; }
.lift-chat-bubble { max-width:82%; padding:10px 12px; border-radius:15px 15px 15px 4px; background:#fff; border:1px solid #dce4df; }
.lift-chat-bubble.mine { align-self:flex-end; border-radius:15px 15px 4px 15px; background:#dff7e8; border-color:#bde8cc; }
.lift-chat-bubble strong,.lift-chat-bubble small { display:block; }
.lift-chat-bubble strong { margin-bottom:3px; font-size:12px; color:#168542; }
.lift-chat-bubble small { margin-top:4px; color:#718078; font-size:10px; }
.lift-chat-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-top:10px; border-top:1px solid #dce4df; background:var(--wash); }
.lift-chat-composer input { min-width:0; }
@media (max-width:420px) {
    .lift-home-request-card { min-height:128px; grid-template-columns:68px minmax(0,1fr) 36px; gap:13px; padding:17px; }
    .lift-home-route-art { width:68px; height:68px; }
    .lift-home-route-art svg { width:48px; height:48px; }
    .lift-home-request-copy strong { font-size:22px; }
    .lift-home-request-copy small { font-size:14px; }
    .lift-home-request-arrow { width:36px; height:36px; font-size:32px; }
    .lift-home-nearby-card { grid-template-columns:46px minmax(0,1fr) auto 18px; gap:10px; }
    .lift-home-avatar { width:46px; height:46px; }
    .lift-home-trip-price { min-width:65px; padding-left:9px; }
}

.lift-request-mobile-page {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding-bottom: 110px !important;
}
.lift-request-mobile-form { display:grid; width:100%; min-width:0; gap:17px; }
.lift-request-mobile-group { display:grid; gap:10px; }
.lift-request-route-stack { position:relative; display:grid; gap:9px; padding-left:28px; }
.lift-request-route-stack::before { content:""; position:absolute; left:9px; top:22px; bottom:22px; width:2px; background:#c7d3cc; }
.lift-request-location-field { position:relative; display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px solid #d6e0da; border-radius:13px; background:#fff; }
.lift-request-location-field input { width:100%; min-width:0; padding:0; border:0; background:transparent; }
.lift-request-route-icon { position:absolute; left:-25px; width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#20b864; }
.lift-request-route-icon.destination { border-radius:3px 3px 8px 8px; background:#111; }
.lift-request-frequency { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lift-request-frequency button { min-height:44px; padding:9px; border:1px solid #d1dcd5; border-radius:12px; background:#fff; color:inherit; }
.lift-request-frequency button.selected,.lift-request-days button.selected { border-color:#20b864; background:#20b864; color:#fff; }
.lift-request-days { display:flex; justify-content:space-between; gap:5px; }
.lift-request-days button { width:39px; height:39px; border:1px solid #d1dcd5; border-radius:50%; background:#fff; color:inherit; }
.lift-request-mobile-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lift-request-mobile-grid label,.lift-request-mobile-note { display:grid; gap:6px; color:#52635a; }
.lift-request-mobile-grid input,.lift-request-mobile-grid select,.lift-request-mobile-note textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid #d1dcd5; border-radius:12px; background:#fff; color:#17221c; }
.lift-request-mobile-note textarea { min-height:70px; resize:vertical; }
.lift-request-return-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lift-request-return-row span { display:grid; gap:3px; }
.lift-request-return-row small { color:#68786f; }
.lift-request-return-row input { width:21px; height:21px; accent-color:#20b864; }
.lift-request-money { display:flex; align-items:center; border:1px solid #d1dcd5; border-radius:12px; background:#fff; overflow:hidden; }
.lift-request-money b { padding-left:12px; color:#17221c; }
.lift-request-money input { border:0; }
.lift-request-summary { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border-radius:12px; background:#e9f8ef; color:#08743c; }
.lift-request-summary svg { width:18px; height:18px; flex:0 0 18px; fill:currentColor; }
.lift-request-mobile-actions { display:grid; gap:8px; margin-top:18px; padding:12px 0 4px; background:inherit; }
.lift-request-mobile-actions button:last-child { border:0; background:transparent; color:#08743c; }
@media (max-width:355px) { .lift-request-mobile-grid { grid-template-columns:1fr; } .lift-request-days button { width:35px; height:35px; } }

.driver-section-action--ghost {
    background: transparent;
    color: var(--primary, #14a85b);
}

/* Trip cards inside the driver page — remove outer card styling,
   render as flat rows separated by a hairline */
.driver-list .trip-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    border-top: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

.driver-list .trip-card + .trip-card {
    border-top: 1px solid var(--line, #e8edeb) !important;
}

/* Empty state in driver lists */
.driver-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 16px 18px;
    color: var(--muted, #888);
}
.driver-empty strong {
    font-size: 15px;
    color: var(--ink, #333);
}
.driver-empty small {
    font-size: 13px;
    line-height: 1.4;
}

/* ── Full-screen live tracking screen ── */
.tracking-screen {
    display: none;
}

.tracking-screen.active {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    flex-direction: column;
}

/* Map fills the whole screen */
.tracking-map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #e8edeb;
}

/* Floating back button */
.tracking-back-btn {
    position: absolute;
    top: calc(var(--sat, 0px) + 14px);
    left: 16px;
    z-index: 8010;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111;
    -webkit-tap-highlight-color: transparent;
}
.tracking-back-btn:active {
    background: #f0f0f0;
}

/* Bottom info card */
.tracking-card {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    z-index: 8005;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 18px 20px calc(var(--sab, 0px) + 18px);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
}

/* ETA row */
.tracking-eta-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8edeb;
}

.tracking-eta-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tracking-eta-value {
    font-size: 28px;
    font-weight: 800;
    color: #14a85b;
    line-height: 1;
}

.tracking-eta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #788;
}

.tracking-eta-divider {
    width: 1px;
    height: 38px;
    background: #e8edeb;
    margin: 0 8px;
}

/* Status text */
.tracking-status-line {
    font-size: 14px;
    color: #555;
    margin: 0 0 12px;
    text-align: center;
    min-height: 20px;
}

/* Route summary */
.tracking-route {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.tracking-route-point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.tracking-route-point--pickup svg { color: #14a85b; }
.tracking-route-point--dropoff svg { color: #b91c1c; }

.tracking-route-line {
    width: 1px;
    height: 10px;
    background: #ccc;
    margin-left: 6px;
}

.tracking-route-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Trip total distance row (pickup→dropoff) ── */
.live-trip-dist-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f5f2;
    font-size: 13px;
    color: #526B61;
}
.live-trip-dist-row svg { flex-shrink: 0; color: #526B61; }
#liveTripDistText { font-weight: 600; }

/* ── Live trip phase badge ── */
.live-phase-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    align-self: flex-start;
}
.live-phase-badge--onway   { background: #fff3e0; color: #bf5000; }
.live-phase-badge--arrived { background: #ecfdf5; color: #065f46; }
.live-phase-badge--active  { background: #eff6ff; color: #1d4ed8; }

/* ── Live driver info row ── */
.live-driver-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f0f5f2;
}
.live-driver-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #0d2018;
    color: #18B95F;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.live-driver-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.live-driver-name {
    font-size: 16px;
    font-weight: 700;
    color: #083A28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-driver-vehicle {
    font-size: 13px;
    color: #526B61;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-driver-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #083A28;
    flex-shrink: 0;
}

/* ── Ride detail map (inside rideView) ── */
.ride-detail-map-wrap {
    position: relative;
    height: 300px;          /* full height: markers stay well inside with 60 px padding */
    margin: 0 0 0 0;        /* no bottom margin — chip provides gap below */
    border-radius: 16px;
    overflow: hidden;
    background: #e8efec;
}
.ride-detail-map {
    width: 100%;
    height: 100%;
}
/* Distance/duration chip rendered BELOW the map (not overlaid) */
.ride-detail-map-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0faf5;
    border: 1px solid #d4ede0;
    border-radius: 0 0 16px 16px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #116b42;
    letter-spacing: 0.01em;
    margin: 0 0 16px 0;
}
.ride-detail-map-chip[hidden] { display: none !important; }

.floating-ride-card h2 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.08;
}

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

.locate-btn {
    width: 46px;
    height: 46px;
    min-height: 46px;
    font-size: 12px;
    font-weight: 900;
}

.route-input-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.route-input-stack label {
    display: grid;
    grid-template-columns: 14px 1fr;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f7faf8;
}

.route-input-stack input {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 750;
}

.route-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.pickup-dot {
    background: var(--brand-2);
    box-shadow: 0 0 0 4px rgba(52,201,107,0.14);
}

.dropoff-dot {
    background: var(--ink);
    box-shadow: 0 0 0 4px rgba(17,24,22,0.1);
}

.fare-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 10px;
}

.fare-average {
    margin: -2px 0 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #eef8f2;
    color: #116b42;
    font-size: 13px;
    font-weight: 900;
}

/* ── Route info bar (distance · duration) shown at top of booking sheet ── */
.route-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: #eef8f2;
    color: #116b42;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.route-info-bar--loading {
    background: #f5f7f6;
    color: #526B61;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.money-input {
    display: flex;
    align-items: center;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f7faf8;
    overflow: hidden;
}

.money-input span {
    padding-left: 14px;
    color: var(--ink);
    font-weight: 900;
}

.money-input input {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.map-shell.live {
    min-height: 360px;
}

.map-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0 14px;
}

.driver-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 2px;
}

.driver-card {
    flex: 0 0 180px;
    padding: 14px;
    border: 1px solid #edf2ef;
    border-radius: 18px;
    background: #f7faf8;
}

.driver-card strong,
.driver-card span {
    display: block;
}

.driver-card strong {
    margin-bottom: 4px;
    font-size: 15px;
}

.driver-card span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.driver-online-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.map-tools button {
    min-height: 44px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.map-tools button.active {
    background: var(--brand);
    color: #fff;
}

.pac-container {
    z-index: 10000 !important;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(7, 31, 26, 0.18);
    font-family: inherit;
}

.history-chips {
    display: flex;
    min-height: 0;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 4px;
}

.history-chips:empty {
    display: none;
}

.history-chip {
    flex: 0 0 auto;
    max-width: 210px;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 12px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.panel-title-row h3 {
    margin-bottom: 0;
}

.panel-title-row button {
    width: auto;
    min-height: 42px;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 800;
}

/* .live-panel removed — replaced by full-screen .tracking-screen */

@media (max-width: 520px) {
    .landing-page {
        padding: 0;
    }

    .landing-hero {
        min-height: 100vh;
    }

    .landing-copy {
        min-height: 0;
    }

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

    .boot-actions, .social-row, .field-pair, .landing-actions {
        grid-template-columns: 1fr;
    }

    .fare-row {
        grid-template-columns: 1fr 0.78fr;
    }

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

    .map-tools {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FINAL APP SHELL LAYOUT OVERRIDE
   - Header remains fixed at the top
   - Bottom navigation remains fixed at the bottom
   - Screens scroll between header and bottom navigation
   - Map and ride sheets respect the bottom navigation
   ========================================================= */

:root {
    --app-header-height: 52px;
    --bottom-nav-height: 76px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: var(--sab, 0px);
    /* Updated from visualViewport while the Android keyboard pans/resizes the WebView. */
    --visual-viewport-top: 0px;
}

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    background: var(--wash);
}

.app-shell {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--wash);
}

.app-header {
    position: fixed !important;
    top: var(--visual-viewport-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;

    display: flex !important;
    align-items: center;
    gap: 0;

    min-height: var(--app-header-height);
    margin: 0 !important;
    padding: 4px 10px;

    background: transparent !important;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateZ(0);
    will-change: top;
}

main {
    position: relative;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0;
    padding-top: var(--app-header-height);
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, var(--sab, 0px)));
    overflow: hidden;
    background: var(--wash);
}

.bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 999;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;

    min-height: var(--bottom-nav-height);
    padding: 8px 10px calc(var(--safe-bottom) + 8px);

    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -10px 28px rgba(7, 19, 17, 0.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Keyboard handling — JS slides this out when a text field is focused */
    transition: transform 0.2s ease;
    will-change: transform;
}

/* The keyboard owns the lower part of the visual viewport. Keep the app toolbar
   visible and remove controls that would otherwise float above the keyboard. */
body.keyboard-open .bottom-nav,
body.keyboard-open .lift-active-trip-bar {
    transform: translateY(calc(100% + var(--safe-bottom) + 20px)) !important;
    pointer-events: none;
}

body.keyboard-open main {
    padding-bottom: env(safe-area-inset-bottom, var(--sab, 0px));
}

/* Driver subscription packages */
#paySubscriptionBtn,#verifySubscriptionBtn,#manageSubGplayBtn,.sub-or-divider{display:none!important}

.driver-subscription-alert{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid #e9bd55;border-radius:16px;background:#fff5d8;color:#5a3b00}
.driver-subscription-alert[hidden]{display:none!important}
.driver-subscription-alert-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#ffe29a}
.driver-subscription-alert-icon svg{width:20px;height:20px}
.driver-subscription-alert>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.driver-subscription-alert strong{font-size:.92rem}
.driver-subscription-alert small{font-size:.78rem;line-height:1.35;color:#705520}
.driver-subscription-alert button{border:0;border-radius:999px;padding:9px 13px;background:#064b38;color:#fff;font:inherit;font-size:.8rem;font-weight:600}
.driver-subscription-alert-global{position:fixed;top:calc(var(--visual-viewport-top,0px) + var(--app-header-height));right:10px;left:10px;z-index:999;margin:6px 0 0;box-shadow:0 5px 18px rgba(80,58,5,.12)}
.app-shell.has-driver-subscription-alert .app-page{padding-top:92px!important}
@media (min-width:700px){.driver-subscription-alert-global{right:22px;left:22px}.app-shell.has-driver-subscription-alert .app-page{padding-top:86px!important}}

/* Delayed API skeletons: JavaScript adds this only when a loading placeholder
   survives long enough to avoid a distracting flash on fast responses. */
.api-shimmer{position:relative!important;min-height:72px!important;overflow:hidden!important;color:transparent!important;border-color:#dfe8e3!important;background:#f4f7f5!important}
.api-shimmer-host{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.api-shimmer-host::before,.api-shimmer-host::after{box-shadow:none!important}
.api-shimmer>*{visibility:hidden!important}
.api-shimmer::before{content:"";position:absolute;inset:14px;border-radius:8px;background:linear-gradient(#dfe7e3 0 0) 0 0/62% 13px no-repeat,linear-gradient(#e4ebe7 0 0) 0 24px/88% 10px no-repeat,linear-gradient(#e4ebe7 0 0) 0 43px/44% 10px no-repeat}
.api-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:liftlink-api-shimmer 1.2s infinite}
@keyframes liftlink-api-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.api-shimmer::after{animation:none}}
.driver-plan-cycle{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:14px 0;padding:4px;border-radius:14px;background:#edf3ef}.driver-plan-cycle button{min-height:40px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:700}.driver-plan-cycle button.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(8,58,40,.08)}.driver-plan-cycle small{display:block;font-size:10px;color:var(--text-accent)}.driver-plan-grid{display:grid;gap:10px}.driver-plan-card{position:relative;display:grid;width:100%;gap:5px;padding:15px;border:1px solid #d5e2da;border-radius:16px;background:#fff;color:var(--ink);text-align:left}.driver-plan-card.active{border:2px solid var(--text-accent);background:#effaf3;box-shadow:0 8px 22px rgba(24,185,95,.12)}.driver-plan-card strong{font-size:22px}.driver-plan-card small{color:var(--muted);line-height:1.4}.driver-plan-name{font-weight:800}.driver-plan-popular{position:absolute;top:10px;right:10px;padding:4px 7px;border-radius:999px;background:var(--text-accent);color:#fff;font-size:10px;font-weight:800}.driver-plan-usage{display:grid;gap:4px;margin:12px 0;padding:12px;border-radius:13px;background:#edf5f0}.driver-plan-usage span{color:var(--muted);font-size:12px;line-height:1.45}

.bottom-nav button {
    min-width: 0;
    min-height: 52px;
    border-radius: 18px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 900;
}

/* Persistent "trip in progress" bar — sits directly above the bottom nav, same idea as Bolt's
   active-ride card that stays visible no matter which tab you're browsing. */
.lift-active-trip-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--bottom-nav-height, 76px) + var(--safe-bottom, 0px) + 10px) !important;
    z-index: 950;

    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    padding: 11px 14px;

    border: none;
    border-radius: 16px;
    background: #153d28;
    color: #f5fff8;
    box-shadow: 0 10px 28px rgba(7, 19, 17, 0.22);
    text-align: left;
    cursor: pointer;
}

.lift-active-trip-bar-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.lift-active-trip-bar-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #31ca73;
    stroke-width: 1.6;
}

.lift-active-trip-bar-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lift-active-trip-bar-body strong {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lift-active-trip-bar-body small {
    font-size: 0.76rem;
    color: #c9e8d5;
}

.lift-active-trip-bar-chevron {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: #c9e8d5;
}

.bottom-nav button.active {
    color: var(--ink);
}

.bottom-nav svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Wrapper needed so the badge can be absolutely positioned over the icon */
.bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Inbox count badge — bottom nav and drawer */
.inbox-nav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

/* In the drawer the badge anchors to the button (which is now position:relative) */
.menu-link .inbox-nav-badge {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

.role-view,
.app-page,
.driver-view,
.address-step,
.tab {
    /* Use env() directly so the calc never relies on JS setting --sab */
    height: calc(100vh  - var(--app-header-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, var(--sab, 0px))) !important;
    height: calc(100dvh - var(--app-header-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, var(--sab, 0px))) !important;
    min-height: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 14px !important;
    /* Extra bottom clearance so the last item is never behind the toolbar */
    padding-bottom: calc(28px + env(safe-area-inset-bottom, var(--sab, 0px))) !important;
}

#passengerTab {
    height: calc(100vh - var(--app-header-height) - var(--bottom-nav-height) - var(--safe-bottom)) !important;
    height: calc(100dvh - var(--app-header-height) - var(--bottom-nav-height) - var(--safe-bottom)) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.address-step {
    padding-right: 14px !important;
    padding-left: 14px !important;
    background:
        linear-gradient(180deg, rgba(52, 201, 107, 0.12), transparent 42%),
        var(--wash);
}

.address-card {
    margin-top: 14px !important;
}

.driver-view,
.app-page,
.tab {
    padding-right: 14px !important;
    padding-left: 14px !important;
}

.map-ride-shell {
    position: fixed !important;
    top: var(--app-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #dfe8e5;
}

.map-ride-shell .map-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.route-summary-bar {
    top: 12px !important;
    left: 12px;
    right: 12px;
    z-index: 901;
}

.floating-ride-card {
    top: 12px !important;
    z-index: 901;
}

/* Ride bottom sheet snaps are already mobile-first — no overrides needed */

.side-menu {
    z-index: 1300;
}

.side-menu-panel {
    top: 0 !important;
    bottom: 0 !important;
    /* bottom padding handled by .side-menu-nav-body */
}

/* tracking-layer legacy rule removed — see .tracking-screen.active */

/* ── Driver setup page: each section is a card ───────────────── */
/* .driver-setup-page padding handled by !important layout block */
.setup-section {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.setup-section--divided {
    /* No longer uses a border-top separator; card margin provides spacing */
    border-top: none;
    margin-top: 0;
    padding-top: 16px;
}

.setup-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.setup-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink, #111);
    margin: 0 0 4px;
}

.setup-section-hint {
    font-size: 13px;
    color: var(--muted, #888);
    margin: 0 0 14px;
    line-height: 1.45;
}

/* ── Doc type hint text ─── */
.doc-type-hint {
    font-size: 13px;
    color: #555;
    background: #f4f8f5;
    border-left: 3px solid #14a85b;
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    margin: 10px 0 12px;
    line-height: 1.45;
    min-height: 0;
}
.doc-type-hint:empty { display: none; }

/* ── Vehicle approval badges ─── */
.vehicle-approval-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 10px;
    margin: 2px 0 4px;
    letter-spacing: .03em;
}
.vehicle-approval-badge--pending  { background: #fff3cd; color: #7a5800; }
.vehicle-approval-badge--approved { background: #d1fae5; color: #065f46; }
.vehicle-approval-badge--rejected { background: #fee2e2; color: #991b1b; }

/* Replaces the Edit button when the vehicle is approved */
.vehicle-locked-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
    background: #d1fae5;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid #a7f3d0;
    user-select: none;
}
.vehicle-locked-note svg {
    width: 13px; height: 13px;
    stroke: #065f46; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* Licence disc expiry line on vehicle card */
.vehicle-licence-expiry {
    display: block;
    font-size: 12px;
    color: var(--muted, #777);
    margin: 2px 0 0;
}
.vehicle-licence-expiry--due {
    color: #b35a00;
    font-weight: 700;
}

/* "Removal requested" placeholder */
.vehicle-removal-pending {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #7a5800;
    background: #fff3cd;
    border-radius: 20px;
    padding: 5px 10px;
    border: 1px solid #fce68a;
}

/* ── Account menu danger item ─── */
.account-menu-item--danger strong { color: #c0392b; }
.account-menu-item--danger .account-icon svg { stroke: #c0392b; }

/* ── Vehicle empty state ─── */
.vehicle-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 0 12px;
    text-align: center;
    color: var(--muted, #888);
}
.vehicle-empty strong {
    font-size: 15px;
    color: var(--ink, #333);
}
.vehicle-empty span {
    font-size: 13px;
    max-width: 240px;
    line-height: 1.4;
}

.toast {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 14px);
    z-index: 1400;
    margin: 0;
}

/* ── Full-screen no-network overlay ──────────────────────── */
.no-network-screen {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.no-network-screen[hidden] { display: none; }

.no-network-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 280px;
}

.no-network-icon {
    width: 72px;
    height: 72px;
    stroke: #bbb;
    margin-bottom: 4px;
}

.no-network-title {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin: 0;
}

.no-network-sub {
    font-size: 14px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

.no-network-retry {
    margin-top: 8px;
    background: #14a85b;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.no-network-retry:active { background: #0c6939; }
.no-network-retry:disabled { opacity: .55; }

/* ── Inline offline-state (inside list containers) ──────── */
.offline-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    text-align: center;
    color: var(--muted, #888);
}
.offline-state svg { stroke: #ccc; margin-bottom: 4px; }
.offline-state strong { font-size: 14px; color: #444; }
.offline-state span   { font-size: 13px; }

/* ── Map error overlay ───────────────────────────────────────────────────── */
.map-error-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    background: #eef3f1;
    text-align: center;
    border-radius: inherit;
}
.map-error-overlay svg {
    stroke: #8aab9d;
    flex-shrink: 0;
}
.map-error-overlay strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
}
.map-error-overlay span {
    font-size: 13px;
    color: var(--muted, #526B61);
    line-height: 1.45;
    max-width: 220px;
}
.map-error-retry {
    margin-top: 6px;
    padding: 9px 22px;
    border-radius: 999px;
    background: var(--brand, #083A28);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.map-error-retry:active { opacity: 0.75; }

/* ── Flat inbox page ─────────────────────────────────────── */
/* ── Content card utility ──────────────────────────────────────────────────
   Wraps free-floating page content (forms, lists, info sections) in a single
   card shell. Never nest a .content-card inside another .content-card.
   ─────────────────────────────────────────────────────────────────────────── */
.content-card {
    background: var(--paper);
    border-radius: 18px;
    border: 1px solid var(--line);
    padding: 16px;
    margin-bottom: 14px;
}
/* Dividers INSIDE a content-card */
.content-card + .content-card { margin-top: 0; }
.content-card .section-label { margin-top: 0; }

/* ── Inbox ─────────────────────────────────────────────────────────────── */
/* .inbox-page: inherits standard app-page padding (14px sides) */
.inbox-page { }

.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--line, #e8edeb);
    margin-bottom: 4px;
}

.inbox-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink, #111);
    margin: 0;
}

.inbox-subtitle {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.inbox-scope-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 3px 12px rgba(8,58,40,.06);
}
.inbox-scope-thread:active { background: #f2f8f5; box-shadow: none; }
.inbox-scope-thread--unread { border-color: #8ad9ad; background: #f2fbf6; }
.inbox-scope-icon {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 14px;
    background: #e9f4ee;
    color: var(--ink);
}
.inbox-scope-icon--trip { background: #e7f8ee; color: #08783c; }
.inbox-scope-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.inbox-scope-icon i {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--accent);
}
.inbox-scope-body {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.inbox-scope-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.inbox-scope-top small {
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.inbox-scope-top b {
    padding: 3px 7px;
    border-radius: 999px;
    background: #edf3f0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.inbox-scope-body > strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-scope-route {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-scope-detail {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-scope-chevron {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.inbox-empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 17px;
    background: #e9f4ee;
    color: var(--ink);
}
.inbox-empty-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

/* Each thread — individual card */
.inbox-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: var(--paper);
    border: 1px solid var(--line, #e8edeb);
    border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, box-shadow .12s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.inbox-thread:active {
    background: #f4f8f5;
    box-shadow: none;
}

.inbox-thread-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-thread-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-thread-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-thread-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #111);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-thread-status {
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    background: #f0f4f2;
    color: #555;
}

.inbox-thread-route {
    font-size: 12px;
    color: #14a85b;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-thread-last {
    font-size: 12px;
    color: var(--muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-thread-chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* Empty state */
.inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--muted, #888);
}
.inbox-empty strong { font-size: 15px; color: #333; }
.inbox-empty span   { font-size: 13px; }

/* Unread thread indicator */
.inbox-thread--unread {
    background: #f5f9ff;
}
.inbox-thread--unread .inbox-thread-name {
    font-weight: 700;
}
.inbox-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary, #1a73e8);
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

/* Nearby requests blocked state */
.driver-empty--blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}
.driver-empty--blocked .blocked-icon {
    font-size: 40px;
    line-height: 1;
}
.driver-empty--blocked strong {
    font-size: 15px;
    color: #333;
    display: block;
}
.driver-empty--blocked span {
    font-size: 13px;
    color: var(--muted, #888);
}
.driver-empty--blocked .btn-small {
    margin-top: 4px;
    padding: 8px 20px;
    font-size: 13px;
    background: var(--primary, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   EARNINGS VIEW — native-style redesign
   ═══════════════════════════════════════════════════════════════ */

.earn-page {
    background: #f2f2f7;   /* iOS system grouped background */
    flex-direction: column;
}

/* Only apply flex layout when earningsView is actually the active page */
#earningsView.app-page.active {
    display: flex !important;
}

/* ── Period bar (year nav + month chips) ──────────────────────── */
.earn-period {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.earn-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 20px 8px;
}

.earn-year-label {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    min-width: 44px;
    text-align: center;
    letter-spacing: .2px;
}

.earn-year-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f2f2f7;
    color: #1c1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.earn-year-arrow:active { background: #ddd; }

/* Scrollable month chip strip */
.earn-month-strip {
    display: flex;
    gap: 6px;
    padding: 0 16px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.earn-month-strip::-webkit-scrollbar { display: none; }

.earn-month-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    background: #f2f2f7;
    color: #3a3a3c;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.earn-month-chip--active {
    background: #18B95F;
    color: #071311;
    font-weight: 600;
}

/* ── Hero balance block ───────────────────────────────────────── */
.earn-hero {
    background: #071311;   /* darkest brand tone — green amount pops against it */
    margin: 16px 16px 0;
    border-radius: 18px;
    padding: 24px 24px 20px;
    text-align: center;
    color: #fff;
}

.earn-hero-label {
    font-size: 13px;
    font-weight: 500;
    color: #18B95F;        /* brand green label */
    opacity: .9;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.earn-hero-amount {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 16px;
    line-height: 1;
    color: #18B95F;        /* brand green for the big money number */
}

.earn-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(52,201,107,.12);   /* subtle green tint pill */
    border-radius: 12px;
    padding: 10px 20px;
}

.earn-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.earn-hero-stat-val {
    font-size: 17px;
    font-weight: 700;
}

.earn-hero-stat-lbl {
    font-size: 11px;
    opacity: .75;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.earn-hero-divider {
    width: 1px;
    height: 28px;
    background: rgba(52,201,107,.3);
}

/* ── Email statement action ───────────────────────────────────── */
.earn-actions {
    display: flex;
    justify-content: center;
    padding: 14px 16px 0;
}

.earn-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 20px;
    border: 1.5px solid #18B95F;
    background: #fff;
    color: #0f7030;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.earn-action-btn:active { background: #edfaf2; }
.earn-action-btn:disabled { opacity: .5; }

/* ── Section header above trip list ──────────────────────────── */
.earn-list-header {
    padding: 20px 20px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ── Flat native trip list ────────────────────────────────────── */
.earn-list {
    background: #fff;
    border-radius: 14px;
    margin: 0 16px 20px;
    overflow: hidden;
}

.earn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,.04);
    cursor: default;
}
/* hairline separator between rows */
.earn-row + .earn-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 54px;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,.07);
}

/* Left: coloured icon circle */
.earn-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(52,201,107,.13);   /* brand green tint */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.earn-row-icon svg { stroke: #0f7030; }  /* dark brand green stroke */

/* Middle: route + meta */
.earn-row-body {
    flex: 1;
    min-width: 0;
}

.earn-row-route {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 4px;
}

.earn-row-addr {
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.earn-row-addr--drop {
    font-weight: 400;
    color: #3a3a3c;
    font-size: 13px;
}

.earn-row-meta {
    font-size: 12px;
    color: #8e8e93;
    display: flex;
    gap: 6px;
    align-items: center;
}

.earn-row-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c7c7cc;
    flex-shrink: 0;
}

/* Right: fare */
.earn-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.earn-fare {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -.3px;
}

/* Loading / empty states */
.earn-loading,
.earn-empty {
    padding: 52px 24px;
    text-align: center;
    color: #8e8e93;
    font-size: 14px;
}

.earn-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.earn-empty-icon svg { stroke: #c7c7cc; }

@media (max-width: 380px) {
    :root {
        --app-header-height: 50px;
        --bottom-nav-height: 72px;
    }

    .role-switch {
        min-width: 112px;
    }

    .role-switch button {
        padding: 0 8px;
        font-size: 12px;
    }

    .bottom-nav button {
        min-height: 48px;
        font-size: 10px;
    }

    .bottom-nav svg {
        width: 20px;
        height: 20px;
    }
}

/* ─── Subscription view (Google Play) ───────────────── */

/* Hero — plan name + price */
.sub-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--line, #e8edeb);
    margin-bottom: 18px;
}

.sub-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #14a85b 0%, #0d7a42 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(20,168,91,0.3);
}
.sub-hero-icon svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
}

.sub-hero-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.sub-hero-price {
    font-size: 36px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.sub-hero-period {
    font-size: 16px;
    font-weight: 500;
    color: var(--muted);
}

/* Status row */
.sub-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wash, #f5f7f6);
    margin: 0 0 18px;
}

.sub-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    transition: background .25s;
}
.sub-status-dot--active   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.sub-status-dot--inactive { background: #ef4444; }
.sub-status-dot--pending  { background: #f59e0b; }

.sub-status-text { display: flex; flex-direction: column; gap: 1px; }
.sub-status-text strong { font-size: 14px; font-weight: 700; }
.sub-status-text small   { font-size: 12px; color: var(--muted); }

/* Feature checklist */
.sub-feature-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sub-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.sub-feature-list svg {
    flex-shrink: 0;
    stroke: #14a85b;
}

/* CTA buttons stack */
.sub-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

/* Google Play subscribe button */
.sub-gplay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #14a85b !important;
    color: #fff !important;
}
.sub-gplay-btn svg { flex-shrink: 0; fill: #fff; }

/* Manage in Google Play link (shown when active) */
.sub-manage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Paystack subscribe button */
.sub-paystack-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0ba4db !important;
    color: #fff !important;
}
.sub-paystack-btn svg { flex-shrink: 0; stroke: #fff; }

/* Paystack restore button */
.sub-paystack-restore-btn {
    color: #0ba4db;
    border-color: #0ba4db;
}

/* "or" divider between payment method options */
.sub-or-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}
.sub-or-divider::before,
.sub-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #e5e7e5);
}

/* Provider badge shown when subscribed (Google Play / Paystack) */
.sub-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.sub-provider-badge--google   { background: #e8f5e9; color: #14a85b; }
.sub-provider-badge--paystack { background: #e3f4fb; color: #0ba4db; }

/* Bottom note */
.sub-gplay-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}
.sub-gplay-note svg { flex-shrink: 0; margin-top: 1px; stroke: var(--muted); }

/* ── Subscription warning dot ──────────────────────────────────────────────── */
.sub-status-dot--warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }

/* ── Lapse / expiry alert banner ───────────────────────────────────────────── */
.sub-lapse-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 12px;
}
.sub-lapse-alert svg { flex-shrink: 0; margin-top: 2px; stroke: #ea580c; }
.sub-lapse-alert div { display: flex; flex-direction: column; gap: 3px; }
.sub-lapse-alert strong { font-size: 13px; font-weight: 700; color: #9a3412; }
.sub-lapse-alert span   { font-size: 12px; color: #c2410c; line-height: 1.4; }

/* ── Purchase history ──────────────────────────────────────────────────────── */
.sub-history-card { margin-top: 12px; }
.sub-history-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
}
.sub-history-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--divider, #f0f0f0);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sub-history-row:last-child { border-bottom: none; padding-bottom: 0; }
.sub-history-row-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sub-history-label { font-size: 14px; font-weight: 600; color: var(--text); }
.sub-history-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.sub-history-badge--active  { background: #dcfce7; color: #166534; }
.sub-history-badge--expired { background: #f3f4f6; color: #6b7280; }
.sub-history-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sub-history-meta span { font-size: 12px; color: var(--muted); }
.sub-history-renew { font-size: 12px; color: #22c55e; }
.sub-history-renew--off { color: #f59e0b; }
.sub-history-order { font-size: 10px; color: #9ca3af; word-break: break-all; width: 100%; }
.sub-history-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 16px 0 4px; margin: 0; }

/* ── KYC locked fields ─────────────────────────────────────────────────────── */
.field-locked {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed;
    pointer-events: none;
}
.kyc-locked-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 4px 0 0;
}
.kyc-locked-note svg { flex-shrink: 0; fill: none; stroke: #9ca3af; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Native document upload ─────────────────────────── */
.doc-type-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.doc-type-chips::-webkit-scrollbar { display: none; }

.doc-type-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--paper);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s, color .15s, background .15s;
}
.doc-type-chip svg { width: 22px; height: 22px; fill: currentColor; }
.doc-type-chip.active {
    border-color: var(--accent);
    background: #edfaf3;
    color: var(--brand);
}

.doc-file-picker {
    display: block;
    border: 2px dashed var(--line);
    border-radius: 14px;
    cursor: pointer;
    background: var(--paper);
    margin-bottom: 14px;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.doc-file-picker:active { background: #f0faf5; }
.doc-file-picker.has-file {
    border-color: var(--accent);
    border-style: solid;
}

.doc-file-picker-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 6px;
    text-align: center;
}

.doc-upload-icon {
    width: 36px;
    height: 36px;
    fill: var(--accent);
    margin-bottom: 2px;
}
.doc-file-picker.has-file .doc-upload-icon { fill: #16a34a; }

.doc-file-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
}
.doc-file-sub {
    font-size: 11px;
    color: var(--muted);
}

/* ─── Document card (read-only, no remove button) ───── */
.document-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.document-card:last-child { border-bottom: none; }

.doc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.doc-approved { background: #dcfce7; color: #16a34a; }
.doc-rejected { background: #fee2e2; color: #dc2626; }
.doc-pending  { background: #fef9c3; color: #854d0e; }

.doc-card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.doc-card-info strong { font-size: 14px; }
.doc-card-info span   { font-size: 12px; font-weight: 600; }
.doc-card-info small  { font-size: 11px; color: var(--muted); }
.doc-reject-reason    { color: #dc2626 !important; }

/* ─── Ride detail view ───────────────────────────────── */
.ride-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.ride-status-requested  { background: #fef9c3; color: #854d0e; }
.ride-status-confirmed  { background: #dbeafe; color: #1d4ed8; }
.ride-status-arrived    { background: #e0e7ff; color: #3730a3; }
.ride-status-started    { background: #dcfce7; color: #15803d; }
.ride-status-completed  { background: #f0fdf4; color: #166534; }
.ride-status-cancelled  { background: #fee2e2; color: #991b1b; }
.ride-status-expired    { background: #f3f4f6; color: #374151; }

.ride-route-card {
    background: var(--wash);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ride-route-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ride-route-row small { font-size: 11px; color: var(--muted); display: block; margin-bottom: 2px; }
.ride-route-row strong { font-size: 14px; display: block; }

.ride-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row strong { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.detail-row span   { text-align: right; font-weight: 600; }

/* ─── Chat bubbles ───────────────────────────────────── */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
    max-height: 340px;
}

.chat-bubble {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: 3px;
}
.chat-bubble-mine    { align-self: flex-end; align-items: flex-end; }
.chat-bubble-theirs  { align-self: flex-start; align-items: flex-start; }

.chat-sender {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    padding: 0 4px;
}
.chat-text {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}
.chat-bubble-mine .chat-text {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble-theirs .chat-text {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}
.chat-time {
    font-size: 10px;
    color: var(--muted);
    padding: 0 4px;
}

.chat-empty {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    padding: 32px 16px;
}

.chat-compose {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
}
.chat-compose input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 14px;
    background: var(--wash);
    outline: none;
    transition: border-color .15s;
}
.chat-compose input:focus { border-color: var(--accent); background: var(--paper); }
.chat-compose .primary {
    border-radius: 24px;
    padding: 10px 18px;
    font-size: 14px;
    flex-shrink: 0;
}

/* ─── App back button ────────────────────────────────── */
.app-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    color: var(--ink);
    flex-shrink: 0;
}

.app-back-btn svg {
    width: 22px;
    height: 22px;
    fill: var(--ink);
}

/* ─── Profile view scroll fix ───────────────────────── */
#profileView {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

#profileView .account-hub {
    min-height: min-content;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

/* ─── Profile / account hero ─────────────────────────── */
.account-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.account-hero > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.account-hero strong {
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-hero span {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

/* ─── Menu icon inside side-menu links ───────────────── */
.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 10px;
    background: #edf3f0;
    flex-shrink: 0;
}
.menu-icon svg {
    width: 17px;
    height: 17px;
    fill: var(--ink);
}
.menu-icon svg[fill="none"] {
    fill: none;
    stroke: var(--ink);
}
.menu-link.danger .menu-icon {
    background: #ffece8;
}
.menu-link.danger .menu-icon svg {
    fill: #9a3214;
}
.menu-link.danger .menu-icon svg[fill="none"] {
    fill: none;
    stroke: #9a3214;
}

/* ─── Role visibility helpers — JS controls via [hidden] ── */
/* .driver-only and .passenger-only visibility is set by JS */

/* ─── Account / profile hub ──────────────────────────── */
.account-hub {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--paper);
}

.account-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    font-size: 14px;
}

.account-summary > div:last-child {
    border-bottom: none;
}

.account-summary > div > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.account-summary > div > strong {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.account-edit-btn {
    width: auto;
    min-height: 36px;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
}

.account-menu-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    gap: 12px;
}
.account-menu-item strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
}
.account-menu-item small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #edf3f0;
    flex-shrink: 0;
}
.account-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--ink);
}

/* ─── Profile photo edit ─────────────────────────────── */
/* All rules moved to the "Profile page redesign" block at the bottom of this file */

/* Uploading spinner overlaid on the avatar */
.profile-photo-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(7,19,17,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo-spinner[hidden] { display: none; }

.spin-icon {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: spin 0.9s linear infinite;
}

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

.profile-edit-panel {
    margin-top: 8px;
}

/* ─── Vehicle photo preview ──────────────────────────── */
#vehiclePhotoPreview {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    object-fit: cover;
    background: #dfe8e5;
    display: block;
}

/* ─── Driver presence status line ────────────────────── */
.driver-presence-status {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

/* ─── Document list container ────────────────────────── */
.document-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

/* ─── Bolt title row (driver request panel) ──────────── */
.bolt-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* ─── Place suggestions dropdown ─────────────────────── */
.shared-place-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
    overflow-x: auto;
    padding: 2px 0 4px;
}

.suggestion-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

/* ─── Landing quick panel ────────────────────────────── */
.landing-quick-panel {
    position: absolute;
    bottom: calc(var(--sab, 0px) + 72px);
    left: 16px;
    right: 16px;
    z-index: 4;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    background: rgba(7,19,17,0.84);
    backdrop-filter: blur(18px);
    color: #fff;
}

/* ─── Safety page ────────────────────────────────────── */
.sos-button {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(220,38,38,0.32);
}

/* safety-contact-card removed — use .setup-section instead */

/* ─── Settings view ──────────────────────────────────── */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 16px;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item:active {
    background: var(--wash);
}

.settings-item--toggle {
    cursor: default;
}

.settings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #edf3f0;
    flex-shrink: 0;
}

.settings-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--ink);
}

.settings-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-item-body strong {
    font-size: 14px;
    font-weight: 700;
    display: block;
}

.settings-item-body small {
    font-size: 12px;
    color: var(--muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-perm-btn {
    width: auto;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    margin: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    min-height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d1d5db;
    cursor: pointer;
    transition: background .2s;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
    transition: transform .2s;
}

.toggle-switch input:checked + .toggle-track {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(18px);
}

.settings-app-version {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 0;
}

/* ─── Generic muted helper ───────────────────────────── */
.muted {
    color: var(--muted);
}

/* ─── Danger button (standalone) ─────────────────────── */
button.danger {
    background: #ffe7e1;
    color: #a12b18;
}

/* ═══════════════════════════════════════════════════════
   PRO LANDING PAGE  (data-page="landing")
   ═══════════════════════════════════════════════════════ */

body[data-page="landing"] {
    background: #071311;
}

/* Group & Shuttle — private group hire and published seat services. */
.group-transport-page{color:#073f31}.group-service-hero{margin:8px 0 16px;padding:22px;border-radius:24px;background:#084b34;color:#f5fff9;box-shadow:0 12px 28px rgba(5,75,52,.16)}.group-service-hero small{color:#78edaa;font-weight:700;letter-spacing:.12em}.group-service-hero h2{max-width:360px;margin:7px 0;font-size:1.65rem}.group-service-hero p{margin:0 0 18px;color:#d3ebdf}.group-service-hero>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}.group-service-hero button{min-height:48px;padding:10px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:#24c875;color:#062f21;font-weight:700}.group-service-hero button+button{background:rgba(255,255,255,.08);color:#fff}.group-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.group-quick-grid button{min-height:94px;padding:15px;text-align:left;border:1px solid #d4e0d9;border-radius:18px;background:#fff;color:#073f31}.group-quick-grid span,.group-quick-grid small{display:block}.group-quick-grid span{margin-bottom:6px;font-weight:700}.group-quick-grid small{color:#607168;line-height:1.35}.group-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}.group-option-grid label{display:flex!important;align-items:center;gap:7px;min-height:54px;padding:10px;border:1px solid #d5e0da;border-radius:13px;background:#f6faf8;font-size:.8rem}.group-option-grid input{width:18px!important;margin:0!important}.group-stop-input{position:relative}.group-stop-input>button{position:absolute;top:28px;right:8px;width:38px;height:38px;border:0;border-radius:50%;background:#eef5f1;color:#425c52;font-size:1.2rem}.group-request-card{display:grid;width:100%;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:10px;padding:14px;text-align:left;border:1px solid #d5e0da;border-radius:18px;background:#fff;color:#073f31}.group-request-card.confirmed{background:#effaf4}.group-request-card span:nth-child(2){min-width:0}.group-request-card strong,.group-request-card small{display:block}.group-request-card strong{margin-bottom:5px;line-height:1.35}.group-request-card small{margin-top:3px;color:#607168}.group-request-card b{font-size:1.5rem;color:#0b8b50}.group-card-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#dcf7e8;color:#078247;font-weight:700}.group-section-title{display:flex;align-items:center;justify-content:space-between;margin:15px 0 9px}.group-section-title h3{margin:0}.group-section-title span{padding:4px 8px;border-radius:999px;background:#dcf7e8;color:#087548;font-weight:700}.group-operator-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;margin:4px 0 12px;padding:16px;border:1px solid #d5e0da;border-radius:18px;background:#fff}.group-operator-status small{grid-column:1/-1;color:#607168}.group-operator-status span{padding:5px 9px;border-radius:999px;background:#fff1d9;color:#905600;font-size:.75rem;font-weight:700}.group-operator-status span.approved{background:#dcf7e8;color:#087548}.group-operator-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}.group-operator-actions button{min-height:47px;border:1px solid #bdd2c6;border-radius:14px;background:#effaf4;color:#075f3d;font-weight:700}.group-route-card,.group-booking-summary{margin:4px 0 16px;padding:18px;border-radius:22px;background:#084b34;color:#fff}.group-route-card>span,.group-booking-summary>span{display:inline-block;padding:5px 9px;border-radius:999px;background:#24c875;color:#062f21;font-size:.75rem;font-weight:700}.group-route-card h2{margin:13px 0 4px;font-size:1rem}.group-route-line{width:2px;height:24px;margin-left:5px;background:#65d99a}.group-route-card p,.group-route-card small,.group-booking-summary small{color:#cfe8dc}.group-quote{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:10px 0;padding:15px;border:1px solid #d5e0da;border-radius:18px;background:#fff}.group-quote strong,.group-quote small{display:block}.group-quote small{margin-top:4px;color:#607168}.group-quote p{margin:8px 0 0}.group-quote button{align-self:center;min-height:42px;padding:8px 13px;border:0;border-radius:12px;background:#24c875;color:#063522;font-weight:700}.shuttle-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:10px;padding:15px;border:1px solid #d5e0da;border-radius:18px;background:#fff}.shuttle-card small,.shuttle-card strong,.shuttle-card span{display:block}.shuttle-card small{color:#078247;font-weight:700}.shuttle-card span{margin-top:5px;color:#607168}.shuttle-card>div:last-child{text-align:right}.shuttle-card button{margin-top:8px;padding:8px 13px;border:0;border-radius:11px;background:#24c875;color:#063522;font-weight:700}.group-search-bar{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;margin-bottom:14px;padding:12px;border:1px solid #d5e0da;border-radius:18px;background:#fff}.group-search-bar input,.group-search-bar button{min-width:0;min-height:44px;border:1px solid #d5e0da;border-radius:12px;padding:9px}.group-search-bar button{background:#084b34;color:#fff;font-weight:700}.group-manifest,.group-booking-chat{margin:12px 0;padding:15px;border:1px solid #d5e0da;border-radius:18px;background:#fff}.group-passenger-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #e2e9e5}.group-passenger-row small{color:#607168}.group-manifest form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:11px}.group-manifest input,.group-manifest button,.group-booking-chat textarea,.group-booking-chat button{min-height:42px;padding:8px;border:1px solid #cedbd3;border-radius:12px}.group-manifest button,.group-booking-chat button{background:#24c875;color:#073f31;font-weight:700}.group-booking-chat>div{display:grid;align-content:start;gap:7px;min-height:180px;max-height:360px;overflow:auto;background:#edf5f1;padding:10px;border-radius:14px}.group-message{width:fit-content;max-width:82%;padding:9px 11px;border-radius:5px 14px 14px;background:#fff}.group-message.mine{justify-self:end;border-radius:14px 5px 14px 14px;background:#cef4dc}.group-message p{margin:0}.group-message time{display:block;margin-top:3px;text-align:right;color:#607168;font-size:.68rem}.group-booking-chat form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:9px}.group-booking-chat textarea{min-height:46px;resize:none}
@media(max-width:600px){.group-service-hero{padding:18px}.group-service-hero>div,.group-quick-grid{grid-template-columns:1fr}.group-quick-grid button{min-height:74px}.group-option-grid{grid-template-columns:1fr}.group-search-bar{grid-template-columns:1fr 1fr}.group-search-bar input:first-child,.group-search-bar button{grid-column:1/-1}.group-manifest form{grid-template-columns:1fr}.group-quote{grid-template-columns:1fr}.group-quote button{width:100%}}

/* Shuttle search and unified My Trips mobile surfaces */
.shuttle-search-page{background:#f7f2e6;color:#073f30}.shuttle-page-head{justify-content:flex-start;position:relative}.shuttle-page-head h2{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.shuttle-search-intro{margin:4px 2px 17px}.shuttle-search-kicker{display:block;margin-bottom:7px;color:#159555;font-size:.7rem;font-weight:700;letter-spacing:.08em}.shuttle-search-intro h1{margin:0 0 4px;font-size:1.55rem}.shuttle-search-intro p{margin:0;color:#607168;font-size:.86rem}.shuttle-search-form{padding:8px 13px 14px;border:1px solid #d2ddd7;border-radius:22px;background:#fff}.shuttle-route-fields{position:relative}.shuttle-route-field{display:grid!important;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:9px;min-height:65px;margin:0!important}.shuttle-route-field+.address-suggestions+input+input+.shuttle-swap-button+.shuttle-route-field{border-top:1px solid #e0e8e3}.shuttle-route-field>span:last-child{min-width:0}.shuttle-route-field small,.shuttle-date-field small{display:block;margin-bottom:2px;color:#687b72;font-size:.7rem;font-weight:500}.shuttle-route-field input,.shuttle-date-field input,.shuttle-seat-field select{width:100%;min-width:0;margin:0;padding:0;border:0;background:transparent;color:#073f30;font:inherit;font-weight:700;outline:0}.shuttle-field-icon{color:#11a45a;font-size:1.25rem}.shuttle-swap-button{position:absolute;right:4px;top:50%;z-index:2;width:38px;height:38px;transform:translateY(-50%);border:1px solid #d0dbd5;border-radius:50%;background:#f7f2e6;color:#073f30;font-size:1.15rem}.shuttle-search-options{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:9px;margin-top:11px}.shuttle-date-field,.shuttle-seat-field{display:flex!important;align-items:center;gap:8px;min-height:55px;margin:0!important;padding:9px 11px;border-radius:14px;background:#edf8f1}.shuttle-date-field>span:last-child{min-width:0}.shuttle-seat-field{display:grid!important;gap:2px}.shuttle-seat-field>span{color:#687b72;font-size:.7rem}.shuttle-search-submit{display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;gap:7px;margin-top:11px;border:0;border-radius:15px;background:#064c38;color:#fff;font-weight:700}.shuttle-results-heading,.lift-trips-list-heading{display:flex;align-items:center;justify-content:space-between;margin:19px 2px 10px}.shuttle-results-heading h3,.lift-trips-list-heading h3{margin:0;font-size:1rem}.shuttle-results-heading span{color:#078247;font-size:.75rem;font-weight:700}.shuttle-result-card{grid-template-columns:48px minmax(0,1fr) auto;align-items:center;padding:13px}.shuttle-result-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;background:#e4f7eb;font-size:1.25rem}.shuttle-result-main{min-width:0}.shuttle-result-main strong,.shuttle-result-main small,.shuttle-result-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shuttle-result-main small{color:#078247}.shuttle-result-fare{text-align:right}.shuttle-result-fare small{font-size:.68rem!important}.shuttle-result-fare button:disabled{opacity:.45}.shuttle-empty-state,.lift-trips-empty{padding:24px 15px;text-align:center;border:1px dashed #cbd8d1;border-radius:18px;color:#607168;background:rgba(255,255,255,.45)}.shuttle-empty-state>span,.lift-trips-empty>span{display:block;margin-bottom:7px;font-size:1.5rem}.shuttle-empty-state strong,.lift-trips-empty strong{display:block;color:#073f30}.shuttle-empty-state p,.lift-trips-empty p{margin:5px 0 12px;font-size:.8rem}.shuttle-empty-state button{min-height:42px;padding:8px 13px;border:0;border-radius:12px;background:#e0f7e9;color:#075f3d;font-weight:700}
.lift-trips-type-tabs{grid-template-columns:repeat(3,1fr);padding:5px;border-radius:16px;background:#e8efeb}.lift-trips-type-tabs button{border:0;background:transparent}.lift-trips-type-tabs button.active{border:0;background:#fff;box-shadow:0 2px 8px rgba(7,63,48,.1)}.trips-refresh-icon{width:38px;height:38px;padding:0;border-radius:50%!important;font-size:1.1rem}.lift-trips-list-heading button{border:0;background:transparent;color:#078247;font-weight:700}.lift-trip-modern-card{padding:15px}.lift-trip-modern-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.lift-trip-kind{color:#078247;font-size:.76rem;font-weight:700}.lift-trip-modern-card h3{margin:10px 0 4px;font-size:1rem}.lift-trip-modern-route{margin:0 0 12px;color:#607168;font-size:.78rem}.lift-trip-modern-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lift-trip-modern-grid>span{min-width:0;padding:10px;border-radius:12px;background:#edf3ef}.lift-trip-modern-grid small,.lift-trip-modern-grid strong{display:block}.lift-trip-modern-grid small{color:#68766e;font-size:.68rem}.lift-trip-modern-grid strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;font-size:.76rem;white-space:nowrap}.lift-trip-modern-actions{display:grid;grid-template-columns:1fr 46px;gap:8px;margin-top:11px}.lift-trip-modern-actions button{min-height:44px;border:1px solid #ccd8d1;border-radius:13px;background:#fff;font-weight:700}.lift-trip-modern-actions button.primary{border-color:#2bc86f;background:#2bc86f;color:#082615}.lift-trips-create{margin-top:13px}
@media(min-width:700px){.shuttle-search-page,#liftDriverTripsView{max-width:none}.shuttle-result-list{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}}

/* Full-screen map canvas — explicit w/h required so Google Maps measures the container */
.lp-map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #c8d8d3;
}

/* Google Maps tiles and overlays must sit above the container bg */
.lp-map > div,
.lp-map .gm-style {
    width: 100% !important;
    height: 100% !important;
}

/* Gradient scrim — transparent top → dark bottom */
.lp-scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(7,19,17,0.08) 0%,
        rgba(7,19,17,0.18) 35%,
        rgba(7,19,17,0.68) 70%,
        rgba(7,19,17,0.88) 100%
    );
}

/* ── Pulsing location indicator ─── */
.lp-pulse {
    position: fixed;
    top: 32%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 48px;
    height: 48px;
}

.lp-pulse-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(52,201,107,0.28);
}

.lp-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(52,201,107,0.55);
    transform: translate(-50%, -50%) scale(0);
    animation: lpPulse 2.6s ease-out infinite;
}

.lp-pulse-ring--2 {
    animation-delay: 1.3s;
}

@keyframes lpPulse {
    0%   { transform: translate(-50%,-50%) scale(0.1); opacity: 0.9; }
    100% { transform: translate(-50%,-50%) scale(4.2); opacity: 0; }
}

/* ── Top navigation bar ─── */
.lp-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(var(--sat, 0px) + 12px) 16px 12px;
}

/* Hamburger menu button */
.lp-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.lp-menu-btn:active { background: rgba(255,255,255,0.32); }
.lp-menu-btn svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

/* Left group: hamburger + brand name sit together */
.lp-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}

.lp-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: contain;
    flex-shrink: 0;
}

.lp-brand-logo-lockup {
    display: block;
    width: 132px;
    height: 40px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}


.lp-brand-name {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 10px rgba(0,0,0,0.28);
}

.lp-topbar-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.93);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}

.lp-topbar-btn:active {
    background: rgba(255,255,255,0.78);
}

/* ── Marketing promo strip (horizontal scroll above card) ─── */
.lp-promo-strip {
    position: fixed;
    left: 0;
    right: 0;
    /* JS overrides this during drag; CSS fallback is MID height (44vh) + 8px gap */
    bottom: calc(44vh + 8px);
    z-index: 19;
    overflow: hidden;
    pointer-events: auto;
    transition: opacity 0.25s ease, bottom 0.3s cubic-bezier(0.32,0.72,0,1);
}

.lp-promo-track {
    display: flex;
    gap: 10px;
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.lp-promo-track::-webkit-scrollbar { display: none; }

.lp-promo-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(230,240,235,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(7,19,17,0.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lp-promo-card:active { transform: scale(0.97); }

.lp-promo-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-promo-icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.lp-promo-card strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.lp-promo-card span {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.lp-promo-card--ride  { border-top: 3px solid #18B95F; }
.lp-promo-card--drive { border-top: 3px solid #f59e0b; }
.lp-promo-card--safe  { border-top: 3px solid #3b82f6; }
.lp-promo-card--fare  { border-top: 3px solid #8b5cf6; }

/* ── Book-a-ride sheet button (logged-in passengers only) ─── */
.lp-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    border-radius: 14px;
    background: #14a85b;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: none;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 4px 18px rgba(20,168,91,0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.lp-fab[hidden] { display: none !important; }
.lp-fab:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(20,168,91,0.28);
}
.lp-fab-icon {
    width: 20px; height: 20px;
    stroke: #fff; fill: none;
    flex-shrink: 0;
}

/* ── Bottom hero card (draggable bottom sheet — full-width, flush to bottom) ─── */
.lp-card {
    position: fixed;
    left: 0;
    right: 0;
    /* Extend below viewport bottom to fill safe-area / nav-bar gap */
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    z-index: 20;
    /* Height set by JS; auto pre-JS so the card wraps its own content */
    height: auto;
    /* Top corners rounded only; bottom is flush with physical screen edge */
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Pad content above safe-area so it isn't hidden behind gesture bar */
    padding: 6px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    background: rgba(255,255,255,0.99);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow:
        0 -1px 0 rgba(0,0,0,0.06),
        0 -12px 40px rgba(7,19,17,0.10),
        0 -40px 80px rgba(7,19,17,0.10);
    /* Sheet animation */
    transition: height 0.3s cubic-bezier(0.32,0.72,0,1);
    touch-action: none; /* let JS handle all touch events */
}

/* Drag handle pill */
.lp-card-handle {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: rgba(0,0,0,0.15);
    margin: 0 auto 12px;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}
.lp-card-handle:active { cursor: grabbing; }

/* Live indicator badge */
.lp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: #edfaf4;
    border: 1px solid rgba(52,201,107,0.22);
    font-size: 12px;
    font-weight: 700;
    color: #0c6939;
    margin-bottom: 14px;
    user-select: none;
}

.lp-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: lpBlink 1.6s ease-in-out infinite;
}

@keyframes lpBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

/* Headline block */
.lp-headline-block {
    margin-bottom: 4px;
}

.lp-headline {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.lp-sub {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

/* Quick panel (logged-in) */
.lp-quick-panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: var(--wash);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp-quick-header {
    margin-bottom: 2px;
}

.lp-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.lp-quick-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.lp-quick-text {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

/* CTA buttons */
.lp-cta-row {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-cta-row.logged-in {
    display: none;
}

.lp-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(17,24,22,0.2);
    transition: transform .14s, box-shadow .14s;
    -webkit-tap-highlight-color: transparent;
}

.lp-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(17,24,22,0.16);
}

.lp-headline-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 4px;
}

.lp-version {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    min-height: 1em;
}

/* Feature strip */
.lp-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.lp-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.lp-feature-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.lp-feature-sep {
    width: 1px;
    height: 13px;
    background: var(--line);
    flex-shrink: 0;
}

/* ── Landing page hides app bottom nav ─── */
body[data-page="landing"] .landing-bottom-actions {
    display: none;
}

/* ── Side nav overlay ─── */
.lp-side-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(7,19,17,0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.lp-side-nav-overlay.open,
.lp-side-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Side nav drawer (landing page) ─── */
.lp-side-nav {
    position: fixed;              /* full-height, edge-to-edge */
    top: 0;
    bottom: 0;
    left: 0;
    display: flex !important;     /* always rendered; visibility via transform */
    flex-direction: column;
    width: min(300px, 82vw);
    z-index: 50;
    background: #fff;
    box-shadow: 22px 0 70px rgba(7,19,17,0.24);
    overflow: hidden;             /* header pins; body scrolls */
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
}
.lp-side-nav.active {
    transform: translateX(0);
}
/* Scrollable body already uses flex:1 + overflow-y:auto — ensure it fills */
.lp-side-nav .lp-side-nav-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lp-side-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--sat, 0px) + 16px) 16px 16px;
    border-bottom: 1px solid var(--line, #e3ebe7);
    flex-shrink: 0;
}
.lp-side-nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.lp-side-nav-brand .brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: contain;
}
.lp-side-nav-brand span {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink, #111);
    letter-spacing: -0.02em;
}
.lp-side-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--line, #e3ebe7);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted, #888);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.lp-side-nav-close:active { background: var(--wash, #f5f7f6); }
.lp-side-nav-close svg { width: 16px; height: 16px; }

/* User identity block */
.lp-side-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--wash, #f5f7f6);
    border-bottom: 1px solid var(--line, #e3ebe7);
    flex-shrink: 0;
}
.lp-side-nav-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink, #111);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.lp-side-nav-user-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #111);
    line-height: 1.2;
}
.lp-side-nav-user-role {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, #18B95F);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Nav body */
.lp-side-nav-body {
    flex: 1;
    padding: 8px 0 calc(var(--sab, 0px) + 20px);
    overflow-y: auto;
}

/* Nav item */
.lp-side-nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #111);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
    border-radius: 0;
    position: relative;
}
.lp-side-nav-item:active,
.lp-side-nav-item:hover { background: var(--wash, #f5f7f6); }
.lp-side-nav-item--primary { color: var(--ink, #111); }
.lp-side-nav-item--danger  { color: #c0392b; }

.lp-side-nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--muted, #888);
}
.lp-side-nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-side-nav-icon--accent { color: var(--accent, #18B95F); }
.lp-side-nav-item--danger .lp-side-nav-icon { color: #c0392b; }

.lp-side-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent, #18B95F);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.lp-side-nav-divider {
    height: 1px;
    background: var(--line, #e3ebe7);
    margin: 8px 18px;
}

/* ── Alert zone inside the sheet ─── */
.lp-alert-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.lp-alert-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .14s;
}
.lp-alert-item:active { opacity: 0.75; }
.lp-alert-item--warning {
    background: #fff8e6;
    border: 1px solid #f5c843;
}
.lp-alert-item--error {
    background: #fff1f0;
    border: 1px solid #f5a8a8;
}
.lp-alert-item--info {
    background: #edf8f4;
    border: 1px solid rgba(52,201,107,0.3);
}
.lp-alert-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-alert-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.lp-alert-text { flex: 1; min-width: 0; }
.lp-alert-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink, #111);
    display: block;
    line-height: 1.2;
}
.lp-alert-sub {
    font-size: 11px;
    color: var(--muted, #666);
    display: block;
    margin-top: 1px;
}
.lp-alert-chevron {
    width: 14px;
    height: 14px;
    stroke: var(--muted, #bbb);
    flex-shrink: 0;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Expanded content (trip history / messages in sheet) ─── */
.lp-expanded-content {
    animation: lpExpandFade 0.2s ease;
}
@keyframes lpExpandFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Role badge in greeting row ─── */
.lp-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent, #18B95F);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
}

/* lp-feature-icon defined inline above the feature strip */

/* ── Guest / User card views ─────────────────────────────────────────────── */
#landingGuestView,
#landingUserView {
    display: block; /* both visible by default; JS toggles hidden attribute */
}

.lp-sub-note {
    margin: 4px 0 12px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.lp-headline--sm {
    font-size: 18px;
    margin: 0 0 10px;
}

.lp-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .14s;
    -webkit-tap-highlight-color: transparent;
}
.lp-btn-ghost:active { background: var(--wash); }

/* ── Greeting row ─────────────────────────────────────────────────────────── */
.lp-greeting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.lp-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ink, #111);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    overflow: hidden;
}

.lp-greeting-text { flex: 1; min-width: 0; }
.lp-greeting-text .lp-headline--sm { margin: 0 0 1px; }
.lp-greeting-sub {
    margin: 0;
    font-size: 12px;
    color: var(--muted, #888);
    font-weight: 500;
}

/* ── Quick action buttons ─────────────────────────────────────────────────── */
.lp-qactions {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.lp-qaction {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    border-radius: 16px;
    border: 0;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .13s, box-shadow .13s;
    position: relative;
}
.lp-qaction:active { transform: scale(0.96); }

/* Single-button state — switch from square tile to a full-width row */
.lp-qaction:only-child {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 52px;
    gap: 12px;
    font-size: 15px;
    padding: 0 18px;
    border-radius: 14px;
}
.lp-qaction:only-child .lp-qaction-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
}
.lp-qaction:only-child .lp-qaction-icon svg {
    width: 20px;
    height: 20px;
}

.lp-qaction--primary {
    background: #14a85b;
    color: #fff;
    box-shadow: 0 4px 18px rgba(20,168,91,0.35);
}
.lp-qaction--primary .lp-qaction-icon svg {
    stroke: #fff;
}
.lp-qaction--primary:active {
    background: #0f8f4d;
    box-shadow: 0 2px 8px rgba(20,168,91,0.28);
}
.lp-qaction--secondary {
    background: #edf8f4;
    color: var(--ink, #111);
    border: 1.5px solid rgba(52,201,107,0.25);
}
.lp-qaction--secondary .lp-qaction-icon svg {
    stroke: var(--accent, #18B95F);
}

.lp-qaction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.lp-qaction-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-count-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #14a85b;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ── Landing activity / messages section ──────────────────────────────────── */
.lp-msg-section {
    border-top: 1px solid var(--line, #e8edeb);
    padding-top: 12px;
}

/* Clean section label — replaces role-switch tabs */
.lp-section-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted, #8a9e97);
}

.lp-msg-tabs {
    display: flex;
    gap: 6px;
}

.lp-msg-tab {
    flex: 1;
    height: 30px;
    border-radius: 999px;
    border: 1.5px solid var(--line, #e0ebe7);
    background: transparent;
    color: var(--muted, #888);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.lp-msg-tab.active {
    background: var(--ink, #111);
    color: #fff;
    border-color: var(--ink, #111);
}

.lp-msg-list {
    min-height: 36px;
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Trip thread row ──────────────────────────────────────────────────────── */
.lp-msg-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #edf0ee);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
}
.lp-msg-item:last-child { border-bottom: none; }
.lp-msg-item:active { background: var(--wash, #f4f7f6); border-radius: 12px; }

/* Circular avatar with initial */
.lp-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f4ee;
    color: #0c6939;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Text body */
.lp-msg-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-msg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.lp-msg-top strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status chip */
.lp-msg-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    text-transform: capitalize;
}
.lp-msg-status--requested  { background: #fff3cd; color: #856404; }
.lp-msg-status--confirmed  { background: #d1ecf1; color: #0c5460; }
.lp-msg-status--arrived    { background: #cce5ff; color: #004085; }
.lp-msg-status--started    { background: #d4edda; color: #155724; }
.lp-msg-status--completed  { background: #e8eded; color: #444; }
.lp-msg-status--cancelled  { background: #f8d7da; color: #721c24; }
.lp-msg-status--unknown    { background: #eee;    color: #555; }

.lp-msg-route {
    font-size: 12px;
    color: var(--ink, #111);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-msg-last {
    font-size: 11px;
    color: var(--muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trailing chevron */
.lp-msg-chevron {
    width: 16px;
    height: 16px;
    stroke: var(--muted, #bbb);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.lp-msg-empty {
    margin: 12px 0 6px;
    font-size: 12px;
    color: var(--muted, #888);
    text-align: center;
}

.lp-msg-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    border-radius: 999px;
    border: 1.5px solid var(--line, #e0ebe7);
    background: transparent;
    color: var(--ink, #111);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lp-msg-more svg {
    stroke: var(--muted, #888);
}

/* ═══════════════════════════════════════════════════════════
   TOAST PILL SYSTEM
   ═══════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-height, 64px) + var(--safe-bottom, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 420px;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px 11px 12px;
    border-radius: 100px;
    background: rgba(12, 20, 18, 0.90);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.15);
    animation: toastSlideUp .3s cubic-bezier(0.34,1.56,0.64,1) both;
    pointer-events: auto;
    cursor: pointer;
    max-width: 100%;
    word-break: break-word;
}

.toast-item.success { background: rgba(14, 136, 72, 0.94); }
.toast-item.error   { background: rgba(200, 30, 30, 0.94); }

.toast-item.out {
    animation: toastSlideDown .22s ease-in forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon svg {
    width: 16px;
    height: 16px;
    stroke: rgba(255,255,255,0.9);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes toastSlideUp {
    from { opacity: 0; transform: translateY(18px) scale(0.92); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastSlideDown {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-8px) scale(0.94); }
}

/* Keep old #appMessage hidden so inline error messages don't flash */
#appMessage { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   CONFIRM BOTTOM SHEET
   ═══════════════════════════════════════════════════════════ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn .18s ease both;
}

.confirm-sheet {
    background: var(--surface, #fff);
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 32px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: slideUp .25s cubic-bezier(0.34,1.26,0.64,1) both;
}

.confirm-sheet-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.confirm-sheet-msg {
    font-size: 14px;
    color: var(--muted, #666);
    line-height: 1.55;
    white-space: pre-line;
    margin: 0;
}

.confirm-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.confirm-sheet-actions button {
    flex: 1;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }

/* ═══════════════════════════════════════════════════════════
   PAGE LOADER BAR
   ═══════════════════════════════════════════════════════════ */
#pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #14a85b, #18B95F);
    z-index: 10000;
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
    transition: none;
}

#pageLoader.active {
    opacity: 1;
    animation: pageLoaderRun 2s ease-in-out forwards;
}

#pageLoader.done {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity .35s .1s ease;
    animation: none;
}

#pageLoader.done.fade {
    opacity: 0;
}

@keyframes pageLoaderRun {
    0%   { transform: scaleX(0);    opacity: 1; }
    60%  { transform: scaleX(0.75); opacity: 1; }
    100% { transform: scaleX(0.88); opacity: 1; }
}

/* Button loading spinner */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 0.75s linear infinite;
}

/* ── Ride-detail skeleton (shown while showRide() fetches data) ── */
.rd-skel-wrap { padding: 4px 0 8px; }

.rd-skel {
    border-radius: 8px;
    background: linear-gradient(90deg, #edf2ef 25%, #e0e9e4 50%, #edf2ef 75%);
    background-size: 300% 100%;
    animation: rdShimmer 1.5s ease-in-out infinite;
}
@keyframes rdShimmer {
    0%   { background-position:  300% 0; }
    100% { background-position: -300% 0; }
}

.rd-skel--badge  { height: 32px; width: 130px; border-radius: 20px; margin-bottom: 18px; }
.rd-skel--addr   { height: 18px; width: 85%; border-radius: 6px; }
.rd-skel--label  { height: 14px; width: 100px; border-radius: 5px; }
.rd-skel--value  { height: 14px; width: 120px; border-radius: 5px; }

.rd-skel-card {
    background: #f8faf9;
    border-radius: 14px;
    border: 1px solid #edf2ef;
    padding: 16px 14px;
    margin-bottom: 12px;
}
.rd-skel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f5f2;
    gap: 12px;
}
.rd-skel-row:last-child { border-bottom: none; }

/* Ride-detail load error */
.ride-load-error {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 40px 20px; color: #526B61;
    text-align: center;
}
.ride-load-error svg {
    width: 40px; height: 40px;
    stroke: #b0c4b8; fill: none; stroke-width: 1.5;
    stroke-linecap: round;
}
.ride-load-error p { font-size: 15px; font-weight: 600; margin: 0; }

/* Skeleton loader for lists */
.skeleton-list-item {
    background: var(--line, #e8eded);
    border-radius: 14px;
    height: 66px;
    margin-bottom: 8px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ═══════════════════════════════════════════════════════════
   ADDRESS SUGGESTION PANEL
   ═══════════════════════════════════════════════════════════ */
.address-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.address-input-wrap input {
    flex: 1;
    min-width: 0;
}

.input-clear-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--line, #e0e8e5);
    color: var(--muted, #666);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.input-clear-btn[hidden] { display: none; }

.address-suggestions {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e0e8e5);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(7,19,17,0.14);
    max-height: 230px;
    overflow-y: auto;
    margin-top: 4px;
    margin-bottom: 4px;
}

.address-suggestions[hidden] { display: none; }

.suggestions-header {
    padding: 9px 14px 4px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted, #888);
    background: var(--surface, #fff);
}

.addr-suggestion {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    cursor: pointer;
    border-top: 1px solid var(--line, #e8eded);
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}

.addr-suggestion:first-of-type { border-top: none; }
.addr-suggestion:active { background: var(--line, #e8eded); }

.addr-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--wash, #f2f6f4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.addr-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--muted, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.addr-text { flex: 1; min-width: 0; }

.addr-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.addr-text small {
    display: block;
    font-size: 11px;
    color: var(--muted, #888);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.addr-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #14a85b;
    white-space: nowrap;
    flex-shrink: 0;
}

.addr-badge.dest { color: #7c5cbf; }

.route-split-line {
    height: 1px;
    background: var(--line, #e0e8e5);
    margin: 2px 0 2px 26px;
}

/* ═══════════════════════════════════════════════════════════
   PASSENGER STEPPER & FARE CHIPS
   ═══════════════════════════════════════════════════════════ */
.fare-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.fare-label { flex: 1; min-width: 120px; }

.pax-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pax-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pax-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--line, #ddd);
    border-radius: 10px;
    overflow: hidden;
    height: 38px;
}

.pax-stepper button {
    width: 38px;
    height: 100%;
    border: none;
    background: none;
    font-size: 20px;
    font-weight: 400;
    color: #14a85b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.pax-stepper button:active { background: var(--line, #eee); }

.pax-stepper span {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.fare-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.fare-chips[hidden] { display: none; }

/* Fare guidance notice shown below the fare input */
.fare-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #f5d97a;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7a5c00;
}
.fare-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #b38600;
}

.fare-chip {
    padding: 6px 13px;
    border-radius: 100px;
    border: 1.5px solid var(--line, #ddd);
    background: var(--surface, #fff);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s, background .12s;
}

.fare-chip:active,
.fare-chip.selected {
    border-color: #14a85b;
    background: rgba(20,168,91,0.08);
    color: #14a85b;
}

/* ═══════════════════════════════════════════════════════════
   DRIVER NAVIGATION BUTTONS
   ═══════════════════════════════════════════════════════════ */
.nav-action-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 14px;
    background: #14a85b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(20,168,91,0.3);
    transition: opacity .12s;
}

.nav-btn:active { opacity: 0.82; }

.nav-btn svg {
    width: 17px;
    height: 17px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   IN-APP TURN-BY-TURN NAVIGATION OVERLAY
   ═══════════════════════════════════════════════════════════ */
.in-app-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    background: #0d1a14;
}
.in-app-nav-overlay[hidden] { display: none !important; }

/* ── Header ── */
.nav-ov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: #0d1a14;
    flex-shrink: 0;
    min-height: 54px;
    gap: 8px;
}
.nav-ov-stop-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.nav-ov-stop-btn svg { width: 22px; height: 22px; fill: #fff; }
.nav-ov-title {
    flex: 1;
    font-size: 15px; font-weight: 700;
    color: #fff; text-align: center;
    letter-spacing: 0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-ov-header-spacer { width: 44px; flex-shrink: 0; }

/* ── Next-turn card ── */
.nav-turn-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    padding: 14px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid #e8edeb;
    min-height: 72px;
}
.nav-turn-icon-wrap {
    width: 52px; height: 52px; flex-shrink: 0;
    background: #14a85b;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.nav-turn-arrow {
    font-size: 28px; line-height: 1;
    color: #fff;
    user-select: none;
}
.nav-turn-info { flex: 1; min-width: 0; }
.nav-turn-instruction {
    font-size: 15px; font-weight: 700;
    color: #083A28; line-height: 1.3;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    margin-bottom: 2px;
}
.nav-turn-dist {
    font-size: 13px; color: #526B61; font-weight: 500;
}

/* ── Map fills remaining vertical space ── */
.in-app-nav-map {
    flex: 1 1 auto;
    min-height: 0;
    background: #e8efec;
    display: block;
}

/* ── Footer: distance + ETA ── */
.nav-ov-footer {
    display: flex; align-items: center;
    background: #fff;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    position: relative;
    border-top: 1px solid #e8edeb;
}
.nav-ov-stat {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-ov-stat-val {
    font-size: 22px; font-weight: 800; color: #083A28; line-height: 1.1;
}
.nav-ov-stat-lbl {
    font-size: 11px; color: #526B61; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.nav-ov-stat-div {
    width: 1px; height: 38px; background: #e8edeb; margin: 0 8px; flex-shrink: 0;
}
.nav-recenter-btn {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: #f5f7f6; border: 1px solid #e8edeb;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.nav-recenter-btn[hidden] { display: none !important; }
.nav-recenter-btn svg {
    width: 20px; height: 20px;
    fill: none; stroke: #14a85b; stroke-width: 2; stroke-linecap: round;
}

/* ════════════════════════════════════════════════════════════
   TRIP CARD  —  Active rides, history, driver requests
   ════════════════════════════════════════════════════════════ */

/* Outer shell — no padding; inner elements own their spacing */
.trip-card {
    background: #fff;
    border: 1px solid #e4ece8;
    border-radius: 20px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(17, 24, 22, 0.07);
}

/* ── Content body ── */
.trip-card-body {
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Header: trip number + status chip ── */
.trip-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* Trip-number block: "TRIP" eyebrow + "#22" large */
.trip-card-id {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}
.tc-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a9e96;
}
.tc-number {
    font-size: 22px;
    font-weight: 900;
    color: #083A28;
    letter-spacing: -0.03em;
}

/* ── Status chips ── */
.trip-status-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    margin-top: 4px;
    border-width: 1px;
    border-style: solid;
}
.trip-status-requested { background: #fff8e6; color: #8a6000; border-color: #fde68a; }
.trip-status-confirmed { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.trip-status-arrived   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.trip-status-started   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.trip-status-completed { background: #f5f7f6; color: #4a5e56; border-color: #dce8e2; }
.trip-status-cancelled { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.trip-status-unknown   { background: #f5f7f6; color: #526B61; border-color: #dce8e2; }

/* ── Vertical route: pickup → connector → dropoff ── */
.trip-card-route-v {
    display: flex;
    flex-direction: column;
}
.tc-route-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 22px;
}
.tc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tc-dot--pickup  { background: #14a85b; }
.tc-dot--dropoff { background: #fff; border: 2.5px solid #083A28; }
.tc-addr {
    font-size: 13px;
    font-weight: 600;
    color: #083A28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
/* Connector line between dots — left-aligned with dot centre (5px) */
.tc-route-line {
    width: 2px;
    height: 14px;
    background: #c4ddd0;
    margin-left: 4px;
    flex-shrink: 0;
}

/* ── Meta row: fare · passengers · date ── */
.trip-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #526B61;
    font-weight: 500;
    flex-wrap: wrap;
}
.tc-fare   { font-weight: 700; color: #083A28; }
.trip-card-dot { color: #c0cdc8; }

/* Notes (driver request cards) */
.trip-card-notes {
    font-size: 12px;
    color: #526B61;
    line-height: 1.45;
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Action footer — inset padding keeps buttons clear of card edges ── */
.trip-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 11px 14px 13px;
    border-top: 1px solid #f0f5f2;
    background: #f9fbfa;
}
.trip-card-actions .icon-action {
    flex: 0 1 auto;
    min-width: 0;
}
/* Primary actions (Start, Done, Accept) stretch to fill remaining width */
.trip-card-actions .icon-action--start,
.trip-card-actions .icon-action--complete,
.trip-card-actions .icon-action--accept {
    flex: 1;
}

/* ─── Profile page redesign ──────────────────────────────── */
/* Avatar wrap — explicit 88×88, relative so badge stays inside.
   flex: none prevents .account-hero > div { flex:1 } from stretching
   this element so that right:2px / bottom:2px stay anchored to the photo. */
.profile-avatar-wrap {
    position: relative !important;
    width: 88px !important;
    height: 88px !important;
    flex: none !important;       /* ← critical: stops flex-grow stretching */
    display: block !important;
    align-self: flex-start;
}

/* Circular avatar photo */
#profilePhotoPreview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: #dfe8e5;
    display: block;
    border: 3px solid var(--paper, #fff);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Camera badge — bottom-right corner of the avatar, always visible */
.profile-photo-badge {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #14a85b;
    border: 2px solid #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
    z-index: 3;
    top: auto !important;
    left: auto !important;
}

.profile-photo-badge svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Hero card — gradient background */
.account-hero {
    background: linear-gradient(135deg, #edf8f2 0%, #f8fffe 100%);
    border-radius: 20px;
    padding: 20px 16px 18px;
    margin-bottom: 4px;
    border: 1px solid var(--line, #e0ebe7);
    align-items: flex-start;
    position: relative;
}

/* Name / role stack */
.account-hero > div {
    padding-top: 4px;
}

.account-hero strong {
    font-size: 19px;
    font-weight: 900;
}

.account-hero span {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Edit button → pencil-icon pill */
.account-edit-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper, #fff);
    border: 1.5px solid var(--line, #dde8e4);
    color: var(--ink, #111);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    font-size: 0;      /* hide any text */
}

.account-edit-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink, #222);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Edit panel looks like an in-sheet form */
.profile-edit-panel {
    background: var(--paper, #fff);
    border-radius: 18px;
    border: 1px solid var(--line, #e0ebe7);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-edit-panel label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-edit-panel label input {
    font-size: 15px;
    font-weight: 500;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1.5px solid var(--line, #dde8e4);
    background: var(--surface, #f5f9f7);
    color: var(--ink, #111);
    margin: 0;
}

.profile-edit-panel label input:focus {
    outline: none;
    border-color: #14a85b;
    background: var(--paper, #fff);
}

/* Save + cancel inline */
.profile-edit-actions {
    display: flex;
    gap: 8px;
}
.profile-edit-actions button {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT HELPERS
   All app-page sections share the same standard padding from
   the layout block (14px sides, 14px top, 18px bottom).
   These helpers add cosmetic styling only — no padding overrides.
   ═══════════════════════════════════════════════════════════ */

/* Page section title — used as a direct child of app-page */
.page-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Divided section within a page */
.page-section-divided {
    border-top: 1px solid var(--line, #e8edeb);
    margin-top: 20px;
    padding-top: 18px;
}

.section-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 12px;
}

/* Row header inside a page (title + action button) */
.page-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line, #e8edeb);
}
.page-row-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}
.page-row-header--sm h3 {
    font-size: 16px;
    font-weight: 700;
}

/* ── Support items ──────────────────────────────────────── */
.support-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.support-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line, #e8edeb);
}
.support-item:last-child { border-bottom: none; }
.support-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--ink);
}
.support-item p, .support-item small {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}
.support-item a { color: #14a85b; }

/* ── Safety actions ─────────────────────────────────────── */
.safety-page-heading { margin-bottom: 16px; }
.safety-page-heading .page-title { margin-bottom: 4px; }
.safety-page-heading p,
.safety-emergency-card > p,
.safety-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.content-card.safety-emergency-card {
    padding: 18px;
    border-color: #f5cccc;
    border-radius: 20px;
    background: #fff3f3;
}
.safety-emergency-card h4,
.safety-section-heading h4 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
}
.safety-actions {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.safety-emergency-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid #d9272e;
    border-radius: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.safety-emergency-action svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.safety-emergency-action--primary {
    background: #d9272e;
    color: #fff;
    box-shadow: 0 8px 22px rgba(217,39,46,.2);
}
.safety-emergency-action--secondary {
    background: transparent;
    color: #c91f26;
}
.content-card.safety-contacts-card,
.content-card.safety-tips-card {
    padding: 18px;
    border-radius: 20px;
}
.safety-section-heading { margin-bottom: 12px; }
.safety-contact-list { display: grid; gap: 10px; }
.safety-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
}
.safety-contact-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.safety-contact-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 50%;
    background: #e9f4ee;
    color: var(--ink);
    font-weight: 600;
}
.safety-contact-copy { min-width: 0; }
.safety-contact-copy strong,
.safety-contact-copy small { display: block; }
.safety-contact-copy strong {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.safety-contact-copy small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.safety-contact-actions { display: flex; gap: 5px; }
.safety-contact-actions a,
.safety-contact-actions button {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #e9f4ee;
    color: var(--ink);
}
.safety-contact-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.safety-contacts-empty { padding: 18px 10px; color: var(--muted); text-align: center; }
.safety-contact-form-disclosure { margin-top: 12px; }
.safety-contact-form-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.safety-contact-form-disclosure summary::-webkit-details-marker { display: none; }
.safety-contact-form-disclosure summary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.safety-contact-form {
    display: grid;
    gap: 11px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.safety-contact-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.safety-contact-form input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
    color: var(--ink);
}
.safety-contact-form .action { width: 100%; margin-top: 2px; }
.safety-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 13px;
    background: #e9f4ee;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.safety-privacy-note svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════
   OFFLINE CONNECTIVITY BANNER
   ═══════════════════════════════════════════════════════════ */
.offline-banner {
    position: fixed;
    top: calc(var(--visual-viewport-top, 0px) + var(--app-header-height) + var(--safe-top));
    left: 14px;
    right: 14px;
    z-index: 1100;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin: 6px 0 4px;
    padding: 8px 10px;
    border: 1px solid #eadcae;
    border-radius: 10px;
    background: #fff6dc;
    color: #745c17;
    font-size: 11px;
    font-weight: 500;
    animation: slideDown .25s ease both;
}

.app-shell > .offline-banner:not([hidden]) ~ main {
    padding-top: calc(var(--app-header-height) + 43px) !important;
}

.offline-banner[hidden] {
    display: none !important;
}

.offline-banner svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    color: currentColor;
}

body[data-page="landing"] .offline-banner,body[data-page="signup"] .offline-banner{position:relative;top:auto;left:auto;right:auto;margin:6px 18px 0}
.signup-role-note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 4px 0 2px;
    padding: 12px;
    border: 1px solid #d8e6dd;
    border-radius: 14px;
    background: #edf8f1;
    color: var(--ink);
}
.signup-role-note svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signup-role-note span,.signup-role-note strong,.signup-role-note small { display: block; }
.signup-role-note strong { font-size: 13px; font-weight: 600; }
.signup-role-note small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   REVIEWS & RATINGS VIEW
   ═══════════════════════════════════════════════════════════ */
#reviewsView {
    background: var(--wash, #f5f7f6);
}

/* Score summary card at top */
.reviews-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* padding/border/radius supplied by .content-card when combined */
    background: linear-gradient(135deg, #edf8f2 0%, #f8fffe 100%);
    margin-bottom: 14px;
}

.reviews-score-avg {
    font-size: 44px;
    font-weight: 900;
    color: #14a85b;
    line-height: 1;
    letter-spacing: -0.02em;
}

.reviews-score-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reviews-score-count {
    font-size: 13px;
    color: var(--muted, #888);
    margin-top: 2px;
}

/* List of review cards */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 16px;
}

/* Each review — individual card */
.review-card {
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line, #edf0ee);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.review-card:last-child { border-bottom: none; }

.review-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f4ee;
    color: #0c6939;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-card-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.review-card-meta strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-when {
    font-size: 11px;
    color: var(--muted, #999);
}

.review-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.review-star {
    font-size: 15px;
    color: var(--line, #e0e0e0);
    line-height: 1;
}

.review-star.filled {
    color: #f59e0b;
}

.review-route {
    font-size: 12px;
    color: #14a85b;
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-comment {
    font-size: 14px;
    color: var(--ink, #222);
    line-height: 1.55;
    margin: 0 0 10px;
}

.review-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line, #e0e0e0);
    background: transparent;
    color: var(--muted, #888);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s, border-color .12s;
}

.review-report-btn svg {
    width: 12px;
    height: 12px;
}

.review-report-btn:active {
    color: #b91c1c;
    border-color: #b91c1c;
}

/* Empty state */
.review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    text-align: center;
}

.review-empty svg {
    width: 40px;
    height: 40px;
    fill: var(--line, #d0d8d4);
}

.review-empty strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #222);
}

.review-empty span {
    font-size: 13px;
    color: var(--muted, #888);
    line-height: 1.5;
}

/* Skeleton loader for reviews */
.review-skeleton {
    height: 80px;
    border-radius: 14px;
    background: var(--line, #e8eded);
    margin-bottom: 12px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   REPORT BUTTON in ride detail
   ═══════════════════════════════════════════════════════════ */
.ride-report-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e8edeb);
}

.ride-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid #f3c4c4;
    background: #fff5f5;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s;
}

.ride-report-btn svg {
    width: 15px;
    height: 15px;
}

.ride-report-btn:active {
    background: #ffe4e4;
}

/* Report reason buttons inside bottom sheet */
.report-reason-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--line, #e0e0e0);
    background: var(--paper, #fff);
    color: var(--ink, #111);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s, border-color .1s;
}

.report-reason-btn:active {
    background: #fff3f3;
    border-color: #f87171;
    color: #b91c1c;
}

/* ══════════════════════════════════════════════════════════════
   Reset-password button (inside login panel)
══════════════════════════════════════════════════════════════ */
.reset-pw-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 13px 16px;
    background: transparent;
    border: 1.5px solid #18B95F;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #18B95F;
    text-align: center;
    cursor: pointer;
    letter-spacing: .1px;
    transition: background .15s, color .15s;
    -webkit-appearance: none;
    appearance: none;
}
.reset-pw-btn:active {
    background: #18B95F;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Forgot-password bottom sheet
══════════════════════════════════════════════════════════════ */

/* Dim backdrop */
.fp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(7,19,17,.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.fp-backdrop.fp-open {
    opacity: 1;
    pointer-events: auto;
}

/* Sheet */
.fp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 401;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 6px 24px calc(var(--sab, 0px) + 28px);
    box-shadow: 0 -12px 48px rgba(7,19,17,.14);
    /* start off-screen */
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.32,0.72,0,1);
    touch-action: none;
    will-change: transform;
}
.fp-sheet.fp-open {
    transform: translateY(0);
}

/* Drag handle */
.fp-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: #d1d9d5;
    margin: 6px auto 18px;
}

/* Header row */
.fp-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.fp-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #083A28;
    margin: 0;
}
.fp-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f4f2;
    border: none;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
    transition: background .15s;
}
.fp-sheet-close:active { background: #e0e9e4; }

/* Subtitle */
.fp-sheet-sub {
    font-size: 13.5px;
    color: #6b7a74;
    line-height: 1.55;
    margin: 0 0 22px;
}

/* Label */
.fp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
    letter-spacing: .2px;
}

/* Email input */
.fp-input {
    display: block;
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    font-family: inherit;
    border: 1.5px solid #d4dbd7;
    border-radius: 12px;
    outline: none;
    background: #fafbfa;
    color: #083A28;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}
.fp-input:focus {
    border-color: #18B95F;
    box-shadow: 0 0 0 3px rgba(52,201,107,.12);
    background: #fff;
}

/* Error message */
.fp-error-msg {
    font-size: 12.5px;
    color: #dc2626;
    margin: 8px 0 0;
}

/* Send button */
.fp-send-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    background: #18B95F;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: .2px;
    transition: background .2s, opacity .2s;
    -webkit-appearance: none;
    appearance: none;
}
.fp-send-btn:active  { background: #2bb55f; }
.fp-send-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Success step */
.fp-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #edf8f2;
    margin: 12px auto 20px;
}
.fp-done-title {
    font-size: 18px;
    font-weight: 700;
    color: #083A28;
    text-align: center;
    margin: 0 0 8px;
}
.fp-done-sub {
    font-size: 13.5px;
    color: #6b7a74;
    text-align: center;
    line-height: 1.55;
    margin: 0 0 4px;
}

/* ── Account-type selection sheet (social new-user signup) ─────────────── */
.at-sheet { max-height: 72vh; }

.at-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0 12px;
}
.at-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px 20px;
    border: 2px solid #e8ece9;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
    text-align: center;
}
.at-type-card:active { transform: scale(.97); }
.at-type-card.at-selected {
    border-color: #18B95F;
    background: #f0fdf4;
}
.at-type-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #f4f6f5;
    display: flex; align-items: center; justify-content: center;
}
.at-type-icon svg { width: 26px; height: 26px; fill: none; stroke: #222; stroke-width: 1.8; stroke-linecap: round; }
.at-type-icon--driver { background: #f0fdf4; }
.at-type-icon--driver svg { stroke: #18B95F; }
.at-type-label { font-size: 15px; font-weight: 700; color: #111; }
.at-type-hint  { font-size: 12px; color: #888; line-height: 1.4; }
.at-sheet-loader {
    display: flex; align-items: center; gap: 10px;
    justify-content: center;
    padding: 18px 0;
    color: #555; font-size: 14px;
}
.spinner-ring {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2.5px solid #e0e0e0;
    border-top-color: #18B95F;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.spinner-ring--lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── "Become a Driver" banner (profile view) ───────────────────────────── */
.become-driver-banner {
    margin: 0 0 18px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #083A28 0%, #1a2e24 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.become-driver-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.become-driver-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(52,201,107,.18);
    display: flex; align-items: center; justify-content: center;
}
.become-driver-icon svg { width: 22px; height: 22px; fill: none; stroke: #18B95F; stroke-width: 1.8; stroke-linecap: round; }
.become-driver-content div { display: flex; flex-direction: column; min-width: 0; }
.become-driver-content strong { font-size: 14px; color: #fff; }
.become-driver-content span   { font-size: 12px; color: #aaa; margin-top: 1px; }
.become-driver-cta {
    flex-shrink: 0;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 10px;
    background: #18B95F;
    color: #fff;
    border: none;
    font-weight: 700;
    cursor: pointer;
}

/* ── Profile hero skeleton shimmer (shown while UserInfo is loading) ──────── */
@keyframes profileShimmer {
    0%   { background-position: -300px 0; }
    100% { background-position:  300px 0; }
}
.profile-loading .profile-avatar-wrap,
.profile-loading .account-hero strong,
.profile-loading .account-hero span {
    border-radius: 8px;
    color: transparent !important;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 600px 100%;
    animation: profileShimmer 1.4s infinite linear;
    pointer-events: none;
    user-select: none;
}
.profile-loading .profile-avatar-wrap {
    border-radius: 50%;
    width: 80px; height: 80px;
}

/* Subtle "couldn't refresh" hint */
.profile-refresh-hint {
    font-size: 12px;
    color: #e88;
    text-align: center;
    margin: -8px 0 12px;
    padding: 0;
}

/* ── Driver application status card ───────────────────────────────────────── */
.driver-app-status-card {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f0f4ff;
    border: 1px solid #d0d9f7;
}
.driver-app-status-card.driver-app-status--pending {
    background: #fffbea;
    border-color: #f0d77a;
}
.driver-app-status-card.driver-app-status--rejected {
    background: #fff2f2;
    border-color: #f7b3b3;
}
.driver-app-status-card.driver-app-status--suspended {
    background: #fff6e8;
    border-color: #f7d08a;
}
.driver-app-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.driver-app-status-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.driver-app-status-title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}
.driver-app-status-msg {
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
    line-height: 1.45;
}
.driver-app-resume-btn {
    width: 100%;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    margin-top: 4px;
}

/* ── Driver upgrade confirmation sheet (kept for legacy) ─────────────────── */
.drv-upgrade-sheet { max-height: 85vh; }
.drv-upgrade-checklist { list-style:none; padding:0; margin:14px 0 18px; display:flex; flex-direction:column; gap:10px; }
.drv-upgrade-checklist li { display:flex; align-items:center; gap:10px; font-size:14px; color:#333; }
.drv-upgrade-checklist svg { flex-shrink:0; width:18px; height:18px; fill:none; stroke:#18B95F; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.drv-upgrade-note { font-size:13px; color:#888; background:#f4f6f5; border-radius:10px; padding:10px 14px; margin:0 0 20px; }
.drv-upgrade-confirm-btn { width:100%; margin-top:4px; }
.drv-upgrade-loading { display:flex; align-items:center; gap:12px; justify-content:center; padding:32px 0; color:#555; font-size:15px; }

/* ── Become-a-driver guided wizard ─────────────────────────────────────────── */

/* Backdrop */
.wz-backdrop {
    position: fixed; inset: 0; z-index: 8900;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .32s ease;
}
.wz-backdrop.wz-open { opacity: 1; pointer-events: all; }

/* Panel — slides up from bottom, full height */
.driver-wizard {
    position: fixed; inset: 0; z-index: 9000;
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    overflow: hidden;
}
.driver-wizard.wz-open { transform: translateY(0); }

/* Top chrome */
.wz-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 0;
    flex-shrink: 0;
}
.wz-icon-btn {
    width: 40px; height: 40px;
    border: none; background: #f0f0f0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.wz-icon-btn:active { background: #e0e9e4; }
.wz-icon-btn svg { width: 20px; height: 20px; }

/* Step dots */
.wz-dots { display: flex; gap: 6px; align-items: center; }
.wz-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ddd; transition: all .2s;
}
.wz-dot.active  { background: #18B95F; width: 20px; border-radius: 4px; }
.wz-dot.done    { background: #18B95F; opacity: .45; }

/* Progress bar */
.wz-progress-track {
    height: 3px; background: #eee; margin: 10px 0 0; flex-shrink: 0;
}
.wz-progress-fill {
    height: 100%; background: #18B95F;
    transition: width .35s ease; border-radius: 0 2px 2px 0;
}

/* Step container */
.wz-step {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.wz-scroll {
    flex: 1; overflow-y: auto; padding: 20px 20px 8px;
    -webkit-overflow-scrolling: touch;
}
.wz-footer {
    padding: 12px 20px max(20px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex; flex-direction: column; gap: 8px;
    flex-shrink: 0;
}

/* Slide-in animation when advancing */
@keyframes wzSlideIn {
    from { opacity:0; transform: translateX(40px); }
    to   { opacity:1; transform: translateX(0);    }
}
.wz-slide-in { animation: wzSlideIn .3s ease both; }

/* Hero illustration */
.wz-hero { display: flex; justify-content: center; padding: 8px 0 4px; }
.wz-hero-svg { width: 80px; height: 80px; }

/* Typography */
.wz-title {
    font-size: 22px; font-weight: 700; color: #111;
    margin: 12px 0 8px; line-height: 1.25;
}
.wz-sub {
    font-size: 14px; color: #555; margin: 0 0 18px; line-height: 1.55;
}

/* Requirements checklist */
.wz-checklist {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: flex; flex-direction: column; gap: 11px;
}
.wz-checklist li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #333; line-height: 1.4;
}
.wz-checklist svg {
    flex-shrink: 0; margin-top: 1px;
    width: 18px; height: 18px;
    fill: none; stroke: #18B95F; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Note / info box */
.wz-note {
    font-size: 13px; color: #666;
    background: #f4f6f5; border-radius: 10px;
    padding: 10px 14px; margin: 0 0 4px;
    line-height: 1.5;
}

/* Error */
.wz-error {
    font-size: 13px; color: #d32f2f;
    background: #fff3f3; border: 1px solid #ffdede;
    border-radius: 8px; padding: 10px 12px;
    margin: 10px 0 0;
}

/* Loading row */
.wz-loading {
    display: flex; align-items: center; gap: 10px;
    justify-content: center; padding: 4px 0;
    font-size: 14px; color: #555;
}

/* Text-only button (skip) */
.wz-text-btn {
    background: none; border: none; cursor: pointer;
    font-size: 14px; color: #888;
    padding: 6px 0; text-align: center;
    font-weight: 500;
}
.wz-text-btn:active { color: #555; }

/* ── Form fields ── */
.wz-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.wz-label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 13px; font-weight: 600; color: #333;
}
.wz-input {
    padding: 11px 13px; border: 1.5px solid #ddd; border-radius: 10px;
    font-size: 15px; color: #111; background: #fff;
    outline: none; transition: border-color .15s;
    -webkit-appearance: none;
}
.wz-input:focus { border-color: #18B95F; }
.wz-req { color: #d32f2f; font-weight: 700; margin-left: 1px; }
.wz-opt { font-weight: 400; color: #888; font-size: 12px; }

/* ── Document tabs ── */
.wz-doc-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 10px;
}
.wz-doc-tab {
    padding: 6px 11px; border-radius: 20px;
    border: 1.5px solid #ddd; background: #fff;
    font-size: 12px; font-weight: 600; color: #555;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.wz-doc-tab.active   { border-color: #18B95F; background: #e8f8ef; color: #1a7a42; }
.wz-doc-tab.uploaded { border-color: #18B95F; color: #1a7a42; }
.wz-tab-check {
    width: 13px; height: 13px; flex-shrink: 0;
    fill: none; stroke: #18B95F; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.wz-doc-hint {
    font-size: 13px; color: #666; margin: 0 0 10px;
    min-height: 18px; line-height: 1.45;
}

/* Doc progress tracker */
.wz-doc-tracker { margin: 0 0 14px; }
.wz-tracker-bar {
    height: 6px; background: #eee; border-radius: 3px;
    margin-bottom: 5px; overflow: hidden;
}
.wz-tracker-fill { height: 100%; background: #18B95F; border-radius: 3px; transition: width .4s; }
.wz-tracker-label { font-size: 12px; color: #888; }

/* File picker */
.wz-file-picker {
    display: block; border: 2px dashed #ddd; border-radius: 12px;
    padding: 18px 16px; text-align: center; cursor: pointer;
    margin-bottom: 10px; background: #fafafa;
    transition: border-color .15s;
}
.wz-file-picker.has-file { border-color: #18B95F; background: #f0fdf5; }
.wz-file-picker-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wz-file-picker-inner svg {
    width: 32px; height: 32px;
    fill: none; stroke: #bbb; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.wz-file-picker #wz-doc-file-name { font-size: 14px; color: #444; font-weight: 500; }
.wz-file-sub { font-size: 12px; color: #999; }

/* Uploaded doc list */
.wz-doc-list { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.wz-doc-empty { font-size: 13px; color: #999; text-align: center; padding: 10px 0; margin: 0; }
.wz-doc-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: #f8f8f8; border-radius: 8px;
}
.wz-doc-status-icon {
    font-size: 14px; font-weight: 700; width: 22px; text-align: center; flex-shrink: 0;
}
.wz-doc-row-name { flex: 1; font-size: 13px; color: #333; font-weight: 500; }
.wz-doc-row-badge { font-size: 12px; font-weight: 600; }
.wz-doc-ok     { color: #1a7a42; }
.wz-doc-bad    { color: #d32f2f; }
.wz-doc-pending { color: #b07d10; }

/* ── Vehicle photo ── */
.wz-vehicle-photo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.wz-vehicle-preview-box {
    width: 90px; height: 70px; border-radius: 10px;
    background: #f0f0f0; border: 1.5px dashed #ddd;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; flex-shrink: 0; overflow: hidden;
}
.wz-vehicle-preview-box svg { width: 28px; height: 28px; }
.wz-vehicle-preview-box span { font-size: 11px; color: #aaa; }
.wz-photo-btn { cursor: pointer; }

/* ── Step 5 summary cards ── */
.wz-summary-cards { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.wz-sum-card {
    border: 1.5px solid #e8f8ef; border-radius: 12px; overflow: hidden;
    background: #fcfefd;
}
.wz-sum-card--warn { border-color: #ffe0b2; background: #fffbf5; }
.wz-sum-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 8px; border-bottom: 1px solid #eee;
}
.wz-sum-header strong { flex: 1; font-size: 14px; color: #222; }
.wz-sum-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px;
}
.wz-sum-badge--ok   { background: #e8f8ef; color: #1a7a42; }
.wz-sum-badge--warn { background: #fff3e0; color: #b45309; }
.wz-sum-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.wz-sum-row:last-child { border-bottom: none; }
.wz-sum-label { color: #666; }
.wz-sum-val   { color: #222; font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }
.wz-sum-missing .wz-sum-val, .wz-sum-missing .wz-sum-label { color: #c0392b; }
.d-none{display: none !important;}
/* LiftLink driver mobile flow */
.lift-driver-mobile-page{max-width:680px;margin:0 auto;padding:18px 16px 96px;background:#f4f8f5;min-height:100%}.lift-driver-welcome small,.lift-driver-welcome p,.lift-driver-page-head p{color:#68766e;font-size:.82rem}.lift-driver-welcome h1{font-size:1.55rem;margin:4px 0}.lift-driver-next-card{margin:18px 0;padding:17px;border-radius:20px;background:#153d28;color:#f5fff8}.lift-driver-next-top{display:flex;justify-content:space-between;gap:12px}.lift-driver-next-top small,.lift-driver-next-top span{display:block;color:#c9e8d5;font-size:.78rem}.lift-driver-next-top strong{display:block;margin:5px 0;font-size:1.05rem}.lift-driver-route-icon{font-size:1.4rem}.lift-driver-next-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.lift-driver-next-actions button{padding:11px;border:1px solid rgba(255,255,255,.3);border-radius:13px;background:rgba(255,255,255,.09);color:#fff;font-weight:700}.lift-driver-next-actions button:first-child{background:#31ca73;border-color:#31ca73;color:#082615}.lift-driver-section-title,.lift-driver-page-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.lift-driver-section-title h2,.lift-driver-page-head h2{margin:0;font-size:1.15rem}.lift-driver-section-title button{border:0;background:transparent;color:#078344;font-weight:700}.lift-driver-page-head{margin-bottom:16px}.lift-driver-page-head>div{flex:1}.lift-driver-page-head p{margin:3px 0 0}.lift-driver-back{width:38px;height:38px;border:0;border-radius:50%;background:#fff;font-size:1.3rem}.lift-driver-card-list{display:grid;gap:11px}.lift-driver-route-card,.lift-driver-trip-card,.lift-driver-person-card{padding:15px;border:1px solid #dce5e0;border-radius:18px;background:#fff}.lift-driver-route{display:grid;grid-template-columns:18px 1fr;gap:9px}.lift-driver-route-track{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 0}.lift-driver-route-track:before{content:"";position:absolute;top:10px;bottom:10px;width:2px;background:#ccd8d1}.lift-driver-route-track i{z-index:1;width:9px;height:9px;border-radius:50%;background:#27c66e;box-shadow:0 0 0 3px #fff}.lift-driver-route-track i:last-child{background:#17231d}.lift-driver-route strong,.lift-driver-route small{display:block}.lift-driver-route small{margin:2px 0 13px;color:#6b786f;font-size:.75rem}.lift-driver-route small:last-child{margin-bottom:0}.lift-driver-chips{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}.lift-driver-chips span{padding:5px 8px;border-radius:99px;background:#edf3ef;color:#526057;font-size:.72rem}.lift-driver-card-actions,.lift-driver-decision{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lift-driver-card-actions button,.lift-driver-decision button{min-height:42px;border:1px solid #ccd8d1;border-radius:13px;background:#fff;font-weight:700}.lift-driver-card-actions button.primary,.lift-driver-decision button.accept{border-color:#2bc86f;background:#2bc86f;color:#082615}.lift-driver-decision button.reject{border-color:#edbaba;background:#fff4f4;color:#a52828}.lift-driver-empty{padding:28px 14px;text-align:center;color:#718078}.lift-driver-empty button{margin-top:12px}.lift-driver-person-card{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}.lift-driver-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#ddf7e7;color:#087b3d;font-weight:800}.lift-driver-person-card>div{flex:1}.lift-driver-person-card strong,.lift-driver-person-card small{display:block}.lift-driver-person-card small{margin-top:3px;color:#68766e;font-size:.76rem}.lift-driver-person-request p{margin:10px 0;color:#4d5a52;font-size:.84rem}.lift-driver-verified{color:#12a558}.lift-driver-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.lift-driver-detail-grid>span{padding:11px;border-radius:12px;background:#edf3ef}.lift-driver-detail-grid small,.lift-driver-detail-grid strong{display:block}.lift-driver-detail-grid small{color:#68766e;font-size:.72rem}.lift-driver-detail-grid strong{margin-top:4px;font-size:.83rem}.lift-driver-note{padding-top:12px;color:#526057}.lift-driver-primary,.lift-driver-secondary{display:block;width:100%;min-height:47px;margin-top:12px;border-radius:14px;font-weight:800}.lift-driver-primary{border:0;background:#2bc86f;color:#082615}.lift-driver-secondary{border:1px solid #ccd8d1;background:#fff;color:#17231d}.lift-driver-form>label,.lift-driver-form-grid label{display:block;margin-bottom:13px;font-size:.78rem;font-weight:700}.lift-driver-form input,.lift-driver-form select,.lift-driver-form textarea{width:100%;margin-top:6px;padding:13px;border:1px solid #ccd8d1;border-radius:13px;background:#fff}.lift-driver-form textarea{min-height:75px}.lift-driver-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lift-driver-form #liftRecurrenceDayPicker{display:grid!important;grid-template-columns:repeat(7,1fr);gap:5px}.lift-driver-form #liftRecurrenceDayPicker[hidden]{display:none!important}.lift-driver-form #liftRecurrenceDayPicker button{min-width:0;padding:9px 2px;border-radius:10px}.lift-driver-form #liftRecurrenceDayPicker button.active{background:#2bc86f;color:#082615;border-color:#2bc86f}.lift-driver-filter-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.lift-driver-filter-tabs button{padding:10px;border:1px solid #ccd8d1;border-radius:12px;background:#fff}.lift-driver-filter-tabs button.active{border-color:#2bc86f;background:#ddf7e7;color:#087b3d}.lift-driver-trip-top{display:flex;align-items:center;gap:10px}.lift-driver-trip-top>div{flex:1}.lift-driver-trip-top strong,.lift-driver-trip-top small{display:block}.lift-driver-trip-top small{margin-top:3px;color:#68766e;font-size:.75rem}.lift-driver-calendar{font-size:1.2rem}.lift-driver-status{padding:5px 8px;border-radius:99px;background:#fff3d7;color:#865900;font-size:.7rem}.lift-driver-card-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.lift-driver-card-links button{border:0;background:transparent;color:#087b3d;font-weight:700}.lift-driver-card-links button.danger{color:#b32c2c}.lift-chat-page .lift-chat-messages{background:transparent}.lift-chat-bubble{border-radius:15px!important;background:#fff!important;border:1px solid #dce5e0}.lift-chat-bubble.mine{background:#bdf0d0!important;border-color:#bdf0d0}.lift-chat-composer{background:#f4f8f5!important}.lift-chat-composer input{border-radius:999px!important}
@media(max-width:430px){.lift-driver-mobile-page{padding-inline:14px}.lift-driver-form-grid{grid-template-columns:1fr 1fr}}
.app-page.lift-driver-mobile-page{width:100%;max-width:none;margin-right:0;margin-left:0;box-sizing:border-box}.lift-driver-card-actions-single{grid-template-columns:1fr}
.lift-driver-mobile-page>.lift-driver-page-head{display:none}

/* The shared driver header is hidden because the app toolbar already supplies the title.
   Chat therefore has two visible grid children, not the original three. */
.app-page.lift-chat-page.active {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
}
.lift-chat-page .lift-chat-messages {
    min-width: 0;
    min-height: 0;
    padding: 10px 0 16px;
    overflow-y: auto;
}
.lift-chat-page .lift-chat-composer {
    width: 100%;
    min-height: 58px;
    padding: 8px 0 0;
    align-items: center;
    align-self: end;
    box-sizing: border-box;
}
.lift-chat-page .lift-chat-composer input {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid #ccd8d1;
    box-sizing: border-box;
}
.lift-chat-page .lift-chat-composer button {
    width: auto;
    min-width: 78px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;
    border-radius: 24px;
}
.lift-trip-reference-name {
    margin: 0 0 12px;
    color: #0c6f39;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}
.lift-driver-week-capacity { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.lift-driver-week-capacity > small { display:block; margin-bottom:8px; color:#c9e8d5; }
.lift-driver-week-capacity > div { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.lift-driver-week-capacity > div::-webkit-scrollbar { display:none; }
.lift-driver-week-capacity button { min-width:88px; padding:8px 10px; border:1px solid rgba(255,255,255,.22); border-radius:11px; background:rgba(255,255,255,.08); color:#fff; text-align:left; }
.lift-driver-week-capacity button strong,.lift-driver-week-capacity button span { display:block; }
.lift-driver-week-capacity button span { margin-top:3px; color:#c9e8d5; font-size:.72rem; }
.lift-driver-week-capacity .lift-driver-view-all-dates { width:auto; min-width:0; min-height:36px; margin:8px 0 0 auto; padding:5px 0; display:block; border:0; background:transparent; color:#8ef0b4; font-weight:800; text-align:right; }

/* Cordova/mobile presentation: keep the full weekly capacity visible without a clipped
   horizontal strip, and leave room for Android/iOS safe areas and the bottom toolbar. */
@media (max-width: 640px) {
    .app-page.lift-driver-mobile-page {
        padding-right: 14px;
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        padding-left: 14px;
    }
    .lift-driver-next-card {
        margin-top: 14px;
        padding: 16px;
        border-radius: 20px;
    }
    .lift-driver-next-top { align-items:flex-start; }
    .lift-driver-next-top strong {
        font-size: 1rem;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }
    .lift-driver-next-top span { line-height:1.35; }
    .lift-driver-week-capacity > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        overflow: visible;
    }
    .lift-driver-week-capacity button {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        padding: 8px;
        text-align: center;
    }
    .lift-driver-week-capacity button strong { font-size:.88rem; }
    .lift-driver-week-capacity .lift-driver-view-all-dates { width:auto; min-height:36px; text-align:right; }
    .lift-driver-next-actions { gap:7px; margin-top:13px; }
    .lift-driver-next-actions button { min-width:0; padding:10px 8px; font-size:.86rem; }
}
@media (max-width: 390px) {
    .lift-driver-welcome h1 { font-size:1.35rem; }
    .lift-driver-next-actions { grid-template-columns:1fr; }
    .lift-driver-week-capacity > div { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Compact native-app typography. Android resolves Roboto locally, so this adds no
   web-font download or startup delay. Inputs stay at 16px for comfortable editing. */
@media (max-width: 640px) {
    body { font-size:14px; line-height:1.4; }
    input, textarea, select { font-size:16px; }
    .app-mark { font-size:17px; }
    .app-page-title { font-size:17px; }
    .header-role-badge { font-size:10px; }
    .lift-driver-welcome h1 { font-size:1.45rem; line-height:1.18; }
    .lift-driver-welcome p { font-size:.86rem; }
    .lift-driver-section-title h2,.lift-driver-page-head h2 { font-size:1.05rem; }
    .lift-driver-next-top strong { font-size:.95rem; }
    .lift-driver-next-top small,.lift-driver-next-top span { font-size:.76rem; }
    .lift-driver-week-capacity > small { font-size:.76rem; }
    .lift-driver-week-capacity button strong { font-size:.82rem; }
    .lift-driver-week-capacity button span { font-size:.68rem; }
    .lift-driver-next-actions button,.lift-driver-card-actions button,.lift-driver-decision button { font-size:.82rem; }
    .lift-driver-route strong,.lift-driver-trip-top strong { font-size:.91rem; line-height:1.3; }
    .lift-driver-route small,.lift-driver-trip-top small { font-size:.72rem; }
    .lift-driver-detail-grid strong { font-size:.78rem; }
    .lift-driver-detail-grid small,.lift-driver-chips span { font-size:.68rem; }
    .lift-notification-status-card strong { font-size:.9rem; }
    .lift-notification-status-card small,.lift-notification-item small { font-size:.72rem; }
    .bottom-nav button { font-size:10px; }
    .bottom-nav svg { width:20px; height:20px; }
}
.lift-driver-form>h3{margin:8px 0 12px;font-size:1rem}.lift-trip-route-fields{position:relative;display:grid;grid-template-columns:18px 1fr;gap:9px;margin-bottom:20px}.lift-trip-route-track{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:12px 0}.lift-trip-route-track:before{content:"";position:absolute;top:20px;bottom:20px;width:2px;background:#cbd8d1}.lift-trip-route-track i{z-index:1;width:9px;height:9px;border-radius:50%;background:#25c26e;box-shadow:0 0 0 3px #f4f8f5}.lift-trip-route-track i:last-child{background:#17231d}.lift-trip-route-fields label{margin:0}.lift-trip-route-fields input{min-height:50px;margin-bottom:9px}.lift-trip-frequency-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.lift-trip-frequency-buttons button{min-height:43px;border:1px solid #ccd8d1;border-radius:12px;background:#fff;font-weight:700}.lift-trip-frequency-buttons button.active{border-color:#25c26e;background:#25c26e;color:#072515}.lift-trip-return-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #dce5e0}.lift-trip-return-toggle span strong,.lift-trip-return-toggle span small{display:block}.lift-trip-return-toggle span small{margin-top:3px;color:#68766e;font-weight:400}.lift-trip-return-toggle input{width:auto!important;margin:0!important;accent-color:#25c26e}.lift-trip-create-summary{display:flex;align-items:center;margin:8px 0 14px;padding:12px;border-radius:14px;background:#e4f6eb;color:#176c3c;font-size:.78rem}.lift-driver-form #liftPickupPointList{display:none}.lift-driver-form .address-suggestions{z-index:20}.lift-driver-form #liftTripReturnDepartureWrap[hidden]{display:none!important}

/* Passenger trips: compact native cards and touch-sized actions. */
.lift-passenger-trips-page{width:100%;max-width:none;box-sizing:border-box;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}.lift-passenger-trips-page .driver-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px}.lift-passenger-trips-page .driver-section-header h3{margin:0;font-size:1.05rem}.lift-passenger-trips-panel{padding:0;overflow:hidden;border:0;background:transparent;box-shadow:none}.lift-passenger-trip-card{margin-bottom:11px;padding:16px;overflow:hidden;border:1px solid #d8e2dc;border-radius:18px;background:#fff;box-shadow:0 4px 12px rgba(14,35,25,.06);line-height:1.4;overflow-wrap:anywhere}.lift-passenger-trip-card>strong{display:inline;font-size:.96rem;line-height:1.35}.lift-passenger-trip-card>small{color:#65736b;font-size:.76rem}.lift-passenger-trip-contact{margin-top:9px;padding-top:9px;border-top:1px solid #e2e9e5}.lift-passenger-trip-contact a{color:#087b3d;font-weight:750;text-decoration:none}.lift-passenger-trip-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}.lift-passenger-trip-actions .driver-section-action{width:100%;min-width:0;min-height:43px;margin:0;padding:9px 8px;border:1px solid #ccd8d1;border-radius:12px;background:#fff;color:#173027;font-size:.78rem;font-weight:750;white-space:normal}.lift-passenger-trip-actions .lift-trip-chat-action{border-color:#29c76d;background:#29c76d;color:#092918}.lift-passenger-trip-card .lift-driver-chips{margin:12px 0 0}.lift-passenger-trips-page #liftMyRouteRequestsList .driver-list-item{margin-bottom:10px;padding:15px;border:1px solid #d8e2dc!important;border-radius:16px;background:#fff;overflow-wrap:anywhere}
@media(max-width:640px){.lift-passenger-trips-page{padding:12px 13px calc(104px + env(safe-area-inset-bottom,0px))}.lift-passenger-trips-page .driver-section-header{position:static}.lift-passenger-trip-card{padding:14px;border-radius:16px}.lift-passenger-trip-card>strong{font-size:.9rem}}
@media(max-width:360px){.lift-passenger-trip-actions{grid-template-columns:1fr}}

/* Lift clubs are persistent commuter memberships, separate from once-off trips. */
.lift-club-card{cursor:pointer}.lift-club-card:active{transform:scale(.99)}
.lift-club-terms,.lift-club-member{margin:12px 0;padding:16px;border:1px solid #d7e2dc;border-radius:16px;background:#fff}
.lift-club-terms h3,.lift-club-member strong{margin:0 0 8px}.lift-club-terms p{white-space:pre-wrap;color:#405249}
.lift-club-member{display:grid;gap:0}.lift-club-member small{display:block;color:#607168}.lift-club-member-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:14px}.lift-club-member-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#dcf7e8;color:#087548;font-weight:700}.lift-club-member-head strong{display:block;margin:0 0 3px}.lift-club-member-status{display:inline-flex;align-items:center;gap:5px;color:#9a5b00;font-size:.75rem;font-weight:700}.lift-club-member-status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.lift-club-member-status.active{color:#087548}.lift-club-member-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:13px 0;border-top:1px solid #e1e9e4;border-bottom:1px solid #e1e9e4}.lift-club-member-facts span{display:grid;gap:3px}.lift-club-member-facts strong{margin:0;font-size:.88rem}.lift-club-member-payment-status.paid{color:#087548}.lift-club-member-payment-status.due{color:#9a5b00}.lift-club-member-payment-status.empty{color:#607168}.lift-club-member-route{position:relative;padding:12px 0 4px}.lift-club-member-route:before{content:"";position:absolute;top:25px;bottom:19px;left:5px;width:2px;background:#cbd8d0}.lift-club-member-point{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;padding:3px 0 10px}.lift-club-member-point>span{z-index:1;width:10px;height:10px;margin-top:5px;border:2px solid #fff;border-radius:50%;background:#20bf6b}.lift-club-member-point.dropoff>span{background:#14231d}.lift-club-member-point strong{display:block;margin:3px 0 0;font-size:.88rem;line-height:1.35}.lift-club-member-days{margin:0 0 7px 31px}
.lift-club-apply{margin-top:14px;padding:16px;border:1px solid #d7e2dc;border-radius:18px;background:#fff}
.lift-club-apply label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px}.lift-club-apply input[type=checkbox]{width:20px;margin:0}
.lift-club-apply-days{margin:4px 0 12px;padding:0;border:0}.lift-club-apply-days legend{margin-bottom:8px;font-weight:600}.lift-club-apply-days small{display:block;margin-top:7px;color:#607168}.lift-club-apply-days .lift-request-days{justify-content:flex-start;flex-wrap:wrap}.lift-club-apply-days .lift-request-days button{width:auto;min-width:42px;padding:0 12px;border-radius:999px}
.lift-club-communication,.lift-club-payments{margin-top:14px;padding:16px;border:1px solid #d7e2dc;border-radius:18px;background:#fff}.lift-club-tool-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.lift-club-tool-head button{border:0;background:transparent;color:#078247;font-weight:600}.lift-club-messages{display:grid;gap:8px;max-height:340px;overflow:auto;margin:12px 0}.lift-club-message{max-width:88%;padding:10px 12px;border-radius:14px;background:#edf3ef}.lift-club-message.mine{margin-left:auto;background:#d9f7e5}.lift-club-message strong,.lift-club-message small,.lift-club-message time{display:block}.lift-club-message small,.lift-club-message time{color:#607168;font-size:.75rem}.lift-club-message p{margin:5px 0}.lift-club-message-compose{display:grid;gap:8px}.lift-club-message-compose textarea{min-height:70px}.lift-club-payment{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e1e9e4}.lift-club-payment div,.lift-club-payment small{display:block}.lift-club-payment span{padding:5px 8px;border-radius:999px;font-size:.75rem;font-weight:700}.lift-club-payment span.paid{background:#d9f7e5;color:#08743c}.lift-club-payment span.due{background:#fff0d9;color:#9a5b00}.lift-club-payment button{border:1px solid #cbd8d0;border-radius:10px;background:#fff;padding:8px}
@media(max-width:600px){.lift-club-payment{grid-template-columns:minmax(0,1fr) auto}.lift-club-payment button{grid-column:1/-1}.lift-club-communication,.lift-club-payments{padding:13px}}
.lift-club-edit-button{width:100%;margin:14px 0 0}
.lift-club-attachment-actions{display:flex;align-items:center;gap:2px}.lift-club-attachment-actions button{width:34px;height:40px;padding:0;border:0;background:transparent;font-size:1.15rem}.lift-club-call-bar:empty{display:none}.lift-club-call-bar{display:flex;justify-content:flex-end;margin:4px 0}.lift-club-call-bar button{padding:7px 12px;border:0;border-radius:999px;background:#e4f8ed;color:#087b46;font-weight:600}.lift-club-attachment{margin:7px 0}.lift-club-attachment button,.lift-club-attachment a{display:inline-flex;align-items:center;min-height:38px;padding:7px 11px;border:0;border-radius:10px;background:#fff;color:#075f3d;font-weight:600}.lift-club-attachment img{display:block;width:min(240px,100%);max-height:260px;border-radius:12px;object-fit:cover}.lift-club-attachment audio{width:min(270px,100%);height:42px}
.lift-club-member-navigation{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.lift-club-member-navigation button{min-height:42px;padding:8px;border:1px solid #bcd3c6;border-radius:12px;background:#effaf4;color:#075f3d;font-weight:600}@media(max-width:380px){.lift-club-member-head{grid-template-columns:44px minmax(0,1fr)}.lift-club-member-status{grid-column:2}.lift-club-member-facts,.lift-club-member-navigation{grid-template-columns:1fr}}
.lift-club-workspace-tabs{display:flex;gap:7px;margin:0 0 13px;padding:2px 0 7px;overflow-x:auto;scrollbar-width:none}.lift-club-workspace-tabs::-webkit-scrollbar{display:none}.lift-club-workspace-tabs button{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid #cbd8d0;border-radius:999px;background:#fff;color:#49645a;font-weight:600}.lift-club-workspace-tabs button.active{border-color:#18bd6a;background:#dcf7e8;color:#064b32}.lift-club-workspace-tabs+[data-club-workspace-panel='overview'].lift-driver-route-card{border:0;background:#084b34;color:#f2fff7}.lift-club-workspace-tabs+.lift-driver-route-card small{color:#cdeadd}.lift-club-workspace-tabs+.lift-driver-route-card .lift-driver-detail-grid span{background:rgba(255,255,255,.1)}.lift-club-workspace-section,.lift-club-arrangement{margin-top:12px;padding:16px;border:1px solid #d7e2dc;border-radius:18px;background:#fff}.lift-club-status-pill{padding:5px 9px;border-radius:999px;background:#dcf7e8;color:#087548;font-size:.75rem;font-weight:700}.lift-club-arrangement-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.lift-club-arrangement-grid span{display:grid;gap:3px;padding:11px;border-radius:13px;background:#eff5f1}.lift-club-arrangement-grid small{color:#617168}.lift-club-stop-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #e1e9e4}.lift-club-stop-row:last-child{border-bottom:0}.lift-club-stop-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#dcf7e8;color:#087548;font-weight:700}.lift-club-stop-row small{display:block;margin-top:3px;color:#617168}.lift-club-stop-actions{display:grid;gap:6px}.lift-club-stop-actions button{padding:7px 9px;border:1px solid #bdd2c6;border-radius:10px;background:#effaf4;color:#075f3d;font-weight:600}.lift-club-directory-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e1e9e4}.lift-club-directory-row>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dcf7e8;color:#087548;font-weight:700}.lift-club-directory-row small{display:block;color:#617168}.lift-club-directory-row button{border:0;background:transparent;color:#078247;font-weight:600}[data-club-workspace-panel][hidden]{display:none!important}@media(max-width:480px){.lift-club-arrangement-grid{grid-template-columns:1fr}.lift-club-stop-row{grid-template-columns:34px minmax(0,1fr)}.lift-club-stop-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.lift-club-workspace-section,.lift-club-arrangement{padding:13px}}
body.lift-club-fullscreen #bottomNav{display:none!important}body.lift-club-fullscreen main{padding-bottom:0!important}body.lift-club-fullscreen #liftClubDetailView{height:calc(100vh - var(--app-header-height))!important;height:calc(var(--lift-club-visible-height,100dvh) - var(--app-header-height))!important;padding-bottom:12px!important}body.lift-club-fullscreen #liftClubDetail{min-height:100%}.lift-club-workspace-tabs{position:sticky;top:-14px;z-index:20;padding-top:14px;background:#f4f8f5}.lift-club-chat-mode{overflow:hidden!important;padding-bottom:0!important}.lift-club-chat-mode #liftClubDetail{display:flex;height:100%;min-height:0;flex-direction:column}.lift-club-chat-mode .lift-club-workspace-tabs{flex:0 0 auto;margin-bottom:6px}.lift-club-chat-mode .lift-club-communication{display:flex!important;flex:1 1 auto;min-height:0;margin:0;padding:10px 0 0;border:0;border-radius:0;background:transparent;flex-direction:column}.lift-club-chat-mode .lift-club-tool-head{flex:0 0 auto;padding:0 3px}.lift-club-chat-mode .lift-club-message-tabs{flex:0 0 auto;padding:0 3px 5px}.lift-club-chat-mode .lift-club-call-bar{flex:0 0 auto}.lift-club-chat-mode .lift-club-messages{flex:1 1 auto;min-height:0;max-height:none;margin:4px 0;padding:8px 2px 12px;overflow-y:auto;overscroll-behavior:contain}.lift-club-chat-mode .lift-club-message-compose{position:relative;z-index:25;flex:0 0 auto;margin:0 0 max(4px,env(safe-area-inset-bottom,0px));background:#f3f6f4}
.lift-club-chat-mode .lift-club-message{width:fit-content;min-width:120px;max-width:min(82%,520px);justify-self:start}.lift-club-chat-mode .lift-club-message.mine{justify-self:end;margin-left:0}
.lift-club-message-tabs{display:flex;gap:8px;margin:12px 0 4px;overflow-x:auto;scrollbar-width:none}.lift-club-message-tabs::-webkit-scrollbar{display:none}.lift-club-message-tabs button{flex:0 0 auto;padding:9px 14px;border:1px solid #cbd8d0;border-radius:999px;background:#fff;color:#365248;font-weight:600}.lift-club-message-tabs button.active{border-color:#14b866;background:#dcf7e8;color:#064b32}.lift-club-message-compose select{display:none}
.lift-club-message-compose{display:flex;align-items:flex-end;gap:8px;padding:6px 7px 6px 14px;border:1px solid #d6e0da;border-radius:28px;background:#f3f6f4;box-shadow:0 2px 8px rgba(4,75,50,.08)}.lift-club-message-compose:focus-within{border-color:#24c875;box-shadow:0 0 0 3px rgba(36,200,117,.13)}.lift-club-message-compose textarea{flex:1;min-width:0;min-height:36px!important;max-height:104px;padding:8px 2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;resize:none;line-height:20px}.lift-club-message-compose textarea:focus{outline:0}.lift-club-message-compose .lift-driver-primary{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;font-size:0;background-color:#12b967;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;box-shadow:0 3px 8px rgba(7,130,71,.25)}.lift-club-message-compose .lift-driver-primary:active{transform:scale(.94);background-color:#0c9f58}
.lift-club-chat-mode .lift-club-tool-head{align-items:center;padding:2px 4px 4px}.lift-club-chat-mode .lift-club-tool-head h3{margin:0}.lift-club-chat-mode .lift-club-tool-head small{display:block;margin-top:2px;color:#607168}.lift-club-chat-mode .lift-club-tool-head button{display:inline-flex;align-items:center;gap:4px}
.lift-club-chat-mode .lift-club-message-tabs{margin:3px 0 0;padding:6px 4px 9px}.lift-club-message-tabs button{display:inline-flex;align-items:center;gap:6px}
.lift-club-chat-mode .lift-club-messages{display:grid;align-content:start;gap:0;margin:0 -2px;padding:14px 6px 10px;background:#eaf2ed;border-radius:16px 16px 0 0}
.lift-club-message-day{justify-self:center;margin:0 0 12px;padding:4px 9px;border-radius:999px;background:#f7faf8;color:#62736b;font-size:.72rem;font-weight:600;box-shadow:0 1px 2px rgba(5,54,37,.08)}
.lift-club-chat-mode .lift-club-message{width:fit-content;min-width:0;max-width:min(82%,520px);margin:0 0 8px;padding:9px 11px 6px;border-radius:5px 15px 15px;background:#fff;box-shadow:0 1px 2px rgba(5,54,37,.1);justify-self:start}.lift-club-chat-mode .lift-club-message.mine{margin-left:0;border-radius:15px 5px 15px 15px;background:#cef4dc;justify-self:end}.lift-club-chat-mode .lift-club-message strong{margin:0 0 3px;color:#087548;font-size:.78rem}.lift-club-chat-mode .lift-club-message p{margin:0;line-height:1.4}.lift-club-chat-mode .lift-club-message time{margin-top:3px;text-align:right;color:#617168;font-size:.68rem}.lift-club-chat-mode .lift-club-message time span{color:#078247;font-weight:700}
.lift-club-chat-mode .lift-club-message-compose{margin:0 -2px max(4px,env(safe-area-inset-bottom,0px));padding:7px 7px 7px 10px;border-radius:26px;background:#fff}.lift-club-attachment-actions{flex:0 0 auto;gap:0}.lift-club-attachment-actions button{display:grid;width:32px;height:40px;place-items:center}.lift-club-attachment-actions svg{width:19px;height:19px;fill:none;stroke:#38554a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lift-club-message-compose textarea{align-self:center}
@media(max-width:600px){.lift-club-terms,.lift-club-member,.lift-club-apply{margin-left:0;margin-right:0}.lift-club-card .lift-driver-trip-top{align-items:flex-start}.lift-club-card .lift-driver-status{font-size:.68rem}}
.lift-request-saved-place-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px;padding-left:2px}
.lift-request-saved-place-chips:empty{display:none}
.lift-mine-route{display:grid;grid-template-columns:14px 1fr;column-gap:9px;margin:2px 0 6px}
.lift-mine-route-dot{grid-column:1;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#27c66e;justify-self:center}
.lift-mine-route-dot--end{background:#17231d}
.lift-mine-route-line{grid-column:1;width:2px;margin:2px 0;background:#ccd8d1;justify-self:center}
.lift-mine-route-point{grid-column:2;font-size:.85rem;line-height:1.35;color:#17231d}
.lift-mine-route-distance{display:block;margin:2px 0 8px;color:#68766e;font-size:.74rem}
/* Public Lift Link home — lift clubs first, once-off intercity travel second. */
body[data-page="landing"] {
    overflow-x: hidden;
    overflow-y: auto;
    background: #f5f0e4;
}
body[data-page="landing"] > .lp-map,
body[data-page="landing"] > .lp-scrim,
body[data-page="landing"] > .lp-pulse,
body[data-page="landing"] > .lp-topbar,
body[data-page="landing"] > .lp-promo-strip,
body[data-page="landing"] > .lp-card {
    display: none !important;
}
.public-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    padding: max(var(--sat, 0px), 10px) 22px calc(var(--sab, 0px) + 16px);
    background: var(--wash);
    color: var(--ink);
    overflow: hidden; /* every section below is sized to fit — nothing here should ever need to scroll */
}
.public-home-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
}
.public-home-logo {
    display: block;
    width: 132px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}
.public-home-menu {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid #cbd8d0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
}
.public-home-menu svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.public-home-hero { flex: 0 0 auto; padding: 18px 2px 0; }
.public-home-locality {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.public-home-locality::before {
    width: 22px;
    height: 2px;
    content: "";
    background: var(--accent);
}
.public-home-hero h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 9vw, 48px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: .98;
}
.public-home-hero h1 span { color: var(--accent); }
.public-home-hero > p:last-child {
    max-width: 680px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}
@media (min-width: 900px) {
    .public-home {
        padding-right: 32px;
        padding-left: 32px;
    }
    .public-home-header { min-height: 68px; }
    .public-home-hero { padding-top: 34px; }
    .public-clubs { margin-top: 34px; }
}
.public-clubs {
    flex: 0 0 auto;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #d2ddd6;
    border-radius: 22px;
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(8,58,40,.08);
}
.public-preview-tabs {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
    padding: 6px;
    background: #edf3ef;
}
.public-preview-tabs button {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 5px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}
.public-preview-tabs button svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.public-preview-tabs button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.public-preview-tabs button[aria-selected="true"] {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 3px 10px rgba(8,58,40,.08);
}
.public-preview-tabs button[aria-selected="true"] svg { color: var(--accent); }
@media (max-width: 350px) {
    .public-preview-tabs button { flex-direction:column;gap:2px;font-size:9.5px;white-space:normal; }
    .public-preview-tabs button svg { width:17px;height:17px;flex-basis:17px; }
}
.public-shuttle-row{grid-template-columns:30px minmax(0,1fr) auto!important}.public-shuttle-icon{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:#dff7e9;color:#087443;font-weight:800}
.public-request-row { background: #edf8f1; }
.public-clubs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.public-clubs-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    letter-spacing: 0;
}
.public-clubs-live i {
    width: 9px;
    height: 9px;
    border: 2px solid #c7ead5;
    border-radius: 50%;
    background: var(--accent);
}
/* Horizontal-scrolling carousel — one row of card-height regardless of how many clubs
   are open, so the list can never be the reason this page needs to scroll vertically. */
.public-club-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
    scrollbar-width: none;
}
.public-club-list::-webkit-scrollbar { display: none; }
.public-clubs-loading,
.public-clubs-empty {
    padding: 26px 18px;
    color: var(--muted);
    text-align: center;
    white-space: normal;
}
.public-clubs-empty-hero {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 14px;
    border-radius: 15px;
    background: linear-gradient(135deg,#e9f7ef 0%,#f8fbf9 100%);
    color: var(--ink);
}
.public-clubs-empty-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--accent);
    color: #052f20;
}
.public-clubs-empty-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.public-clubs-empty-copy { min-width: 0; }
.public-clubs-empty-copy strong,.public-clubs-empty-copy small { display: block; }
.public-clubs-empty-copy strong { font-size: 13px; font-weight: 600; line-height: 1.25; }
.public-clubs-empty-copy small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.public-clubs-empty-hero > a {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid rgba(8,58,40,.16);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}
.public-clubs-empty-hero > a b { color: var(--accent); font-size: 16px; }
.public-club-row {
    display: flex;
    flex: 0 0 calc(100% - 12px);
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    width: auto;
    max-width: 360px;
    min-height: 96px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--wash);
    color: var(--ink);
    scroll-snap-align: start;
}
.public-club-copy { min-width: 0; }
.public-club-copy strong,
.public-club-copy small,
.public-club-price strong,
.public-club-price small { display: block; }
.public-club-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-club-copy small {
    margin-top: 5px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-club-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.public-club-price strong { color: var(--accent); font-size: 16px; font-weight: 600; }
.public-club-price small { color: var(--muted); font-size: 10px; }
.public-club-seats {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e9f4ee;
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.public-clubs-more {
    display: block;
    padding: 14px 16px;
    background: #e9f4ee;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.public-clubs-more strong { color: var(--accent); font-weight: 600; }
.public-home-actions { flex: 0 0 auto; display: grid; gap: 10px; margin-top: 18px; }
.public-home-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    padding: 13px 17px;
    border-radius: 15px;
    font-weight: 600;
    background: var(--accent);
    color: #052f20;
    box-shadow: 0 10px 25px rgba(24,185,95,.2);
}
.public-home-primary svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.public-once-off {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 17px;
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
}
.public-once-off strong,
.public-once-off small { display: block; }
.public-once-off strong { font-weight: 600; }
.public-once-off small { margin-top: 5px; color: rgba(255,255,255,.75); }
.public-once-off > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.public-home-trust {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: auto;
    padding: 12px 2px 2px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}
.public-home-trust span { display: inline-flex; align-items: center; gap: 5px; }
.public-home-trust svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 390px) {
    .public-home { padding-right: 16px; padding-left: 16px; }
    .public-club-row { flex-basis: calc(100% - 10px); width: auto; }
    .public-home-trust { gap: 10px; font-size: 9px; }
}
@media (max-height: 700px) {
    .public-home { padding-top: max(var(--sat,0px),6px); padding-bottom: calc(var(--sab,0px) + 8px); }
    .public-home-header { min-height: 46px; }
    .public-home-logo { width: 120px; height: 36px; }
    .public-home-menu { width: 40px; height: 40px; }
    .public-home-hero { padding-top: 8px; }
    .public-home-locality { margin-bottom: 8px; font-size: 10px; }
    .public-home-hero h1 { font-size: clamp(28px,7.5vh,38px); }
    .public-home-hero > p:last-child { margin-top: 8px; font-size: 13px; line-height: 1.35; }
    .public-clubs { margin-top: 12px; }
    .public-clubs-header { min-height: 36px; padding: 8px 13px; }
    .public-club-list { padding-top: 9px; padding-bottom: 9px; }
    .public-club-row { min-height: 84px; padding-top: 10px; padding-bottom: 10px; }
    .public-clubs-more { padding: 10px 14px; }
    .public-home-actions { margin-top: 10px; }
    .public-home-primary { min-height: 46px; padding: 10px 14px; }
    .public-once-off { min-height: 54px; margin-top: 10px; padding: 11px 14px; }
    .public-once-off small { margin-top: 3px; font-size: 11px; }
    .public-home-trust { padding-top: 7px; }
}

/* Final cascade overrides for the approved Group/Shuttle and My Trips screens. */
#shuttleSearchView.shuttle-search-page,#liftDriverTripsView.lift-driver-mobile-page{width:100%;max-width:none;margin:0;padding-left:16px;padding-right:16px}
#shuttleSearchView.shuttle-search-page{background:#f7f2e6}
#liftDriverTripsView .lift-trips-type-tabs,#groupMineView .lift-trips-type-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:5px}
#liftDriverTripsView .lift-trips-type-tabs button,#groupMineView .lift-trips-type-tabs button{width:100%;min-width:0;padding:10px 2px;border:0;background:transparent;white-space:nowrap}
#liftDriverTripsView .lift-trips-type-tabs button.active,#groupMineView .lift-trips-type-tabs button.active{border:0;background:#fff;box-shadow:0 2px 8px rgba(7,63,48,.1)}
.lift-trips-empty-icon{display:grid!important;width:46px;height:46px;margin:0 auto 8px!important;place-items:center;border-radius:14px;background:#e4f7eb;color:#078247;font-size:0!important}
.lift-trips-empty-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:360px){#liftDriverTripsView .lift-trips-type-tabs button{font-size:.72rem}.shuttle-search-options{grid-template-columns:minmax(0,1fr) 92px}}

/* Operator workspace — verification-first mobile dashboard */
.operator-workspace-page{width:100%;max-width:none;margin:0;padding-left:16px;padding-right:16px;background:#f4f8f5}
.operator-workspace-head{justify-content:center;position:relative}.operator-workspace-head .lift-driver-back{position:absolute;left:0}.operator-workspace-head h2{margin:0;font-size:1.05rem}
.operator-workspace-intro{margin:6px 2px 17px}.operator-workspace-kicker{display:flex;align-items:center;gap:7px;color:#118d50;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.operator-workspace-kicker svg,.operator-workspace-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.operator-workspace-intro h1{max-width:520px;margin:7px 0 5px;font-size:1.55rem;line-height:1.12}.operator-workspace-intro p{margin:0;color:#607168;font-size:.86rem;line-height:1.45}
.operator-verification-card{padding:16px;border:1px solid #efd894;border-radius:20px;background:#fff7df}.operator-verification-top{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:start;gap:11px}.operator-verification-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:14px;background:#ffe7a1;color:#8a5a00}.operator-verification-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.operator-verification-copy strong,.operator-verification-copy small{display:block}.operator-verification-copy strong{font-size:.9rem}.operator-verification-copy small{margin-top:4px;color:#6d634a;font-size:.75rem;line-height:1.4}.operator-verification-badge{padding:5px 9px;border-radius:999px;background:#ffe7a1;color:#7b5100;font-size:.7rem;font-weight:700}.operator-verification-card.approved{border-color:#a9dcc1;background:#eaf8f0}.operator-verification-card.approved .operator-verification-icon,.operator-verification-card.approved .operator-verification-badge{background:#ccefdc;color:#087443}.operator-verification-progress{height:6px;margin:14px 0 12px;overflow:hidden;border-radius:99px;background:#e8ddba}.operator-verification-progress span{display:block;height:100%;border-radius:inherit;background:#d49d18}.operator-verification-card.approved .operator-verification-progress{background:#cce8d9}.operator-verification-card.approved .operator-verification-progress span{background:#19bd68}.operator-verification-cta{display:flex;width:100%;min-height:45px;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;background:#20c970;color:#062f21;font-weight:700}
.operator-workspace-actions{margin:13px 0 20px}.operator-workspace-actions button{display:flex;align-items:center;justify-content:center;gap:7px;background:#fff}.operator-workspace-section{margin-top:16px}.operator-workspace-section .group-section-title{margin-bottom:10px}.operator-workspace-section .group-section-title h3{font-size:1rem}.operator-workspace-empty{padding:20px 15px;text-align:center;border:1px dashed #c9d8d0;border-radius:18px;background:#fff}.operator-workspace-empty-icon{display:grid;width:48px;height:48px;margin:0 auto 9px;place-items:center;border-radius:15px;background:#e5f7ec;color:#0a8d4d}.operator-workspace-empty-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.operator-workspace-empty strong,.operator-workspace-empty small{display:block}.operator-workspace-empty small{margin-top:5px;color:#607168;line-height:1.4}.operator-request-locked{display:grid;grid-template-columns:32px minmax(0,1fr) 18px;align-items:center;gap:8px;padding:14px;border-radius:16px;background:#e9f6ef;color:#285f4a;font-size:.78rem;line-height:1.4}.operator-request-locked svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.operator-workspace-actions button:disabled{cursor:not-allowed;border-color:#d7dfda;background:#edf1ef;color:#8b9992;opacity:.78}.operator-workspace-actions button:disabled svg{opacity:.65}
@media(min-width:700px){.operator-workspace-page{padding-left:22px;padding-right:22px}.operator-workspace-actions{max-width:620px}.operator-workspace-section{max-width:none}}

/* Page names belong in the fixed app toolbar; keep only local actions/context below it. */
#historyView>.driver-section-header>h3,
#activeTripsView>.driver-section-header>h3,
#inboxView .inbox-title,
#settingsView>.page-title,
#languageView>.page-title,
#securityView>.page-title,
#supportView>.page-title,
#safetyView .safety-page-heading>.page-title,
#liftNotificationsView>.driver-section-header>h3,
#liftPublicReviewsView>.driver-section-header>h3{display:none}
#historyView>.driver-section-header,#activeTripsView>.driver-section-header,#liftNotificationsView>.driver-section-header{justify-content:flex-end}
#inboxView .inbox-header{align-items:flex-start}

.lift-passenger-trips-page{width:100%;max-width:none;margin:0;background:#f4f8f5}
.passenger-trips-title{text-align:center;margin:0 0 14px}.passenger-trips-title h2{margin:0;font-size:1.15rem}
.lift-passenger-trips-page .lift-trips-type-tabs,#liftClubMineView .lift-trips-type-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:5px;border-radius:16px;background:#e8efeb}
.lift-passenger-trips-page .lift-trips-type-tabs button,#liftClubMineView .lift-trips-type-tabs button{width:100%;min-width:0;padding:10px 2px;border:0;background:transparent;white-space:nowrap}
.lift-passenger-trips-page .lift-trips-type-tabs button.active,#liftClubMineView .lift-trips-type-tabs button.active{border:0;background:#fff;box-shadow:0 2px 8px rgba(7,63,48,.1)}
.lift-passenger-modern-card{cursor:pointer}.lift-passenger-modern-card .lift-mine-route{margin:12px 0}.lift-passenger-modern-card .lift-trip-modern-actions button:last-child{font-size:1.35rem}
.lift-passenger-route-request{margin-bottom:10px!important;padding:15px!important;border:1px solid #d8e2dc!important;border-radius:18px!important;background:#fff;box-shadow:0 4px 12px rgba(14,35,25,.05)}
.lift-passenger-route-request .lift-mine-route{margin:12px 0 8px}.lift-passenger-route-request>small{display:block;color:#607168;font-size:.75rem}.lift-passenger-route-actions{margin-top:10px}.lift-passenger-route-actions button{width:100%;min-height:42px;border-radius:12px}.lift-trips-empty--compact{padding:18px 14px}
@media(max-width:360px){.lift-passenger-trips-page .lift-trips-type-tabs button{font-size:.72rem}}

/* API-driven driver and shuttle subscription catalogue */
#subscriptionView{padding-right:8px;padding-left:8px;background:#f4f8f5}
#subscriptionView>.content-card{width:100%;max-width:none;margin:0;padding:10px 0 16px;border:0;background:transparent;box-shadow:none}
.driver-current-package{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #edc65a;border-radius:18px;background:#fff4d4;color:#684900}
.driver-current-package>span:last-child{display:grid;min-width:0;gap:3px}.driver-current-package strong{font-size:.9rem}.driver-current-package small{color:#755d25;font-size:.74rem;line-height:1.35}
.driver-current-package-icon{display:grid;width:40px;height:40px;flex:0 0 40px;place-items:center;border-radius:50%;background:#ffe49a}.driver-current-package-icon svg{width:21px;height:21px}
.driver-package-intro{padding:22px 4px 14px}.driver-package-intro h2{margin:0 0 7px;font-size:1.55rem;line-height:1.15}.driver-package-intro p{margin:0;color:#587068;font-size:.82rem;line-height:1.45}
.driver-package-api-status{display:flex;align-items:center;gap:7px;margin:0 3px 10px;color:#647870;font-size:.72rem}.driver-package-api-status span{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#19bd68}
.driver-plan-loading{min-height:120px;border-radius:17px}.driver-plan-load-error{display:grid;gap:5px;padding:20px;border:1px dashed #c9d8d0;border-radius:17px;background:#fff;text-align:center}.driver-plan-load-error span{color:#647870;font-size:.75rem}
.driver-plan-grid{display:grid;gap:12px}.driver-plan-card{position:relative;display:block;width:100%;padding:16px;border:1px solid #cfddd6;border-radius:18px;background:#fff;color:#073f2d;text-align:left;box-shadow:none}.driver-plan-card.active{padding:15px;border:2px solid #18bd64;background:#ebfaf1;box-shadow:0 8px 20px rgba(24,189,100,.1)}
.driver-plan-card .driver-plan-name{display:flex;align-items:center;gap:7px;padding-right:82px;font-size:.92rem;font-weight:600}.driver-plan-card .driver-plan-name svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.driver-plan-card>strong{display:block;margin-top:5px;font-size:1.42rem;font-weight:600}.driver-plan-description{display:block;margin-top:6px;color:#587068;font-size:.74rem;line-height:1.4}
.driver-plan-popular{position:absolute;top:14px;right:14px;padding:5px 8px;border-radius:999px;background:#72e3a0;color:#073f2d;font-size:.64rem;font-weight:600}.driver-plan-card ul{display:grid;gap:8px;margin:13px 0 0;padding:12px 0 0;border-top:1px solid #e1eae5;list-style:none}.driver-plan-card li{display:flex;align-items:flex-start;gap:8px;color:#46645a;font-size:.75rem;line-height:1.35}.driver-plan-card li svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#18b95f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.driver-plan-card-shuttle{border-color:#9ed9b7}.driver-plan-card-shuttle:not(.active){background:#f7fcf9}
.driver-plan-usage{margin:13px 0;padding:12px;border-radius:14px;background:#e7f2ec}.sub-status-row{margin-top:13px}.sub-feature-list{display:none}.sub-cta-stack{position:static;padding:14px 0 2px;background:transparent}.sub-paystack-btn{min-height:50px;border-radius:15px}.sub-gplay-note{text-align:center}
@media(max-width:360px){#subscriptionView{padding-right:6px;padding-left:6px}#subscriptionView>.content-card{padding:8px 0 12px}.driver-package-intro h2{font-size:1.35rem}.driver-plan-card{padding:14px}.driver-plan-card.active{padding:13px}}

/* Final touch override must follow component hover declarations. */
.side-menu{
    top:var(--visual-viewport-top,0px)!important;
    right:0!important;
    bottom:calc(var(--bottom-nav-height,76px) + var(--safe-bottom,0px))!important;
    left:0!important;
    z-index:1100!important;
    height:auto!important;
}
.side-menu-panel{top:0!important;bottom:0!important;max-height:100%!important}
.side-menu-backdrop{inset:0!important;min-height:0!important}
.side-menu-nav-body{min-height:0;padding-bottom:18px!important}

/* Driver account maintenance belongs in the dedicated Profile hub, not the
   action-oriented drawer. Keep these legacy targets available to JavaScript. */
#driverNavSection #driverSubscriptionMenuBtn,
#driverNavSection #driverSetupMenuBtn,
#driverNavSection #vehicleMenuBtn,
#driverNavSection #liftDriverTripsMenuBtn,
#driverNavSection #liftJoinRequestsMenuBtn,
#driverNavSection #liftDriverChatsMenuBtn{display:none!important}

/* 2026 product focus: intercity lifts and shuttle transport only. Legacy lift
   club markup remains dormant for data compatibility, but has no UI entry point. */
#liftClubDiscoverMenuBtn,#liftClubMineMenuBtn,#liftCreateClubMenuBtn,
#liftClubDiscoverView,#liftClubMineView,#liftClubCreateView,#liftClubDetailView,
[data-segment="clubs"]{display:none!important}
.lift-passenger-trips-page .lift-trips-type-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* Passenger route-first home: flat, native Android hierarchy. */
.lift-home-page{background:#f7f3e8!important}
.lift-home-page .lift-home-intro{padding:0 20px 11px}
.lift-passenger-route-search{margin:0;padding:4px 20px 10px;border:0;border-radius:0;background:transparent}
.lift-passenger-city-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px;color:#496258;font-size:.74rem;font-weight:700}.lift-passenger-city-heading.destination{margin-top:15px}.lift-passenger-city-heading button{border:0;background:transparent;color:#078b50;font:inherit;font-weight:800}.lift-passenger-city-heading small{color:#71837b;font-size:.68rem;font-weight:500}
.lift-passenger-origin-city{display:grid;width:100%;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:12px;border:0;border-radius:15px;background:#e7f5ed;color:#073f30;text-align:left}.lift-passenger-origin-city>span:last-child strong,.lift-passenger-origin-city>span:last-child small{display:block}.lift-passenger-origin-city>span:last-child small{margin-top:2px;color:#60766c;font-size:.68rem}.lift-passenger-city-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:#fff;color:#20be6c;font-size:.8rem}
.lift-passenger-suggested-towns{display:flex!important;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;padding:1px 0 5px;scrollbar-width:none;scroll-snap-type:x proximity}.lift-passenger-suggested-towns::-webkit-scrollbar{display:none}.lift-passenger-suggested-towns .lift-town-chip{flex:0 0 auto;min-height:40px;padding:8px 15px;border:1px solid #bfcfc7;border-radius:999px;background:transparent;color:#173e31;text-align:center;white-space:nowrap;scroll-snap-align:start}.lift-passenger-suggested-towns .lift-town-chip[aria-pressed="true"]{border-color:#18b866;background:#ddf7e8;color:#06643d;box-shadow:none}.lift-passenger-suggested-towns .lift-town-chip-state{flex:0 0 auto}
.lift-passenger-route-fields{position:relative;display:grid;gap:10px;padding-left:27px}
.lift-home-search-controls{margin-top:14px;padding-top:14px;border-top:1px solid #cad8d1}
.lift-passenger-route-fields:before{content:"";position:absolute;left:9px;top:34px;bottom:34px;width:2px;background:#b9cec2}
.lift-passenger-route-field{position:relative;display:grid;gap:5px}
.lift-passenger-route-field:before{content:"";position:absolute;left:-24px;top:32px;width:10px;height:10px;border:3px solid #f7f3e8;border-radius:50%;background:#22c875;box-shadow:0 0 0 1px #9db7aa}
.lift-passenger-route-field.destination:before{background:#073f30}
.lift-passenger-route-field span,.lift-passenger-route-options span{color:#496258;font-size:.72rem;font-weight:700}
.lift-passenger-route-field input,.lift-passenger-route-options input,.lift-passenger-route-options select{width:100%;min-height:54px;margin:0;border:0;border-bottom:1px solid #9fb8ac;border-radius:0;background:transparent;color:#073f30;font:inherit;font-weight:600;box-shadow:none}
.lift-passenger-route-field input:focus,.lift-passenger-route-options input:focus,.lift-passenger-route-options select:focus{border-bottom:2px solid #087a4b;outline:0;box-shadow:none}
.lift-passenger-route-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.lift-passenger-route-options label{display:grid;gap:5px}
.lift-passenger-match-btn{width:100%;min-height:50px;margin-top:16px;border:0;border-radius:25px;background:#064b38;color:#fff;font:inherit;font-weight:800}
.lift-passenger-suggested-towns{margin-top:11px}
.lift-passenger-match-note{margin:0 0 9px;padding:10px 12px;border-radius:12px;background:#e8f6ee;color:#436258;font-size:.76rem}
.lift-home-page .lift-town-results-section{margin:4px 0 0;padding:0 20px;border:0;background:transparent}
.lift-home-page .lift-town-results-head{padding:10px 0 7px;border-bottom:1px solid #cad8d1}
.lift-passenger-match-card{margin:0;border:0;border-bottom:1px solid #cad8d1;border-radius:0;background:transparent;overflow:visible}
.lift-passenger-match-card>button{display:grid;width:100%;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:15px 2px;border:0;background:transparent;color:#073f30;text-align:left}
.lift-passenger-driver-avatar{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:#dff7e9;color:#087443;font-weight:800}
.lift-passenger-match-copy{min-width:0}.lift-passenger-match-copy>strong,.lift-passenger-match-copy>span,.lift-passenger-match-copy>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lift-passenger-match-copy>strong{font-size:.92rem}.lift-passenger-match-copy>strong small{color:#079453;font-size:.64rem}.lift-passenger-match-copy>span{margin:4px 0;color:#183f32;font-size:.78rem;font-weight:600}.lift-passenger-match-copy>small{color:#667a71;font-size:.7rem}
.lift-passenger-match-price{text-align:right}.lift-passenger-match-price strong,.lift-passenger-match-price small,.lift-passenger-match-price b{display:block}.lift-passenger-match-price strong{font-size:1rem}.lift-passenger-match-price small{color:#667a71;font-size:.62rem}.lift-passenger-match-price b{margin-top:5px;color:#0ba55d;font-size:1.35rem}
.lift-passenger-no-match{display:grid;justify-items:start;gap:7px;padding:18px 0;border:0;border-bottom:1px solid #cad8d1;border-radius:0;background:transparent;text-align:left}.lift-passenger-no-match-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:#dff7e9;color:#079453;font-size:1.25rem}.lift-passenger-no-match small{max-width:340px;color:#62766d;line-height:1.45}.lift-passenger-no-match button{min-height:44px;margin-top:5px;padding:0 18px;border:0;border-radius:22px;background:#21c974;color:#063d2f;font:inherit;font-weight:800}
.lift-home-page .lift-town-request-fallback{margin:14px 20px;width:calc(100% - 40px);border-radius:0;border:0;border-top:1px solid #cad8d1;border-bottom:1px solid #cad8d1;background:transparent;color:#073f30;box-shadow:none}
.lift-home-page .lift-town-result{border:0;border-bottom:1px solid #cad8d1;border-radius:0;background:transparent;box-shadow:none}
.lift-passenger-group-travel{margin:16px 20px;padding:16px 0;border-top:1px solid #cad8d1;border-bottom:1px solid #cad8d1}.lift-passenger-group-heading{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px}.lift-passenger-group-heading strong,.lift-passenger-group-heading small{display:block}.lift-passenger-group-heading small{margin-top:3px;color:#60766c;font-size:.72rem}.lift-passenger-group-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#dff7e9;color:#087443}.lift-passenger-group-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lift-passenger-group-pills{display:flex;gap:7px;margin-top:13px;overflow-x:auto;scrollbar-width:none}.lift-passenger-group-pills::-webkit-scrollbar{display:none}.lift-passenger-group-pills button{flex:0 0 auto;min-height:36px;padding:7px 13px;border:1px solid #bfcfc7;border-radius:999px;background:transparent;color:#173e31;font:inherit;font-size:.72rem;font-weight:700}.lift-passenger-group-pills button[aria-pressed="true"]{border-color:#18b866;background:#ddf7e8;color:#06643d}.lift-passenger-group-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.lift-passenger-group-actions button{min-height:46px;padding:8px 10px;border:1px solid #0a7550;border-radius:23px;background:transparent;color:#075b40;font:inherit;font-size:.74rem;font-weight:800}.lift-passenger-group-actions button:first-child{border-color:#064b38;background:#064b38;color:#fff}
@media(max-width:420px){.lift-home-page .lift-home-intro,.lift-passenger-route-search,.lift-home-page .lift-town-results-section{padding-left:16px;padding-right:16px}.lift-passenger-route-options{grid-template-columns:1fr 1fr}.lift-passenger-match-card>button{grid-template-columns:40px minmax(0,1fr) auto;padding:13px 0}.lift-passenger-driver-avatar{width:40px;height:40px}.lift-home-page .lift-town-request-fallback{margin-inline:16px;width:calc(100% - 32px)}.lift-passenger-group-travel{margin-inline:16px}}
@media(max-width:340px){.lift-passenger-group-actions{grid-template-columns:1fr}}

/* Compact passenger search gutters: the route sections own their inset, so the
   page shell must not add a second margin around the content. */
.lift-home-page{padding-right:0!important;padding-left:0!important}
.lift-home-page .lift-home-intro{padding:0 14px 8px}
.lift-passenger-route-search{padding:2px 14px 8px}
.lift-passenger-city-heading{margin-top:3px;margin-bottom:6px}
.lift-passenger-city-heading.destination{margin-top:11px}
.lift-passenger-route-options{margin-top:9px}
.lift-passenger-match-btn{margin-top:12px}
.lift-passenger-suggested-towns{margin-top:8px}
.lift-home-page .lift-town-results-section{margin-top:2px;padding-right:14px;padding-left:14px}
.lift-home-page .lift-town-request-fallback{width:calc(100% - 28px);margin:10px 14px}
.lift-passenger-group-travel{margin:12px 14px;padding:13px 0}
.lift-passenger-group-pills,.lift-passenger-group-actions{margin-top:11px}
@media(max-width:420px){
    .lift-home-page .lift-home-intro,.lift-passenger-route-search,.lift-home-page .lift-town-results-section{padding-right:10px;padding-left:10px}
    .lift-home-page .lift-town-request-fallback{width:calc(100% - 20px);margin-right:10px;margin-left:10px}
    .lift-passenger-group-travel{margin-right:10px;margin-left:10px}
}

/* Driver route-first home */
#liftDriverHomeView{padding-right:0!important;padding-left:0!important;background:#f7f3e8!important}
.lift-driver-route-intro{padding:0 14px 8px}.lift-driver-route-intro h1{margin:0;font-size:clamp(1.75rem,7vw,2.25rem);letter-spacing:-.035em}.lift-driver-route-intro p{margin:6px 0 0;color:#61746b}
.lift-driver-route-publisher{padding:2px 14px 8px}.lift-driver-route-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:3px 0 6px;color:#496258;font-size:.74rem;font-weight:700}.lift-driver-route-heading.destination{margin-top:11px}.lift-driver-route-heading button{border:0;background:transparent;color:#078b50;font:inherit;font-weight:800}.lift-driver-route-heading small{color:#71837b;font-size:.68rem;font-weight:500}
.lift-driver-route-origin{display:grid;width:100%;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:12px;border:0;border-radius:15px;background:#e7f5ed;color:#073f30;text-align:left}.lift-driver-route-origin strong,.lift-driver-route-origin small{display:block}.lift-driver-route-origin small{margin-top:2px;color:#60766c;font-size:.68rem}.lift-driver-route-origin-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:#fff;color:#20be6c;font-size:.8rem}
.lift-driver-route-pills{display:flex;gap:8px;overflow-x:auto;padding:1px 0 5px;scrollbar-width:none}.lift-driver-route-pills::-webkit-scrollbar{display:none}.lift-driver-route-pills button{flex:0 0 auto;min-height:40px;padding:8px 15px;border:1px solid #bfcfc7;border-radius:999px;background:transparent;color:#173e31;font:inherit;font-weight:700;white-space:nowrap}.lift-driver-route-pills button[aria-pressed="true"]{border-color:#18b866;background:#ddf7e8;color:#06643d}
.lift-driver-route-options{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:9px;margin-top:9px}.lift-driver-route-options label{display:grid;gap:4px;color:#496258;font-size:.72rem;font-weight:700}.lift-driver-route-options input,.lift-driver-route-options select{width:100%;min-width:0;min-height:50px;border:0;border-bottom:1px solid #9fb8ac;border-radius:0;background:transparent;color:#073f30;font:inherit;font-weight:600}.lift-driver-route-publish{width:100%;min-height:50px;margin-top:12px;border:0;border-radius:25px;background:#064b38;color:#fff;font:inherit;font-weight:800}
.lift-driver-route-request-title{margin:10px 14px 0;padding:9px 0 6px;border-bottom:1px solid #cad8d1}.lift-driver-route-request-title h2{margin:0}.lift-driver-route-request-title span{color:#078b50;font-size:.74rem;font-weight:800}.lift-driver-route-request-title+.lift-driver-card-list{margin:0 14px}.lift-driver-route-request-title+.lift-driver-card-list .lift-driver-route-card{border:0;border-bottom:1px solid #cad8d1;border-radius:0;background:transparent;box-shadow:none}.lift-driver-route-all{display:block;margin:8px 14px 0;padding:8px 0;border:0;background:transparent;color:#078b50;font:inherit;font-weight:800}
.lift-driver-match-row{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 2px;border:0;border-bottom:1px solid #cad8d1;background:transparent;color:#073f30;text-align:left}.lift-driver-match-avatar{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#dff7e9;color:#087443;font-weight:800}.lift-driver-match-copy{min-width:0}.lift-driver-match-copy strong,.lift-driver-match-copy span,.lift-driver-match-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lift-driver-match-copy span{margin:3px 0;color:#36574c;font-size:.76rem}.lift-driver-match-copy small{color:#6b7d75;font-size:.68rem}.lift-driver-match-row>b{color:#078b50;font-size:.75rem}
.lift-driver-group-entry{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;margin:13px 14px;padding:13px 0;border-top:1px solid #cad8d1;border-bottom:1px solid #cad8d1}.lift-driver-group-entry-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#dff7e9;color:#087443}.lift-driver-group-entry-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lift-driver-group-entry strong,.lift-driver-group-entry small{display:block}.lift-driver-group-entry small{margin-top:2px;color:#657970;font-size:.7rem}.lift-driver-group-entry button{border:0;background:transparent;color:#078b50;font:inherit;font-weight:800}.lift-driver-next-compact{margin:12px 14px}
@media(max-width:420px){.lift-driver-route-intro,.lift-driver-route-publisher{padding-right:10px;padding-left:10px}.lift-driver-route-request-title,.lift-driver-route-request-title+.lift-driver-card-list,.lift-driver-route-all,.lift-driver-group-entry,.lift-driver-next-compact{margin-right:10px;margin-left:10px}}
@media(max-width:350px){.lift-driver-route-options{grid-template-columns:1fr 1fr}.lift-driver-route-options label:last-child{grid-column:1/-1}}

/* Local-first/native presentation: background sync never flashes spinners,
   skeletons or loading sentences over the last successful local snapshot. */
.local-first-ui .native-sync-pending,
.local-first-ui .api-shimmer,
.local-first-ui .review-skeleton,
.local-first-ui .skeleton-list-item,
.local-first-ui .profile-loading .profile-avatar-wrap::after{display:none!important}
.local-first-ui .api-shimmer-host{background:inherit!important;border-color:inherit!important;box-shadow:inherit!important}

/* Android-like controls: immediate pressed state, no web hover residue. */
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:active,a:active,[role="button"]:active{transform:scale(.985);opacity:.86;transition:none!important}
@media (hover:none){button:hover,a:hover,[role="button"]:hover{filter:none!important;box-shadow:inherit}}
html,body{overscroll-behavior:none}
button,a,.app-header,.bottom-nav{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}

.profile-phone-summary{position:relative;padding-right:112px!important}.profile-inline-action{position:absolute;right:12px;bottom:12px;border:0;background:transparent;color:var(--text-accent);font:inherit;font-size:.75rem;font-weight:700}.profile-phone-protected-note{margin:0;padding:11px 12px;border-radius:12px;background:#eef6f1;color:#536b61;font-size:.78rem;line-height:1.45}.profile-passenger-verification-card{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;margin:12px 0;padding:14px;border:1px solid #d4e1da;border-radius:16px;background:#fff;color:var(--ink);text-align:left}.profile-passenger-verification-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#fff1c9;color:#855d00}.profile-passenger-verification-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-passenger-verification-copy strong,.profile-passenger-verification-copy small{display:block}.profile-passenger-verification-copy small{margin-top:3px;color:var(--muted);font-size:.75rem;line-height:1.35}.profile-passenger-verification-chevron{font-size:1.5rem;color:var(--muted)}.profile-passenger-verification-card.complete{border-color:#a7dec0;background:#eefaf3}.profile-passenger-verification-card.complete .profile-passenger-verification-icon{background:#caefd9;color:#087443}
.driver-profile-hub{margin:14px 0;padding:15px;border-radius:19px;background:#073f30;color:#fff}.driver-profile-hub-heading>span{color:#6ee3a1;font-size:.68rem;font-weight:800;letter-spacing:.09em}.driver-profile-hub-heading h3{margin:5px 0 3px;font-size:1.05rem}.driver-profile-hub-heading p{margin:0;color:#c7ded5;font-size:.78rem}.driver-profile-hub-grid{display:grid;gap:8px;margin-top:14px}.driver-profile-hub-grid button{display:grid;width:100%;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.08);color:#fff;text-align:left}.driver-profile-hub-grid button>span:nth-child(2) strong,.driver-profile-hub-grid button>span:nth-child(2) small{display:block}.driver-profile-hub-grid button small{margin-top:2px;color:#c9ddd6;font-size:.7rem}.driver-profile-hub-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#25c875;color:#073f30;font-weight:800}

.passenger-kyc-page{background:#f4f8f5!important}.passenger-kyc-shell{width:100%;padding:8px 14px 28px}.passenger-kyc-intro{padding:9px 2px 16px}.passenger-kyc-eyebrow{color:var(--text-accent);font-size:.7rem;font-weight:800;letter-spacing:.1em}.passenger-kyc-intro h2{margin:7px 0;font-size:1.55rem;line-height:1.12}.passenger-kyc-intro p{margin:0 0 13px;color:var(--muted);font-size:.82rem;line-height:1.45}.passenger-kyc-progress{height:7px;overflow:hidden;border-radius:99px;background:#dfe9e3}.passenger-kyc-progress span{display:block;height:100%;border-radius:inherit;background:#20c970;transition:width .25s ease}.passenger-kyc-intro>small{display:block;margin-top:6px;color:var(--muted)}.passenger-kyc-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 26px;gap:10px;margin-bottom:10px;padding:14px;border:1px solid #d8e3dd;border-radius:17px;background:#fff}.passenger-kyc-step-number,.passenger-kyc-check{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#eaf2ed;font-weight:800}.passenger-kyc-check{display:none;background:#20c970;color:#fff}.passenger-kyc-step.complete .passenger-kyc-step-number{display:none}.passenger-kyc-step.complete .passenger-kyc-check{display:grid}.passenger-kyc-step-body h3{margin:3px 0 4px;font-size:.96rem}.passenger-kyc-step-body p{margin:0 0 10px;color:var(--muted);font-size:.76rem;line-height:1.4}.passenger-kyc-step-body input{width:100%;margin:4px 0;min-height:46px}.passenger-kyc-actions{display:flex;justify-content:flex-end;margin-top:7px}.passenger-kyc-actions button,.passenger-kyc-otp button{min-height:42px;border:0;border-radius:12px;padding:0 14px;background:#064b38;color:#fff;font-weight:700}.passenger-kyc-otp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}.passenger-kyc-photo-picker{display:flex;align-items:center;gap:10px}.passenger-kyc-photo-picker img{width:48px;height:48px;border-radius:50%;object-fit:cover}.passenger-kyc-photo-picker input{display:none}.passenger-kyc-complete{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;margin-bottom:11px;padding:13px;border-radius:16px;background:#dff7e9}.passenger-kyc-complete>span{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:#19bd68;color:#fff}.passenger-kyc-complete strong,.passenger-kyc-complete small{display:block}.passenger-kyc-complete button{border:0;border-radius:10px;padding:9px 11px;background:#064b38;color:#fff}

.profile-verification-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.verification-badge{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:4px 9px;border:1px solid #d3ded8;border-radius:999px;background:#f6f8f7;color:#60706a;font-size:12px;font-weight:600;line-height:1}.verification-badge>span{display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:#e2e8e5;font-size:10px}.verification-badge.verified{border-color:#a9e3c2;background:#e9f9f0;color:#087443}.verification-badge.verified>span{background:#15b866;color:#fff}.verification-badge.pending{border-color:#ead6a0;background:#fff8e7;color:#7b5b0d}.verification-badge.pending>span{background:#f4cf67;color:#5c4305}.account-verification-form{margin:0 16px 12px;padding:12px;border:1px solid #d8e3dd;border-radius:14px;background:#f7faf8}.account-verification-form p{margin:0 0 10px;color:#566b62;font-size:13px}.account-verification-form input{width:100%;margin:8px 0;letter-spacing:.18em;text-align:center}
.vehicle-wizard-progress{display:grid;grid-template-columns:30px minmax(20px,1fr) 30px;align-items:center;gap:7px;margin-bottom:17px}.vehicle-wizard-progress>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#dfe9e3;color:#6a7b73;font-weight:800}.vehicle-wizard-progress>span.active{background:#20c970;color:#073f30}.vehicle-wizard-progress>i{height:3px;border-radius:99px;background:#dfe9e3}.vehicle-wizard-progress>small{grid-column:1/-1;color:var(--muted);text-align:center}.vehicle-wizard-step>h3{margin:0 0 4px}.vehicle-wizard-step>p{margin:0 0 13px;color:var(--muted);font-size:.8rem}.vehicle-editor-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.vehicle-editor-actions #cancelVehicleEditBtn{grid-column:1/-1}

@media (hover:none), (pointer:coarse) {
    .google-btn:hover { box-shadow:0 1px 3px rgba(0,0,0,.08); }
    .facebook-btn:hover { box-shadow:0 1px 3px rgba(24,119,242,.25); }
    .lp-side-nav-item:hover { background:transparent; }
}
/* Passenger verification: preserve the three-column grid when completed steps
   visually replace their number with a checkmark. */
.passenger-kyc-step-number { grid-column: 1; }
.passenger-kyc-step-body { grid-column: 2; min-width: 0; }
.passenger-kyc-check { grid-column: 3; }
.passenger-kyc-step.complete .passenger-kyc-step-number {
    display: grid;
    visibility: hidden;
}

/* Native Android-style verification list: flat rows, dividers and filled
   controls instead of web cards and outlined form boxes. */
.passenger-kyc-shell { padding-right: 18px; padding-left: 18px; }
.passenger-kyc-step {
    margin: 0;
    padding: 18px 2px;
    border: 0;
    border-bottom: 1px solid #d4e0da;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.passenger-kyc-step:first-of-type { border-top: 1px solid #d4e0da; }
.passenger-kyc-step.complete .passenger-kyc-step-number { display: none; }
.passenger-kyc-step.complete .passenger-kyc-step-body { grid-column: 1 / 3; }
.passenger-kyc-step-number { display: none !important; }
.passenger-kyc-step { grid-template-columns: minmax(0,1fr) 30px; }
.passenger-kyc-step-body { grid-column: 1; }
.passenger-kyc-check { grid-column: 2; }
.passenger-kyc-step.complete .passenger-kyc-step-body { grid-column: 1; }
.passenger-kyc-step-body h3 { font-size: 1rem; line-height: 1.25; }
.passenger-kyc-step-body p { max-width: 430px; font-size: .8rem; }
.passenger-kyc-step-body input {
    min-height: 52px;
    margin: 5px 0;
    padding: 14px 15px;
    border: 0;
    border-bottom: 2px solid #a9bbb2;
    border-radius: 9px 9px 0 0;
    outline: 0;
    background: #eaf1ed;
    color: #073f30;
    font: inherit;
    box-shadow: none;
}
.passenger-kyc-step-body input:focus {
    border-bottom-color: #13b967;
    background: #e2f2e9;
}
.passenger-kyc-photo-picker {
    width: max-content;
    max-width: 100%;
    padding: 4px 0;
    color: #087443;
    font-weight: 700;
}
.passenger-kyc-photo-picker img {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #dff5e8;
    object-fit: contain;
    padding: 7px;
}
.passenger-kyc-actions button,
.passenger-kyc-otp button {
    min-height: 44px;
    border-radius: 22px;
    padding: 0 18px;
}
@media (max-width: 420px) {
    .passenger-kyc-shell { padding-right: 12px; padding-left: 12px; }
    .passenger-kyc-step { grid-template-columns: minmax(0,1fr) 30px; }
}

/* Group & Shuttle home: flat, route-first Android hierarchy. */
#groupTransportView {
    width: 100%;
    max-width: none;
    padding-right: 14px;
    padding-left: 14px;
    background: #f4f8f5;
}
.group-native-intro { padding: 8px 2px 4px; }
.group-native-intro > small {
    color: #0a9b58;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.group-native-intro h1 { margin: 6px 0 5px; font-size: 1.65rem; line-height: 1.12; }
.group-native-intro p { margin: 0; color: #607168; font-size: .84rem; line-height: 1.42; }
.group-native-route { position: relative; display: grid; margin-top: 12px; padding-left: 28px; }
.group-native-route::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: #bdd0c6;
}
.group-native-route button {
    position: relative;
    display: grid;
    gap: 3px;
    min-height: 62px;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px solid #c8d7cf;
    border-radius: 0;
    background: transparent;
    color: #073f30;
    text-align: left;
    box-shadow: none;
}
.group-native-route button::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 24px;
    width: 10px;
    height: 10px;
    border: 3px solid #f4f8f5;
    border-radius: 50%;
    background: #20c970;
    box-shadow: 0 0 0 1px #a9bdb2;
}
.group-native-route button:last-child::before { background: #073f30; }
.group-native-route small,
.group-native-meta small,
.group-native-row small { color: #607168; font-size: .7rem; }
.group-native-route strong { font-size: .9rem; }
.group-native-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 9px 0 14px;
    padding-left: 28px;
}
.group-native-meta button {
    display: grid;
    gap: 3px;
    min-height: 52px;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #a9bdb2;
    border-radius: 0;
    background: transparent;
    color: #073f30;
    text-align: left;
    box-shadow: none;
}
.group-native-meta strong { font-size: .82rem; }
.group-native-actions { display: grid; gap: 8px; }
.group-native-actions button {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #07533e;
    border-radius: 24px;
    background: transparent;
    color: #07533e;
    font: inherit;
    font-weight: 800;
    box-shadow: none;
}
.group-native-actions button:first-child { border-color: #07533e; background: #07533e; color: #fff; }
.group-native-actions svg,
.group-native-row svg,
.group-native-empty svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.group-native-section { margin-top: 21px; }
.group-native-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 4px;
}
.group-native-heading h3 { margin: 0; font-size: 1rem; }
.group-native-heading button {
    border: 0;
    background: transparent;
    color: #078b50;
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
}
.group-native-heading > span { color: #607168; font-size: .7rem; }
.group-native-row {
    display: grid;
    width: 100%;
    grid-template-columns: 40px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid #c8d7cf;
    border-radius: 0;
    background: transparent;
    color: #073f30;
    text-align: left;
    box-shadow: none;
}
.group-native-row > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.group-native-row strong,
.group-native-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-native-row > b { color: #078b50; font-size: 1.5rem; }
.group-native-row-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #dff6e9;
    color: #087c49;
}
.group-native-shuttle-list > .lift-empty-state {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #c8d7cf;
    border-radius: 0;
    background: transparent;
}
.group-native-empty {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    border-bottom: 1px solid #c8d7cf;
}
.group-native-empty > span:last-child { display: grid; gap: 4px; }
.group-native-empty small { color: #607168; font-size: .72rem; line-height: 1.4; }
@media (max-width: 420px) {
    #groupTransportView { padding-right: 10px; padding-left: 10px; }
    .group-native-intro { padding-right: 2px; padding-left: 2px; }
}

/* Visible confirmation after a profile-completion step succeeds. */
.passenger-kyc-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #dff7e9;
    color: #07533e;
    font-size: .78rem;
}
.passenger-kyc-activity > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: #20c970;
    color: #fff;
    font-weight: 800;
}