/* =========================
   Domain Genesis Theme Toggle
   Standalone light/dark switch
   ========================= */

.theme-toggle-wrap {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 100;
}

theme-toggle {
  display: inline-block;
}

/* Toggle shell */
.glass-toggle {
  position: relative;
  width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  box-shadow:
    8px 8px 16px rgba(0,0,0,0.15),
    -8px -8px 16px rgba(255,255,255,0.6),
    inset 3px 3px 6px rgba(255,255,255,0.5),
    inset -3px -3px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  overflow: hidden;
}

body[data-theme="dark"] .glass-toggle {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow:
	  4px 4px 10px rgba(0,0,0,0.12),
	  inset 1px 1px 2px rgba(255,255,255,0.3);
}

/* Knob */
.toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.95);
  border-radius: 9999px;
  box-shadow:
    5px 5px 10px rgba(0,0,0,0.25),
    -3px -3px 6px rgba(255,255,255,0.9);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
}

body[data-theme="dark"] .toggle-knob {
  background: rgba(241, 245, 249, 0.95);
  box-shadow:
    5px 5px 10px rgba(0,0,0,0.5),
    -3px -3px 6px rgba(255,255,255,0.15);
}

/* Slide */
.theme-toggle-input:checked ~ .glass-toggle .toggle-knob {
  transform: translateX(36px);
}

/* Background icons */
.bg-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0.2;
  transition: opacity 0.3s;
}

.sun {
  left: 10px;
  top: 10px;
}

.moon {
  right: 10px;
  top: 10px;
}

.theme-toggle-input:checked ~ .glass-toggle .sun {
  opacity: 0.3;
}

.theme-toggle-input:not(:checked) ~ .glass-toggle .moon {
  opacity: 0.4;
}

/* Hide checkbox */
.theme-toggle-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}