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

/* ── Global transition ─────────────────────────────────────────────────── */
*, *::before, *::after {
    transition:
        background-color var(--dmt-transition, 300ms) ease,
        color            var(--dmt-transition, 300ms) ease,
        border-color     var(--dmt-transition, 300ms) ease,
        box-shadow       var(--dmt-transition, 300ms) ease;
}

/* ── Dark-mode base theme ───────────────────────────────────────────────── */
[data-dmt="dark"] body,
[data-dmt="dark"] {
    background-color: var(--dmt-bg, #0f1117);
    color:            var(--dmt-text, #e8eaf0);
}

[data-dmt="dark"] h1,
[data-dmt="dark"] h2,
[data-dmt="dark"] h3,
[data-dmt="dark"] h4,
[data-dmt="dark"] h5,
[data-dmt="dark"] h6 {
    color: var(--dmt-text, #e8eaf0);
}

[data-dmt="dark"] p,
[data-dmt="dark"] li,
[data-dmt="dark"] span,
[data-dmt="dark"] td,
[data-dmt="dark"] th {
    color: var(--dmt-text, #e8eaf0);
}

[data-dmt="dark"] a {
    color: var(--dmt-link, #a78bfa);
}
[data-dmt="dark"] a:hover {
    color: var(--dmt-link-hover, #c4b5fd);
}

[data-dmt="dark"] input,
[data-dmt="dark"] textarea,
[data-dmt="dark"] select {
    background-color: var(--dmt-surface, #1a1d27);
    color:            var(--dmt-text, #e8eaf0);
    border-color:     var(--dmt-border, #2e3245);
}

[data-dmt="dark"] button,
[data-dmt="dark"] .wp-block-button__link {
    background-color: var(--dmt-accent, #7c6af7);
    color:            #fff;
    border-color:     var(--dmt-accent, #7c6af7);
}
[data-dmt="dark"] button:hover,
[data-dmt="dark"] .wp-block-button__link:hover {
    background-color: var(--dmt-accent-hover, #9b8ff9);
    border-color:     var(--dmt-accent-hover, #9b8ff9);
}

[data-dmt="dark"] hr,
[data-dmt="dark"] .wp-block-separator {
    border-color: var(--dmt-border, #2e3245);
}

[data-dmt="dark"] blockquote,
[data-dmt="dark"] .wp-block-quote {
    border-left-color: var(--dmt-accent, #7c6af7);
    background-color:  var(--dmt-surface, #1a1d27);
    color:             var(--dmt-text-muted, #9ca3b0);
}

[data-dmt="dark"] code,
[data-dmt="dark"] pre {
    background-color: var(--dmt-surface, #1a1d27);
    color:            var(--dmt-accent-hover, #9b8ff9);
    border-color:     var(--dmt-border, #2e3245);
}

[data-dmt="dark"] table {
    border-color: var(--dmt-border, #2e3245);
}
[data-dmt="dark"] th {
    background-color: var(--dmt-surface, #1a1d27);
}
[data-dmt="dark"] tr:nth-child(even) {
    background-color: var(--dmt-surface, #1a1d27);
}

/* ── Admin bar quick-toggle ─────────────────────────────────────────────── */
#wp-admin-bar-dmt-admin-bar-toggle .dmt-ab-icon {
    font-size: 14px;
    margin-right: 4px;
}

/* ────────────────────────────────────────────────────────────────────────
   Toggle Block Component
   ──────────────────────────────────────────────────────────────────────── */

.dmt-block-wrap {
    display: inline-flex;
    padding: 4px 0;
}
.dmt-block-wrap--center {
    display: flex;
    justify-content: center;
}
.dmt-block-wrap--right {
    display: flex;
    justify-content: flex-end;
}

/* The <label> is the outer container */
.dmt-toggle {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    user-select: none;
}

.dmt-toggle__input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

/* ── Track ── */
.dmt-toggle__track {
    position:      relative;
    display:       flex;
    align-items:   center;
    border-radius: 999px;
    background:    var(--dmt-toggle-track-light, #d1d5db);
    transition:    background var(--dmt-transition, 300ms) ease;
}

/* ── Thumb ── */
.dmt-toggle__thumb {
    position:      absolute;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 50%;
    background:    var(--dmt-toggle-thumb, #ffffff);
    box-shadow:    0 1px 4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06);
    transition:    transform var(--dmt-transition, 300ms) cubic-bezier(.34,1.56,.64,1),
                   background var(--dmt-transition, 300ms) ease;
}

/* ── Icons ── */
.dmt-toggle__icon {
    position:   absolute;
    display:    flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--dmt-transition, 300ms) ease,
                transform var(--dmt-transition, 300ms) ease;
    color: #f59e0b;  /* sun amber */
}
.dmt-toggle__icon--moon {
    color: #6366f1;
    opacity: 0;
    transform: rotate(30deg);
}

/* ── Checked state ── */
.dmt-toggle__input:checked ~ .dmt-toggle__track {
    background: var(--dmt-toggle-track-dark, #7c6af7);
}
.dmt-toggle__input:checked ~ .dmt-toggle__track .dmt-toggle__icon--sun {
    opacity: 0;
    transform: rotate(-30deg);
}
.dmt-toggle__input:checked ~ .dmt-toggle__track .dmt-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ── Focus ring ── */
.dmt-toggle__input:focus-visible ~ .dmt-toggle__track {
    outline:        3px solid var(--dmt-accent, #7c6af7);
    outline-offset: 2px;
}

/* ── Label text ── */
.dmt-toggle__label {
    font-size:   0.95em;
    font-weight: 500;
    color:       inherit;
}

/* ───────── SIZE VARIANTS ───────── */

/* Small */
.dmt-toggle--small .dmt-toggle__track {
    width:  44px;
    height: 24px;
}
.dmt-toggle--small .dmt-toggle__thumb {
    width:  18px;
    height: 18px;
    left:   3px;
}
.dmt-toggle--small .dmt-toggle__input:checked ~ .dmt-toggle__track .dmt-toggle__thumb {
    transform: translateX(20px);
}
.dmt-toggle--small .dmt-toggle__icon svg {
    width:  11px;
    height: 11px;
}

/* Medium (default) */
.dmt-toggle--medium .dmt-toggle__track {
    width:  56px;
    height: 30px;
}
.dmt-toggle--medium .dmt-toggle__thumb {
    width:  22px;
    height: 22px;
    left:   4px;
}
.dmt-toggle--medium .dmt-toggle__input:checked ~ .dmt-toggle__track .dmt-toggle__thumb {
    transform: translateX(26px);
}
.dmt-toggle--medium .dmt-toggle__icon svg {
    width:  13px;
    height: 13px;
}

/* Large */
.dmt-toggle--large .dmt-toggle__track {
    width:  72px;
    height: 38px;
}
.dmt-toggle--large .dmt-toggle__thumb {
    width:  30px;
    height: 30px;
    left:   4px;
}
.dmt-toggle--large .dmt-toggle__input:checked ~ .dmt-toggle__track .dmt-toggle__thumb {
    transform: translateX(34px);
}
.dmt-toggle--large .dmt-toggle__icon svg {
    width:  17px;
    height: 17px;
}

/* ────────────────────────────────────────────────────────────────────────
   Floating Toggle Button
   ──────────────────────────────────────────────────────────────────────── */

.dmt-floating {
    position:      fixed;
    bottom:        24px;
    z-index:       99999;
    background:    #ffffff;
    border-radius: 999px;
    padding:       10px 16px;
    box-shadow:    0 4px 20px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
    display:       flex;
    align-items:   center;
    transition:    box-shadow var(--dmt-transition, 300ms) ease,
                   background-color var(--dmt-transition, 300ms) ease,
                   transform .15s ease;
}
.dmt-floating:hover {
    box-shadow:  0 6px 28px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.1);
    transform:   translateY(-1px);
}

.dmt-floating--bottom-right { right: 24px; }
.dmt-floating--bottom-left  { left:  24px; }

[data-dmt="dark"] .dmt-floating {
    background: var(--dmt-surface, #1a1d27);
    box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
}