/* Keyhan Theme Toggle — ktt-style.css v5.0 */

.ktt-wrapper { display:inline-flex; align-items:center; vertical-align:middle; }

/* Track */
.ktt-btn {
    position:relative; display:inline-flex; align-items:center;
    cursor:pointer; border-radius:9999px; padding:4px;
    border:2px solid #eaeaea;
    background:#f0ede8;
    box-shadow:inset 0 1px 4px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.08);
    transition:background .35s, border-color .35s, box-shadow .35s;
    outline:none; -webkit-appearance:none; appearance:none;
}
.ktt-btn:focus-visible { box-shadow:0 0 0 3px rgba(187,150,62,.4); }

/* Sizes */
.ktt-size-sm .ktt-btn  { width:48px;  height:26px; }
.ktt-size-sm .ktt-knob { width:18px;  height:18px; }
.ktt-size-sm .ktt-icon { width:10px;  height:10px; }

.ktt-size-md .ktt-btn  { width:64px;  height:34px; }
.ktt-size-md .ktt-knob { width:26px;  height:26px; }
.ktt-size-md .ktt-icon { width:14px;  height:14px; }

.ktt-size-lg .ktt-btn  { width:80px;  height:42px; }
.ktt-size-lg .ktt-knob { width:34px;  height:34px; }
.ktt-size-lg .ktt-icon { width:18px;  height:18px; }

/* Knob */
.ktt-knob {
    position:relative; border-radius:50%;
    background:#bb963e;
    box-shadow:0 2px 8px rgba(187,150,62,.5), 0 1px 3px rgba(0,0,0,.2);
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0;
    transform:translateX(0);
    transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.ktt-btn:hover .ktt-knob {
    box-shadow:0 2px 8px rgba(187,150,62,.6), 0 0 0 4px rgba(187,150,62,.18);
}

/* Icons */
.ktt-icon { display:block; position:absolute; transition:opacity .22s, transform .28s; pointer-events:none; }
.ktt-moon { opacity:1; transform:rotate(0deg); }
.ktt-sun  { opacity:0; transform:rotate(90deg); }

/* ── Dark state — CSS only, no JS needed ── */
html.dark .ktt-btn,
[data-theme="dark"] .ktt-btn {
    background:#2a2720;
    border-color:#3a3a3a;
    box-shadow:inset 0 1px 4px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
}

/* knob position */
html.dark .ktt-size-sm .ktt-knob,
[data-theme="dark"] .ktt-size-sm .ktt-knob { transform:translateX(22px); }
html.dark .ktt-size-md .ktt-knob,
[data-theme="dark"] .ktt-size-md .ktt-knob { transform:translateX(30px); }
html.dark .ktt-size-lg .ktt-knob,
[data-theme="dark"] .ktt-size-lg .ktt-knob { transform:translateX(38px); }

/* icon swap */
html.dark .ktt-moon,
[data-theme="dark"] .ktt-moon { opacity:0; transform:rotate(-90deg); }
html.dark .ktt-sun,
[data-theme="dark"] .ktt-sun  { opacity:1; transform:rotate(0deg); }