.wpmsg-modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:99999}
.wpmsg-dialog{background:#fff;border-radius:8px;max-width:520px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.2);}
.wpmsg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee;font-weight:600}
.wpmsg-body{padding:16px}
#wpmsg-otp-code{width:92%;padding:12px;border:1px solid #ddd;border-radius:6px;margin-bottom:12px}
.wpmsg-row{display:flex;align-items:center;gap:12px}
.wpmsg-resend.disabled{pointer-events:none;opacity:0.5}
.wpmsg-close{border:none;background:none;font-size:22px;cursor:pointer}
.wpmsg-status{color:#198754;margin-top:8px}
 Loader 
.wpmsg-loader{display:none;position:relative;height:20px;margin-bottom:10px}
.wpmsg-spin{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.5);animation:wpmsg-rot 1s linear infinite}
@keyframes wpmsg-rot{to{transform:rotate(360deg)}}


/* ===== WPMSG Checkout Loader ===== */

/* ===== WPMSG Fullscreen Loader ===== */

#wpmsg-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(4px);
    z-index: 9999999;
    display: none;              /* JS se display:flex set hoga */
    justify-content: center;
    align-items: center;
}

.wpmsg-loader-box {
    text-align: center;
}

/* Logo with animated ring using ::before (always perfectly aligned) */
.wpmsg-logo-ring {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);

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

/* Rotating ring tightly around logo */
.wpmsg-logo-ring::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 5px solid #e5e7eb;
    border-top-color: #683695;  /* yaha ring ka colour change kar sakta hai */
    animation: wpmsg-spin 0.8s linear infinite;
}

.wpmsg-logo-ring img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.wpmsg-text {
    margin-top: 12px;
    font-size: 14px;
    color: #333;
}

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