/* ═══════════════════════════════════════════
   KE Stations — Pikat (Map Finder)
   Standalone page styles
═══════════════════════════════════════════ */

/* Fonts loaded by theme */

:root {
    --ke-bg: #07110f;
    --ke-card: rgba(255,255,255,.04);
    --ke-border: rgba(255,255,255,.10);
    --ke-muted: rgba(255,255,255,.65);
    --ke-accent: #4ee18f;
    --ke-gold: #d6b34a;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
    background: var(--ke-bg);
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}

/* ── Layout ── */

.ke-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border-right: 1px solid var(--ke-border);
    min-height: 100vh;
}

/* Desktop: bound the sidebar to the viewport so .ke-list can flex-fill and
   scroll internally (replaces the old max-height calc on .ke-list). */
@media (min-width: 992px) {
    .ke-panel {
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
    .ke-panel-inner {
        height: 100%;
        min-height: 0;
    }
}

.ke-map-wrap {
    height: 100vh;
    position: sticky;
    top: 0;
}

#map { width:100%; height:100%; }

/* Desktop: make the right column (map) sticky so it stays in view when sidebar scrolls */
@media (min-width: 992px) {
    .container-fluid.px-0 > .row.g-0 > main {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
    }
}

/* ── Components ── */

.ke-card {
    background: var(--ke-card);
    border: 1px solid var(--ke-border);
    border-radius: 14px;
}

.ke-chip {
    /* Chips are now real <button>s — reset UA button styles so they render
       identically to the old <span>s */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: inherit;
    text-align: center;
    display: inline-flex;
    align-items: center;
    min-height: 40px; /* accessible touch target */
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.03);
    color: var(--ke-muted);
    border-radius: 999px;
    padding: .5rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    transition: all .15s ease;
    white-space: nowrap;
}

.ke-chip.active {
    color: #fff;
    border-color: rgba(78,225,143,.45);
    background: rgba(78,225,143,.10);
}

.ke-chip:hover {
    border-color: rgba(255,255,255,.25);
    color: #fff;
}

/* ── Station list ── */

.ke-list {
    /* Flex-fill inside .ke-panel-inner (flex column) instead of a brittle
       max-height calc — the list takes whatever vertical space remains. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: .25rem;
}

.ke-list::-webkit-scrollbar { width:4px; }
.ke-list::-webkit-scrollbar-track { background:transparent; }
.ke-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }

.ke-item {
    cursor: pointer;
    transition: transform .08s ease, border-color .15s ease;
}

.ke-item:hover { transform:translateY(-1px); }

.ke-item.active {
    border-color: rgba(78,225,143,.5) !important;
    box-shadow: 0 0 0 3px rgba(78,225,143,.08) inset;
}

.ke-badge {
    border: 1px solid rgba(78,225,143,.3);
    background: rgba(78,225,143,.1);
    color: #fff;
    font-size: .72rem;
}

.ke-pill {
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.85);
    border-radius: 999px;
    font-size: .72rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}

/* ── City filter ── */

#cityFilter, #cityFilterMobile {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255,255,255,.03);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--ke-border);
    color: var(--ke-muted);
    border-radius: 10px;
    padding: .45rem 2rem .45rem .75rem;
    font-size: .82rem;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

#cityFilter:hover, #cityFilterMobile:hover { border-color:rgba(255,255,255,.25); color:#fff; }
#cityFilter:focus, #cityFilterMobile:focus { outline:none; border-color:rgba(78,225,143,.45); background-color:rgba(78,225,143,.05); color:#fff; }
#cityFilter option, #cityFilterMobile option { background:#07110f; color:#fff; }
#cityFilter.active, #cityFilterMobile.active { color:#fff; border-color:rgba(78,225,143,.45); background-color:rgba(78,225,143,.10); }

/* ── Map popup ── */

.ke-popup {
    position: absolute;
    transform: translate(-50%, calc(-100% - 14px));
    min-width: 280px;
    max-width: 350px;
    pointer-events: auto;
    z-index: 9999;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.5));
}

.ke-popup-card {
    background: rgba(8,18,15,.95);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 14px;
    backdrop-filter: blur(12px);
}

.ke-popup-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ke-popup-title { font-weight:700; font-size:14px; line-height:1.3; margin:0; }
.ke-popup-sub { color:rgba(255,255,255,.7); font-size:12px; margin-top:4px; }
.ke-popup-meta { margin-top:10px; display:flex; flex-wrap:wrap; gap:5px; }

.ke-popup-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    color: rgba(255,255,255,.85);
}

