:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --text: #111827;
    --muted: #718096;
    --line: #e7edf6;
    --blue: #2563eb;
    --blue-dark: #123a91;
    --green: #10b981;
    --orange: #f59e0b;
    --shadow: 0 20px 45px rgba(17, 24, 39, 0.08);
}

@font-face {
    font-family: "VazirmatnLocal";
    src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn[wght].woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: VazirmatnLocal, Vazirmatn, "Segoe UI", Tahoma, Arial, sans-serif;
}

.location-permission-card {
    position: fixed;
    z-index: 3000;
    right: 24px;
    bottom: 24px;
    width: min(430px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px);
}

.location-permission-card.is-hidden,
.location-permission-action.is-hidden {
    display: none;
}

.location-permission-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eff6ff;
}

.location-permission-icon span {
    position: relative;
    width: 23px;
    height: 23px;
    border: 3px solid #2563eb;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.location-permission-icon span::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #2563eb;
}

.location-permission-card h2 {
    margin: 0;
    font-size: 16px;
}

.location-permission-card p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.8;
}

.location-permission-action {
    grid-column: 1 / -1;
    min-height: 44px;
    border-radius: 10px;
    color: #fff;
    background: #2563eb;
    font-size: 13px;
    font-weight: 900;
}

.location-permission-action:disabled {
    cursor: wait;
    opacity: 0.7;
}

.location-permission-close {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    color: #94a3b8;
    background: transparent;
    font-size: 22px;
}

.location-permission-card[data-state="denied"] {
    border-color: #fed7aa;
}

.location-permission-card[data-state="denied"] .location-permission-icon {
    background: #fff7ed;
}

.quote-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(2px);
}

.quote-loading-overlay.is-hidden {
    display: none;
}

.quote-loading-overlay strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(360px, calc(100vw - 32px));
    padding: 18px 22px;
    border-radius: 8px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
}

.quote-loading-overlay .spinner {
    position: absolute;
    margin-top: -64px;
    background: #fff;
}

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

button,
input,
select {
    font: inherit;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 78% 16%, rgba(37, 99, 235, 0.16), transparent 28%),
        linear-gradient(135deg, #eef4ff 0%, #f8fafc 48%, #eefdf7 100%);
}

.auth-shell {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.auth-art {
    min-height: 560px;
    padding: 56px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(18, 58, 145, 0.96), rgba(37, 99, 235, 0.85)),
        url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1400&q=80") center/cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.brand-mark {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 24px;
    font-weight: 800;
}

.auth-art h1,
.auth-card h2,
.topbar h1,
.panel-heading h2 {
    margin: 0;
    letter-spacing: 0;
}

.auth-art h1 {
    max-width: 520px;
    font-size: 42px;
    line-height: 1.35;
}

.auth-art p {
    max-width: 440px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.9;
}

