/* ==========================================================================
   Naadhe Premium Shimmer Loading Animation System
   High-performance, zero layout shift (CLS=0), cross-page responsive skeletons
   ========================================================================== */

:root {
  /* Default Dark Mode Shimmer Tokens */
  --shimmer-base: rgba(255, 255, 255, 0.06);
  --shimmer-highlight: rgba(255, 255, 255, 0.18);
  --shimmer-border: rgba(255, 255, 255, 0.08);
  --shimmer-radius: 8px;
  --shimmer-duration: 1.6s;
}

/* Light Theme Adaptive Override for Legal Pages & Light Containers */
.legal-container,
.light-theme,
body:not([class*="dark"]) .deletion-card,
body:not([class*="dark"]) .steps-box {
  --shimmer-base: #e2e8f0;
  --shimmer-highlight: #f8fafc;
  --shimmer-border: #cbd5e1;
}

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

.shimmer-skeleton,
.shimmer-block,
.shimmer-text,
.shimmer-heading,
.shimmer-title,
.shimmer-badge,
.shimmer-avatar,
.shimmer-icon,
.shimmer-btn,
.shimmer-img,
.shimmer-card,
.shimmer-input,
.shimmer-cell {
  background: linear-gradient(
    90deg,
    var(--shimmer-base) 0%,
    var(--shimmer-highlight) 50%,
    var(--shimmer-base) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep var(--shimmer-duration) infinite ease-in-out;
  border-radius: var(--shimmer-radius);
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Skeleton Shape Variations & Sizing
   -------------------------------------------------------------------------- */
.shimmer-text {
  height: 1.1em;
  margin: 0.35em 0;
  width: 100%;
  border-radius: 4px;
}

.shimmer-heading {
  height: 1.6em;
  margin: 0.4em 0;
  width: 80%;
  border-radius: 6px;
}

.shimmer-title {
  height: 2.2em;
  margin: 0.5em 0;
  width: 90%;
  border-radius: 8px;
}

.shimmer-badge {
  height: 26px;
  width: 100px;
  border-radius: 50px;
}

.shimmer-avatar,
.shimmer-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.shimmer-icon-square {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.shimmer-btn {
  height: 48px;
  width: 160px;
  border-radius: 10px;
}

.shimmer-img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border-radius: 16px;
}

.shimmer-input {
  height: 46px;
  width: 100%;
  border-radius: 10px;
}

.shimmer-card {
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--shimmer-border);
  border-radius: 16px;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Width Helper Utilities */
.w-100 { width: 100% !important; }
.w-90  { width: 90% !important; }
.w-80  { width: 80% !important; }
.w-75  { width: 75% !important; }
.w-60  { width: 60% !important; }
.w-50  { width: 50% !important; }
.w-40  { width: 40% !important; }
.w-30  { width: 30% !important; }
.w-25  { width: 25% !important; }
.w-20  { width: 20% !important; }

/* --------------------------------------------------------------------------
   Shimmer Container & Content Transitions (Zero Layout Shift - CLS=0)
   -------------------------------------------------------------------------- */
.shimmer-wrapper {
  position: relative;
  width: 100%;
  display: block;
}

/* Initial loading state */
.shimmer-wrapper.shimmer-loading .shimmer-real-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.shimmer-wrapper.shimmer-loading .shimmer-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Ready/Loaded state */
.shimmer-wrapper.shimmer-ready .shimmer-real-content {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.shimmer-wrapper.shimmer-ready .shimmer-placeholder {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

/* Direct Element Shimmer Overlay (For standalone images, phone mockups, buttons) */
.shimmer-overlay-container {
  position: relative;
  overflow: hidden;
}

.shimmer-overlay-container.is-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    var(--shimmer-base) 0%,
    var(--shimmer-highlight) 50%,
    var(--shimmer-base) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep var(--shimmer-duration) infinite ease-in-out;
  z-index: 10;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.shimmer-overlay-container.is-loaded::before {
  opacity: 0;
  pointer-events: none;
}