@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
/* @tailwind base;
@tailwind components; */
@tailwind utilities;
@import "tailwindcss";

:root {
  --color-hoverWhite: #d9d9d9;
  --color-hoverBlue: #3a39be; /* hover blue effect */
  --background: #0a0a0a;
  --foreground: #ededed;
  --color-blue: #4d4cfe; /* blue */
  --color-pink: #ff348d; /*pink */
  --color-black: #13151a;
  --color-gray: #29313d;
  --color-naviBlue: #161e2a;
  --color-naturalGray: #8f8f8f;
  --color-slate: #54657e;
  --color-white: #ffffff;
  --color-parrot: #24c18d;
  --color-lightBlue: #dbfaff;
  --color-darkBlue: #121924;
  --color-primaryBlue: #2b5aff26;

  /* font family variables */
  --font-inter: "Inter", sans-serif;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* font families */

.font-inter {
  font-family: var(--font-inter);
}

/* @media (prefers-color-scheme: dark) { */

/* } */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* overflow-x: hidden; */
  overflow: hidden; 
}

.bg {
  background-color: #161e2a;
}
.text-gray {
  color: #54657e;
}
.font-sofia {
  font-family: "Sofia Sans Extra Condensed", sans-serif;
}
.font-onest {
  font-family: "Onest", sans-serif;
}
.light-black-bg {
  background: #13151a;
}

/* subtle inner + outer glow to match the card look */
.xp-glow {
  box-shadow:
    0 10px 30px rgba(43, 90, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.progress-bar {
  border: 0.76px solid #2b5aff;
  background: linear-gradient(
    90deg,
    #2b5aff 25.78%,
    rgba(43, 90, 255, 0.23) 100%
  );
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}

.box-shadow-custom {
  box-shadow: 0px 0px 59.7px 0px #4d4cfe45;
}

.box-shadow-custom-inset {
  box-shadow: inset 0px 0px 59.7px 0px #4d4cfe45;
}

/* Tailwind project me: src/app/globals.css */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #29313d inset; /* tumhara input bg */
  -webkit-text-fill-color: #ffffff;
  transition: background-color 9999s ease-out 0s;
}

/* ⭐ Pretty thin blue scrollbar */
.nice-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #4d4cfe #1a1d29; /* thumb + track */
}

/* Chrome, Edge, Safari */
.nice-scrollbar::-webkit-scrollbar {
  height: 6px; /* horizontal thickness */
}

.nice-scrollbar::-webkit-scrollbar-track {
  background: #1a1d29; /* track color */
  border-radius: 4px;
}

.nice-scrollbar::-webkit-scrollbar-thumb {
  background: #4d4cfe; /* thumb blue */
  border-radius: 6px;
}

.nice-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #5b59ff; /* lighter on hover */
}

.select-card-bg-shadow {
  background: linear-gradient(
    360deg,
    rgba(77, 76, 254, 0.56) 0%,
    rgba(46, 45, 152, 0) 63.45%
  );
}

@keyframes rotateSwing {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

.rotate-swing {
  animation: rotateSwing 2.5s ease-in-out infinite;
  will-change: transform;
}

/* Hide scrollbar for Chrome, Safari, Edge */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox + old Edge */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* IMPORTANT: do NOT put pointer-events: none here */
}
/* ===============================
   GLOBAL BROWSER SCROLLBAR
=============================== */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #4d4cfe #1a1d29;
  font-family: "Sofia Sans Extra Condensed", sans-serif;
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
  width: 6px; /* vertical scrollbar */
  height: 6px; /* horizontal scrollbar */
}

html::-webkit-scrollbar-track {
  background: #1a1d29;
}

html::-webkit-scrollbar-thumb {
  background: #4d4cfe;
  border-radius: 6px;
}

html::-webkit-scrollbar-thumb:hover {
  background: #5b59ff;
}

.bg-blur {
  background: rgba(9, 11, 21, 0.4); /* translucent so blur is visible */
  backdrop-filter: blur(20px);

  /* border-top: 1px solid transparent; */
  border-image-slice: 1;
  border-image-source: linear-gradient(
    90deg,
    rgba(255, 52, 141, 0) 0%,
    rgba(255, 52, 141, 0.74) 50%,
    rgba(255, 52, 141, 0) 100%
  );
}

.img-border-radius {
  border-radius: 6px;
}

.bg-blur-whatsImg {
  backdrop-filter: blur(20.865245819091797px);
}

/* 🔥 When home button clicked */
.auth-attention .login-btn {
  animation: shakeGlow 0.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(77, 76, 254, 0.8);
}

/* optional background highlight */
.auth-attention .login-btn {
  background-color: #4d4cfe !important;
}

/* 🔥 Shake + Glow animation */
@keyframes shakeGlow {
  0% {
    transform: translateX(0);
    box-shadow: 0 0 0 0 rgba(77, 76, 254, 0.8);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
    box-shadow: 0 0 20px 4px rgba(77, 76, 254, 0.9);
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
    box-shadow: 0 0 0 0 rgba(77, 76, 254, 0.8);
  }
}

.auth-attention .login-btn::after {
  content: "Login from here";
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.bg-img1 {
  background-image: url("/images/mystery-packs/bg-img.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sport-tb-cs {
  filter: invert(0.4);
}
.sport-tb-cs.slt {
  filter: invert(1);
}