/* ==========================================================================
   PropertyLink — UI Kit (toasts + modal dialogs)
   Dependency-free. Loaded globally via faHeadLink().
   ========================================================================== */

/* ---------- Toasts ---------- */
.pl-toast-host {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    max-width: min(92vw, 460px);
    pointer-events: none;
}
.pl-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    background: #fff;
    color: #1e293b;
    border: 1px solid #e7eaf0;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
}
.pl-toast.show { opacity: 1; transform: translateY(0); }
.pl-toast .pl-toast-ic {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    margin-top: 1px;
}
.pl-toast .pl-toast-msg { flex: 1; min-width: 0; white-space: pre-line; }
.pl-toast .pl-toast-x {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 17px; line-height: 1;
    padding: 0 2px; margin-left: 2px;
}
.pl-toast .pl-toast-x:hover { color: #475569; }

.pl-toast.success { border-color: #a7f3d0; }
.pl-toast.success .pl-toast-ic { background: #dcfce7; color: #047857; }
.pl-toast.error   { border-color: #fecaca; }
.pl-toast.error   .pl-toast-ic { background: #fee2e2; color: #dc2626; }
.pl-toast.warning { border-color: #fde68a; }
.pl-toast.warning .pl-toast-ic { background: #fef3c7; color: #b45309; }
.pl-toast.info    { border-color: #bfdbfe; }
.pl-toast.info    .pl-toast-ic { background: #dbeafe; color: #2563eb; }

/* ---------- Modal dialog ---------- */
.pl-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 4100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}
.pl-modal-overlay.show { opacity: 1; }
.pl-modal {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .2s ease;
    font-family: var(--pl-font, 'Inter', system-ui, sans-serif);
}
.pl-modal-overlay.show .pl-modal { transform: translateY(0) scale(1); }
.pl-modal-body { padding: 26px 24px 8px; text-align: center; }
.pl-modal-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.pl-modal-icon.q       { background: #dbeafe; color: #2563eb; }
.pl-modal-icon.danger  { background: #fee2e2; color: #dc2626; }
.pl-modal-icon.success { background: #dcfce7; color: #047857; }
.pl-modal-icon.warning { background: #fef3c7; color: #b45309; }
.pl-modal-icon.info    { background: #dbeafe; color: #2563eb; }
.pl-modal h3 {
    margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #0f172a;
    letter-spacing: -.2px;
}
.pl-modal p { margin: 0; font-size: 14px; line-height: 1.55; color: #64748b; white-space: pre-line; }
.pl-modal-actions {
    display: flex; gap: 10px; padding: 22px 24px 24px; justify-content: center;
}
.pl-btn {
    flex: 1; max-width: 170px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    font-family: inherit;
}
.pl-btn:active { transform: translateY(1px); }
.pl-btn-cancel { background: #fff; color: #334155; border-color: #d8dde6; }
.pl-btn-cancel:hover { background: #f1f5f9; }
.pl-btn-primary { background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37, 99, 235, .3); }
.pl-btn-primary:hover { background: #1d4ed8; }
.pl-btn-danger { background: #dc2626; color: #fff; box-shadow: 0 3px 10px rgba(220, 38, 38, .3); }
.pl-btn-danger:hover { background: #b91c1c; }

@media (max-width: 480px) {
    .pl-modal-actions { flex-direction: column-reverse; }
    .pl-btn { max-width: none; width: 100%; }
}