/* Generated Legend Styles */

.legend-container {
    padding: 0;
}

.legend-category {
    margin-bottom: 1.5rem;
}

.legend-category:last-child {
    margin-bottom: 0;
}

.legend-category-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2c5530;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-label {
    font-size: 0.875rem;
    color: #333;
    line-height: 1.2;
}

/* Line samples */
.legend-line {
    height: 0;
    width: 30px;
    flex-shrink: 0;
    position: relative;
}

/* Fill samples */
.legend-fill {
    width: 20px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Icon samples */
.legend-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Marker samples */
.legend-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

.legend-marker.marker-start {
    background-color: #ef9700ff;
}

.legend-marker.marker-normal {
    background-color: #ef9700ff;
}

.legend-marker.marker-profile {
    background-color: #ef9700ff;
}

.legend-marker.marker-profile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 50%;
}

.legend-marker.marker-end {
    background-color: #9b59b6;
}

.legend-line.motorway {
    border-top: 8px solid #d8735e;
    position: relative;
}

.legend-line.motorway::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #ffa593;
}

.legend-line.trunk {
    border-top: 8px solid #C09C33;
    position: relative;
}

.legend-line.trunk::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #FFBB80;
}

.legend-line.primary {
    border-top: 8px solid #afafafff;
    position: relative;
}

.legend-line.primary::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #e0e0e0ff;
}

.legend-line.secondary {
    border-top: 8px solid #afafafff;
    position: relative;
}

.legend-line.secondary::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #e0e0e0ff;
}

.legend-line.tertiary {
    border-top: 8px solid #bdbdbdff;
    position: relative;
}

.legend-line.tertiary::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #F8F8F8;
}

.legend-line.cobblestones {
    border-top: 8px solid #b099acff;
    position: relative;
}

.legend-line.cobblestones::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #dccce2ff;
}

.legend-line.bike-lane {
    border-top: 2px solid #00C065;
}

.legend-line.bike-designated {
    border-top: 2px solid #00C065;
}

.legend-line.track-1 {
    border-top: 8px solid #A28A62;
    position: relative;
}

.legend-line.track-1::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    border-top: 6px solid #f7ecc6ff;
}

.legend-line.track-2-3 {
    border-top: 2px dashed #ab946d;
    border-bottom: 2px dashed #ab946d;
    background-color: #e9deb9;
    height: 8px;
    position: relative;
}

.legend-line.track-4-5 {
    border-top: 2px dashed #b56a53;
    border-bottom: 2px dashed #b56a53;
    background-color: #d7c793;
    height: 8px;
    position: relative;
}

.legend-line.path {
    border-top: 2px solid #9d8f82ff;
}

.legend-line.footway-no-bikes {
    border-top: 2px solid #9d8f82ff;
    border-top: 2px dashed #9d8f82ff;
    border-top-color: #9d8f82ff;
}

.legend-fill.water {
    background-color: #91d1eaff;
}

.legend-fill.forest {
    background-color: #bcdba3ff;
}

.legend-fill.farmland {
    background-color: #e3ebe0ff;
}

.legend-fill.meadow {
    background-color: #ddf5d4ff;
}

.legend-fill.sport {
    background-color: #bcc896ff;
}

.legend-fill.hospital {
    background-color: #ff000010;
}

.legend-fill.pedestrian {
    background-color: #f0e1cf;
}

.legend-line.railway {
    border-top: 1px solid #666666;
    height: 10px;
    background-image: url('/static/images/rail-track.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 8px;
    border-top-color: transparent;
}

.legend-line.steps {
    border-top: 1px solid #999999;
    height: 10px;
    background-image: url('/static/images/steps.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 8px;
    border-top-color: transparent;
}