@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  position: relative;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0f0f11;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f97316;
}

.product-card,
.swal2-popup,
.server-card,
.glass-panel {
  border-radius: 0.75rem !important;
  background: rgba(24, 24, 27, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.product-card:hover,
.swal2-popup:hover,
.server-card:hover,
.glass-panel:hover {
  transform: translateY(-5px);
  background: linear-gradient(
    180deg,
    rgba(39, 39, 42, 0.9) 0%,
    rgba(24, 24, 27, 0.8) 100%
  );
}

.product-card::after,
.swal2-popup::after,
.glass-panel::after,
.server-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: skewX(-15deg);
  transition: 0.5s;
  pointer-events: none;
}

.product-card:hover::after,
.glass-panel:hover::after,
.swal2-popup:hover::after,
.server-card:hover::after {
  left: 100%;
  transition: 0.5s ease-in-out;
}

#sidebar {
  transition: width 0.3s ease-in-out;
}

.sidebar-collapsed .nav-text,
.sidebar-collapsed .section-title,
.sidebar-collapsed .logo-text {
  display: none;
}

.sidebar-collapsed .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav-item i {
  margin-right: 0;
}

.nav-item,
button,
.rounded-lg,
.rounded {
  border-radius: 0.75rem !important;
}

.xbox-icon {
  color: #107c10;
  margin-right: 6px;
}

.ps-icon {
  color: #0070d1;
  margin-right: 6px;
}

.search-focus:focus-within {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
  border-color: #f97316;
}

.top-2\.5 {
  top: 0.325rem;
}

div:where(.swal2-container) div:where(.swal2-validation-message) {
  font-weight: 700;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: rgb(0 0 0 / 0.4) !important;
  color: white !important;
  border-radius: 0.75rem !important;
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button-success:hover,
.btn-success:hover {
  background-color: #107c10 !important;
}

.button-danger:hover,
.btn-danger:hover {
  background-color: #f91616 !important;
}

.button-primary:hover,
.btn-primary:hover {
  background-color: #f97316 !important;
}

.button-success,
.btn-danger,
.btn-primary {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  font-weight: 700;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
  border-radius: 0.75rem !important;
}

.modal {
  transition: opacity 0.25s ease;
}

body.modal-active {
  overflow-y: hidden;
}

@keyframes shimmer-loop {
  0% {
    left: -100%;
  }

  30% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.nav-item.active {
  position: relative;
  overflow: hidden;
  border-radius: 1rem !important;
  background: rgba(24, 24, 27, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #ffffff !important;
  font-weight: 500 !important;
}

.top-2\.1 {
  top: 0.4rem;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0f0f11;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f97316;
}

.product-card,
.dropdown-menu,
.server-card,
.glass-panel {
  border-radius: 0.75rem !important;
  background: rgba(24, 24, 27, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.product-card:hover,
.dropdown-menu:hover,
.server-card:hover,
.glass-panel:hover {
  transform: translateY(-5px);
  background: linear-gradient(
    180deg,
    rgba(39, 39, 42, 0.9) 0%,
    rgba(24, 24, 27, 0.8) 100%
  );
}

.product-card::after,
.glass-panel::after,
.dropdown-menu::after,
.server-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: skewX(-15deg);
  transition: 0.5s;
  pointer-events: none;
}

.product-card:hover::after,
.glass-panel:hover::after,
.dropdown-menu:hover::after,
.server-card:hover::after {
  left: 100%;
  transition: 0.5s ease-in-out;
}

#sidebar {
  transition: width 0.3s ease-in-out;
}

.sidebar-collapsed .nav-text,
.sidebar-collapsed .section-title,
.sidebar-collapsed .logo-text {
  display: none;
}

.sidebar-collapsed .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav-item i {
  margin-right: 0;
}

.nav-item,
button,
.rounded-lg,
.rounded {
  border-radius: 0.75rem !important;
}

.xbox-icon {
  color: #107c10;
  margin-right: 6px;
}

.ps-icon {
  color: #0070d1;
  margin-right: 6px;
}

.search-focus:focus-within {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
  border-color: #f97316;
}

.top-2\.5 {
  top: 0.325rem;
}

.modal {
  transition: opacity 0.25s ease;
}

body.modal-active {
  overflow-y: hidden;
}

@keyframes shimmer-loop {
  0% {
    left: -100%;
  }

  30% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.nav-item.active i {
  color: #f97316 !important;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.nav-item.active::after {
  content: "";
  z-index: 0;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );

  transform: skewX(-15deg);
  pointer-events: none;

  animation: shimmer-loop 3s infinite linear;
}

.top-2\.1 {
  top: 0.4rem;
}

.nav-item.active .icon-container {
  position: relative;
  z-index: 2;
}
.nav-item.active .icon-container::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: #f97316;
  filter: blur(12px);
  opacity: 0.35;
  border-radius: 9999px;
  transition: opacity 0.3s ease-in-out;
  z-index: 0;
  pointer-events: none;
}

.nav-item.active i {
  position: relative;
  z-index: 2;
  display: block;
}

.swal2-title,
.swal2-html-container {
  color: white;
}

.swal2-input {
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, fill, stroke,
    -webkit-text-decoration-color;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  padding-right: 0.75rem;
  padding-left: 2.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
  border-color: rgb(255 255 255 / 0.1);
  border-width: 1px;
  display: block;
  border-radius: 0.75rem !important;
}

.swal2-input:focus-within {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
  border-color: #f97316;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  z-index: -1;
  pointer-events: none;

  box-shadow: 90vw 20vh 75px 25px rgba(255, 0, 0, 0.7),
    30vw 10vh 60px 20px rgba(249, 115, 22, 0.8),
    40vw -10vh 70px 22px rgba(0, 255, 0, 0.6),
    -30vw 40vh 50px 18px rgba(255, 0, 255, 0.5),
    60vw 90vh 45px 15px rgba(249, 115, 22, 0.85),
    70vw 30vh 35px 10px rgba(0, 191, 255, 0.8),
    5vw 50vh 25px 7px rgba(255, 0, 0, 0.9),
    -5vw 20vh 30px 8px rgba(0, 255, 0, 0.7);

  animation: drift-fast 15s ease-in-out infinite alternate;
  filter: blur(5px) brightness(1.3);
  transform: translate3d(0, 0, 0);
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  z-index: -1;
  pointer-events: none;

  box-shadow: 120vw 50vh 120px 40px rgba(70, 0, 150, 0.4),
    -40vw 10vh 100px 35px rgba(0, 50, 200, 0.3),
    10vw -30vh 110px 40px rgba(70, 0, 150, 0.5),
    80vw 5vh 80px 30px rgba(0, 50, 200, 0.4),
    -10vw 70vh 90px 35px rgba(70, 0, 150, 0.35);

  animation: drift-slow 35s ease-in-out infinite alternate;
  filter: blur(8px) brightness(1.2);
  transform: translate3d(0, 0, 0);
}

@keyframes drift-slow {
  0% {
    transform: translate(0vw, 0vh) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translate(-30vw, 20vh) scale(1.05);
    opacity: 0.7;
  }

  100% {
    transform: translate(15vw, -10vh) scale(0.95);
    opacity: 0.9;
  }
}

@keyframes drift-fast {
  0% {
    transform: translate(0vw, 0vh) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translate(25vw, -30vh) scale(1.03);
    opacity: 1;
  }

  100% {
    transform: translate(-20vw, 15vh) scale(0.97);
    opacity: 0.8;
  }
}
.dropdown-container {
  position: relative;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f97316;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 0 0 2px #333;
  cursor: pointer;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 160px;
  z-index: 10;
  padding: 10px !important;
  color: #fff;
  border-radius: 0.75rem !important;
  background-color: #0f0f11 !important;
}
.dropdown-menu.visible {
  display: block;
}
.btn {
  border-radius: 1rem !important;
}
/* Container for both the button and the message */
#notification-floating-container {
  /* Positioning: Fixed to viewport */
  position: fixed;
  bottom: 24px; /* Slightly higher than standard to stand out */
  left: 50%; /* Move to horizontal center */

  /* Centering Trick: Shift left by 50% of its own width */
  transform: translateX(-50%);

  /* Z-Index: Must be high to sit over content */
  z-index: 9999;

  /* Layout */
  display: flex;
  align-items: center;
  padding: 12px 20px; /* Larger padding = larger tap target */

  /* Appearance */
  background-color: #ea580c;
  border-radius: 50px; /* Fully rounded pill shape */
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4); /* Colored shadow for glow effect */
  cursor: pointer;

  /* Animation to draw attention */
  animation: pulse-orange 2s infinite;

  transition: background-color 0.3s, transform 0.2s;
}

