/* ============================================================
   skeleton.css — Shimmer loading placeholders
   مشترك بين جميع الصفحات (عدا الرئيسية)
   ============================================================ */

@keyframes skShimmer {
  0%   { background-position: -700px 0; }
  100% { background-position: 700px 0; }
}

.sk-block {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 700px 100%;
  animation: skShimmer 1.6s infinite linear;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* product.html */
.pd-loading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 24px 40px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.pd-skeleton { width: 100%; }
.sk-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; margin-bottom: 20px; }
.sk-line { border-radius: 6px; }
.sk-vendor { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.sk-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .sk-meta { grid-template-columns: repeat(2, 1fr); } }

/* program.html */
.prog-skeleton-wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 24px 20px 48px; }
.prog-skeleton { width: 100%; }
.sk-vendor-row { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 18px; }

/* vendor-profile.html */
.vp-skeleton-wrap { width: 100%; }
.vp-skeleton { width: 100%; }
.vp-sk-profile { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 16px; background: rgba(255,255,255,0.03); margin-bottom: 16px; }
.vp-sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 20px; }
.vp-sk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 20px 40px; }
@media (min-width: 640px) { .vp-sk-cards { grid-template-columns: repeat(3, 1fr); } }

/* publisher.html / vendor-apply.html inline loader */
.section-sk-loader { display: flex; flex-direction: column; gap: 14px; padding: 40px 24px; max-width: 680px; margin: 0 auto; }
.section-sk-loader .sk-block { height: 18px; border-radius: 8px; }
.section-sk-loader .sk-block:first-child { height: 40px; border-radius: 12px; margin-bottom: 4px; }