:root {
    --ds-bg: #080b12;
    --ds-bg-secondary: #0d111a;
    --ds-sidebar: #0a0e16;
    --ds-surface: #111722;
    --ds-surface-hover: #171e2b;
    --ds-border: rgba(255, 255, 255, 0.07);
    --ds-text: #f4f7fb;
    --ds-text-secondary: #8d98aa;
    --ds-text-muted: #5f6a7d;
    --ds-primary: #6366f1;
    --ds-primary-hover: #7c7ff7;
    --ds-success: #22c55e;
    --ds-danger: #ef4444;
    --ds-sidebar-width: 235px;
    --ds-sidebar-collapsed-width: 76px;
    --ds-topbar-height: 70px;
    --ds-radius: 14px;
    --ds-transition: 0.25s ease;
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* =========================================================
   APP
   ========================================================= */

.ds-app {
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.07), transparent 35%),
        linear-gradient(rgba(8, 11, 18, 0.42), rgba(8, 11, 18, 0.42)),
        url("/Images/BG_Blue1.jpg") center center / cover fixed;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.ds-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ds-sidebar-width);
    background-color: #080c14;
    background-image:
        linear-gradient(rgba(8, 12, 20, 0.42), rgba(8, 12, 20, 0.42)),
        url("/Images/BG_Blue1.jpg");
    background-position: center, center;
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    border-right: 1px solid var(--ds-border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--ds-transition), transform var(--ds-transition);
}


/* =========================================================
   SIDEBAR TOP
   ========================================================= */

.ds-sidebar-top {
    padding: 0;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.ds-navigation {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-nav-item {
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.025);
    border-radius: 11px;
    background: transparent;
    color: var(--ds-text-secondary);
    text-decoration: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    transition: background var(--ds-transition), color var(--ds-transition), transform var(--ds-transition);
}

    .ds-nav-item span:first-child {
        width: 32px;
        text-align: center;
        flex-shrink: 0;
        color: var(--ds-accent);
    }

    .ds-nav-item:hover {
        background: rgba(99, 102, 241, 0.055);
        color: #c7c9f8;
        transform: translateX(2px);
        border-color: rgba(99, 102, 241, 0.10);
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.06);
    }

        .ds-nav-item:hover span:first-child {
            color: #8bd8ff;
            text-shadow: 0 0 6px rgba(109, 199, 255, 0.34);
        }


.ds-nav-item .ds-sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
}

.ds-nav-item > span:last-child {
    position: absolute;
    top: 50%;
    left: 63px;
    transform: translateY(-50%);
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    color: #cbd6e5;
    font-weight: 600;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.82),
        0 2px 3px rgba(0, 0, 0, 0.72),
        0 0 7px rgba(109, 199, 255, 0.16);
}

.ds-menu-text {
    position: absolute;
    top: 50%;
    left: 63px;
    transform: translateY(-50%);
    line-height: 1.2;
    text-align: left;
    color: #cbd6e5;
    font-weight: 600;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.28),
        0 1px 0 rgba(0, 0, 0, 0.82),
        0 2px 3px rgba(0, 0, 0, 0.72),
        0 0 7px rgba(109, 199, 255, 0.16);
}

    .ds-sidebar-nav-icon svg {
        display: block;
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */

.ds-sidebar-bottom {
    margin-top: auto;
}


/* =========================================================
   MAIN
   ========================================================= */

.ds-main {
    width: calc(100% - var(--ds-sidebar-width));
    margin-left: var(--ds-sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--ds-transition), width var(--ds-transition);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.ds-topbar {
    height: var(--ds-topbar-height);
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background-color: #07142d;
    background-image:
        linear-gradient(rgba(5, 9, 20, 0.28), rgba(5, 9, 20, 0.28)),
        url("/Images/BG_Blue1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-bottom: 1px solid var(--ds-border);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 -1px 0 rgba(110, 175, 255, 0.12), 0 6px 22px rgba(0, 0, 0, 0.22);
}

.ds-topbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ds-topbar-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.ds-page-title {
    color: var(--ds-text);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.ds-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* =========================================================
   SIDEBAR MENU BUTTON
   ========================================================= */

.ds-menu-button {
    position: relative;
    width: 100%;
    height: 46px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ds-text-secondary);
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--ds-transition), color var(--ds-transition), transform var(--ds-transition);
}

.ds-menu-icon {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-menu-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #6dc7ff;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.ds-menu-button:hover .ds-menu-icon svg {
    stroke: #8bd8ff;
    filter: drop-shadow(0 0 5px rgba(109, 199, 255, 0.36));
}

.ds-menu-text {
    white-space: nowrap;
    transition: opacity var(--ds-transition), width var(--ds-transition);
}

.ds-menu-button:hover {
    background: rgba(99, 102, 241, 0.055);
    color: #c7c9f8;
    transform: translateX(2px);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.06);
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.ds-mobile-menu-button {
    display: none;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.ds-notification-button {
    position: relative;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent !important;
    color: var(--ds-text-secondary);
    cursor: pointer;
    font-size: 17px;
    transition: background var(--ds-transition), color var(--ds-transition);
}

    .ds-notification-button:hover,
    .ds-notification-button.is-active {
        background: transparent !important;
        color: white;
    }

.ds-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-bg);
    animation: ds-pulse 2s infinite;
}

@keyframes ds-pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}


/* =========================================================
   USER
   ========================================================= */

.ds-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.ds-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ds-user-name {
    color: var(--ds-text);
    font-size: 13px;
    font-weight: 600;
}

.ds-user-status {
    margin-top: 3px;
    color: var(--ds-success);
    font-size: 11px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.ds-content {
    padding: 32px;
}


/* =========================================================
   COLLAPSED SIDEBAR - DESKTOP
   ========================================================= */

.ds-app.ds-sidebar-collapsed .ds-sidebar {
    width: var(--ds-sidebar-collapsed-width);
}

.ds-app.ds-sidebar-collapsed .ds-main {
    width: calc(100% - var(--ds-sidebar-collapsed-width));
    margin-left: var(--ds-sidebar-collapsed-width);
}

.ds-app.ds-sidebar-collapsed .ds-menu-text,
.ds-app.ds-sidebar-collapsed .ds-nav-item span:last-child {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.ds-app.ds-sidebar-collapsed .ds-nav-item {
    justify-content: center;
    grid-template-columns: 32px 0;
    gap: 0;
    padding: 0;
}

.ds-app.ds-sidebar-collapsed .ds-menu-button {
    justify-content: center;
    grid-template-columns: 32px 0;
    gap: 0;
    padding: 0;
}



/* =========================================================
   GEOSYSTEM COUNTRY SELECTOR
   ========================================================= */

.ds-geo-country-field {
    margin-top: 6px;
}

.ds-geo-select-wrap {
    position: relative;
}

.ds-geo-select-wrap::after {
    content: "⌄";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-55%);
    color: var(--ds-text-secondary);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    transition: color var(--ds-transition), transform var(--ds-transition);
}

.ds-geo-country-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 48px;
    padding: 0 48px 0 15px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018)), var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

.ds-geo-country-select:hover {
    border-color: rgba(99, 102, 241, 0.30);
    background: var(--ds-surface-hover);
}

.ds-geo-country-select:focus {
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.ds-geo-select-wrap:focus-within::after {
    color: var(--ds-primary-hover);
    transform: translateY(-55%) rotate(180deg);
}

.ds-geo-country-select option {
    background: #111722;
    color: var(--ds-text);
}

.ds-geo-country-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================
   AUTH
   ========================================================= */

.ds-auth-page {
    min-height: calc(100vh - var(--ds-topbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.ds-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 34px;
    background: linear-gradient( 145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018) );
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.35), 0 0 50px rgba(99,102,241,0.06);
    backdrop-filter: blur(16px);
}

.ds-auth-header {
    text-align: center;
    margin-bottom: 30px;
}

    .ds-auth-header h2 {
        margin: 0;
        color: var(--ds-text);
        font-size: 28px;
        font-weight: 700;
    }

    .ds-auth-header p {
        margin: 9px 0 0;
        color: var(--ds-text-secondary);
        font-size: 14px;
    }

.ds-form-group {
    margin-bottom: 20px;
}

    .ds-form-group .form-control {
        width: 100%;
    }

.ds-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

    .ds-form-check label {
        margin: 0;
    }

.ds-auth-button {
    width: 100%;
    min-height: 46px;
    font-size: 14px !important;
}

.ds-auth-footer {
    margin-top: 24px;
    padding-top: 4px;
    text-align: center;
}

.ds-register-auth-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--ds-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.ds-register-auth-footer-primary,
.ds-register-auth-footer-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
}

.ds-register-auth-footer .ds-link {
    color: var(--ds-accent);
    font-weight: 600;
}

.ds-register-auth-footer .ds-link:hover {
    color: var(--ds-primary-hover);
}

[data-ds-theme="Aurora"] .ds-register-auth-footer .ds-link {
    color: #34d399;
}

[data-ds-theme="Aurora"] .ds-register-auth-footer .ds-link:hover {
    color: #6ee7b7;
}


/* =========================================================
   RIDE REQUEST FORM
   ========================================================= */

.ds-ride-request-card {
    max-width: 520px;
    padding: 30px;
    margin: 0;
}

.ds-ride-request-header {
    margin-bottom: 24px;
}

.ds-ride-request-header h2 {
    font-size: 24px;
}

.ds-ride-request-form {
    gap: 18px;
}

.ds-ride-request-form .field {
    margin: 0;
}

.ds-ride-request-form .field label {
    display: block;
    margin-bottom: 7px;
}

.ds-ride-request-form .field input,
.ds-ride-request-form .field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
}

.ds-ride-request-form .field select {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
}

.ds-ride-request-form .field select:focus {
    background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(124,58,237,.08)) !important;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

/* =========================================================
   PICKUP DATE / TIME PICKER
   ========================================================= */

.pickup-datetime-field {
    position: relative;
}

.pickup-datetime-picker {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.pickup-datetime-picker:hover {
    border-color: rgba(129,140,248,.42);
}

.pickup-datetime-picker:focus-within {
    border-color: var(--ds-primary);
    background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.10));
    box-shadow: 0 0 0 3px rgba(99,102,241,.13), 0 12px 26px rgba(0,0,0,.12);
}

.pickup-datetime-icon {
    display: grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    color: var(--ds-primary);
    border-right: 1px solid rgba(255,255,255,.07);
}

.pickup-datetime-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pickup-datetime-input {
    width: 100%;
    min-height: 50px !important;
    padding: 11px 14px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    color-scheme: dark;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
}

.pickup-datetime-input::-webkit-calendar-picker-indicator {
    opacity: .8;
    cursor: pointer;
    filter: invert(1);
}

.pickup-datetime-hint {
    margin-top: 6px;
    color: var(--ds-text-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

/* =========================================================
   GENERIC PICKER CONTROL
   Reusable for date, time, datetime-local and future pickers.
   Keep picker appearance in the Design System, not individual views.
   ========================================================= */

.ds-picker-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.ds-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.ds-picker-label {
    margin: 0;
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-picker {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 50px;
    overflow: visible;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.06)) !important;
    box-shadow: none !important;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

.ds-picker:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 42%, var(--ds-border)) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(124,58,237,.08)) !important;
    box-shadow: none !important;
}

.ds-picker:focus-within {
    border-color: var(--ds-primary) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.10)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-picker-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 50px 10px 12px;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color-scheme: dark;
}

.ds-picker-input::placeholder {
    color: var(--ds-text-muted);
}

.ds-picker-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
}

/* Reusable 24-hour time picker. The popup inherits the same visual language as ds-select. */
.ds-time-picker {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
}

.ds-picker-native-date {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ds-picker:not(.ds-time-picker) {
    overflow: visible;
}

.ds-picker-input[readonly] {
    cursor: pointer;
}

.ds-date-picker-popover {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    z-index: 1250;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: 0 16px 36px var(--ds-shadow-color), 0 0 24px color-mix(in srgb, var(--ds-accent) 6%, transparent);
    backdrop-filter: blur(16px);
}

.ds-date-picker-popover:not(.is-open) {
    display: none;
}

.ds-date-picker-header {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.ds-date-picker-title {
    text-align: center;
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 700;
}

.ds-date-picker-nav {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    background: transparent;
    color: var(--ds-accent);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ds-date-picker-nav:hover,
.ds-date-picker-nav:focus-visible {
    background: var(--ds-accent-soft);
    border-color: color-mix(in srgb, var(--ds-accent) 35%, var(--ds-border));
    outline: none;
}

.ds-date-picker-weekdays,
.ds-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.ds-date-picker-weekdays {
    margin-bottom: 5px;
}

.ds-date-picker-weekdays > div {
    padding: 4px 0;
    color: var(--ds-text-muted);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.ds-date-picker-day {
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ds-date-picker-day:hover:not(:disabled) {
    background: var(--ds-accent-soft);
    border-color: color-mix(in srgb, var(--ds-accent) 22%, var(--ds-border));
}

.ds-date-picker-day.is-today {
    border-color: color-mix(in srgb, var(--ds-accent) 32%, var(--ds-border));
}

.ds-date-picker-day.is-selected {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ds-primary) 34%, transparent), color-mix(in srgb, var(--ds-accent) 24%, transparent));
    border-color: color-mix(in srgb, var(--ds-accent) 48%, var(--ds-border));
    color: var(--ds-text);
}

.ds-date-picker-day:disabled {
    color: rgba(255,255,255,.24);
    cursor: not-allowed;
}

.ds-date-picker-day.is-empty {
    pointer-events: none;
}

@media (max-width: 520px) {
    .ds-date-picker-popover {
        width: 100%;
    }
}


.ds-time-picker-popover {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    z-index: 1250;
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    width: 100%;
    grid-template-columns: minmax(88px, 1fr) minmax(88px, 1fr);
    gap: 10px;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: 0 16px 36px var(--ds-shadow-color), 0 0 24px color-mix(in srgb, var(--ds-accent) 6%, transparent);
    backdrop-filter: blur(16px);
}

.ds-time-picker.is-open .ds-time-picker-popover {
    display: grid;
}

.ds-time-picker-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-time-picker-inline-label {
    padding: 0 4px;
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ds-time-picker-panel-label {
    padding: 0 4px;
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ds-time-picker-select {
    width: 100%;
    min-height: 40px;
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-text) 4.5%, transparent), color-mix(in srgb, var(--ds-text) 2%, transparent)), var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.ds-time-picker-select-wrap {
    position: relative;
}

.ds-time-picker-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ds-accent);
    transform: translateY(-30%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-accent) 35%, transparent));
    pointer-events: none;
}