.ke-popup-actions { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.ke-popup-actions a, .ke-popup-actions button { border-radius:999px !important; font-weight:700; font-size:12px; padding:7px 12px; }
.ke-popup-wa { background:#25D366 !important; color:#fff !important; border:none !important; }
.ke-popup-wa:hover { background:#1ebe57 !important; }

.ke-popup-close {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink:0;
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    color: #fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.ke-popup-arrow {
    width: 12px; height: 12px;
    background: rgba(8,18,15,.95);
    border-left: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: absolute; left:50%; bottom:-6px;
    transform: translateX(-50%) rotate(45deg);
    border-bottom-left-radius: 3px;
}

/* ── Toast ── */

.ke-toast {
    position: fixed; right:16px; bottom:16px; z-index:99999;
    background: rgba(8,18,15,.95); border:1px solid rgba(255,255,255,.12);
    color: #fff; border-radius: 12px; padding:10px 14px;
    display: none; max-width:320px; backdrop-filter:blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.4); font-size:13px;
}

/* ── API error ── */

.ke-api-error { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; text-align:center; padding:40px; }
.ke-api-error-icon { font-size:42px; opacity:.5; }
.ke-api-error-title { font-size:18px; font-weight:700; color:#fff; }
.ke-api-error-sub { color:rgba(255,255,255,.55); font-size:13px; max-width:340px; line-height:1.6; }

#q::placeholder, #qMobile::placeholder { color:rgba(255,255,255,.45); }

/* ── Mobile header ── */

.ke-mobile-topbar {
    background: var(--ke-bg);
    border-bottom: 1px solid var(--ke-border);
    padding: 12px 16px;
}

/* ── Mobile bottom bar ── */

.ke-mobile-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px;
    background: linear-gradient(to top, var(--ke-bg), transparent);
    pointer-events: none;
}

.ke-mobile-bottom > * { pointer-events: auto; }

/* ── Responsive ── */

@media (max-width:991.98px) {
    .ke-panel { min-height:auto; border-right:none; }
    .ke-map-wrap {
        height: 100svh;
        height: 100dvh;
        position: relative;
        padding-top: calc(54px + env(safe-area-inset-top));
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    #map {
        height: calc(100svh - 54px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        height: calc(100dvh - 54px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .ke-list { max-height:none; }
}

@media (max-width:575.98px) {
    .ke-popup { min-width:240px; max-width:300px; }
    .ke-popup-card { padding:12px; }
    .ke-popup-title { font-size:13px; }
    .ke-popup-chip { font-size:10px; padding:2px 6px; }
    .ke-popup-actions a, .ke-popup-actions button { font-size:11px; padding:6px 10px; }
}

/* ── Preloader ── */

.ke-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ke-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s ease, visibility .4s ease;
}

.ke-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ke-preloader-inner {
    text-align: center;
}

.ke-preloader-logo {
    margin-bottom: 24px;
    opacity: .8;
}

.ke-preloader-bar {
    width: 180px;
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto 14px;
}

.ke-preloader-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--ke-accent), rgba(78,225,143,.4));
    border-radius: 999px;
    animation: kePreloaderSlide 1.2s ease-in-out infinite;
}

@keyframes kePreloaderSlide {
    0%   { transform: translateX(-100%); width: 30%; }
    50%  { width: 60%; }
    100% { transform: translateX(350%); width: 30%; }
}

.ke-preloader-text {
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .05em;
}

/* ── Offcanvas backdrop fix ── */

.offcanvas-backdrop {
    background: rgba(0,0,0,.6) !important;
}

/* Force backdrop cleanup */
.offcanvas:not(.show) + .offcanvas-backdrop,
.offcanvas-backdrop.hide {
    display: none !important;
}

/* ── User position pulse ── */

@keyframes kePulse {
    0%   { transform: scale(1); opacity: .8; }
    50%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* ── Active station card gradient ── */

.ke-item.active {
    border-image: linear-gradient(135deg, rgba(78,225,143,.5), rgba(78,225,143,.15)) 1 !important;
    border-width: 1px !important;
    border-style: solid !important;
    background: rgba(78,225,143,.04) !important;
}

/* ── Filter badge on button ── */

.ke-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ke-accent);
    color: #07110f;
    font-size: .65rem;
    font-weight: 800;
    margin-left: 6px;
}

/* ── Chip count ── */

.ke-chip-count {
    font-size: .65rem;
    opacity: .5;
    margin-left: 2px;
}

.ke-chip.active .ke-chip-count { opacity: .8; }

/* ── Empty state ── */

.ke-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,.4);
}

.ke-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: .3;
}

.ke-empty-title {
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    margin-bottom: 6px;
}

.ke-empty-sub {
    font-size: .78rem;
    line-height: 1.5;
}

/* ── Mobile peek card (bottom sheet) ── */

.ke-peek {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 9998;
    transform: translateY(calc(100% + 64px));
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.ke-peek.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.ke-peek-card {
    background: rgba(8,18,15,.96);
    border-top: 1px solid rgba(78,225,143,.2);
    backdrop-filter: blur(16px);
    padding: 16px 20px 20px;
    border-radius: 20px 20px 0 0;
}

.ke-peek-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    margin: 0 auto 14px;
}

.ke-peek-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.ke-peek-addr {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 10px;
}

.ke-peek-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.ke-peek-actions {
    display: flex;
    gap: 8px;
}

.ke-peek-actions .btn { flex: 1; font-size: .78rem; font-weight: 700; border-radius: 12px; }

/* ── Google Maps controls dark theme ── */

.gm-style .gm-style-mtc button,
.gm-style .gm-bundled-control button,
.gm-style .gm-fullscreen-control {
    background: rgba(8,18,15,.9) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}

.gm-style .gm-bundled-control .gmnoprint > div {
    background: rgba(8,18,15,.9) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

.gm-style .gm-bundled-control .gmnoprint button img {
    filter: invert(1) !important;
}

/* ── Desktop search box ── */

.ke-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    border-radius: 12px;
    padding: 0 12px;
    transition: border-color .2s, box-shadow .2s;
}

.ke-search-box:focus-within {
    border-color: rgba(78,225,143,.4);
    box-shadow: 0 0 0 3px rgba(78,225,143,.08);
}

.ke-search-icon {
    color: rgba(255,255,255,.35);
    font-size: .9rem;
    flex-shrink: 0;
}

