@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~@fortawesome/fontawesome-free/css/all.css";

@layer components {
  .container {
    @apply w-[90%] max-w-screen-xl mx-auto;
  }

  .button {
    @apply bg-red-500 text-white block w-max py-2 px-4 rounded-lg;
  }

  .button-primary {
    @apply button bg-orange-500 text-white;
  }

  .button-secondary {
    @apply button bg-red-500 text-white;
  }

  .button-sm {
    @apply py-2 px-4 text-xs;
  }

  /* .highligth {
    @apply bg-yellow-300 text-black px-6 py-1 rounded-full;
  } */

  .marquee {
    @apply overflow-hidden text-[16px] uppercase bg-yellow-400;
  }

  .marquee__inner {
    @apply flex;
  }

  .marquee__line {
    @apply flex-shrink-0 m-0 px-4 py-1 whitespace-nowrap max-w-full;
    animation: marqueeLine 5s ease-in-out infinite;
  }

  @keyframes marqueeLine {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .product-view-main {
    @apply block overflow-hidden;
  }

  .product-view-main .image {
    @apply relative;
  }

  .product-view-main .image .discountedExtra {
    @apply hidden md:absolute p-2 bg-complement text-center text-sm text-white right-2 top-2 rounded-md;
  }

  .product-view-main .image .mask img {
    @apply w-full;
  }
  .product-view-main .data {
    @apply p-4;
  }
  .product-view-main .data .title {
    @apply text-center text-base md:text-lg font-normal;
  }
  .product-view-main .data .price {
    @apply text-center my-2;
  }
  .product-view-main .price .priceDiscounted {
    @apply line-through text-gray-500;
  }
  .product-view-main .price span:last-child {
    @apply text-xl font-bold text-secondary;
  }

  .product-internal .category {
    @apply font-medium text-secondary text-base;
  }
  .product-internal .title {
    @apply font-medium text-black text-2xl;
  }
  .product-internal .price .priceDiscounted {
    @apply line-through text-gray-500;
  }
  .product-internal .price span:last-child {
    @apply text-2xl font-bold text-secondary;
  }
  .product-internal .description {
    @apply my-4;
  }

  .sticky-header {
    @apply fixed top-0 w-full bg-white shadow-md z-50 transition-transform duration-300;
  }

  .mobile-menu {
    transition: transform 0.3s ease-in-out;
  }

  .mobile-menu-button {
    transition: all 0.3s ease;
  }

  /* Mobile menu styles */
  .mobile-menu {
    @apply fixed top-0 left-0 h-screen w-[70%] bg-white z-[1000] -translate-x-full transition-transform duration-300 ease-in-out shadow-[2px_0_10px_rgba(0,0,0,0.1)] overflow-y-auto;
  }

  .mobile-menu.open {
    @apply translate-x-0;
  }

  .menu-overlay {
    @apply fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-[999] opacity-0 invisible transition-all duration-300 ease-in-out;
  }

  .menu-overlay.active {
    @apply opacity-100 visible;
  }

  .close-menu {
    @apply absolute top-5 right-5 text-2xl cursor-pointer;
  }

  .search-container {
    @apply transition-all duration-300 ease-in-out;
  }
  .search-input {
    @apply transition-all duration-300 ease-in-out;
  }
}