/* popupmodal.css - global reusable popup modal styles */

:root{
    --pw-bg: #ffffff;
    --pw-border: rgba(0,0,0,0.06);
    --pw-shadow: 0 10px 30px rgba(0,0,0,0.12);
    --pw-z: 1060;
}

.pw-overlay {
    position: fixed;
    inset: 0; /* top:0;right:0;bottom:0;left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* allow clicks through when hidden */
    z-index: var(--pw-z);
}

.pw-overlay.pw-visible { pointer-events: auto; }

.pw-modal {
    width: 100%;
    max-width: 420px;
    background: var(--pw-bg);
    border: 1px solid var(--pw-border);
    border-radius: 12px;
    box-shadow: var(--pw-shadow);
    transform: translateY(-6px) scale(0.995);
    opacity: 0;
    transition: transform 180ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease-in;
    pointer-events: none;
    z-index: var(--pw-z);
    text-align: center;
}

.pw-modal.pw-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.pw-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,0.04); }
.pw-header h2 { margin:0; font-size:18px; font-weight:600; color:#333; }
.pw-close { background:transparent; border:none; font-size:16px; line-height:1; cursor:pointer; padding:6px; border-radius:6px; }
.pw-close:focus { outline:2px solid rgba(0,123,255,0.2); }

.pw-body { padding:20px; font-size:16px; color:#333; line-height: 1.6; }
.pw-footer { padding:12px 16px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid rgba(0,0,0,0.04); }
.pw-btn { padding:8px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); cursor:pointer; background:#f5f6f8; }
.pw-btn:focus { outline:2px solid rgba(0,123,255,0.18); }
.pw-btn-primary { background: linear-gradient(90deg,#007bff,#8a2be2); color:#fff; border:none; }
.pw-btn-secondary { background:transparent; }

/* type accents */
.pw-modal.pw-error { border-left: 6px solid #dc3545; }
.pw-modal.pw-success { border-left: 6px solid #28a745; }
.pw-modal.pw-info  { border-left: 6px solid #17a2b8; }
.pw-modal.pw-warning { border-left: 6px solid #ffc107; }

/* make overlay dim slightly for focus (still allows interaction without full overlay) */
.pw-overlay.pw-visible::before {
    content: '';
    position: absolute; inset:0; background: rgba(0,0,0,0.06); pointer-events:none;
}

/* responsive: smaller modal on mobile */
@media (max-width:520px) {
    .pw-modal { max-width: 94%; border-radius: 10px; }
    .pw-header, .pw-body, .pw-footer { padding-left:12px; padding-right:12px; }
}

@media (prefers-reduced-motion: reduce) {
    .pw-modal { transition: none; }
}

/* Ensure Bootstrap modal backdrops don't interfere with popup modals */
.pw-overlay.pw-visible ~ .modal-backdrop,
body.modal-open .pw-overlay.pw-visible ~ .modal-backdrop {
    /* Ensure any Bootstrap backdrop that sits next to the popup overlay
       is placed below Bootstrap modals (which use z-index: 1050) but
       above regular page content. Use 1040 as the backdrop z-index. */
    z-index: 1040 !important;
}

/* Ensure popup modal appears above Bootstrap modals when needed.
   The popup overlay uses --pw-z (1060) and should sit above Bootstrap
   modal content (1050). */
.modal.show ~ .pw-overlay.pw-visible {
    z-index: calc(var(--pw-z) + 10) !important;
}

/* Force Bootstrap modal backdrop to a value below .modal (1050).
   Using 1040 keeps the standard stacking order: backdrop (1040) < modal (1050) < popup (1060).
   Important is used here to override inline styles set by the popup JS in some cases. */
.modal-backdrop.fade.show {
    z-index: 1040 !important;
}

/* When popup is visible, ensure backdrop stays below the popup and Bootstrap modals */
body:has(.pw-overlay.pw-visible) .modal-backdrop.fade.show {
    z-index: 1040 !important;
}

/* OTP code display (styled to match email layout) */
.verify-code-block { display:inline-block; padding:14px 22px; border-radius:8px; background:#f7f7f7; min-width:200px; height:72px; display:flex; align-items:center; justify-content:center; }
.verify-code-block .code { font-size:28px; letter-spacing:6px; font-weight:700; color:#111; font-family:monospace, 'Courier New', monospace; }

.verify-inputs { margin-top:8px; }
.verify-inputs .otp-input { width:48px; height:48px; text-align:center; font-size:20px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); }
.verify-brand img{ height:64px; }