.portal-loader-container {
    position: relative;
    width: 100%;
    min-height: 150px;
}

/* =================================================================
   Proven Ring Spinner — counter-rotating brand-colored dot rings
   Palette: #2790FF #26D9FF #857CE9 #69DEA3
   ================================================================= */

.proven-ring-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0A215B;
    z-index: 30000;
}

.proven-ring-overlay.light {
    background-color: #F4F4F4;
}

.proven-ring-spinner {
    position: relative;
    width: 96px;
    height: 96px;
    animation: proven-loader-breathe 2.5s ease-in-out infinite;
}

/* Outer ring — 12 brand-colored dots, clockwise */
.proven-ring-spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: transparent;
    animation: proven-pulse-spin 2s linear infinite;
    box-shadow:
        0px -40px 0 0px #2790FF,
        20px -34.64px 0 -0.6px rgba(38,217,255,0.85),
        34.64px -20px 0 -0.6px rgba(133,124,233,0.72),
        40px 0px 0 -0.6px rgba(105,222,163,0.58),
        34.64px 20px 0 -0.6px rgba(39,144,255,0.45),
        20px 34.64px 0 -1px rgba(38,217,255,0.33),
        0px 40px 0 -1.6px rgba(133,124,233,0.22),
        -20px 34.64px 0 -1px rgba(105,222,163,0.33),
        -34.64px 20px 0 -0.6px rgba(39,144,255,0.45),
        -40px 0px 0 -0.6px rgba(38,217,255,0.58),
        -34.64px -20px 0 -0.6px rgba(133,124,233,0.72),
        -20px -34.64px 0 -0.6px rgba(105,222,163,0.85);
}

/* Inner ring — 8 dots, counter-rotating */
.proven-ring-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: transparent;
    animation: proven-pulse-spin 2s linear infinite reverse;
    animation-delay: -0.5s;
    box-shadow:
        0px -22px 0 0px #857CE9,
        15.56px -15.56px 0 -0.4px rgba(38,217,255,0.78),
        22px 0px 0 -0.4px rgba(39,144,255,0.55),
        15.56px 15.56px 0 -0.4px rgba(105,222,163,0.38),
        0px 22px 0 -0.8px rgba(133,124,233,0.22),
        -15.56px 15.56px 0 -0.4px rgba(38,217,255,0.38),
        -22px 0px 0 -0.4px rgba(39,144,255,0.55),
        -15.56px -15.56px 0 -0.4px rgba(105,222,163,0.78);
}

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

@keyframes proven-loader-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}