/*
 * Service Cards — Loader CSS
 * Path: wp-content/plugins/khodayar-shortcode/shortcode-service-cards/css/service-cards-loader.css
 * Purpose: نمایش لودر تا ۲ ثانیه بعد از window.load و محوشدن نرم آن
 */

:root {
  --khsc-bg: #FEFEFE;
  --khsc-text: #161714;
  --khsc-border: #e0e0e0;
  --khsc-radius: 30px;
  /* Loader theme */
  --khsc-loader-bg: rgba(254, 254, 254, 0.92);
  --khsc-loader-ring: #e0e0e0;
  --khsc-loader-accent: #161714;
}

/* مطمئن شو والد موقعیت نسبی دارد تا اوورلی سر جایش بنشیند */
.khsc-wrapper { position: relative; }

/* استک ابتدا محو است؛ با کلاس khsc-ready ظاهر می‌شود */
.khsc-stack { opacity: 0; transition: opacity .35s ease; }
.khsc-ready .khsc-stack { opacity: 1; }

/* اوورلی لودر */
.khsc-loader {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--khsc-loader-bg);
  border-radius: var(--khsc-radius);
  z-index: 999;
  opacity: 1;
  transition: opacity .35s ease;
}
.khsc-ready .khsc-loader { opacity: 0; pointer-events: none; }

/* اسپینر مینیمال */
.khsc-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--khsc-loader-ring);
  border-top-color: var(--khsc-loader-accent);
  animation: khsc-spin 1s linear infinite;
}

@keyframes khsc-spin { to { transform: rotate(360deg); } }

/* ریسپانسیو */
@media (max-width: 768px) {
  .khsc-spinner { width: 36px; height: 36px; border-width: 3px; }
}

/* احترام به کاربرانی که کاهش حرکت را ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  .khsc-spinner { animation: none; }
  .khsc-stack, .khsc-loader { transition: none; }
}