.ds-time-picker-select:focus {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.13);
}

.ds-time-picker-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.ds-time-picker-action {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ds-time-picker-action:hover,
.ds-time-picker-action:focus-visible {
    border-color: color-mix(in srgb, var(--ds-accent) 35%, var(--ds-border));
    color: var(--ds-accent);
    outline: none;
}

@media (max-width: 520px) {
    .ds-time-picker-popover {
        width: 100%;
        min-width: 0;
    }
}

.ds-picker-button {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ds-accent);
    cursor: pointer;
    opacity: .88;
    transition: background var(--ds-transition), color var(--ds-transition), opacity var(--ds-transition), transform .12s ease;
}

.ds-picker-button:hover,
.ds-picker-button:focus-visible {
    background: var(--ds-accent-soft);
    color: var(--ds-primary-hover);
    opacity: 1;
    outline: none;
}

.ds-picker-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.ds-picker-button:active {
    transform: translateY(-50%) scale(.96);
}

.ds-picker-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.ds-picker-hint {
    margin-top: 7px;
    color: var(--ds-text-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.ds-picker:has(.ds-picker-input:disabled) {
    opacity: .58;
}

@media (max-width: 520px) {
    .ds-picker-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .ds-picker-label {
        font-size: 13px;
    }

    .ds-picker-input {
        min-height: 46px;
        padding-left: 12px;
    }

    .ds-picker-hint {
        margin-left: 0;
    }
}

/* =========================================================
   CARDS
   ========================================================= */

.ds-card {
    background: linear-gradient( 145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018) ) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    color: var(--ds-text);
    box-shadow: 0 15px 45px rgba(0,0,0,0.22);
    backdrop-filter: blur(12px);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ds-button {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 11px !important;
    padding: 10px 18px !important;
    min-height: 42px;
    font-size: 14px !important;
    font-weight: 750 !important;
    font-family: inherit;
    border: 1px solid rgba(228, 233, 238, 0.82) !important;
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(50,58,66,0.22) !important;
    transform: none !important;
    cursor: pointer !important;
    transition:
        box-shadow var(--ds-transition),
        border-color var(--ds-transition);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30),
        0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

.ds-button:hover {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    transform: none !important;
    cursor: pointer !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(109, 199, 255, 0.34),
        0 0 5px rgba(255, 255, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(65, 72, 80, 0.16) !important;
}

.ds-button:active {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    transform: none !important;
    cursor: pointer !important;
    box-shadow:
        0 0 24px rgba(109, 199, 255, 0.42),
        0 0 8px rgba(255, 255, 255, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(65, 72, 80, 0.16) !important;
}

.ds-button:focus-visible {
    outline: 2px solid rgba(214, 220, 226, 0.90);
    outline-offset: 2px;
}

.btn-primary.ds-button,
.btn-secondary.ds-button,
.btn-success.ds-button,
.btn-danger.ds-button,
.btn-warning.ds-button,
.btn-info.ds-button,
.btn-light.ds-button,
.btn-dark.ds-button {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(247, 249, 252, 0.88) !important;
    font-weight: 750 !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30),
        0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

.btn-primary.ds-button:hover,
.btn-secondary.ds-button:hover,
.btn-success.ds-button:hover,
.btn-danger.ds-button:hover,
.btn-warning.ds-button:hover,
.btn-info.ds-button:hover,
.btn-light.ds-button:hover,
.btn-dark.ds-button:hover {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

.ds-input,
.form-control {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    color: var(--ds-text) !important;
    min-height: 44px;
}

    .ds-input:focus,
    .form-control:focus {
        background: color-mix(in srgb, var(--ds-surface-hover) 88%, transparent) !important;
        border-color: var(--ds-primary) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
    }

.ds-auth-page .ds-auth-card .ds-form-group .form-control,
.ds-profile-card .ds-input,
.ds-profile-card .form-control {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--ds-border) !important;
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}

.ds-auth-page .ds-auth-card .ds-form-group .form-control:focus,
.ds-profile-card .ds-input:focus,
.ds-profile-card .form-control:focus {
    border-color: var(--ds-border) !important;
    outline: none;
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}


/* =========================================================
   SELECT CONTROLS
   ========================================================= */

.ds-select {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Keep the original select for ASP.NET model binding/form submission.
   The visible control is rendered by the design-system dropdown. */
.ds-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ds-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 10px 46px 10px 12px;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.06));
    color: var(--ds-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

.ds-select-trigger::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--ds-accent);
    transform: translateY(-35%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-accent) 40%, transparent));
    transition: transform var(--ds-transition), filter var(--ds-transition);
    pointer-events: none;
}

.ds-select:hover .ds-select-trigger {
    border-color: color-mix(in srgb, var(--ds-accent) 42%, var(--ds-border)) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(124,58,237,.08)) !important;
}

.ds-select-trigger:focus,
.ds-select.is-open .ds-select-trigger {
    border-color: var(--ds-primary) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.10)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-select.is-open .ds-select-trigger::after {
    transform: translateY(-65%) rotate(180deg);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ds-accent) 55%, transparent));
}

.ds-select-text {
    overflow: hidden;
    width: 100%;
    color: var(--ds-text);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-select-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: 0 16px 36px var(--ds-shadow-color), 0 0 24px color-mix(in srgb, var(--ds-accent) 6%, transparent);
    backdrop-filter: blur(16px);
}

.ds-select.is-open .ds-select-menu {
    display: block;
    position: static;
    flex: 0 0 auto;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 7px;
}

.ds-select-option {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color 120ms ease, text-shadow 120ms ease;
}

/* Hover/selection changes the text only: no blue selection rectangle. */
.ds-select-option:hover,
.ds-select-option:focus-visible,
.ds-select-option.is-selected {
    background: transparent;
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 34%, transparent), 0 0 1px color-mix(in srgb, var(--ds-text) 60%, transparent);
    outline: none;
}

.ds-select-option:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    text-shadow: none;
}

.ds-select.is-disabled {
    opacity: 0.55;
}

.ds-select.is-disabled .ds-select-trigger {
    cursor: not-allowed;
}

.ds-ride-request-form .field select {
    padding-right: 42px;
}

@media (max-width: 650px) {
    .ds-select-trigger {
        min-height: 50px;
        padding-right: 44px;
    }
}

/* Vehicle image selector: use the same flow/anchor model as ds-picker (Date/Time). */
.ds-vehicle-picker {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 50px;
    overflow: visible;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.06)) !important;
    box-shadow: none !important;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

.ds-vehicle-picker:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background: color-mix(in srgb, var(--ds-surface-hover) 88%, transparent) !important;
}

.ds-vehicle-picker:focus-within,
.ds-vehicle-picker.is-open {
    border-color: var(--ds-primary) !important;
    background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.10)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-vehicle-picker .ds-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ds-vehicle-picker .ds-select-trigger {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 24px;
    align-items: center;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    padding: 8px 12px 8px 10px;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

.ds-vehicle-picker .ds-select-trigger:focus,
.ds-vehicle-picker.is-open .ds-select-trigger {
    border: 0 !important;
    box-shadow: none !important;
}

.ds-vehicle-picker .ds-select-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.ds-vehicle-picker .ds-select-selected-image {
    width: 72px;
    height: 42px;
    justify-self: center;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    filter: none !important;
}

.ds-vehicle-picker .ds-select-menu {
    position: absolute !important;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: none;
    margin-top: 0;
    padding: 7px;
    max-height: none;
    overflow: visible;
    border-radius: 12px;
}

.ds-vehicle-picker.is-open .ds-select-menu {
    display: block;
}

.ds-vehicle-picker .ds-select-option {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    width: 100%;
    min-height: 74px;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: left;
}

.ds-vehicle-picker .ds-select-option + .ds-select-option {
    margin-top: 4px;
}

.ds-vehicle-picker .ds-select-option-image {
    width: 118px;
    height: 62px;
    justify-self: center;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    background: transparent !important;
    filter: none !important;
}

.ds-vehicle-picker .ds-select-option-text {
    min-width: 0;
    width: 100%;
    align-self: center;
    justify-self: stretch;
    color: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.ds-vehicle-picker .ds-select-option:hover,
.ds-vehicle-picker .ds-select-option:focus-visible,
.ds-vehicle-picker .ds-select-option.is-selected {
    background: rgba(74, 222, 128, 0.08);
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 24%, transparent);
}

@media (max-width: 650px) {
    .ds-vehicle-picker .ds-select-trigger {
        grid-template-columns: 70px minmax(0, 1fr) 24px;
        min-height: 52px;
        column-gap: 10px;
        padding: 7px 10px;
    }

    .ds-vehicle-picker .ds-select-selected-image {
        width: 62px;
        height: 36px;
    }

    .ds-vehicle-picker .ds-select-option {
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 16px;
        min-height: 66px;
        padding: 7px 8px;
    }

    .ds-vehicle-picker .ds-select-option-image {
        width: 96px;
        height: 52px;
    }
}

/* =========================================================
   LABELS
   ========================================================= */

label,
.form-label {
    color: var(--ds-text-secondary);
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   LINKS
   ========================================================= */

.ds-link,
.ds-content a:not(.btn) {
    color: #818cf8;
    text-decoration: none;
}

    .ds-link:hover,
    .ds-content a:not(.btn):hover {
        color: #a5b4fc;
        text-decoration: none;
    }

/* =========================================================
   PROFILE
   ========================================================= */

.ds-profile-page {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.ds-profile-header {
    margin-bottom: 28px;
}

    .ds-profile-header h1 {
        margin: 0;
        color: var(--ds-text);
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .ds-profile-header p {
        margin: 8px 0 0;
        color: var(--ds-text-secondary);
        font-size: 14px;
    }

.ds-profile-card {
    padding: 28px;
    margin-bottom: 18px;
}

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

.ds-profile-card-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ds-profile-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    font-size: 20px;
}

.ds-profile-card-title h2 {
    margin: 0;
    color: var(--ds-text);
    font-size: 19px;
    font-weight: 650;
}

.ds-profile-card-title p {
    margin: 4px 0 0;
    color: var(--ds-text-muted);
    font-size: 12px;
}

/* PROFILE FIELDS */

.ds-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ds-profile-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ds-profile-field-full {
    grid-column: 1 / -1;
}

.ds-profile-field-label {
    color: var(--ds-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.ds-profile-field-value {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--ds-text);
    font-size: 14px;
}

/* ROLE APPLICATIONS */

.ds-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-profile-role-button {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 20px;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) );
    color: var(--ds-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--ds-transition), border-color var(--ds-transition), transform var(--ds-transition), box-shadow var(--ds-transition);
}

    .ds-profile-role-button:hover {
        transform: translateY(-1px);
        background: rgba(99, 102, 241, 0.06);
        border-color: rgba(99, 102, 241, 0.25);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    }

.ds-profile-role-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ds-profile-role-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.10);
    color: #a5b4fc;
    font-size: 18px;
}

.ds-profile-role-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ds-profile-role-title {
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 650;
}

.ds-profile-role-description {
    color: var(--ds-text-muted);
    font-size: 12px;
}

.ds-profile-role-arrow {
    color: var(--ds-text-muted);
    font-size: 18px;
    transition: transform var(--ds-transition), color var(--ds-transition);
}

.ds-profile-role-button.is-open .ds-profile-role-arrow {
    transform: rotate(180deg);
    color: #a5b4fc;
}

/* COLLAPSIBLE ROLE FORM */

.ds-profile-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.2s ease;
}

    .ds-profile-collapse.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
    }

.ds-profile-collapse-inner {
    overflow: hidden;
}

.ds-profile-form {
    margin-top: 14px;
    padding: 24px;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.018);
}

.ds-profile-form-header {
    margin-bottom: 22px;
}

    .ds-profile-form-header h3 {
        margin: 0;
        color: var(--ds-text);
        font-size: 17px;
        font-weight: 650;
    }

    .ds-profile-form-header p {
        margin: 5px 0 0;
        color: var(--ds-text-secondary);
        font-size: 12px;
    }

.ds-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ds-border);
}

/* ============================================================
   PROFILE - CARS
   ============================================================ */

.ds-profile-cars {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-profile-cars-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

    .ds-profile-cars-header h3 {
        margin: 0 0 5px 0;
    }

    .ds-profile-cars-header p {
        margin: 0;
        opacity: 0.7;
    }

.ds-profile-car-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ds-profile-car-card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.ds-profile-car-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ds-profile-car-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 24px;
    flex-shrink: 0;
}

.ds-profile-car-title h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.ds-profile-car-title span {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.65;
}

.ds-profile-car-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.ds-profile-car-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ds-profile-car-detail span {
        font-size: 12px;
        opacity: 0.6;
    }

    .ds-profile-car-detail strong {
        font-size: 14px;
    }

.ds-profile-car-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

    .ds-profile-car-actions form {
        margin: 0;
    }

.ds-profile-cars-empty {
    padding: 35px 20px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.ds-profile-cars-empty-icon {
    font-size: 38px;
    margin-bottom: 10px;
}

.ds-profile-cars-empty h4 {
    margin: 0 0 8px 0;
}

.ds-profile-cars-empty p {
    margin: 0 0 20px 0;
    opacity: 0.65;
}


/* =========================================================
   CUSTOMER / VISITOR DASHBOARD
   ========================================================= */

.customer-dashboard,
.visitor-dashboard {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.customer-hero {
    margin-bottom: 28px;
}

.customer-hero h1 {
    margin: 0 0 8px;
    color: var(--ds-text);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -.6px;
}

.customer-hero p {
    margin: 0;
    color: var(--ds-text-secondary);
    line-height: 1.6;
}

.customer-layout {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.4fr);
    gap: 20px;
    align-items: start;
}

.customer-card {
    padding: 22px;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.customer-card h2 {
    margin: 0 0 6px;
    color: var(--ds-text);
    font-size: 21px;
    font-weight: 650;
}

.customer-muted {
    margin-bottom: 18px;
    color: var(--ds-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.customer-form {
    display: grid;
    gap: 14px;
}

.customer-form .field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ds-text-muted);
    font-size: 12px;
}

.customer-form .field input,
.customer-form .field select {
    width: 100%;
    box-sizing: border-box;
}


/* GeoSystem address autocomplete */
.geo-system-wrapper {
    position: relative;
    z-index: 1;
}

/* Keep the pickup autocomplete above the following form row. */
.geo-system-wrapper:focus-within {
    z-index: 30;
}

.geo-system-suggestions {
    position: relative;
    z-index: 10;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 4px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: 0 18px 36px rgba(0,0,0,.28);
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
}


.geo-system-suggestions[hidden] {
    display: none !important;
}

.geo-system-suggestion {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.geo-system-suggestion:hover,
.geo-system-suggestion.is-active {
    background: var(--ds-surface-hover);
}

.geo-system-suggestion-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 650;
}

.geo-system-suggestion-meta {
    color: var(--ds-text-muted);
    font-size: 11px;
}

.customer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.customer-submit-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 11px 16px;
    color: var(--ds-text-secondary);
    background: rgba(255,255,255,.025);
    text-decoration: none;
    font-weight: 650;
    transition: background var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition);
}

