.category-sections {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(1, 1fr); /* mobile default: 1 */
  align-items: start;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
} /* tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1099px) {
  .category-sections {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
} /* desktop: 3 columns */
@media (min-width: 1100px) {
  .category-sections {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
} /* Section card */
.category-section {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--soft-border);
  box-shadow: 0 8px 20px rgba(11, 18, 32, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
} /* Category heading styled like CTA */
.cat-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--primary-500, var(--brand)) 0%,
    var(--brand-accent, var(--accent)) 100%
  );
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 26px rgba(65, 91, 224, 0.1);
  text-decoration: none;
  justify-content: center;
} /* small subtitle under heading */
.cat-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
} /* Subcategory grid inside a section (compact rows) */
.subcat-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px; /* smaller vertical gap for tighter rows */
  margin-top: 8px;
  align-items: center;
} /* make subcat list single column on very narrow */
@media (max-width: 420px) {
  .subcat-list {
    grid-template-columns: repeat(2, 1fr);
  }
} /* Each subcategory tile (emoji + label) */
.subcat-item {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.03);
} /* emoji column */
.subcat-item .emoji {
  font-size: 18px;
  width: 26px;
  text-align: center;
  line-height: 1;
  
} /* hover/keyboard focus */
.subcat-item:hover,
.subcat-item:focus {
  outline: none;
  box-shadow: 0 10px 30px rgba(65, 91, 224, 0.08);
  cursor: pointer;
} /* See more (label) styling */
.subcat-item.see-more {
  justify-content: center;
  color: var(--brand);
  cursor: pointer;
} /* Hidden checkbox for toggling extras (visually hidden but accessible) Place this input at the top of each .category-section */
.toggle-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
} /* Extra subcategories — collapsed by default with smooth transition */
.extra-subcats {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.36s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.26s ease;
  opacity: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
  margin-top: 8px;
  box-sizing: border-box;
} /* When toggle checked, expand it smoothly */
.toggle-input:checked + .cat-heading + .cat-sub + .subcat-list + .extra-subcats,
.toggle-input:checked ~ .extra-subcats {
  max-height: 600px; /* large enough for content - adjust if needed */
  opacity: 1;
} /* Ensure extra items look identical to normal subcat items */
.extra-subcats .subcat-item {
  margin-top: 0;
} /* show/hide label text spans based on checkbox state */ /* Expect label markup: <label class="see-more"><span class="text-more">See more</span><span class="text-less">See less</span></label> */
.subcat-item.see-more .text-less {
  display: none;
} /* default: show 'See more' */
.toggle-input:checked ~ .subcat-list .see-more .text-more {
  display: none;
} /* hide "See more" when open */
.toggle-input:checked ~ .subcat-list .see-more .text-less {
  display: inline;
} /* show "See less" when open */ /* Accessibility focus ring */
.subcat-item:focus {
  box-shadow: 0 0 0 4px rgba(77, 107, 255, 0.12);
  border-radius: 8px;
} /* tidy spacing for small screens */
@media (max-width: 720px) {
  .category-section {
    padding: 12px;
  }
  .cat-heading {
    font-size: 13px;
    padding: 7px 10px;
  }
  .subcat-item {
    padding: 7px 9px;
    font-size: 13px;
  }
}
.category-section .cat-heading {
  text-align: center; /* center the text only */
  justify-content: center; /* centers the icon + text inside the bar */
}
.category-section .cat-sub {
  text-align: center;
}



/* ===== small helper CSS for JS-driven expand/collapse ===== */

/* Make sure extras are hidden by default (when JS moves them they will have .extra) */
.subcat-item.extra {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: max-height .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease, transform .28s cubic-bezier(.2,.9,.2,1), padding .28s cubic-bezier(.2,.9,.2,1);
  box-sizing: border-box;
}

/* default see-less hidden; see-more shown in HTML */
.subcat-item.see-less { display: none; }

