/* --------------------
   Base container styles
--------------------- */
/* Hide all by default */
.icon-warpper {
  display: none;
}

/* Show only the active one */
.icon-warpper.is-active {
  display: inline-flex;
  align-items: center;
}

/* Force Light Mode as default active */
#light-mode.is-active {
  display: inline-flex;
  align-items: center;
}

.dark-light-container {
  cursor: pointer;
  transition: background 0.4s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
}

/* Light mode background */
body.light-mode-class .dark-light-container {
  background: white !important;
  box-shadow: inset 0px 0px 8px #6eaef5, inset -10px -6px 8px rgba(255, 255, 255, 0.05);
}

/* Dark mode background */
body.dark-mode-class .dark-light-container {
  background: #111827 !important;
  box-shadow: inset 0px 0px 6px #ffffff, inset -10px -6px 8px rgba(255, 255, 255, 0.05);
}

/* --------------------
   Icon wrapper
--------------------- */
.icon-warpper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* --------------------
   Injected Text Labels
--------------------- */
#light-mode::after {
      display: inline-flex;
  align-items: center;
  content: "Light Mode";
  font-size: 14px;
  color: #4dabff;
  opacity: 0;
  font-weight: 700;
  transform: translateX(-10px);
  transition: all 0.4s ease;
}

#dark-mode::after {
      display: inline-flex;
  align-items: center;
  content: "Dark Mode";
  font-size: 14px;
  font-weight: 700;
  color: white;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s ease;
}

/* Show text when active */
#light-mode.is-active::after,
#dark-mode.is-active::after {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------
   Animations
--------------------- */
.icon-warpper.is-hidden {
  display: none !important;
}

/* Fade out old icon */
.icon-warpper.is-fading-out {
  animation: fadeOut 0.3s forwards;
}

/* Incoming icon starts on the right */
.icon-warpper.prepare-slide-in {
  opacity: 0;
  transform: translateX(40px); /* start from right */
}

/* Slide in to the left */
.icon-warpper.is-sliding-in {
  animation: slideIn 0.6s forwards;
}

/* Keyframes */
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); } /* fade out left */
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); } /* from right */
  to { opacity: 1; transform: translateX(0); }
}

 .light-mode-class .elementor-icon{
    background: white !important;
    border-radius: 100px !important;
    padding: 3px !important;
     
 }
  .dark-mode-class .elementor-icon{
    background: #111 !important;
    border-radius: 100px !important;
    padding: 3px !important;
     
 }



/* DARK MODE PAGE*/
body.dark-mode-class canvas {
  background: #111;
}


body.dark-mode-class {
  color: white;
}