/* WB_GLOBAL_LOGO_LOADER_V1_START */
:root {
    --wb-loader-logo: #00ee44;
    --wb-loader-logo-dark: #33ee44;
    --wb-loader-bg: rgba(255, 255, 255, 0.96);
    --wb-loader-bg-dark: rgba(3, 15, 12, 0.94);
}

.loading,
.wb-global-loading {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: var(--wb-loader-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: wait !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* jQuery .show() sets display:block. Keep old Core.overplay() fully compatible. */
.loading[style*="display: block"],
.wb-global-loading[style*="display: block"] {
    display: flex !important;
}

.loading.top,
.wb-global-loading.top {
    z-index: 2147483640 !important;
}

html.wb-loading-active,
html.wb-loading-active body {
    overflow: hidden !important;
}

.loading .loading-icon,
.wb-global-loading .loading-icon {
    width: 112px !important;
    height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 112px !important;
    border-radius: 30px !important;
    background: rgba(0, 238, 68, 0.08) !important;
    border: 1px solid rgba(0, 238, 68, 0.18) !important;
    box-shadow:
        0 18px 50px rgba(0, 68, 51, 0.16),
        0 0 0 10px rgba(0, 238, 68, 0.035) !important;
    animation: wb-loader-float 1.8s infinite ease-in-out !important;
}

.loading .loading-icon svg,
.wb-global-loading .loading-icon svg {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    overflow: visible !important;
    color: var(--wb-loader-logo) !important;
}

.loading .loading-icon .logo-mark,
.loading .loading-icon .logo-circle-right,
.loading .loading-icon .logo-circle-left,
.wb-global-loading .loading-icon .logo-mark,
.wb-global-loading .loading-icon .logo-circle-right,
.wb-global-loading .loading-icon .logo-circle-left {
    fill: currentColor !important;
}

.loading .loading-icon .logo-circle-right,
.wb-global-loading .loading-icon .logo-circle-right {
    animation: wb-logo-blink 1.2s infinite ease-in-out !important;
}

.loading .loading-icon .logo-circle-left,
.wb-global-loading .loading-icon .logo-circle-left {
    animation: wb-logo-blink 1.2s infinite ease-in-out -0.6s !important;
}

@keyframes wb-logo-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.08; transform: scale(0.86); }
}

@keyframes wb-loader-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

body.dark .loading,
body.dl-dark .loading,
body[data-theme="dark"] .loading,
html[data-theme="dark"] .loading,
.dark-mode .loading,
body.dark .wb-global-loading,
body.dl-dark .wb-global-loading,
body[data-theme="dark"] .wb-global-loading,
html[data-theme="dark"] .wb-global-loading,
.dark-mode .wb-global-loading {
    background: var(--wb-loader-bg-dark) !important;
}

body.dark .loading .loading-icon,
body.dl-dark .loading .loading-icon,
body[data-theme="dark"] .loading .loading-icon,
html[data-theme="dark"] .loading .loading-icon,
.dark-mode .loading .loading-icon {
    background: rgba(51, 238, 68, 0.10) !important;
    border-color: rgba(51, 238, 68, 0.22) !important;
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.42),
        0 0 0 10px rgba(51, 238, 68, 0.035) !important;
}

body.dark .loading .loading-icon svg,
body.dl-dark .loading .loading-icon svg,
body[data-theme="dark"] .loading .loading-icon svg,
html[data-theme="dark"] .loading .loading-icon svg,
.dark-mode .loading .loading-icon svg {
    color: var(--wb-loader-logo-dark) !important;
}

