/* ============================================================
   WFS Skeleton Placeholders
   Shared by admin panel (light) and customer-facing site (dark).
   Override --sk-bg / --sk-shine on a parent to re-theme.
   ============================================================ */

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

:root {
  --sk-bg: #e9ecef;
  --sk-shine: #f8f9fa;
}

/* ── Base ─────────────────────────────────────────────────── */
.wfs-sk {
  background: var(--sk-bg);
  color: transparent !important;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.wfs-sk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--sk-shine) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: wfs-sk-shimmer 1.5s ease-in-out infinite;
}

/* ── Line shapes ──────────────────────────────────────────── */
.wfs-sk-line      { height: 13px; border-radius: 4px; }
.wfs-sk-line-sm   { height: 10px; border-radius: 3px; }
.wfs-sk-line-lg   { height: 20px; border-radius: 6px; }
.wfs-sk-line-h    { height: 28px; border-radius: 6px; }

/* ── Circle ───────────────────────────────────────────────── */
.wfs-sk-circle { border-radius: 50%; }

/* ── Image / rect placeholder ─────────────────────────────── */
.wfs-sk-img { border-radius: 8px; }

/* ── Card wrapper ─────────────────────────────────────────── */
.wfs-sk-card {
  padding: 20px;
  border-radius: 12px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-bg);
}

/* ── Stack utility ────────────────────────────────────────── */
.wfs-sk-stack { display: flex; flex-direction: column; gap: 10px; }
.wfs-sk-gap-sm { gap: 6px; }
.wfs-sk-gap-lg { gap: 14px; }

/* ── Width helpers ────────────────────────────────────────── */
.wfs-w-20 { width: 20%; }
.wfs-w-25 { width: 25%; }
.wfs-w-33 { width: 33.333%; }
.wfs-w-40 { width: 40%; }
.wfs-w-50 { width: 50%; }
.wfs-w-60 { width: 60%; }
.wfs-w-66 { width: 66.666%; }
.wfs-w-75 { width: 75%; }
.wfs-w-80 { width: 80%; }
.wfs-w-100 { width: 100%; }

/* ── Grid helpers ─────────────────────────────────────────── */
.wfs-sk-grid {
  display: grid;
  gap: 10px;
}
.wfs-sk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wfs-sk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wfs-sk-grid-4 { grid-template-columns: repeat(4, 1fr); }