/* ============================================================
   hfz-dialog — pengganti alert()/confirm()/prompt() native (1 Nov 2026)
   Self-contained: tak bergantung token style.css / badge.css supaya sama
   rupa di admin & public. JS: assets/dialog.js
   ============================================================ */
dialog.hfzd {
    --hfzd-ink: #1d2a30;
    --hfzd-muted: #617178;
    --hfzd-line: #d6dfdb;
    --hfzd-teal: #167a70;
    --hfzd-teal-soft: #dff3eb;
    --hfzd-coral: #e5533a;
    --hfzd-coral-soft: #fde8e3;
    --hfzd-amber: #b86e00;
    --hfzd-amber-soft: #fdf1dc;
    --hfzd-accent: var(--hfzd-teal);
    --hfzd-accent-soft: var(--hfzd-teal-soft);

    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--hfzd-ink);
    font-family: 'IBM Plex Sans', Inter, system-ui, -apple-system, sans-serif;
    box-shadow: 0 30px 70px rgba(15, 23, 27, .28), 0 4px 14px rgba(15, 23, 27, .12);
    overflow: hidden;
    animation: hfzd-pop .22s cubic-bezier(.2, 1.1, .3, 1) both;
}
dialog.hfzd.is-danger { --hfzd-accent: var(--hfzd-coral); --hfzd-accent-soft: var(--hfzd-coral-soft); }
dialog.hfzd.is-warn   { --hfzd-accent: var(--hfzd-amber); --hfzd-accent-soft: var(--hfzd-amber-soft); }
dialog.hfzd.is-error  { --hfzd-accent: var(--hfzd-coral); --hfzd-accent-soft: var(--hfzd-coral-soft); }

dialog.hfzd::backdrop {
    background: rgba(15, 23, 27, .45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: hfzd-fade .2s ease both;
}
dialog.hfzd.is-closing { animation: hfzd-out .16s ease both; }
dialog.hfzd.is-closing::backdrop { animation: hfzd-fade-out .16s ease both; }

/* strip warna atas — rujuk gaya "Access Badge" */
.hfzd-bar { height: 5px; background: linear-gradient(90deg, var(--hfzd-accent), color-mix(in srgb, var(--hfzd-accent) 45%, #f5a524)); }
.hfzd-body { padding: 26px 26px 8px; text-align: center; }
.hfzd-icon {
    position: relative;
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--hfzd-accent-soft);
    color: var(--hfzd-accent);
}
.hfzd-icon::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--hfzd-accent);
    opacity: 0;
    animation: hfzd-ring .9s .15s ease-out both;
}
.hfzd-icon svg { width: 28px; height: 28px; animation: hfzd-icon .35s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.hfzd-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.hfzd-msg { margin: 0; color: var(--hfzd-muted); font-size: .93rem; line-height: 1.55; white-space: pre-line; word-break: break-word; }
.hfzd-field { margin-top: 14px; text-align: left; }
.hfzd-field label { display: block; margin: 0 0 5px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hfzd-muted); }
.hfzd-input-row { display: flex; gap: 8px; }
.hfzd-input {
    flex: 1 1 auto; min-width: 0;
    padding: 11px 13px;
    border: 1.5px solid var(--hfzd-line);
    border-radius: 12px;
    background: #fbfbf8;
    color: var(--hfzd-ink);
    font: 500 .92rem/1.2 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.hfzd-input:focus { outline: none; border-color: var(--hfzd-accent); box-shadow: 0 0 0 3px var(--hfzd-accent-soft); }

.hfzd-actions { display: flex; gap: 10px; padding: 18px 26px 24px; }
.hfzd-btn {
    flex: 1 1 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--hfzd-line);
    background: #fff;
    color: var(--hfzd-ink);
    font: 600 .93rem/1 inherit;
    font-family: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.hfzd-btn:hover { background: #f3f6f4; }
.hfzd-btn:active { transform: scale(.97); }
.hfzd-btn:focus-visible { outline: 3px solid var(--hfzd-accent-soft); outline-offset: 1px; }
.hfzd-btn.is-primary { background: var(--hfzd-accent); border-color: var(--hfzd-accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--hfzd-accent) 35%, transparent); }
.hfzd-btn.is-primary:hover { background: color-mix(in srgb, var(--hfzd-accent) 88%, #000); }
.hfzd-btn.is-copied { background: var(--hfzd-teal); border-color: var(--hfzd-teal); color: #fff; }
.hfzd-btn.is-inline { flex: 0 0 auto; padding: 0 16px; }

@keyframes hfzd-pop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes hfzd-out { to { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes hfzd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hfzd-fade-out { to { opacity: 0; } }
@keyframes hfzd-ring { 0% { opacity: .55; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes hfzd-icon { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* Mobile: bottom sheet */
@media (max-width: 520px) {
    dialog.hfzd { margin: auto auto 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; animation-name: hfzd-sheet; }
    .hfzd-actions { flex-direction: column-reverse; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes hfzd-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    dialog.hfzd, dialog.hfzd::backdrop, .hfzd-icon::after, .hfzd-icon svg { animation: none !important; }
}