@media (max-width: 575.98px) {
    .loading .loading-icon,
    .wb-global-loading .loading-icon {
        width: 92px !important;
        height: 92px !important;
        flex-basis: 92px !important;
        border-radius: 25px !important;
    }

    .loading .loading-icon svg,
    .wb-global-loading .loading-icon svg {
        width: 60px !important;
        height: 60px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading .loading-icon,
    .wb-global-loading .loading-icon {
        animation: none !important;
    }

    .loading .loading-icon .logo-circle-right,
    .loading .loading-icon .logo-circle-left,
    .wb-global-loading .loading-icon .logo-circle-right,
    .wb-global-loading .loading-icon .logo-circle-left {
        animation-duration: 2s !important;
    }
}
/* WB_GLOBAL_LOGO_LOADER_V1_END */

/* WB_LOADER_VISUAL_FIX_V1_START */
/* Visual-only override: smaller logo, no tile, border, shadow, or floating motion. */
.loading .loading-icon,
.wb-global-loading .loading-icon,
body.dark .loading .loading-icon,
body.dl-dark .loading .loading-icon,
body[data-theme="dark"] .loading .loading-icon,
html[data-theme="dark"] .loading .loading-icon,
.dark-mode .loading .loading-icon,
body.dark .wb-global-loading .loading-icon,
body.dl-dark .wb-global-loading .loading-icon,
body[data-theme="dark"] .wb-global-loading .loading-icon,
html[data-theme="dark"] .wb-global-loading .loading-icon,
.dark-mode .wb-global-loading .loading-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
}

