/* ---------- Loading Service (js/loading-service.js) ---------- */
#loading-global-overlay{
  position:fixed; inset:0; z-index:2500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,245,239,0.6); backdrop-filter:blur(1px);
  /* A quick fade, not the same slide+scale "pop" the content overlays use (see
     .fullscreen-overlay in main.css) — this one can flash on/off for very brief network
     calls, so a longer/showier animation would feel laggy rather than smooth. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 120ms ease, visibility 0s linear 120ms;
}
#loading-global-overlay.loading-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 120ms ease;
}

.loading-spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--coral);
  animation:loading-spin .7s linear infinite;
}
@keyframes loading-spin{ to{ transform:rotate(360deg); } }

/* Any element opted in via data-loading-section="<key>" gets a dimmed + spinner treatment
   while its section is active, without needing bespoke CSS per feature. */
[data-loading-section]{ position:relative; }
[data-loading-section].loading-active{ pointer-events:none; }
[data-loading-section] > *{ transition:opacity 150ms ease; }
[data-loading-section].loading-active > *{ opacity:0.45; }
[data-loading-section].loading-active::after{
  content:""; position:absolute; top:50%; left:50%; width:26px; height:26px;
  margin:-13px 0 0 -13px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--coral);
  animation:loading-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .loading-spinner, [data-loading-section].loading-active::after{ animation:none; }
}