/* ==========================================================
   COURSE FILTER TABS
========================================================== */

.bee-course-tabs {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 4rem;
}

/* ==========================================================
   TAB BUTTON
========================================================== */

.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;
}


/* ==========================================================
   TAB HOVER
========================================================== */

.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);
}

/* ==========================================================
   ACTIVE TAB
========================================================== */

.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;
}