@import "./styles/reset.css";
@import "./styles/megamenu.css";

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background font-sans text-foreground antialiased;
  }
}

.fade-out-mask {
  background: linear-gradient(to bottom, rgba(249, 250, 251, 0.95) 0%, rgba(249, 250, 251, 0) 10%, rgba(249, 250, 251, 0) 90%, rgba(249, 250, 251, 0.95) 100%);
}

.ai-chat-fade-out-mask {
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 250, 1) 0%,
    rgba(250, 250, 250, 0.8) 1%,
    rgba(250, 250, 250, 0.6) 2%,
    rgba(250, 250, 250, 0.4) 3%,
    rgba(250, 250, 250, 0.2) 4%,
    rgba(250, 250, 250, 0.1) 5%,
    rgba(250, 250, 250, 0) 6%,
    rgba(250, 250, 250, 0) 94%,
    rgba(250, 250, 250, 0.1) 95%,
    rgba(250, 250, 250, 0.2) 96%,
    rgba(250, 250, 250, 0.4) 97%,
    rgba(250, 250, 250, 0.6) 98%,
    rgba(250, 250, 250, 0.8) 99%,
    rgba(250, 250, 250, 1) 100%
  );
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Apply styles specifically for Safari/WebKit browsers to adjust for safe area */
@supports (-webkit-touch-callout: none) {
  .floating-chat-box {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  @media (min-width: 768px) {
    .floating-chat-box {
      bottom: calc(2rem + env(safe-area-inset-bottom));
    }
  }
}
