/* ════════════════════════════════════════════════
   CONFIRM DIALOG — modal custom (pengganti confirm()/alert() bawaan browser)
   Dipakai lewat window.confirmDialog()/window.alertDialog() — lihat
   assets/js/confirm-dialog.js
════════════════════════════════════════════════ */

.cd-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
}
.cd-overlay.show { opacity: 1; visibility: visible; }
.cd-overlay.closing { opacity: 0; }

.cd-box {
    width: 380px;
    max-width: 100%;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    padding: 28px 24px 24px;
    text-align: center;
    transform: scale(.94) translateY(8px);
    transition: transform .2s cubic-bezier(.21,1.02,.73,1);
}
.cd-overlay.show .cd-box { transform: scale(1) translateY(0); }

.cd-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: #eff6ff;
    color: var(--primary);
}
.cd-danger .cd-icon { background: #fef2f2; color: var(--danger); }

.cd-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.cd-message {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 22px;
    white-space: pre-line;
}

.cd-actions { display: flex; gap: 10px; justify-content: center; }
.cd-btn {
    flex: 1;
    padding: 11px 18px;
    border-radius: 11px;
    border: none;
    font-family: "Poppins", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.cd-cancel { background: var(--surface-3); color: var(--text); }
.cd-cancel:hover { background: var(--border); }
.cd-confirm { background: var(--primary); color: #fff; }
.cd-confirm:hover { background: var(--primary-hover); transform: translateY(-1px); }
.cd-confirm:focus-visible, .cd-cancel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cd-danger .cd-confirm { background: var(--danger); }
.cd-danger .cd-confirm:hover { background: #dc2626; }

@media (max-width: 420px) {
    .cd-box { padding: 24px 18px 18px; max-height: calc(100vh - 40px); overflow-y: auto; }
    .cd-actions { flex-direction: column-reverse; }
}