/* ==========================================================================
   RajWiki Universal Skeleton Shimmer System
   ========================================================================== */

/* Shimmer Animation Keyframes */
@keyframes rajwiki-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Base Skeleton Class */
.skeleton {
  background: #e2e5e8;
  background: linear-gradient(
    90deg,
    #e2e5e8 0%,
    #f2f4f6 50%,
    #e2e5e8 100%
  );
  background-size: 200% 100%;
  animation: rajwiki-shimmer 1.5s infinite linear;
  border-radius: 4px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  border: none !important;
  color: transparent !important;
}

/* Text Line Variants */
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
  border-radius: 3px;
}

.skeleton-title {
  height: 22px;
  margin-bottom: 12px;
  width: 60%;
  border-radius: 4px;
}

.skeleton-text-sm {
  height: 10px;
  margin-bottom: 6px;
  width: 40%;
}

/* Shape Variants */
.skeleton-circle {
  border-radius: 50% !important;
}

.skeleton-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.skeleton-thumb {
  width: 100%;
  height: 160px;
  border-radius: 4px;
}

.skeleton-btn {
  height: 38px;
  width: 120px;
  border-radius: 4px;
}

.skeleton-badge {
  height: 18px;
  width: 65px;
  border-radius: 10px;
}

/* Layout Pre-set Containers */
.skeleton-card {
  border: 1px solid #eaecf0;
  padding: 15px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 15px;
}

/* Hide original content while loading */
.is-loading .hide-on-loading {
  display: none !important;
}

/* Show skeleton placeholder only while loading */
.show-on-loading {
  display: none;
}
.is-loading .show-on-loading {
  display: block;
}






/* Shimmer Animation */
@keyframes rajwiki-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: #e2e5e8 linear-gradient(90deg, #e2e5e8 0%, #f2f4f6 50%, #e2e5e8 100%);
  background-size: 200% 100%;
  animation: rajwiki-shimmer 1.5s infinite linear;
  border-radius: 4px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  color: transparent !important;
  border: none !important;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 6px;
  width: 100%;
  border-radius: 3px;
}

.skeleton-circle {
  border-radius: 50% !important;
}

/* Visibility State Rules */
.show-on-loading {
  display: none !important;
}

.is-loading .show-on-loading {
  display: block !important;
}

.is-loading .show-on-loading.flex-skeleton {
  display: flex !important;
}

.is-loading .hide-on-loading {
  display: none !important;
}