/* Floating Toggle Button */
.angie-dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--toggle-bg, #fff);
    color: var(--toggle-color, #333);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.angie-dark-mode-toggle:hover {
    transform: scale(1.1);
}

.angie-dark-mode-toggle svg {
    width: 24px;
    height: 24px;
    position: absolute;
    transition: all 0.3s ease;
}

/* Icons visibility logic */
/* Default (Dark Mode) state */
.angie-dark-mode-toggle .moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.angie-dark-mode-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Light Mode overrides */
[data-theme="light"] .angie-dark-mode-toggle .moon-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .angie-dark-mode-toggle .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

/* 
 * DEFAULT THEME (DARK MODE) 
 * We set dark variables on :root so they apply immediately
 */
:root {
    /* Dark Mode Palette (Default) */
    --page-bg: #121212;
    --page-text: #e0e0e0;
    --toggle-bg: #fff;
    --toggle-color: #333;
    
    /* Elementor Global Colors Mapping - Dark Mode Default */
    --e-global-color-primary: #5cb8b2;      /* Verde-1 */
    --e-global-color-secondary: #a0a0a0;    /* Grigio chiaro per contrasto */
    --e-global-color-text: #e0e0e0;         /* Testo chiaro */
    --e-global-color-accent: #8ad4cc;       /* Verde-2 */
    
    /* Elementor Backgrounds */
    --e-site-bg: #121212; 
}

/* LIGHT MODE OVERRIDES */
[data-theme="light"] {
    /* Light Mode Palette */
    --page-bg: #ffffff;
    --page-text: #616161;
    --toggle-bg: #333;
    --toggle-color: #fff;
    
    /* Elementor Global Colors Mapping - Light Mode */
    --e-global-color-primary: #5cb8b2;      /* Verde-1 */
    --e-global-color-secondary: #616161;    /* Grigio scuro */
    --e-global-color-text: #616161;         /* Testo scuro */
    --e-global-color-accent: #8ad4cc;       /* Verde-2 */
    
    --e-site-bg: #ffffff;
}

/* Applying the variables to body and html */
html, body {
    background-color: var(--page-bg) !important;
    color: var(--page-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fix specific Elementor widgets in dark mode (Default) */
h1, h2, h3, h4, h5, h6 {
    color: var(--e-global-color-primary); /* Use Primary for headings in dark mode by default */
}
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6 {
    color: var(--e-global-color-secondary); /* Back to dark grey in light mode */
}

p, li, span, div {
    color: var(--page-text);
}

/* Force dark backgrounds on Elementor containers */
.elementor-section,
.elementor-column,
.elementor-container,
.e-con {
    background-color: transparent; 
}

/* Buttons */
.elementor-button {
    transition: all 0.3s ease;
}