/* =============================================
   Elementor Dark Mode — Widget CSS
   Your exact styles from the working global CSS
   ============================================= */

/* Toggle container */
#darkToggle {
    position: relative;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

/* SVG styling */
#darkToggle svg {
    position: absolute;
    inset: 0;
    fill: none;
    stroke: var(--e-global-color-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

/* Hide moon initially */
#darkModeImg {
    display: none;
}

/* Sun ray spin animation */
.sun-rays {
    animation: sunSpin 52s linear infinite;
    transform-origin: center;
}

@keyframes sunSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Hover scale */
#darkToggle:hover svg {
    transform: scale(1.1);
}