/* Custom styles for SpinRoute */

/* HTMX Indicators */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request .htmx-indicator-hide {
  display: none;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #374151;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #6b7280;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Focus styles for accessibility */
.focus-visible:focus {
  outline: 2px solid #009051;
  outline-offset: 2px;
}

.dark .focus-visible:focus {
  outline-color: #6366f1;
}

/* Animation for mobile menu */
#mobile-menu {
  transition: all 0.3s ease;
}

/* Password strength indicator animations */
.password-requirement-met {
  background-color: #10b981 !important;
  color: #10b981 !important;
}

.password-requirement-met svg {
  display: block !important;
}

/* Form validation styles */
.invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

/* Loading states */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Success/Error message styles */
.success-message {
  background-color: #dcfce7;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 12px;
  border-radius: 6px;
  margin-top: 16px;
}

.dark .success-message {
  background-color: #064e3b;
  border-color: #065f46;
  color: #6ee7b7;
}

.error-message {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px;
  border-radius: 6px;
  margin-top: 16px;
}

.dark .error-message {
  background-color: #7f1d1d;
  border-color: #991b1b;
  color: #fca5a5;
}

/* Disabled button styles */
button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
}

button:disabled:hover,
.btn:disabled:hover {
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  transform: none;
}

.dark button:disabled,
.dark .btn:disabled {
  background-color: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #d1d5db !important;
}

.dark button:disabled:hover,
.dark .btn:disabled:hover {
  background-color: #6b7280 !important;
  border-color: #6b7280 !important;
}

/* Responsive design helpers */
@media (max-width: 640px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}