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

/* Custom styles can be added below */
:root {
  --teal: #008080;
  --coral: #FF6F61;
  --ivory: #F8F1E9;
  --charcoal: #2D2D2D;
  --lime: #A8D5BA;
}

body {
  font-family: 'Inter', sans-serif;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

.product-card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.hidden {
  display: none;
}

.filter-btn.active {
  background-color: var(--teal, #008080);
  color: white;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* For No JS Model */
.noscript-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.725);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-size: 1.2em;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.noscript-popup p {
  margin: 10px 0;
}
.noscript-popup a {
  color: #00ffff;
  text-decoration: underline;