/* =============================================================================
   leaflet-radar.css — ClermontWX
   ============================================================================= */

/* --------------------------------------------------------------------------
   Leaflet chrome resets
   -------------------------------------------------------------------------- */

.leaflet-control-zoom        { display: none !important; }
.leaflet-control-attribution { display: none !important; }
.leaflet-radar-placeholder   { display: none !important; }


/* --------------------------------------------------------------------------
   Map container must be position:relative for rail to anchor to it
   (Leaflet already sets this, but be explicit)
   -------------------------------------------------------------------------- */

#map { position: relative !important; }



/* --------------------------------------------------------------------------
   Icon rail — absolutely positioned inside #map
   -------------------------------------------------------------------------- */

.leaflet-rail {
    position:       absolute;
    top:            10px;
    right:          10px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    z-index:        1000;
    pointer-events: auto;
}

.leaflet-rail-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      rgba(13,15,18,.85);
    border:          1px solid rgba(255,255,255,.14);
    border-radius:   8px;
    color:           #7a8494;
    cursor:          pointer;
    transition:      background .15s, border-color .15s, color .15s;
}

.leaflet-rail-btn svg {
    width:  16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

.leaflet-rail-btn:hover {
    background:   rgba(26,30,37,.95);
    border-color: rgba(255,255,255,.22);
    color:        #e8eaf0;
}

.leaflet-rail-btn.active {
    background:   rgba(170,187,204,.18);
    border-color: #aabbcc;
    color:        #aabbcc;
}

.leaflet-rail-btn.open {
    background:   rgba(19,22,27,.96);
    border-color: rgba(255,255,255,.22);
    color:        #e8eaf0;
}

.leaflet-rail-btn.active.open {
    border-color: #aabbcc;
    color:        #aabbcc;
}


/* --------------------------------------------------------------------------
   Popovers — absolutely positioned inside #map, to the left of the rail
   -------------------------------------------------------------------------- */

.leaflet-rail-popover {
    position:      absolute;
    right:         56px;
    min-width:     210px;
    background:    rgba(13,15,18,.96);
    border:        1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding:       12px 12px 10px;
    z-index:       1001;
}

/* Left accent bar */
.leaflet-rail-popover::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           18%;
    bottom:        18%;
    width:         2.5px;
    background:    linear-gradient(180deg, transparent, #aabbcc, transparent);
    border-radius: 2px;
    opacity:       .55;
}

.leaflet-pop-header {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .9px;
    text-transform: uppercase;
    color:          #7a8494;
    padding-bottom: 8px;
    margin-bottom:  8px;
    border-bottom:  1px solid rgba(255,255,255,.06);
}




/* --------------------------------------------------------------------------
   Toggle rows inside popovers
   -------------------------------------------------------------------------- */

.leaflet-radar-toggle {
    display:       flex;
    align-items:   center;
    padding:       3px 0;
    margin-bottom: 1px;
    position:      relative;
}

.leaflet-radar-toggle.leaflet-sub-toggle    { padding-left: 14px; }
.leaflet-radar-toggle.leaflet-sub-sub-toggle { padding-left: 24px; }

/* Hide native checkbox visually but keep it in DOM for state */
.leaflet-radar-toggle input[type="checkbox"] {
    position:   absolute;
    opacity:    0;
    width:      1px;
    height:     1px;
    pointer-events: none;
    margin:     0;
}

/* Label = the whole row, with switch built in via pseudo-elements */
.leaflet-radar-toggle label {
    display:     flex;
    align-items: center;
    gap:         9px;
    font-family: 'DM Sans', sans-serif;
    font-size:   12px;
    font-weight: 400;
    color:       #7a8494;
    cursor:      pointer;
    user-select: none;
    line-height: 1;
    padding:     2px 0;
    background:  transparent;
    border:      none;
    margin:      0;
    transition:  color .15s;
    width:       100%;
}

.leaflet-radar-toggle label:hover { color: #e8eaf0; }

/* Track */
.leaflet-radar-toggle label::before {
    content:       '';
    flex-shrink:   0;
    display:       inline-block;
    width:         28px;
    height:        16px;
    background:    #21262f;
    border:        1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    transition:    background .2s, border-color .2s;
}

/* Thumb */
.leaflet-radar-toggle label::after {
    content:        '';
    display:        block;
    position:       absolute;
    left:           3px;
    top:            50%;
    transform:      translateY(-50%);
    width:          10px;
    height:         10px;
    background:     #7a8494;
    border-radius:  50%;
    transition:     left .2s, background .2s;
    pointer-events: none;
}

/* Sub-toggle thumb offset accounts for indent */
.leaflet-radar-toggle.leaflet-sub-toggle label::after    { left: 17px; }
.leaflet-radar-toggle.leaflet-sub-sub-toggle label::after { left: 27px; }

/* Checked: track */
.leaflet-radar-toggle input[type="checkbox"]:checked ~ label::before {
    background:   rgba(170,187,204,.2);
    border-color: #aabbcc;
}

/* Checked: thumb slides right (28px track - 10px thumb - 2*3px padding = 12px travel) */
.leaflet-radar-toggle input[type="checkbox"]:checked ~ label::after {
    background: #aabbcc;
}

/* Base (no sub) checked thumb */
.leaflet-radar-toggle:not(.leaflet-sub-toggle):not(.leaflet-sub-sub-toggle) input[type="checkbox"]:checked ~ label::after {
    left: 15px;
}

.leaflet-radar-toggle.leaflet-sub-toggle input[type="checkbox"]:checked ~ label::after {
    left: 29px;
}

.leaflet-radar-toggle.leaflet-sub-sub-toggle input[type="checkbox"]:checked ~ label::after {
    left: 39px;
}

/* Checked: label text */
.leaflet-radar-toggle input[type="checkbox"]:checked ~ label { color: #e8eaf0; }


/* --------------------------------------------------------------------------
   Hurricane sub-indent
   -------------------------------------------------------------------------- */

.leaflet-hurricane-subcategories {
    border-left:   1px solid rgba(255,255,255,.06);
    margin-left:   14px;
    padding-left:  4px;
    margin-top:    4px;
    margin-bottom: 2px;
}


/* --------------------------------------------------------------------------
   Storm selector
   -------------------------------------------------------------------------- */

select#leaflet-storm-select {
    flex:               1;
    height:             26px;
    font-family:        'DM Sans', sans-serif;
    font-size:          11px;
    padding:            0 7px;
    background:         #1a1e25;
    border:             1px solid rgba(255,255,255,.12);
    border-radius:      4px;
    color:              #e8eaf0;
    cursor:             pointer;
    outline:            none;
    -webkit-appearance: none;
    appearance:         none;
    max-width:          140px;
}

select#leaflet-storm-select option {
    background: #1a1e25;
    color:      #e8eaf0;
}


/* --------------------------------------------------------------------------
   Sliders
   -------------------------------------------------------------------------- */

input[type="range"].leaflet-historical-slider-input,
input[type="range"].leaflet-goes-opacity-slider {
    -webkit-appearance: none;
    appearance:         none;
    height:             3px;
    border-radius:      2px;
    background:         #21262f;
    outline:            none;
    cursor:             pointer;
    flex:               1;
    min-width:          80px;
}

input[type="range"].leaflet-historical-slider-input::-webkit-slider-thumb,
input[type="range"].leaflet-goes-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              12px;
    height:             12px;
    border-radius:      50%;
    background:         #aabbcc;
    border:             2px solid #0d0f12;
    cursor:             pointer;
}

