/* EZurance Design System v0.1 — komponen. Hanya merujuk token semantik di tokens.css.
   Jarak milik wadah (gap); komponen anak tidak memasang margin luar. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-primary); background: var(--surface-base); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text-brand); }
:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografi ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-tight); }
.t-amount  { font-size: var(--fs-amount); line-height: var(--lh-amount); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); }
.t-overline { font-size: var(--fs-overline); line-height: var(--lh-overline); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.t-num { font-variant-numeric: tabular-nums; }
.t-strong { font-weight: var(--fw-semibold); }
.t-muted { color: var(--text-secondary); }
.t-faint { color: var(--text-tertiary); }
.t-brand { color: var(--text-brand); }

/* ---------- Ikon ---------- */
.icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; fill: currentColor; } /* Material Symbols: bentuk isi, bukan garis */
.icon.lg { width: var(--icon-md); height: var(--icon-md); }
.icon-box {
  width: var(--icon-box); height: var(--icon-box); flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-brand-soft); color: var(--text-brand);
}
.icon-box.warm { background: var(--accent-warm-soft); color: var(--accent-warm-text); }
.icon-box.success { background: var(--status-success-soft); color: var(--status-success-text); }
.icon-box.warning { background: var(--status-warning-soft); color: var(--status-warning-text); }
.icon-box.danger { background: var(--status-danger-soft); color: var(--status-danger-text); }

/* ---------- Tata letak dasar ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--sp-2)); }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.gap-1 { --gap: var(--sp-1); } .gap-2 { --gap: var(--sp-2); } .gap-3 { --gap: var(--sp-3); } .gap-4 { --gap: var(--sp-4); }
.gap-5 { --gap: var(--sp-5); } .gap-6 { --gap: var(--sp-6); } .gap-8 { --gap: var(--sp-8); }
.divider { height: var(--border-w); background: var(--border-default); border: 0; margin: 0; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--target-min); padding: 0 var(--sp-5); border-radius: var(--r-md);
  border: var(--border-w) solid transparent; font-weight: var(--fw-bold); font-size: var(--fs-body);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn.block { width: 100%; }
.btn.sm { min-height: var(--sp-10); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn.primary { background: var(--action-primary); color: var(--action-on-primary); }
.btn.primary:hover { background: var(--action-primary-hover); }
.btn.primary:active { background: var(--action-primary-press); }
.btn.secondary { background: transparent; color: var(--text-brand); border-color: var(--border-brand); }
.btn.secondary:hover { background: var(--surface-brand-soft); }
.btn.soft { background: var(--action-soft); color: var(--action-on-soft); }
.btn.ghost { background: transparent; color: var(--text-brand); padding: 0 var(--sp-3); }
.btn.ghost:hover { background: var(--surface-brand-soft); }
.btn.danger { background: var(--status-danger); color: var(--neutral-0); }
.btn.warm { background: var(--accent-warm); color: var(--accent-on-warm); }
.btn.on-brand { background: var(--neutral-0); color: var(--ez-800); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--action-disabled); color: var(--action-on-disabled); border-color: transparent; cursor: not-allowed; transform: none; }
.btn .spinner { width: var(--icon-sm); height: var(--icon-sm); }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.btn-pair > .btn { width: 100%; padding: 0 var(--sp-3); }
.btn-pair.stacked { grid-template-columns: 1fr; }
.btn-pair.stacked > .btn.primary { order: -1; }
@media (min-width: 48rem) { .btn:not(.block):not(.sm) { min-width: var(--btn-min); } }
.autosave { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.autosave .icon { width: var(--sp-4); height: var(--sp-4); color: var(--status-success); }
.icon-btn {
  width: var(--target-min); height: var(--target-min); display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--r-full); background: transparent; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); }
.icon-btn.on-brand:hover { background: rgba(255, 255, 255, 0.14); }

.spinner { border-radius: var(--r-full); border: var(--focus-w) solid currentColor; border-right-color: transparent; animation: putar 0.8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- Kartu ---------- */
.card { background: var(--surface-raised); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); padding: var(--sp-4); }
.card.roomy { padding: var(--sp-5); }
.card.flush { padding: 0; overflow: hidden; }
.card.soft { background: var(--surface-brand-soft); border-color: transparent; }
.card.interactive { cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.card.interactive:active { transform: scale(0.99); }

/* ---------- Kartu polis ---------- */
.policy-card {
  position: relative; aspect-ratio: var(--card-ratio); border-radius: var(--r-xl); padding: var(--sp-5);
  color: var(--text-on-brand); overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--policy-card-from) 0%, var(--policy-card-to) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.policy-card::after { /* tanda air bentuk "e": lingkaran besar tipis, bukan dekorasi glass */
  content: ""; position: absolute; right: -18%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: var(--r-full);
  border: var(--sp-6) solid rgba(255, 255, 255, 0.07); z-index: -1;
}
.policy-card .pc-label { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-on-brand-muted); }
.policy-card .pc-no { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); }
.policy-card .pc-qr { width: var(--sp-16); height: var(--sp-16); background: var(--neutral-0); border-radius: var(--r-sm); padding: var(--sp-1); color: var(--neutral-950); fill: currentColor; }

