/* Success Animation Overlay */
.success-overlay, .error-overlay, .loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}

.success-overlay.show, .error-overlay.show, .loading-overlay.show {
  opacity: 1;
}

.success-animation, .error-animation, .loading-animation {
  background: white;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  transform: scale(0.5);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.success-overlay.show .success-animation,
.error-overlay.show .error-animation,
.loading-overlay.show .loading-animation {
  transform: scale(1);
}

/* Checkmark Circle */
.checkmark-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  position: relative;
}

.checkmark {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #4bb543;
  stroke-miterlimit: 10;
  box-shadow: inset 0 0 0 #4bb543;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark-circle-path {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #4bb543;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: #ffffff; /* Changed from green to white */
  stroke-width: 4; /* Made slightly thicker to be more visible */
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0 0 0 60px #4bb543;
  }
}

/* Error Cross */
.error-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  position: relative;
}

.error-cross {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #d93025;
  stroke-miterlimit: 10;
  box-shadow: inset 0 0 0 #d93025;
  animation: fill-error 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.error-circle-path {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #d93025;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.error-line1, .error-line2 {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes fill-error {
  100% {
    box-shadow: inset 0 0 0 60px #d93025;
  }
}

/* Loading Spinner */
.spinner {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #0a84ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Messages */
.success-message, .error-message, .loading-message {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  animation: fadeInUp 0.4s ease-out 0.6s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateX(400px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 9999;
  max-width: 400px;
  border-left: 4px solid;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  border-left-color: #4bb543;
}

.toast-error {
  border-left-color: #d93025;
}

.toast-info {
  border-left-color: #0a84ff;
}

.toast-warning {
  border-left-color: #ff9500;
}

.toast-icon {
  font-size: 1.5rem;
  font-weight: bold;
}

.toast-success .toast-icon {
  color: #4bb543;
}

.toast-error .toast-icon {
  color: #d93025;
}

.toast-info .toast-icon {
  color: #0a84ff;
}

.toast-warning .toast-icon {
  color: #ff9500;
}

.toast-message {
  flex: 1;
  color: #1d1d1f;
  font-weight: 500;
}

/* Button Animations */
.button, button[type="submit"], .submit-section button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.button:active, button[type="submit"]:active, .submit-section button:active {
  transform: scale(0.95);
}

.button::after, button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.button:active::after, button[type="submit"]:active::after {
  width: 300px;
  height: 300px;
}

/* Card Hover Animations */
.card, .stat-card, .form-section {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .stat-card:hover {
  transform: translateY(-5px);
}

/* Fade In Animation for Page Load */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > * {
  animation: fadeIn 0.5s ease-out;
}