/* Boss Optimizator — Dark Mode Toggle Button */

/* ── Button reset (same approach as push bell) ── */
.bo-dark-mode-btn,
.bo-dark-mode-btn:link,
.bo-dark-mode-btn:visited,
.bo-dark-mode-btn:hover,
.bo-dark-mode-btn:focus,
.bo-dark-mode-btn:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: opacity 0.2s !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.bo-dark-mode-btn:hover { opacity: 0.65 !important; }

/* Icon visibility — !important to beat theme resets */
.bo-dark-mode-btn .bo-dm-sun  { display: none !important; }    /* hidden in light mode */
.bo-dark-mode-btn .bo-dm-moon { display: inline-flex !important; } /* visible in light mode */
.bo-dark-mode-btn .bo-dm-icon {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
/* JS sets inline style="display:..." which overrides these */

/* ── Style: button ── */
.bo-dark-mode-btn.bo-dm-style-button,
.bo-dark-mode-btn.bo-dm-style-button:link,
.bo-dark-mode-btn.bo-dm-style-button:visited {
    background-color: #1e1e2e !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    gap: 8px !important;
}
.bo-dark-mode-btn.bo-dm-style-button:hover { opacity: 0.85 !important; }

html[data-bo-theme="dark"] .bo-dark-mode-btn.bo-dm-style-button {
    background-color: #f0c040 !important;
    color: #111 !important;
}

/* ── Smooth transition on theme change ── */
html[data-bo-theme] {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Built-in dark mode — basic WordPress/theme elements ── */
html[data-bo-theme="dark"] {
    color-scheme: dark;
    --bo-dark-bg:        #121212;
    --bo-dark-bg2:       #1e1e1e;
    --bo-dark-surface:   #252525;
    --bo-dark-border:    #333;
    --bo-dark-text:      #e0e0e0;
    --bo-dark-text-mute: #999;
    --bo-dark-link:      #90cdf4;
    --bo-dark-link-hov:  #63b3ed;
}

html[data-bo-theme="dark"] body {
    background-color: var(--bo-dark-bg) !important;
    color: var(--bo-dark-text) !important;
}

html[data-bo-theme="dark"] a {
    color: var(--bo-dark-link) !important;
}
html[data-bo-theme="dark"] a:hover {
    color: var(--bo-dark-link-hov) !important;
}

/* Common containers */
html[data-bo-theme="dark"] header,
html[data-bo-theme="dark"] .site-header,
html[data-bo-theme="dark"] .header-main,
html[data-bo-theme="dark"] footer,
html[data-bo-theme="dark"] .site-footer,
html[data-bo-theme="dark"] .footer-main {
    background-color: var(--bo-dark-bg2) !important;
    color: var(--bo-dark-text) !important;
}

/* Cards / widgets / posts */
html[data-bo-theme="dark"] .card,
html[data-bo-theme="dark"] .widget,
html[data-bo-theme="dark"] .post,
html[data-bo-theme="dark"] article,
html[data-bo-theme="dark"] .entry,
html[data-bo-theme="dark"] .box,
html[data-bo-theme="dark"] aside {
    background-color: var(--bo-dark-surface) !important;
    color: var(--bo-dark-text) !important;
    border-color: var(--bo-dark-border) !important;
}

/* Headings */
html[data-bo-theme="dark"] h1,
html[data-bo-theme="dark"] h2,
html[data-bo-theme="dark"] h3,
html[data-bo-theme="dark"] h4,
html[data-bo-theme="dark"] h5,
html[data-bo-theme="dark"] h6 {
    color: var(--bo-dark-text) !important;
}

/* Navigation */
html[data-bo-theme="dark"] nav,
html[data-bo-theme="dark"] .nav,
html[data-bo-theme="dark"] .navbar,
html[data-bo-theme="dark"] .menu,
html[data-bo-theme="dark"] .main-navigation {
    background-color: var(--bo-dark-bg2) !important;
}
html[data-bo-theme="dark"] nav a,
html[data-bo-theme="dark"] .menu a {
    color: var(--bo-dark-text) !important;
}

/* Inputs / forms */
html[data-bo-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-bo-theme="dark"] textarea,
html[data-bo-theme="dark"] select {
    background-color: var(--bo-dark-surface) !important;
    color: var(--bo-dark-text) !important;
    border-color: var(--bo-dark-border) !important;
}

/* Images — slight dimming */
html[data-bo-theme="dark"] img {
    opacity: 0.88;
}

/* Borders / separators */
html[data-bo-theme="dark"] hr,
html[data-bo-theme="dark"] .separator {
    border-color: var(--bo-dark-border) !important;
}