/* =====================================================
   NexaNest - Customer Popup / Toast / Confirm
   ===================================================== */

.npopup-overlay, .nconfirm-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.npopup-overlay.is-open, .nconfirm-overlay.is-open { opacity: 1; visibility: visible; }

.npopup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
    z-index: 1510;
    width: min(92vw, 420px);
    max-height: 88vh;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.npopup.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.npopup[hidden] { display: block; }

.npopup-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    position: relative;
    border-top: 5px solid var(--nn-primary, #4f46e5);
}
.npopup-card[data-type="success"] { border-top-color: #16a34a; }
.npopup-card[data-type="error"] { border-top-color: #dc2626; }
.npopup-card[data-type="warning"] { border-top-color: #f59e0b; }
.npopup-card[data-type="info"] { border-top-color: #0ea5e9; }
.npopup-card[data-type="cart"] { border-top-color: #4f46e5; }
.npopup-card[data-type="wishlist"] { border-top-color: #ec4899; }

.npopup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease;
}
.npopup-close:hover { background: #e2e8f0; }

.npopup-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
    display: inline-block;
    animation: nnpPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes nnpPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.npopup-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: #0f172a; }
.npopup-message { font-size: 15px; color: #334155; line-height: 1.6; margin-bottom: 18px; white-space: pre-line; }
.npopup-media { margin: 0 0 16px; }
.npopup-media img { max-width: 100%; border-radius: 10px; max-height: 200px; object-fit: cover; margin: 0 auto; }

.npopup-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.npopup-actions .btn { flex: 1; min-width: 120px; }

.npopup-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: #f1f5f9;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}
.npopup-progress span { display: block; height: 100%; width: 100%; background: var(--nn-primary, #4f46e5); transform-origin: left; animation: nnpBar linear forwards; }
.npopup-card[data-type="success"] .npopup-progress span { background: #16a34a; }
.npopup-card[data-type="error"] .npopup-progress span { background: #dc2626; }
.npopup-card[data-type="warning"] .npopup-progress span { background: #f59e0b; }
@keyframes nnpBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Confirm dialog */
.nconfirm {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
    z-index: 1520;
    width: min(92vw, 400px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.nconfirm.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.nconfirm[hidden] { display: block; }
.nconfirm-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.nconfirm-title { font-size: 18px; margin: 0 0 8px; }
.nconfirm-message { font-size: 14px; color: #475569; margin: 0 0 20px; }
.nconfirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Toasts */
.ntoast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    padding: 12px 14px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15,23,42,.15);
    border-left: 4px solid #4f46e5;
    font-size: 14px;
    color: #0f172a;
    animation: nnpSlideIn .28s ease both;
    min-width: 240px;
}
.ntoast[data-type="success"] { border-left-color: #16a34a; }
.ntoast[data-type="error"] { border-left-color: #dc2626; }
.ntoast[data-type="warning"] { border-left-color: #f59e0b; }
.ntoast[data-type="info"] { border-left-color: #0ea5e9; }
.ntoast .ntoast-icon { font-size: 18px; line-height: 1; }
.ntoast .ntoast-body { flex: 1; }
.ntoast .ntoast-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.ntoast .ntoast-msg { font-size: 13px; color: #475569; }
.ntoast.is-out { animation: nnpSlideOut .24s ease forwards; }
@keyframes nnpSlideIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes nnpSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(14px); opacity: 0; } }