/**
 * 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;
}

/* Swiper container - control overflow properly */
.popular-courses-widget .swiper {
    overflow: hidden; /* Hide horizontal overflow */
    padding: 20px 0 !important; /* Vertical padding only for shadows */
    margin: -20px 0; /* Compensate vertical padding */
}

/* 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
================================= */
.popular-course-card {
    background: var(--iabt-bg-main);
    border-radius: var(--popular-card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px var(--iabt-shadow);
    transition: all 0.4s ease;
    border: 2px solid var(--iabt-blue-soft);
    position: relative;
}

.popular-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--iabt-gradient);
    transform: scaleX(1);
    transition: transform 0.4s ease;
}

.popular-course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px var(--iabt-shadow);
    border-color: var(--iabt-border);
}

.popular-course-card:hover::before {
    transform: scaleX(1.02);
}

/* Swiper slide - ensure shadows aren't clipped */
.popular-courses-slider .swiper-slide {
    height: auto;
    padding: 12px 10px 22px;
    box-sizing: border-box;
}

.popular-courses-slider .swiper-wrapper {
    padding: 10px 0 18px;
    box-sizing: border-box;
}

/* Course Image */
.course-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--iabt-bg-soft);
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    transform: scale(1);
}

.popular-course-card:hover .course-image img {
    transform: scale(1.06);
}


/* Course Content */
.course-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Course Badge (Top Title) */
.popular-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);
}

