/* ==========================================================================
   CampConnect — Full-screen loading overlay (Issue #95)
   Transparent-black click-blocker shown during non-AJAX form submits /
   navigations (e.g. reservation booking + deposit capture).
   Opt-in via the data-loading-overlay="message" attribute. See
   Documentation/Web.App/Loading-Overlay.md and wwwroot/js/loading-overlay.js.
   ========================================================================== */

.cc-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1056;                          /* above Bootstrap modals (1050-1055), below SweetAlert2 (1060) */
    background-color: rgba(0, 0, 0, 0.55);  /* transparent black — page shows through, dimmed */
    display: grid;
    place-items: center;
    /* The backdrop itself captures all pointer events, so nothing underneath
       is clickable until the overlay is hidden. Never set pointer-events:none. */
}

/* Hidden state — [hidden] attribute is the single source of truth, toggled by JS. */
.cc-loading-overlay[hidden] {
    display: none !important;
}

.cc-loading-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    text-align: center;
    /* Intentionally no card background — the spinner is the focal point
       and the dark overlay is the visual frame. */
}

/* Lightweight CSS ring spinner in brand blue. Chosen over an animated SVG so
   that prefers-reduced-motion is honored natively (see media query below). */
.cc-loading-overlay__spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 0.35rem solid rgba(255, 255, 255, 0.25);
    border-top-color: #546dfe;              /* brand blue */
    border-radius: 50%;
    animation: cc-loading-overlay-spin 1s linear infinite;
}

.cc-loading-overlay__text {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    max-width: 22rem;
}

.cc-loading-overlay__hint {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

/* Reduced motion: stop the rotation (a frozen partial ring looks broken), and
   instead show a solid brand-blue ring with a gentle opacity pulse. */
@media (prefers-reduced-motion: reduce) {
    .cc-loading-overlay__spinner {
        border-color: #546dfe;
        animation: cc-loading-overlay-pulse 1.6s ease-in-out infinite;
    }
}

@keyframes cc-loading-overlay-spin {
    to { transform: rotate(360deg); }
}

@keyframes cc-loading-overlay-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Small screens: tighten padding so the panel never crowds the viewport. */
@media (max-width: 575.98px) {
    .cc-loading-overlay__inner {
        padding: 1rem 1.25rem;
    }

    .cc-loading-overlay__text {
        font-size: 0.9375rem;
    }
}