/*
 * BrightHER Tomorrow - page loader
 * Shared by the public site, admin (login/) and user panel (userpanel/).
 * Pages toggle it with $(".response_gif").show() / .hide(), so only the look is changed here:
 *   overlay background  -> "Please wait..." caption (inline SVG)
 *   ::before            -> BrightHER logo mark on a white disc
 *   ::after             -> spinning crimson / gold ring
 */
.response_gif {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000000 !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='24'%3E%3Ctext x='110' y='17' text-anchor='middle' font-family='Segoe UI,Arial,sans-serif' font-size='14' font-weight='600' letter-spacing='0.5' fill='%23b70021'%3EPlease wait%E2%80%A6%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center calc(50% + 82px) !important;
    background-size: 220px 24px !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.response_gif::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50% !important;
    background: #fff url("../images/faviconbri.png") center 46% / 58px auto no-repeat;
    box-shadow: 0 10px 30px rgba(183, 0, 33, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: bht-loader-pulse 1.6s ease-in-out infinite;
}

.response_gif::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 122px;
    height: 122px;
    margin: -61px 0 0 -61px;
    box-sizing: border-box;
    border-radius: 50% !important;
    border: 3px solid rgba(183, 0, 33, 0.10);
    border-top-color: #b70021;
    border-right-color: #f5a623;
    animation: bht-loader-spin 0.9s linear infinite;
}

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

@keyframes bht-loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .response_gif::before,
    .response_gif::after {
        animation-duration: 3s;
    }
}