/* Hover State - Pauses animation and darkens */
#notification-floating-container:hover {
  background-color: #c2410c;
  transform: translateX(-50%) scale(1.05); /* Slight grow effect */
  animation: none; /* Stop pulsing when hovered so it's easier to click */
}

/* Style for the text message */
#notification-prompt-message {
  color: white;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* THE PULSE ANIMATION KEYFRAMES */
@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(234, 88, 12, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
  }
}
.top-40 {
  top: 0.6rem !important;
}
.lazy-avatar {
  transition: opacity 0.3s ease-in-out;
}
/* --- HUD Panel Styling --- */
.hud-panel {
  /* Glassmorphism base styling */
  border-radius: 0.75rem !important;
  background: rgba(24, 24, 27, 0.3); /* dark-800/30 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Border with brand color for emphasis */
  border: 1px solid rgba(249, 115, 22, 0.5); /* brand-500/50 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(249, 115, 22, 0.2); /* Added glow effect */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover/active state */
.hud-panel:hover {
  transform: translateY(-5px);
  background: linear-gradient(
    180deg,
    rgba(39, 39, 42, 0.9) 0%,
    rgba(24, 24, 27, 0.8) 100%
  );
}

/* Shimmer/shine effect (Pseudo-element setup) */
.hud-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: skewX(-15deg);
  transition: 0.5s;
  pointer-events: none;
}

/* Shimmer/shine effect (Hover trigger) */
.hud-panel:hover::after {
  left: 100%;
  transition: 0.5s ease-in-out;
}
#ppcp-credit-card-gateway-card-number,
#ppcp-credit-card-gateway-card-expiry,
#ppcp-credit-card-gateway-card-cvc {
  color: #0e1116;
  padding: 10px;
}
/* Bandit Wheel Image Styles */

/* This matches the provided logic to center the spotlight 
   over the wheel without rotating with it 
*/
/* Add to your CSS */
.spotlight-overlay {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  /* CHANGED: Use percentage instead of px to scale with the wheel */
  width: 38%;
  background: url("../images/bandit/spotlight.png") no-repeat center !important;
  background-size: contain !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
  aspect-ratio: 0.83;
  opacity: 0.8;
  mix-blend-mode: screen;
}
#wheel {
  /* 10 Seconds duration, specific cubic-bezier to mimic the heavy wheel startup and slow down */
  transition: transform 10s cubic-bezier(0.1, 0, 0.1, 1);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
  will-change: transform; /* Performance optimization for smooth spinning */
}

.bet-btn.selected {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.mask-fade-right {
  mask-image: linear-gradient(to right, transparent, black 20%, black 100%);
}