.ke-search-input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 10px;
    color: #fff;
    font-size: .85rem;
    outline: none;
    min-width: 0;
}

.ke-search-input::placeholder {
    color: rgba(255,255,255,.35);
}

.ke-search-kbd {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .65rem;
    color: rgba(255,255,255,.35);
    font-family: inherit;
    flex-shrink: 0;
}

/* ── Desktop sidebar polish ── */

.ke-panel .btn-success {
    background: var(--ke-accent) !important;
    border-color: var(--ke-accent) !important;
    color: #07110f !important;
}

.ke-panel .btn-success:hover {
    background: #3dd47a !important;
}

.ke-panel .btn-outline-light {
    border-color: var(--ke-border) !important;
    color: rgba(255,255,255,.7) !important;
}

.ke-panel .btn-outline-light:hover {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
}

/* ── Active filters indicator ── */

.ke-active-filters {
    display: flex;
    align-items: center;
}

/* ── Hover highlight marker from list ── */

.ke-item:hover {
    border-color: rgba(78,225,143,.3) !important;
    background: rgba(78,225,143,.03);
}

/* ── Station list items polish ── */

.ke-item .btn-success {
    font-size: .72rem !important;
    padding: 5px 10px !important;
}

.ke-item .btn-outline-light {
    font-size: .72rem !important;
    padding: 5px 8px !important;
}

/* ── Sidebar scrollbar ── */

.ke-panel::-webkit-scrollbar { width: 3px; }
.ke-panel::-webkit-scrollbar-track { background: transparent; }
.ke-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ── Desktop bottom info ── */

.ke-panel-footer {
    font-size: .72rem;
    color: rgba(255,255,255,.3);
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--ke-border);
}

.ke-panel-footer kbd {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .62rem;
    color: rgba(255,255,255,.4);
}

.ke-search-box:focus-within .ke-search-kbd { display: none; }

/* ── Force dark theme over Bootstrap defaults ── */

body, .ke-panel, .offcanvas {
    background: var(--ke-bg) !important;
    color: #fff !important;
}

.form-control, .input-group-text {
    background: rgba(255,255,255,.04) !important;
    border-color: var(--ke-border) !important;
    color: #fff !important;
}

.form-control:focus {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(78,225,143,.4) !important;
    box-shadow: 0 0 0 3px rgba(78,225,143,.08) !important;
    color: #fff !important;
}

.btn-close-white {
    filter: invert(1) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--ke-border);
}

.badge {
    font-weight: 700;
}

/* ── Redesigned mobile offcanvas ── */

.ke-offcanvas-map {
    height: 78vh !important;
    max-height: calc(100dvh - 80px) !important;
    background: var(--ke-bg) !important;
    border: none !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5) !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}

.ke-oc-handle-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: pointer;
}

.ke-oc-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}

.ke-oc-header {
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--ke-border);
}

.ke-oc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.ke-oc-subtitle {
    font-size: .75rem;
    color: rgba(255,255,255,.45);
    margin-top: 2px;
}

.ke-oc-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .8rem;
    transition: background .15s, color .15s;
}

.ke-oc-close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.ke-oc-filters-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ke-oc-filters-row::-webkit-scrollbar { display: none; }

.ke-oc-chips-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}

.ke-oc-chips-scroll::-webkit-scrollbar { display: none; }

.ke-oc-chips-scroll .ke-chip {
    margin-bottom: 6px;
}

.ke-oc-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Override Bootstrap offcanvas defaults */
.ke-offcanvas-map .offcanvas-header,
.ke-offcanvas-map .offcanvas-body {
    display: none !important;
}

/* ═══════════════════════════════════════════
   PWA Install Modal
═══════════════════════════════════════════ */

.ke-pwa-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .3s ease;
}

.ke-pwa-overlay.is-visible {
    opacity: 1;
}

.ke-pwa-modal {
    background: linear-gradient(170deg, #0d1b15 0%, #07110f 100%);
    border: 1px solid rgba(78,225,143,.18);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
    transform: translateY(20px) scale(.96);
    transition: transform .3s ease;
}

.ke-pwa-overlay.is-visible .ke-pwa-modal {
    transform: translateY(0) scale(1);
}

.ke-pwa-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .7rem;
    transition: background .15s, color .15s;
}

.ke-pwa-close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.ke-pwa-header {
    text-align: center;
    margin-bottom: 20px;
}

.ke-pwa-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 2px solid rgba(78,225,143,.2);
    box-shadow: 0 8px 24px rgba(78,225,143,.15);
    margin-bottom: 12px;
}

.ke-pwa-app-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.ke-pwa-app-by {
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    margin-top: 2px;
}

.ke-pwa-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 24px;
}

.ke-pwa-accent {
    color: var(--ke-accent);
}

.ke-pwa-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.ke-pwa-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ke-pwa-benefit-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(78,225,143,.1);
    border: 1px solid rgba(78,225,143,.2);
    color: var(--ke-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.ke-pwa-benefit-ic--blue {
    background: rgba(59,130,246,.1);
    border-color: rgba(59,130,246,.2);
    color: #60a5fa;
}

.ke-pwa-benefit-ic--gold {
    background: rgba(214,179,74,.1);
    border-color: rgba(214,179,74,.2);
    color: #d6b34a;
}

.ke-pwa-benefit-ic--purple {
    background: rgba(168,85,247,.1);
    border-color: rgba(168,85,247,.2);
    color: #a855f7;
}

.ke-pwa-benefit strong {
    font-size: .82rem;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.ke-pwa-benefit p {
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
    margin: 0;
}

.ke-pwa-install-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--ke-accent);
    color: #07110f;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, transform .1s;
    margin-bottom: 10px;
}

