/*
 * Branded loading indicator used inside #data-table_processing (the site's
 * shared full-page loading overlay, shown/hidden from many pages). Mirrors
 * the animated logo + rotating-message loader added to the customer app.
 *
 * IMPORTANT: `.page-overlay .overlay-text` (public/css/style.css) was built
 * for a single-line "spinner.gif + text" row: fixed `height: 50px`, white
 * bold 28px text. Our content (a 64px ring + a multi-line message) is much
 * taller and needs its own text styling, so this file overrides that legacy
 * rule directly (same selector, so normal cascade order is enough — no
 * !important needed) instead of just adding new classes alongside it.
 */
.page-overlay {
    /* Higher than the mobile bottom nav (1030) and product sheet (1040/1041)
     * from mobile-app-style.css, so the loader is never hidden behind them. */
    z-index: 1050;
}

.page-overlay .overlay-text {
    height: auto;
    min-height: 50px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: normal;
}

.mg-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    color: #4B5563;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    box-sizing: border-box;
}

.mg-loader-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}

.mg-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(159, 108, 230, 0.25);
    border-top-color: #9F6CE6;
    animation: mg-loader-spin 0.9s linear infinite;
}

.mg-loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%) scale(1);
    animation: mg-loader-pulse 1.1s ease-in-out infinite alternate;
}

.mg-loader-message {
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    text-align: center;
    max-width: 260px;
    min-height: 18px;
    line-height: 1.4;
    letter-spacing: normal;
    transition: opacity 0.25s ease;
    margin: 0;
}

.mg-loader-message.mg-fade {
    opacity: 0;
}

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

@keyframes mg-loader-pulse {
    from { transform: translate(-50%, -50%) scale(0.86); }
    to { transform: translate(-50%, -50%) scale(1.06); }
}