/*
  Loading
  Path: css/loading.css

  A single spinner visual language used everywhere in the portal: full
  page loads, inline button states, and small standalone moments (e.g.
  upload progress, save confirmations). Thin rotating ring in the
  covenant orange accent, per the locked design direction, replacing
  every plain "Loading..." or "Sending..." text-only state.

  Load this file alongside components.css on every page:
  <link rel="stylesheet" href="css/loading.css">
  (adjust the relative path, e.g. ../css/loading.css from admin/ or camper/)
*/

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

/* ---------- Base ring, sized via a CSS variable so every context
   can scale it without a new class ---------- */

.spinner-ring {
  --spinner-size: 20px;
  --spinner-thickness: 2.5px;
  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border-radius: 50%;
  border: var(--spinner-thickness) solid rgba(217, 84, 31, 0.18);
  border-top-color: var(--color-accent);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

html[data-theme="dark"] .spinner-ring {
  border-color: rgba(232, 99, 47, 0.22);
  border-top-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .spinner-ring {
    animation-duration: 1.4s;
  }
}

/* Size variants */

.spinner-ring.spinner-sm {
  --spinner-size: 16px;
  --spinner-thickness: 2px;
}

.spinner-ring.spinner-lg {
  --spinner-size: 36px;
  --spinner-thickness: 3px;
}

/* ---------- Inline label pairing, spinner beside dimmed text ---------- */

.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Button loading state ---------- */
/* Applied as a class toggle on any .btn. The button keeps its size and
   position, text dims, a spinner appears before the (dimmed) label
   rather than replacing it, per the chosen pattern. */

.btn {
  position: relative;
}

.btn .btn-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s ease;
}

.btn.is-loading {
  pointer-events: none;
  cursor: default;
}

.btn.is-loading .btn-label {
  opacity: 0.65;
}

.btn.is-loading .spinner-ring {
  --spinner-size: 15px;
  --spinner-thickness: 2px;
}

.btn-primary .spinner-ring {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
}

.btn-ghost .spinner-ring,
.btn-dark .spinner-ring {
  border-color: rgba(217, 84, 31, 0.18);
  border-top-color: var(--color-accent);
}

/* ---------- Full page loader ---------- */
/* A centered ring with an optional short label, used for initial page
   loads and auth checks. Fades in briefly rather than popping in, to
   avoid a flash on fast connections. */

.page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-block: 120px;
  animation: page-loader-in 0.25s ease both;
}

@keyframes page-loader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-loader .spinner-ring {
  --spinner-size: 32px;
  --spinner-thickness: 3px;
}

.page-loader-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- Full screen overlay variant ---------- */
/* For moments that block the whole viewport briefly, e.g. completing a
   magic link sign-in. Sits above everything, soft blur behind it. */

.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: page-loader-in 0.2s ease both;
}

/* ---------- Dropzone / small surface loading state ---------- */
/* Used inside upload dropzones and similar compact areas where a full
   page loader would be too heavy. */

.surface-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block: 8px;
}