.navPanel{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    width:390px;
    max-width:calc(100% - 30px);
    background:rgba(18,28,38,.96);
    color:#fff;
    border-radius:18px;
    padding:16px;
    z-index:9998;
    box-shadow:0 10px 35px rgba(0,0,0,.45);
    backdrop-filter:blur(10px);
}

.navTitle{
    font-size:18px;
    font-weight:bold;
    margin-bottom:5px;
}

.navMode{
    font-size:14px;
    color:#b8c7d4;
    margin-bottom:14px;
}

.navStats{
    display:flex;
    gap:10px;
    margin-bottom:12px;
}

.navStats div{
    flex:1;
    background:#203040;
    border-radius:12px;
    padding:12px;
}

.navStats span{
    display:block;
    font-size:12px;
    color:#b8c7d4;
    margin-bottom:6px;
}

.navStats b{
    font-size:20px;
}

.viaList{
    background:#26384a;
    color:#fff;
    border-radius:10px;
    padding:10px;
    margin-bottom:12px;
    font-size:14px;
}

.navActions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
}

.navActions button{
    width:100%;
    padding:12px 8px;
    border:none;
    border-radius:12px;
    color:white;
    font-size:14px;
    cursor:pointer;
}

#viewRouteBtn{background:#34495e;}
#startNavigationBtn{background:#0b7dda;}
#stopNavigationBtn{background:#e74c3c;}

.maneuverIndicator{
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;
    width:420px;
    max-width:calc(100% - 32px);
    min-height:86px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 18px;
    border-radius:18px;
    background:rgba(14,25,36,.96);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    pointer-events:none;
}

.maneuverIndicator.hidden{
    display:none;
}

.maneuverArrow{
    flex:0 0 64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#0b7dda;
    font-size:48px;
    font-weight:bold;
    line-height:1;
}

.maneuverDetails{
    min-width:0;
}

.maneuverText{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:20px;
    font-weight:700;
}

.maneuverDistance{
    margin-top:4px;
    color:#59c7ff;
    font-size:23px;
    font-weight:800;
}

.liveNavMarker{
    width:42px;
    height:42px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 0 18px rgba(0,128,255,.9);
    border:3px solid #0080ff;
    cursor:pointer;
}

.selectedMapPoint{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 0 18px rgba(0,0,0,.4);
    border:3px solid #00a8ff;
}

.mapClickPopup,
.gpsMenu{
    padding:12px;
    min-width:220px;
    color:#fff;
}

.mapClickTitle,
.gpsMenuTitle{
    font-size:17px;
    font-weight:bold;
    margin-bottom:8px;
}

.mapClickCoords{
    font-size:13px;
    color:#d7dfe8;
    margin-bottom:12px;
}

.mapClickPopup button,
.gpsMenu button{
    width:100%;
    padding:11px;
    border:none;
    border-radius:10px;
    background:#0b7dda;
    color:#fff;
    cursor:pointer;
    margin-top:7px;
}

.mapClickPopup .cancelMapPoint{
    background:#34495e;
}

.gpsMenu .gpsStop{
    background:#e74c3c;
}

@media(max-width:768px){

    .navPanel{
        left:10px;
        right:10px;
        bottom:10px;
        transform:none;
        width:auto;
        max-width:none;
        border-radius:16px;
        padding:14px;
    }

    .navTitle{font-size:16px;}
    .navStats b{font-size:18px;}

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

    .navActions button{
        padding:13px;
        font-size:15px;
    }

    #locateButton{
        right:15px;
        bottom:20px;
    }

    .maplibregl-ctrl-top-right{
        top:10px;
        right:10px;
    }

    .mapClickPopup,
    .gpsMenu{
        min-width:230px;
    }

    .mapClickPopup button,
    .gpsMenu button{
        padding:13px;
        font-size:15px;
    }
}


/* Live ETA badge under car / walk icon */
.liveNavMarker{
    position:relative;
    width:42px;
    min-height:42px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 0 18px rgba(0,128,255,.9);
    border:3px solid #0080ff;
    cursor:pointer;
}

.liveIcon{
    line-height:1;
}

.liveInfo{
    position:absolute;
    top:47px;
    left:50%;
    transform:translateX(-50%);
    min-width:92px;
    background:rgba(18,28,38,.96);
    color:#fff;
    border-radius:12px;
    padding:6px 8px;
    text-align:center;
    box-shadow:0 5px 18px rgba(0,0,0,.35);
    font-family:Arial,Helvetica,sans-serif;
    pointer-events:none;
}

.liveDistance{
    font-size:15px;
    font-weight:bold;
    line-height:18px;
}

.liveEta{
    font-size:12px;
    color:#b8c7d4;
    line-height:16px;
}

.gpsMenuSmall{
    font-size:13px;
    color:#b8c7d4;
    margin-bottom:8px;
}