.customer-submit-secondary:hover {
    color: var(--ds-text);
    border-color: rgba(99,102,241,.2);
    background: rgba(99,102,241,.06);
}

.rides {
    display: grid;
    gap: 16px;
}

.ride-card {
    padding: 20px;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
}

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

.ride-id {
    margin-bottom: 5px;
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ride-status {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: var(--ds-text-secondary);
    font-size: 12px;
}

.route-line {
    margin: 15px 0;
    color: var(--ds-text);
    font-size: 15px;
}

.route-line strong {
    display: block;
    margin: 5px 0;
}

.route-arrow {
    color: var(--ds-text-muted);
}

.offers-title {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.offer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.offer:last-child {
    border-bottom: 0;
}

.offer-name {
    color: var(--ds-text);
    font-weight: 700;
}

.offer-car {
    margin-top: 4px;
    color: var(--ds-text-muted);
    font-size: 12px;
}

.offer-price {
    color: var(--ds-text);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.accept-button {
    border: 0;
    border-radius: 10px;
    padding: 9px 13px;
    background: var(--ds-success);
    color: #08130e;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.offer-badge {
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,193,7,.1);
    color: var(--ds-text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.visitor-intro-card {
    min-height: 100%;
    box-sizing: border-box;
}

.visitor-flow {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.visitor-flow-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.visitor-flow-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(99,102,241,.08);
    color: #a5b4fc;
    font-weight: 800;
}

.visitor-flow-title {
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 700;
}

.visitor-flow-text {
    margin-top: 3px;
    color: var(--ds-text-muted);
    font-size: 12px;
    line-height: 1.4;
}



.dashboard-spacer { height: 16px; }
.customer-ride-meta { color: var(--ds-text-muted); font-size: 13px; }
.empty-compact { margin-top: 12px; }

.customer-alert,
.visitor-alert,
.dashboard-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid rgba(34,197,94,.18);
    border-radius: 14px;
    background: rgba(34,197,94,.08);
    color: var(--ds-text);
}

/* =========================================================
   DRIVER DASHBOARD / LIMO BID
   ========================================================= */

.driver-dashboard {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.driver-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.driver-eyebrow {
    margin-bottom: 8px;
    color: var(--ds-text-muted);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.driver-hero h1 {
    margin: 0 0 8px;
    color: var(--ds-text);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.6px;
}

.driver-hero p {
    margin: 0;
    color: var(--ds-text-secondary);
    line-height: 1.6;
}

.driver-online {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(99, 102, 241, .16);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: var(--ds-text-secondary);
    white-space: nowrap;
}

.driver-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ds-success);
    box-shadow: 0 0 16px rgba(34, 197, 94, .45);
}

.driver-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.driver-card {
    min-height: 118px;
    padding: 20px;
}

.driver-stat-label {
    color: var(--ds-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.driver-stat-value {
    margin-top: 8px;
    color: var(--ds-text);
    font-size: 30px;
    font-weight: 700;
}

.driver-section {
    margin-bottom: 28px;
}

.driver-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 14px;
}

.driver-section-head h2 {
    margin: 0;
    color: var(--ds-text);
    font-size: 21px;
    font-weight: 650;
}

.driver-section-head span {
    color: var(--ds-text-muted);
    font-size: 13px;
}

.request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.request-card {
    padding: 20px;
    border: 1px solid var(--ds-border);
    background: rgba(255,255,255,.025);
    border-radius: var(--ds-radius);
    box-shadow: 0 15px 45px rgba(0,0,0,.14);
}

.request-card:hover {
    border-color: rgba(99,102,241,.18);
}

.request-top,
.offer-current,
.notice {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.request-top {
    align-items: flex-start;
}

.request-id {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.request-id-label {
    color: var(--ds-text);
    text-transform: none;
}

.request-id-value {
    color: var(--ds-control-accent, var(--ds-accent));
    text-transform: none;
    text-shadow: 0 0 6px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 28%, transparent);
}

.request-status {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255,193,7,.12);
    border-radius: 999px;
    background: rgba(255,193,7,.08);
    color: #f6d675;
    font-size: 12px;
}

.route {
    margin: 14px 0 18px;
}

.route-actions {
    display: flex;
    justify-content: flex-start;
    margin: -6px 0 4px;
}

.driver-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 15px !important;
    text-decoration: none;
}

.driver-map-button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: currentColor !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.22)) drop-shadow(0 -1px 0 rgba(0,0,0,0.14));
}

.route-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 10px 0;
}

.route-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #a5b4fc;
}

.route-label {
    display: block;
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.route-value {
    display: block;
    margin-top: 3px;
    color: var(--ds-text);
    font-size: 15px;
    line-height: 1.45;
}

.request-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
    color: var(--ds-text-secondary);
    font-size: 13px;
}

.offer-box {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-border);
}

.offer-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.offer-form > div {
    flex: 1;
}

.offer-form label {
    display: block;
    margin-bottom: 6px;
}

.offer-input {
    width: 100%;
}

.offer-button,
.confirm-button {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    font: inherit;
    font-weight: 750 !important;
    white-space: nowrap;
}

.offer-price {
    color: var(--ds-text);
    font-size: 24px;
    font-weight: 700;
}

.offer-hint {
    color: var(--ds-text-muted);
    font-size: 13px;
}

.confirm-card {
    border-color: rgba(34,197,94,.28);
    background: linear-gradient(180deg, rgba(34,197,94,.06), rgba(255,255,255,.018));
}

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

.notice {
    align-items: flex-start;
    padding: 15px 16px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.notice.unread {
    border-color: rgba(99,102,241,.28);
    background: rgba(99,102,241,.045);
}

.notice-message {
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.5;
}

.notice-date {
    flex-shrink: 0;
    color: var(--ds-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.notice-actions {
    margin-top: 12px;
}

.empty {
    padding: 30px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 16px;
    color: var(--ds-text-secondary);
    text-align: center;
}

.dashboard-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid rgba(34,197,94,.18);
    border-radius: 14px;
    background: rgba(34,197,94,.08);
    color: var(--ds-text);
}


/* =========================================================
   GEOSYSTEM IMPORT
   ========================================================= */

.ds-geo-import-card {
    max-width: 760px;
}

.ds-geo-progress {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ds-border);
}

.ds-geo-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: var(--ds-text);
}

.ds-geo-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.ds-geo-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #7c3aed);
    transition: width .25s ease;
}

