/* =========================================================
   NUJIZ GLOBAL PROFESSIONAL PROGRESS
   ========================================================= */

.nujiz-progress-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(7,10,16,.58);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .24s ease,
        visibility .24s ease;
}

.nujiz-progress-overlay.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nujiz-progress-card{
    width:min(390px,calc(100vw - 32px));
    padding:28px 26px 24px;
    border:1px solid rgba(114,81,245,.22);
    border-radius:24px;
    background:rgba(255,255,255,.98);
    box-shadow:
        0 28px 80px rgba(9,13,28,.28),
        0 4px 18px rgba(114,81,245,.11);
    text-align:center;
    transform:translateY(10px) scale(.98);
    transition:transform .25s ease;
}

.nujiz-progress-overlay.is-visible .nujiz-progress-card{
    transform:translateY(0) scale(1);
}

.nujiz-progress-brand{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    padding:7px 11px;
    border-radius:999px;
    background:#f3f0ff;
    color:#6843e8;
    font-size:10px;
    font-weight:900;
}

.nujiz-progress-brand-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#7251f5;
    box-shadow:0 0 0 5px rgba(114,81,245,.1);
    animation:nujizProgressPulse 1.4s infinite;
}

@keyframes nujizProgressPulse{
    0%,100%{transform:scale(1);opacity:1}
    50%{transform:scale(.72);opacity:.55}
}

.nujiz-progress-ring{
    --progress:0deg;

    position:relative;
    width:132px;
    height:132px;
    margin:0 auto 22px;
    border-radius:50%;

    background:
        conic-gradient(
            #7251f5 0deg,
            #8b62ff var(--progress),
            #ece9f5 var(--progress),
            #ece9f5 360deg
        );

    display:grid;
    place-items:center;

    box-shadow:
        0 10px 34px rgba(114,81,245,.16);
}

.nujiz-progress-ring::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:50%;
    background:#fff;
    box-shadow:
        inset 0 0 0 1px rgba(25,28,45,.05);
}

.nujiz-progress-percent{
    position:relative;
    z-index:2;
    display:flex;
    align-items:baseline;
    justify-content:center;
    direction:ltr;
    color:#171b28;
}

.nujiz-progress-number{
    font-size:34px;
    line-height:1;
    font-weight:950;
    letter-spacing:-1.5px;
}

.nujiz-progress-symbol{
    margin-inline-start:2px;
    font-size:14px;
    font-weight:900;
    color:#7251f5;
}

.nujiz-progress-title{
    margin:0;
    color:#171b28;
    font-size:17px;
    line-height:1.4;
    font-weight:950;
}

.nujiz-progress-description{
    margin:7px 0 0;
    color:#788295;
    font-size:11px;
    line-height:1.8;
    font-weight:650;
}

.nujiz-progress-track{
    position:relative;
    height:7px;
    margin-top:20px;
    overflow:hidden;
    border-radius:999px;
    background:#ece9f4;
}

.nujiz-progress-track-fill{
    width:0%;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(
            90deg,
            #6540ec,
            #8b62ff
        );
    transition:width .42s cubic-bezier(.22,.8,.25,1);
}

.nujiz-progress-stage{
    min-height:17px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#929aaa;
    font-size:9px;
    font-weight:750;
}

