.bee-course-tabs {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 4rem;
} .bee-course-tabs__button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--bee-radius-pill);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
color: var(--bee-dark);
font-family: var(--bee-font-sans);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 10px 30px rgba(2, 16, 31, 0.04);
transition: transform 0.35s var(--bee-ease), background 0.35s var(--bee-ease), border-color 0.35s var(--bee-ease), color 0.35s var(--bee-ease), box-shadow 0.35s var(--bee-ease);
}
.bee-course-tabs__button:hover {
color: var(--bee-dark);
}
.bee-course-tabs__count {
padding: 4px 7px;
display: flex;
background-color: var(--bee-dark);
color: #fff;
border-radius: 10px;
font-size: 14px;
margin-left: 0.5rem;
} .bee-course-tabs__button:hover {
transform: translateY(-2px);
border-color: rgba(255, 219, 27, 0.35);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 14px 40px rgba(2, 16, 31, 0.08);
} .bee-course-tabs__button.is-active {
background: var(--bee-gradient-gold);
border-color: rgba(255, 219, 27, 0.45);
color: var(--bee-dark);
box-shadow: 0 14px 40px rgba(255, 219, 27, 0.22);
}
.bee-course-card.is-hidden {
display: none;
}