/* Figma-like reflected yellow CTA style with hover -> blue */

 .skill-bloomer-yellow {
     background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
     color: #000;
     border-radius: .75rem;
     /* rounded-lg */
     box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15), 0 10px 18px rgba(0, 0, 0, 0.06);
     /* match the transition used for button transforms */
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
     display: inline-flex;
     /* keeps icon and text aligned */
     align-items: center;
     gap: .5rem;
     position: relative;
 }

 /* on hover, turn blue and change text/icon color to white */
 .skill-bloomer-yellow:hover {
     background: linear-gradient(135deg, #0745FF 0%, #004ff8 100%);
     color: #fff !important;
     transform: translateY(-3px);
     box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
 }

 /* a soft, offset shadow backing (Figma-style) */
 .skill-bloomer-yellow::after {
     content: '';
     position: absolute;
     left: 8px;
     top: 8px;
     right: -8px;
     bottom: -8px;
     background: rgba(0, 0, 0, 0.08);
     border-radius: .75rem;
     z-index: -1;
     transition: opacity 0.2s ease, transform 0.2s ease;
 }

 .skill-bloomer-yellow:hover::after {
     opacity: 0.2;
     transform: translate(2px, 6px) scale(1.02);
 }

 /* focus-visible for accessibility */
 .skill-bloomer-yellow:focus-visible {
     outline: 2px solid rgba(7, 69, 255, 0.2);
     outline-offset: 2px;
 }




 /* instructor details page css */
 .hide-scrollbar {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 .hide-scrollbar::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, Opera */
     height: 0;
     width: 0;
 }

 /* Filter option states for cascading filters */
 .filter-option-disabled {
     opacity: 0.4;
     pointer-events: none;
     cursor: not-allowed;
 }

 .filter-option-hidden {
     display: none !important;
 }

 .filters-loading {
     opacity: 0.6;
     pointer-events: none;
     position: relative;
 }

 .filters-loading::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(255, 255, 255, 0.7);
     border-radius: 0.5rem;
 }