/* Halaman isolir pelanggan (/p/isolir, /p/isolir/invoice/:id, /p/isolir/bayar) — keputusan pemilik 30 Okt 2026.
   --brand diisi dari Pengaturan Isolir › Teks halaman pelanggan (partials/isolir-landing-head.ejs). Font sistem lebih dulu: jaringan
   yang sedang diisolir belum tentu bisa memuat font luar. */
:root {
  --il-bg: #f6f7f9;
  --il-surface: #ffffff;
  --il-soft: #f3f4f7;
  --il-border: #e5e8ee;
  --il-line: #cfd4de;
  --il-text: #0a0e1a;
  --il-text-2: #283044;
  --il-mute: #4b5468;
  --il-danger: #be123c;
  --il-danger-bg: #fff1f3;
  --il-danger-line: #fecdd6;
  --il-warning: #8a4b00;
  --il-warning-bg: #fffbeb;
  --il-warning-line: #fde3a7;
  --il-success: #05603a;
  --il-success-bg: #e7f8ee;
  --il-neutral: #3f4657;
  --il-neutral-bg: #eef0f4;
  --il-info-bg: #eef4ff;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.il {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--il-bg);
  color: var(--il-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.il-page { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.il-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.il-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; min-width: 0; }
.il-brand img { height: 32px; width: auto; max-width: 140px; display: block; }
.il-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand, #2563eb); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.il-brand-mark svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.il-back, .il-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--brand, #2563eb); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.il-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.il-hello h1 { margin: 0; font-size: 20px; font-weight: 700; }
.il-sub { margin: 0; font-size: 13px; color: var(--il-mute); }

.il-card { background: var(--il-surface); border: 1px solid var(--il-border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.il-card h2 { margin: 0; font-size: 16px; font-weight: 700; }
.il-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.il-card-head .il-meta { font-size: 12px; font-weight: 600; color: var(--il-mute); }
.il-hint { margin: 0; font-size: 12.5px; color: var(--il-mute); }
.il-note { background: var(--il-soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--il-text-2); margin: 0; }

.il-hero { border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--il-border); background: var(--il-surface); }
.il-hero h2 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.il-hero p { margin: 0; font-size: 14px; }
.il-tone-danger.il-hero { background: var(--il-danger-bg); border-color: var(--il-danger-line); }
.il-tone-danger.il-hero p { color: #5c1a2a; }
.il-tone-warning.il-hero { background: var(--il-warning-bg); border-color: var(--il-warning-line); }
.il-tone-warning.il-hero p { color: #5a3a06; }
.il-tone-success.il-hero { background: var(--il-success-bg); border-color: #b7e4c7; }
.il-badge { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--il-neutral); }
.il-tone-danger .il-badge { background: #e11d48; }
.il-tone-warning .il-badge { background: #b45309; }
.il-tone-success .il-badge { background: #047857; }
.il-pill { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--il-neutral-bg); color: var(--il-neutral); }
.il-pill.il-tone-danger { background: var(--il-danger-bg); color: var(--il-danger); }
.il-pill.il-tone-success { background: var(--il-success-bg); color: var(--il-success); }
.il-pill.il-tone-warning { background: var(--il-warning-bg); color: var(--il-warning); }

.il-btn { min-height: 48px; border-radius: 12px; border: 1px solid var(--il-line); background: var(--il-surface); color: var(--il-text); font-size: 15px; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 16px; cursor: pointer; width: 100%; text-align: center; }
.il-btn-primary { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; font-weight: 700; }
.il-btn-wa { background: var(--il-success-bg); border-color: var(--il-success-bg); color: var(--il-success); }
.il-btn-wa-solid { background: var(--il-success); border-color: var(--il-success); color: #fff; font-weight: 700; }
.il-btn:disabled { opacity: .6; cursor: default; }
.il-btn-sm { min-height: 44px; width: auto; padding: 0 12px; font-size: 13px; border-radius: 10px; flex-shrink: 0; }
.il-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.il-field { display: flex; flex-direction: column; gap: 6px; }
.il-field label { font-size: 13px; font-weight: 600; color: var(--il-text-2); }
.il-input { height: 48px; border: 1px solid var(--il-line); border-radius: 12px; padding: 0 14px; font-size: 16px; font-family: inherit; width: 100%; background: #fff; color: var(--il-text); }
.il-input:focus, .il-btn:focus-visible, .il-chip input:focus-visible + .il-chip-body, .il-method input:focus-visible + .il-method-body { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.il-input-code { height: 56px; font-size: 24px; letter-spacing: .3em; text-align: center; font-weight: 600; }
.il-or { display: flex; align-items: center; gap: 10px; color: var(--il-mute); font-size: 12px; }
.il-or::before, .il-or::after { content: ''; flex: 1; height: 1px; background: var(--il-border); }
.il-error { margin: 0; font-size: 13px; color: var(--il-danger); background: var(--il-danger-bg); border-radius: 10px; padding: 8px 12px; }
.il-ok { margin: 0; font-size: 13px; color: var(--il-text-2); background: var(--il-info-bg); border-radius: 10px; padding: 8px 12px; }
.il-actions-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

.il-durations { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.il-durations legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--il-text-2); }
.il-chip, .il-method { position: relative; display: block; cursor: pointer; }
.il-chip input, .il-method input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.il-chip-body { min-height: 64px; border-radius: 12px; border: 1.5px solid #e1e4ea; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.il-chip-body b { font-size: 15px; }
.il-chip-body span { font-size: 13px; color: var(--il-mute); }
.il-chip input:checked + .il-chip-body, .il-method input:checked + .il-method-body { border-color: var(--brand, #2563eb); background: var(--il-info-bg); }
.il-method-list { display: flex; flex-direction: column; gap: 8px; }
.il-method-body { min-height: 52px; border-radius: 12px; border: 1.5px solid #e1e4ea; padding: 10px 12px; display: flex; align-items: center; gap: 12px; background: #fff; }
.il-method-body .il-method-name { flex: 1; display: flex; flex-direction: column; }
.il-method-body .il-method-name b { font-size: 14px; }
.il-method-body .il-method-name span, .il-method-fee { font-size: 12.5px; color: var(--il-mute); }
.il-box { background: var(--il-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.il-box span { font-size: 12px; font-weight: 600; color: var(--il-mute); }
.il-box strong { font-size: 15px; }

.il-list { display: flex; flex-direction: column; gap: 8px; }
.il-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--il-border); border-radius: 12px; }
.il-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.il-item-main b { font-size: 14px; font-weight: 600; }
.il-item-main span { font-size: 12.5px; color: var(--il-mute); }
.il-item-main .il-late { color: var(--il-danger); }
.il-item-main .il-wait { color: var(--il-warning); }
.il-svc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f1f4; }
.il-svc:last-child { border-bottom: 0; padding-bottom: 0; }
.il-sum { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--il-text-2); }
.il-sum.il-muted { color: var(--il-mute); }
.il-sum.il-total { font-size: 17px; font-weight: 700; color: var(--il-text); }
.il-sum .il-amt { white-space: nowrap; }
.il-divider { height: 1px; background: #f0f1f4; }
.il-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.il-fact { background: var(--il-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.il-fact span { font-size: 12px; color: var(--il-mute); }
.il-fact b { font-size: 13.5px; font-weight: 600; }
.il-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.il-steps li { display: flex; gap: 12px; }
.il-dot { flex-shrink: 0; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: #9aa3b8; }
.il-dot.il-tone-warning { background: #d97706; }
.il-dot.il-tone-danger { background: #e11d48; }
.il-steps .il-now .il-dot { box-shadow: 0 0 0 4px var(--il-danger-line); }
.il-steps .il-step-text { display: flex; flex-direction: column; }
.il-steps .il-step-text b { font-size: 13.5px; }
.il-steps .il-step-text span { font-size: 12.5px; color: var(--il-mute); }
.il-steps .il-now b { color: var(--il-danger); }
.il-numbered { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: il; }
.il-numbered li { display: flex; gap: 10px; font-size: 13.5px; color: var(--il-text-2); counter-increment: il; }
.il-numbered li::before { content: counter(il); flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--il-success-bg); color: var(--il-success); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.il-cro-label { font-size: 12px; font-weight: 600; color: var(--il-mute); text-transform: uppercase; letter-spacing: .04em; }
.il-cro-name { font-size: 15px; font-weight: 700; }
.il-pay-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.il-pay-box img { width: 240px; max-width: 80%; height: auto; border: 1px solid var(--il-border); border-radius: 12px; }
.il-va { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: 1px; word-break: break-all; }
.il-amount { font-size: 26px; font-weight: 700; }
.il-wait-row { background: var(--il-info-bg); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #1e2a4a; }
.il-spinner { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #c7d6f7; border-top-color: var(--brand, #2563eb); animation: il-spin 1s linear infinite; }
@keyframes il-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .il-spinner { animation: none; } }
.il-success { text-align: center; align-items: center; }
.il-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--il-success-bg); display: flex; align-items: center; justify-content: center; }
.il-success-icon svg { width: 28px; height: 28px; stroke: var(--il-success); fill: none; }
.il-foot { text-align: center; font-size: 12px; color: var(--il-mute); margin: 4px 0 0; }
[hidden] { display: none !important; }
.il-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #0a0e1a; color: #fff; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 12px; z-index: 50; max-width: calc(100% - 32px); }