.auth-card {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.eyebrow,
.topbar p,
.panel-heading p,
.stat-card span {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.auth-card h2 {
    font-size: 32px;
}

label {
    display: grid;
    gap: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

input,
select {
    width: 100%;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text);
    padding: 0 16px;
    outline: none;
}

input:focus,
select:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

button {
    height: 52px;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

.message {
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    color: #991b1b;
    background: #fee2e2;
    font-size: 14px;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.corporate-app-shell {
    grid-template-columns: minmax(0, 1fr);
}

/* Mobile chrome — hidden on desktop, enabled in the max-width:900px block. */
.mobile-topbar {
    position: sticky;
    z-index: 1100;
    top: 0;
    display: none;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.mobile-topbar-title {
    font-size: 15px;
    font-weight: 800;
}

.mobile-menu-button {
    display: grid;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    place-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #0f172a;
}

.sidebar-backdrop {
    display: none;
}

/* Drawer close button — only meaningful in the mobile off-canvas state. */
.sidebar-close {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: none;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 28px 20px;
    background: #fff;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
}

.brand span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    font-weight: 800;
}

.sidebar nav {
    display: grid;
    gap: 4px;
}

.sidebar nav .nav-link,
.logout,
.user-pill {
    border-radius: 8px;
    padding: 12px 14px;
    color: #667085;
    font-weight: 700;
}

.sidebar nav .nav-link.active {
    color: var(--blue);
    background: #eff6ff;
}

.sidebar nav .nav-link:not(.active):hover {
    background: #f4f6fa;
    color: #1f2a44;
}

/* Grouped (parent) sections */
.nav-group {
    display: grid;
    gap: 2px;
}

.nav-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    color: #98a2b3;
    font-weight: 800;
    font-size: 13px;
    user-select: none;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-inline-start: 8px;
    opacity: 0.7;
}

.nav-group[open] > summary::after {
    transform: rotate(-135deg);
}

.nav-group > summary:hover {
    color: #667085;
    background: #f4f6fa;
}

.nav-group-items {
    display: grid;
    gap: 4px;
    padding-inline-start: 10px;
    margin-inline-start: 6px;
    border-inline-start: 1px solid var(--line);
}

.nav-group-items .nav-link {
    padding: 10px 12px;
    font-size: 14px;
}

/* Balance sits just above the logout link and carries the auto margin that
   pins the pair to the bottom of the sidebar. */
.sidebar-balance {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.sidebar-balance span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-balance strong {
    color: #1f2a44;
    font-size: 14px;
    font-weight: 800;
}

.sidebar-balance:hover {
    border-color: var(--blue);
}

/* Falls back to carrying the auto margin when there is no balance box above it
   (logged-out sidebar). */
.logout {
    margin-top: auto;
    color: #ef4444;
    background: #fff1f2;
    text-align: center;
}

.sidebar-balance + .logout {
    margin-top: 0;
}

.dashboard {
    min-width: 0;
    padding: 34px;
}

/* The map page is edge-to-edge and has no topbar of its own, so the map fills
   the whole viewport height. */
.dashboard-map-page {
    padding: 0;
}

.dashboard-map-page .map-panel {
    min-height: 0;
    height: 100dvh;
    border: 0;
    border-radius: 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px;
}

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

.user-pill {
    background: #fff;
    border: 1px solid var(--line);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card,
.panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.stat-card {
    min-height: 138px;
    padding: 24px;
}

.stat-card.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}

.stat-card.primary span,
.stat-card.primary small {
    color: rgba(255, 255, 255, 0.72);
}

.stat-card strong {
    display: block;
    margin-top: 10px;
    font-size: 30px;
    line-height: 1.2;
}

.stat-card small {
    color: var(--muted);
}

.panel {
    padding: 24px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.panel-heading h2 {
    font-size: 22px;
}

.panel-heading > span {
    color: var(--green);
    background: #ecfdf5;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 800;
}

.panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
}

.wallet-panel {
    max-width: 720px;
}

.wallet-charge-form {
    display: grid;
    gap: 18px;
}

.wallet-charge-form label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.wallet-charge-form input {
    height: 54px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.wallet-charge-form > button {
    height: 52px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.quick-amounts button {
    min-height: 44px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: var(--blue);
    background: #eff6ff;
    font-size: 13px;
    font-weight: 900;
}

.wallet-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 900;
}

.wallet-alert.error {
    color: #dc2626;
    background: #fef2f2;
}

.payment-result-panel {
    max-width: 720px;
    display: grid;
    justify-items: start;
    gap: 16px;
}

.payment-result-panel h2,
.payment-result-panel p {
    margin: 0;
}

.payment-result-panel p {
    color: var(--muted);
    font-weight: 700;
}

.dashboard-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-shortcut-grid a {
    display: grid;
    gap: 7px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text);
}

.admin-shortcut-grid strong {
    color: var(--blue);
    font-size: 16px;
}

.admin-shortcut-grid span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.admin-filter-form,
.admin-user-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-filter-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-filter-form label,
.admin-user-form label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.admin-filter-form input,
.admin-filter-form select,
.admin-user-form input,
.admin-user-form select {
    height: 48px;
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.admin-filter-form button,
.admin-user-form > button {
    align-self: end;
    min-height: 48px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-weight: 900;
}

.admin-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.admin-checks label {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}

.admin-checks input {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    accent-color: var(--blue);
}

.delete-user-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.delete-user-form button {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    font-weight: 900;
}

.payment-result-mark {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #fee2e2;
}

.payment-result-panel.result-paid .payment-result-mark {
    background: #dcfce7;
}

.payment-result-panel.result-canceled .payment-result-mark {
    background: #fef3c7;
}

.payment-result-details {
    width: 100%;
    display: grid;
    gap: 8px;
    margin: 0;
}

.payment-result-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.payment-result-details dt,
.payment-result-details dd {
    margin: 0;
}

.payment-result-details dt {
    color: var(--muted);
    font-weight: 800;
}

.payment-result-details dd {
    font-weight: 900;
}

.payment-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.payment-result-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
}

.payment-result-actions a + a {
    color: var(--blue);
    background: #eff6ff;
}

.search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 180px;
    gap: 16px;
    align-items: end;
    margin-bottom: 22px;
}

.corporate-layout {
    margin-bottom: 24px;
}

.dashboard-map-page .corporate-layout {
    margin-bottom: 0;
}

.map-panel {
    position: relative;
    min-height: calc(100vh - 170px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #eef7ff, #f8fafc 48%, #effdf7);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.leaflet-container {
    font-family: VazirmatnLocal, Vazirmatn, Tahoma, sans-serif;
}

.leaflet-container img {
    max-width: none;
}

.leaflet-control-attribution {
    display: none;
}

.leaflet-control-zoom a {
    color: #111827;
    font-weight: 900;
}

.live-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #dbeafe;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.real-map {
    width: 100%;
    height: 100%;
}

.osm-map-tile-layer,
.route-layer {
    position: absolute;
    inset: 0;
}

.osm-map-tile-layer {
    z-index: 1;
}

.osm-map-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    max-width: none;
    user-select: none;
    filter: saturate(0.86) contrast(0.96) brightness(1.04);
}

.route-layer {
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.route-layer line {
    stroke: #111827;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.9;
}

.map-tools {
    position: static;
    display: flex;
    gap: 8px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.map-tools button {
    flex: 1;
    height: 36px;
    padding: 0 14px;
    color: #475569;
    background: transparent;
    font-size: 13px;
}

.map-tools button span {
    display: inline-grid;
    width: 21px;
    height: 21px;
    place-items: center;
    margin-left: 4px;
    border-radius: 50%;
    background: #e2e8f0;
    font-size: 11px;
    font-weight: 900;
}

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

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

/* Route is complete: the step chips become the way back into editing, so they
   must look clickable rather than like passive stage labels. */
.map-tools button.is-editable {
    color: var(--blue);
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.35);
    font-weight: 800;
    cursor: pointer;
}

.map-tools button.is-editable:hover {
    background: #eff6ff;
    border-color: var(--blue);
}

.map-tools button:disabled {
    color: #a8b0bd;
    cursor: not-allowed;
}

.map-tools .optional-map-step {
    flex: 0.78;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.map-tools .optional-map-step:not(.active) {
    background: #fff;
}

.center-selection-pin {
    position: absolute;
    z-index: 510;
    left: 50%;
    top: 50%;
    width: 128px;
    height: 72px;
    pointer-events: none;
    transform: translate(-50%, -100%);
    filter: drop-shadow(0 14px 14px rgba(15, 23, 42, 0.2));
}

.center-selection-pin::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    filter: blur(3px);
    transform: translateX(-50%);
}

.center-selection-pin.is-hidden {
    display: none;
}

.center-selection-pin.is-bouncing {
    animation: center-pin-bounce 420ms cubic-bezier(0.22, 0.8, 0.35, 1);
}

@keyframes center-pin-bounce {
    0%, 100% {
        transform: translate(-50%, -100%);
    }
    45% {
        transform: translate(-50%, calc(-100% - 15px));
    }
    70% {
        transform: translate(-50%, calc(-100% - 4px));
    }
}

.center-pin-card {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 4px;
    width: 120px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 13px;
    color: #111827;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.center-pin-card i {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4f46e5;
    box-shadow: 0 5px 12px rgba(79, 70, 229, 0.24);
}

.center-pin-card i::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #fff;
}

.center-pin-card b {
    flex: 1;
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.center-selection-pin[data-mode="destination"] .center-pin-card i {
    border-radius: 8px;
    background: #16a34a;
    box-shadow: 0 5px 12px rgba(22, 163, 74, 0.24);
}

.center-selection-pin[data-mode="destination"] .center-pin-card i::after,
.center-selection-pin[data-mode="extra_destination"] .center-pin-card i::after {
    border-radius: 3px;
}

.center-selection-pin[data-mode="extra_destination"] .center-pin-card i {
    border-radius: 8px;
    background: #7c3aed;
    box-shadow: 3px -3px 0 rgba(124, 58, 237, 0.24), 0 5px 12px rgba(124, 58, 237, 0.24);
}

.center-pin-stem {
    position: absolute;
    z-index: 1;
    top: 43px;
    left: 50%;
    width: 3px;
    height: 25px;
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.62);
    transform: translateX(-50%);
}

.center-pin-stem::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #64748b;
    transform: translateX(-50%);
}

.map-selection-actions {
    position: absolute;
    z-index: 525;
    left: 50%;
    bottom: 22px;
    width: min(520px, calc(100% - 44px));
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.map-confirm-button {
    flex: 1;
    width: auto;
    height: 54px;
    border-radius: 8px;
    color: #fff;
    background: #ff5a36;
    box-shadow: 0 18px 38px rgba(255, 90, 54, 0.26);
    font-size: 15px;
    font-weight: 900;
}

.map-confirm-button:hover {
    background: #f04b28;
}

#quote-submit-button.is-hidden {
    display: none;
}

.map-back-button {
    width: 128px;
    height: 54px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    color: #475569;
    background: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 900;
}

.map-back-button:hover {
    background: #fff;
    color: #0f172a;
}

.map-back-button.is-hidden {
    display: none;
}

.skip-extra-destination {
    width: 150px;
    height: 54px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    color: #475569;
    background: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 900;
}

.skip-extra-destination.is-hidden {
    display: none;
}

/* Leaflet divIcons sit in their own pane and don't inherit the app font,
   so they fall back to the browser default (Arial-ish). Set it explicitly. */
.route-marker,
.route-marker b,
.route-marker .pin-fav,
.fake-pin {
    font-family: VazirmatnLocal, Vazirmatn, Tahoma, sans-serif;
}

.route-marker,
.fake-pin {
    width: 116px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: transparent;
    box-shadow: none;
}

.route-marker span {
    position: absolute;
    left: 50%;
    top: 38px;
    width: 3px;
    height: 25px;
    border: 0;
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.56);
    box-shadow: 0 6px 10px rgba(15, 23, 42, 0.16);
    transform: translateX(-50%);
}

