* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* The radar is embedded in the weather page, so it must not lock the
   document viewport or override the page's typeface. */


/* ================================
   HEADER
================================ */

.topbar {

    position: relative;

    height: 64px;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    background:
        linear-gradient(
            135deg,
            black,skyblue
        );

    color: white;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, .25);
}

.map-section {
    position: relative;
    margin: 48px 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(70, 45, 20, 0.2);
}


.brand {

    display: flex;

    align-items: center;

    gap: 10px;
}


.brand-icon {
    font-size: 30px;
}


.brand h1 {

    font-size: 19px;

    font-weight: 700;
}


.brand span {

    font-size: 11px;

    opacity: .85;
}


/* ================================
   HEADER BUTTONS
================================ */

.header-actions {

    display: flex;

    gap: 8px;
}


.header-actions button {

    border: none;

    color: white;

    background:
        rgba(255,255,255,.14);

    padding:
        9px 13px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 13px;

    transition: .2s;
}


.header-actions button:hover {

    background:
        rgba(255,255,255,.25);
}


.header-actions button.active {

    background: white;

    color: #075cae;
}


/* ================================
   MAP
================================ */

#map {

    position: relative;

    width: 100%;
    height: 560px;

    background: #000000;

    z-index: 1;
}


.leaflet-container {

    background: #86b36d;
}

/* Keep raster weather tiles smoothly interpolated when Leaflet scales them. */
#map .leaflet-tile {
    image-rendering: auto;
}


/*
   Only the BASE MAP gets the
   green tint.

   Satellite is NOT filtered.
*/

.leaflet-tile-pane {

    filter:
        saturate(.75)
        hue-rotate(18deg);
}


/* ================================
   SATELLITE QUALITY
================================ */

/*
   Do NOT apply contrast/filter here.

   We want the original satellite
   pixels first.
*/

.leaflet-satellite-pane {
    filter: none;
}


/* ================================
   CONTROLS
================================ */

.map-controls {

    position: absolute;

    right: 16px;

    top: 85px;

    z-index: 1500;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 8px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.25);
}


.map-controls button {

    width: 42px;
    height: 42px;

    border: none;

    background: white;

    font-size: 24px;

    cursor: pointer;
}


.map-controls button:hover {

    background: #f1f1f1;
}


/* ================================
   INFO
================================ */

/* .info-panel {

    position: absolute;

    left: 16px;

    top: 82px;

    z-index: 1500;

    min-width: 190px;

    padding: 10px 13px;

    background:
        var(--bg-color);

    border-radius: 9px;

    box-shadow:
        0 3px 15px rgba(0,0,0,.22);

    font-size: 12px;
}


.info-row {

    display: flex;

    align-items: center;

    gap: 7px;
}


.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #19a852;

    box-shadow:
        0 0 6px #19a852;
} */


/* #frameTime {

    margin-top: 4px;

    color: #666;

    font-size: 11px;
} */


/* ================================
   LAYER PANEL
================================ */

.layers{
    position: absolute; 

    right: 16px;

    top: 180px;

    z-index: 1500;

   

    padding: 13px;

    /* display: none; */

    
    border-radius: 10px;

    

    font-size: 12px;
}
#layer-info{
    display: absolute;
    font-size: 20px;
    color:var(--bg-color);
    right: 0;
}

.layer-panel {

    display: none;
     background: rgba(20, 20, 30, 0.98);
  color: white;

    padding: 20px;
    border-radius: 5px;


   
}


.panel-title {

    font-weight: 700;

    margin-bottom: 10px;
}


.layer-panel label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 9px 0;

    cursor: pointer;
}


.opacity-label {

    flex-direction: column;

    align-items: stretch !important;

    gap: 4px !important;

    margin-top: 14px !important;
}


.opacity-label input {

    width: 100%;

    cursor: pointer;
}


/* ================================
   TIMELINE
================================ */

.timeline {

    position: absolute;

    left: 50%;

    bottom: 20px;

    transform:
        translateX(-50%);

    z-index: 1600;

    width:
        min(650px, calc(100% - 30px));

    padding:
        12px 16px;

    background:
        var(--glass);

    border-radius: 13px;

    box-shadow:
        0 5px 25px rgba(0,0,0,.28);
}


.timeline-top {

    display: flex;

    align-items: center;

    gap: 8px;
}


.timeline-top button {

    width: 34px;
    height: 30px;

    border: none;

    border-radius: 7px;

    background: #e9eef3;

    cursor: pointer;
}


#playBtn {

    background: #0877d1;

    color: white;
}


#timeLabel {

    margin-left: auto;

    font-size: 12px;

    font-weight: 600;
}


#timeline,
#timelineSlider {

    width: 100%;

    margin-top: 10px;

    cursor: pointer;
}


.timeline-labels {

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    color: #777;

    margin-top: 3px;
}


/* ================================
   LEGEND
================================ */

.legend {

    position: absolute;

    left: 16px;

    bottom: 20px;

    z-index: 1500;

    width: 175px;

    padding: 10px;

    background:
        rgba(255,255,255,.94);

    border-radius: 9px;

    box-shadow:
        0 3px 15px rgba(0,0,0,.22);

    font-size: 10px;
}


.legend-title {

    font-weight: 700;

    margin-bottom: 6px;
}


.legend-gradient {

    height: 9px;

    width: 100%;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #b7e7ff,
            #55aaff,
            #126cff,
            #11b72f,
            #ffff00,
            #ff8c00,
            #ff1d1d,
            #9b00ff
        );
}


.legend-values {

    display: flex;

    justify-content: space-between;

    margin-top: 4px;

    color: #666;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

    .topbar {

        height: 58px;

        padding: 0 10px;
    }




    #map {
        top: auto;
        height: 480px;
    }


    .brand h1 {
        font-size: 15px;
    }


    .brand-icon {
        font-size: 24px;
    }


    .header-actions {
        gap: 4px;
    }


    .header-actions button {

        padding:
            7px 8px;

        font-size: 11px;
    }


    .layer-panel {

        right: 10px;

        top: 140px;

        width: 170px;
    }


    .info-panel {

        left: 10px;

        top: 70px;
    }


    .legend {
        display: none;
    }


    .timeline {

        bottom: 10px;

        width:
            calc(100% - 20px);
    }

}

#map .green-base-pane {
    z-index: 200;
    filter:
        sepia(38%)
        saturate(135%)
        hue-rotate(48deg)
        brightness(92%)
        contrast(102%);
}

#map .satellite-pane {
    z-index: 450;
    filter: none !important;
}

#map .radar-pane {
    z-index: 500;
    filter: none !important;
}