/* ============================================================
   سامان — lightweight loading system (buttons, top bar, overlay)
   Feather-light & instant: pure CSS spinners + a thin progress
   bar. The overlay can play the user's Lottie when present.
   ============================================================ */

/* ---- top progress bar (snappy feedback on nav / actions) ---- */
#load-bar {
  position: fixed; top: 0; right: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
  box-shadow: 0 0 10px rgba(18,160,106,.7); z-index: 400;
  border-radius: 0 0 0 3px; opacity: 0;
  transition: width .25s ease, opacity .3s ease;
}
#load-bar.go { opacity: 1; }

/* ---- inline button spinner ---- */
.btn.is-loading, .ico-btn.is-loading, .send-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > *, .ico-btn.is-loading > *, .send-btn.is-loading > * { opacity: 0; }
.btn.is-loading::after, .ico-btn.is-loading::after, .send-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: ldspin .6s linear infinite;
}
.btn-ghost.is-loading::after, .ico-btn.is-loading::after, .btn-white.is-loading::after {
  border-color: rgba(18,160,106,.25); border-top-color: var(--green-500);
}
@keyframes ldspin { to { transform: rotate(360deg); } }

/* ---- full overlay loader ---- */
.load-overlay { position: fixed; inset: 0; z-index: 380; display: none; align-items: center; justify-content: center;
  background: rgba(7,23,42,.5); backdrop-filter: blur(4px); animation: ldfade .2s ease; }
.load-overlay.show { display: flex; }
@keyframes ldfade { from { opacity: 0; } }
.load-card { background: var(--navy-900); border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
  padding: 30px 38px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--sh-lg); min-width: 220px; }
.load-card .lc-anim { width: 96px; height: 96px; display: grid; place-items: center; }
.load-card .lc-text { color: #fff; font-size: 14.5px; font-weight: 600; }
.load-card .lc-sub { color: rgba(255,255,255,.55); font-size: 12px; margin-top: -8px; }

/* ---- CSS orbital spinner (default + Lottie fallback), mirrors the sent animation ---- */
.orbit { width: 76px; height: 76px; position: relative; }
.orbit span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.orbit span:nth-child(1) { border-top-color: var(--green-300); border-right-color: var(--green-500); animation: ldspin 1s cubic-bezier(.5,.1,.5,.9) infinite; }
.orbit span:nth-child(2) { inset: 12px; border-top-color: #fff; border-left-color: rgba(255,255,255,.5); animation: ldspin 1.4s linear infinite reverse; }
.orbit span:nth-child(3) { inset: 24px; border-bottom-color: var(--green-400); animation: ldspin .8s ease-in-out infinite; }
.orbit.sm { width: 40px; height: 40px; }
.orbit.sm span { border-width: 2.5px; }
.orbit.sm span:nth-child(2) { inset: 7px; }
.orbit.sm span:nth-child(3) { inset: 14px; }

@media (prefers-reduced-motion: reduce) {
  .orbit span, .btn.is-loading::after, #load-bar { animation-duration: 0s !important; }
}