/* Estilos customizados para o tema escuro */

/* Barra de progresso */
#quantidade_barra {
  font-size: 28px;
  color: gray;
  font-weight: bold;
  width: 50%;
  background-color: transparent !important;
}

/* Animações para o ícone de lua no tema escuro */
@keyframes breathing {
  0% {
    filter: drop-shadow(0 0 2px rgba(253, 224, 71, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(253, 224, 71, 0.3));
  }
}

.dark .fa-moon {
  animation: breathing 3s ease-in-out infinite;
}

/* Estilos para canvas QR Code */
canvas a {
  background-color: #ff0080 !important;
}

/* Transições suaves para mudança de tema */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevenir FOUC (Flash of Unstyled Content) */
html {
  visibility: hidden;
}

html.theme-loaded {
  visibility: visible;
}

/* Estilos específicos para inputs no modo escuro */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
  color: #ffffff !important;
  background-color: #27272A !important;
  border-color: #52525B !important;
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="tel"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="number"]::placeholder,
.dark textarea::placeholder {
  color: #9CA3AF !important;
}

/* Estilos para inputs no modo claro */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  color: #111827 !important;
  background-color: #ffffff !important;
  border-color: #D1D5DB !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: #9CA3AF !important;
} 

/* ===== Scrollbars bonitos (claro e escuro) ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.9) rgba(255, 255, 255, 0.08);
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a78bfa, #8b5cf6);
}

/* Modo claro */
html:not(.dark) * {
  scrollbar-color: rgba(99, 102, 241, 0.9) rgba(0, 0, 0, 0.06);
}
html:not(.dark) *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
}
html:not(.dark) *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #3b82f6);
}
html:not(.dark) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #818cf8, #60a5fa);
}