.sestavi-avatar-map{
    background:#fff;
    padding:42px;
    border-radius:34px;
    box-shadow:0 14px 40px rgba(0,0,0,0.08);
    margin:50px auto;
    overflow:hidden;
}

.sestavi-avatar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:55px;
    gap:20px;
}

.sestavi-avatar-header h2{
    margin:0;
    font-size:38px;
}

.sestavi-avatar-km{
    background:#eef5ee;
    padding:14px 18px;
    border-radius:999px;
    font-weight:700;
}

.sestavi-avatar-route{
    position:relative;
    height:220px;
}

.sestavi-avatar-line{
    position:absolute;
    top:78px;
    left:0;
    width:100%;
    height:12px;
    background:#e8ece8;
    border-radius:999px;
}

.sestavi-avatar-progress{
    position:absolute;
    top:78px;
    left:0;
    height:12px;
    background:linear-gradient(90deg,#5f8f63,#9ed08f);
    border-radius:999px;
    transition:width .5s ease;
    z-index:2;
}

.sestavi-avatar-walker{
    position:absolute;
    top:24px;
    transform:translateX(-50%) scaleX(-1);
    font-size:56px;
    z-index:5;
    transition:left .5s ease;
    animation:sestaviWalk 1.6s infinite ease-in-out;
}

@keyframes sestaviWalk{

    0%{
        transform:translateX(-50%) scaleX(-1) translateY(0px);
    }

    50%{
        transform:translateX(-50%) scaleX(-1) translateY(-6px);
    }

    100%{
        transform:translateX(-50%) scaleX(-1) translateY(0px);
    }
}

.sestavi-avatar-node{
    position:absolute;
    top:38px;
    transform:translateX(-50%);
    width:130px;
    text-align:center;
    z-index:3;
}

.sestavi-avatar-dot{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#d7ddd7;
    margin:28px auto 20px;
    border:6px solid #fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
    transition:all .25s ease;
}

.sestavi-avatar-node.active .sestavi-avatar-dot{
    background:#5f8f63;
    transform:scale(1.2);
    box-shadow:0 0 0 10px rgba(95,143,99,0.14);
}

.sestavi-avatar-label{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sestavi-avatar-label strong{
    font-size:16px;
}

.sestavi-avatar-label span{
    color:#6a7280;
    font-size:14px;
}

@media(max-width:768px){

    .sestavi-avatar-map{
        overflow-x:auto;
        padding:24px;
    }

    .sestavi-avatar-route{
        min-width:950px;
    }

    .sestavi-avatar-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .sestavi-avatar-header h2{
        font-size:30px;
    }
}