/* styles/map.css - Map and Radius Styles */

.map-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: left 0.3s ease;
    z-index: 0;
}

#map {
    height: 100%;
    width: 100%;
}

.radius-slider {
    width: 100%;
    margin: 10px 0;
}

.radius-input-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

.radius-input-container input[type="number"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.radius-input-container span {
    font-weight: bold;
    color: #666;
}

.radius-display {
    background: #4CAF50;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* Custom marker styles */
.club-marker {
    background-color: #ff6b35;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.top-club-marker {
    background-color: #ffd700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Legend Styles */
.legend {
    margin-top: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid #333;
    flex-shrink: 0;
}

.legend-marker.elite {
    background-color: #FFD700;
    border: 2px solid #FFA500;
    width: 14px;
    height: 14px;
}

.legend-marker.world-class {
    background-color: #FF8C00;
    border: 2px solid #FF6347;
    width: 12px;
    height: 12px;
}

.legend-marker.elite-national {
    background-color: #FF6B35;
    border: 1px solid #FF4500;
    width: 10px;
    height: 10px;
}

.legend-marker.top-national {
    background-color: #FF4500;
    border: 1px solid #DC143C;
    width: 9px;
    height: 9px;
}

.legend-marker.strong-national {
    background-color: #DC143C;
    border: 1px solid #B22222;
    width: 8px;
    height: 8px;
}

.legend-marker.professional {
    background-color: #B22222;
    border: 1px solid #8B0000;
    width: 7px;
    height: 7px;
}

.legend-marker.regional {
    background-color: #8B0000;
    border: 1px solid #696969;
    width: 6px;
    height: 6px;
}

.legend-marker.lower-league {
    background-color: #696969;
    border: 1px solid #2F4F4F;
    width: 5px;
    height: 5px;
}

.legend-marker.amateur {
    background-color: #2F4F4F;
    border: 1px solid #000000;
    width: 4px;
    height: 4px;
}