.ds-geo-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.ds-geo-stat {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.ds-geo-stat span {
    display: block;
    margin-bottom: 4px;
    color: var(--ds-text-muted);
    font-size: 12px;
}

.ds-geo-stat strong {
    display: block;
    overflow: hidden;
    color: var(--ds-text);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-geo-progress-note {
    margin: 16px 0 0;
    color: var(--ds-text-secondary);
    font-size: 13px;
}

.ds-geo-progress-error {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(239,68,68,.25);
    border-radius: 10px;
    background: rgba(239,68,68,.08);
    color: var(--ds-text);
}

/* Customer Dashboard date/time controls use the exact same outer field styling
   as Vehicle Type / Minimum Seats. Picker internals remain unchanged. */
.ds-ride-request-form .ds-picker-row .ds-picker-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-ride-request-form .ds-picker-row .ds-picker {
    width: 100%;
    min-height: 44px !important;
    padding: 0 !important;
    box-sizing: border-box;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.035) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-picker-row .ds-picker:hover {
    border-color: rgba(99,102,241,0.30) !important;
    background: var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-picker-row .ds-picker:focus-within {
    border-color: rgba(99,102,241,0.65) !important;
    background: color-mix(in srgb, var(--ds-surface-hover) 88%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-ride-request-form .ds-picker-row .ds-picker-input {
    min-height: 44px !important;
    padding: 10px 50px 10px 12px !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-picker-row .ds-picker-button {
    color: #6dc7ff !important;
}

/* Keep the calendar/time popup design exactly as before. */
'.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover {
    min-height: 0 !important;
}

/* Match Date/Time popover surfaces to the Customer select menu exactly.
   Keep the Date and Time components separate; only the popup surface contract
   is shared. */
.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    color: var(--ds-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}

/* =========================================================
   CUSTOMER DASHBOARD - DATE/TIME OUTER CONTROL
   Match the exact visible geometry/theme of .ds-select-trigger.
   The date/time popovers below remain unchanged.
   ========================================================= */

.ds-ride-request-form .pickup-datetime-field .ds-picker-row {
    display: block;
    width: 100%;
    margin: 0;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-label {
    display: block;
    margin: 0 0 7px 0;
    color: var(--ds-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 44px !important;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

.ds-ride-request-form .pickup-datetime-field .ds-picker:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker:focus-within {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 10px 46px 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: none !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    box-shadow: none !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-input::placeholder {
    color: var(--ds-text) !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button {
    right: 7px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    color: var(--ds-accent);
    opacity: .88;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button:hover,
.ds-ride-request-form .pickup-datetime-field .ds-picker-button:focus-visible {
    background: var(--ds-accent-soft);
    color: var(--ds-primary-hover);
    opacity: 1;
}

@media (max-width: 650px) {
    .ds-ride-request-form .pickup-datetime-field .ds-picker-row {
        display: block;
    }

    .ds-ride-request-form .pickup-datetime-field .ds-picker-input,
    .ds-ride-request-form .pickup-datetime-field .ds-picker {
        min-height: 46px;

    }
}

/* =========================================================
   CUSTOMER DASHBOARD - TEXTBOXES
   Same visual language as Login/Register controls.
   Scoped so existing pages/components are not changed.
   ========================================================= */

.ds-ride-request-form input[type="text"],
.ds-ride-request-form input[type="email"],
.ds-ride-request-form input[type="tel"],
.ds-ride-request-form input[type="number"],
.ds-ride-request-form input[type="password"],
.ds-ride-request-form textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        var(--ds-surface) !important;
    color: var(--ds-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
    transition:
        border-color var(--ds-transition),
        box-shadow var(--ds-transition),
        background var(--ds-transition);
}

.ds-ride-request-form textarea {
    min-height: 96px;
    resize: vertical;
}

.ds-ride-request-form input[type="text"]::placeholder,
.ds-ride-request-form input[type="email"]::placeholder,
.ds-ride-request-form input[type="tel"]::placeholder,
.ds-ride-request-form input[type="number"]::placeholder,
.ds-ride-request-form input[type="password"]::placeholder,
.ds-ride-request-form textarea::placeholder {
    color: var(--ds-text-secondary) !important;
    opacity: 0.86;
}

.ds-ride-request-form input[type="text"]:hover,
.ds-ride-request-form input[type="email"]:hover,
.ds-ride-request-form input[type="tel"]:hover,
.ds-ride-request-form input[type="number"]:hover,
.ds-ride-request-form input[type="password"]:hover,
.ds-ride-request-form textarea:hover {
    border-color: rgba(165,180,252,0.40) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        var(--ds-surface-hover) !important;
}

.ds-ride-request-form input[type="text"]:focus,
.ds-ride-request-form input[type="email"]:focus,
.ds-ride-request-form input[type="tel"]:focus,
.ds-ride-request-form input[type="number"]:focus,
.ds-ride-request-form input[type="password"]:focus,
.ds-ride-request-form textarea:focus {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        var(--ds-surface-hover) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.13),
        0 6px 18px rgba(0,0,0,0.12) !important;
}

.visitor-dashboard .customer-layout .ds-ride-request-form #pickupLocation,
.visitor-dashboard .customer-layout .ds-ride-request-form #destination {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: text;
    caret-color: var(--ds-text);
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}

.visitor-dashboard .customer-layout .ds-ride-request-form #pickupLocation:focus,
.visitor-dashboard .customer-layout .ds-ride-request-form #destination:focus {
    border-color: var(--ds-border) !important;
    outline: none;
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}

.ds-ride-request-form input:disabled,
.ds-ride-request-form textarea:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

/* =========================================================
   DRIVER DASHBOARD - OFFER INPUT
   Same textbox visual language as Customer request form.
   Only appearance is changed; numeric behavior is untouched.
   ========================================================= */

.driver-dashboard .offer-form .offer-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 11px 13px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        var(--ds-surface) !important;
    color: var(--ds-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
    transition:
        border-color var(--ds-transition),
        box-shadow var(--ds-transition),
        background var(--ds-transition);
}

.driver-dashboard .offer-form .offer-input::placeholder {
    color: var(--ds-text-secondary) !important;
    opacity: 0.86;
}

.driver-dashboard .offer-form .offer-input:hover {
    border-color: rgba(165,180,252,0.40) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        var(--ds-surface-hover) !important;
}

.driver-dashboard .offer-form .offer-input:focus {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        var(--ds-surface-hover) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.13),
        0 6px 18px rgba(0,0,0,0.12) !important;
}

/* Keep Chrome/Edge number controls subtle and aligned with the theme. */
.driver-dashboard .offer-form .offer-input::-webkit-outer-spin-button,
.driver-dashboard .offer-form .offer-input::-webkit-inner-spin-button {
    margin: 0;
}

@media (max-width: 650px) {
    .driver-dashboard .offer-form .offer-input {
        min-height: 46px;
        height: 46px;
    }
}


/* Remove the browser's native square spinner. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

/* Custom arrows: same accent as the DesignSystem select arrows. */
.ds-number-spinner {
    position: relative;
}

.ds-number-spinner::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 12px;
    height: 24px;
    transform: translateY(-50%);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 24px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cpath d='M1 9.5L6 4l5 5.5Z' fill='%236dc7ff'/%3E%3Cpath d='M1 14.5L6 20l5-5.5Z' fill='%236dc7ff'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 3px rgba(109,199,255,0.34));
    opacity: .94;
    z-index: 2;
    cursor: ns-resize;
}

.ds-number-spinner:hover::after {
    filter: drop-shadow(0 0 5px rgba(109,199,255,0.50));
    opacity: 1;
}

.ds-number-spinner:focus-within::after {
    filter: drop-shadow(0 0 5px rgba(109,199,255,0.55));
}

@media (max-width: 650px) {
    .ds-number-spinner::after {
        right: 11px;
    }
}

/* =========================================================
   DESIGNSYSTEM - NUMBER INPUT SPINNER
   Shared visual spinner. Textbox appearance is untouched.
   ========================================================= */

.ds-number-spinner-wrap {
    position: relative;
    width: 100%;
}

.ds-number-spinner-wrap > input[type="number"] {
    width: 100%;
}

.ds-number-spinner-controls {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 22px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    z-index: 3;
}

.ds-number-spinner-button {
    width: 22px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 5px;
    background: transparent !important;
    color: #6dc7ff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(109,199,255,0.42);
    cursor: pointer !important;
    pointer-events: auto;
    transition: color 120ms ease, text-shadow 120ms ease, background 120ms ease;
}

.ds-number-spinner-button:hover,
.ds-number-spinner-button:focus-visible {
    color: #6dc7ff !important;
    background: rgba(109,199,255,0.08) !important;
    text-shadow: 0 0 7px rgba(109,199,255,0.62);
    outline: none;
}

.ds-number-spinner-button:active {
    color: #6dc7ff !important;
    text-shadow: 0 0 9px rgba(109,199,255,0.78);
}

.ds-number-spinner-input {
    padding-right: 38px !important;
}

@media (max-width: 650px) {
    .ds-number-spinner-controls {
        right: 7px;
    }

    .ds-number-spinner-button {
        width: 22px;
    }
}
.ds-card,
.ds-auth-card,
.customer-card,
.driver-card,
.request-card,
.ride-card,
.message-card,
.language-settings-card {
    border-color: rgba(160, 200, 255, 0.2) !important;
    position: relative;
    isolation: isolate;
    background: rgba(16, 23, 34, 0.05) !important;
    -webkit-backdrop-filter: blur(2px) saturate(115%);
    backdrop-filter: blur(2px) saturate(115%);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(160, 200, 255, 0.12),
        0 0 26px rgba(55, 125, 235, 0.14),
        inset 0 2px 0 rgba(255, 255, 255, 0.24),
        inset 0 -2px 5px rgba(0, 0, 0, 0.3);
}

.ds-card::before,
.ds-auth-card::before,
.customer-card::before,
.driver-card::before,
.request-card::before,
.ride-card::before,
.message-card::before,
.language-settings-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
}

.ds-card:hover,
.customer-card:hover,
.driver-card:hover,
.request-card:hover,
.ride-card:hover,
.message-card:hover,
.language-settings-card:hover {
    background: rgba(16, 23, 34, 0.09) !important;
    border-color: rgba(160, 200, 255, 0.21) !important;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(180, 215, 255, 0.17),
        0 0 32px rgba(65, 140, 255, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.36);
}

.ds-card:hover::before,
.customer-card:hover::before,
.driver-card:hover::before,
.request-card:hover::before,
.ride-card:hover::before,
.message-card:hover::before,
.language-settings-card:hover::before {
    background: transparent;
}

.message-card.is-unread::before {
    background: linear-gradient(100deg, rgba(65, 140, 255, 0.08), transparent 72%);
}



/* =========================================================
   DESIGN SYSTEM THEMES
   Theme switching is token-based. Components keep the same
   semantic classes and inherit the selected theme.
   ========================================================= */

:root {
    --ds-accent: #6dc7ff;
    --ds-accent-soft: rgba(109, 199, 255, 0.12);
    --ds-focus: var(--ds-primary);
    --ds-app-background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.07), transparent 35%),
        linear-gradient(rgba(8, 11, 18, 0.42), rgba(8, 11, 18, 0.42)),
        url("/Images/BG_Blue1.jpg") center center / cover fixed;
    --ds-sidebar-background:
        linear-gradient(rgba(8, 12, 20, 0.42), rgba(8, 12, 20, 0.42)),
        url("/Images/BG_Blue1.jpg") center center / 100% 100% no-repeat;
    --ds-shadow-color: rgba(0, 0, 0, 0.42);
}

[data-ds-theme="Midnight"] {
    --ds-accent: #6dc7ff;
    --ds-accent-soft: rgba(109, 199, 255, 0.12);
}

/* Theme-aware form surfaces used by reusable pickers/selects. */

/* Midnight: shared form selector surface */
.ds-select-trigger,
.ds-select.is-open .ds-select-menu {
    background: linear-gradient(
        180deg,
        #1b3152 0%,
        #182a45 48%,
        var(--ds-control-surface, var(--ds-surface)) 100%
    ) !important;
}

[data-ds-theme="Midnight"],
[data-ds-theme="Aurora"] {
    --ds-control-surface: var(--ds-surface);
    --ds-control-surface-hover: var(--ds-surface-hover);
    --ds-control-border: var(--ds-border);
    --ds-control-focus: var(--ds-primary);
    --ds-control-accent: var(--ds-accent);
}

[data-ds-theme="Aurora"] {
    --ds-bg: #07110f;
    --ds-bg-secondary: #0b1815;
    --ds-sidebar: #091512;
    --ds-surface: #101e1a;
    --ds-surface-hover: #162820;
    --ds-border: rgba(110, 231, 183, 0.15);
    --ds-text: #ecfdf5;
    --ds-text-secondary: #a3b8af;
    --ds-text-muted: #637a70;
    --ds-primary: #14b8a6;
    --ds-primary-hover: #2dd4bf;
    --ds-success: #34d399;
    --ds-danger: #fb7185;
    --ds-accent: #6ee7b7;
    --ds-accent-soft: rgba(110, 231, 183, 0.12);
    --ds-focus: #2dd4bf;
    --ds-app-background:
        radial-gradient(circle at 85% 0%, rgba(20, 184, 166, 0.13), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(52, 211, 153, 0.08), transparent 38%),
        linear-gradient(135deg, #07110f, #0b1714 52%, #07110f);
    --ds-sidebar-background:
        linear-gradient(180deg, rgba(8, 21, 18, 0.98), rgba(7, 17, 15, 0.98));
    --ds-shadow-color: rgba(0, 0, 0, 0.5);
}

/* Global surfaces */
.ds-app {
    background: var(--ds-app-background);
}

.ds-sidebar {
    background: var(--ds-sidebar);
    background-image: var(--ds-sidebar-background);
}

.ds-nav-item {
    border-color: color-mix(in srgb, var(--ds-border) 70%, transparent);
    color: var(--ds-text-secondary);
}

.ds-nav-item span:first-child,
.ds-sidebar-nav-icon {
    color: var(--ds-accent);
}

.ds-nav-item > span:last-child,
.ds-menu-text {
    color: var(--ds-text-secondary);
    text-shadow: none;
}

.ds-nav-item:hover {
    background: var(--ds-accent-soft);
    color: var(--ds-text);
    border-color: var(--ds-border);
    box-shadow: 0 0 18px color-mix(in srgb, var(--ds-accent) 10%, transparent);
}

.ds-nav-item:hover span:first-child {
    color: var(--ds-accent);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 45%, transparent);
}

.ds-topbar {
    border-bottom-color: var(--ds-border);
    background: color-mix(in srgb, var(--ds-bg) 78%, transparent);
}

.ds-page-title,
.ds-topbar,
.ds-content,
.ds-main {
    color: var(--ds-text);
}

.ds-card,
.ds-auth-card,
.customer-card,
.driver-card,
.request-card,
.ride-card,
.message-card,
.language-settings-card {
    border-color: var(--ds-border) !important;
    background: color-mix(in srgb, var(--ds-surface) 76%, transparent) !important;
    box-shadow:
        0 20px 42px var(--ds-shadow-color),
        0 0 0 1px color-mix(in srgb, var(--ds-border) 80%, transparent),
        0 0 26px color-mix(in srgb, var(--ds-primary) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.ds-card:hover,
.customer-card:hover,
.driver-card:hover,
.request-card:hover,
.ride-card:hover,
.message-card:hover,
.language-settings-card:hover {
    background: color-mix(in srgb, var(--ds-surface-hover) 82%, transparent) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 24%, var(--ds-border)) !important;
    box-shadow:
        0 24px 48px var(--ds-shadow-color),
        0 0 0 1px color-mix(in srgb, var(--ds-accent) 12%, transparent),
        0 0 30px color-mix(in srgb, var(--ds-primary) 15%, transparent);
}

.ds-button,
.btn-primary {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: #fff !important;
}

.ds-button:hover,
.btn-primary:hover {
    background: var(--ds-primary-hover) !important;
    border-color: var(--ds-primary-hover) !important;
}

.ds-button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--ds-focus);
}

.ds-input,
.form-control,
.form-select,
.language-select,
.topbar-language-select {
    background-color: var(--ds-bg-secondary);
    color: var(--ds-text);
    border-color: var(--ds-border);
}

.ds-input::placeholder,
.form-control::placeholder {
    color: var(--ds-text-muted);
}

.ds-input:focus,
.form-control:focus,
.form-select:focus,
.language-select:focus,
.topbar-language-select:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ds-primary) 18%, transparent);
}

.ds-number-spinner-button {
    color: var(--ds-accent) !important;
    text-shadow: 0 0 5px color-mix(in srgb, var(--ds-accent) 38%, transparent);
}

.ds-number-spinner-button:hover,
.ds-number-spinner-button:focus-visible {
    color: var(--ds-accent) !important;
    background: var(--ds-accent-soft) !important;
}

.ds-notification-button {
    color: var(--ds-text-secondary);
}

.ds-notification-button:hover {
    color: var(--ds-accent);
}

