onChange('studyDomain', value)} initialValue={data.studyDomain} hasError={!!errors.studyDomain} /> onChange('studyLevel', value)} initialValue={data.studyLevel} hasError={!!errors.studyLevel} /> ); }; export default Step3Formation; 22:T6cc,.interest-category { margin-bottom: 1.5rem; } .category-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #f8fafc; border-radius: var(--radius); cursor: pointer; transition: var(--transition); position: relative; border: 2px solid #e2e8f0; } .category-header.validated { border-color: var(--primary); } .category-header.unvalidated { border-color: #ef4444; animation: shake 0.4s; } .category-title { display: flex; align-items: center; gap: 0.5rem; /* Space between icon and text */ } .category-icons { display: flex; align-items: center; gap: 0.5rem; /* Space between check and chevron */ } .validation-status { color: var(--primary); opacity: 0; transition: var(--transition); font-size: 1rem; /* Adjust size if needed */ } .validated .validation-status { opacity: 1; } .chevron-icon { transition: transform 0.3s ease; } .chevron-icon.up { transform: rotate(180deg); } .subcategories { display: flex; /* Use flex for layout */ flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-left: 0.5rem; max-height: 0; /* Start collapsed */ overflow: hidden; transition: max-height 0.4s ease-out; /* Animate height */ } .subcategories.open { max-height: 300px; /* Adjust as needed, large enough for content */ /* Consider a more dynamic height calculation if necessary */ } .subcategory-tag { background: var(--surface); border: 2px solid #e2e8f0; border-radius: 2rem; padding: 0.5rem 1rem; cursor: pointer; transition: