/*
 * Spinner Style: Defines the look and feel of the loading spinner.
 * It's a circle with a spinning border. It's hidden by default.
 */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Light grey border */
    border-radius: 50%;
    border-top-color: #fff; /* White top border to make it stand out */
    animation: spin 1s ease-in-out infinite; /* The animation */
}

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

/*
 * Helper style for the button to correctly align the text or spinner.
 * This ensures the spinner appears centered when the text is hidden.
 */
.continue-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}