/* ---------- Lencana dan chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-full); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge .icon { width: var(--sp-4); height: var(--sp-4); }
.badge.success { background: var(--status-success-soft); color: var(--status-success-text); }
.badge.warning { background: var(--status-warning-soft); color: var(--status-warning-text); }
.badge.danger { background: var(--status-danger-soft); color: var(--status-danger-text); }
.badge.info { background: var(--status-info-soft); color: var(--status-info-text); }
.badge.neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.badge.warm { background: var(--accent-warm-soft); color: var(--accent-warm-text); }
.badge.on-brand { background: rgba(255, 255, 255, 0.16); color: var(--text-on-brand); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-10); padding: 0 var(--sp-4);
  border-radius: var(--r-full); border: var(--border-w) solid var(--border-default); background: var(--surface-raised);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--action-soft); color: var(--action-on-soft); border-color: transparent; }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

/* ---------- Formulir ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label, .field .label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.field .hint { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-tertiary); }
.input {
  width: 100%; min-height: var(--target-min); padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: var(--border-w) solid var(--border-strong); background: var(--surface-raised); color: var(--text-primary);
  font-size: var(--fs-body); transition: border-color var(--dur-micro) var(--ease-out);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 var(--border-w) var(--focus-ring); }
.input[readonly] { background: var(--surface-sunken); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .prefix { position: absolute; left: var(--sp-4); color: var(--text-secondary); font-weight: var(--fw-semibold); }
.input-wrap .prefix + .input { padding-left: var(--sp-12); }
.field.error .input { border-color: var(--status-danger); }
.field .error-text { display: none; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--status-danger-text); font-weight: var(--fw-semibold); }
.field.error .error-text { display: flex; }
.field .autofill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--status-success-text); font-weight: var(--fw-semibold); }

.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.otp input { min-height: var(--sp-14); text-align: center; font-size: var(--fs-h2); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; padding: 0; }

.option {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); min-height: var(--target-min);
  border-radius: var(--r-md); border: var(--border-w) solid var(--border-default); background: var(--surface-raised); cursor: pointer;
}
.option[aria-checked="true"] { border-color: var(--border-brand); background: var(--surface-brand-soft); box-shadow: 0 0 0 var(--border-w) var(--border-brand); }
.radio-dot { width: var(--sp-5); height: var(--sp-5); flex: none; border-radius: var(--r-full); border: var(--focus-w) solid var(--border-strong); display: grid; place-items: center; }
.option[aria-checked="true"] .radio-dot, [aria-checked="true"] > .row .radio-dot { border-color: var(--action-primary); }
.option[aria-checked="true"] .radio-dot::after, [aria-checked="true"] > .row .radio-dot::after { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-full); background: var(--action-primary); }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.check .box { width: var(--sp-6); height: var(--sp-6); flex: none; border-radius: var(--r-sm); border: var(--focus-w) solid var(--border-strong); display: grid; place-items: center; color: var(--action-on-primary); background: var(--surface-raised); }
.check .box .icon { width: var(--sp-5); height: var(--sp-5); opacity: 0; }
.check[aria-checked="true"] .box { background: var(--action-primary); border-color: var(--action-primary); }
.check[aria-checked="true"] .box .icon { opacity: 1; }

.switch { width: var(--sp-12); height: var(--sp-6); border-radius: var(--r-full); background: var(--border-strong); position: relative; border: 0; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: var(--sp-1); left: var(--sp-1); width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-full); background: var(--neutral-0); transition: transform var(--dur-std) var(--ease-std); }
.switch::before { content: ""; position: absolute; inset: calc((var(--target-min) - var(--sp-6)) / -2) 0; } /* area sentuh 48 px */
.switch[aria-checked="true"] { background: var(--action-primary); }
.switch[aria-checked="true"]::after { transform: translateX(var(--sp-6)); }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: flex-start; gap: var(--sp-2); }
.stepper .step { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.stepper .step .bar { height: var(--sp-1); border-radius: var(--r-full); background: var(--border-default); }
.stepper .step .lbl { display: flex; align-items: center; gap: var(--sp-1); }
.stepper .step .lbl .icon { width: var(--sp-4); height: var(--sp-4); }
.stepper .step.done { color: var(--text-secondary); }
.stepper .step.done .bar, .stepper .step.current .bar { background: var(--action-primary); }
.stepper .step.current { color: var(--text-brand); }

/* ---------- Daftar ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; min-height: var(--target-min); text-decoration: none; color: inherit; cursor: pointer; }
.list > .list-item + .list-item { border-top: var(--border-w) solid var(--border-default); }
.list-item .li-title { font-weight: var(--fw-semibold); }
.list-item .li-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.list-item > .icon:last-child { color: var(--text-tertiary); }

.kv { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Perlu diselesaikan ---------- */
.todo { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-raised); border: var(--border-w) solid var(--border-default); border-left: var(--sp-1) solid var(--status-warning); cursor: pointer; }
.todo.info { border-left-color: var(--action-primary); }
.todo.danger { border-left-color: var(--status-danger); }