.ke-pwa-install-btn:hover {
    background: #3dd47a;
}

.ke-pwa-install-btn:active {
    transform: scale(.98);
}

.ke-pwa-later {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.4);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s;
}

.ke-pwa-later:hover {
    color: rgba(255,255,255,.7);
}

@media (max-width: 480px) {
    .ke-pwa-modal {
        padding: 24px 20px;
        border-radius: 20px;
    }
    .ke-pwa-icon {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }
    .ke-pwa-title {
        font-size: 1.05rem;
    }
    .ke-pwa-benefit-ic {
        width: 34px;
        height: 34px;
        font-size: .85rem;
    }
}

/* ═══════════════════════════════════════════
   Refined Sidebar Layout
═══════════════════════════════════════════ */

.ke-panel-inner {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 14px;
}

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

.ke-panel-logo img {
    width: 200px;
    max-width: 100%;
    height: auto;
}

.ke-panel-badge {
    border: 1px solid rgba(78,225,143,.3);
    background: rgba(78,225,143,.1);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.ke-panel-desc {
    color: rgba(255,255,255,.55);
    font-size: .84rem;
    line-height: 1.55;
    margin: 0;
}

.ke-panel-actions {
    display: flex;
    gap: 8px;
}

.ke-btn-locate {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ke-accent);
    color: #07110f;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
    text-decoration: none;
}

.ke-btn-locate:hover { background: #3dd47a; }
.ke-btn-locate:active { transform: scale(.97); }

.ke-btn-locate--sm {
    flex: none;
    padding: 8px 14px;
    font-size: .78rem;
    border-radius: 10px;
}

.ke-btn-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    flex-shrink: 0;
}

.ke-btn-reset:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

.ke-btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.7);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s;
}

.ke-btn-filter:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.ke-panel-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ke-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ke-panel-status {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    min-height: 18px;
}

/* ── Mobile top bar: app-style ── */

.ke-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(7,17,15,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ke-border);
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
}

.ke-mobile-topbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ke-mobile-topbar-inner .ke-mobile-search-trigger {
    flex: 1;
    min-width: 0;
}

.ke-mobile-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ke-mobile-logo img {
    height: 24px;
    width: auto;
}

.ke-mobile-search-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.5);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: .8rem;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
    min-width: 0;
}

.ke-mobile-search-trigger:hover,
.ke-mobile-search-trigger:active {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.7);
}

.ke-mobile-search-trigger i {
    flex-shrink: 0;
    font-size: .85rem;
}

.ke-mobile-search-trigger span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Topbar locate button ── */

.ke-mobile-locate-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ke-accent);
    color: #07110f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .15s, background .15s;
    box-shadow: 0 4px 12px rgba(78,225,143,.3);
}

.ke-mobile-locate-btn:hover {
    background: #3dd47a;
}

.ke-mobile-locate-btn:active {
    transform: scale(.92);
}

/* ── Override theme's global input styles (leaked via wp_head) ── */

input.ke-search-input[type="text"],
input.ke-city-combo-input[type="text"] {
    background-color: transparent !important;
    height: 52px !important;
    width: 100% !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: .9rem !important;
    padding: 0 10px !important;
}

/* ── Remove yellow tap highlight + autofill backgrounds ── */

.ke-city-combo-toggle,
.ke-city-combo-input,
.ke-city-combo-opt,
.ke-bottom-nav-item,
.ke-mobile-locate-btn,
.ke-mobile-search-trigger,
.ke-search-input,
.ke-btn-locate,
.ke-btn-reset,
.ke-btn-filter,
button {
    -webkit-tap-highlight-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 30px rgba(11,21,18,.98) inset !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: #fff;
}

input:focus,
button:focus,
button:focus-visible {
    outline: none;
}

.ke-search-input:focus,
.ke-city-combo-input:focus {
    outline: none;
    box-shadow: none;
}

/* ── City searchable combo ── */

.ke-city-combo {
    position: relative;
    flex: 1;
    min-width: 0;
    margin-bottom: 15px;
}

.ke-city-combo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.6);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    text-align: left;
}

