/* Color Toggle Button Styles */
.ar-color-toggle-btn {
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.ar-color-toggle-btn:hover {
    opacity: 0.8;
}

/* Visibility toggling based on theme attribute */
/* Fallback to light mode if no attribute is present (e.g. in Elementor editor) */
html:not([data-theme='dark']) .lumina-dark-content { display: none !important; }
html[data-theme='dark'] .lumina-light-content { display: none !important; }

/* Flex alignment for the icons and text */
.ar-color-toggle-btn .lumina-light-content, 
.ar-color-toggle-btn .lumina-dark-content { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}