@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.723 0.219 149.579);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.723 0.219 149.579);
  --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.723 0.219 149.579);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.696 0.17 162.48);
  --primary-foreground: oklch(0.393 0.095 152.535);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.527 0.154 150.069);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.696 0.17 162.48);
  --sidebar-primary-foreground: oklch(0.393 0.095 152.535);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.527 0.154 150.069);
}

@layer components {
  .header {
    @apply bg-white dark:bg-card shadow dark:border-b p-2 md:p-3 sticky z-40 top-0;
  }
  .header-img {
    @apply bg-white dark:bg-transparent dark:border rounded-full p-1 mr-12 shrink-0 lg:mr-0 lg:shrink;
  }
  .search-input {
    @apply rounded-r-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 bg-transparent dark:bg-transparent;
  }
  .cart-number {
    @apply absolute h-[26px] text-center p-2 bg-primary text-black pl-2 -top-2 right-0 w-[26px] rounded-full text-2xl flex items-center justify-center;
  }
  .hero-p {
    @apply absolute left-6 bottom-3 md:bottom-6 text-white text-xl md:text-3xl font-bold font-serif;
  }
  .div-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-2;
  }
  .google-btn {
    @apply h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-primary focus:bg-blue-50 active:bg-blue-100 cursor-pointer;
  }
  .google-span {
    @apply block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary sm:text-base;
  }
  .github-btn {
    @apply h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-primary focus:bg-blue-50 active:bg-blue-100 cursor-pointer;
  }
  .github-span {
    @apply block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary sm:text-base;
  }
  .discord-btn {
    @apply h-12 px-6 border-2 border-gray-300 rounded-full transition duration-300 hover:border-primary focus:bg-blue-50 active:bg-blue-100 cursor-pointer;
  }
  .discord-span {
    @apply block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary sm:text-base;
  }
  .thumbnail {
    @apply w-full transition-transform group-hover:translate-x-2 group-hover:-translate-y-2 rounded-md;
  }
  .shop-grid {
    @apply md:ml-[290px] lg:ml-[320px] xl:ml-[340px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-2;
  }
  .cart-header {
    @apply bg-[#dddddd] dark:bg-[#191919] p-4 mb-4 rounded-lg flex justify-between items-center sticky lg:top-[90px] top-14 z-30;
  }
  .cartcard-div {
    @apply rounded-lg lg:w-4/5 justify-between mb-3 bg-[#dddddd] dark:bg-[#191919] p-4 shadow-md sm:flex block;
  }
  .cart-paymentcard {
    @apply mt-6 h-full rounded-lg border border-gray-400 p-6 shadow-md md:mt-0 lg:w-1/3;
  }
  .cart-empty {
    @apply bg-green-300 text-black text-center p-3 block rounded-lg cursor-pointer w-full mt-32 text-2xl font-extrabold;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
}

.screen {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1700px) {
  .screen {
    max-width: 1700px;
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