.notification-popover {
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

.notification-popup-item {
    background: var(--ds-surface-hover);
    border-color: var(--ds-border);
}

.notification-popup-link,
.notification-popup-mark {
    color: var(--ds-accent);
}

.notification-popup-link:hover,
.notification-popup-mark:hover {
    color: var(--ds-primary-hover);
}

.language-settings-icon,
.language-settings-card-icon {
    color: var(--ds-accent);
    background: var(--ds-accent-soft);
}

.sound-toggle-track {
    background: var(--ds-bg-secondary);
    border-color: var(--ds-border);
}

.sound-toggle input:checked + .sound-toggle-track {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
}

@media (prefers-reduced-motion: reduce) {
    .ds-nav-item,
    .ds-card,
    .ds-button {
        transition: none !important;
    }
}

/* Aurora removes the blue photo dependency so the palette is coherent. */
[data-ds-theme="Aurora"] .ds-app {
    background: var(--ds-app-background);
}


/* =========================================================
   AURORA COMPONENT OVERRIDES
   Keep legacy component selectors visually theme-aware.
   ========================================================= */

[data-ds-theme="Aurora"] .ds-button,
[data-ds-theme="Aurora"] .btn-primary.ds-button,
[data-ds-theme="Aurora"] .btn-secondary.ds-button,
[data-ds-theme="Aurora"] .btn-success.ds-button,
[data-ds-theme="Aurora"] .btn-danger.ds-button,
[data-ds-theme="Aurora"] .btn-warning.ds-button,
[data-ds-theme="Aurora"] .btn-info.ds-button,
[data-ds-theme="Aurora"] .btn-light.ds-button,
[data-ds-theme="Aurora"] .btn-dark.ds-button {
    background: linear-gradient(180deg, #22c7b3 0%, #129d91 52%, #0e766e 100%) !important;
    color: #ecfdf5 !important;
    border-color: rgba(184, 255, 229, 0.52) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}

[data-ds-theme="Aurora"] .ds-button:hover,
[data-ds-theme="Aurora"] .btn-primary.ds-button:hover,
[data-ds-theme="Aurora"] .btn-secondary.ds-button:hover,
[data-ds-theme="Aurora"] .btn-success.ds-button:hover,
[data-ds-theme="Aurora"] .btn-danger.ds-button:hover,
[data-ds-theme="Aurora"] .btn-warning.ds-button:hover,
[data-ds-theme="Aurora"] .btn-info.ds-button:hover,
[data-ds-theme="Aurora"] .btn-light.ds-button:hover,
[data-ds-theme="Aurora"] .btn-dark.ds-button:hover {
    background: linear-gradient(180deg, #35d9c4 0%, #18b2a4 52%, #10877e 100%) !important;
    color: #ffffff !important;
    border-color: rgba(210, 255, 242, 0.72) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 20px rgba(45,212,191,.24) !important;
}

[data-ds-theme="Aurora"] .ds-icon-button,
[data-ds-theme="Aurora"] .ds-notification-button {
    color: var(--ds-accent);
}

[data-ds-theme="Aurora"] .ds-input,
[data-ds-theme="Aurora"] .form-control,
[data-ds-theme="Aurora"] .form-select {
    background: rgba(7, 17, 15, 0.72) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
}

[data-ds-theme="Aurora"] .ds-input:focus,
[data-ds-theme="Aurora"] .form-control:focus,
[data-ds-theme="Aurora"] .form-select:focus {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(20,184,166,.18) !important;
}

[data-ds-theme="Aurora"] .ds-profile-field-label,
[data-ds-theme="Aurora"] .ds-profile-card-title p,
[data-ds-theme="Aurora"] .ds-profile-cars-header p {
    color: var(--ds-text-secondary);
}

[data-ds-theme="Aurora"] .ds-profile-field-value,
[data-ds-theme="Aurora"] .ds-profile-card-title h2,
[data-ds-theme="Aurora"] .ds-profile-cars-header h3,
[data-ds-theme="Aurora"] .ds-profile-car-title h4 {
    color: var(--ds-text);
}

[data-ds-theme="Aurora"] .ds-card a:not(.ds-button),
[data-ds-theme="Aurora"] a {
    text-decoration-color: color-mix(in srgb, var(--ds-accent) 45%, transparent);
}

[data-ds-theme="Aurora"] .text-danger {
    color: #fb7185 !important;
}

/* =========================================================
   MIDNIGHT BUTTON SYSTEM
   The login action is the canonical Midnight button style.
   Reuse it consistently for every Design System button, including
   actions rendered inside dashboard/profile cards.
   ========================================================= */
[data-ds-theme="Midnight"] .ds-button,
[data-ds-theme="Midnight"] .btn-primary.ds-button,
[data-ds-theme="Midnight"] .btn-secondary.ds-button,
[data-ds-theme="Midnight"] .btn-success.ds-button,
[data-ds-theme="Midnight"] .btn-danger.ds-button,
[data-ds-theme="Midnight"] .btn-warning.ds-button,
[data-ds-theme="Midnight"] .btn-info.ds-button,
[data-ds-theme="Midnight"] .btn-light.ds-button,
[data-ds-theme="Midnight"] .btn-dark.ds-button {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border: 1px solid rgba(228, 233, 238, 0.82) !important;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 0 rgba(50,58,66,0.22) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.30),
        0 -1px 0 rgba(0,0,0,0.16) !important;
}

[data-ds-theme="Midnight"] .ds-button:hover,
[data-ds-theme="Midnight"] .btn-primary.ds-button:hover,
[data-ds-theme="Midnight"] .btn-secondary.ds-button:hover,
[data-ds-theme="Midnight"] .btn-success.ds-button:hover,
[data-ds-theme="Midnight"] .btn-danger.ds-button:hover,
[data-ds-theme="Midnight"] .btn-warning.ds-button:hover,
[data-ds-theme="Midnight"] .btn-info.ds-button:hover,
[data-ds-theme="Midnight"] .btn-light.ds-button:hover,
[data-ds-theme="Midnight"] .btn-dark.ds-button:hover {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(255,255,255,0.96) !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.34),
        0 0 18px rgba(109,199,255,0.34),
        0 0 5px rgba(255,255,255,0.30),
        inset 0 1px 0 rgba(255,255,255,0.94),
        inset 0 -1px 0 rgba(65,72,80,0.16) !important;
}

[data-ds-theme="Midnight"] .ds-button:active,
[data-ds-theme="Midnight"] .btn-primary.ds-button:active,
[data-ds-theme="Midnight"] .btn-secondary.ds-button:active,
[data-ds-theme="Midnight"] .btn-success.ds-button:active,
[data-ds-theme="Midnight"] .btn-danger.ds-button:active,
[data-ds-theme="Midnight"] .btn-warning.ds-button:active,
[data-ds-theme="Midnight"] .btn-info.ds-button:active,
[data-ds-theme="Midnight"] .btn-light.ds-button:active,
[data-ds-theme="Midnight"] .btn-dark.ds-button:active {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(255,255,255,0.96) !important;
    box-shadow:
        0 0 24px rgba(109,199,255,0.42),
        0 0 8px rgba(255,255,255,0.26),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(65,72,80,0.16) !important;
}

/* Card actions inherit the exact same Midnight button treatment. */
[data-ds-theme="Midnight"] .ds-card .ds-button,
[data-ds-theme="Midnight"] .customer-card .ds-button,
[data-ds-theme="Midnight"] .driver-card .ds-button,
[data-ds-theme="Midnight"] .request-card .ds-button,
[data-ds-theme="Midnight"] .ride-card .ds-button,
[data-ds-theme="Midnight"] .message-card .ds-button,
[data-ds-theme="Midnight"] .language-settings-card .ds-button {
    background: linear-gradient(180deg, #b7bec6 0%, #969ea7 46%, #767f89 100%) !important;
    color: #20262d !important;
    border-color: rgba(228,233,238,0.82) !important;
}


/* =========================================================
   SIDEBAR AUTH ACTIONS
   Keep longer localized labels (e.g. German) inside the button.
   ========================================================= */
.ds-sidebar-bottom .ds-nav-item > span:last-child {
    font-size: 15px;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-sidebar-bottom .ds-sidebar-login {
    min-width: 0;
}

.ds-sidebar-bottom .ds-sidebar-login > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-sidebar-bottom .ds-sidebar-login .ds-sidebar-nav-icon {
    flex: 0 0 20px;
}


/* =========================================================
   LOGIN AUTH FOOTER
   Keep the registration prompt visually separated from the
   submit button and centered inside the auth card.
   ========================================================= */
.ds-login-auth-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding-top: 2px;
    text-align: center;
    color: var(--ds-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.ds-login-auth-footer .ds-link {
    font-weight: 650;
}

[data-ds-theme="Aurora"] .ds-login-auth-footer .ds-link {
    color: #34d399 !important;
}

[data-ds-theme="Aurora"] .ds-login-auth-footer .ds-link:hover {
    color: #6ee7b7 !important;
}

/* =========================================================
   VEHICLE SELECTOR - DESKTOP FLOW ANCHOR
   Keep the trigger in its original document position and let
   the opened vehicle list expand as normal document content.
   This is intentionally scoped to Vehicle Type only.
   ========================================================= */
.ds-vehicle-select {
    display: block;
    position: relative;
    width: 100%;
    overflow: visible;
}

.ds-vehicle-select .ds-select-menu {
    width: 100%;
}

.ds-vehicle-select.is-open .ds-select-menu {
    /* Open in normal document flow so fields below are pushed down. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none;
    margin-top: 7px !important;
    flex: 0 0 auto;
    overflow: visible;
    box-sizing: border-box;
    transform: none;
}


/* =========================================================
   FORM PICKERS - FINAL DESIGN SYSTEM OVERRIDES
   These controls intentionally inherit the active theme tokens.
   The popup is a sibling-like floating surface, not part of the
   outer control border, which prevents the double/uneven right edge.
   ========================================================= */
.ds-ride-request-form .ds-picker,
.ds-ride-request-form .ds-vehicle-picker {
    position: relative;
    overflow: visible;
    border: 1px solid var(--ds-control-border, var(--ds-border)) !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-picker:hover,
.ds-ride-request-form .ds-vehicle-picker:hover {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
}

.ds-ride-request-form .ds-picker:focus-within,
.ds-ride-request-form .ds-vehicle-picker:focus-within,
.ds-ride-request-form .ds-vehicle-picker.is-open {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover,
.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    /* All request-form pickers expand in document flow. This pushes the
       following controls down instead of painting over them. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: calc(100% + 2px) !important;
    max-width: none !important;
    margin-top: 7px !important;
    margin-left: -1px !important;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 26%, var(--ds-control-border, var(--ds-border))) !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    color: var(--ds-text) !important;
    box-shadow: 0 16px 36px var(--ds-shadow-color), 0 0 24px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 6%, transparent) !important;
    backdrop-filter: blur(16px);
}

.ds-ride-request-form .ds-time-picker-popover {
    grid-template-columns: minmax(88px, 1fr) minmax(88px, 1fr);
}

.ds-ride-request-form .ds-time-picker-select {
    border-color: var(--ds-control-border, var(--ds-border)) !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    color: var(--ds-text) !important;
}

.ds-ride-request-form .ds-time-picker-select:focus {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-time-picker-select-wrap::after {
    border-top-color: var(--ds-control-accent, var(--ds-accent));
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 35%, transparent));
}

.ds-ride-request-form .ds-picker-button {
    color: var(--ds-control-accent, var(--ds-accent)) !important;
    opacity: 1;
}

.ds-ride-request-form .ds-picker-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 28%, transparent));
}

.ds-ride-request-form .ds-picker-button:hover,
.ds-ride-request-form .ds-picker-button:focus-visible {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-primary-hover) !important;
}

.ds-ride-request-form .ds-date-picker-nav {
    color: var(--ds-control-accent, var(--ds-accent));
    border-color: var(--ds-control-border, var(--ds-border));
}

.ds-ride-request-form .ds-date-picker-nav:hover,
.ds-ride-request-form .ds-date-picker-nav:focus-visible {
    background: var(--ds-accent-soft);
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 35%, var(--ds-control-border, var(--ds-border)));
}

.ds-ride-request-form .ds-date-picker-day {
    color: var(--ds-text);
}

.ds-ride-request-form .ds-date-picker-day:hover:not(:disabled) {
    background: var(--ds-accent-soft);
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 22%, var(--ds-control-border, var(--ds-border)));
}

.ds-ride-request-form .ds-date-picker-day.is-today {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 32%, var(--ds-control-border, var(--ds-border)));
}

.ds-ride-request-form .ds-date-picker-day.is-selected {
    background: color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 34%, var(--ds-control-accent, var(--ds-accent)) 18%);
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 48%, var(--ds-control-border, var(--ds-border)));
    color: var(--ds-text);
}

.ds-ride-request-form .ds-select-trigger {
    border-color: var(--ds-control-border, var(--ds-border)) !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    color: var(--ds-text) !important;
}

.ds-ride-request-form .ds-select:hover .ds-select-trigger {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
}

.ds-ride-request-form .ds-select-trigger:focus,
.ds-ride-request-form .ds-select.is-open .ds-select-trigger {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-select-trigger::after {
    border-top-color: var(--ds-control-accent, var(--ds-accent));
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 40%, transparent));
}

.ds-ride-request-form .ds-select-menu {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 26%, var(--ds-control-border, var(--ds-border)));
    background: var(--ds-control-surface, var(--ds-surface));
    color: var(--ds-text);
}

.ds-ride-request-form .ds-select-option {
    color: var(--ds-text);
}

.ds-ride-request-form .ds-select-option:hover,
.ds-ride-request-form .ds-select-option:focus-visible,
.ds-ride-request-form .ds-select-option.is-selected {
    background: var(--ds-accent-soft);
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 34%, transparent);
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    display: none;
    padding: 7px;
}

.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-menu {
    display: block;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option:hover,
.ds-ride-request-form .ds-vehicle-picker .ds-select-option:focus-visible,
.ds-ride-request-form .ds-vehicle-picker .ds-select-option.is-selected {
    background: var(--ds-accent-soft);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 24%, transparent);
}

/* =========================================================
   REQUEST FORM - OPEN PICKERS: SINGLE CONTINUOUS FRAME
   Keep the trigger and its expanded content inside one themed
   border. The popup itself must not draw a second rectangle.
   This also keeps the expanded picker in normal document flow.
   ========================================================= */
.ds-ride-request-form .ds-picker:has(.ds-date-picker-popover.is-open),
.ds-ride-request-form .ds-picker:has(.ds-time-picker-popover.is-open),
.ds-ride-request-form .ds-vehicle-picker.is-open {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover,
.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Preserve the theme surface inside the single outer frame. */
.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover {
    padding: 12px !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    padding: 7px !important;
}

/* =========================================================
   REQUEST PICKERS - STABLE ICON ANCHOR + THEME COLOR
   Keep Date/Time icons anchored to the 44px trigger row while
   the expanded picker grows below it. Never derive their vertical
   position from the expanded container height.
   ========================================================= */
.ds-ride-request-form .pickup-datetime-field .ds-picker-button,
.ds-ride-request-form .ds-picker-row .ds-picker-button {
    position: absolute !important;
    top: 22px !important;
    right: 7px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    color: var(--ds-control-accent, var(--ds-accent)) !important;
    opacity: 1 !important;
    background: transparent !important;
    z-index: 5 !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button svg,
.ds-ride-request-form .ds-picker-row .ds-picker-button svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: inherit !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 28%, transparent));
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button:hover,
.ds-ride-request-form .pickup-datetime-field .ds-picker-button:focus-visible,
.ds-ride-request-form .ds-picker-row .ds-picker-button:hover,
.ds-ride-request-form .ds-picker-row .ds-picker-button:focus-visible {
    color: var(--ds-control-focus, var(--ds-primary)) !important;
    background: var(--ds-accent-soft) !important;
    opacity: 1 !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button:focus-visible,
.ds-ride-request-form .ds-picker-row .ds-picker-button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
    outline: none !important;
}

/* The button must not move when the picker expands. */
.ds-ride-request-form .pickup-datetime-field .ds-picker:has(.ds-date-picker-popover.is-open) .ds-picker-button,
.ds-ride-request-form .pickup-datetime-field .ds-picker:has(.ds-time-picker-popover.is-open) .ds-picker-button {
    top: 22px !important;
    transform: translateY(-50%) !important;
}

/* =========================================================
   REQUEST FORM SELECTS - MATCH DATE/TIME PICKER FRAME
   Vehicle Type, Minimum Seats and Payment Mode use the same
   outer Design System control frame as Date and Time.
   The visible trigger is borderless inside that frame so the
   expanded menu cannot create a second/discontinuous border.
   ========================================================= */
.ds-ride-request-form .ds-select {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
    overflow: visible !important;
    border: 1px solid var(--ds-control-border, var(--ds-border)) !important;
    border-radius: 10px !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition) !important;
}

.ds-ride-request-form .ds-select:hover {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
}

.ds-ride-request-form .ds-select:focus-within,
.ds-ride-request-form .ds-select.is-open {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-select .ds-select-trigger {
    min-height: 44px !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-text) !important;
    box-sizing: border-box !important;
}

.ds-ride-request-form .ds-select:hover .ds-select-trigger,
.ds-ride-request-form .ds-select.is-open .ds-select-trigger,
.ds-ride-request-form .ds-select .ds-select-trigger:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.ds-ride-request-form .ds-select .ds-select-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px !important;
    display: none;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu {
    display: block !important;
}

.ds-ride-request-form .ds-select .ds-select-option {
    color: var(--ds-text) !important;
    background: transparent !important;
}

.ds-ride-request-form .ds-select .ds-select-option:hover,
.ds-ride-request-form .ds-select .ds-select-option:focus-visible,
.ds-ride-request-form .ds-select .ds-select-option.is-selected {
    background: transparent !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 34%, transparent) !important;
}

/* Keep the vehicle imagery/layout, but use the same control frame. */
.ds-ride-request-form .ds-vehicle-picker .ds-select-trigger {
    min-height: 44px !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    position: static !important;
    display: none;
    margin: 0 !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-menu {
    display: block !important;
}

.ds-ride-request-form .ds-select-trigger::after {
    border-top-color: var(--ds-control-accent, var(--ds-accent)) !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 40%, transparent)) !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-trigger::after {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 55%, transparent)) !important;
}


/* =========================================================
   SELECT CONTROLS - THEME-MATCHED RIDE REQUEST FINAL
   Selects use the same semantic surface, geometry and state model
   as the Date/Time controls. Only the open menu/options add their
   own interaction treatment.
   ========================================================= */
.ds-ride-request-form .ds-select {
    width: 100%;
    position: relative;
    overflow: visible;
}

.ds-ride-request-form .ds-select-trigger {
    min-height: 44px !important;
    height: 44px;
    box-sizing: border-box;
    padding: 10px 46px 10px 12px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    color: var(--ds-text) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-ride-request-form .ds-select:hover .ds-select-trigger {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-select-trigger:focus,
.ds-ride-request-form .ds-select.is-open .ds-select-trigger {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-ride-request-form .ds-select-trigger::after {
    right: 14px;
    border-top-color: var(--ds-accent) !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-accent) 30%, transparent));
}

.ds-ride-request-form .ds-select-menu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 280px;
    box-sizing: border-box;
    margin: 7px 0 0 !important;
    padding: 6px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
        var(--ds-surface) !important;
    color: var(--ds-text) !important;
    box-shadow: 0 16px 36px var(--ds-shadow-color), 0 0 24px color-mix(in srgb, var(--ds-accent) 6%, transparent) !important;
    backdrop-filter: blur(16px);
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu {
    display: block;
}

.ds-ride-request-form .ds-select-option {
    min-height: 38px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent !important;
    color: var(--ds-text) !important;
    text-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ds-ride-request-form .ds-select-option:hover,
.ds-ride-request-form .ds-select-option:focus-visible {
    background: var(--ds-accent-soft) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 20%, transparent) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 6px color-mix(in srgb, var(--ds-accent) 20%, transparent) !important;
    outline: none;
}

.ds-ride-request-form .ds-select-option.is-selected {
    background: color-mix(in srgb, var(--ds-accent-soft) 55%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 28%, var(--ds-border)) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 6px color-mix(in srgb, var(--ds-accent) 18%, transparent) !important;
}

.ds-ride-request-form .ds-select-option:hover.is-selected,
.ds-ride-request-form .ds-select-option:focus-visible.is-selected {
    background: var(--ds-accent-soft) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 34%, var(--ds-border)) !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    max-height: none;
    overflow: visible;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option {
    min-height: 44px;
}


/* =========================================================
   REQUEST FORM SELECTS - AUTHORITATIVE ALIGNMENT
   The visible select wrapper is the control frame. The trigger is
   borderless inside it, exactly like the Date/Time picker input.
   This block intentionally comes last so older selector overrides
   cannot reintroduce a second border or a different height.
   ========================================================= */
.ds-ride-request-form .ds-select {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-select:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
}

.ds-ride-request-form .ds-select:focus-within,
.ds-ride-request-form .ds-select.is-open {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-ride-request-form .ds-select .ds-select-trigger {
    position: relative !important;
    flex: 0 0 42px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 46px 10px 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: none !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-select:hover .ds-select-trigger,
.ds-ride-request-form .ds-select.is-open .ds-select-trigger,
.ds-ride-request-form .ds-select .ds-select-trigger:focus,
.ds-ride-request-form .ds-select .ds-select-trigger:focus-visible {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-select .ds-select-trigger::after {
    right: 14px !important;
    top: 50% !important;
    border-top-color: var(--ds-accent) !important;
    transform: translateY(-35%) !important;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-accent) 40%, transparent)) !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-trigger::after {
    transform: translateY(-65%) rotate(180deg) !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ds-accent) 55%, transparent)) !important;
}

.ds-ride-request-form .ds-select .ds-select-menu {
    position: static !important;
    display: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 280px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow-y: auto !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu {
    display: block !important;
}

.ds-ride-request-form .ds-select .ds-select-option {
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding: 9px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    text-shadow: none !important;
}

.ds-ride-request-form .ds-select .ds-select-option:hover,
.ds-ride-request-form .ds-select .ds-select-option:focus-visible {
    background: var(--ds-accent-soft) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 20%, transparent) !important;
    color: var(--ds-text) !important;
    outline: none !important;
    text-shadow: none !important;
}

.ds-ride-request-form .ds-select .ds-select-option.is-selected {
    background: color-mix(in srgb, var(--ds-accent-soft) 55%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 28%, var(--ds-border)) !important;
    color: var(--ds-text) !important;
    text-shadow: none !important;
}

.ds-ride-request-form .ds-select .ds-select-option:hover.is-selected,
.ds-ride-request-form .ds-select .ds-select-option:focus-visible.is-selected {
    background: var(--ds-accent-soft) !important;
    border-color: color-mix(in srgb, var(--ds-accent) 34%, var(--ds-border)) !important;
}

/* Vehicle Type keeps its image grid, but uses the same frame and flow. */
.ds-ride-request-form .ds-vehicle-picker .ds-select-menu {
    max-height: none !important;
    overflow: visible !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option {
    min-height: 44px !important;
}

/* Vehicle Type option content: keep image and label vertically centered
   inside the same row after the common select alignment rules. */
.ds-ride-request-form .ds-vehicle-picker .ds-select-option {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
    width: 118px !important;
    height: 56px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    object-fit: contain !important;
    object-position: center !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-text {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

@media (max-width: 650px) {
    .ds-ride-request-form .ds-vehicle-picker .ds-select-option {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        min-height: 66px !important;
        height: 66px !important;
        padding: 6px 8px !important;
    }

    .ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
        width: 96px !important;
        height: 48px !important;
    }
}

/* Final Vehicle Type alignment: image and label share one vertically centered row. */
.ds-ride-request-form .ds-vehicle-picker .ds-select-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
    flex: 0 0 118px !important;
    display: block !important;
    width: 118px !important;
    height: 56px !important;
    margin: 0 !important;
    align-self: center !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-text {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    line-height: 1.25 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 650px) {
    .ds-ride-request-form .ds-vehicle-picker .ds-select-option {
        gap: 14px !important;
        min-height: 66px !important;
        height: 66px !important;
        padding: 6px 8px !important;
    }

    .ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
        flex-basis: 96px !important;
        width: 96px !important;
        height: 48px !important;
    }
}

/* Vehicle Type: exact visual centering inside each option row. */
.ds-ride-request-form .ds-vehicle-picker .ds-select-option {
    position: relative !important;
    display: block !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    width: 118px !important;
    height: 56px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-option-text {
    position: absolute !important;
    left: 150px !important;
    right: 10px !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: block !important;
    line-height: 1.25 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 650px) {
    .ds-ride-request-form .ds-vehicle-picker .ds-select-option {
        min-height: 66px !important;
        height: 66px !important;
    }

    .ds-ride-request-form .ds-vehicle-picker .ds-select-option-image {
        left: 8px !important;
        width: 96px !important;
        height: 48px !important;
    }

    .ds-ride-request-form .ds-vehicle-picker .ds-select-option-text {
        left: 118px !important;
        right: 8px !important;
    }
}

/*
   Vehicle Type closed trigger: align the selected vehicle image and label
   vertically inside the trigger itself. This is intentionally scoped to the
   closed trigger so the dropdown option layout remains untouched.
*/
.ds-ride-request-form .ds-vehicle-picker .ds-select-trigger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 46px 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-selected-image {
    flex: 0 0 72px !important;
    display: block !important;
    width: 72px !important;
    height: 42px !important;
    margin: 0 !important;
    align-self: center !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.ds-ride-request-form .ds-vehicle-picker .ds-select-text {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    line-height: 1.35 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 650px) {
    .ds-ride-request-form .ds-vehicle-picker .ds-select-trigger {
        gap: 10px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 42px 0 10px !important;
    }

    .ds-ride-request-form .ds-vehicle-picker .ds-select-selected-image {
        flex-basis: 64px !important;
        width: 64px !important;
        height: 38px !important;
    }
}

/* =========================================================
   REQUEST FORM SELECT MENUS - ELEVATED THEME SURFACE
   The opened menu intentionally uses a distinct surface from the
   fixed trigger while retaining the active theme's accent/border
   language. The outer control frame remains unchanged.
   ========================================================= */
.ds-ride-request-form .ds-select.is-open .ds-select-menu {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    color: var(--ds-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-option {
    background: transparent !important;
    color: var(--ds-text) !important;
    border-radius: 8px !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-option:hover,
.ds-ride-request-form .ds-select.is-open .ds-select-option:focus-visible {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 30%, transparent) !important;
}

.ds-ride-request-form .ds-select.is-open .ds-select-option.is-selected {
    background: color-mix(in srgb, var(--ds-accent-soft) 72%, var(--ds-control-surface, var(--ds-surface))) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 24%, transparent) !important;
}

/* Vehicle Type uses the same elevated menu surface as the other selects. */
.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-menu {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}

.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-option {
    background: transparent !important;
}

.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-option:hover,
.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-option:focus-visible {
    background: var(--ds-accent-soft) !important;
}

.ds-ride-request-form .ds-vehicle-picker.is-open .ds-select-option.is-selected {
    background: color-mix(in srgb, var(--ds-accent-soft) 72%, var(--ds-control-surface, var(--ds-surface))) !important;
}

/* =========================================================
   REQUEST SELECT MENUS - THEMED SCROLLBAR
   The opened custom selector uses the Design System scrollbar
   instead of the browser-default scrollbar.
   ========================================================= */
.ds-ride-request-form .ds-select.is-open .ds-select-menu {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color:
        color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 70%, transparent)
        color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%);
    scrollbar-gutter: stable;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu::-webkit-scrollbar {
    width: 8px;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu::-webkit-scrollbar-track {
    background: color-mix(
        in srgb,
        var(--ds-control-surface, var(--ds-surface)) 82%,
        var(--ds-control-accent, var(--ds-accent)) 18%
    );
    border-radius: 999px;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu::-webkit-scrollbar-thumb {
    background: color-mix(
        in srgb,
        var(--ds-control-accent, var(--ds-accent)) 70%,
        var(--ds-control-border, var(--ds-border)) 30%
    );
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.ds-ride-request-form .ds-select.is-open .ds-select-menu::-webkit-scrollbar-thumb:hover {
    background: var(--ds-control-focus, var(--ds-primary));
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* =========================================================
   MIDNIGHT IMAGE SURFACES
   Keep the complete BG_Blue1 image visible in both navigation
   surfaces. 100% 100% intentionally fits the whole source image
   to each surface instead of using cover (which would crop it).
   Aurora keeps its existing theme background.
   ========================================================= */
[data-ds-theme="Midnight"] .ds-sidebar {
    background-color: #080c14;
    background-image: url("/Images/BG_Blue1.jpg");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

[data-ds-theme="Midnight"] .ds-topbar {
    background-color: #07142d;
    background-image: url("/Images/BG_Blue1.jpg");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* =========================================================
   MIDNIGHT CARD TRANSPARENCY
   Keep dashboard/home/profile cards at 85% transparency
   (15% surface opacity) while preserving the active theme.
   ========================================================= */
[data-ds-theme="Midnight"] .ds-card,
[data-ds-theme="Midnight"] .ds-auth-card,
[data-ds-theme="Midnight"] .customer-card,
[data-ds-theme="Midnight"] .driver-card,
[data-ds-theme="Midnight"] .request-card,
[data-ds-theme="Midnight"] .ride-card,
[data-ds-theme="Midnight"] .message-card,
[data-ds-theme="Midnight"] .language-settings-card,
[data-ds-theme="Midnight"] .ds-profile-card,
[data-ds-theme="Midnight"] .ds-profile-car-card {
    background: color-mix(in srgb, var(--ds-surface) 15%, transparent) !important;
}

[data-ds-theme="Midnight"] .ds-card:hover,
[data-ds-theme="Midnight"] .customer-card:hover,
[data-ds-theme="Midnight"] .driver-card:hover,
[data-ds-theme="Midnight"] .request-card:hover,
[data-ds-theme="Midnight"] .ride-card:hover,
[data-ds-theme="Midnight"] .message-card:hover,
[data-ds-theme="Midnight"] .language-settings-card:hover,
[data-ds-theme="Midnight"] .ds-profile-card:hover,
[data-ds-theme="Midnight"] .ds-profile-car-card:hover {
    background: color-mix(in srgb, var(--ds-surface-hover) 15%, transparent) !important;
}

/* =========================================================
   MENU ICON — ALWAYS WHITE
   The hamburger/menu icon is intentionally theme-independent.
   ========================================================= */
.ds-menu-button .ds-menu-icon svg,
.ds-menu-button:hover .ds-menu-icon svg,
.ds-menu-button:focus-visible .ds-menu-icon svg,
.ds-menu-button:active .ds-menu-icon svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    opacity: 1;
}

.ds-mobile-menu-button,
.ds-mobile-menu-button:hover,
.ds-mobile-menu-button:focus,
.ds-mobile-menu-button:focus-visible,
.ds-mobile-menu-button:active {
    color: #ffffff !important;
    opacity: 1;
}

/* =========================================================
   MIDNIGHT TEXTBOX SYSTEM
   Reuse the Login / Visitor textbox treatment across all
   editable text fields without changing select/picker controls.
   ========================================================= */
[data-ds-theme="Midnight"] input.ds-input,
[data-ds-theme="Midnight"] input.form-control,
[data-ds-theme="Midnight"] textarea.ds-input,
[data-ds-theme="Midnight"] textarea.form-control,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="text"],
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="email"],
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="tel"],
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="number"],
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="password"],
[data-ds-theme="Midnight"] .ds-ride-request-form textarea,
[data-ds-theme="Midnight"] .driver-dashboard input[type="text"],
[data-ds-theme="Midnight"] .driver-dashboard input[type="email"],
[data-ds-theme="Midnight"] .driver-dashboard input[type="tel"],
[data-ds-theme="Midnight"] .driver-dashboard input[type="number"],
[data-ds-theme="Midnight"] .driver-dashboard input[type="password"],
[data-ds-theme="Midnight"] .driver-dashboard textarea,
[data-ds-theme="Midnight"] .customer-dashboard input[type="text"],
[data-ds-theme="Midnight"] .customer-dashboard input[type="email"],
[data-ds-theme="Midnight"] .customer-dashboard input[type="tel"],
[data-ds-theme="Midnight"] .customer-dashboard input[type="number"],
[data-ds-theme="Midnight"] .customer-dashboard input[type="password"],
[data-ds-theme="Midnight"] .customer-dashboard textarea,
[data-ds-theme="Midnight"] .visitor-dashboard input[type="text"],
[data-ds-theme="Midnight"] .visitor-dashboard input[type="email"],
[data-ds-theme="Midnight"] .visitor-dashboard input[type="tel"],
[data-ds-theme="Midnight"] .visitor-dashboard input[type="number"],
[data-ds-theme="Midnight"] .visitor-dashboard input[type="password"],
[data-ds-theme="Midnight"] .visitor-dashboard textarea {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    color: var(--ds-text) !important;
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}

[data-ds-theme="Midnight"] input.ds-input::placeholder,
[data-ds-theme="Midnight"] input.form-control::placeholder,
[data-ds-theme="Midnight"] textarea.ds-input::placeholder,
[data-ds-theme="Midnight"] textarea.form-control::placeholder,
[data-ds-theme="Midnight"] .ds-ride-request-form input::placeholder,
[data-ds-theme="Midnight"] .ds-ride-request-form textarea::placeholder,
[data-ds-theme="Midnight"] .driver-dashboard input::placeholder,
[data-ds-theme="Midnight"] .driver-dashboard textarea::placeholder,
[data-ds-theme="Midnight"] .customer-dashboard input::placeholder,
[data-ds-theme="Midnight"] .customer-dashboard textarea::placeholder,
[data-ds-theme="Midnight"] .visitor-dashboard input::placeholder,
[data-ds-theme="Midnight"] .visitor-dashboard textarea::placeholder {
    color: var(--ds-text-secondary) !important;
    opacity: 0.86;
}

[data-ds-theme="Midnight"] input.ds-input:hover,
[data-ds-theme="Midnight"] input.form-control:hover,
[data-ds-theme="Midnight"] textarea.ds-input:hover,
[data-ds-theme="Midnight"] textarea.form-control:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="text"]:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="email"]:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="tel"]:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="number"]:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="password"]:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form textarea:hover,
[data-ds-theme="Midnight"] .driver-dashboard input:hover,
[data-ds-theme="Midnight"] .driver-dashboard textarea:hover,
[data-ds-theme="Midnight"] .customer-dashboard input:hover,
[data-ds-theme="Midnight"] .customer-dashboard textarea:hover,
[data-ds-theme="Midnight"] .visitor-dashboard input:hover,
[data-ds-theme="Midnight"] .visitor-dashboard textarea:hover {
    border-color: var(--ds-border) !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

[data-ds-theme="Midnight"] input.ds-input:focus,
[data-ds-theme="Midnight"] input.form-control:focus,
[data-ds-theme="Midnight"] textarea.ds-input:focus,
[data-ds-theme="Midnight"] textarea.form-control:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="text"]:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="email"]:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="tel"]:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="number"]:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form input[type="password"]:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form textarea:focus,
[data-ds-theme="Midnight"] .driver-dashboard input:focus,
[data-ds-theme="Midnight"] .driver-dashboard textarea:focus,
[data-ds-theme="Midnight"] .customer-dashboard input:focus,
[data-ds-theme="Midnight"] .customer-dashboard textarea:focus,
[data-ds-theme="Midnight"] .visitor-dashboard input:focus,
[data-ds-theme="Midnight"] .visitor-dashboard textarea:focus {
    border-color: var(--ds-border) !important;
    outline: none !important;
    box-shadow:
        inset 0 0 0 1px var(--ds-border),
        inset 0 1px 0 rgba(0, 0, 0, 0.36),
        inset 0 3px 6px rgba(0, 0, 0, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 4px rgba(125, 175, 255, 0.15) !important;
}

/* =========================================================
   FINAL DATE/TIME = SELECT VISUAL FRAME
   Date/Time use the same outer geometry and theme surface as
   .ds-select-trigger. The inner text input is deliberately
   borderless/flat so Midnight textbox rules cannot create an
   inset "second border" inside the control.
   ========================================================= */
.ds-ride-request-form .pickup-datetime-field .ds-picker {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)), var(--ds-surface) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker:focus-within {
    border-color: var(--ds-primary) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-input,
[data-ds-theme="Midnight"] .ds-ride-request-form .pickup-datetime-field .ds-picker-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 46px 10px 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-input:hover,
.ds-ride-request-form .pickup-datetime-field .ds-picker-input:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button {
    right: 7px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ds-accent) !important;
    opacity: .88;
}

