.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ✅ Checkbox Styling */
input[type="checkbox"].custom-checkbox {
  appearance: none;
  background-color: white;
  border: 2px solid black;
  border-radius: 0.25rem;
  width: 1rem;
  height: 1rem;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"].custom-checkbox:checked {
  background-color: #f0c01b;
  border-color: black;
}

input[type="checkbox"].custom-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block;
}


/* ✴️ Slider Track and Thumb */
input[type="range"].custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #f0c01b;
  border-radius: 2px;
  outline: none;
  position: relative;
}

/* Thumb - WebKit */
input[type="range"].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: black;
  border: 2px solid #f0c01b;
  cursor: pointer;
  margin-top: -6px;
  z-index: 10;
  position: relative;
}

/* Thumb - Firefox */
input[type="range"].custom-range::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: black;
  border: 2px solid #f0c01b;
  cursor: pointer;
  z-index: 10;
  position: relative;
}

/* Track - Firefox */
input[type="range"].custom-range::-moz-range-track {
  background: #f0c01b;
  height: 4px;
  border-radius: 2px;
}

/* Tooltip Styling */
#rangeTooltip {
  transition: opacity 0.1s ease;
  white-space: nowrap;
}

/* Example if using your own CSS file (e.g. global.css) */
#suggestionResults::-webkit-scrollbar {
  width: 4px;
}
#suggestionResults::-webkit-scrollbar-thumb {
  background-color: #f0c01b;
  border-radius: 10px;
}

/* body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, label, input, textarea, select, button {
  color: var(--text-color); 
} */

/* ✅ EXCEPTIONS - don't override utility classes like text-white */
/* .text-white, .text-gray,
.bg-black .text-white,
.bg-black * {
  color: white !important;
} */



@keyframes scroll-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.animate-scroll-up {
  animation: scroll-up 12s linear infinite; /* ⏩ was maybe 20s+ */
}

#vendorModal *,
#reportModal * {
  color: inherit !important;
}

.fade-in {
  animation: fadeInCard 0.3s ease-in;
}

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#reportDrawer {
  transform: translateY(100%);
}
#reportDrawer.show {
  transform: translateY(0%);
}

/* /css/global.css */

/* Ensure snap-to-start for smooth scroll */
.suggestion-card {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Desktop: 8 cards */
@media (min-width: 1280px) {
  .suggestion-card {
    width: 12.5%;  /* 100% / 8 */
    max-width: 12.5%;
  }
}

/* Tablet: 4 cards */
@media (min-width: 768px) and (max-width: 1279px) {
  .suggestion-card {
    width: 25%;  /* 100% / 4 */
    max-width: 25%;
  }
}

/* Mobile: 2 cards */
@media (max-width: 767px) {
  .suggestion-card {
    width: 50%;  /* 100% / 2 */
    max-width: 50%;
  }
}


/* 🔄 Skeleton shimmer effect */
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% {
    background-position: -500px 0;
  }
  100% {
    background-position: 500px 0;
  }
}

#cropModal {
  display: none;
}

#cropModal.flex {
  display: flex;
}

#mainImagePreview img {
  border: 2px solid #f0c01b;
}

/* 👇 This class hides content smoothly */
.vendor-collapsed {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

#formFeedback {
  display: none;
  padding: 0.5rem;
  color: #f0c01b;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}