/* AUTH LOADING OVERLAY (aligned with existing blue palette #1b6ec2 / #1861ac) */

.auth-loading-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(24, 30, 38, 0.72); /* slightly lighter, still translucent */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

/* Panel uses a WHITE background with brand-accent border (changed) */
.auth-loading-panel {
    background: #ffffff;                /* CHANGED from #18222c */
    border: 2px solid #1b6ec2;          /* Slightly thicker on white */
    border-radius: 12px;
    padding: 32px 40px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25); /* Softer shadow for light surface */
    min-width: 280px;
    max-width: 90vw;
    color: #18222c;                     /* CHANGED text now dark */
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Spinner rings use primary + secondary brand blues */
.auth-spinner {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.auth-spinner div {
    box-sizing: border-box;
    position: absolute;
    width: 54px;
    height: 54px;
    margin: 6px;
    border: 5px solid var(--bs-primary, #1b6ec2);
    border-radius: 50%;
    animation: auth-ring 1.15s cubic-bezier(.5,.15,.5,.85) infinite;
    border-color: var(--bs-primary, #1b6ec2) transparent transparent transparent;
}

/* Layer delays for motion */
.auth-spinner div:nth-child(1) { animation-delay: -0.45s; }
.auth-spinner div:nth-child(2) { animation-delay: -0.30s; border-color: #1861ac transparent transparent transparent; }
.auth-spinner div:nth-child(3) { animation-delay: -0.15s; }
.auth-spinner div:nth-child(4) { animation-delay: 0s; border-color: #1861ac transparent transparent transparent; }

.auth-loading-text {
    margin: 8px 0 0;
    font-size: .95rem;
    letter-spacing: .5px;
    opacity: .85;
    color: #18222c; /* ensure readable on white */
}

/* Guarantee centering if anything global overrides */
.auth-loading-backdrop, .auth-loading-backdrop * {
    text-align: center !important;
}

/* Animation */
@keyframes auth-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .auth-spinner div {
        animation: none;
        border-color: var(--bs-primary, #1b6ec2);
    }
}

/* High contrast mode (forced-colors) adjustments */
@media (forced-colors: active) {
    .auth-loading-backdrop { background: rgba(0,0,0,0.6); }
    .auth-loading-panel {
        border: 2px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }
    .auth-spinner div {
        border: 4px solid CanvasText;
        animation: none;
        border-color: CanvasText transparent transparent transparent;
    }
}

/* Focus styling if interactive elements are added later */
.auth-loading-panel:focus-within {
    outline: 2px solid #1b6ec2;
    outline-offset: 4px;
}

/* Optional small viewport tweak */
@media (max-width: 420px) {
    .auth-loading-panel {
        padding: 24px 28px 22px;
        min-width: 240px;
    }
    .auth-spinner {
        width: 56px;
        height: 56px;
    }
    .auth-spinner div {
        width: 48px;
        height: 48px;
        margin: 4px;
    }
}