.ds-ride-request-form .pickup-datetime-field .ds-picker-button:hover,
.ds-ride-request-form .pickup-datetime-field .ds-picker-button:focus-visible {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-primary-hover) !important;
    opacity: 1;
}



        /* DATE/TIME = CLASS SURFACE: identical outer and inner background treatment. */
        .ds-ride-request-form .pickup-datetime-field .ds-picker {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
            min-height: 44px !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid var(--ds-border) !important;
            border-radius: 10px !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
                var(--ds-surface) !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        .ds-ride-request-form .pickup-datetime-field .ds-picker:hover {
            border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
                var(--ds-surface-hover) !important;
        }

        .ds-ride-request-form .pickup-datetime-field .ds-picker:focus-within,
        .ds-ride-request-form .pickup-datetime-field .ds-picker:has(.ds-date-picker-popover.is-open),
        .ds-ride-request-form .pickup-datetime-field .ds-time-picker.is-open {
            border-color: var(--ds-primary) !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
                var(--ds-surface-hover) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
        }

        .ds-ride-request-form .pickup-datetime-field .ds-picker-input {
            flex: 1 1 100% !important;
            width: 100% !important;
            height: 42px !important;
            min-height: 42px !important;
            margin: 0 !important;
            padding: 10px 46px 10px 12px !important;
            box-sizing: border-box !important;
            border: 0 !important;
            border-radius: 9px !important;
            outline: none !important;
            background: transparent !important;
            box-shadow: none !important;
            color: var(--ds-text) !important;
            font: inherit !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            line-height: 1.35 !important;
        }

        .ds-ride-request-form .pickup-datetime-field .ds-picker-input:hover,
        .ds-ride-request-form .pickup-datetime-field .ds-picker-input:focus,
        .ds-ride-request-form .pickup-datetime-field .ds-picker-input:focus-visible {
            border: 0 !important;
            outline: none !important;
            background: transparent !important;
            box-shadow: none !important;
        }


/* =========================================================
   REUSABLE DATE / TIME CONTROLS
   Date and Time stay separate components, but their OUTER FRAME
   follows the exact visual contract used by the Customer selector.
   Do not alter .ds-select here; these rules are scoped only to
   Date and Time.
   ========================================================= */

.ds-ride-request-form .ds-date-picker-control,
.ds-ride-request-form .ds-time-picker-control {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ds-control-border, var(--ds-border)) !important;
    border-radius: 10px !important;
    background: var(--ds-control-surface, var(--ds-surface)) !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: border-color var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition) !important;
}