.route-marker span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #64748b;
    transform: translateX(-50%);
}

.route-marker b {
    position: absolute;
    left: 50%;
    top: 0;
    min-width: 106px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 46px 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    color: #111827;
    background: rgba(255, 255, 255, 0.98);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
    transform: translateX(-50%);
}

.route-marker b::after,
.route-marker b::before {
    content: "";
    position: absolute;
    z-index: 1;
}

.route-marker b::after {
    right: 7px;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
}

.route-marker b::before {
    right: 16px;
    top: 15px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.route-marker-origin,
.origin-fake-pin {
    background: transparent;
}

.route-marker-origin b::after {
    background: #4f46e5;
}

.route-marker-destination,
.destination-fake-pin {
    background: transparent;
}

.route-marker-destination b::after {
    border-radius: 8px;
    background: #16a34a;
}

.route-marker-destination b::before {
    border-radius: 3px;
}

.route-marker-extra-destination,
.extra-destination-fake-pin {
    background: transparent;
}

.route-marker-extra-destination b::after {
    border-radius: 8px;
    background: #7c3aed;
    box-shadow: 4px -4px 0 rgba(124, 58, 237, 0.34);
}

.route-marker-extra-destination b::before {
    border-radius: 3px;
}

.map-neighborhood {
    display: none;
    position: absolute;
    z-index: 2;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    color: rgba(71, 85, 105, 0.82);
    font-size: 13px;
    font-weight: 800;
}

.n1 {
    right: 34%;
    top: 38%;
}

.n2 {
    left: 24%;
    top: 61%;
}

.n3 {
    right: 30%;
    top: 18%;
}

.n4 {
    right: 48%;
    bottom: 18%;
}

.ride-request {
    position: absolute;
    z-index: 520;
    left: 50%;
    top: 22px;
    width: min(1120px, calc(100% - 44px));
    padding: 8px;
    border: 1px solid rgba(231, 237, 246, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: 170px 330px minmax(200px, 1fr) auto 116px;
    gap: 8px;
    align-items: center;
    transform: translateX(-50%);
}

/* Step chips must never wrap to a second line — they read as broken labels. */
.map-tools button {
    white-space: nowrap;
}

.map-stage-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0 8px;
}

.map-stage-copy small {
    color: #f97316;
    font-size: 11px;
    font-weight: 900;
}

.map-stage-copy strong {
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-routes {
    grid-column: auto;
}

.map-search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

/* ⭐ save button attached to each map pin */
.route-marker {
    position: relative;
    overflow: visible;
}

.route-marker .pin-fav {
    position: absolute;
    top: 30px;
    left: 1px;
    z-index: 1200;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 50%;
    background: #fff;
    color: initial;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
    pointer-events: auto;
}

.route-marker .pin-fav:hover {
    background: #fffbeb;
    transform: scale(1.08);
}

.map-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 900;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    max-height: 240px;
    overflow-y: auto;
}

.map-search-results.is-hidden {
    display: none;
}

.map-search-result {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2a44;
    cursor: pointer;
}

.map-search-result:hover {
    background: #eff6ff;
    color: var(--blue);
}

.favorites-box {
    display: grid;
    gap: 6px;
}

.favorites-head {
    font-size: 12px;
    font-weight: 800;
    color: #98a2b3;
}

.favorites-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.favorites-empty {
    margin: 0;
    font-size: 12px;
    color: #98a2b3;
}

.favorite-item {
    display: inline-flex;
    align-items: center;
    background: #f4f6fa;
    border-radius: 999px;
    overflow: hidden;
}

.favorite-use {
    width: auto;
    height: auto;
    padding: 6px 12px;
    background: transparent;
    color: #1f2a44;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.favorite-use:hover {
    color: var(--blue);
}

.favorite-delete {
    width: auto;
    height: auto;
    padding: 6px 10px 6px 4px;
    background: transparent;
    color: #ef4444;
    font-size: 15px;
    line-height: 1;
}

.map-search input,
.map-search button,
#locate-button {
    height: 42px;
}