.loading .loading-icon svg,
.wb-global-loading .loading-icon svg,
body.dark .loading .loading-icon svg,
body.dl-dark .loading .loading-icon svg,
body[data-theme="dark"] .loading .loading-icon svg,
html[data-theme="dark"] .loading .loading-icon svg,
.dark-mode .loading .loading-icon svg,
body.dark .wb-global-loading .loading-icon svg,
body.dl-dark .wb-global-loading .loading-icon svg,
body[data-theme="dark"] .wb-global-loading .loading-icon svg,
html[data-theme="dark"] .wb-global-loading .loading-icon svg,
.dark-mode .wb-global-loading .loading-icon svg {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

@media (max-width: 575.98px) {
    .loading .loading-icon,
    .wb-global-loading .loading-icon,
    body.dark .loading .loading-icon,
    body.dl-dark .loading .loading-icon,
    body[data-theme="dark"] .loading .loading-icon,
    html[data-theme="dark"] .loading .loading-icon,
    .dark-mode .loading .loading-icon,
    body.dark .wb-global-loading .loading-icon,
    body.dl-dark .wb-global-loading .loading-icon,
    body[data-theme="dark"] .wb-global-loading .loading-icon,
    html[data-theme="dark"] .wb-global-loading .loading-icon,
    .dark-mode .wb-global-loading .loading-icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .loading .loading-icon svg,
    .wb-global-loading .loading-icon svg,
    body.dark .loading .loading-icon svg,
    body.dl-dark .loading .loading-icon svg,
    body[data-theme="dark"] .loading .loading-icon svg,
    html[data-theme="dark"] .loading .loading-icon svg,
    .dark-mode .loading .loading-icon svg,
    body.dark .wb-global-loading .loading-icon svg,
    body.dl-dark .wb-global-loading .loading-icon svg,
    body[data-theme="dark"] .wb-global-loading .loading-icon svg,
    html[data-theme="dark"] .wb-global-loading .loading-icon svg,
    .dark-mode .wb-global-loading .loading-icon svg {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }
}
/* WB_LOADER_VISUAL_FIX_V1_END */

/* WB_LOADER_DOTS_OPACITY_FIX_V1_START */
/* Keep both SVG circles fixed; animate opacity only. */
.loading .loading-icon .logo-circle-right,
.wb-global-loading .loading-icon .logo-circle-right {
    animation: wb-logo-opacity-only 1.2s infinite ease-in-out 0s !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform-origin: initial !important;
    transition: none !important;
    will-change: opacity !important;
}

.loading .loading-icon .logo-circle-left,
.wb-global-loading .loading-icon .logo-circle-left {
    animation: wb-logo-opacity-only 1.2s infinite ease-in-out -0.6s !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform-origin: initial !important;
    transition: none !important;
    will-change: opacity !important;
}

@keyframes wb-logo-opacity-only {
    0%, 100% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 0.08;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading .loading-icon .logo-circle-right,
    .loading .loading-icon .logo-circle-left,
    .wb-global-loading .loading-icon .logo-circle-right,
    .wb-global-loading .loading-icon .logo-circle-left {
        animation-name: wb-logo-opacity-only !important;
        animation-duration: 2s !important;
        transform: none !important;
    }
}
/* WB_LOADER_DOTS_OPACITY_FIX_V1_END */

/* WB_ALL_LEGACY_LOADERS_UNIFIED_V1_START */
/*
 * One visual loader for the whole application.
 * CSS only: no observers, timers, AJAX hooks, or application logic.
 * The logo and both circles stay fixed; only circle opacity alternates.
 */
:root {
    --wb-unified-loader-size: 44px;
    --wb-unified-loader-size-mobile: 38px;
    --wb-unified-loader-color: #00ee44;
    --wb-unified-loader-body: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNi45IDM2LjkiPjxwYXRoIGZpbGw9IiMwMGVlNDQiIGQ9Ik0zNi41MywyMi45Yy0uMzQsNC42My00LjMsNy45LTguNyw3LjktMS4wOSwwLTMuOCwwLTQuOCwwbC05LjE1LDUuOTR2LTUuOTRsOS4xNS01Ljk0aDQuODFjMS41NCwwLDIuNjctMS4xMSwyLjc3LTIuNDEuMjktMy45Mi4yNS05Ljc5LS4wNy0xMy43MS0uMS0xLjIyLTEuMDktMi4yMi0yLjM5LTIuMzEtMy4xMi0uMjEtNi40LS4zMi05LjY5LS4zMnMtNi41Ny4xMS05LjY5LjMyYy0xLjMuMDktMi4yOSwxLjA5LTIuMzksMi4zMS0uMzIsMy45Mi0uMzYsOS43OS0uMDcsMTMuNzEuMSwxLjI5LDEuMjMsMi40MSwyLjc3LDIuNDFoNC44MXY1Ljk0Yy0uOTEsMC0zLjg2LDAtNC44LDAtNC40LDAtOC4zNi0zLjI3LTguNy03LjlDLjA2LDE4LjY4LjEsMTIuNS40NCw4LjI4Ljc4LDQuMDUsNC4xOC44LDguMzMuNTFjMy4yNi0uMjMsNi42OS0uMzUsMTAuMTItLjM1czYuODYuMTEsMTAuMTIuMzVjNC4xNS4zLDcuNTUsMy41NCw3Ljg5LDcuNzcuMzQsNC4yMi4zOCwxMC40LjA3LDE0LjYyWiIvPjwvc3ZnPg==");
}

/* Main full-page loader, including legacy four-span markup. */
.loading .loading-icon,
.wb-global-loading .loading-icon,
/* DataTables processing loader used across WhatsApp, Salla and other modules. */
div.dataTables_processing > div:last-child {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: var(--wb-unified-loader-size) !important;
    height: var(--wb-unified-loader-size) !important;
    min-width: var(--wb-unified-loader-size) !important;
    min-height: var(--wb-unified-loader-size) !important;
    max-width: var(--wb-unified-loader-size) !important;
    max-height: var(--wb-unified-loader-size) !important;
    flex: 0 0 var(--wb-unified-loader-size) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--wb-unified-loader-body) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    animation: none !important;
    overflow: visible !important;
    color: var(--wb-unified-loader-color) !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Remove every old four-dot implementation without changing its JS calls. */
.loading .loading-icon > span,
.wb-global-loading .loading-icon > span,
.loading .loading-icon > svg,
.wb-global-loading .loading-icon > svg,
div.dataTables_processing > div:last-child > div {
    display: none !important;
    visibility: hidden !important;
    animation: none !important;
    transform: none !important;
}

/* Two fixed circles inside the logo. */
.loading .loading-icon::before,
.loading .loading-icon::after,
.wb-global-loading .loading-icon::before,
.wb-global-loading .loading-icon::after,
div.dataTables_processing > div:last-child::before,
div.dataTables_processing > div:last-child::after {
    content: "" !important;
    position: absolute !important;
    top: 33.96% !important;
    width: 16.04% !important;
    height: 16.04% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform-origin: center !important;
    will-change: opacity !important;
    pointer-events: none !important;
}

.loading .loading-icon::before,
.wb-global-loading .loading-icon::before,
div.dataTables_processing > div:last-child::before {
    left: 27.75% !important;
    animation: wb-unified-loader-blink 1.2s infinite ease-in-out 0s !important;
}

.loading .loading-icon::after,
.wb-global-loading .loading-icon::after,
div.dataTables_processing > div:last-child::after {
    left: 56.21% !important;
    animation: wb-unified-loader-blink 1.2s infinite ease-in-out -0.6s !important;
}

@keyframes wb-unified-loader-blink {
    0%, 100% { opacity: 1; transform: none; }
    50% { opacity: 0.08; transform: none; }
}

/* Remove the Bootstrap/DataTables card, panel, text and four-dot surface. */
div.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: translate(-50%, -50%) !important;
    color: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
}