input[type="range"].leaflet-historical-slider-input::-moz-range-thumb,
input[type="range"].leaflet-goes-opacity-slider::-moz-range-thumb {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    #aabbcc;
    border:        2px solid #0d0f12;
    cursor:        pointer;
}

input[type="range"]:disabled {
    opacity: .3;
    cursor:  not-allowed;
}

.leaflet-historical-slider {
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     3px 0;
    width:       100%;
}

.leaflet-historical-slider span {
    font-family: 'DM Sans', sans-serif;
    font-size:   10px;
    color:       #7a8494;
    white-space: nowrap;
}

.leaflet-goes-opacity {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     3px 0;
}

.leaflet-goes-opacity span {
    font-family: 'DM Sans', sans-serif;
    font-size:   11px;
    color:       #7a8494;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Bottom playback bar
   -------------------------------------------------------------------------- */

.leaflet-bottom.leaflet-center {
    position:  absolute !important;
    bottom:    12px !important;
    left:      50% !important;
    transform: translateX(-50%) !important;
    z-index:   1000 !important;
}

.leaflet-radar-slider {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            4px !important;
    background:     rgba(13,15,18,.88) !important;
    border:         1px solid rgba(255,255,255,.14) !important;
    border-radius:  8px !important;
    padding:        8px 14px 6px !important;
}

.leaflet-radar-slider > .slider-group {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
}

.leaflet-radar-slider input[type="range"] {
    -webkit-appearance: none !important;
    appearance:         none !important;
    width:              180px !important;
    height:             3px !important;
    background:         #21262f !important;
    border-radius:      2px !important;
    outline:            none !important;
    cursor:             pointer !important;
}

.leaflet-radar-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width:              12px !important;
    height:             12px !important;
    border-radius:      50% !important;
    background:         #aabbcc !important;
    border:             2px solid #0d0f12 !important;
    cursor:             pointer !important;
}

