/* Mobile directions UI overrides. Keep route-specific styling out of mobile.html. */
.routeSheetBackdrop {
    background: rgba(0, 0, 0, 0.18) !important;
}

.routeSheet {
    background: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #111111) !important;
}

html[data-theme="light"] body #routes-modal.routeSheetBackdrop,
html[data-theme="light-accent"] body #routes-modal.routeSheetBackdrop,
body[data-theme="light"] #routes-modal.routeSheetBackdrop,
body[data-theme="light-accent"] #routes-modal.routeSheetBackdrop {
    background: #ffffff !important;
}

html[data-theme="light"] body #routes-modal .routeSheet,
html[data-theme="light-accent"] body #routes-modal .routeSheet,
body[data-theme="light"] #routes-modal .routeSheet,
body[data-theme="light-accent"] #routes-modal .routeSheet {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html[data-theme="light"] body #routes-modal .routeSheet__body,
html[data-theme="light-accent"] body #routes-modal .routeSheet__body,
body[data-theme="light"] #routes-modal .routeSheet__body,
body[data-theme="light-accent"] #routes-modal .routeSheet__body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.routeSheet__body {
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 20px) + 24px) !important;
}

.routeSheet__header {
    border-bottom: 0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.routeSheet__title {
    font-size: 25px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.routeSheet__subtitle {
    margin-top: 7px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.58)) !important;
}

.routeSheet__close {
    width: 38px !important;
    height: 38px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-primary, #111111) !important;
    box-shadow: none !important;
}

.routeFieldLabel {
    margin: 0 0 8px 2px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.54)) !important;
}

.routeField {
    min-height: 56px !important;
    padding: 0 13px !important;
    margin: 0 0 18px !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.routeField:focus-within {
    border-color: rgba(0, 0, 0, 0.24) !important;
    box-shadow: none !important;
}

.routeField input,
#modal-route-from-input,
#modal-route-to-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    caret-color: var(--primary-color, #ff4f2f) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    font-family: inherit !important;
}

.routeField input::placeholder {
    color: var(--text-secondary, rgba(0, 0, 0, 0.45)) !important;
    -webkit-text-fill-color: var(--text-secondary, rgba(0, 0, 0, 0.45)) !important;
}

.routeField button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
}

.routeField button i {
    color: var(--text-primary, #111111) !important;
}

.routeModes {
    gap: 10px !important;
    margin: 8px 0 12px !important;
}

.routeModeBtn {
    min-height: 48px !important;
    border-radius: 16px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-primary, #111111) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.routeModeBtn.active {
    background: var(--text-primary, #111111) !important;
    border-color: var(--text-primary, #111111) !important;
    color: var(--bg-primary, #ffffff) !important;
    box-shadow: none !important;
}

.routePrimaryBtn {
    min-height: 56px !important;
    border-radius: 18px !important;
    margin-top: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    background: var(--text-primary, #111111) !important;
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
    box-shadow: none !important;
}

.routeSheet .routePrimaryBtn,
.routeSheet .routePrimaryBtn * {
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
}

.routeSecondaryBtn {
    min-height: 46px !important;
    margin-top: 10px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.58)) !important;
}

[data-theme="dark"] .routeSheet {
    background: #080a0f !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .routeSheet__close,
[data-theme="dark"] .routeField,
[data-theme="dark"] .routeModeBtn,
[data-theme="dark"] .routeSecondaryBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

[data-theme="dark"] .routeField:focus-within {
    border-color: rgba(255, 255, 255, 0.26) !important;
}

[data-theme="dark"] .routeField button {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .routeField button i {
    color: #f8fafc !important;
}

[data-theme="dark"] .routeField input,
[data-theme="dark"] #modal-route-from-input,
[data-theme="dark"] #modal-route-to-input {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

[data-theme="dark"] .routeField input::placeholder {
    color: rgba(248, 250, 252, 0.48) !important;
    -webkit-text-fill-color: rgba(248, 250, 252, 0.48) !important;
}

[data-theme="dark"] .routeModeBtn.active {
    background: #f8fafc !important;
    color: #080a0f !important;
    border-color: #f8fafc !important;
}

[data-theme="dark"] .routePrimaryBtn {
    background: #f8fafc !important;
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}

[data-theme="dark"] .routeSheet .routePrimaryBtn,
[data-theme="dark"] .routeSheet .routePrimaryBtn *,
html[data-theme="dark"] body .routeSheet .routePrimaryBtn,
html[data-theme="dark"] body .routeSheet .routePrimaryBtn * {
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}

html body #routes-modal .routeField input,
html body #routes-modal #modal-route-from-input,
html body #routes-modal #modal-route-to-input,
html body #routes-modal .routeField__input,
html body #routes-modal input[type="text"]#modal-route-from-input,
html body #routes-modal input[type="text"]#modal-route-to-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
}

html body #routes-modal .routePrimaryBtn,
html body #routes-modal .routePrimaryBtn * {
    background-image: none !important;
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
}

html[data-theme="dark"] body #routes-modal .routePrimaryBtn,
html[data-theme="dark"] body #routes-modal .routePrimaryBtn * {
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}