/* Items Section (Packages & Courses) */
.items-section {
    padding: var(--space-70) var(--nav-pad-x);
    background-color: var(--color-white);
}

.section-heading {
    padding: 0 var(--space-20);
}

.section-title {
    color: var(--color-blue);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    margin: 0;
}

.view-all-link {
    color: var(--color-blue);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-16);
    text-decoration: none;
}

.view-all-link:hover {
    color: var(--color-blue-dark);
}

/* Item Card */
.item-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.item-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-line-soft);
    transition: transform var(--transition), box-shadow var(--transition);
}

.item-card-link:hover .item-card {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.item-card.border-success {
    border: 1px solid var(--color-green-border);
}

/* Image Area */
.item-image-area {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    background-color: var(--color-surface-tint);
    position: relative;
}

.item-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-success-light {
    background-color: var(--color-green-surface) !important;
}

.bg-success-light i {
    color: var(--color-green);
}

/* Content */
.item-content {
    padding: var(--space-20) var(--space-16);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-badges {
    margin-bottom: var(--space-12);
}

.badge-category {
    background-color: var(--color-surface-tint);
    color: var(--color-blue);
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
}

.badge-type {
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.badge-recorded {
    background-color: var(--color-surface-tint);
    color: var(--color-blue);
}

.badge-live {
    background-color: #ffe4e6;
    color: #e11d48;
}

.item-stars {
    color: var(--color-blue);
    margin-bottom: var(--space-16);
    font-size: var(--fs-14);
}

.item-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin-bottom: var(--space-12);
}

.item-meta {
    color: var(--color-text-soft);
    font-size: var(--fs-12);
    margin-bottom: var(--space-16);
}

.subjects-label {
    font-size: var(--fs-12);
    color: var(--color-text-soft);
    font-weight: var(--fw-bold);
}

.subject-tag {
    background-color: var(--color-surface-soft);
    color: var(--color-text-soft);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    border: 1px solid var(--color-line-soft);
}

/* Action */
.item-action {
    margin-top: auto;
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-line-soft);
}

.item-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
}

.price-num {
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    color: var(--color-blue);
}

.price-currency {
    font-size: var(--fs-14);
    color: var(--color-blue);
    font-weight: var(--fw-bold);
}

/* Buttons */
.btn-action-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
    font-size: var(--fs-18);
    color: var(--color-white);
}

.btn-cart-bg {
    background-color: var(--color-navy);
}
.btn-cart-bg:hover {
    background-color: var(--color-blue-dark);
}

.btn-buy-bg {
    background-color: var(--color-blue);
}
.btn-buy-bg:hover {
    background-color: var(--color-blue-dark);
}

.btn-subscribed {
    background-color: var(--color-green-surface);
    color: var(--color-green);
    padding: var(--space-10) var(--space-16);
    border-radius: var(--radius-pill);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Swiper Dots */
.packagesSwiper, 
.coursesSwiper {
    padding-bottom: var(--space-40);
    overflow: hidden;
}

.custom-swiper-pagination {
    position: static !important;
    margin-top: var(--space-24);
    text-align: center;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--color-blue);
    opacity: 0.3;
    margin: 0 var(--space-4) !important;
    transition: opacity var(--transition);
}

.swiper-pagination-bullet-active {
    opacity: 1;
}