body.loading-modal-open { overflow: hidden; }

.loading-modal {
    width: min(400px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: 32px 26px;
    margin: auto;
    overflow: auto;
    border: 1px solid #e4e9ef;
    border-top: 4px solid #009150;
    border-radius: 18px;
    color: #172033;
    text-align: center;
    background: #fff;
    box-shadow: 0 24px 80px rgba(20, 34, 66, .22);
}

.loading-modal::backdrop {
    background: rgba(20, 34, 66, .42);
    backdrop-filter: blur(3px);
}

.loading-modal__indicator {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: #e8f5ee;
}

.loading-modal__indicator span {
    width: 32px;
    height: 32px;
    border: 3px solid #c4e5d5;
    border-top-color: #009150;
    border-radius: 50%;
    animation: loading-modal-rotate .9s linear infinite;
}

.loading-modal__eyebrow {
    margin: 0 0 8px;
    color: #007c44;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.loading-modal h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
}

.loading-modal #spinnerMessage {
    margin: 0;
    color: #344054;
    overflow-wrap: anywhere;
}

.loading-modal__hint {
    margin: 12px 0 0;
    color: #667085;
    font-size: .85rem;
}

@keyframes loading-modal-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-modal__indicator span { animation: none; }
}