/**
 * Popular Courses Widget Styles
 * Version: 1.0.0
 */

/* =================================
   Widget Container
================================= */
.popular-courses-widget {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  padding: 48px 0 32px;
  overflow: hidden;
  --popular-card-radius: 18px;
}

/* Section Title */
.popular-courses-widget .popular-courses-title,
.popular-courses-widget h2.popular-courses-title,
.elementor-widget-container .popular-courses-widget .popular-courses-title,
[class*="elementor-element"] .popular-courses-widget .popular-courses-title,
[class*="elementor-element"][class*="elementor-element-"] .popular-courses-title {
  font-family: var(--iabt-font-family);
  font-size: var(--iabt-h2);
  font-weight: var(--iabt-font-bold);
  color: var(--iabt-text-heading);
  line-height: var(--iabt-line-height-heading);
  margin: 0 0 40px;
}

/* =================================
   Popular Course Card (Layout Only)
================================= */
/* Card shell/content/meta/actions are handled by the shared course card component (iabt-course-card.css). */

.popular-courses-slider .swiper-slide > .iabt-course-card {
  width: 100%;
  flex: 1;
}

/* Course Badge (Top Title) */
.popular-courses-widget .iabt-course-card .course-badge {
  display: inline-block;
  background: var(--iabt-blue-soft);
  color: var(--iabt-primary);
  font-size: var(--iabt-text-xs);
  font-weight: var(--iabt-font-semibold);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: var(--iabt-letter-spacing-wide);
  border: 1px solid hsl(var(--iabt-primary-hsl), 0.2);
}

/* =================================
   Button Style Variations
================================= */
.popular-courses-widget .iabt-course-card .iabt-btn--view,
.popular-courses-widget .iabt-course-card .iabt-btn--enroll {
  width: 100%;
}

/* =================================
   Slider Controls
================================= */
.popular-courses-widget .popular-courses-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  gap: 20px;
  flex-wrap: wrap;
}

/* Navigation Arrows */
.popular-courses-widget .swiper-navigation {
  display: flex;
  gap: 12px;
}

/* Bottom CTA */
.popular-courses-widget .bottom-cta {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.popular-courses-widget .iabt-btn--bottom {
  padding: 14px 30px;
}

.popular-courses-widget .iabt-btn--bottom i,
.popular-courses-widget .iabt-btn--bottom svg {
  font-size: var(--iabt-text-base);
  width: 16px;
  height: 16px;
  color: inherit; /* Inherit text color */
}

.popular-courses-widget .iabt-btn--bottom svg path {
  fill: currentColor; /* Make SVG follow text color */
}

/* =================================
   Responsive Design
================================= */

/* Tablet */
@media (max-width: 991px) {
  .popular-courses-widget .popular-courses-title {
    font-size: 30px;
    margin-bottom: 28px;
  }

  .popular-courses-widget .popular-courses-controls {
    margin-top: 28px;
  }

  .popular-courses-widget .bottom-cta {
    flex: 1 0 100%;
    justify-content: center;
    order: 3;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .popular-courses-widget .popular-courses-title {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .popular-courses-widget .popular-courses-controls {
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    gap: 16px;
  }

  .popular-courses-widget .swiper-navigation {
    order: 2;
  }

  .popular-courses-widget .swiper-pagination {
    order: 1;
  }

  .popular-courses-widget .bottom-cta {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .popular-courses-widget .iabt-btn--bottom {
    font-size: var(--iabt-text-sm);
    padding: 12px 24px;
  }
}

/* =================================
   Animation Classes
================================= */
.popular-courses-widget .iabt-course-card.aos-animate {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Note: Card shell styles are handled by the shared component (iabt-course-card.css). */