.map-search input {
    background: rgba(248, 250, 252, 0.92);
}

.map-search button,
#locate-button {
    width: auto;
    padding: 0 12px;
    color: var(--blue);
    background: #eff6ff;
    font-size: 12px;
    white-space: nowrap;
}

.quick-routes {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
    align-self: center;
}

.quick-routes button {
    width: auto;
    height: 42px;
    padding: 0 10px;
    color: var(--blue);
    background: #eff6ff;
    font-size: 12px;
    white-space: nowrap;
}

.route-summary,
.compact-route-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.route-summary span {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    height: 42px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.92);
}

.route-summary b,
.route-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-summary b {
    color: var(--muted);
    font-size: 11px;
}

.route-summary strong {
    color: var(--text);
    font-size: 13px;
}

.compact-route-form label {
    gap: 4px;
    font-size: 12px;
}

.segmented-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.segmented-controls label {
    display: block;
}

.segmented-controls input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-controls span {
    display: grid;
    place-items: center;
    height: 38px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.segmented-controls input:checked + span {
    background: #111827;
    color: #fff;
}

.vehicle-controls {
    margin-top: -2px;
}

.compact-route-form input {
    height: 42px;
    background: rgba(248, 250, 252, 0.92);
}

.quotes-panel {
    margin-top: 0;
}

.map-results {
    display: none;
}

.quote-list,
.ride-option-list {
    display: grid;
    gap: 12px;
}

.ride-options-sheet {
    position: absolute;
    z-index: 530;
    /* Centred with a width cap: edge-to-edge on a wide monitor strands the two
       provider columns at opposite sides with dead space between them. */
    left: 50%;
    transform: translateX(-50%);
    /* Clears the floating step card (top:22px + ~74px tall) with a small gap —
       any more and it just eats rows of prices. */
    top: 104px;
    width: min(calc(100% - 44px), 1080px);
    max-height: calc(100% - 126px);
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(231, 237, 246, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
}

.ride-options-sheet.is-hidden {
    display: none;
}

.sheet-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sheet-heading a,
.sheet-heading button {
    align-self: start;
    width: auto;
    height: 36px;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: #eff6ff;
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
}

.sheet-heading span,
.sheet-heading strong {
    display: block;
}

.sheet-heading span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.sheet-heading strong {
    margin-top: 4px;
    font-size: 16px;
}

.quote-countdown {
    justify-self: end;
    align-self: center;
    padding: 7px 10px;
    border-radius: 8px;
    color: #0f766e;
    background: #ccfbf1;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.quote-expired-message {
    position: absolute;
    right: 28px;
    top: 118px;
    z-index: 550;
    max-width: 360px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    background: #fff1f2;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    font-size: 13px;
    font-weight: 900;
}

.quote-expired-message.is-hidden {
    display: none;
}

.ride-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ride-filters button {
    width: auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    font-size: 13px;
}

.ride-filters button.active {
    color: #fff;
    background: #111827;
}

.multi-request-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.multi-request-bar label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.multi-request-bar input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.multi-request-bar button {
    width: auto;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.quote-errors {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.quote-errors:empty {
    display: none;
}

.quote-errors span {
    padding: 9px 11px;
    border-radius: 8px;
    color: #991b1b;
    background: #fee2e2;
    font-size: 13px;
    font-weight: 800;
}

.quote-errors .quote-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d4ed8;
    background: #eff6ff;
}

.quote-errors .quote-success {
    color: #047857;
    background: #dcfce7;
}

.quote-errors .quote-loading .spinner,
#quote-submit-button .spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

#quote-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#quote-submit-button.is-loading {
    cursor: wait;
    background: #1d4ed8;
    color: #fff;
}

.ride-options-sheet.is-loading .provider-column {
    opacity: 0.55;
    pointer-events: none;
}

/* Providers stack as rows, not columns: side by side on a wide monitor pinned
   Snapp and Tapsi to opposite edges with dead space between them. Stacked, each
   provider's tiles stay centred as one readable block. */
.compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.provider-column {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 8px;
}

.ride-monitor-list {
    display: grid;
    gap: 10px;
}

.ride-monitor-card {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.4fr 0.9fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.ride-monitor-card h3,
.ride-monitor-card p {
    margin: 0;
}

.ride-monitor-card h3 {
    margin-top: 6px;
    color: var(--dark);
    font-size: 16px;
}

.ride-monitor-card p,
.ride-monitor-card small,
.ride-monitor-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.provider-chip {
    display: inline-flex;
    width: max-content;
    padding: 5px 8px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 900;
}

.ride-status-label {
    display: block;
    color: var(--dark);
    font-size: 15px;
}

.phase-searching .ride-status-label {
    color: #b45309;
}

.phase-active .ride-status-label {
    color: #047857;
}

.ride-driver,
.ride-money,
.ride-actions {
    display: grid;
    gap: 5px;
}

.ride-driver {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.active-driver-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ride-driver strong,
.ride-money strong {
    color: var(--dark);
    font-size: 14px;
}

.ride-money small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.active-driver-info a {
    overflow: hidden;
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    direction: ltr;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-driver-info small {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ride-actions {
    grid-auto-flow: column;
    justify-content: end;
}

.ride-actions button,
.ride-actions a,
.history-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 11px;
    border: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.ride-actions button {
    background: #fee2e2;
    color: #dc2626;
}

.ride-actions button:disabled {
    opacity: 0.65;
}

.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.history-filters a.active {
    background: #111827;
    color: #fff;
}

.ride-history-table .table-row {
    grid-template-columns: 1fr 1fr 1fr minmax(230px, 1.8fr) 0.8fr 0.9fr;
    align-items: center;
}

.admin-users-table .table-row {
    grid-template-columns: minmax(180px, 1.4fr) 1fr 1fr 1fr 1.1fr 0.7fr;
}

.admin-rides-table .table-row {
    grid-template-columns: minmax(120px, 1fr) 1fr 1fr 0.9fr minmax(220px, 1.7fr) 0.8fr 0.9fr;
}

.admin-users-table small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--blue);
    font-weight: 900;
}

.ride-cost-breakdown {
    display: grid;
    gap: 3px;
}

.ride-cost-breakdown strong {
    color: var(--text);
    font-size: 14px;
}

.ride-cost-breakdown small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.ride-route-cell {
    display: grid;
    justify-items: start;
    gap: 4px;
    min-width: 0;
}

.ride-route-cell span,
.ride-route-cell small {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ride-route-cell small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.multi-destination-badge {
    display: inline-flex;
    width: max-content;
    padding: 3px 7px;
    border-radius: 999px;
    color: #6d28d9;
    background: #ede9fe;
    font-size: 10px;
    font-weight: 900;
}

.history-driver-cell {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.driver-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    background: #111827;
    font-weight: 900;
}

.driver-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-driver-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.history-driver-info strong,
.history-driver-info a,
.history-driver-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-driver-info strong {
    color: var(--text);
}

.history-driver-info a {
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    direction: ltr;
    text-align: right;
}

.history-driver-info small,
.no-driver {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.history-driver-info .plate-image,
.active-driver-info .plate-image {
    width: 118px;
    height: 30px;
    object-fit: contain;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.plate-badge {
    width: 132px;
    height: 34px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 34px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    direction: rtl;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.75);
}

.plate-flag {
    align-self: stretch;
    background:
        linear-gradient(#16a34a 0 33%, #fff 33% 66%, #ef4444 66%),
        #16a34a;
    border-left: 1px solid #cbd5e1;
}

.plate-main {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plate-iran {
    height: 100%;
    display: grid;
    place-items: center;
    gap: 0;
    border-right: 1px solid #cbd5e1;
    color: #111827;
    font-size: 13px;
    line-height: 1;
}

.plate-iran small {
    color: #111827;
    font-size: 8px;
    font-weight: 800;
}

/* Flex-wrap centred: tiles form one centred row per provider and overflow to a
   second row when a provider returns more than fits, instead of stretching to
   fill the sheet or spilling past its edge. */
.provider-column > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 8px;
    width: 100%;
}

.provider-column > div > .ride-option {
    flex: 0 0 128px;
}

.provider-column > h3 {
    margin: 0 0 2px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Colour dot ties the column heading to its tiles. */
.provider-column > h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--col-dot, var(--muted));
}

.provider-column:first-child > h3 { --col-dot: #00b14f; }
.provider-column:last-child > h3 { --col-dot: #ff5a36; }

.empty-provider {
    grid-column: 1 / -1;
}

.empty-provider {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc;
    font-weight: 800;
}

/* Quote tiles. The whole tile is the selection control; selected fills dark so
   the choice reads instantly across a grid of options. */
.ride-option {
    --brand: var(--muted);
    --glass: #f7f8fa;
    display: grid;
    position: relative;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 2px;
    padding: 13px 11px 11px;
    border: 1.5px solid var(--line);
    border-radius: 13px;
    background: #f7f8fa;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s;
    user-select: none;
}

.ride-option.quote-snapp { --brand: #00b14f; }
.ride-option.quote-tap30 { --brand: #ff5a36; }

.ride-option:hover { border-color: #c9d2e0; }

.ride-option:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Brand wash behind the icon — groups the tile to its service without a
   second colour chip competing for attention. */
.quote-wash {
    position: absolute;
    inset: 0 0 auto;
    height: 58px;
    border-radius: 11px 11px 0 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--brand) 13%, transparent), transparent);
    pointer-events: none;
}

/* Font Awesome vehicles are on a 640x512 (~5:4) grid, so the box matches that
   ratio — a square box would squash the side-view cars. currentColor picks up
   the provider brand. */
.quote-icon {
    width: 46px;
    height: 37px;
    margin-bottom: 4px;
    fill: currentColor;
    color: var(--brand);
    position: relative;
}

.quote-name {
    font-size: 13px;
    font-weight: 700;
}

.quote-meta {
    font-size: 11px;
    color: var(--muted);
}

.quote-price {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    width: 100%;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quote-price small {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 3px;
}

.quote-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    font-size: 10px;
    color: transparent;
}

/* ---- selected ---- */
.ride-option.is-selected {
    --glass: #1a1d23;
    background: #1a1d23;
    border-color: #1a1d23;
    color: #fff;
}

.ride-option.is-selected .quote-wash { display: none; }
/* Keep the brand hue on the dark ground so the service stays identifiable. */
.ride-option.is-selected .quote-icon { color: color-mix(in srgb, var(--brand) 82%, white); }
.ride-option.is-selected .quote-meta { color: rgba(255, 255, 255, 0.62); }
.ride-option.is-selected .quote-price { border-top-color: rgba(255, 255, 255, 0.2); }
.ride-option.is-selected .quote-price small { color: rgba(255, 255, 255, 0.62); }
.ride-option.is-selected .quote-check {
    background: #fff;
    border-color: #fff;
    color: #1a1d23;
}

.request-ride-button {
    width: 100%;
    margin-top: 9px;
    height: 34px;
    font-size: 12.5px;
    background: #111827;
}

.ride-option.is-selected .request-ride-button {
    background: #fff;
    color: #1a1d23;
}

.status-ok {
    display: inline-flex;
    width: max-content;
    padding: 6px 8px;
    border-radius: 8px;
    color: #047857;
    background: #dcfce7;
    font-size: 12px;
    font-weight: 900;
}

.request-ride-button:disabled {
    cursor: default;
    opacity: 0.82;
}

.ride-status {
    grid-column: 1 / -1;
    display: none;
}

.ride-option.is-searching .ride-status,
.ride-option.is-found .ride-status,
.ride-option.is-error .ride-status {
    display: block;
}

.ride-option.is-searching .ride-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.ride-option.is-error .ride-status {
    padding: 0;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #dbeafe;
    border-top-color: var(--blue);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
}

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

.cancel-ride-button {
    width: auto;
    height: 36px;
    padding: 0 12px;
    color: #dc2626;
    background: #fee2e2;
    font-size: 13px;
}

.driver-card {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #065f46;
}

.driver-card .cancel-ride-button {
    margin-top: 6px;
    justify-self: start;
}

.driver-card span,
.driver-card small {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.driver-card .driver-phone-link {
    width: max-content;
    color: var(--blue);
    direction: ltr;
    font-size: 13px;
    font-weight: 900;
    text-align: right;
}

.status-error,
.status-cancelled {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-weight: 800;
}

.status-cancelled {
    background: #f8fafc;
    color: #64748b;
}

.transaction-head,
.transaction-row {
    grid-template-columns: 1fr 1fr 2fr 1fr;
}

.rides-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.2fr 1fr 1.1fr;
    gap: 14px;
    align-items: center;
    min-height: 60px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.table-row > *,
.ride-monitor-card > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.table-row > strong,
.ride-money strong {
    white-space: nowrap;
}

.table-row:last-child {
    border-bottom: 0;
}

.table-head {
    min-height: 48px;
    color: var(--muted);
    background: #f8fafc;
    font-size: 13px;
    font-weight: 800;
}

.table-row strong {
    color: var(--blue);
}

.empty-state {
    padding: 42px 18px;
    text-align: center;
}

.empty-state h3 {
    margin: 0;
}

.empty-state p {
    margin: 8px 0 0;
    color: var(--muted);
}

@media (min-width: 901px) and (max-width: 1280px) {
    .ride-history-table,
    .admin-users-table,
    .admin-rides-table {
        overflow-x: auto;
    }

    .ride-history-table .table-row {
        min-width: 980px;
    }

    .admin-users-table .table-row {
        min-width: 940px;
    }

    .admin-rides-table .table-row {
        min-width: 1100px;
    }

    .ride-monitor-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ride-actions {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .ride-request {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-search,
    #locate-button {
        grid-column: 1 / -1;
    }

    /* The step card wraps to two rows at this width, so the sheet starts lower —
       but only just below it, so more price rows stay visible. */
    .ride-options-sheet {
        top: 152px;
        max-height: calc(100% - 174px);
    }

    .quote-expired-message {
        top: 144px;
    }
}

@media (max-width: 900px) {
    .auth-shell,
    .app-shell,
    .stats-grid,
    .search-form,
    .corporate-layout,
    .quote-list,
    .admin-shortcut-grid,
    .admin-filter-form,
    .admin-user-form {
        grid-template-columns: 1fr;
    }

    .auth-art {
        min-height: 340px;
    }

    /* Off-canvas drawer: the sidebar slides in from the right (RTL) instead of
       stacking its full height above the page content. */
    .mobile-topbar {
        display: flex;
    }

    .sidebar-close {
        display: grid;
    }

    .sidebar {
        position: fixed;
        z-index: 1200;
        top: 0;
        right: 0;
        /* Leave a visible strip of backdrop so tapping outside is discoverable. */
        width: min(290px, 78vw);
        height: 100vh;
        padding-top: 8px;
        overflow-y: auto;
        border-left: 1px solid var(--line);
        border-bottom: 0;
        box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
        transform: translateX(100%);
        transition: transform 0.24s ease;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

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

    .sidebar-backdrop {
        position: fixed;
        z-index: 1150;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
    }

    body.sidebar-locked {
        overflow: hidden;
    }

    /* The topbar is replaced by the compact mobile bar. */
    .dashboard > .topbar {
        display: none;
    }

    .dashboard {
        padding-top: 0;
    }

    .rides-table {
        border: 0;
        display: grid;
        gap: 12px;
        overflow: visible;
    }

    .table-head {
        display: none;
    }

    .table-row {
        grid-template-columns: 1fr;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }

    .ride-history-table .table-row,
    .admin-users-table .table-row,
    .admin-rides-table .table-row {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .ride-monitor-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ride-actions {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .ride-request {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-search,
    #locate-button {
        grid-column: 1 / -1;
    }

    .ride-options-sheet {
        top: 152px;
        max-height: calc(100% - 174px);
    }

    .quote-expired-message {
        top: 144px;
    }

    /* The mobile topbar turns on at this breakpoint, so the map page becomes
       full-screen here too — pin it to the viewport and let only the map pan. */
    body:has(.dashboard-map-page) {
        overflow: hidden;
    }

    .dashboard-map-page {
        height: 100dvh;
        overflow: hidden;
    }

    .dashboard-map-page .map-panel {
        min-height: 0;
        height: calc(100dvh - 54px);
    }
}

@media (max-width: 720px) {
    .auth-page,
    .dashboard {
        padding: 18px;
    }

    /* The map page stays edge-to-edge regardless of the generic padding above. */
    .dashboard-map-page {
        padding: 0;
    }

    .auth-art,
    .auth-card,
    .panel,
    .stat-card {
        padding: 22px;
    }

    .auth-art h1 {
        font-size: 30px;
    }

    .topbar,
    .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid,
    .quote-card,
    .quick-amounts {
        grid-template-columns: 1fr;
    }

    /* Comparing Snapp vs Tap30 is the whole point of this sheet, so keep the
       two provider columns side by side and shrink the cards instead. Columns
       split the width evenly again here — there is no spare room to centre. */
    .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 6px;
    }

    .provider-column > h3 {
        font-size: 12px;
    }

    /* Two provider columns side by side leaves little room, so tiles go
       single-file within each column instead of wrapping. */
    .provider-column > div {
        max-width: none;
        gap: 6px;
    }

    .provider-column > div > .ride-option {
        flex: 1 1 100%;
    }

    /* Tiles stay tiles on mobile, just tighter. */
    .ride-option {
        padding: 10px 8px 9px;
        border-radius: 11px;
    }

    .quote-icon {
        width: 40px;
        height: 32px;
    }

    .quote-name { font-size: 12px; }
    .quote-meta { font-size: 10px; }
    .quote-price { font-size: 12.5px; }
    .quote-wash { height: 48px; }

    .ride-option > strong {
        font-size: 13px;
    }

    .ride-option > .request-ride-button {
        width: 100%;
        height: 34px;
        font-size: 12px;
    }

    .empty-provider {
        padding: 12px;
        font-size: 11px;
    }

    /* Full-screen map: it fills everything below the mobile topbar, and the
       controls float on top of it instead of stacking above it. */
    /* Full-screen map sizing is inherited from the max-width:900px block. */
    .map-panel {
        min-height: calc(100dvh - 54px);
    }

    .ride-request,
    .map-results,
    .ride-options-sheet {
        position: absolute;
        left: 10px;
        right: 10px;
        width: auto;
        /* Cancel the desktop centering trick, otherwise left/right offsets get
           shifted half the element's width off-screen. */
        transform: none;
    }

    /* Search + step chips ride at the top of the map, compact and stacked. */
    .ride-request {
        top: 10px;
        padding: 8px;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .map-stage-copy {
        padding: 2px 4px;
    }

    .map-stage-copy strong {
        font-size: 12px;
    }

    .map-tools {
        gap: 4px;
    }

    .map-tools button {
        height: 32px;
        padding: 0 6px;
        font-size: 12px;
    }

    .map-tools button span {
        width: 18px;
        height: 18px;
        margin-left: 3px;
        font-size: 10px;
    }

    /* Favourites and "my location" cost too much room on a phone. */
    .favorites-box,
    #locate-button {
        display: none;
    }

    /* Actions become a full-width bottom sheet, thumb-reachable. */
    .map-selection-actions {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-radius: 14px 14px 0 0;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(8px);
        transform: none;
    }

    .map-back-button,
    .skip-extra-destination {
        width: auto;
        flex: 1;
        height: 48px;
        font-size: 12px;
    }

    .map-confirm-button {
        flex: 1.4;
        height: 48px;
    }

    .map-results,
    .ride-options-sheet {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 78vh;
        padding: 10px;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
    }

    .ride-options-sheet .sheet-heading strong {
        font-size: 12px;
    }

    .ride-filters button {
        padding: 0 8px;
        font-size: 11px;
    }

    .multi-request-bar span {
        font-size: 11px;
    }

    .quote-expired-message {
        top: auto;
        bottom: 86px;
        left: 10px;
        right: 10px;
        max-width: none;
    }

    .quick-routes {
        overflow-x: auto;
    }

    .map-search,
    .route-summary,
    .quick-routes,
    .compact-route-form {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .ride-monitor-card {
        grid-template-columns: 1fr;
    }

    .ride-actions {
        grid-column: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .ride-actions > * {
        width: 100%;
    }

    .sheet-heading,
    .multi-request-bar,
    .payment-result-details div {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-result-details dd {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .auth-page,
    .dashboard {
        padding: 12px;
    }

    .dashboard-map-page {
        padding: 0;
    }

    .auth-art,
    .auth-card,
    .panel,
    .stat-card {
        padding: 16px;
    }

    .topbar h1,
    .panel-heading h2 {
        font-size: 22px;
    }

    .stat-card strong {
        font-size: 26px;
    }

    .user-pill {
        text-align: center;
    }

    .quick-amounts,
    .ride-actions {
        grid-template-columns: 1fr;
    }

    /* Scoped away from .dashboard-map-page: a fixed 680px there would overflow
       short viewports and push the confirm bar below the fold. */
    .map-panel:not(.dashboard-map-page .map-panel) {
        min-height: 680px;
    }
}