/* DataTables Scroller variant creates no four-dot child container. */
div.dataTables_processing.dts_loading {
    background-color: transparent !important;
    background-image: var(--wb-unified-loader-body) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: var(--wb-unified-loader-size) var(--wb-unified-loader-size) !important;
    color: var(--wb-unified-loader-color) !important;
}

div.dataTables_processing.dts_loading::before,
div.dataTables_processing.dts_loading::after {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 7.06px) !important;
    width: 7.06px !important;
    height: 7.06px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    transform: none !important;
    will-change: opacity !important;
}

div.dataTables_processing.dts_loading::before {
    left: calc(50% - 9.79px) !important;
    animation: wb-unified-loader-blink 1.2s infinite ease-in-out 0s !important;
}

div.dataTables_processing.dts_loading::after {
    left: calc(50% + 2.73px) !important;
    animation: wb-unified-loader-blink 1.2s infinite ease-in-out -0.6s !important;
}

body.dark .loading .loading-icon,
body.dl-dark .loading .loading-icon,
body[data-theme="dark"] .loading .loading-icon,
html[data-theme="dark"] .loading .loading-icon,
.dark-mode .loading .loading-icon,
body.dark div.dataTables_processing > div:last-child,
body.dl-dark div.dataTables_processing > div:last-child,
body[data-theme="dark"] div.dataTables_processing > div:last-child,
html[data-theme="dark"] div.dataTables_processing > div:last-child,
.dark-mode div.dataTables_processing > div:last-child {
    color: #33ee44 !important;
}

@media (max-width: 575.98px) {
    .loading .loading-icon,
    .wb-global-loading .loading-icon,
    div.dataTables_processing > div:last-child {
        width: var(--wb-unified-loader-size-mobile) !important;
        height: var(--wb-unified-loader-size-mobile) !important;
        min-width: var(--wb-unified-loader-size-mobile) !important;
        min-height: var(--wb-unified-loader-size-mobile) !important;
        max-width: var(--wb-unified-loader-size-mobile) !important;
        max-height: var(--wb-unified-loader-size-mobile) !important;
        flex-basis: var(--wb-unified-loader-size-mobile) !important;
    }

    div.dataTables_processing.dts_loading {
        background-size: var(--wb-unified-loader-size-mobile) var(--wb-unified-loader-size-mobile) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading .loading-icon::before,
    .loading .loading-icon::after,
    .wb-global-loading .loading-icon::before,
    .wb-global-loading .loading-icon::after,
    div.dataTables_processing > div:last-child::before,
    div.dataTables_processing > div:last-child::after,
    div.dataTables_processing.dts_loading::before,
    div.dataTables_processing.dts_loading::after {
        animation-duration: 2s !important;
        transform: none !important;
    }
}
/* WB_ALL_LEGACY_LOADERS_UNIFIED_V1_END */