/* global variables for generic styling */
:root {
  --border-light: rgba(255,255,255,0.05);
}

body {
  /* Subtle dark background pattern */
  background-image: radial-gradient(circle at top right, rgba(16, 185, 129, 0.03), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.03), transparent 40%);
  background-attachment: fixed;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a; 
}
::-webkit-scrollbar-thumb {
  background: #334155; 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; 
}

/* Hide scrollbar utility */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.border-light-divider {
  border-color: var(--border-light);
}

/* Inputs styling override for autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Prediction Input Number Hide Arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Animations & Transitions */
.view-section {
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.match-card {
  transition: all 0.2s ease-in-out;
}
.match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

.toast {
  animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Carousel Specific Styles */
.carousel-item {
  display: none;
}
.carousel-item.active {
  display: block;
}

#carousel-container .carousel-item {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease-in-out;
}

/* Ensure smooth transitions for carousel slides */
.carousel-item.opacity-0 {
    pointer-events: none;
}

/* Donation FAB Animation */
#donation-fab {
    animation: pulse-glow 3s infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(244, 63, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
}