/* =========================================================
   iOS-inspired Theme Toggle (Sun/Clouds ↔ Moon/Stars)
   Works with Bootstrap 5.3 data-bs-theme + mobile friendly
   ========================================================= */

.pba-theme-switch {
    /* easy sizing knobs */
    --h: 40px;
    --w: 65px;
    --pad: 5px;
    --knob: calc(var(--h) - (var(--pad) * 2));
    display: inline-flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .pba-theme-switch {
        --h: 40px;
        --w: 65px;
        --pad: 5px;
    }
}

.pba-theme-switch__input {
    /* keep accessible but hidden */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.pba-theme-switch__track {
    width: var(--w);
    height: var(--h);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 35%);
    background: #8ec9ff;
    overflow: hidden;
    /* subtle iOS glass */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Focus ring */
.pba-theme-switch__input:focus-visible + .pba-theme-switch__track {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary), transparent 78%), 0 10px 22px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- LIGHT TRACK (sky + clouds + soft bands) ---------- */
.pba-theme-switch__track {
    background:
    /* subtle vertical “bands” like your example */
    radial-gradient(120px 120px at 30% 50%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(180px 180px at 45% 50%, rgba(255,255,255,0.10), transparent 62%), radial-gradient(260px 260px at 62% 50%, rgba(255,255,255,0.08), transparent 65%), linear-gradient(90deg, #84c3ff 0%, #66b1ff 40%, #5aa6ff 100%);
}

/* Clouds */
.pba-theme-switch__track::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.75;
    background: radial-gradient( 34px 22px at 78% 42%, rgba(255,255,255,0.55) 0 58%, transparent 60% ), radial-gradient( 44px 28px at 86% 55%, rgba(255,255,255,0.45) 0 58%, transparent 60% ), radial-gradient( 40px 26px at 68% 60%, rgba(255,255,255,0.40) 0 58%, transparent 60% );
    filter: blur(0.3px);
}

/* ---------- DARK TRACK (night + stars + bands) ---------- */
.pba-theme-switch__track::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0; /* becomes 1 in dark */
    pointer-events: none;
    background:
    /* ⭐ Stars (clustered/spread on LEFT side) */
    radial-gradient(2px 2px at 14% 28%, rgba(255,255,255,0.95) 0 60%, transparent 62%), radial-gradient(2px 2px at 18% 60%, rgba(255,255,255,0.80) 0 60%, transparent 62%), radial-gradient(3px 3px at 22% 40%, rgba(255,255,255,0.95) 0 55%, transparent 58%), radial-gradient(2px 2px at 26% 22%, rgba(255,255,255,0.75) 0 60%, transparent 62%), radial-gradient(3px 3px at 30% 70%, rgba(255,255,255,0.90) 0 55%, transparent 58%), radial-gradient(2px 2px at 34% 52%, rgba(255,255,255,0.85) 0 60%, transparent 62%), radial-gradient(2px 2px at 38% 34%, rgba(255,255,255,0.78) 0 60%, transparent 62%), radial-gradient(3px 3px at 42% 58%, rgba(255,255,255,0.92) 0 55%, transparent 58%),
    /* a couple faint ones to extend slightly toward center */
    /*radial-gradient(2px 2px at 48% 26%, rgba(255,255,255,0.55) 0 60%, transparent 62%), radial-gradient(2px 2px at 52% 64%, rgba(255,255,255,0.50) 0 60%, transparent 62%),*/
    /* subtle “bands” */
    radial-gradient(170px 170px at 35% 50%, rgba(255,255,255,0.08), transparent 62%), radial-gradient(250px 250px at 55% 50%, rgba(255,255,255,0.06), transparent 66%), radial-gradient(340px 340px at 70% 50%, rgba(255,255,255,0.05), transparent 70%),
    /* base night gradient */
    linear-gradient(90deg, #070a17 0%, #151a2e 40%, #2b2f43 100%);
}

/* remove the old star layer tied to the knob (otherwise you’ll double-render stars) */
.pba-theme-switch__track .pba-theme-switch__knob::after {
    content: none !important;
}

/* Stars layer (separate element using the knob’s box-shadow trick) */
.pba-theme-switch__track .pba-theme-switch__knob::after {
    content: "";
    position: absolute;
    inset: -70px;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(3px 3px at 42% 32%, rgba(255,255,255,0.95) 0 55%, transparent 58%), radial-gradient(2px 2px at 48% 48%, rgba(255,255,255,0.85) 0 60%, transparent 62%), radial-gradient(3px 3px at 52% 40%, rgba(255,255,255,0.9) 0 55%, transparent 58%), radial-gradient(2px 2px at 56% 30%, rgba(255,255,255,0.75) 0 60%, transparent 62%), radial-gradient(3px 3px at 60% 52%, rgba(255,255,255,0.95) 0 55%, transparent 58%), radial-gradient(2px 2px at 46% 62%, rgba(255,255,255,0.8) 0 60%, transparent 62%), radial-gradient(3px 3px at 58% 66%, rgba(255,255,255,0.9) 0 55%, transparent 58%), radial-gradient(2px 2px at 50% 74%, rgba(255,255,255,0.75) 0 60%, transparent 62%);
}

/* ---------- KNOB (sun/moon) ---------- */
.pba-theme-switch__knob {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    width: var(--knob);
    height: var(--knob);
    border-radius: 999px;
    z-index: 2;
    /* Sun */
    background: radial-gradient(circle at 35% 30%, #ffe88a 0%, #ffd24a 35%, #ffb400 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), background 220ms ease, box-shadow 220ms ease;
}

/* ---------- CHECKED = DARK ---------- */
.pba-theme-switch__input:checked + .pba-theme-switch__track::before {
    opacity: 0; /* hide clouds */
}

.pba-theme-switch__input:checked + .pba-theme-switch__track::after {
    opacity: 1; /* show night gradient */
}

.pba-theme-switch__input:checked + .pba-theme-switch__track .pba-theme-switch__knob::after {
    opacity: 1; /* show stars */
}

/* Move knob to right */
.pba-theme-switch__input:checked + .pba-theme-switch__track .pba-theme-switch__knob {
    transform: translateX(calc(var(--w) - var(--knob) - (var(--pad) * 2)));
    /* Moon */
    background: radial-gradient(circle at 30% 30%, #f2f5f7 0%, #dfe6ea 55%, #cfd8df 100%);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Moon craters (only visible in dark) */
.pba-theme-switch__knob::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    opacity: 0; /* enabled in dark */
    background: radial-gradient(10px 10px at 60% 35%, rgba(0,0,0,0.10) 0 60%, transparent 62%), radial-gradient(14px 14px at 42% 55%, rgba(0,0,0,0.10) 0 60%, transparent 62%), radial-gradient(8px 8px at 70% 62%, rgba(0,0,0,0.08) 0 60%, transparent 62%), radial-gradient(7px 7px at 52% 72%, rgba(0,0,0,0.08) 0 60%, transparent 62%);
}

.pba-theme-switch__input:checked + .pba-theme-switch__track .pba-theme-switch__knob::before {
    opacity: 1;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .pba-theme-switch__knob {
        transition: none !important;
    }
}