/* Scrollbar styles for all scrollable areas */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #040956; /* Indigo-500 */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #040956; /* Indigo-600 */
}

/* Optional: for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #040956 #f1f1f1;
}

html {
  scroll-behavior: smooth;
}

/* Ensure form container can be scrolled to smoothly */
#shareholderForm {
  scroll-margin-top: 2rem;
}

.bg-fixed-custom {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Clean circular spinner */
.colored-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  animation: spin-circle 1.2s linear infinite;
  position: relative;
}

.colored-spinner::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid transparent;
  border-top: 4px solid #9ca3af;
  border-radius: 50%;
  animation: spin-circle 0.8s linear infinite reverse;
}

@keyframes spin-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Button loading state animations */
.button-loading {
  transform-origin: center;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button-loading-circle {
  border-radius: 50% !important;
  aspect-ratio: 1;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 !important;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #fed7aa !important; /* Pale orange background */
  border-color: #fdba74 !important; /* Slightly darker orange border */
}

/* Text fade animations */
.fade-out-text {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.fade-in-text {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* Success and Error notification positioning */
#successNotification, #errorNotification {
  z-index: 9999;
  top: 1rem;
  position: fixed;
}

/* Error notification specific styling */
#errorNotification {
  border-left-color: #ef4444; /* Red-500 */
}

#errorNotification .bg-red-100 {
  background-color: #fee2e2;
}

#errorNotification .text-red-500 {
  color: #ef4444;
}

.text-orange-custom {
  color: #FF8C00; /* A vibrant orange */
}
.bg-orange-custom {
  background-color: #FF8C00;
}
.hover\:bg-orange-custom-dark:hover {
  background-color: #CC7000; /* A darker shade for hover */
}
/* Ensure the background image covers the full section and is fixed */
.bg-fixed-cover {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}