/* Phoenix Arabia Cup - Custom Styles */

html {
  scroll-behavior: smooth;
}

.hero-gradient-overlay {
  background: linear-gradient(90deg, rgba(30, 8, 12, 0.85) 0%, rgba(60, 15, 25, 0.4) 60%, transparent 100%);
}

.card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(90, 21, 32, 0.4);
}

.btn-gold {
  background: linear-gradient(180deg, #d4b56a 0%, #b5924a 100%);
  color: #3d0e18;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: filter 0.25s ease, transform 0.2s ease;
}
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-outline-light {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #c9a961;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.fade-up { animation: fadeUp 0.7s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
  animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Toast visible state */
#toast.show {
  opacity: 1 !important;
  pointer-events: auto;
}


@media (max-width: 768px) {
  #heroPrev, #heroNext {
    display: none !important;
  }
}