.leaflet-radar-slider input[type="range"]::-moz-range-thumb {
    width:         12px !important;
    height:        12px !important;
    border-radius: 50% !important;
    background:    #aabbcc !important;
    border:        2px solid #0d0f12 !important;
    cursor:        pointer !important;
}

.leaflet-radar-slider button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           28px !important;
    height:          28px !important;
    padding:         0 !important;
    background:      #1a1e25 !important;
    border:          1px solid rgba(255,255,255,.12) !important;
    border-radius:   6px !important;
    color:           #aabbcc !important;
    cursor:          pointer !important;
    flex-shrink:     0 !important;
}

.leaflet-radar-slider button:hover {
    background: #21262f !important;
    color:      #e8eaf0 !important;
}

.leaflet-radar-timestamp {
    font-family:    'Space Grotesk', sans-serif !important;
    font-size:      11px !important;
    font-weight:    500 !important;
    letter-spacing: .3px !important;
    color:          #aabbcc !important;
    text-align:     center !important;
    min-height:     14px !important;
    background:     transparent !important;
    text-shadow:    none !important;
}


/* --------------------------------------------------------------------------
   Popups & tooltips
   -------------------------------------------------------------------------- */

.leaflet-popup-content-wrapper {
    background:    rgba(13,15,18,.96) !important;
    border:        1px solid rgba(255,255,255,.14) !important;
    border-radius: 8px !important;
    color:         #e8eaf0 !important;
}

.leaflet-popup-content {
    font-family: 'DM Sans', sans-serif !important;
    font-size:   13px !important;
    line-height: 1.55 !important;
    color:       #e8eaf0 !important;
    margin:      12px 16px !important;
}

