/* ============================================
   day-night-toggle.css
   نسخه‌ی کوچک‌شده‌ی طرح Day/Night برای دکمه‌ی هدر
   (جایگزین .theme-toggle قدیمی)
   ============================================ */

.dnt-switch {
    position: relative;
    width: 64px;
    height: 30px;
    border-radius: 30px;
    cursor: pointer;
    padding: 0;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, var(--shadow-raised-sm);
    flex: 0 0 auto;
}

.dnt-track {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(100deg, #a9d3e8 0%, #5e9fd6 100%);
    transition: background 1.1s ease;
}
.dnt-switch.night .dnt-track {
    background: linear-gradient(100deg, #12123f 0%, #2c2f60 100%);
}

.dnt-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%);
    pointer-events: none;
    z-index: 5;
}

.dnt-stars {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}
.dnt-switch.night .dnt-stars { opacity: 1; }
.dnt-stars span {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: #fff;
}

.dnt-moon {
    position: absolute;
    left: 11%;
    top: 50%;
    width: 15px;
    height: 15px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) rotate(-130deg);
    opacity: .35;
    transition: opacity .45s ease;
    z-index: 2;
}
.dnt-switch.night .dnt-moon { opacity: 1; }

.dnt-sun {
    position: absolute;
    right: 12%;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c8, #ffe98a 60%, #f7d55c 100%);
    box-shadow: 0 0 8px 2px rgba(255,233,138,.8);
    opacity: 1;
    transition: opacity .8s ease;
    z-index: 2;
}
.dnt-switch.night .dnt-sun { opacity: 0; }

.dnt-clouds {
    position: absolute;
    left: 0; right: 0;
    bottom: -8%;
    height: 55%;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}
.dnt-cloud-track {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-wrap: nowrap;
    animation: dntCloudMove 14s linear infinite;
}
.dnt-cloud-track img {
    flex: 0 0 50%;
    width: 55%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: scale(1.12);
    margin-left: -2.5%;
    margin-right: -2.5%;
}
@keyframes dntCloudMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.dnt-knob {
    position: absolute;
    top: 8%;
    left: 4%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #ffffff, #fdfdfd 55%, #f4f4f4 100%);
    box-shadow: 0 0 8px 2px rgba(255,255,255,.05), 0 0 10px 4px rgba(255,244,190,.55);
    transition: left .55s cubic-bezier(.65,-.1,.25,1.15), box-shadow 1.1s ease;
    z-index: 6;
}
.dnt-switch.night .dnt-knob {
    box-shadow: 0 0 8px 3px rgba(255,255,255,.9), 0 0 18px 6px rgba(160,190,255,.55);
}
.dnt-switch.on .dnt-knob { left: 63%; }