/* Skeleton loading styles for content */
.knowledge-base-skeleton {
    width: 100%;
}

.skeleton-kb-item {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
    background: #f8f8f8;
}

.skeleton-kb-title {
    height: 24px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-date {
    height: 16px;
    width: 100px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Skeleton loading styles for pagination */
.pagination-skeleton {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    height: 40px;
}

.skeleton-prev,
.skeleton-next,
.skeleton-page {
    height: 36px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-prev,
.skeleton-next {
    width: 70px;
}

.skeleton-page {
    width: 36px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Transition effects */
.knowledge-base-item-row,
#knowledge-base-pagination {
    transition: opacity 0.3s ease;
}

/* Webinar Skeleton Styles */
.skeleton-img,
.skeleton-title,
.skeleton-button {
  background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%);
  background-size: 800px 104px;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-img {
  width: 100%;
  height: 160px;
}

.skeleton-title {
  height: 18px;
  margin: 10px 0;
  border-radius: 4px;
}

.skeleton-button {
  height: 38px;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 10px;
}

/* Pagination Skeleton */
.pagination-skeleton {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 10px;
}

.skeleton-prev,
.skeleton-next,
.skeleton-page {
    height: 36px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-prev,
.skeleton-next {
    width: 70px;
}

.skeleton-page {
    width: 36px;
}

/* Ensure actual images match skeleton dimensions */
.webinar-item-img-card img {
    width: 100%;
    height: 200px; /* Match with skeleton */
    object-fit: cover; /* Maintain aspect ratio while filling container */
    display: block;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Transition effects */
.webinar-item-row {
    transition: opacity 0.3s ease;
}

/* Error and no-results styling */
.webinar-item-row .error,
.webinar-item-row .no-result-found {
    text-align: center;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 20px 0;
}

.webinar-item-row .error {
    color: #e34d59;
}