/* Custom CSS Styling for Trendsly Meesho Intelligence Hub */

html, body {
  background-color: #FFFFFF !important;
  color: #1E293B;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.category-row-section {
  background-color: #FFFFFF !important;
}

.dark html, .dark body {
  background-color: #090A0F !important;
  color: #F8FAFC;
}

.dark .category-row-section {
  background-color: #12141E !important;
}

/* Custom Scrollbar for Left Category Sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #1E2235;
}

/* Hide scrollbar for Chrome, Safari, Opera and Firefox */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Subcategory Pill Button Styling (Matching Screenshot) */
.subcat-pill {
  background-color: #FFFFFF;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  transition: all 0.15s ease;
}

.subcat-pill:hover {
  background-color: #FDF2F8;
  border-color: #FBCFE8;
  color: #DB2777;
  transform: translateY(-1px);
}

.dark .subcat-pill {
  background-color: #12141E;
  color: #CBD5E1;
  border: 1px solid #1E2235;
}

.dark .subcat-pill:hover {
  background-color: #261528;
  border-color: #9D174D;
  color: #F472B6;
}

.subcat-pill.active {
  background-color: #F43397;
  border-color: #F43397;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(244, 51, 151, 0.35);
}

/* Vibrant Pink Pill Button (Matching Exact User Reference Screenshot) */
.btn-pink-pill {
  background-color: #F43397;
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(244, 51, 151, 0.28);
}

.btn-pink-pill:hover {
  background-color: #E02685;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244, 51, 151, 0.38);
}

.btn-pink-pill:active {
  transform: scale(0.98);
}

/* Category Accordion Card (Matching Screenshot) */
.cat-accordion-card {
  border: 1px solid #E2E8F0;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
}

.dark .cat-accordion-card {
  border: 1px solid #1E2235;
  background-color: #12141E;
}

.cat-accordion-card.expanded {
  border-color: #FBCFE8;
  box-shadow: 0 4px 12px rgba(244, 51, 151, 0.08);
}

.dark .cat-accordion-card.expanded {
  border-color: #9D174D;
}

/* Top Trending Filter Pill Active (Matching Screenshot) */
.trending-pill {
  border: 1px solid transparent;
  color: #64748B;
  background-color: transparent;
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.trending-pill:hover {
  color: #0F172A;
  background-color: #F1F5F9;
  transform: translateY(-1px);
}

.dark .trending-pill:hover {
  color: #F8FAFC;
  background-color: #1A1F2C;
}

.trending-pill.active {
  background-color: #FFFFFF;
  color: #0F172A;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark .trending-pill.active {
  background-color: #1A1F2C;
  color: #FFFFFF;
  border-color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Card Hover & Sizing */
.tingily-card {
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Any product card placed inside a CSS Grid MUST fit its column and never overflow */
.grid > .tingily-card,
.grid > * > .tingily-card,
#allProductsGrid > .tingily-card,
.tingily-card.grid-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

/* Any product card placed inside a horizontal carousel keeps a fixed width for scrolling */
.carousel-track > .tingily-card,
[id^="carousel-"] > .tingily-card,
.tingily-card.carousel-card {
  width: 295px !important;
  max-width: 295px !important;
  min-width: 295px !important;
  flex-shrink: 0 !important;
}

/* Ensure horizontal scrolling track is strictly single-line flex row */
[id^="carousel-"],
.carousel-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.tingily-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 0 12px -2px rgba(37, 99, 235, 0.12);
}

.dark .tingily-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 16px -2px rgba(59, 130, 246, 0.15);
}

/* App Feeling Mobile Optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

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

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* Guaranteed Continuous Rotation for Dotted Spinners & Icons */
@keyframes trendsly-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fa-spin,
.animate-spin,
.trendsly-spin,
i.fa-spinner {
  display: inline-block !important;
  animation: trendsly-spin 1s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}

/* AI Mind-Reader Search Dropdown & Glassmorphism */
#aiSearchDropdown {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.dark #aiSearchDropdown {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}