@media(max-width:768px){
    .liveInfo{
        top:49px;
        min-width:96px;
        padding:7px 9px;
    }

    .liveDistance{
        font-size:16px;
    }

    .liveEta{
        font-size:12px;
    }
}


/* Mobile fix for ETA and cancel menu */
.liveNavMarker{
    position:relative !important;
    width:48px !important;
    height:48px !important;
    min-height:48px !important;
    border-radius:50% !important;
    background:#ffffff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:27px !important;
    box-shadow:0 0 18px rgba(0,128,255,.9) !important;
    border:3px solid #0080ff !important;
    cursor:pointer !important;
    z-index:99999 !important;
    touch-action:manipulation !important;
    pointer-events:auto !important;
}

.liveIcon{
    line-height:1 !important;
    pointer-events:none !important;
}

.liveInfo{
    position:absolute !important;
    top:54px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    min-width:104px !important;
    background:rgba(18,28,38,.97) !important;
    color:#fff !important;
    border-radius:12px !important;
    padding:7px 9px !important;
    text-align:center !important;
    box-shadow:0 5px 18px rgba(0,0,0,.38) !important;
    font-family:Arial,Helvetica,sans-serif !important;
    pointer-events:none !important;
    display:block !important;
}

.liveInfo.hidden{
    display:none !important;
}

.liveDistance{
    font-size:16px !important;
    font-weight:bold !important;
    line-height:18px !important;
}

.liveEta{
    font-size:12px !important;
    color:#b8c7d4 !important;
    line-height:16px !important;
}

.gpsMenuSmall{
    font-size:13px !important;
    color:#b8c7d4 !important;
    margin-bottom:8px !important;
}

.gpsMenu .gpsStop{
    background:#e74c3c !important;
}

@media(max-width:768px){
    .liveNavMarker{
        width:52px !important;
        height:52px !important;
        min-height:52px !important;
        font-size:29px !important;
    }

    .liveInfo{
        top:58px !important;
        min-width:112px !important;
        padding:8px 10px !important;
    }

    .liveDistance{
        font-size:17px !important;
    }

    .liveEta{
        font-size:12px !important;
    }

    .gpsMenu button{
        padding:14px !important;
        font-size:15px !important;
    }
}


/* Address search box */
.addressSearchBox{
    position:absolute;
    top:18px;
    left:18px;
    width:360px;
    max-width:calc(100% - 36px);
    z-index:9997;
    pointer-events:auto;
}

.addressSearchRow{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(18,28,38,.96);
    border-radius:16px;
    padding:8px;
    box-shadow:0 8px 28px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
}

#addressSearchInput{
    flex:1;
    border:none;
    outline:none;
    background:#ffffff;
    color:#111;
    border-radius:12px;
    padding:13px 14px;
    font-size:15px;
}

#addressSearchClose{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#34495e;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.addressSearchResults{
    margin-top:8px;
    background:rgba(18,28,38,.97);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    max-height:330px;
    overflow-y:auto;
}

.addressResult{
    padding:12px 14px;
    color:#fff;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.addressResult:hover{
    background:#203040;
}

.addressResult b{
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.addressResult span{
    display:block;
    font-size:12px;
    color:#b8c7d4;
    line-height:16px;
}

.addressResult.muted{
    color:#b8c7d4;
    cursor:default;
}

.addressSearchMarker{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    border:3px solid #00a8ff;
    box-shadow:0 0 18px rgba(0,0,0,.45);
}

.addressPopup{
    padding:12px;
    min-width:240px;
    color:#fff;
}

.addressPopupTitle{
    font-size:17px;
    font-weight:bold;
    margin-bottom:8px;
}

.addressPopupText{
    font-size:13px;
    color:#d7dfe8;
    line-height:18px;
    margin-bottom:12px;
}

.addressPopup button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#0b7dda;
    color:#fff;
    cursor:pointer;
    margin-top:7px;
    font-size:14px;
}

.addressPopup .addressCancel{
    background:#34495e;
}

@media(max-width:768px){

    .maneuverIndicator{
        top:78px;
        width:calc(100% - 20px);
        max-width:none;
        min-height:76px;
        padding:10px 13px;
        gap:12px;
        border-radius:15px;
    }

    .maneuverArrow{
        flex-basis:56px;
        height:56px;
        font-size:42px;
        border-radius:12px;
    }

    .maneuverText{
        font-size:17px;
    }

    .maneuverDistance{
        font-size:21px;
    }

    .addressSearchBox{
        top:10px;
        left:10px;
        right:10px;
        width:auto;
        max-width:none;
    }

    .addressSearchRow{
        border-radius:14px;
        padding:7px;
    }

    #addressSearchInput{
        padding:12px;
        font-size:15px;
    }

    #addressSearchClose{
        width:40px;
        height:40px;
        font-size:22px;
    }

    .addressSearchResults{
        max-height:260px;
    }

    .addressResult{
        padding:13px;
    }

    .addressPopup button{
        padding:13px;
        font-size:15px;
    }
}