/* General control styling */
.leaflet-top.leaflet-right .leaflet-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Radar container */
.leaflet-radar {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 5px !important;
    box-shadow: none !important;
}

/* Layers button */
.leaflet-layers-button {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.leaflet-layers-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.leaflet-layers-button.active {
    background-color: #007bff;
    color: white;
}

/* Layers panel (open upward) */
.leaflet-layers-panel {
    position: absolute;
    bottom: 40px;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 300px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Panel header */
.leaflet-layers-header {
    font-size: 12px !important; /* Reduced from 14px, with !important to override */
    font-weight: 600;
    margin-bottom: 2px !important;
    color: #1a1a1a;
}

.leaflet-layers-panel[style*="display: none"] {
    opacity: 0;
    transform: translateY(10px); /* Slide down when hidden */
    pointer-events: none;
}

.leaflet-layers-panel[style*="display: block"] {
    opacity: 1;
    transform: translateY(0); /* Slide to original position when visible */
    pointer-events: auto;
}

/* Toggle controls within the panel */
.leaflet-radar-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

/* Hurricane subcategories */
.leaflet-hurricane-subcategories {
    margin-left: 15px; /* Indent the entire subcategory block under "Hurricane" */
}

/* Sub-toggle rows */
.leaflet-radar-toggle.leaflet-sub-toggle {
    margin-left: 5px; /* Additional indent for each subcategory row */
}

.leaflet-radar-toggle input[type="checkbox"] {
    margin-right: 8px;
    accent-color: #007bff;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.leaflet-radar-toggle label {
    font-size: 16px;/* * */
    color: #333;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}

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

/* Past Advisories dropdown and slider sizing */
#leaflet-storm-select {
    width: 150px;
    height: 32px;
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    margin-left: 8px;
}

#leaflet-storm-select option {
    font-size: 14px;
    padding: 4px;
}

.leaflet-historical-slider,
.leaflet-historical-gtwo-slider {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 8px 0;
    width: 100%;
}

.leaflet-historical-slider span:first-child,
.leaflet-historical-gtwo-slider span:first-child {
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
    min-width: 70px;
}

.leaflet-historical-slider-input {
    -webkit-appearance: none;
    width: 150px;
    height: 6px;
    background: rgba(0, 123, 255, 0.2);
    border-radius: 5px;
    outline: none;
    margin-bottom: 4px;
}

.leaflet-historical-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-historical-slider-input::-moz-range-thumb {
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-historical-slider-input::-ms-thumb {
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-historical-slider span:last-child,
.leaflet-historical-gtwo-slider span:last-child {
    font-size: 14px;
    color: #666;
    align-self: flex-start;
    margin-left: 0;
}

/* GOES opacity slider */
.leaflet-goes-opacity {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Align with checkbox */
    margin-top: 2px;
    margin-bottom: 2px;
}

.leaflet-goes-opacity span {
    font-size: 14px;
    color: #333;
    margin-right: 8px;
}

.leaflet-goes-opacity input[type="range"] {
    -webkit-appearance: none;
    background: rgba(0, 123, 255, 0.2);
    height: 6px;
    border-radius: 5px;
    outline: none;
    width: 150px;
}

.leaflet-goes-opacity input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-goes-opacity input[type="range"]::-moz-range-thumb {
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-goes-opacity input[type="range"]::-ms-thumb {
    background: #007bff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
}

/* Radar slider (centered at bottom) */
.leaflet-radar-slider {
    background-color: transparent;
    border-radius: 5px;
    padding: 5px;
    display: flex !important; /* Horizontal layout */
    flex-direction: column; /* Stack timestamp below slider-button group */
    align-items: center; /* Center the group horizontally */
    justify-content: center; /* Not critical, but keeps alignment */
}

.leaflet-radar-slider > .slider-group { /* New container for slider and button */
    display: flex !important;
    align-items: center; /* Align slider and button vertically */
    justify-content: center; /* Center them horizontally */
}

.leaflet-radar-slider input[type="range"] {
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.6);
    height: 6px;
    border-radius: 5px;
    outline: none;
    width: 200px;
    margin-right: 10px;
}

.leaflet-radar-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-radar-slider input[type="range"]::-moz-range-thumb {
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-radar-slider input[type="range"]::-ms-thumb {
    background: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.leaflet-radar-slider button {
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    color: #333;
    font-size: 12px;
}

/* Timestamp styling */
.leaflet-radar-timestamp {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: transparent !important;
    color: red;
    text-align: center;
    font-size: 12px;
    margin-top: 5px; /* Space between slider-button group and timestamp */
}

/* Center the radar slider */
.leaflet-bottom.leaflet-center {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}


/* Other map elements */
.mph-time {
    width: 50px;
    padding-top: 5px;
    text-align: center;
    margin-left: -15px;
    color: #CCCCCC;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.storm-name {
    color: red;
}

.geojson-layer {
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-opacity: 0.7;
    fill: #FFFFFF;
    fill-opacity: 0.2;
    smooth-factor: 1;
}

.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: none;
    padding: 10px;
}

.percentage-label span {
    font-size: 50px;
    opacity: 0.4;
    text-shadow: 2px 2px 4px black;
}

.legend {
    background: white;
    padding: 6px 8px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    border-radius: 4px;
}

.legend i {
    margin-right: 8px;
}

/* Hide default Leaflet controls */
.leaflet-control-zoom {
    display: none !important;
}

.leaflet-control-attribution {
    display: none;
}
/* Past track popup styling to match future track */
.past-track-popup {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 1.4;
}

/* Ensure popup wrapper matches existing style */
.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: none;
    padding: 10px;
}
.leaflet-pane.windForecastPane,
.leaflet-pane.windForecastPane path {
    opacity: 1 !important;
    fill-opacity: 1 !important;
    filter: none !important; /* Remove any filters that might affect blending */
}

.arrival-label div {
    /* Your custom adjustments here, e.g. */
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 25px !important;
    text-transform: uppercase;
    /* This will override or add to the inline styles */
}