html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}


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


/* Legend */

#legend {

    position: absolute;

    bottom: 30px;
    left: 30px;

    background: rgba(20, 20, 20, 0.55);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: white;

    padding: 12px;

    border-radius: 12px;

    width: 220px;

    font-size: 13px;

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow: 0 4px 20px rgba(0,0,0,0.25);

}


#legend h4 {

    margin: 0 0 10px 0;

}


.gradient {

    height: 15px;

    width: 100%;

    background:
    linear-gradient(to right,rgb(255, 213, 36) 0%,rgb(230, 133, 74) 15%,rgb(169, 126, 101) 29.9%,rgb(6, 116, 170) 30.099999999999998%,rgb(29, 182, 255) 40%,rgb(57, 194, 255) 50%,rgb(86, 206, 255) 60%,rgb(106, 212, 255) 100%);

    border-radius: 4px;

}


.labels {
    position: relative;
    width: 100%;
    height: 20px;
}

.labels span {
    position: absolute;
    transform: translateX(-50%);
}

.labels span:nth-child(1) {
    left: 0%;
    transform: translateX(0);
}

.labels span:nth-child(2) {
    left: 15%;
}

.labels span:nth-child(3) {
    left: 30%;
}

.labels span:nth-child(4) {
    left: 50%;
}

.labels span:nth-child(5) {
    left: 100%;
    transform: translateX(-100%);
}



/* popup */

.maplibregl-popup-content {

    background:#222;

    color:white;

    border-radius:6px;

}


.maplibregl-popup-close-button {

    color:white;

}

/* Layer toggle button */

#layer-toggle {

    position: absolute;

    top: 30px;
    left: 30px;

    z-index: 10;

}


#toggle-trees {

    background: rgba(20, 20, 20, 0.55);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: white;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 12px;

    padding: 10px 16px;

    font-size: 14px;

    cursor: pointer;

    box-shadow: 0 4px 20px rgba(0,0,0,0.25);

    transition: 
        background 0.2s ease,
        transform 0.2s ease;

}


#toggle-trees:hover {

    background: rgba(60, 60, 60, 0.75);

    transform: translateY(-1px);

}


#toggle-trees.active {

    background: rgba(65,255,97,0.35);

    border-color: rgba(65,255,97,0.7);

}

@media (max-width: 600px) {

    /* Legend - full width on mobile */
    #legend {

        left: 10px;
        right: 10px;
        bottom: 20px;

        width: auto;

        padding: 18px;

        border-radius: 16px;

        font-size: 16px;

    }


    #legend h4 {

        margin-bottom: 14px;
        font-size: 18px;

    }


    .gradient {

        height: 22px;

        border-radius: 6px;

    }


    .labels {

        height: 28px;

        font-size: 15px;

    }


    /* Layer toggle button - larger touch target */
    #layer-toggle {

        top: 15px;
        left: 15px;

    }


    #toggle-trees {

        padding: 14px 22px;

        font-size: 17px;

        border-radius: 14px;

        min-height: 52px;

    }

}