.sm-weather-stations {
    display: block;
    margin-top:40px;
    margin-bottom:40px;
}

.sm-weather-block{
    margin-top:45px;
}

.sm-weather-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.sm-weather-card {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.select2-container .select2-selection--single{
    height:50px !important;
    padding: 11px;
}

.sm-weather-card-title {
    font-size: 18px;
    font-weight:bold;
    color: #555;
    margin-bottom: 6px;
}

.sm-weather-card-value {
    font-size: 18px;
    font-weight: bold;
}

.sm-weather-card-sub {
    font-size: 12px;
    color: #777;
}

i.mdi{
    font-size:22px;
}

.text-align-center-title{
    text-align:center;
    margin-bottom:0;
}

.spinner-maps {
    width: 36px;
    height: 36px;
    border: 4px solid #ddd;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-div{
    align-items:center;
    display:flex;
    flex-direction:column;
    margin-top:10px;
}

.no-data {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    text-align: center;
}

#sm-ensemble-chart{
    width:100%;
    height:400px;
}

#city-autocomplete{
    width: 100%;
    padding: 8px;
}

.error-data{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    color:#d32f2f;
    padding:20px;
    text-align:center;
}

.error-data span{
    font-weight:bold;
}

.tooltip-date{
    font-weight:bold;
    border-bottom:1px solid #ddd;
    margin-bottom:5px;
}

#sm-chart-toolbar, #sm-chart-header, #sm-chart-container{
    margin-top:15px;
}

.sm-chart-btn.active{
    background-color: #0073aa;
    color: #fff;
}

.sm-chart-btn{
    margin: 5px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.woocommerce-js .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left;
}

.woocommerce-js .select2-container--default .select2-selection--single .select2-selection__arrow{
    display:none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 45px !important;
}

.elementor-element-2db8a2d{
    display:none !important;
}

#mesonet-front-version{
    position: fixed;bottom: 10px;right: 10px;font-size: 12px;color: #666;background: rgba(255,255,255,0.85);padding: 5px 10px;border-radius: 3px;z-index: 9999;box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* no data message for forecast chart containers */
.sm-chart-data-failed{
    color:red;
    padding-top: 12px;
}

/* loading message for forecast chart containers */
.sm-chart-loader{
    padding-top: 12px;
}

/* dateini label in chart headers */
.sm-meta-line {
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 6px;
    text-align: center;
}

/* model/date pair */
.sm-meta-item {
    display: inline-block;
    margin: 0 8px;
    white-space: nowrap;
}

/* model label */
.sm-model {
    font-weight: 500;
    margin-right: 4px;
}

/* date */
.sm-date {
    font-family: monospace;
}

/* reduce vertical spacing between header elements */
#sm-chart-header p {
    margin: 4px 0;
}

/** COLLAPSIBLE CHARTS **/

