/* style.css */

@import url("https://cdn.jsdelivr.net/npm/@vercel/fonts@latest/Geist/Geist.css");

/* Fallback if import doesn't work */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.woff2") format("woff2"); /* optional local fallback */
  font-weight: normal;
  font-style: normal;
}

.geist-font {
  font-family: "Geist", sans-serif;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 50s linear infinite;
}
.text-gradient {
  background: linear-gradient(90deg, #f1c55b, #f8e7b9, #8c6b03);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.btn-gradient {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.375rem 2rem; /* py-1.5 px-8 */
  border-radius: 50px;
  background: linear-gradient(to right, #8c6b03, #f1c55b, #f8e7b9, #8c6b03);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-gradient span {
  color: #000000;
  font-family: "Geist", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.btn-gradient:hover {
  filter: brightness(1.1);
}

.btn-group {
  display: flex;
  gap: 1rem; /* space between buttons */
  margin-top: 1rem; /* spacing from card */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.our-products-pill {
  background: linear-gradient(to right, #8c6b03, #f1c55b, #f8e7b9, #8c6b03);
}
.filter-gradient {
  background: linear-gradient(
    to right,
    #8c6b03 0%,
    #f1c55b 25%,
    #f8e7b9 75%,
    #8c6b03 100%
  );
}

.search-gradient {
  background: linear-gradient(
    to right,
    #8c6b03 0%,
    #f1c55b 25%,
    #f8e7b9 75%,
    #8c6b03 100%
  );
}
/* Rotating border in opposite direction */
.rotate-border {
  transition: transform 0.5s linear;
}

.group:hover .rotate-border {
  animation: spin-reverse 2s linear infinite;
}

@keyframes spin-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
/* Optional: Hide scrollbar for nice horizontal scroll on small screens */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Define a custom gradient for file inputs */
.file-gradient::-webkit-file-upload-button {
  background: linear-gradient(90deg, #f1c55b, #f8e7b9, #8c6b03);
  border: none;
  border-radius: 0.5rem; /* match Tailwind's rounded-lg */
  padding: 0.5rem 1rem; /* match Tailwind's file:py-2 file:px-4 */
  color: black;
  font-weight: 600;
  cursor: pointer;
}

.file-gradient::-moz-file-upload-button {
  background: linear-gradient(90deg, #f1c55b, #f8e7b9, #8c6b03);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: black;
  font-weight: 600;
  cursor: pointer;
}
/* Custom gradient for submit button */
.submit-gradient {
  background: linear-gradient(90deg, #f1c55b, #f8e7b9, #8c6b03);
  color: black;
  font-weight: 600;
  border-radius: 0.5rem; /* matches Tailwind's rounded-lg */
  height: 2.5rem; /* matches h-10 */
  cursor: pointer;
  transition: filter 0.2s;
}

.submit-gradient:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-gradient:hover:not(:disabled) {
  filter: brightness(0.9); /* slightly darken on hover */
}

.line-clamp-10 {
  display: -webkit-box;        /* required for line clamping */
  -webkit-line-clamp: 10;      /* number of lines to show */
  -webkit-box-orient: vertical;/* required for line clamping */
  overflow: hidden;            /* hide overflow text */
  text-overflow: ellipsis;     /* add ... */
}

.gradient-icon {
  background: linear-gradient(to right, #8C6B03, #F1C55B, #8C6B03);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(241, 197, 91, 0.3));
  transition: all 0.4s ease;
}

.gradient-icon:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(241, 197, 91, 0.6));
}