.ke-city-combo-toggle:hover {
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

.ke-city-combo.is-active .ke-city-combo-toggle {
    border-color: rgba(78,225,143,.4);
    background: rgba(78,225,143,.08);
    color: #fff;
}

.ke-city-combo.is-open .ke-city-combo-toggle {
    border-color: rgba(78,225,143,.4);
    background: rgba(255,255,255,.06);
    color: #fff;
}

.ke-city-combo-toggle > i:first-child {
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
    font-size: .85rem;
}

.ke-city-combo.is-active .ke-city-combo-toggle > i:first-child {
    color: var(--ke-accent);
}

.ke-city-combo-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ke-city-combo-caret {
    flex-shrink: 0;
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
}

.ke-city-combo.is-open .ke-city-combo-caret {
    transform: rotate(180deg);
}

.ke-city-combo-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(11,21,18,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--ke-border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.ke-city-combo.is-open > .ke-city-combo-panel,
.ke-city-combo.is-open .ke-city-combo-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.ke-city-combo-search {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    border-radius: 12px;
    padding: 0 12px;
    margin-bottom: 8px;
    transition: border-color .2s, box-shadow .2s;
}

.ke-city-combo-search:focus-within {
    border-color: rgba(78,225,143,.4);
    box-shadow: 0 0 0 3px rgba(78,225,143,.08);
}

.ke-city-combo-search i {
    color: rgba(255,255,255,.35);
    font-size: .9rem;
    flex-shrink: 0;
}

.ke-city-combo-input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 10px;
    color: #fff;
    font-size: .85rem;
    outline: none;
    min-width: 0;
    font-family: inherit;
}

.ke-city-combo-input::placeholder {
    color: rgba(255,255,255,.45);
}

.ke-city-combo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ke-city-combo-list::-webkit-scrollbar { width: 4px; }
.ke-city-combo-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.ke-city-combo-opt {
    padding: 9px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
}

.ke-city-combo-opt:hover,
.ke-city-combo-opt.is-highlighted {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.ke-city-combo-opt.is-selected {
    background: rgba(78,225,143,.12);
    color: var(--ke-accent);
    font-weight: 600;
}

.ke-city-combo-opt--reset {
    border-bottom: 1px solid var(--ke-border);
    border-radius: 0;
    margin-bottom: 4px;
    padding-bottom: 12px;
    color: rgba(255,255,255,.5);
    font-style: italic;
    font-size: .78rem;
}

.ke-city-combo-empty {
    padding: 16px 12px;
    text-align: center;
    color: rgba(255,255,255,.35);
    font-size: .8rem;
}

/* Mobile city combo opens upward (panel sits above toggle inside offcanvas) */
.ke-offcanvas-map .ke-city-combo-panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.ke-offcanvas-map .ke-city-combo.is-open .ke-city-combo-caret {
    transform: rotate(0deg);
}

/* ── App-style bottom nav ── */

.ke-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    background: rgba(7,17,15,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--ke-border);
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
}

.ke-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: .65rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color .15s;
    border-radius: 12px;
}

.ke-bottom-nav-item i {
    font-size: 1.15rem;
}

.ke-bottom-nav-item:hover,
.ke-bottom-nav-item:active {
    color: var(--ke-accent);
}

.ke-bottom-nav-item .ke-filter-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    margin-left: 0;
}

/* ── Favorites star button on station cards ── */
.ke-fav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    /* Expand the tap target to 44x44 without changing the visual size */
    position: relative;
}
.ke-fav-btn::before {
    content: "";
    position: absolute;
    inset: -7px; /* 30px + 2×7px = 44px hit area */
    border-radius: 50%;
}
.ke-fav-btn:hover {
    color: var(--ke-gold);
    border-color: rgba(214,179,74,.4);
    background: rgba(214,179,74,.08);
}
.ke-fav-btn:active { transform: scale(.92); }
.ke-fav-btn.is-fav {
    color: var(--ke-gold);
    border-color: rgba(214,179,74,.5);
    background: rgba(214,179,74,.12);
}

/* ── Favorites filter chip — neutral until active ── */
.ke-chip-fav i { color: rgba(255,255,255,.5); transition: color .15s; }
.ke-chip-fav.has-favorites i { color: var(--ke-gold); }
.ke-chip-fav.active {
    background: rgba(214,179,74,.15) !important;
    border-color: rgba(214,179,74,.5) !important;
    color: #fff !important;
}
.ke-chip-fav.active i { color: var(--ke-gold); }
.ke-chip-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--ke-gold);
    color: #07110f;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
}

/* ── Recently viewed chips ── */
.ke-recents {
    margin: 8px 0 4px;
}
.ke-recents-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.35);
    margin-bottom: 6px;
    font-weight: 700;
}
.ke-recents-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.ke-recents-scroll::-webkit-scrollbar { display: none; }
.ke-recent-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.7);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ke-recent-chip:hover {
    background: rgba(78,225,143,.08);
    color: #fff;
    border-color: rgba(78,225,143,.3);
}
.ke-recent-chip i { color: rgba(255,255,255,.4); font-size: .75rem; }

/* Offline-ready green dot indicator on bottom nav */
.ke-offline-ready-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ke-accent);
    box-shadow: 0 0 0 3px rgba(78,225,143,.2);
}

/* ── Route Planner Panel ── */
.ke-route-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.ke-route-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.ke-route-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9991;
    background: linear-gradient(180deg, #0d1b15 0%, #07110f 100%);
    border-top: 1px solid rgba(78,225,143,.2);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,.6);
    max-height: 88dvh;
    /* dvh respects mobile browser chrome AND collapses when iOS keyboard opens */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.85,.25,1);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.ke-route-panel.is-open {
    transform: translateY(0);
}

@media (min-width: 992px) {
    .ke-route-panel {
        top: 24px;
        bottom: 24px;
        left: auto;
        right: 24px;
        width: 420px;
        max-height: none;
        border-radius: 22px;
        transform: translateX(calc(100% + 40px));
        border: 1px solid rgba(78,225,143,.2);
    }
    .ke-route-panel.is-open { transform: translateX(0); }
}

.ke-route-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--ke-border);
    gap: 12px;
}
.ke-route-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ke-route-title i { color: var(--ke-accent); }
.ke-route-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}
.ke-route-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ke-route-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.ke-route-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ke-route-field { display: flex; flex-direction: column; gap: 6px; }
.ke-route-label {
    font-size: .7rem;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    font-weight: 700;
}