.nujiz-progress-stage-text{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.nujiz-progress-elapsed{
    flex:0 0 auto;
    direction:ltr;
    font-variant-numeric:tabular-nums;
}

.nujiz-progress-done .nujiz-progress-ring{
    background:
        conic-gradient(
            #36b67e 0deg,
            #36b67e 360deg
        );
}

.nujiz-progress-done .nujiz-progress-symbol{
    color:#36b67e;
}

.nujiz-progress-done .nujiz-progress-track-fill{
    background:#36b67e;
}

.nujiz-progress-error .nujiz-progress-ring{
    background:
        conic-gradient(
            #df5263 0deg,
            #df5263 360deg
        );
}

.nujiz-progress-error .nujiz-progress-track-fill{
    background:#df5263;
}


/* ===================== DARK ===================== */

html[data-theme="dark"] .nujiz-progress-overlay{
    background:rgba(3,6,11,.72);
}

html[data-theme="dark"] .nujiz-progress-card{
    background:#171b24;
    border-color:#343c4d;
    box-shadow:
        0 30px 90px rgba(0,0,0,.48),
        0 0 0 1px rgba(114,81,245,.06);
}

html[data-theme="dark"] .nujiz-progress-brand{
    background:#242034;
    color:#bdaaff;
}

html[data-theme="dark"] .nujiz-progress-ring{
    background:
        conic-gradient(
            #7251f5 0deg,
            #9672ff var(--progress),
            #303644 var(--progress),
            #303644 360deg
        );
}

html[data-theme="dark"] .nujiz-progress-ring::before{
    background:#171b24;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04);
}

html[data-theme="dark"] .nujiz-progress-percent,
html[data-theme="dark"] .nujiz-progress-title{
    color:#f7f8fb;
}

html[data-theme="dark"] .nujiz-progress-description{
    color:#adb6c5;
}

html[data-theme="dark"] .nujiz-progress-track{
    background:#303644;
}

html[data-theme="dark"] .nujiz-progress-stage{
    color:#8994a6;
}


/* ===================== MOBILE ===================== */

@media(max-width:600px){

    .nujiz-progress-card{
        padding:24px 20px 21px;
        border-radius:21px;
    }

    .nujiz-progress-ring{
        width:118px;
        height:118px;
    }

    .nujiz-progress-number{
        font-size:31px;
    }

    .nujiz-progress-title{
        font-size:15px;
    }

    .nujiz-progress-description{
        font-size:10px;
    }
}

@media(prefers-reduced-motion:reduce){

    .nujiz-progress-overlay,
    .nujiz-progress-card,
    .nujiz-progress-track-fill{
        transition:none !important;
    }

    .nujiz-progress-brand-dot{
        animation:none !important;
    }
}

/* =========================================================
   NUJIZ PROGRESS — TEXT VISIBILITY FIX
   ========================================================= */

.nujiz-progress-modal,
.nujiz-progress-card {
  color: #ffffff !important;
}

.nujiz-progress-modal h1,
.nujiz-progress-modal h2,
.nujiz-progress-modal h3,
.nujiz-progress-modal strong,
.nujiz-progress-modal b,
.nujiz-progress-card h1,
.nujiz-progress-card h2,
.nujiz-progress-card h3,
.nujiz-progress-card strong,
.nujiz-progress-card b {
  color: #ffffff !important;
  opacity: 1 !important;
}

.nujiz-progress-modal p,
.nujiz-progress-modal small,
.nujiz-progress-modal span,
.nujiz-progress-card p,
.nujiz-progress-card small,
.nujiz-progress-card span {
  color: #cbd5e1 !important;
}

.nujiz-progress-modal [class*="percent"],
.nujiz-progress-modal [class*="percentage"],
.nujiz-progress-card [class*="percent"],
.nujiz-progress-card [class*="percentage"] {
  color: #ffffff !important;
  opacity: 1 !important;
}

.nujiz-progress-modal [class*="time"],
.nujiz-progress-modal [class*="elapsed"],
.nujiz-progress-card [class*="time"],
.nujiz-progress-card [class*="elapsed"] {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}


/* =========================================================
   NUJIZ PROGRESS — FINAL TEXT VISIBILITY
   ========================================================= */

.nujiz-progress-card .nujiz-progress-percent,
.nujiz-progress-card .nujiz-progress-number,
.nujiz-progress-card .nujiz-progress-symbol {
  color: #ffffff !important;
  opacity: 1 !important;
}

.nujiz-progress-card .nujiz-progress-title {
  color: #ffffff !important;
  opacity: 1 !important;
}

.nujiz-progress-card .nujiz-progress-description {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

.nujiz-progress-card .nujiz-progress-stage,
.nujiz-progress-card .nujiz-progress-stage-text {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

.nujiz-progress-card .nujiz-progress-elapsed {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-percent,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-number,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-symbol,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-title {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-description,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-stage,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-stage-text,
html[data-theme="dark"] .nujiz-progress-card .nujiz-progress-elapsed {
  color: #d1d9e6 !important;
  opacity: 1 !important;
}



/* =========================================================
   NUJIZ PROGRESS — CANCEL PROCESSING
   ========================================================= */

.nujiz-progress-cancel{
    width:100%;
    min-height:42px;
    margin-top:15px;
    padding:10px 16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;

    background:rgba(255,255,255,.055);

    color:#e8edf5 !important;
    -webkit-text-fill-color:#e8edf5 !important;

    font-family:inherit;
    font-size:12px;
    font-weight:800;

    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.nujiz-progress-cancel:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.25);
}

.nujiz-progress-cancel:active{
    transform:scale(.985);
}

.nujiz-progress-cancel-icon{
    width:20px;
    height:20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-size:16px;
    line-height:1;
    font-weight:500;
}

.nujiz-progress-cancel-text{
    color:#e8edf5 !important;
    -webkit-text-fill-color:#e8edf5 !important;
    opacity:1 !important;
}

html[data-theme="dark"] .nujiz-progress-cancel,
html[data-theme="dark"] .nujiz-progress-cancel-text{
    color:#e8edf5 !important;
    -webkit-text-fill-color:#e8edf5 !important;
}

@media(max-width:600px){
    .nujiz-progress-cancel{
        min-height:44px;
        margin-top:13px;
        font-size:12px;
    }
}