/* =============================================================================
   LOADING SPINNER
   Pure-CSS animated ring. No JavaScript required.
   Technique: transparent border + single colored border-top + rotate keyframe.
   ============================================================================= */

/* ── Base spinner ring ───────────────────────────────────── */
.spinner {
    display: inline-block;
    border-style: solid;
    border-radius: 50%;
    animation: hm-spin 0.8s linear infinite; /* Smooth linear CSS keyframes */
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Size variants ───────────────────────────────────────── */

/* Small — fits inside a standard button alongside text */
.spinner--sm { 
    width: 16px; 
    height: 16px; 
    border-width: 2px; 
}

/* Medium — inline form feedback, card-level loaders */
.spinner--md { 
    width: 24px; 
    height: 24px; 
    border-width: 3px; 
}

/* Large — full-section or page-level loading gate */
.spinner--lg { 
    width: 40px; 
    height: 40px; 
    border-width: 4px; 
}

/* ── Color variants ───────────────────────────────────────── */

/* Deep Trust Blue — default, for light / white surfaces */
.spinner--blue {
    border-color: rgba(11, 60, 93, 0.15); /* Faint track */
    border-top-color: var(--color-trust-blue); /* Active arc */
}

/* Calm Teal — accent loaders */
.spinner--teal {
    border-color: rgba(31, 138, 112, 0.2);
    border-top-color: var(--color-calm-teal);
}

/* White — inside dark buttons or dark hero overlays */
.spinner--white {
    border-color: rgba(255, 255, 255, 0.20);
    border-top-color: var(--color-white);
}

/* ── Rotation keyframe ───────────────────────────────────── */
@keyframes hm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Reduced-motion override ─────────────────────────────── */
/* Respects OS-level "prefer reduced motion" accessibility setting.
   Replaces continuous rotation with a slow fade pulse. */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        /* Use !important to override the global CSS kill-switch (* { animation-duration: 0.01ms }) */
        animation: hm-pulse 2s ease-in-out infinite !important;
    }
    @keyframes hm-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
}

/* ── Composed button-spinner utility ─────────────────────── */
/* Hides original label text and makes room for spinner to sit 
   inline with "Processing..." copy inside a button. */
.btn__label--loading { 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
}