#directionsPanel{
    position:absolute;
    top:170px;
    right:18px;
    z-index:100000;
    width:340px;
    max-height:70vh;
    overflow:auto;
    padding:12px;
    border-radius:12px;
    background:rgba(7,17,30,.92);
    color:#fff;
    box-shadow:0 8px 28px rgba(0,0,0,.45);
    font-family:Arial,sans-serif;
}

#directionsPanel.hidden{
    display:none;
}

#directionsPanel h3{
    margin:0 0 10px;
    color:#ff2f7d;
}

.route-row{
    display:flex;
    gap:7px;
    margin-bottom:8px;
}

.route-row input{
    min-width:0;
    flex:1;
    padding:9px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:7px;
    background:rgba(255,255,255,.95);
    color:#111;
}

.route-actions{
    display:flex;
    gap:7px;
    margin-bottom:10px;
}

.route-actions button,
#openDirectionsButton{
    border:0;
    border-radius:7px;
    padding:9px 12px;
    cursor:pointer;
    color:#fff;
    background:#168cf0;
}

#openDirectionsButton{
    position:absolute;
    top:245px;
    right:18px;
    z-index:99999;
}

#routeSummary{
    margin:10px 0;
    padding:9px;
    border-radius:8px;
    background:rgba(255,255,255,.09);
}

#routeSteps{
    margin:0;
    padding-left:23px;
}

#routeSteps li{
    margin:8px 0;
    line-height:1.3;
}

/* ==========================================================
   RAZMAPS ALTERNATE ROUTES
   ========================================================== */

.razmaps-route-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.razmaps-route-heading small {
    opacity: 0.72;
}

.razmaps-route-choices {
    display: grid;
    gap: 8px;
}

.razmaps-route-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #b9c2cc;
    border-radius: 8px;
    background: #ffffff;
    color: #17202a;
    text-align: left;
    cursor: pointer;
}

.razmaps-route-choice:hover {
    border-color: #3779b8;
    background: #f3f8fd;
}

.razmaps-route-choice.active {
    border: 2px solid #1769aa;
    background: #eaf4fd;
    padding: 10px 11px;
}

.razmaps-route-name {
    grid-column: 1;
    font-weight: 700;
}

.razmaps-route-time {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 17px;
    font-weight: 700;
}

.razmaps-route-distance {
    grid-column: 1;
    font-size: 13px;
    opacity: 0.76;
}

@media (max-width: 600px) {
    .razmaps-route-choice {
        min-height: 58px;
    }
}