.sm-chart-header {
    cursor: pointer;
    font-weight: 600;
    padding: 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.sm-chart-wrapper {
    margin-bottom: 10px;
}

.sm-chart-section {
    transition: max-height 0.2s ease;
    overflow: hidden;
}

/* if wrapper has collapsed, chart section closed */
.sm-chart-wrapper.collapsed .sm-chart-section {
    max-height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* if wrapper does not have collapsed, chart section open */
.sm-chart-wrapper:not(.collapsed) .sm-chart-section {
    max-height: none;
    min-height: 270px;
}

.sm-chart-header::after {
    content: "▼";
    display: inline-block;
    transition: transform 0.2s ease;
    margin-left:10px;
}

.sm-chart-wrapper.collapsed .sm-chart-header::after {
    transform: rotate(-90deg);
}

/** DARK MODE **/
/* pill */
.sm-toggle-track {
    width: 42px;
    height: 20px;
    background: #444;
    border-radius: 999px;
    position: relative;
    transition: background 0.25s ease;
}

.sm-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Redefine global theme custom properties for dark mode */
.dark-mode{
    --e-global-color-astglobalcolor1: #ffffff;
    --e-global-color-astglobalcolor2: #e0e0e0;
    --e-global-color-astglobalcolor3: #4da6ff;
    --e-global-color-astglobalcolor4: #121212;
    --e-global-color-astglobalcolor5: #242424;
}

/* Base Body and Layout Wrappers */
.dark-mode,
.dark-mode body,
.dark-mode #page,
.dark-mode .site{
    background-color: #121212 !important;
    color: #e0e0e0 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography elements */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .elementor-heading-title {
    color: #ffffff !important;
}

.dark-mode p,
.dark-mode span:not(.elementor-post-info__terms-list-item)
:not(.wpforms-required-label)
:not(.elementor-button-text)
:not(.elementor-button-content-wrapper) {
    color: #e0e0e0 !important;
}
.dark-mode .elementor-button {
    color: #ffffff !important;
}


/* Highlight keywords */
.dark-mode .weather {
    color: #4da6ff !important;
    text-shadow: 0 0 8px rgba(77, 166, 255, 0.15);
}

.dark-mode .agro, .dark .agro {
    color: #4ade80 !important;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.15);
}

/* main sticky header */
.dark-mode.elementor-location-header.elementor-sticky{
    background-color: #121212 !important;
}
/* top bar */
.dark-mode .elementor-location-header .e-parent:not(.elementor-sticky){
    background-color: #3c3c3c !important;
}


.dark-mode .elementor-sticky, .dark .elementor-sticky {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #2d2d2d;
}

.dark-mode .menu-link, .dark .menu-link {
    color: #e0e0e0 !important;
    transition: color 0.2s ease;
}
.elementor-sticky {
    transition: none !important;
}

.dark-mode .menu-link:hover, .dark .menu-link:hover,
.dark-mode .current-menu-item > .menu-link, .dark .current-menu-item > .menu-link {
    color: #4da6ff !important;
}

/* Dropdown Sub-menus */
.dark-mode .sub-menu, .dark .sub-menu {
    background-color: #1c1c1c !important;
    border: 1px solid #2d2d2d !important;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .sub-menu .menu-link, .dark .sub-menu .menu-link {
    color: #cccccc !important;
}

.dark-mode .sub-menu .menu-link:hover, .dark .sub-menu .menu-link:hover {
    background-color: #242424 !important;
    color: #ffffff !important;
}

/* Search Form Fullscreen Overlay */
.dark-mode .elementor-search-form__container, .dark .elementor-search-form__container {
    background-color: rgba(18, 18, 18, 0.95) !important;
}

.dark-mode .elementor-search-form__input, .dark .elementor-search-form__input {
    background-color: #242424 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 4px;
}

.dark-mode .dialog-close-button svg, .dark .dialog-close-button svg {
    fill: #ffffff !important;
}

/* Main Content Containers (Classic background override) */
.dark-mode .e-parent[data-settings*="classic"], .dark .e-parent[data-settings*="classic"] {
    background-color: #121212 !important;
}

.dark-mode .e-child[data-settings*="classic"], .dark .e-child[data-settings*="classic"] {
    background-color: #1e1e1e !important;
    border: 1px solid #2d2d2d !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow-big, .dark .shadow-big {
    background-color: #1e1e1e !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #2d2d2d !important;
}

.dark-mode .shadow-big .e-child, .dark .shadow-big .e-child {
    background-color: #242424 !important;
    border: 1px solid #2d2d2d !important;
}

/* Statistics Section Gradients */
.dark-mode .e-parent[data-settings*="gradient"], .dark .e-parent[data-settings*="gradient"] {
    background-image: linear-gradient(135deg, #182232, #0d131f) !important;
}

.dark-mode .e-child[data-settings*="gradient"], .dark .e-child[data-settings*="gradient"] {
    background-image: linear-gradient(135deg, #243042, #131b26) !important;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #2d3d52 !important;
}

/* Loop Grid (Blog Articles) */
.dark-mode .e-loop-item .e-parent, .dark .e-loop-item .e-parent {
    background-color: #1e1e1e !important;
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #2d2d2d !important;
}

.dark-mode .e-loop-item .elementor-icon-list-text,
.dark-mode .e-loop-item .elementor-icon-list-text a,
.dark .e-loop-item .elementor-icon-list-text,
.dark .e-loop-item .elementor-icon-list-text a {
    color: #aaaaaa !important;
}

.dark-mode .e-loop-item .elementor-post-info__terms-list-item,
.dark .e-loop-item .elementor-post-info__terms-list-item {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Newsletter Section */
.dark-mode .form-newsletter input[type="email"], .dark .form-newsletter input[type="email"],
.dark-mode .wpforms-field-container input, .dark .wpforms-field-container input {
    background-color: #242424 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 4px;
    padding: 10px;
}

.dark-mode .wpforms-submit, .dark .wpforms-submit {
    background-color: #4da6ff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.dark-mode .wpforms-submit:hover, .dark .wpforms-submit:hover {
    background-color: #357abd !important;
}

/* FAQ Nested Accordion */
.dark-mode .e-n-accordion, .dark .e-n-accordion {
    border: 1px solid #2d2d2d !important;
}

.dark-mode .e-n-accordion-item-title, .dark .e-n-accordion-item-title {
    background-color: #242424 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #2d2d2d !important;
}

.dark-mode .e-n-accordion-item-title-icon svg, .dark .e-n-accordion-item-title-icon svg {
    fill: #ffffff !important;
}

.dark-mode .e-n-accordion .e-child, .dark .e-n-accordion .e-child {
    background-color: #1e1e1e !important;
}

/* Buttons and Links */
.dark-mode .elementor-button, .dark .elementor-button {
    background-color: #4da6ff !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.dark-mode .elementor-button:hover, .dark .elementor-button:hover {
    background-color: #357abd !important;
}

/* Footer Section */
.dark-mode .elementor-location-footer, .dark .elementor-location-footer {
    background-color: #161616 !important;
    border-top: 1px solid #2d2d2d;
}

.dark-mode .elementor-location-footer .e-parent:last-child,
.dark .elementor-location-footer .e-parent:last-child {
    background-color: #121212 !important;
}

.dark-mode .elementor-location-footer .elementor-icon-list-text,
.dark .elementor-location-footer .elementor-icon-list-text {
    color: #cccccc !important;
}

.dark-mode .elementor-location-footer .elementor-icon-list-icon svg,
.dark .elementor-location-footer .elementor-icon-list-icon svg,
.dark-mode .elementor-location-footer .elementor-social-icon svg,
.dark .elementor-location-footer .elementor-social-icon svg {
    fill: #b0b0b0 !important;
    transition: fill 0.2s ease;
}

.dark-mode .elementor-location-footer .elementor-social-icon:hover svg,
.dark .elementor-location-footer .elementor-social-icon:hover svg {
    fill: #ffffff !important;
}

/* Overrides for Weather Cards and Charts (AVAILABLE CSS in base_html.txt) */
.dark-mode .sm-weather-card, .dark .sm-weather-card {
    background: #1e1e1e !important;
    border: 1px solid #2d2d2d;
}

.dark-mode .sm-weather-card-title, .dark .sm-weather-card-title {
    color: #b0b0b0 !important;
}

.dark-mode .sm-weather-card-value, .dark .sm-weather-card-value {
    color: #ffffff !important;
}

.dark-mode .sm-weather-card-sub, .dark .sm-weather-card-sub {
    color: #888888 !important;
}

.dark-mode .spinner-maps, .dark .spinner-maps {
    border: 4px solid #333333 !important;
    border-top: 4px solid #4da6ff !important;
}

.dark-mode .no-data, .dark .no-data {
    color: #aaaaaa !important;
}

.dark-mode #city-autocomplete, .dark #city-autocomplete {
    background-color: #242424 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.dark-mode .error-data, .dark .error-data {
    color: #ff6b6b !important;
}

.dark-mode .tooltip-date, .dark .tooltip-date {
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

.dark-mode .sm-chart-btn, .dark .sm-chart-btn {
    background-color: #242424 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.dark-mode .sm-chart-btn.active, .dark .sm-chart-btn.active {
    background-color: #4da6ff !important;
    color: #ffffff !important;
    border: 1px solid #4da6ff !important;
}

.dark-mode #mesonet-front-version, .dark #mesonet-front-version {
    background: rgba(30, 30, 30, 0.9) !important;
    color: #aaaaaa !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .sm-chart-data-failed, .dark .sm-chart-data-failed {
    color: #ff6b6b !important;
}

.dark-mode .sm-meta-line, .dark .sm-meta-line {
    color: #9aa0a6 !important;
}

.dark-mode .sm-chart-header, .dark .sm-chart-header {
    background: #1e1e1e !important;
    border: 1px solid #2d2d2d !important;
    color: #ffffff !important;
}

/* Theme Toggle Icon Premium Micro-animations & Glows */
.dark-mode-toggle,
.theme-toggle,
.theme-switch,
.mdi-moon,
.mdi-weather-night,
.mdi-weather-sunny,
.mdi-brightness-2,
.mdi-brightness-3 {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease !important;
    cursor: pointer;
}

.dark-mode-toggle:hover,
.theme-toggle:hover,
.theme-switch:hover,
.mdi-moon:hover,
.mdi-weather-night:hover,
.mdi-weather-sunny:hover,
.mdi-brightness-2:hover,
.mdi-brightness-3:hover {
    transform: rotate(45deg) scale(1.15);
}

.dark-mode .dark-mode-toggle, .dark .dark-mode-toggle,
.dark-mode .mdi-weather-sunny, .dark .mdi-weather-sunny {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
}
.dark-mode .elementor-widget-theme-site-logo img {
    content: url('/wp-content/uploads/2023/08/logo-solutions-mesonet-white.png');
}

.dark-mode .elementor-location-header .e-parent[data-settings*="classic"] {
    background-color: #121212 !important;
}

.dark-mode
:not(.elementor-location-header)
> .e-parent.e-con-boxed:not(.elementor-sticky)[data-settings*="classic"] {
    background-color: transparent !important;
}
.dark-mode .wp-widget-group__inner-blocks
.wp-block-latest-posts__post-title {
    color: #4da6ff !important;
}
.dark-mode .wp-widget-group__inner-blocks
.wp-block-latest-posts__post-title:hover {
    color: #76bdff !important;
}

/** Station selector SELECT 2 **/
/* options */
.dark-mode .select2-container--default .select2-results__option {
    color: #fff;
    background-color: #2a2a2a;
}
/* dropdown */
.dark-mode .select2-search--dropdown {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}
/* search field */
.dark-mode .select2-search__field {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

/* Select2 main field */
.dark-mode .select2-container--default .select2-selection--single {
    background-color: #1e1e1e !important;
    border: 1px solid #ffffff !important;
    height: 40px; /* optional for alignment */
}

/* Text inside field */
.dark-mode .select2-selection__rendered {
    color: #ffffff !important;
}

/* Dropdown arrow */
.dark-mode .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}

/* Focus state */
.dark-mode .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #4da6ff !important;
}

/* Station Selector default element */
.dark-mode .select2-container .select2-selection {
    background-color: #1e1e1e !important;
    border: 1px solid #ffffff !important;
}

/* FORMS : white labels */
.dark-mode .wpforms-field-label{
    color: #fff !important;
}

/* logo caroussel, light background */
.dark-mode .elementor-widget-image-carousel{
    background:#fff !important;
}

/* sub-menu hover, transparent background */
.dark-mode .sub-menu .elementor-sub-item:hover {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* dark mode toggle button */
.sm-dark-toggle-container {
    display: none !important;
    align-items: center;
    margin-left: 12px;
}

/* pill */
#sm-dark-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* icon */
.sm-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* thumb */
.sm-toggle-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.25s ease;
}

.dark-mode .sm-toggle-track {
    background: #4da6ff;
    cursor:pointer;
}

.dark-mode .sm-toggle-thumb {
    transform: translateX(22px);
}

.dark-mode .cat-item a{color:#fff;}

/* Tooltip and mobile responsive styles for headers */
.sm-tooltip-icon {
    cursor: pointer;
    margin-left: 5px;
    color: #0073aa;
    display: inline-block;
}
.dark-mode .sm-tooltip-icon {
    color: #4da6ff;
}

@media (max-width: 600px) {
    .text-align-center-title {
        font-size: 1.1em !important;
        padding: 0 10px;
        line-height: 1.3;
    }
    .sm-meta-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .sm-meta-item {
        margin: 2px 0 !important;
        font-size: 0.9em;
    }
}

/* Augmenter la taille du bouton plein écran Plotly */
.js-plotly-plot .modebar-btn {
    height: 34px !important;
    width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.js-plotly-plot .modebar-btn svg {
    height: 22px !important;
    width: 22px !important;
}