/**
 * Theme Icons Fix
 * Simplified solution
 */

/* Icon positions */
#darkIcon, #lightIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

/* Force correct colors */
.theme-light #darkIcon {
  color: #1E293B !important;
}

.theme-dark #lightIcon {
  color: #E2E8F0 !important;
}

/* Button styling */
.z-theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  background: transparent;
  overflow: visible;
}

/* Hover effect */
.theme-light .z-theme-toggle:hover {
  background-color: rgba(108, 92, 231, 0.1);
}

.theme-dark .z-theme-toggle:hover {
  background-color: rgba(123, 112, 250, 0.1);
}

/* Initial icon state */
.theme-dark #darkIcon {
  display: none !important;
}

.theme-dark #lightIcon {
  display: block !important;
}

.theme-light #darkIcon {
  display: block !important;
}

.theme-light #lightIcon {
  display: none !important;
}

/* Animation */
@keyframes rotateToggle {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.theme-toggle-animation #darkIcon,
.theme-toggle-animation #lightIcon {
  animation: rotateToggle 0.5s ease;
}