.ke-route-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color .15s, box-shadow .15s;
}
.ke-route-input-wrap:focus-within {
    border-color: rgba(78,225,143,.4);
    box-shadow: 0 0 0 3px rgba(78,225,143,.08);
}

.ke-route-input {
    flex: 1;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    /* 16px minimum on mobile prevents iOS auto-zoom on focus */
    font-size: 16px !important;
    padding: 14px 0 !important;
    height: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    outline: 0;
    min-width: 0;
    font-family: inherit;
}
.ke-route-input::placeholder { color: rgba(255,255,255,.4); }

/* Hide number input spinners */
.ke-route-input-num::-webkit-outer-spin-button,
.ke-route-input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ke-route-input-num { -moz-appearance: textfield; }

@media (min-width: 992px) {
    /* Desktop can use smaller font (no auto-zoom there) */
    .ke-route-input { font-size: .9rem !important; }
}

.ke-route-use-loc {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(78,225,143,.12);
    color: var(--ke-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: .8rem;
    transition: background .15s, transform .15s;
}
.ke-route-use-loc:hover { background: rgba(78,225,143,.2); }
.ke-route-use-loc:active { transform: scale(.92); }

.ke-route-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ke-route-results {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ke-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ke-route-stats {
    display: flex;
    gap: 8px;
}
.ke-route-stat {
    flex: 1;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ke-route-stat strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
}
.ke-route-stat span {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

.ke-route-stations-label {
    font-size: .7rem;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    font-weight: 700;
}

.ke-route-stations {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ke-route-stations::-webkit-scrollbar { width: 4px; }
.ke-route-stations::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.ke-route-stop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ke-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ke-route-stop:hover {
    background: rgba(78,225,143,.06);
    border-color: rgba(78,225,143,.25);
}

.ke-route-stop-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ke-gold);
    color: #07110f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
    flex-shrink: 0;
}

.ke-route-stop-info { min-width: 0; flex: 1; }
.ke-route-stop-name {
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ke-route-stop-meta {
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    margin-top: 2px;
}

.ke-route-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255,255,255,.4);
    font-size: .85rem;
}

/* ── Swap origin↔destination button ── */
.ke-route-inputs-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ke-route-swap {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(78,225,143,.3);
    background: rgba(11,21,18,.95);
    color: var(--ke-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    transition: transform .2s, background .15s;
}
@media (min-width: 992px) {
    .ke-route-swap { width: 38px; height: 38px; font-size: .9rem; }
}
.ke-route-swap:hover { background: rgba(78,225,143,.12); }
.ke-route-swap:active { transform: translateY(-50%) scale(.92); }
.ke-route-swap.is-swapping {
    animation: keRouteSwap .35s ease;
}
@keyframes keRouteSwap {
    50% { transform: translateY(-50%) rotate(180deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* ── Recent destinations chips ── */
.ke-route-recents {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.ke-route-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.65);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .7rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ke-route-recent-chip:hover {
    background: rgba(78,225,143,.06);
    color: #fff;
    border-color: rgba(78,225,143,.25);
}
.ke-route-recent-chip i { color: rgba(255,255,255,.4); font-size: .7rem; }

/* ── EV block ── */
.ke-route-ev-block {
    background: rgba(78,225,143,.04);
    border: 1px solid rgba(78,225,143,.18);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ke-route-ev-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: #fff;
    font-weight: 700;
}
.ke-route-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
}
.ke-route-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ke-accent);
    margin-top: 2px;
    cursor: pointer;
}
.ke-route-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ke-route-toggle-text strong {
    color: #fff;
    font-size: .82rem;
}
.ke-route-toggle-text small {
    color: rgba(255,255,255,.55);
    font-size: .7rem;
}

/* ── Skeleton loader ── */
.ke-route-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.ke-skel {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: keShimmer 1.4s ease-in-out infinite;
}
.ke-skel-stats { height: 60px; }
.ke-skel-line { height: 56px; }
@keyframes keShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Share route button ── */
.ke-route-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ke-border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .8rem;
    transition: background .15s, color .15s;
}
.ke-route-share-btn:hover {
    background: rgba(78,225,143,.08);
    color: var(--ke-accent);
    border-color: rgba(78,225,143,.3);
}

/* ── Segment info per stop (distance to next, ETA) ── */
.ke-route-stop-segs {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: .68rem;
    color: rgba(255,255,255,.5);
}
.ke-route-stop-segs span { display: inline-flex; align-items: center; }
.ke-route-stop-segs i { color: rgba(255,255,255,.4); font-size: .68rem; }

/* Bidirectional sync — highlight active stop in route list */
.ke-route-stop.is-active {
    background: rgba(78,225,143,.1);
    border-color: rgba(78,225,143,.4);
}

/* EV essential charging stop styling */
.ke-route-stop-num.is-recommended {
    background: var(--ke-accent);
    box-shadow: 0 0 0 3px rgba(78,225,143,.18);
}
.ke-route-stop.is-recommended {
    border-color: rgba(78,225,143,.3);
    background: rgba(78,225,143,.04);
}
.ke-route-stop-recommend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 2px 7px;
    background: rgba(78,225,143,.15);
    border: 1px solid rgba(78,225,143,.3);
    color: var(--ke-accent);
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.ke-route-stop-recommend i { font-size: .6rem; }

/* ── EV range warning ── */
.ke-route-ev-warning {
    background: rgba(214,179,74,.08);
    border: 1px solid rgba(214,179,74,.3);
    color: rgba(255,255,255,.85);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: .8rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ke-route-ev-warning i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ke-gold);
    font-size: .9rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Places Autocomplete — new PlaceAutocompleteElement (web component)
───────────────────────────────────────────────────────────────────────── */

/* The element itself: make it flex so it fills the wrap */
gmp-place-autocomplete.ke-place-ac {
    flex: 1;
    min-width: 0;
    /* CSS variables exposed by the element */
    --gmp-mat-color-surface: rgba(11,21,18,.98);
    --gmp-mat-color-on-surface: #fff;
    --gmp-mat-color-on-surface-variant: rgba(255,255,255,.6);
    --gmp-mat-color-primary: #4ee18f;
    --gmp-mat-color-outline-decorative: rgba(255,255,255,.1);
    --gmp-mat-color-outline: transparent;
    --gmp-mat-color-secondary-container: rgba(78,225,143,.12);
    --gmp-mat-color-on-secondary-container: #fff;
    --gmp-mat-color-hover-state: rgba(78,225,143,.08);
    --gmp-mat-font-family: 'Inter', sans-serif;
    --gmp-mat-font-size-medium: 16px;
}
gmp-place-autocomplete.ke-place-ac::part(input) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px !important;
    padding: 14px 0 !important;
    font-family: inherit !important;
}
gmp-place-autocomplete.ke-place-ac::part(prediction-list) {
    background: rgba(11,21,18,.98) !important;
    border: 1px solid var(--ke-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.5) !important;
    margin-top: 4px !important;
    z-index: 100000 !important;
}
gmp-place-autocomplete.ke-place-ac::part(prediction-item) {
    min-height: 44px;
    color: rgba(255,255,255,.85) !important;
    padding: 10px 14px !important;
}
gmp-place-autocomplete.ke-place-ac::part(prediction-item-icon) {
    filter: invert(.7);
}

