/* Custom Button Styling */
.btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-family: "Poppins", sans-serif !important;
  padding: 8px 16px !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* Button Sizes */
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.btn-lg {
  padding: 12px 24px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #3461ff 0%, #5a7cff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(52, 97, 255, 0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2651e6 0%, #4c6bff 100%) !important;
  box-shadow: 0 4px 12px rgba(52, 97, 255, 0.4) !important;
}

/* Success Button */
.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3) !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #218838 0%, #1ba085 100%) !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3) !important;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #c82333 0%, #d42c1a 100%) !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

/* Warning Button */
.btn-warning {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
  color: #212529 !important;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3) !important;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #e0a800 0%, #e66a00 100%) !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4) !important;
}

/* Info Button */
.btn-info {
  background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3) !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, #138496 0%, #5a2d91 100%) !important;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4) !important;
}

/* Secondary Button */
.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3) !important;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268 0%, #494f54 100%) !important;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4) !important;
}

/* Outline Buttons */
.btn-outline-primary {
  border: 2px solid #3461ff !important;
  color: #3461ff !important;
  background: transparent !important;
  box-shadow: 0 2px 6px rgba(52, 97, 255, 0.1) !important;
}

.btn-outline-primary:hover {
  background: #3461ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(52, 97, 255, 0.3) !important;
}

.btn-outline-success {
  border: 2px solid #28a745 !important;
  color: #28a745 !important;
  background: transparent !important;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.1) !important;
}

.btn-outline-success:hover {
  background: #28a745 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

.btn-outline-danger {
  border: 2px solid #dc3545 !important;
  color: #dc3545 !important;
  background: transparent !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.1) !important;
}

.btn-outline-danger:hover {
  background: #dc3545 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* Dark Theme Support */
html.dark-theme .btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Focus States */
.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(52, 97, 255, 0.3) !important;
}

/* Loading Button */
.btn.loading {
  position: relative !important;
  color: transparent !important;
}

.btn.loading::after {
  content: "";
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  top: 50% !important;
  left: 50% !important;
  margin-left: -8px !important;
  margin-top: -8px !important;
  border: 2px solid transparent !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
}

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