/* Dark Stars Background Effect
   A special animated background effect for dark mode
   with moving stars for all Terzon pages */

.stars-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Show stars on all pages in dark mode */
body.dark .stars-container,
body.dark-mode .stars-container {
  display: block;
  background: linear-gradient(to bottom, #0f0f1b, #1a1a2e);
}

.star {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle var(--duration) infinite ease-in-out;
  animation-delay: var(--delay);
}

@keyframes twinkle {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}

.shooting-star {
  position: absolute;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
  transform: rotate(var(--angle));
  animation: shooting var(--duration) infinite ease-out;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes shooting {
  0% {
    opacity: 0;
    width: 0;
    transform: translateX(-100px) rotate(var(--angle));
  }
  10% {
    opacity: 1;
    width: var(--length);
  }
  20% {
    width: 0;
    opacity: 0;
    transform: translateX(100px) rotate(var(--angle));
  }
  100% {
    opacity: 0;
    width: 0;
    transform: translateX(100px) rotate(var(--angle));
  }
}

/* Make containers and backgrounds transparent in dark mode */
body.settings-page.dark .settings-container,
body.settings-page.dark .settings-section,
body.settings-page.dark .card,
body.settings-page.dark .profile-card,
body.settings-page.dark .settings-card {
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Make white backgrounds transparent */
body.settings-page.dark .profile-picture-display,
body.settings-page.dark .form-group input,
body.settings-page.dark .form-group textarea,
body.settings-page.dark .form-group select,
body.settings-page.dark .btn {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Direct fix for white background elements without relying on other styles */
body.settings-page.dark div[style*="background: #fff"],
body.settings-page.dark div[style*="background-color: #fff"],
body.settings-page.dark div[style*="background:white"],
body.settings-page.dark div[style*="background-color:white"] {
  background-color: rgba(0, 0, 0, 0.4) !important;
}