/* Keep legacy .pac-container styles for safety while migration settles */
.pac-container {
    background: rgba(11,21,18,.98) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--ke-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.5) !important;
    margin-top: 4px;
    font-family: 'Inter', sans-serif !important;
    z-index: 100000 !important;
    pointer-events: auto;
}
.pac-item { min-height: 44px; display: flex; align-items: center; }
.pac-container::after { display: none !important; } /* hide "powered by Google" — keep clean */
.pac-item {
    padding: 8px 14px !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.75) !important;
    font-size: .82rem !important;
    cursor: pointer;
}
.pac-item:hover, .pac-item-selected {
    background: rgba(78,225,143,.08) !important;
    color: #fff !important;
}
.pac-item-query {
    color: #fff !important;
    font-size: .85rem !important;
}
.pac-matched { color: var(--ke-accent) !important; font-weight: 700 !important; }
.pac-icon { filter: invert(.7); }

/* ── Sidebar offline link ── */
.ke-panel-offline-link {
    margin-top: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ke-border);
    color: rgba(255,255,255,.7);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .72rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s;
    position: relative;
}
.ke-panel-offline-link:hover {
    background: rgba(78,225,143,.06);
    border-color: rgba(78,225,143,.2);
    color: #fff;
}
.ke-panel-offline-link i { color: var(--ke-accent); }
.ke-panel-offline-link .ke-offline-ready-dot {
    margin-left: auto;
    position: static;
}

/* ── Offcanvas reset button (small, inline next to close) ── */
.ke-oc-close.ke-oc-reset {
    color: rgba(255,255,255,.55);
}
.ke-oc-close.ke-oc-reset:hover {
    color: var(--ke-accent);
}

/* ── AdvancedMarkerElement HTML pins ── */
.ke-pin {
    position: relative;
    width: 36px;
    height: 45px;
    /* AdvancedMarker centers HTML content on the lat/lng by default.
       Shift up by 50% of own height so the pin's tip (bottom) sits at the lat/lng. */
    transform: translateY(-50%);
    transform-origin: 50% 100%;
    transition: transform .2s ease;
}
.ke-pin svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.ke-pin-badge,
.ke-pin-label {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--pin-fill, #4ee18f);
    font-weight: 800;
    font-size: 10px;
    font-family: Arial, sans-serif;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
.ke-pin-label { font-size: 12px; top: 17px; }
.ke-pin--lg { width: 40px; height: 50px; }
.ke-pin--lg .ke-pin-label { font-size: 13px; top: 18px; }

.ke-pin:hover { transform: translateY(-50%) scale(1.08); }
.ke-pin.is-bouncing {
    animation: kePinBounce .8s cubic-bezier(.36,.07,.19,.97);
}
@keyframes kePinBounce {
    0%,100% { transform: translateY(-50%); }
    25%     { transform: translateY(calc(-50% - 12px)); }
    50%     { transform: translateY(-50%); }
    75%     { transform: translateY(calc(-50% - 6px)); }
}

/* CSS glow pulse on station pins — replaces the old JS-driven
   google.maps.Circle overlays (87 circles + 50ms setInterval). */
.ke-pin--pulse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78,225,143,.4) 0%, rgba(78,225,143,0) 70%);
    animation: kePinGlow 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes kePinGlow {
    0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: .9;  transform: translate(-50%, -50%) scale(1.4); }
}