.ds-ride-request-form .ds-date-picker-control:hover,
.ds-ride-request-form .ds-time-picker-control:hover {
    border-color: color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
    box-shadow: none !important;
}

/* Match .ds-select.is-open / :focus exactly, while preventing the
   generic .ds-picker focus-within styling from adding a second effect. */
.ds-ride-request-form .ds-date-picker-control:focus-within,
.ds-ride-request-form .ds-date-picker-control:has(.ds-date-picker-popover.is-open),
.ds-ride-request-form .ds-time-picker-control:focus-within,
.ds-ride-request-form .ds-time-picker-control:has(.ds-time-picker-popover.is-open) {
    border-color: var(--ds-control-focus, var(--ds-primary)) !important;
    background: var(--ds-control-surface-hover, var(--ds-surface-hover)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-control-focus, var(--ds-primary)) 13%, transparent) !important;
}

.ds-ride-request-form .ds-date-picker-control .ds-picker-input,
.ds-ride-request-form .ds-time-picker-control .ds-picker-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 10px 46px 10px 12px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: none !important;
    background: transparent !important;
    color: var(--ds-text) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.ds-ride-request-form .ds-date-picker-control .ds-picker-input:hover,
.ds-ride-request-form .ds-date-picker-control .ds-picker-input:focus,
.ds-ride-request-form .ds-date-picker-control .ds-picker-input:focus-visible,
.ds-ride-request-form .ds-time-picker-control .ds-picker-input:hover,
.ds-ride-request-form .ds-time-picker-control .ds-picker-input:focus,
.ds-ride-request-form .ds-time-picker-control .ds-picker-input:focus-visible {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Date-specific and Time-specific button rules stay independent. */
.ds-ride-request-form .ds-date-picker-control .ds-picker-button,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button {
    right: 7px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ds-ride-request-form .ds-date-picker-control .ds-picker-button:hover,
.ds-ride-request-form .ds-date-picker-control .ds-picker-button:focus-visible,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button:hover,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button:focus-visible {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-primary-hover) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* The generic picker button has a focus ring which reads as an inset
   border after a native/custom picker closes. Suppress it only here. */
.ds-ride-request-form .ds-date-picker-control .ds-picker-button:focus,
.ds-ride-request-form .ds-date-picker-control .ds-picker-button:focus-visible,
.ds-ride-request-form .ds-date-picker-control .ds-picker-button:active,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button:focus,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button:focus-visible,
.ds-ride-request-form .ds-time-picker-control .ds-picker-button:active {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* MIDNIGHT ONLY — DATE/TIME SELECTOR PARITY */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control {
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)), var(--ds-surface) !important;
    box-shadow: none !important;
}
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), var(--ds-surface-hover) !important;
    box-shadow: none !important;
}
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control:focus-within,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control:has(.ds-date-picker-popover.is-open),
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control:focus-within,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control:has(.ds-time-picker-popover.is-open) {
    border-color: var(--ds-primary) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-input {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-input:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-input:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-input:focus-visible,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-input:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-input:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-input:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-button,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-button,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-button:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-control .ds-picker-button:focus-visible,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-button:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-control .ds-picker-button:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================================
   DATE/TIME POPUP SURFACE - MATCH REQUEST SELECT MENU
   ========================================================= */

/* =========================================================
   DATE/TIME POPUP SURFACE - MATCH REQUEST SELECT MENU
   The main Date/Time popup uses the exact same elevated surface
   treatment as the opened custom selector (including its minute
   selector): same gradient, inset highlights, border and shadow.
   Scoped only to Date/Time request-form popovers.
   ========================================================= */
.ds-ride-request-form .ds-date-picker-popover,
.ds-ride-request-form .ds-time-picker-popover {
    border: 1px solid var(--ds-control-border, var(--ds-border)) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    color: var(--ds-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent),
        0 16px 36px var(--ds-shadow-color),
        0 0 24px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 6%, transparent) !important;
    backdrop-filter: blur(16px) !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-picker-popover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-picker-popover {
    border-color: var(--ds-control-border, var(--ds-border)) !important;
    /* Midnight: dark-blue elevated surface, matching the selector family. */
    background:
        linear-gradient(
            180deg,
            #1b3152 0%,
            #182a45 48%,
            var(--ds-control-surface, var(--ds-surface)) 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent),
        0 16px 36px var(--ds-shadow-color),
        0 0 24px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 6%, transparent) !important;
}


/* CUSTOMER MY RIDES - MATCH DRIVER REQUEST CARD SHELL
   Visual shell only; ride expansion/interaction remains unchanged. */
.customer-home-ride {
    padding: 20px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: 0 15px 45px rgba(0,0,0,.14) !important;
    color: var(--ds-text) !important;
}

.customer-home-ride:hover {
    border-color: rgba(99,102,241,.18) !important;
    background: rgba(255,255,255,.025) !important;
}

.customer-home-ride:focus-visible {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.13) !important;
    outline: none !important;
}

/* Keep the ride status/action area positioned as before. */
.customer-home-ride-actions {
    right: 20px;
}

/* Theme-specific request-card shell is inherited through the same design tokens. */

/* =========================================================
   REUSABLE DATE / TIME - CLEAN NATIVE CONTROLS
   ========================================================= */


/* =========================================================
   REUSABLE DATE / TIME - CLEAN NATIVE CONTROLS
   Date and Time are independent components. These rules do not
   modify .ds-select, .ds-picker or any selector implementation.
   ========================================================= */
.ds-date-time-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}

.ds-date-control {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.ds-date-control__label {
    display: block;
    margin: 0 0 7px;
    color: var(--ds-text-secondary, var(--ds-text));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-date-control__input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    outline: none;
    box-shadow: none;
    transition: border-color var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-date-control__input:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border));
    background: var(--ds-surface-hover);
}

.ds-date-control__input:focus,
.ds-date-control__input:focus-visible {
    border-color: var(--ds-primary);
    background: var(--ds-surface-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent);
    outline: none;
}

.ds-date-control__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .82;
    filter: none;
}

.ds-date-control__input:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.ds-time-control {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.ds-time-control__label {
    display: block;
    margin: 0 0 7px;
    color: var(--ds-text-secondary, var(--ds-text));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-time-control__input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    outline: none;
    box-shadow: none;
    transition: border-color var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-time-control__input:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border));
    background: var(--ds-surface-hover);
}

.ds-time-control__input:focus,
.ds-time-control__input:focus-visible {
    border-color: var(--ds-primary);
    background: var(--ds-surface-hover);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent);
    outline: none;
}

.ds-time-control__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .82;
    filter: none;
}

.ds-time-control__input:disabled {
    opacity: .58;
    cursor: not-allowed;
}

[data-ds-theme="Midnight"] .ds-date-control__input {
    border-color: var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
}

[data-ds-theme="Midnight"] .ds-time-control__input {
    border-color: var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
}

/* Date / Time open surfaces: deliberately isolated from .ds-select. */
.ds-date-control__popup,
.ds-time-control__popup {
    position: absolute;
    z-index: 1300;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    color: var(--ds-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
    backdrop-filter: blur(16px);
}

.ds-date-control__popup[hidden],
.ds-time-control__popup[hidden] { display: none; }

.ds-date-control__popup-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.ds-date-control__month {
    color: var(--ds-text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}
.ds-date-control__nav {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.ds-date-control__nav:hover,
.ds-date-control__nav:focus-visible {
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 34%, transparent);
    outline: none;
}
.ds-date-control__weekdays,
.ds-date-control__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.ds-date-control__weekdays span {
    padding: 5px 2px;
    color: var(--ds-text-secondary, var(--ds-text));
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}
.ds-date-control__day {
    min-width: 0;
    min-height: 36px;
    padding: 6px 3px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 120ms ease, text-shadow 120ms ease;
}
.ds-date-control__day:hover,
.ds-date-control__day:focus-visible,
.ds-date-control__day.is-selected,
.ds-date-control__day.is-today {
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 34%, transparent), 0 0 1px color-mix(in srgb, var(--ds-text) 60%, transparent);
    outline: none;
}
.ds-date-control__day.is-selected { font-weight: 700; }
.ds-date-control__day:disabled { opacity: .35; cursor: not-allowed; text-shadow: none; }
.ds-date-control__empty { min-height: 36px; }

.ds-time-control__popup { max-height: 280px; overflow-y: auto; }
.ds-time-control__popup-head {
    padding: 5px 7px 8px;
    color: var(--ds-text-secondary, var(--ds-text));
    font-size: 12px;
    font-weight: 600;
}
.ds-time-control__choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.ds-time-control__choice {
    min-height: 36px;
    padding: 7px 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 120ms ease, text-shadow 120ms ease;
}
.ds-time-control__choice:hover,
.ds-time-control__choice:focus-visible,
.ds-time-control__choice.is-selected {
    color: var(--ds-text);
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 34%, transparent), 0 0 1px color-mix(in srgb, var(--ds-text) 60%, transparent);
    outline: none;
}
.ds-time-control__choice:disabled { opacity: .35; cursor: not-allowed; text-shadow: none; }