/* ---------- Banner info ---------- */
.notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-sm); background: var(--status-info-soft); color: var(--status-info-text); }
.notice.success { background: var(--status-success-soft); color: var(--status-success-text); }
.notice.warning { background: var(--status-warning-soft); color: var(--status-warning-text); }
.notice.danger { background: var(--status-danger-soft); color: var(--status-danger-text); }
.notice .icon { margin-top: 0; }

/* ---------- Ceklis dokumen ---------- */
.doc-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: var(--border-w) dashed var(--border-strong); background: var(--surface-raised); }
.doc-row.done { border-style: solid; border-color: var(--border-default); }
.doc-row .thumb { width: var(--sp-12); height: var(--sp-12); border-radius: var(--r-sm); background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-tertiary); flex: none; overflow: hidden; }

/* ---------- Linimasa ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: var(--sp-6) 1fr; gap: var(--sp-3); }
.tl-item .tl-mark { display: flex; flex-direction: column; align-items: center; }
.tl-item .tl-dot { width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-full); display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-tertiary); flex: none; }
.tl-item .tl-dot .icon { width: var(--sp-4); height: var(--sp-4); }
.tl-item .tl-line { width: var(--focus-w); flex: 1; background: var(--border-default); min-height: var(--sp-4); }
.tl-item:last-child .tl-line { display: none; }
.tl-item .tl-body { padding-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.tl-item.done .tl-dot { background: var(--status-success); color: var(--neutral-0); }
.tl-item.done .tl-line { background: var(--status-success); }
.tl-item.current .tl-dot { background: var(--action-primary); color: var(--action-on-primary); box-shadow: 0 0 0 var(--sp-1) var(--action-soft); }

/* ---------- Bilah aksi bawah ---------- */
.action-bar {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface-raised); border-top: var(--border-w) solid var(--border-default); box-shadow: var(--shadow-float);
}
.action-bar .btn { flex: 1; }
.action-bar .total { display: flex; flex-direction: column; }

/* ---------- Tab bar ---------- */
.tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-raised); border-top: var(--border-w) solid var(--border-default);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border: 0; background: transparent; color: var(--text-tertiary); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); cursor: pointer; position: relative; }
.tabbar button .pill { display: grid; place-items: center; width: var(--sp-16); height: var(--sp-8); border-radius: var(--r-full); transition: background var(--dur-std) var(--ease-std); }
.tabbar button[aria-current="page"] { color: var(--text-brand); }
.tabbar button[aria-current="page"] .pill { background: var(--action-soft); }
.tabbar .dot { position: absolute; top: var(--sp-2); right: calc(50% - var(--sp-5)); width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-full); background: var(--status-danger); }

/* ---------- Sheet, toast, overlay ---------- */
.overlay { position: absolute; inset: 0; background: var(--surface-overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-std) var(--ease-std); z-index: 40; }
.overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surface-raised); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-sheet);
  transform: translateY(100%); transition: transform var(--dur-emph) var(--ease-emph); max-height: 88%; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.sheet.open { transform: translateY(0); }
.sheet .grabber { width: var(--sp-10); height: var(--sp-1); border-radius: var(--r-full); background: var(--border-strong); align-self: center; }
.toast {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--tabbar-h) + var(--sp-4)); z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--neutral-800); color: var(--neutral-0); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sheet); opacity: 0; transform: translateY(var(--sp-2)); pointer-events: none;
  transition: opacity var(--dur-std) var(--ease-std), transform var(--dur-std) var(--ease-std);
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Skeleton ---------- */
.skeleton { background: var(--surface-sunken); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: kilau 1.4s var(--ease-std) infinite; }
@keyframes kilau { to { transform: translateX(100%); } }

/* ---------- Persetujuan dan kepatuhan ---------- */
.consent { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.ojk-note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-tertiary); }
.ojk-note .icon { width: var(--sp-4); height: var(--sp-4); color: var(--status-success); }

/* ---------- Maskot ---------- */
.mascot { width: var(--sp-20); height: auto; flex: none; }
.mascot.sm { width: var(--sp-12); }
.mascot.lg { width: calc(var(--sp-20) * 2); }

/* ---------- Bilah progres ---------- */
.progress { height: var(--sp-2); border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-warm); }