/*
 * TLS Enrichment detection overlay.
 *
 * Shown while the ONNET probe runs so a subscriber who is about to be
 * identified does not see the login form flash before being redirected.
 *
 * Deliberately NOT shown immediately. The overlay is revealed only if the
 * probe is still running after a short grace period (see TE_LOADER_DELAY_MS
 * in tls-enrichment.js): a fast ONNET identification resolves before it ever
 * appears, and the OFFNET majority - whose probe fails quickly - is never made
 * to wait behind a spinner for a check that cannot help them.
 *
 * Colours come from the shared :root tokens, so the overlay reskins with the
 * active theme rather than hardcoding a palette. It deliberately matches the
 * login page it covers - white surface, navy heading - rather than the blue
 * field of the original mockup, so the transition reads as part of the same
 * screen instead of a different one.
 */

.te-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    /* Fully opaque. The page beneath must never show through - the form and
       the overlay's own copy would overlap and both become unreadable. */
    background-color: var(--color-bg-surface, #ffffff);

    /* Hidden until the grace period elapses. Toggled via visibility/display
       rather than opacity so the surface is opaque the entire time it is on
       screen, with no translucent fade revealing the form behind it. */
    visibility: hidden;
}

.te-loader[data-visible='true'] {
    visibility: visible;
}

.te-loader__spinner {
    width: 7.5rem;
    height: 7.5rem;

    border: 0.75rem solid var(--color-brand-primary, #2495d2);
    /* The darker segment gives the ring its rotating "gap", and matches the
       "Please Wait" heading below so the two read as one element. */
    border-right-color: var(--color-text-secondary, #00629a);
    border-radius: 50%;

    animation: te-loader-spin 900ms linear infinite;
}

.te-loader__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.te-loader__title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-secondary, #00629a);
}

/* Navy, matching the form's own "Enter your number to get started." heading,
   so the line describing what is happening carries the stronger weight. */
.te-loader__subtitle {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #012c59);
}

@keyframes te-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*
 * Respect a reduced-motion preference: keep the ring visible as a static
 * progress indicator rather than spinning it.
 */
@media (prefers-reduced-motion: reduce) {
    .te-loader__spinner {
        animation: none;
    }
}