:root{

    --route-color:#ff6b00;
    --marker-color:#0d6efd;

}

body{

    background:#f5f6fa;

}

#map{

    width:100%;
    height:750px;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.15);

}

#map-wrapper{

    position:relative;

}

/* ROUT EINFO */
.route-info{

    position:absolute;

    top:24px;
    left:24px;

    width:340px;

    z-index:9999;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    border-radius:24px;

    padding:26px;

    box-shadow:
            0 15px 40px rgba(0,0,0,.15);

}

.route-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.route-header h4{

    margin:0;

    font-size:28px;

    font-weight:700;

}

.route-header-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#edf4ff;

    display:flex;

    justify-content:center;
    align-items:center;

    color:#0d6efd;

    font-size:24px;

}

.route-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.route-marker{

    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    color:#fff;

    flex-shrink:0;

    font-size:20px;

}

.route-marker.start{

    background:#0d6efd;

}

.route-marker.finish{

    background:#ff6b00;

}

.route-content{

    flex:1;

}

.route-label{

    font-size:15px;

    color:#0d6efd;

    font-weight:600;

}

.route-label.destination{

    color:#ff6b00;

}

.route-address{

    margin-top:4px;

    font-size:18px;

    font-weight:600;

    line-height:1.3;

}

.route-line{

    width:3px;

    height:48px;

    margin-left:22px;

    margin-top:2px;

    margin-bottom:2px;

    background:

            repeating-linear-gradient(
                    to bottom,
                    #0d6efd,
                    #0d6efd 6px,
                    transparent 6px,
                    transparent 12px
            );

}

.route-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.stat{

    display:flex;

    gap:14px;

    align-items:center;

}

.stat i{

    font-size:28px;

    color:#0d6efd;

}

.stat small{

    display:block;

    color:#888;

    font-size:13px;

}

.stat strong{

    font-size:20px;

    font-weight:700;

}

.divider{

    width:1px;

    height:64px;

    background:#e5e5e5;

}


/* MARKER */
.route-marker{

    width:46px;
    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
            0 4px 15px rgba(0,0,0,.18);

}
.route-marker{
    background-color:#0d6efd;
}
.route-marker.end{
    background-color:#ff6b00;
}
.route-marker i{

    color:#fff;
    font-size:24px;

}