/* Course Title */
.popular-course-card .course-title {
    font-size: var(--iabt-h4);
    font-weight: var(--iabt-font-semibold);
    margin: 0;
    line-height: var(--iabt-line-height-heading);
    letter-spacing: var(--iabt-letter-spacing-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-course-card .course-title a {
    color: var(--iabt-text-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.popular-course-card .course-title a:hover {
    color: var(--iabt-text-accent);
}

.popular-course-card .course-title a:focus-visible {
    outline: 2px solid var(--popular-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Course Excerpt */
.course-excerpt {
    font-size: var(--iabt-text-sm);
    line-height: var(--iabt-line-height-body);
    color: var(--iabt-text-body);
    margin-bottom: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =================================
   Course Meta (Custom Fields)
================================= */
.popular-course-meta-top-row {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4px;
}

.popular-course-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-item {
    font-size: var(--iabt-text-sm);
    color: var(--iabt-text-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: var(--iabt-line-height-body);
}

.meta-item strong {
    display: block;
    font-weight: var(--iabt-font-semibold);
    color: var(--iabt-text-muted);
    margin-bottom: 0;
    font-size: var(--iabt-text-xs);
    letter-spacing: var(--iabt-letter-spacing-wide);
    text-transform: uppercase;
}

.meta-item.location,
.meta-item.duration,
.meta-item.age-range,
.meta-item.intake {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: var(--iabt-font-medium);
    flex-wrap: wrap;
}

/* Graduate Takeaway - Full Width for Longer Text */
.meta-item.graduate-takeaway {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: var(--iabt-font-medium);
}

.meta-item.graduate-takeaway .meta-item-value {
    flex: 1;
    line-height: 1.5;
}

/* =================================
   Rating & Alumni Badges
================================= */
.course-rating-display,
.meta-item.alumni-recommendation {
    display: inline-flex;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 0;
    font-size: var(--iabt-text-xs);
    font-weight: var(--iabt-font-medium);
}

.meta-item.alumni-recommendation {
    color: var(--iabt-text-heading);
    border: 1px solid hsl(var(--iabt-success-hsl), 0.3);
    background: var(--iabt-bg-soft);
}
.course-rating-display {
    position: absolute;
    top: 16px;
    right: 16px;
    background: hsl(var(--iabt-text-primary-hsl), 0.78);
    color: var(--iabt-gold);
    letter-spacing: var(--iabt-letter-spacing-wide);
    border: 1px solid var(--iabt-gold);
    box-shadow: 0 12px 24px hsl(var(--iabt-text-primary-hsl), 0.2);
    backdrop-filter: blur(6px);
}

.meta-item.alumni-recommendation .meta-item-value {
    color: inherit;
    font-size: inherit;
}



/* =================================
   Custom Meta Field Icons
================================= */
.popular-course-card .meta-item.location i,
.popular-course-card .meta-item.age-range i,
.popular-course-card .meta-item.alumni-recommendation i,
.popular-course-card .meta-item.duration i,
.popular-course-card .meta-item.intake i,
.popular-course-card .meta-item.graduate-takeaway i {
    color: var(--iabt-primary);
    font-size: var(--iabt-font-medium);
    width: var(--iabt-font-medium);

}

.popular-course-card .meta-item.alumni-recommendation i {
    color: var(--iabt-success);
}


/* =================================
   Course Buttons
================================= */
.course-buttons {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}

.course-buttons a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: var(--iabt-ui-font-size);
    font-weight: var(--iabt-cta-font-weight);
    letter-spacing: var(--iabt-cta-letter-spacing);
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    text-align: center;
    white-space: nowrap;
    line-height: var(--iabt-line-height-tight);
}

.course-buttons a:focus-visible {
    outline: 2px solid var(--popular-focus-ring);
    outline-offset: 2px;
}

.course-buttons a i,
.course-buttons a svg {
    font-size: var(--iabt-text-sm);
    width: 14px;
    height: 14px;
    color: inherit; /* Inherit text color */
}

.course-buttons a svg path {
    fill: currentColor; /* Make SVG follow text color */
}

/* =================================
   Button Style Variations
================================= */

/* Hover Effect */
.popular-course-card .view-btn:hover,
.popular-course-card .enroll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px hsl(var(--iabt-primary-hsl), 0.2);
}
/* Outlined Style */
.popular-course-card .view-btn.btn-outlined,
.popular-course-card .enroll-btn.btn-outlined {
    background: transparent;
    color: var(--iabt-primary);
    border: 1px solid hsl(var(--iabt-primary-hsl), 0.3);
}

.popular-course-card .view-btn.btn-outlined:hover,
.popular-course-card .enroll-btn.btn-outlined:hover {
    background: hsl(var(--iabt-primary-hsl), 0.08);
    border-color: hsl(var(--iabt-primary-hsl), 0.5);
}

/* Filled Style */
.popular-course-card .view-btn.btn-filled,
.popular-course-card .enroll-btn.btn-filled {
    background: var(--iabt-primary);
    color: var(--iabt-bg-main);
    border: 1px solid var(--iabt-primary);
    font-weight: var(--iabt-font-semibold);
}



/* Text Only Style */
.view-btn.btn-text,
.enroll-btn.btn-text {
    background: transparent;
    color: var(--iabt-primary);
    border: 1px solid transparent;
    padding: 10px 12px;
}

.view-btn.btn-text:hover,
.enroll-btn.btn-text:hover {
    color: var(--iabt-primary);
    background: hsl(var(--iabt-primary-hsl), 0.08);
    transform: translateY(-2px);
}

/* Gradient Style */
.view-btn.btn-gradient,
.enroll-btn.btn-gradient {
    background: var(--iabt-gradient);
    color: var(--iabt-bg-main);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.view-btn.btn-gradient::before,
.enroll-btn.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--iabt-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.view-btn.btn-gradient:hover::before,
.enroll-btn.btn-gradient:hover::before {
    opacity: 1;
}

.view-btn.btn-gradient:hover,
.enroll-btn.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px hsl(var(--iabt-primary-hsl), 0.25);
}

/* Default fallback styles (backwards compatibility) */
.view-btn:not([class*="btn-"]) {
    background: transparent;
    color: var(--iabt-primary);
    border: 1px solid hsl(var(--iabt-primary-hsl), 0.4);
}

.view-btn:not([class*="btn-"]):hover {
    background: hsl(var(--iabt-primary-hsl), 0.08);
    color: var(--iabt-primary);
    transform: translateY(-2px);
}

.enroll-btn:not([class*="btn-"]) {
    background: var(--iabt-primary);
    color: var(--iabt-bg-main);
    border: 1px solid var(--iabt-primary);
}

.enroll-btn:not([class*="btn-"]):hover {
    background: var(--iabt-accent);
    border-color: var(--iabt-accent);
    transform: translateY(-2px);
}

/* =================================
   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;
}

.popular-courses-widget .swiper-button-prev,
.popular-courses-widget .swiper-button-next,
[id^="popular-courses-prev-"],
[id^="popular-courses-next-"] {
    position: static;
    width: 46px;
    height: 46px;
    margin: 0;
    background: var(--iabt-bg-main);
    border: 1px solid var(--iabt-border);
    border-radius: 12px;
    color: var(--iabt-primary);
    box-shadow: 0 10px 22px hsl(var(--iabt-text-primary-hsl), 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.popular-courses-widget .swiper-button-prev::after,
.popular-courses-widget .swiper-button-next::after,
[id^="popular-courses-prev-"]::after,
[id^="popular-courses-next-"]::after {
    font-size: var(--iabt-text-base);
    font-weight: var(--iabt-font-bold);
}

.popular-courses-widget .swiper-button-prev:hover,
.popular-courses-widget .swiper-button-next:hover,
[id^="popular-courses-prev-"]:hover,
[id^="popular-courses-next-"]:hover {
    background: var(--iabt-bg-main);
    border-color: hsl(var(--iabt-primary-hsl), 0.3);
    color: var(--iabt-primary);
    box-shadow: 0 14px 30px hsl(var(--iabt-text-primary-hsl), 0.12);
    transform: translateY(-2px);
}

.popular-courses-widget .swiper-button-prev.swiper-button-disabled,
.popular-courses-widget .swiper-button-next.swiper-button-disabled,
[id^="popular-courses-prev-"].swiper-button-disabled,
[id^="popular-courses-next-"].swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.popular-courses-widget .swiper-button-prev:focus-visible,
.popular-courses-widget .swiper-button-next:focus-visible,
[id^="popular-courses-prev-"]:focus-visible,
[id^="popular-courses-next-"]:focus-visible {
    outline: 2px solid var(--popular-focus-ring);
    outline-offset: 2px;
}

/* Pagination */
.popular-courses-widget .swiper-pagination,
[id^="popular-courses-pagination-"] {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.popular-courses-widget .swiper-pagination-bullet,
[id^="popular-courses-pagination-"] .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: hsl(var(--iabt-primary-hsl), 0.2);
    opacity: 1;
    transition: all 0.3s ease;
}

.popular-courses-widget .swiper-pagination-bullet-active,
[id^="popular-courses-pagination-"] .swiper-pagination-bullet-active {
    background: var(--iabt-primary);
    width: 26px;
    border-radius: 999px;
    box-shadow: 0 6px 14px hsl(var(--iabt-primary-hsl), 0.2);
}

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

.popular-courses-widget .bottom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--iabt-primary);
    color: var(--iabt-bg-main);
    font-size: var(--iabt-cta-font-size);
    font-weight: var(--iabt-cta-font-weight);
    letter-spacing: var(--iabt-cta-letter-spacing);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    line-height: var(--iabt-line-height-tight);
    box-shadow: 0 12px 24px hsl(var(--iabt-primary-hsl), 0.2);
}

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

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

.popular-courses-widget .bottom-btn:hover {
    background: var(--iabt-accent);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px hsl(var(--iabt-primary-hsl), 0.28);
    border-color: var(--iabt-accent);
}

.popular-courses-widget .bottom-btn:focus-visible {
    outline: 2px solid var(--popular-focus-ring);
    outline-offset: 3px;
}

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

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

    .popular-course-card .course-title {
        font-size: var(--iabt-h5);
    }

    .popular-course-card .course-content {
        padding: 20px;
    }

    .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-course-card .course-title {
        font-size: var(--iabt-h6);
    }

    .popular-course-card .course-content {
        padding: 16px;
        gap: 8px;
    }

    .popular-course-card .course-excerpt {
        font-size: var(--iabt-text-xs);
    }

    .popular-course-card .popular-course-meta {
        gap: 8px;
        margin: 6px 0 0;
        padding: 12px;
    }

    .popular-course-card .meta-item {
        font-size: var(--iabt-text-xs);
    }

    /* Rating Display Responsive */
    .course-rating-display {
        padding: 6px 10px;
        gap: 6px;
    }

   .course-rating-display, .course-rating-display i {
       font-size: var(--iabt-text-xs);
    }

    .popular-course-card .course-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .popular-course-card .course-buttons a {
        padding: 10px 14px;
        font-size: var(--iabt-text-sm);
        gap: 6px;
    }

    .popular-course-card .course-buttons a i,
    .popular-course-card .course-buttons a svg {
        font-size: var(--iabt-text-xs);
        width: 12px;
        height: 12px;
    }

    .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 .bottom-btn {
        font-size: var(--iabt-text-sm);
        padding: 12px 24px;
    }
}

/* =================================
   Animation Classes
================================= */
.popular-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: Top border hover effect is already handled by ::before on .popular-course-card */

/* Loading State */
.popular-courses-widget.loading {
    opacity: 0.5;
    pointer-events: none;
}

.popular-courses-widget.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--iabt-primary);
    border-top-color: var(--iabt-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}