/* ==========================================================================
   Padeler · Buscar Canchas Stylesheet
   Design system & custom aesthetics (Dark mode, premium blur & aurora glows)
   ========================================================================== */

/* Keyframe animations for background aurora orbs */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.08); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
}

@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 30px) scale(1.1); }
  66% { transform: translate(30px, -20px) scale(0.9); }
}

@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 50px) scale(1.05); }
}

@keyframes aurora-4 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-60px, -25px) scale(0.95); }
}

@keyframes grid-flow {
  0% { transform: translateY(0); }
  100% { transform: translateY(4rem); }
}

/* Background effects container */
.aurora-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #0C0C0E;
}

/* Soft grid overlay */
.aurora-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(39, 39, 42, 0.3) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(39, 39, 42, 0.3) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 60%, transparent 100%);
  animation: grid-flow 24s linear infinite;
  opacity: 0.45;
}

/* Aurora color blobs */
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora-1 {
  top: -10%;
  left: -5%;
  width: 65%;
  height: 55%;
  background: rgba(163, 230, 53, 0.11); /* Lime */
  filter: blur(120px);
  animation: aurora-1 14s ease-in-out infinite;
}

.aurora-2 {
  top: 15%;
  right: -10%;
  width: 55%;
  height: 50%;
  background: rgba(50, 95, 255, 0.08); /* Blue */
  filter: blur(110px);
  animation: aurora-2 17s ease-in-out infinite;
}

.aurora-3 {
  bottom: -15%;
  left: 5%;
  width: 60%;
  height: 55%;
  background: rgba(139, 92, 246, 0.08); /* Violet */
  filter: blur(110px);
  animation: aurora-3 20s ease-in-out infinite;
}

/* Noise texture overlay */
.aurora-noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #1F2128;
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2A2D37;
}

/* Hide scrollbar horizontally but allow scrolling */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* Smooth layout and transition classes */
.card-hover-transition {
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Form controls customization */
.search-input-focus:focus-within {
  border-color: rgba(163, 230, 53, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.25) !important;
}

/* Loading animations */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

.skeleton-loading {
  background: linear-gradient(90deg, #141519 25%, #1A1C22 50%, #141519 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  to {
    background-position-x: -200%;
  }
}

/* Adjust Leaflet Dark Map Tile Contrast for Readability */
.leaflet-tile {
  filter: brightness(2.2) contrast(1.2) saturate(0.95) !important;
}