/* Date/Time popup scrollbar — visually matches .ds-select-menu only. */
.ds-date-control__popup,
.ds-time-control__popup {
    scrollbar-width: thin;
    scrollbar-color:
        color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 70%, transparent)
        color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%);
}

.ds-date-control__popup::-webkit-scrollbar,
.ds-time-control__popup::-webkit-scrollbar {
    width: 8px;
}

.ds-date-control__popup::-webkit-scrollbar-track,
.ds-time-control__popup::-webkit-scrollbar-track {
    background: color-mix(
        in srgb,
        var(--ds-control-surface, var(--ds-surface)) 82%,
        var(--ds-control-accent, var(--ds-accent)) 18%
    );
    border-radius: 999px;
}

.ds-date-control__popup::-webkit-scrollbar-thumb,
.ds-time-control__popup::-webkit-scrollbar-thumb {
    background: color-mix(
        in srgb,
        var(--ds-control-accent, var(--ds-accent)) 70%,
        var(--ds-control-border, var(--ds-border)) 30%
    );
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.ds-date-control__popup::-webkit-scrollbar-thumb:hover,
.ds-time-control__popup::-webkit-scrollbar-thumb:hover {
    background: var(--ds-control-focus, var(--ds-primary));
    border: 2px solid transparent;
    background-clip: padding-box;
}


/* =========================================================
   DATE / TIME — OPEN FRAME, CLASS-LIKE STRUCTURE
   The wrapper is the single outer frame. The input and popup
   are internal surfaces, like .ds-select-trigger + .ds-select-menu.
   ========================================================= */
.ds-date-control:has(.ds-date-control__popup.is-open),
.ds-time-control:has(.ds-time-control__popup.is-open) {
    border: 1px solid color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 13%, transparent) !important;
    overflow: visible !important;
}

/* Input is the trigger surface inside the outer frame. */
.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__input,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Popup is the menu surface inside the same visual frame. */
.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    border: 0 !important;
    border-radius: 0 0 9px 9px !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}


/* =========================================================
   DATE / TIME — OPEN STATE: SAME OUTER FRAME AS .DS-SELECT
   ========================================================= */
.ds-date-control:has(.ds-date-control__popup.is-open),
.ds-time-control:has(.ds-time-control__popup.is-open) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 13%, transparent) !important;
}

.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__input,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__input {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 9px 9px !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}


/* =========================================================
   DATE / TIME — LABEL OUTSIDE OPEN FRAME
   Label stays above the control, like "Class".
   The open frame contains only input + popup.
   ========================================================= */
.ds-date-control:has(.ds-date-control__popup.is-open),
.ds-time-control:has(.ds-time-control__popup.is-open) {
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Keep the actual control frame around input + popup only. */
.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__input,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__input {
    border: 1px solid color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    border-radius: 12px 12px 0 0 !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ds-control-surface, var(--ds-surface)) 82%, var(--ds-control-accent, var(--ds-accent)) 18%),
            var(--ds-control-surface, var(--ds-surface))
        ) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 13%, transparent) !important;
}

/* Popup continues the same control frame below the input. */
.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 38%, var(--ds-control-border, var(--ds-border))) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 13%, transparent) !important;
}

/* Remove the doubled middle glow so input + popup read as one frame. */
.ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
.ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-control-accent, var(--ds-accent)) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-control-border, var(--ds-border)) 70%, transparent) !important;
}


/* =========================================================
   DATE / TIME — ICONS MATCH SELECTOR INDICATORS
   ========================================================= */
.ds-date-control__input::-webkit-calendar-picker-indicator,
.ds-time-control__input::-webkit-calendar-picker-indicator {
    opacity: 1;
    width: 18px;
    height: 18px;
    margin: 0 2px 0 0;
    cursor: pointer;
    accent-color: var(--ds-control-accent, var(--ds-accent));
}

.ds-date-control__input,
.ds-time-control__input {
    accent-color: var(--ds-control-accent, var(--ds-accent));
}


/* =========================================================
   DATE / TIME — GENERAL ICON STYLE
   ========================================================= */
.ds-date-control,
.ds-time-control {
    --ds-datetime-icon-color: var(--ds-control-accent, var(--ds-accent));
    --ds-datetime-icon-size: 18px;
}

.ds-date-control__input,
.ds-time-control__input {
    padding-right: 44px !important;
}

.ds-date-control__input::-webkit-calendar-picker-indicator,
.ds-time-control__input::-webkit-calendar-picker-indicator {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--ds-datetime-icon-size) !important;
    height: var(--ds-datetime-icon-size) !important;
    margin: 0 2px 0 0 !important;
    cursor: pointer;
    filter: none !important;
    accent-color: var(--ds-datetime-icon-color) !important;
}

.ds-date-control__input[type="date"],
.ds-time-control__input[type="time"] {
    -webkit-appearance: auto;
    appearance: auto;
}

.ds-date-control__input,
.ds-time-control__input {
    accent-color: var(--ds-datetime-icon-color);
}


/* =========================================================
   DATE / TIME — THEME ICON COLOR
   Native picker remains functional; the visible glyph is
   rendered by the Date/Time library so it follows the
   active theme exactly.
   ========================================================= */
.ds-date-control,
.ds-time-control {
    --ds-datetime-icon-color: var(--ds-control-accent, var(--ds-accent));
}

/* Keep the native indicator clickable, but visually hidden. */
.ds-date-control__input::-webkit-calendar-picker-indicator,
.ds-time-control__input::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}

/* Date/Time icons are anchored to the input area, not the label/container. */
.ds-date-control__input-wrap,
.ds-time-control__input-wrap {
    position: relative;
    width: 100%;
    height: 44px;
}

.ds-date-control__input-wrap::after,
.ds-time-control__input-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--ds-datetime-icon-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

.ds-date-control__input-wrap::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H7V2Zm12.5 8h-15v9.5c0 .28.22.5.5.5h14c.28 0 .5-.22.5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h15V6.5a.5.5 0 0 0-.5-.5h-14Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H7V2Zm12.5 8h-15v9.5c0 .28.22.5.5.5h14c.28 0 .5-.22.5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h15V6.5a.5.5 0 0 0-.5-.5h-14Z'/%3E%3C/svg%3E");
}

.ds-time-control__input-wrap::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8.01 8.01 0 0 1-8 8Zm1-13h-2v6l5 3 1-1.73-4-2.27V7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8.01 8.01 0 0 1-8 8Zm1-13h-2v6l5 3 1-1.73-4-2.27V7Z'/%3E%3C/svg%3E");
}


/* Date/Time full-area pointer cursor fix */
.ds-date-control__input-wrap,
.ds-time-control__input-wrap,
.ds-date-control__input,
.ds-time-control__input {
    cursor: pointer !important;
}

.ds-date-control__input::-webkit-calendar-picker-indicator,
.ds-time-control__input::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
}

/* Date/Time readonly locale display - final */
.ds-date-control__input,
.ds-time-control__input { cursor:pointer !important; caret-color:transparent !important; user-select:none !important; }


/* Midnight Date/Time closed controls — exact Class selector surface */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__input {
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    color: var(--ds-text) !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__input:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__input:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__input:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__input:focus-visible,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__input:focus,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__input:focus-visible {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
    outline: none !important;
}

/* =========================================================
   FINAL: Midnight Date/Time closed + open surface mirrors Class
   Scoped strictly to Date/Time. .ds-select is untouched.
   ========================================================= */

/* CLOSED: outer wrapper is the surface; input is transparent inner content. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:not(:has(.ds-date-control__popup.is-open)) .ds-date-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:not(:has(.ds-time-control__popup.is-open)) .ds-time-control__input-wrap {
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:not(:has(.ds-date-control__popup.is-open)) .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:not(:has(.ds-time-control__popup.is-open)) .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-text) !important;
    box-sizing: border-box !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:not(:has(.ds-date-control__popup.is-open)) .ds-date-control__input-wrap:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:not(:has(.ds-time-control__popup.is-open)) .ds-time-control__input-wrap:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:not(:has(.ds-date-control__popup.is-open)):has(.ds-date-control__input:focus) .ds-date-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:not(:has(.ds-date-control__popup.is-open)):has(.ds-date-control__input:focus-visible) .ds-date-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:not(:has(.ds-time-control__popup.is-open)):has(.ds-time-control__input:focus) .ds-time-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:not(:has(.ds-time-control__popup.is-open)):has(.ds-time-control__input:focus-visible) .ds-time-control__input-wrap {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

/* OPEN: input + popup read as one Class-like outer control.
   The input is the trigger surface and the popup is the dropdown surface.
*/
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__input-wrap {
    border: 1px solid var(--ds-primary) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
    box-sizing: border-box !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-text) !important;
}

/* Popup itself uses the same elevated Midnight menu treatment as Class. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    border: 1px solid var(--ds-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
    background:
        linear-gradient(
            180deg,
            #1b3152 0%,
            #182a45 48%,
            var(--ds-surface) 100%
        ) !important;
    color: var(--ds-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ds-accent) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ds-border) 70%, transparent) !important;
    backdrop-filter: blur(16px) !important;
}

/* Match Class dropdown option surface and active state. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup button,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup button {
    color: var(--ds-text) !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup button:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup button:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup button:focus-visible,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup button:focus-visible {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 30%, transparent);
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup .is-selected,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup .is-selected {
    background: color-mix(in srgb, var(--ds-accent-soft) 72%, var(--ds-surface)) !important;
    color: var(--ds-text) !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--ds-accent) 24%, transparent);
}

/* Midnight popup scrollbar matches the Class scrollbar treatment. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup {
    scrollbar-width: thin;
    scrollbar-color:
        color-mix(in srgb, var(--ds-accent) 70%, transparent)
        color-mix(in srgb, var(--ds-surface) 82%, var(--ds-accent) 18%);
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup::-webkit-scrollbar,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup::-webkit-scrollbar {
    width: 8px;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup::-webkit-scrollbar-track,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ds-surface) 82%, var(--ds-accent) 18%);
    border-radius: 999px;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup::-webkit-scrollbar-thumb,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ds-accent) 70%, var(--ds-border) 30%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__popup::-webkit-scrollbar-thumb:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__popup::-webkit-scrollbar-thumb:hover {
    background: var(--ds-primary);
    border: 2px solid transparent;
    background-clip: padding-box;
}


/* FINAL: Midnight Date/Time blue frame encloses input + popup like Class */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Closed state: same dark outer surface as Class. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface {
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    box-shadow: none !important;
}

/* The visible input is the transparent inner trigger. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hover applies to the entire outer surface. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
}

/* OPEN: one blue frame surrounds BOTH the trigger and the popup. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open),
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) {
    border-color: var(--ds-primary) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
    border-radius: 10px !important;
}

/* Open input joins the same outer frame. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open) .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px 9px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Popup is inside the same frame; remove its own exterior blue ring. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--ds-border) 70%, var(--ds-primary) 30%) !important;
    border-radius: 0 0 9px 9px !important;
    box-shadow: none !important;
    margin: 0 !important;
}


/* FINAL-FIX: Midnight Date/Time outer frame encloses popup */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
        var(--ds-surface) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:hover,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 38%, var(--ds-border)) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open),
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) {
    border-color: var(--ds-primary) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        var(--ds-surface-hover) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface .ds-date-control__input,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface .ds-time-control__input {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--ds-border) 70%, var(--ds-primary) 30%) !important;
    border-radius: 0 0 9px 9px !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open) .ds-date-control__input-wrap,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) .ds-time-control__input-wrap {
    border: 0 !important;
    background: transparent !important;
}


/* FINAL-FIX: Midnight Date/Time open frame edge must be fully opaque.
   A dedicated overlay guarantees a continuous blue outline on all four sides,
   including the right edge where the popup background can visually soften it.
   Scoped only to Date/Time. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open)::after,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open)::after {
    content: "";
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ds-control-focus, var(--ds-primary)) !important;
    border-radius: 10px !important;
    pointer-events: none !important;
}


/* FINAL-FIX: Midnight Date/Time open frame uniform thickness like Class.
   Use a single 2px outline outside the existing 1px border so all four
   sides have identical visual thickness. Remove the extra pseudo-frame
   that could make different edges appear uneven. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open),
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) {
    border: 1px solid var(--ds-primary) !important;
    outline: 2px solid var(--ds-primary) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open)::after,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open)::after {
    content: none !important;
    display: none !important;
}


/* FINAL-FIX: Midnight Date/Time open frame exact Class focus thickness.
   Class uses a 1px focus border plus its 3px soft focus ring.
   Date/Time now use the same values on the single outer surface. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open),
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) {
    border: 1px solid var(--ds-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 13%, transparent) !important;
}


/* FINAL-FIX: Midnight Date/Time popup is inset inside outer frame.
   This keeps the popup background/content clear of the outer blue border,
   matching the visual spacing of the Class dropdown. */
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-date-control__surface:has(.ds-date-control__popup.is-open) .ds-date-control__popup,
[data-ds-theme="Midnight"] .ds-ride-request-form .ds-time-control__surface:has(.ds-time-control__popup.is-open) .ds-time-control__popup {
    width: calc(100% - 2px) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    box-sizing: border-box !important;
}


/* FIX: Add to screen sidebar item fits German label without overflowing. */
#installAppButton {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    justify-content: initial !important;
}

#installAppButton > span:last-child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 14px !important;
    letter-spacing: -0.1px !important;
    line-height: 1.2 !important;
}


/* FIX: notification popup stays fully inside the phone viewport */
@media (max-width: 767.98px) {
    .topbar-notifications .notification-popover {
        position: fixed !important;
        top: calc(var(--ds-topbar-height) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - var(--ds-topbar-height) - 24px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .topbar-notifications .notification-popup-item,
    .topbar-notifications .notification-popup-link,
    .topbar-notifications .notification-popup-mark {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* FINAL: notification popup viewport anchoring is page-independent.
   The popup is positioned against the phone viewport rather than the
   topbar/container of the current page, so its bounds are identical
   on every page. */
@media (max-width: 767.98px) {
    .notification-popover#notificationPopover {
        position: fixed !important;
        top: calc(var(--ds-topbar-height) + 8px) !important;
        right: 12px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - var(--ds-topbar-height) - 24px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
}