/* ── Reduced motion: kill decorative animations ── */
@media (prefers-reduced-motion: reduce) {
    .ke-preloader-fill,
    .ke-pin--pulse::after,
    .ke-pin.is-bouncing,
    .ke-user-dot-pulse,
    .ke-skel,
    .ke-ptr-indicator.is-refreshing i,
    .ke-route-swap.is-swapping {
        animation: none !important;
    }
    .ke-pin,
    .ke-item,
    .ke-chip,
    .ke-preloader {
        transition: none !important;
    }
}

/* ── Marker cluster (advanced marker) ── */
.ke-cluster {
    position: relative;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ke-cluster-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(78,225,143,.18);
}
.ke-cluster-ring--mid {
    inset: 18%;
    background: rgba(78,225,143,.35);
}
.ke-cluster-core {
    position: relative;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: var(--ke-accent);
    color: #07110f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 1.5px solid #07110f;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ── User-position dot (advanced marker) ── */
.ke-user-dot {
    position: relative;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
}
.ke-user-dot-core {
    position: absolute;
    inset: 4px;
    background: #00ffcc;
    border: 2px solid #07110f;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,255,204,.18);
}
.ke-user-dot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,255,204,.4);
    animation: keUserPulse 1.8s ease-out infinite;
}
@keyframes keUserPulse {
    0%   { transform: scale(.6); opacity: .8; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ── Pull-to-refresh indicator ── */
.ke-ptr-indicator {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, -40px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ke-accent);
    color: #07110f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .15s, transform .15s;
    z-index: 100;
    pointer-events: none;
    font-size: 1rem;
}
.ke-ptr-indicator.is-refreshing i {
    animation: kePtrSpin 1s linear infinite;
}
@keyframes kePtrSpin {
    to { transform: rotate(360deg); }
}

/* ── Drag handle for resizable bottom sheet ── */
.ke-oc-handle-wrap {
    touch-action: none; /* Required for drag-to-resize */
    cursor: ns-resize;
}
.ke-offcanvas-map {
    transition: none; /* Bootstrap's transition fights manual height changes */
}
.ke-offcanvas-map.show {
    /* Re-enable transition for opening only */
    transition: transform .3s ease, height .3s cubic-bezier(.2,.85,.25,1);
}

/* ── Map theme toggle (floating button on map) ── */
.ke-map-theme-toggle {
    position: absolute;
    top: calc(64px + env(safe-area-inset-top));
    right: 12px;
    z-index: 200;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,18,15,.9);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    transition: transform .15s, background .15s;
}
.ke-map-theme-toggle:hover { background: rgba(78,225,143,.15); }
.ke-map-theme-toggle:active { transform: scale(.92); }
@media (min-width: 992px) {
    .ke-map-theme-toggle { top: 16px; right: 16px; }
}

/* ── First-visit onboarding hint ── */
.ke-map-onboarding {
    position: absolute;
    top: calc(64px + env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 200;
    background: rgba(8,18,15,.95);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(78,225,143,.3);
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: .82rem;
    max-width: 90vw;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.85,.25,1), opacity .25s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ke-map-onboarding.is-visible {
    transform: translate(-50%, 8px);
    opacity: 1;
}
.ke-map-onboarding i { color: var(--ke-accent); font-size: 1rem; flex-shrink: 0; }
.ke-map-onboarding strong { color: var(--ke-accent); }
@media (min-width: 992px) {
    .ke-map-onboarding { top: 16px; }
}

/* ── Mobile peek close (X in corner) ── */
.ke-peek-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .75rem;
    z-index: 2;
    transition: background .15s, color .15s;
}
.ke-peek-close:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.ke-peek-card { position: relative; }

/* Offline pack: progress bar */
.ke-offline-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.ke-offline-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ke-accent), #3dd47a);
    border-radius: 999px;
    transition: width .3s ease;
}

.ke-offline-progress-text {
    font-size: .75rem;
    color: rgba(255,255,255,.55);
    text-align: center;
}

/* ── Safe area padding for PWA standalone mode ── */

@media (display-mode: standalone) {
    .ke-mobile-topbar {
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .ke-mobile-bottom {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .ke-peek-card {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .ke-offcanvas-map {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* ── Offline indicator (top, doesn't overlap bottom nav) ── */

.ke-offline-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: rgba(214,179,74,.95);
    color: #07110f;
    text-align: center;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top));
    font-size: .72rem;
    font-weight: 700;
    display: none;
}

.ke-offline-bar.is-visible { display: block; }

/* Push topbar down when offline bar visible */
.ke-offline-bar.is-visible + * .ke-mobile-topbar,
body:has(.ke-offline-bar.is-visible) .ke-mobile-topbar {
    top: 28px;
}

/* ── EV badge on map pins (stations with electric charging) ── */
.ke-pin-ev {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #f6c744;
    color: #07110f;
    border: 2px solid var(--pin-stroke, #07110f);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    pointer-events: none;
}

/* ── iOS "Add to Home Screen" hint ── */
.ke-ios-hint {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* above the bottom nav */
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 40px 12px 12px;
    background: rgba(10, 22, 16, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(78, 225, 143, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
}
.ke-ios-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ke-ios-hint-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    flex-shrink: 0;
}
.ke-ios-hint-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(255, 255, 255, 0.85);
    font-size: .82rem;
    line-height: 1.35;
}
.ke-ios-hint-text strong { color: #fff; font-size: .88rem; }
.ke-ios-share-ico { color: #4ee18f; }
.ke-ios-hint-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: .85rem;
    cursor: pointer;
}
@media (min-width: 992px) {
    .ke-ios-hint { max-width: 420px; left: auto; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .ke-ios-hint { transition: none; }
}