/* Spoločná mapa — statické štýly */

body { background: #f6f7fb; }

.hero { min-height: 100vh; display: flex; align-items: center; }

.topbar {
    background: #fff; border-bottom: 1px solid #e7e9f0;
    position: sticky; top: 0; z-index: 1100;
}

#map {
    height: 62vh; min-height: 340px;
    border-radius: 16px; border: 1px solid #e7e9f0;
}

.dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 4px; vertical-align: baseline;
}

.rank {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: #eef0f7; color: #4b5563; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.list-group-item.match { background: #fffbea; }
.list-group-item.match .rank { background: #fde68a; color: #92400e; }

.toastmsg {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    background: #16a34a; color: #fff; padding: 9px 20px;
    border-radius: 999px; z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,.2);
    animation: fadeout .5s ease 3.5s forwards;
}
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }

/* markery */
.pin {
    width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pin-match {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f59e0b; color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35);
    font-size: .95rem;
}

/* trip planner */
.pick {
    border: 1.5px solid #d6d9e4; background: #fff; border-radius: 999px;
    padding: 5px 13px; font-size: .85rem; cursor: pointer; user-select: none;
    transition: all .12s;
}
.pick.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.pick .badge { font-size: .68rem; vertical-align: 1px; }
.route-step {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
}
.route-step + .route-step { border-top: 1px dashed #e7e9f0; }
.route-no {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: #2563eb; color: #fff; font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.route-dist { margin-left: auto; color: #6b7280; font-size: .8rem; white-space: nowrap; }