/* When section is expanded, reveal extras and show see-less and hide see-more */
.category-section.expanded .subcat-item.extra {
  max-height: 160px; /* >= approximate tile height; safe oversize */
  padding: 8px 10px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.category-section.expanded .subcat-item.see-less {
  display: inline-flex;       /* now acts as the last tile */
  justify-content: center;
  align-items: center;
}

.category-section.expanded .subcat-item.see-more {
  display: none;              /* remove the 'See more' tile from flow */
}

/* container expansion smoothing to avoid jiggling */
.subcat-list {
  transition: max-height .36s cubic-bezier(.2,.9,.2,1);
  overflow: hidden;
  /* You can tweak collapsed height with CSS var below (or keep as default) */
}


/*ne changesssssssssssssssssssssssssssssssssssssssssssssssss*/


/* --- Desktop See more/See less (JS-assisted) --- */

/* default hidden extras (moved into .subcat-list by JS) */
.subcat-item.extra {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height .36s cubic-bezier(.2,.9,.2,1),
    padding .28s cubic-bezier(.2,.9,.2,1),
    opacity .28s ease,
    transform .28s cubic-bezier(.2,.9,.2,1);
  box-sizing: border-box;
}

/* show extras when section is open */
.category-section.open .subcat-item.extra {
  max-height: 160px;        /* safely larger than tile height */
  padding: 8px 10px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* hide see-more while open so extras occupy its place */
.category-section.open .subcat-item.see-more {
  display: none;
}

/* show see-less only when open (see-less is .extra too) */
.subcat-item.see-less { display: none; } /* hidden by default */
.category-section.open .subcat-item.see-less {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
}

/* avoid jiggling: allow subcat-list to transition height if needed */
.subcat-list { transition: max-height .36s cubic-bezier(.2,.9,.2,1); overflow: visible; }

/* keyboard and pointer niceties */
.subcat-item.see-more, .subcat-item.see-less { cursor: pointer; user-select: none; }
.subcat-item:focus { outline: none; box-shadow: 0 6px 22px rgba(65,91,224,0.07); border-radius: 8px; }

/* reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .subcat-item.extra, .subcat-list { transition: none !important; }
  .subcat-item.extra { max-height: none !important; padding: 8px 10px !important; opacity: 1 !important; visibility: visible !important; }
  .subcat-item.see-less { display: inline-flex !important; }
}
/* Clone animation + helper styling for injected cloned items */
.subcat-item.clone {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.9,.2,1);
}

/* when entering */
.subcat-item.clone.enter {
  opacity: 1;
  transform: translateY(0);
}

/* when leaving */
.subcat-item.clone.leave {
  opacity: 0;
  transform: translateY(-6px);
}

/* See-less clone specific */
.subcat-item.clone.see-less {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Accessibility: visually hidden original extras (not moved) remain as-is */
.extra-subcats { /* no change */ }

/* Make sure .subcat-list has overflow visible so clones don't get clipped */
.extra-subcats {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .32s ease;
}

.toggle-input:checked ~ .extra-subcats {
  max-height: 800px; /* large number */
  opacity: 1;
}


/* hide See Less by default */
.subcat-item.see-less {
  display: none;
  justify-content: center;
  cursor: pointer;
}

/* when expanded (checkbox checked), show See Less */
.toggle-input:checked ~ .extra-subcats .see-less {
  display: flex;
}

/* when expanded, hide See More */
.toggle-input:checked ~ .subcat-list .see-more {
  display: none;
}


.category-section {
  position: relative;
}

.extra-subcats {
  will-change: max-height, opacity;
}
.category-section.animating .subcat-list {
  transition: none !important;   /* prevent mid-move flicker */
}
.subcat-item.see-less {
  color: var(--brand);   /* same accent as See more */
  font-weight: 600;
}
.subcat-item.see-less .emoji {
  color: var(--brand);
}

/* Ensure the .extra-subcats container still animates as before */
.extra-subcats { transition: max-height .36s cubic-bezier(.2,.9,.2,1), opacity .26s ease; }

/* smooth enter/leave for moved items (composited properties only) */
.subcat-item.extra,
.subcat-item.moved {
  will-change: transform, opacity;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  transform: translateY(-6px);
  opacity: 0;
}

/* when inserted, .enter will animate it into place */
.subcat-item.enter {
  transform: translateY(0);
  opacity: 1;
}

/* helper classes used by JS */
.subcat-item.clone { pointer-events: none; } /* temporary clone marker */
.subcat-item.clone.enter { pointer-events: auto; }

/* animating lock: avoid height/overflow transitions during DOM moves */
.category-section.animating .subcat-list {
  transition: none !important;
}

/* See-less color matching See-more */
.subcat-item.see-less {
  color: var(--brand);
  font-weight: 600;
}
.subcat-item.see-less .emoji { color: var(--brand); }

/* ensure subcat-list doesn't clip early (allow space during frag insert) */
.subcat-list { overflow: visible; }
/*.subcat-item .emoji {
    filter: grayscale(1) brightness(1.4) contrast(1.6);
}*/
.subcat-item .emoji {
    filter: grayscale(1) brightness(0.9) contrast(1.6);
}
/*.subcat-item .emoji {
    filter: grayscale(1) brightness(2) contrast(3);
}
    
*/
.subcat-item.see-more .emoji,
.subcat-item.see-less .emoji {
    filter: none !important;
}