/* HERO LIGHTS */

html.dark-mode-preload {background-color: #111111 !important;}

/* Stato normale */
.lights-hero::before {
    opacity: 1 !important;
    transition: opacity 1.2s ease !important;
}

/* Cambio manuale tramite pulsante */
.lights-hero.lights-on::before {
    opacity: 0 !important;
}

/* Stato già salvato: applicato PRIMA del rendering */
html.dark-mode-preload .lights-hero::before {
    opacity: 0 !important;
    transition: none !important;
}

html.dark-mode-preload .lights-hero::before {
    opacity: 0 !important;
    transition: none !important;
}

/* DARK MODE TRANSITIONS */
.dark-section,
.dark-title .elementor-heading-title,
.dark-text,
.dark-text p,
.dark-button .elementor-button,
.dark-icon .elementor-icon svg {
    transition:
        background-color 1.2s ease,
        color 1.2s ease,
        fill 1.2s ease,
        border-color 1.2s ease !important;
}

/* DARK MODE */
html.dark-mode-preload .dark-section, 
body.dark-mode .dark-section {
    background-color: var(--e-global-color-primary) !important;
}

html.dark-mode-preload .dark-section, 
body.dark-mode .dark-section {
    border-color: #333333 !important;
}

body.dark-mode .dark-icon  svg {
    fill: #fff !important;
}

body.dark-mode .dark-icon svg path {
    stroke: #fff !important;
}


body.dark-mode .dark-title .elementor-heading-title {
    color: #ffffff !important;
}

body.dark-mode .dark-text,
body.dark-mode .dark-text p {
    color: #ffffff !important;
}

body.dark-mode .dark-button .elementor-button {
    background-color: transparent !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark-mode .dark-button .elementor-button:hover {
    background-color: #fff !important;
    color: var(--e-global-color-primary) !important;
    fill: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark-mode .dark-button .elementor-button:hover svg {
    fill: var(--e-global-color-primary) !important;
}

/*ICON LIST*/

body.dark-mode .elementor-icon-list-text {
    color: #ffffff !important;
}

/*FORM*/

body.dark-mode .dark-form .elementor-field {
    background-color: #222 !important;
    border: 0px;
    color: #fff;
}

body.dark-mode .dark-form a {color: #fff !important;}

body.dark-mode .dark-form .elementor-field input {
    color: #fff;
}

body.dark-mode .dark-form .elementor-button {
    background-color: #ffffff !important;
    color: var(--e-global-color-primary) !important;
}