/* ===========================================
   Sun / Moon Theme Toggle
   Adapted for Clean (light) and 3D (dark) themes
   =========================================== */

/* --- Wrapper --- */
.toggleWrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

/* --- Hidden checkbox --- */
.toggleWrapper .dn-input {
    position: absolute;
    left: -9999px;
}

/* --- Track --- */
.toggleWrapper .toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 66px;
    height: 36px;
    background-color: #83d8ff;
    border-radius: 36px;
    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Hide the AM / PM labels */
.toggleWrapper .toggle::before,
.toggleWrapper .toggle::after {
    display: none;
}

/* --- Sun / Moon handle --- */
.toggleWrapper .toggle__handler {
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background-color: #ffcf96;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: rotate(-45deg);
}

/* --- Craters (hidden in sun state) --- */
.toggleWrapper .toggle__handler .crater {
    position: absolute;
    background-color: #e8cda5;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    border-radius: 100%;
}

.toggleWrapper .toggle__handler .crater--1 {
    top: 12px;
    left: 7px;
    width: 3px;
    height: 3px;
}

.toggleWrapper .toggle__handler .crater--2 {
    top: 19px;
    left: 15px;
    width: 4px;
    height: 4px;
}

.toggleWrapper .toggle__handler .crater--3 {
    top: 7px;
    left: 17px;
    width: 5px;
    height: 5px;
}

/* --- Cloud wisps (sun state) --- */
.toggleWrapper .star {
    position: absolute;
    background-color: #fff;
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border-radius: 50%;
}

.toggleWrapper .star--1 {
    top: 8px;
    left: 28px;
    z-index: 0;
    width: 20px;
    height: 2px;
}

.toggleWrapper .star--2 {
    top: 14px;
    left: 22px;
    z-index: 1;
    width: 22px;
    height: 2px;
}

.toggleWrapper .star--3 {
    top: 20px;
    left: 30px;
    z-index: 0;
    width: 20px;
    height: 2px;
}

/* Stars (hidden in sun state, visible in moon state) */
.toggleWrapper .star--4,
.toggleWrapper .star--5,
.toggleWrapper .star--6 {
    opacity: 0;
    transition: all 300ms 0s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleWrapper .star--4 {
    top: 12px;
    left: 8px;
    z-index: 0;
    width: 2px;
    height: 2px;
    transform: translate3d(3px, 0, 0);
}

.toggleWrapper .star--5 {
    top: 24px;
    left: 12px;
    z-index: 0;
    width: 3px;
    height: 3px;
    transform: translate3d(3px, 0, 0);
}

.toggleWrapper .star--6 {
    top: 27px;
    left: 20px;
    z-index: 0;
    width: 2px;
    height: 2px;
    transform: translate3d(3px, 0, 0);
}

/* ===========================================
   Checked state (3D / Dark theme)
   =========================================== */
.toggleWrapper .dn-input:checked + .toggle {
    background-color: #749dd6;
}

.toggleWrapper .dn-input:checked + .toggle .toggle__handler {
    background-color: #ffe5b5;
    transform: translate3d(30px, 0, 0) rotate(0);
}

.toggleWrapper .dn-input:checked + .toggle .toggle__handler .crater {
    opacity: 1;
}

/* Clouds shrink into stars */
.toggleWrapper .dn-input:checked + .toggle .star--1 {
    width: 2px;
    height: 2px;
}

.toggleWrapper .dn-input:checked + .toggle .star--2 {
    width: 3px;
    height: 3px;
    transform: translate3d(-5px, 0, 0);
}

.toggleWrapper .dn-input:checked + .toggle .star--3 {
    width: 2px;
    height: 2px;
    transform: translate3d(-7px, 0, 0);
}

/* Small stars appear */
.toggleWrapper .dn-input:checked + .toggle .star--4,
.toggleWrapper .dn-input:checked + .toggle .star--5,
.toggleWrapper .dn-input:checked + .toggle .star--6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.toggleWrapper .dn-input:checked + .toggle .star--4 {
    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleWrapper .dn-input:checked + .toggle .star--5 {
    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleWrapper .dn-input:checked + .toggle .star--6 {
    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* ===========================================
   Mobile variant – slightly smaller
   =========================================== */
.toggleWrapper--mobile .toggle {
    width: 52px;
    height: 28px;
    border-radius: 28px;
}

.toggleWrapper--mobile .toggle__handler {
    width: 22px;
    height: 22px;
}

.toggleWrapper--mobile .toggle__handler .crater--1 {
    top: 8px;
    left: 5px;
    width: 2px;
    height: 2px;
}

.toggleWrapper--mobile .toggle__handler .crater--2 {
    top: 14px;
    left: 11px;
    width: 3px;
    height: 3px;
}

.toggleWrapper--mobile .toggle__handler .crater--3 {
    top: 5px;
    left: 13px;
    width: 4px;
    height: 4px;
}

.toggleWrapper--mobile .star--1 {
    top: 6px;
    left: 22px;
    width: 14px;
    height: 2px;
}

.toggleWrapper--mobile .star--2 {
    top: 10px;
    left: 17px;
    width: 16px;
    height: 2px;
}

.toggleWrapper--mobile .star--3 {
    top: 15px;
    left: 23px;
    width: 14px;
    height: 2px;
}

.toggleWrapper--mobile .star--4 {
    top: 9px;
    left: 6px;
}

.toggleWrapper--mobile .star--5 {
    top: 18px;
    left: 9px;
}

.toggleWrapper--mobile .star--6 {
    top: 20px;
    left: 15px;
}

.toggleWrapper--mobile .dn-input:checked + .toggle .toggle__handler {
    transform: translate3d(24px, 0, 0) rotate(0);
}