/* Button Styles */
.sv-dark-mode-btn {
    cursor: pointer;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sv-dark-mode-btn:hover {
    opacity: 0.9;
}

/* 
 * Dark Mode Global Styles 
 * Using !important to override theme defaults where necessary.
 * This is aggressive but needed for a "plug and play" dark mode 
 * that tries to work with any theme (including Astra).
 */

body.sv-dark-mode,
body.sv-dark-mode .site-content,
body.sv-dark-mode .ast-container,
body.sv-dark-mode #page,
body.sv-dark-mode .site-header,
body.sv-dark-mode .site-footer {
    background-color: #ffffff !important;
    background: #ffffff !important;
    /* color: #ffffff !important; REMOVED */
}

/* 
 * Force Widgets and Sections to White 
 * Ensures HTML widgets and Elementor containers also turn white.
 */
body.sv-dark-mode .elementor-section,
body.sv-dark-mode .elementor-column,
body.sv-dark-mode .elementor-widget,
body.sv-dark-mode .widget,
body.sv-dark-mode .widget_custom_html,
body.sv-dark-mode .elementor-widget-html {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 
 * Text Colors 
 * Setting text to BLACK for the "White Mode".
 * We are NOT using !important here so that specific colors 
 * (like your Golden text) set in Elementor or the theme 
 * will take precedence and stay Golden.
 */
body.sv-dark-mode,
body.sv-dark-mode p,
body.sv-dark-mode h1,
body.sv-dark-mode h2,
body.sv-dark-mode h3,
body.sv-dark-mode h4,
body.sv-dark-mode h5,
body.sv-dark-mode h6,
body.sv-dark-mode li,
body.sv-dark-mode span:not(.sv-btn-text) {
    color: #000000;
}

/* Links */
body.sv-dark-mode a {
    color: #000000;
}

body.sv-dark-mode a:hover {
    color: #333333;
}


/* Inputs & Form Elements */
body.sv-dark-mode input,
body.sv-dark-mode textarea,
body.sv-dark-mode select {
    background-color: #222222 !important;
    /* color: #ffffff !important; REMOVED */
    border-color: #444444 !important;
}

/* Elementor Specific Fixes */
body.sv-dark-mode .elementor-section,
body.sv-dark-mode .elementor-column,
body.sv-dark-mode .elementor-widget {
    /* We don't force bg color here to allow transparency, 
       but we ensure text is readable */
}

/* Cards / Containers often found in themes */
body.sv-dark-mode .card,
body.sv-dark-mode .entry-content,
body.sv-dark-mode .widget-area {
    background-color: transparent !important;
    /* Allow body black to show through or set separate dark gray */
}

/* Button State Update */
body.sv-dark-mode .sv-dark-mode-btn {
    background-color: #ffffff;
    color: #000000;
}