/* ... (Base styles and position styles from previous instructions) ... */
/* Base style for the floating toggle button */
#sdm-toggle {
    padding: 10px 15px;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    border-radius: 50%; /* Make it a circle for a better icon look */
    width: 50px;
    height: 50px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

#sdm-toggle.dark-mode {
    background-color: transparent !important;
    color: #fff;
    border-color: transparent !important;
}

/* Position Classes */
#sdm-toggle.bottom-right { bottom: 20px; right: 20px; }
#sdm-toggle.bottom-left  { bottom: 20px; left: 20px; }
#sdm-toggle.top-right    { top: 20px; right: 20px; }
#sdm-toggle.top-left     { top: 20px; left: 20px; }

/* Icon Management */
#sdm-toggle .sdm-icon-moon {
    display: none; /* Hide moon icon by default in light mode */
}

#sdm-toggle .sdm-icon-sun {
    display: block; /* Show sun icon by default in light mode */
}

#sdm-toggle.dark-mode .sdm-icon-moon {
    display: block; /* Show moon icon when dark mode is active */
}

#sdm-toggle.dark-mode .sdm-icon-sun {
    display: none; /* Hide sun icon when dark mode is active */
}


/* Styles applied when the body has the 'dark-mode-active' class */
.dark-mode-active, .dark-mode-active body {
    background-color: #121212;
    color: #e0e0e0;
}

/* ... (rest of your dark mode styles) ... */