/* ═══════════════════════════════════════════
   Dark Mode Toggle – Frontend Styles
   ═══════════════════════════════════════════ */

/* CSS Variables injected by JS when dark mode is active */
body.dmsw-dark {
    background-color: var(--dmsw-bg)       !important;
    color:            var(--dmsw-text)      !important;
}

body.dmsw-dark a {
    color: var(--dmsw-link) !important;
}

/* Jawne targetowanie nagłówków – wymagane bo motywy WP nadpisują kolor nagłówków bezpośrednio */
body.dmsw-dark h1,
body.dmsw-dark h2,
body.dmsw-dark h3,
body.dmsw-dark h4,
body.dmsw-dark h5,
body.dmsw-dark h6,
body.dmsw-dark h1 a,
body.dmsw-dark h2 a,
body.dmsw-dark h3 a,
body.dmsw-dark h4 a,
body.dmsw-dark h5 a,
body.dmsw-dark h6 a,
body.dmsw-dark h1 span,
body.dmsw-dark h2 span,
body.dmsw-dark h3 span,
body.dmsw-dark h4 span,
body.dmsw-dark h5 span,
body.dmsw-dark h6 span {
    color: var(--dmsw-text) !important;
}

body.dmsw-dark *:not(.dmsw-toggle):not(.dmsw-toggle *) {
    border-color: var(--dmsw-border) !important;
}

body.dmsw-dark input,
body.dmsw-dark textarea,
body.dmsw-dark select,
body.dmsw-dark .wp-block-group,
body.dmsw-dark .wp-block,
body.dmsw-dark article,
body.dmsw-dark aside,
body.dmsw-dark .site-header,
body.dmsw-dark .site-footer,
body.dmsw-dark nav,
body.dmsw-dark header,
body.dmsw-dark footer,
body.dmsw-dark .card,
body.dmsw-dark .widget,
body.dmsw-dark #header,
body.dmsw-dark #footer,
body.dmsw-dark #sidebar,
body.dmsw-dark .container,
body.dmsw-dark .wrapper,
body.dmsw-dark #page,
body.dmsw-dark #content,
body.dmsw-dark .site,
body.dmsw-dark .menu-item a,
body.dmsw-dark .nav-menu a {
    background-color: var(--dmsw-surface) !important;
    color:            var(--dmsw-text)    !important;
}

/* Smooth transition on mode change */
body.dmsw-transitioning,
body.dmsw-transitioning * {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .3s ease-in-out !important;
}

/* ── BUTTON BASE ─────────────────────────── */
.dmsw-toggle {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    cursor:          pointer;
    background:      none;
    border:          none;
    padding:         0;
    font-family:     inherit;
    line-height:     1;
    user-select:     none;
    vertical-align:  middle;
}

/* ── STYLE: TOGGLE SUWAK ────────────────── */
.dmsw-style-toggle .dmsw-track {
    position:      relative;
    display:       inline-block;
    width:         52px;
    height:        28px;
    background:    #ccc;
    border-radius: 14px;
    transition:    background .3s;
    flex-shrink:   0;
}

.dmsw-style-toggle .dmsw-thumb {
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         22px;
    height:        22px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform .3s, box-shadow .3s;
    box-shadow:    0 1px 4px rgba(0,0,0,.3);
}

body.dmsw-dark .dmsw-style-toggle .dmsw-track {
    background: var(--dmsw-accent, #bb86fc);
}

body.dmsw-dark .dmsw-style-toggle .dmsw-thumb {
    transform: translateX(24px);
}

.dmsw-style-toggle .dmsw-toggle-label {
    font-size:   .9em;
    color:       inherit;
    min-width:   40px;
}

/* ── STYLE: PIGUŁKA Z IKONAMI ───────────── */
.dmsw-style-pill {
    background: none;
    border:     none;
    padding:    0;
    cursor:     pointer;
}

.dmsw-pill-track {
    position:      relative;
    display:       inline-flex;
    align-items:   center;
    /* wymiary i kolory ustawiane dynamicznie przez wtyczkę */
    border-radius: 999px;
    padding:       0 4px;
    box-sizing:    border-box;
    transition:    background .35s ease;
}

/* Thumb – ruchome kółko */
.dmsw-pill-thumb {
    position:      absolute;
    border-radius: 50%;
    box-shadow:    0 1px 5px rgba(0,0,0,.25);
    transition:    transform .3s ease-in-out, background .35s ease;
    z-index:       2;
}
.dmsw-pill-icon {
    position:    absolute;
    display:     flex;
    align-items: center;
    justify-content: center;
    /* wymiary i pozycja ustawiane dynamicznie */
    z-index:     3;
    transition:  opacity .25s ease, transform .3s ease-in-out;
    pointer-events: none;
}

.dmsw-pill-icon svg {
    width:  100%;
    height: 100%;
    display: block;
}

/* Light mode – kółko pod księżycem, słońce przyciemnione */
.dmsw-pill-sun  { opacity: .4;  transform: scale(.8); }
.dmsw-pill-moon { opacity: 1;   transform: scale(1); }

/* Dark mode – kółko pod słońcem, księżyc przyciemniony */
body.dmsw-dark .dmsw-pill-sun  { opacity: 1;  transform: scale(1); }
body.dmsw-dark .dmsw-pill-moon { opacity: .4; transform: scale(.8); }

/* ── STYLE: IKONA ───────────────────────── */
.dmsw-style-icon {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    rgba(0,0,0,.08);
    justify-content: center;
    font-size:     1.3em;
    transition:    background .3s, transform .3s;
}

.dmsw-style-icon:hover {
    background: rgba(0,0,0,.14);
    transform:  rotate(20deg);
}

body.dmsw-dark .dmsw-style-icon {
    background: rgba(255,255,255,.12);
}

body.dmsw-dark .dmsw-style-icon:hover {
    background: rgba(255,255,255,.2);
}

.dmsw-style-icon .dmsw-icon-sun,
.dmsw-style-icon .dmsw-icon-moon {
    transition: opacity .3s, transform .3s;
    position:   absolute;
}

.dmsw-style-icon { position: relative; }

.dmsw-style-icon .dmsw-icon-sun  { opacity: 1;  transform: scale(1); }
.dmsw-style-icon .dmsw-icon-moon { opacity: 0;  transform: scale(.5); }

body.dmsw-dark .dmsw-style-icon .dmsw-icon-sun  { opacity: 0; transform: scale(.5); }
body.dmsw-dark .dmsw-style-icon .dmsw-icon-moon { opacity: 1; transform: scale(1); }

/* ── STYLE: TEKST ───────────────────────── */
.dmsw-style-text {
    padding:       8px 18px;
    border-radius: 6px;
    border:        2px solid currentColor;
    font-size:     .9em;
    font-weight:   600;
    letter-spacing: .04em;
    opacity:       .85;
    transition:    opacity .2s, background .2s;
}

.dmsw-style-text:hover { opacity: 1; background: rgba(0,0,0,.06); }

body.dmsw-dark .dmsw-style-text:hover { background: rgba(255,255,255,.1); }