.leaflet-popup-content strong { color: #aabbcc !important; }
.leaflet-popup-tip            { background: rgba(13,15,18,.96) !important; }
.leaflet-popup-close-button   { color: #7a8494 !important; }
.leaflet-popup-close-button:hover { color: #e8eaf0 !important; }

.leaflet-tooltip {
    background:    rgba(13,15,18,.96) !important;
    border:        1px solid rgba(255,255,255,.14) !important;
    border-radius: 6px !important;
    color:         #e8eaf0 !important;
    font-family:   'DM Sans', sans-serif !important;
    font-size:     12px !important;
    padding:       6px 10px !important;
}


/* --------------------------------------------------------------------------
   Map markers & misc
   -------------------------------------------------------------------------- */

.mph-time {
    width:54px;padding-top:4px;text-align:center;margin-left:-14px;
    color:#e8eaf0;font-family:'DM Sans',sans-serif;font-size:10px;
    text-shadow:1px 1px 3px rgba(0,0,0,.8);line-height:1.3;
}
.storm-name { color: #f87171; }
.past-track-popup { font-family:'DM Sans',sans-serif;font-size:12px;color:#e8eaf0;line-height:1.5; }
.arrival-label div { font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:25px !important;text-transform:uppercase; }
.geojson-layer { stroke:#FFFFFF;stroke-width:2;stroke-opacity:.7;fill:#FFFFFF;fill-opacity:.2; }
.leaflet-pane.windForecastPane,
.leaflet-pane.windForecastPane path { opacity:1 !important;fill-opacity:1 !important;filter:none !important; }
.legend { background:rgba(13,15,18,.92) !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:6px !important;color:#e8eaf0 !important;padding:6px 10px;font-family:'DM Sans',sans-serif;font-size:12px; }
.legend i { margin-right:8px; }
.percentage-label span { font-size:50px;opacity:.4;text-shadow:2px 2px 4px black; }


/* --------------------------------------------------------------------------
   Widget mode
   -------------------------------------------------------------------------- */

body.widget-mode .leaflet-rail { top:8px;right:8px;gap:4px; }
body.widget-mode .leaflet-rail-btn { width:30px;height:30px;border-radius:6px; }
body.widget-mode .leaflet-rail-btn svg { width:13px;height:13px; }
body.widget-mode .leaflet-radar-slider input[type="range"] { width:120px !important; }
body.widget-mode .leaflet-radar-timestamp { font-size:10px !important; }


/* --------------------------------------------------------------------------
   Archive controls (inside radar popover)
   -------------------------------------------------------------------------- */

.leaflet-pop-divider {
    height:        1px;
    background:    rgba(255,255,255,.06);
    margin:        10px 0 8px;
}

.leaflet-pop-subheader {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .9px;
    text-transform: uppercase;
    color:          #7a8494;
    margin-bottom:  6px;
}

.leaflet-archive-controls {
    margin-top:  4px;
    padding-top: 4px;
}

.leaflet-archive-row {
    display:     flex;
    align-items: center;
    gap:         7px;
    margin-bottom: 6px;
}

.leaflet-archive-lbl {
    font-family: 'DM Sans', sans-serif;
    font-size:   11px;
    color:       #7a8494;
    white-space: nowrap;
    min-width:   30px;
}

.leaflet-archive-input {
    flex:               1;
    height:             26px;
    font-family:        'DM Sans', sans-serif;
    font-size:          11px;
    padding:            0 6px;
    background:         #1a1e25;
    border:             1px solid rgba(255,255,255,.12);
    border-radius:      4px;
    color:              #e8eaf0;
    outline:            none;
    min-width:          0;
    -webkit-appearance: none;
    appearance:         none;
    color-scheme:       dark;
}

.leaflet-archive-input:focus {
    border-color: #aabbcc;
}

.leaflet-archive-load-btn {
    height:        26px;
    padding:       0 12px;
    background:    rgba(170,187,204,.15);
    border:        1px solid #aabbcc;
    border-radius: 4px;
    color:         #aabbcc;
    font-family:   'Space Grotesk', sans-serif;
    font-size:     11px;
    font-weight:   600;
    letter-spacing:.4px;
    cursor:        pointer;
    transition:    background .15s, color .15s;
    white-space:   nowrap;
    flex-shrink:   0;
}

.leaflet-archive-load-btn:hover {
    background: rgba(170,187,204,.25);
    color:      #e8eaf0;
}

.leaflet-archive-load-btn:disabled {
    opacity: .45;
    cursor:  not-allowed;
}

.leaflet-archive-progress {
    font-family: 'DM Sans', sans-serif;
    font-size:   11px;
    color:       #7a8494;
    white-space: nowrap;
}


    60%  { transform: scale(5);    opacity: 0.4; }
    100% { transform: scale(8);    opacity: 0;   }
}


/* --------------------------------------------------------------------------
   Lightning bolt markers — flash on arrival, persist dimmed
   -------------------------------------------------------------------------- */

.lightning-bolt {
    width:    16px;
    height:   16px;
    display:  flex;
    align-items:     center;
    justify-content: center;
    overflow: visible;
}

.lightning-bolt svg {
    overflow: visible; /* allow drop-shadow to bleed outside bbox */
}

/* Default (older strike): yellow bolt, dark outline, subtle glow */
.lightning-bolt svg .bolt-bg   { fill: #1a1200; }
.lightning-bolt svg .bolt-fill { fill: #facc15; opacity: 0.8; }

/* Flash state: bright white burst then settles */
.lightning-bolt.flash svg .bolt-fill {
    animation: bolt-flash 1.4s ease-out forwards;
}
.lightning-bolt.flash svg {
    animation: bolt-glow 1.4s ease-out forwards;
}

@keyframes bolt-glow {
    0%   { filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 2px #000); }
    20%  { filter: drop-shadow(0 0 4px #fffde7) drop-shadow(0 0 2px #000); }
    60%  { filter: drop-shadow(0 0 2px #facc15) drop-shadow(0 0 2px #000); }
    100% { filter: drop-shadow(0 0 2px #000); }
}

@keyframes bolt-flash {
    0%   { fill: #ffffff; opacity: 1;   }
    20%  { fill: #ffffff; opacity: 1;   }
    50%  { fill: #facc15; opacity: 0.95;}
    100% { fill: #facc15; opacity: 0.8; }
}