/* Exact South.gg Style Sheet */

/* Perspective Floor Grid Pattern */
.bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(0, 162, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 162, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
}

/* Floating Badges subtle hover & animation */
.floating-badge {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-badge:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(0, 162, 255, 0.4);
  box-shadow: 0 15px 30px -5px rgba(0, 162, 255, 0.25);
}

/* Shop Category Filter Buttons */
.shop-filter {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.shop-filter:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.shop-filter.active {
  background: #00a2ff;
  color: #ffffff;
  border-color: #00a2ff;
  box-shadow: 0 4px 15px rgba(0, 162, 255, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #07060a;
}

::-webkit-scrollbar-thumb {
  background: #252030;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00a2ff;
}


/* GLOBAL BLUE CLOSE BUTTONS OVERRIDE */
.south-cart-drawer__close,
.south-modal-close,
.rm-sm-modal-close,
.rm-tg-modal-close,
.rm-shop-modal-close,
.rm-vs-modal-close,
button[aria-label="Close"],
button[aria-label="Close cart"],
.et-close-popup {
  border: 1px solid rgba(0, 162, 255, 0.4) !important;
  background: #0c1f38 !important;
  color: #38bdf8 !important;
  box-shadow: none !important;
}

.south-cart-drawer__close:hover,
.south-modal-close:hover,
.rm-sm-modal-close:hover,
.rm-tg-modal-close:hover,
.rm-shop-modal-close:hover,
.rm-vs-modal-close:hover,
button[aria-label="Close"]:hover,
button[aria-label="Close cart"]:hover,
.et-close-popup:hover {
  background: #00a2ff !important;
  border-color: #00a2ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(0, 162, 255, 0.6) !important;
}