/* WarextMarket v0.559 - themed login/register processing layer. */
/* WAREXT_V0559_AUTH_PROCESSING_UI */

body.auth-processing-active {
    overflow: hidden !important;
}

.auth-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 122, 47, .18), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(94, 65, 222, .2), transparent 28%),
        linear-gradient(180deg, #faf8ff 0%, #f4f1fb 48%, #efebf7 100%);
    transition: opacity .18s ease, visibility .18s ease;
}

.auth-processing-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.auth-processing-overlay::before,
.auth-processing-overlay::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
}

.auth-processing-overlay::before {
    width: 330px;
    height: 330px;
    top: -145px;
    left: -120px;
    background: radial-gradient(circle, rgba(255, 122, 47, .22), transparent 70%);
}

.auth-processing-overlay::after {
    width: 460px;
    height: 460px;
    right: -190px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(94, 65, 222, .2), transparent 70%);
}

.auth-processing-shell {
    position: relative;
    z-index: 2;
    width: min(570px, 100%);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 34px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 28px 80px rgba(75, 48, 145, .16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateY(10px) scale(.985);
    transition: transform .24s cubic-bezier(.2, .75, .2, 1);
}

.auth-processing-overlay.is-active .auth-processing-shell {
    transform: translateY(0) scale(1);
}

.auth-processing-card {
    position: relative;
    overflow: hidden;
    padding: 30px 32px 34px;
    border: 1px solid rgba(87, 71, 140, .1);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(249, 247, 254, .98));
    box-shadow: 0 18px 42px rgba(94, 65, 222, .08);
    text-align: center;
}

.auth-processing-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    top: -120px;
    right: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 105, 238, .16), transparent 72%);
    pointer-events: none;
}

.auth-processing-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
}

.auth-processing-brand,
.auth-processing-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(82, 58, 150, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 26px rgba(68, 50, 125, .07);
    color: #383b50;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.auth-processing-chip {
    color: #5e41de;
    background: rgba(94, 65, 222, .07);
    border-color: rgba(94, 65, 222, .11);
}

.auth-processing-brand__mark {
    position: relative;
    display: inline-flex;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.auth-processing-brand__mark::before,
.auth-processing-brand__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #5e41de, #8e7cff);
    transform: rotate(45deg) scale(.72);
}

.auth-processing-brand__mark::after {
    inset: 20%;
    background: #161621;
    transform: rotate(45deg) scale(.44);
}

.auth-processing-visual {
    position: relative;
    width: 146px;
    height: 118px;
    margin: 4px auto 18px;
}

.auth-processing-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    border: 1px solid rgba(94, 65, 222, .14);
    box-shadow: 0 0 0 12px rgba(94, 65, 222, .035), 0 18px 42px rgba(94, 65, 222, .11);
    animation: authProcessingHalo 1.8s ease-in-out infinite;
}

.auth-processing-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5e41de, #7d69ee);
    box-shadow: inset 0 8px 13px rgba(255, 255, 255, .16), 0 13px 28px rgba(94, 65, 222, .24);
    transform: rotate(45deg);
    animation: authProcessingCore 1.65s cubic-bezier(.45, 0, .2, 1) infinite;
}

.auth-processing-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(25, 26, 39, .12);
    animation: authProcessingFloat 1.5s ease-in-out infinite;
}

.auth-processing-dot--orange {
    left: 12px;
    top: 52px;
    background: #ff7a2f;
    animation-delay: -.2s;
}

.auth-processing-dot--purple {
    left: 45px;
    top: 6px;
    background: #7d5fff;
    animation-delay: -.55s;
}

.auth-processing-dot--black {
    right: 42px;
    top: 13px;
    background: #161621;
    animation-delay: -.85s;
}

.auth-processing-dot--yellow {
    right: 9px;
    top: 61px;
    background: #f3d11f;
    animation-delay: -1.15s;
}

.auth-processing-title {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #161829;
    font-size: clamp(2rem, 5vw, 2.55rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.035em;
}

.auth-processing-desc {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin: 13px auto 0;
    color: #70748c;
    font-size: .98rem;
    line-height: 1.65;
}

.auth-processing-status {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: #54596f;
    font-size: .88rem;
    font-weight: 700;
}

.auth-processing-status__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5e41de;
    box-shadow: 0 0 0 0 rgba(94, 65, 222, .28);
    animation: authProcessingPulse 1.45s ease-out infinite;
}

.auth-processing-progress {
    position: relative;
    z-index: 2;
    width: min(360px, 90%);
    height: 7px;
    margin: 22px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(87, 71, 140, .09);
}

.auth-processing-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -42%;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7a2f 0%, #7d69ee 50%, #5e41de 100%);
    animation: authProcessingTrack 1.35s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes authProcessingHalo {
    0%, 100% { transform: scale(.94); opacity: .62; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes authProcessingCore {
    0%, 100% { transform: rotate(45deg) scale(.92); }
    50% { transform: rotate(225deg) scale(1.06); }
}

@keyframes authProcessingFloat {
    0%, 100% { transform: translateY(2px) rotate(-4deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes authProcessingPulse {
    0% { box-shadow: 0 0 0 0 rgba(94, 65, 222, .28); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(94, 65, 222, 0); }
}

@keyframes authProcessingTrack {
    0% { left: -42%; }
    100% { left: 100%; }
}

@media (max-width: 620px) {
    .auth-processing-overlay { padding: 16px; }
    .auth-processing-shell { padding: 8px; border-radius: 28px; }
    .auth-processing-card { padding: 24px 20px 28px; border-radius: 22px; }
    .auth-processing-topline { margin-bottom: 20px; }
    .auth-processing-brand,
    .auth-processing-chip { min-height: 34px; padding: 7px 10px; font-size: .7rem; }
    .auth-processing-visual { transform: scale(.9); margin-top: -4px; margin-bottom: 8px; }
}

@media (max-width: 390px) {
    .auth-processing-topline { justify-content: center; flex-wrap: wrap; }
    .auth-processing-title { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-processing-shell,
    .auth-processing-halo,
    .auth-processing-core,
    .auth-processing-dot,
    .auth-processing-status__pulse,
    .auth-processing-progress::after {
        animation: none !important;
        transition: none !important;
    }
    .auth-processing-progress::after {
        left: 0;
        width: 100%;
        opacity: .62;
    }
}



/* WarextMarket v0.561 - auth route visual contract. */
/* WAREXT_V0561_AUTH_PROCESSING_LAYER */

/* Login / register must never render the global social rail, even if legacy
 * main.js recreates it after the first paint. */
html body.auth-page .site-float-stack,
html body.auth-page .site-social-float,
html[data-warext-auth-social-hidden="1"] body .site-float-stack,
html[data-warext-auth-social-hidden="1"] body .site-social-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The site background engine applies position/z-index to every direct body
 * child. Override that contract explicitly so the processing UI is always a
 * real viewport overlay instead of becoming a normal document block. */
html body.auth-page.has-site-bg-engine > .auth-processing-overlay,
html body.auth-page > .auth-processing-overlay,
html body.auth-page .auth-processing-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    z-index: 2147483640 !important;
    isolation: isolate !important;
    transform: none !important;
    contain: none !important;
    overflow: hidden !important;
}

html body.auth-page.auth-processing-active > .auth-processing-overlay.is-active,
html body.auth-page.auth-processing-active .auth-processing-overlay.is-active {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body.auth-page.auth-processing-active {
    overflow: hidden !important;
}

html body.auth-page .auth-processing-overlay .auth-processing-shell {
    position: relative !important;
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
}