/*
 * 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. It is
 * torn down the moment the probe settles - success, failure or timeout - so an
 * OFFNET user is never held behind a spinner for a check that cannot help
 * them.
 *
 * Deliberately matches the login page it covers - navy surface, white copy -
 * rather than introducing a second palette, so the transition reads as part of
 * the same screen instead of a different one. Colours are the literal app
 * palette (body background #012C59, primary #2495D2) because this codebase
 * does not use CSS custom properties.
 */

.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: #012C59;

    /* Hidden until the probe reveals it. Toggled via visibility 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;

    /* Dim ring in the brand blue, with one bright segment giving it the
       rotating "gap". */
    border: 0.75rem solid #2495D2;
    border-right-color: #ffffff;
    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: bold;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.te-loader__subtitle {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

@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;
    }
}