enhace @tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
  --secondary: 160 84% 39%;
  --secondary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221 83% 53%;
  --radius: 0.75rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading font-semibold;
  }
}

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

.select-content,
[role="listbox"],
[role="combobox"] {
  @apply z-[1000];
}

.glass-card {
  @apply bg-white/80 backdrop-blur-sm border border-white/20 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-900/80 dark:border-gray-700/20;
}

.gradient-border {
  @apply relative rounded-lg p-[1px] bg-gradient-to-r from-primary via-secondary to-primary overflow-hidden;
}

.gradient-border::before {
  content: "";
  @apply absolute inset-0 bg-gradient-to-r from-primary/50 via-secondary/50 to-primary/50 opacity-50 blur-xl transition-all duration-500;
}

.gradient-border:hover::before {
  @apply opacity-75;
}

.gradient-text {
  @apply bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.metallic-effect {
  @apply relative overflow-hidden;
  background: linear-gradient(45deg,
      hsl(218, 76%, 51%) 5%,
      #396cabe8 10%,
      hsl(57, 43%, 92%) 30%,
      #ddd 50%,
      #1568c7 70%,
      #fff 80%,
      #999 95%);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.metallic-effect::after {
  @apply absolute -top-1/2 -left-1/2;
  content: "";
  width: 200%;
  height: 200%;
  background: linear-gradient(30deg,
      transparent 20%,
      transparent 40%,
      rgb(255, 255, 255, 0.4) 50%,
      rgb(255, 255, 255, 0.4) 55%,
      transparent 70%,
      transparent 100%);
  transform: rotate(30deg);
  animation: shine-metal 3s infinite linear;
}

@keyframes shine-metal {
  from {
    transform: translateX(-100%) rotate(30deg);
  }

  to {
    transform: translateX(100%) rotate(30deg);
  }
}

.card-shine-effect {
  --shine-deg: 45deg;
  @apply relative overflow-hidden rounded-[0.875rem] p-8 shadow-lg;
  background: linear-gradient(to bottom, #dbdbdb, #f9f9f9, #dbdbdb);
}

.card-shine-effect:after {
  @apply absolute top-0 z-[1];
  content: "";
  width: 300%;
  height: 300%;
  background: linear-gradient(30deg,
      transparent 20%,
      transparent 40%,
      rgb(255, 255, 255, 0.4) 50%,
      rgb(255, 255, 255, 0.4) 55%,
      transparent 70%,
      transparent 100%);
  transition: transform 2s ease-in;
  transform: translateX(100%) rotate(var(--shine-deg));
}

.card-shine-effect:hover:after {
  animation: shine-card 1s infinite ease-in;
}

@keyframes shine-card {
  0% {
    transform: translateX(100%) rotate(var(--shine-deg));
  }

  100% {
    transform: translateX(-100%) rotate(var(--shine-deg));
  }
}

.bg-grid-pattern {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.scrollbar {
  @apply flex touch-none select-none transition-colors;
}

.scrollbar-vertical {
  @apply h-full w-2.5 border-l border-l-transparent p-[1px];
}

.scrollbar-horizontal {
  @apply h-2.5 flex-col border-t border-t-transparent p-[1px];
}

.scrollbar-thumb {
  @apply relative flex-1 rounded-full bg-border;
}

.px-6.py-4.no-drag {
  overflow-y: auto;
  /* or scroll */
  max-height: 300px;
  /* Adjust as needed */
}

body header h1 span.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(219, 66%, 30%), hsl(0, 0%, 80%), hsl(219, 66%, 30%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

span.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(219, 66%, 30%), hsl(0, 0%, 80%), hsl(219, 66%, 30%)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

h2.text-4xl.font-bold.font-heading.bg-gradient-to-r.from-primary.via-secondary.to-primary.bg-clip-text.text-transparent.mb-4 {
  background-image: linear-gradient(to right, hsl(219, 66%, 30%), hsl(0, 0%, 80%), hsl(219, 66%, 30%)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transpare nt !important;
}

h3.text-4xl.font-heading.font-bold.bg-gradient-to-r.from-primary.via-secondary.to-primary.bg-clip-text.text-transparent.mb-6 {
  background-image: linear-gradient(to right, hsl(219, 66%, 30%), hsl(0, 0%, 60%), hsl(219, 66%, 30%)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}