/* ════════════════════════════════════════════════════════════════════════
   lnb-modal.css — global modal system for confirm() / alert() replacement.

   Used by assets/js/lnb-modal.js to render five flavours (info / success /
   warning / danger / question) of dialog with consistent soft-modern styling
   that matches the rest of the admin & customer themes.

   NO Bootstrap / SweetAlert / external dep. The PWA already loads enough JS;
   this is a single ~6 KB file that ships with every page.
   ──────────────────────────────────────────────────────────────────────── */

/* Backdrop ─────────────────────────────────────────────────────────────── */
.lnb-modal-backdrop {
    position: fixed; inset: 0; z-index: 12000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.lnb-modal-backdrop.show { opacity: 1; pointer-events: auto; }

/* Dialog shell ─────────────────────────────────────────────────────────── */
.lnb-modal {
    background: #fff;
    width: 100%; max-width: 460px;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22),
                0 4px 12px rgba(15, 23, 42, .08);
    overflow: hidden;
    transform: translateY(12px) scale(.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
.lnb-modal-backdrop.show .lnb-modal { transform: translateY(0) scale(1); opacity: 1; }

/* Top accent strip — coloured per variant */
.lnb-modal-accent {
    height: 5px; width: 100%;
    background: linear-gradient(90deg, var(--lnb-mv-a, #7C3AED), var(--lnb-mv-b, #A78BFA));
}

/* Body padding ─────────────────────────────────────────────────────────── */
.lnb-modal-body {
    padding: 1.5rem 1.6rem 1.1rem;
    text-align: center;
}

/* Icon halo */
.lnb-modal-icon {
    width: 60px; height: 60px; border-radius: 50%;
    margin: .25rem auto .9rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: var(--lnb-mv-a, #7C3AED);
    background: var(--lnb-mv-soft, #F5F3FF);
    position: relative;
}
/* Animated pulse ring */
.lnb-modal-icon::before {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--lnb-mv-a, #7C3AED);
    opacity: 0; animation: lnb-pulse 1.4s ease-out 1;
}
@keyframes lnb-pulse {
    0%   { opacity: .35; transform: scale(.85); }
    100% { opacity: 0;   transform: scale(1.15); }
}

.lnb-modal-title {
    font-size: 1.15rem; font-weight: 700;
    color: #0F172A;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}
.lnb-modal-message {
    font-size: .92rem; line-height: 1.5;
    color: #475569;
    margin: 0 0 .25rem;
    word-wrap: break-word;
}

/* Optional inline input (lnbPrompt) */
.lnb-modal-input {
    width: 100%;
    margin: .9rem 0 .25rem;
    padding: .65rem .9rem;
    font-size: .92rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.lnb-modal-input:focus {
    outline: 0;
    border-color: var(--lnb-mv-a, #7C3AED);
    background: #fff;
    box-shadow: 0 0 0 4px var(--lnb-mv-soft, #F5F3FF);
}

/* Footer with buttons ──────────────────────────────────────────────────── */
.lnb-modal-footer {
    display: flex; gap: .55rem;
    padding: .85rem 1.6rem 1.3rem;
    justify-content: center;
    flex-wrap: wrap;
}
.lnb-modal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 110px;
    padding: .65rem 1.35rem;
    font-size: .9rem; font-weight: 600; font-family: inherit;
    border: 1.5px solid transparent; border-radius: 10px;
    cursor: pointer;
    transition: transform .08s ease, background .15s, box-shadow .15s, color .15s, border-color .15s;
}
.lnb-modal-btn:hover  { transform: translateY(-1px); }
.lnb-modal-btn:active { transform: translateY(0); }

/* Cancel / secondary action — neutral outline */
.lnb-modal-btn.cancel {
    background: #fff;
    color: #475569;
    border-color: #E2E8F0;
}
.lnb-modal-btn.cancel:hover { background: #F1F5F9; color: #0F172A; }

/* Primary confirm — coloured per variant */
.lnb-modal-btn.confirm {
    background: var(--lnb-mv-a, #7C3AED);
    color: #fff;
    box-shadow: 0 6px 16px var(--lnb-mv-shadow, rgba(124,58,237,.30));
}
.lnb-modal-btn.confirm:hover {
    background: var(--lnb-mv-a-d, #6D28D9);
    box-shadow: 0 8px 22px var(--lnb-mv-shadow, rgba(124,58,237,.40));
}

/* Variant palette tokens ───────────────────────────────────────────────── */
.lnb-modal[data-variant="info"] {
    --lnb-mv-a: #3B82F6; --lnb-mv-a-d: #2563EB;
    --lnb-mv-b: #93C5FD; --lnb-mv-soft: #DBEAFE;
    --lnb-mv-shadow: rgba(59,130,246,.30);
}
.lnb-modal[data-variant="success"] {
    --lnb-mv-a: #10B981; --lnb-mv-a-d: #059669;
    --lnb-mv-b: #6EE7B7; --lnb-mv-soft: #D1FAE5;
    --lnb-mv-shadow: rgba(16,185,129,.30);
}
.lnb-modal[data-variant="warning"] {
    --lnb-mv-a: #F59E0B; --lnb-mv-a-d: #D97706;
    --lnb-mv-b: #FCD34D; --lnb-mv-soft: #FEF3C7;
    --lnb-mv-shadow: rgba(245,158,11,.30);
}
.lnb-modal[data-variant="danger"] {
    --lnb-mv-a: #EF4444; --lnb-mv-a-d: #DC2626;
    --lnb-mv-b: #FCA5A5; --lnb-mv-soft: #FEE2E2;
    --lnb-mv-shadow: rgba(239,68,68,.30);
}
.lnb-modal[data-variant="question"] {
    --lnb-mv-a: #7C3AED; --lnb-mv-a-d: #6D28D9;
    --lnb-mv-b: #A78BFA; --lnb-mv-soft: #F5F3FF;
    --lnb-mv-shadow: rgba(124,58,237,.30);
}

/* Toast (lnbToast) ─────────────────────────────────────────────────────── */
.lnb-toast-host {
    position: fixed; top: 1.25rem; right: 1.25rem;
    z-index: 12500;
    display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.lnb-toast {
    pointer-events: auto;
    min-width: 280px; max-width: 380px;
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .7rem .9rem .7rem .8rem;
    background: #fff;
    border-radius: 12px; border-left: 4px solid var(--lnb-mv-a, #7C3AED);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
    transform: translateX(120%);
    opacity: 0;
    transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s;
    font-size: .86rem; color: #0F172A;
}
.lnb-toast.show { transform: translateX(0); opacity: 1; }
.lnb-toast .lnb-toast-icon {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--lnb-mv-soft, #F5F3FF);
    color: var(--lnb-mv-a, #7C3AED);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .9rem;
}
.lnb-toast .lnb-toast-body { flex: 1; line-height: 1.4; }
.lnb-toast .lnb-toast-close {
    background: none; border: none; cursor: pointer;
    color: #94A3B8; font-size: 1.1rem; line-height: 1; padding: 0;
}
.lnb-toast .lnb-toast-close:hover { color: #0F172A; }
.lnb-toast[data-variant="info"]    { --lnb-mv-a: #3B82F6; --lnb-mv-soft: #DBEAFE; }
.lnb-toast[data-variant="success"] { --lnb-mv-a: #10B981; --lnb-mv-soft: #D1FAE5; }
.lnb-toast[data-variant="warning"] { --lnb-mv-a: #F59E0B; --lnb-mv-soft: #FEF3C7; }
.lnb-toast[data-variant="danger"]  { --lnb-mv-a: #EF4444; --lnb-mv-soft: #FEE2E2; }

/* Reduced-motion: kill the bounce */
@media (prefers-reduced-motion: reduce) {
    .lnb-modal, .lnb-toast,
    .lnb-modal-icon::before { transition: none !important; animation: none !important; }
}

/* Very small phones: shrink padding */
@media (max-width: 380px) {
    .lnb-modal-body  { padding: 1.25rem 1.1rem .85rem; }
    .lnb-modal-footer { padding: .75rem 1.1rem 1.1rem; }
    .lnb-modal-btn { min-width: 90px; padding: .55rem 1rem; }
}