/* ============================================================================
   RICAME — DESIGN SYSTEM
   Mass-market, low-literacy friendly. Every flow screen FITS THE VIEWPORT —
   no scrolling. Big touch targets, high contrast, icons, one task per screen.
   ========================================================================== */

:root {
  --navy:#0B1F3A; --navy-700:#15315A;
  --blue:#1E6FE8; --blue-600:#1559C2;
  --teal:#16B6A6; --green:#1FAE5A; --amber:#F2A33C; --red:#E2483D;
  --ink:#11233B; --muted:#5B7088; --line:#E4EAF1;
  --bg:#F4F7FB; --card:#FFFFFF; --white:#FFFFFF;
  --radius:18px; --radius-sm:12px;
  --shadow:0 8px 24px rgba(11,31,58,.10);
  --shadow-lg:0 16px 44px rgba(11,31,58,.16);
  --tap:54px; --maxw:480px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; height:100%; }
body {
  font-family:var(--font); background:var(--navy); color:var(--ink);
  font-size:17px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* ---- App frame: full height, never scrolls ----------------------------- */
.app {
  max-width:var(--maxw); margin:0 auto;
  height:100dvh; background:var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
  position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Top app bar -------------------------------------------------------- */
.appbar {
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:var(--navy); color:var(--white);
}
.appbar .back {
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,255,255,.12); border:none; color:var(--white); cursor:pointer; flex:0 0 auto;
}
.appbar .back svg { width:22px; height:22px; }
.appbar .back[hidden] { display:none; }
.appbar .title { font-size:16px; font-weight:700; flex:1; }
.appbar .brand-dot { font-weight:800; letter-spacing:1px; }

/* ---- Step progress ------------------------------------------------------ */
.steps { flex:0 0 auto; display:flex; gap:6px; padding:10px 16px; background:var(--navy); }
.steps .seg { flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.20); transition:background .25s; }
.steps .seg.done { background:var(--teal); }
.steps .seg.active { background:var(--white); }
.steps[hidden] { display:none; }

/* ---- Screen container --------------------------------------------------- */
.screen-wrap { flex:1 1 auto; position:relative; overflow:hidden; min-height:0; }
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:16px 16px 8px;
  opacity:0; transform:translateX(26px); pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}
.screen.active { opacity:1; transform:none; pointer-events:auto; }
.screen.leaving { transform:translateX(-26px); }

.s-head { flex:0 0 auto; }
.s-body { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.s-body::-webkit-scrollbar { width:0; }
/* Auto-fit wrapper (created by app.js fitScreen). Fills the body so centered
   screens stay centered; JS applies `zoom` to shrink-to-fit when needed. */
.fitwrap { display:flex; flex-direction:column; min-height:100%; }
.s-body.center-fit > .fitwrap { justify-content:center; align-items:center; }
.s-foot { flex:0 0 auto; padding-top:10px; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }

/* ---- Typography --------------------------------------------------------- */
h1.h { font-size:23px; line-height:1.18; margin:2px 0 4px; font-weight:800; }
p.sub { font-size:15px; color:var(--muted); margin:0 0 10px; }
.section-label { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin:10px 0 6px; }

/* ---- Big choice cards --------------------------------------------------- */
.choice {
  display:flex; align-items:center; gap:14px; width:100%;
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:10px; cursor:pointer; text-align:left;
  transition:border-color .15s, transform .08s, box-shadow .15s; box-shadow:var(--shadow);
}
.choice:active { transform:scale(.99); }
.choice.selected { border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,111,232,.15),var(--shadow); }
.choice .ico { flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:rgba(30,111,232,.10); color:var(--blue); }
.choice .ico svg { width:28px; height:28px; }
.choice .ico.green { background:rgba(31,174,90,.12); color:var(--green); }
.choice .ico.teal { background:rgba(22,182,166,.12); color:var(--teal); }
.choice .txt b { display:block; font-size:18px; font-weight:700; }
.choice .txt span { font-size:14px; color:var(--muted); }
.choice .chev { margin-left:auto; color:var(--muted); flex:0 0 auto; }

/* ---- Segmented toggle (citizen / foreigner) ----------------------------- */
.toggle2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
.toggle2 .opt {
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:16px 12px; text-align:center; cursor:pointer; transition:border-color .15s, transform .08s; box-shadow:var(--shadow);
}
.toggle2 .opt:active { transform:scale(.98); }
.toggle2 .opt.selected { border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,111,232,.15); }
.toggle2 .opt .ico { width:44px; height:44px; margin:0 auto 8px; display:grid; place-items:center; border-radius:13px; background:rgba(30,111,232,.10); color:var(--blue); }
.toggle2 .opt .ico svg { width:24px; height:24px; }
.toggle2 .opt b { display:block; font-size:15px; }
.toggle2 .opt span { font-size:12px; color:var(--muted); }

/* ---- Capture option pair ------------------------------------------------ */
.capture-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.cap { background:var(--card); border:2px solid var(--line); border-radius:var(--radius); padding:14px 12px; text-align:center; cursor:pointer; transition:border-color .15s, transform .08s; box-shadow:var(--shadow); }
.cap:active { transform:scale(.98); }
.cap.selected { border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,111,232,.15); }
.cap .ico { width:44px; height:44px; margin:0 auto 8px; display:grid; place-items:center; border-radius:13px; background:rgba(30,111,232,.10); color:var(--blue); }
.cap .ico svg { width:24px; height:24px; }
.cap b { display:block; font-size:15px; }
.cap span { font-size:12px; color:var(--muted); }

/* ---- Form fields -------------------------------------------------------- */
.field { margin-bottom:10px; }
.field label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
.field .hint { font-size:12px; color:var(--muted); font-weight:400; }
.input,.select {
  width:100%; min-height:var(--tap); font-size:17px; font-family:var(--font);
  padding:12px 14px; border:2px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); outline:none; transition:border-color .15s;
}
.input:focus,.select:focus { border-color:var(--blue); }
.input.ok { border-color:var(--green); }
.input.err { border-color:var(--red); }
.field .err-msg { color:var(--red); font-size:13px; margin-top:5px; display:none; }
.field.invalid .err-msg { display:block; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---- PIN ---------------------------------------------------------------- */
.pin-dots { display:flex; gap:16px; justify-content:center; margin:8px 0 18px; }
.pin-dots .d { width:18px; height:18px; border-radius:50%; border:2px solid var(--blue); transition:background .12s; }
.pin-dots .d.fill { background:var(--blue); }
.pin-dots.err .d { border-color:var(--red); animation:shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:300px; margin:0 auto; }
.keypad button {
  height:60px; font-size:24px; font-weight:700; font-family:var(--font);
  border:none; border-radius:var(--radius-sm); background:var(--card); color:var(--ink);
  box-shadow:var(--shadow); cursor:pointer; transition:transform .07s, background .12s;
  display:grid; place-items:center;
}
.keypad button:active { transform:scale(.95); background:#EAF1FC; }
.keypad button.blank { background:transparent; box-shadow:none; cursor:default; }
.keypad button svg { width:26px; height:26px; }

/* ---- Camera capture ----------------------------------------------------- */
.capture-box { border:2px dashed var(--line); border-radius:var(--radius); background:var(--white); padding:18px 14px; text-align:center; margin-bottom:12px; }
.capture-box .cam-ico { width:54px; height:54px; margin:0 auto 8px; display:grid; place-items:center; border-radius:50%; background:rgba(30,111,232,.10); color:var(--blue); }
.capture-box .cam-ico svg { width:30px; height:30px; }
.capture-box .preview { width:100%; max-height:150px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:10px; display:none; }
.capture-box.has-photo .preview { display:block; }
.capture-box.has-photo .cam-ico,.capture-box.has-photo .cap-text { display:none; }
.ocr-result { background:rgba(31,174,90,.08); border:1px solid rgba(31,174,90,.3); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:12px; display:none; }
.ocr-result.show { display:block; }
.ocr-result .row { display:flex; justify-content:space-between; padding:3px 0; font-size:15px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { width:100%; min-height:var(--tap); font-size:17px; font-weight:700; font-family:var(--font);
  border:none; border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .08s, opacity .15s, background .15s; }
.btn:active { transform:scale(.99); }
.btn-primary { background:var(--blue); color:#fff; box-shadow:var(--shadow); }
.btn-primary:disabled { background:#AFC4E8; box-shadow:none; cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--blue); }
.btn-soft { background:rgba(30,111,232,.10); color:var(--blue); }
.btn svg { width:22px; height:22px; }

/* ---- Hero / landing ----------------------------------------------------- */
.hero { text-align:center; padding:6px 4px 0; }
.hero .logo { width:74px; height:74px; margin:0 auto 12px; border-radius:22px; background:linear-gradient(135deg,var(--blue),var(--teal)); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-lg); }
.hero .logo svg { width:40px; height:40px; }
.hero h1 { font-size:27px; margin:0 0 4px; font-weight:800; letter-spacing:.5px; }
.hero p { color:var(--muted); margin:0 auto; font-size:15px; max-width:340px; }
.welcome-back { display:none; align-items:center; gap:12px; background:rgba(22,182,166,.10); border:1px solid rgba(22,182,166,.3); border-radius:var(--radius); padding:12px 14px; margin:0 0 14px; }
.welcome-back.show { display:flex; }
.welcome-back .av { width:42px; height:42px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.welcome-back .t b { display:block; } .welcome-back .t span { font-size:13px; color:var(--muted); }

/* ---- Consent ------------------------------------------------------------ */
.consent { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; padding:10px 0; }
.consent input { width:24px; height:24px; flex:0 0 auto; margin-top:1px; accent-color:var(--blue); }
.consent a { color:var(--blue); font-weight:700; text-decoration:underline; }

/* ---- Liveness ----------------------------------------------------------- */
.live-ring { width:180px; height:180px; margin:6px auto 14px; border-radius:50%; border:4px solid var(--line); display:grid; place-items:center; background:#0b1f3a0d; position:relative; overflow:hidden; cursor:pointer; }
.live-ring.active { border-color:var(--teal); box-shadow:0 0 0 6px rgba(22,182,166,.15); }
.live-ring img { width:100%; height:100%; object-fit:cover; }
.live-ring .placeholder { color:var(--muted); text-align:center; padding:16px; font-size:14px; }
.live-steps { list-style:none; padding:0; margin:0; }
.live-steps li { display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:9px; font-size:15px; }
.live-steps li .dot { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex:0 0 auto; display:grid; place-items:center; }
.live-steps li.done .dot { background:var(--green); border-color:var(--green); color:#fff; }

/* ---- Review ------------------------------------------------------------- */
.review-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:8px; }
.review-card .rc-head { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-bottom:1px solid var(--line); }
.review-card .rc-head b { font-size:14px; }
.review-card .rc-head .edit { color:var(--blue); background:none; border:none; font-size:14px; font-weight:700; cursor:pointer; }
.review-card .rc-row { display:flex; justify-content:space-between; gap:12px; padding:6px 14px; font-size:14px; }
.review-card .rc-row:not(:last-child) { border-bottom:1px solid var(--line); }
.review-card .rc-row span { color:var(--muted); }
.review-card .rc-row b { text-align:right; font-weight:600; }

/* ---- Success ------------------------------------------------------------ */
.success { text-align:center; padding:20px; display:flex; flex-direction:column; justify-content:center; height:100%; }
.success .check { width:84px; height:84px; margin:0 auto 16px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); }
.success .check svg { width:46px; height:46px; }
.success h1 { font-size:24px; margin:0 0 6px; }
.success p { color:var(--muted); margin:0; }
.ref-box { background:var(--card); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:13px; margin:16px auto; font-size:16px; max-width:260px; }
.ref-box b { font-size:21px; letter-spacing:1px; }

/* ---- Legal modal -------------------------------------------------------- */
.modal { position:fixed; inset:0; background:rgba(11,31,58,.5); display:none; z-index:60; }
.modal.show { display:block; }
.sheet { position:absolute; left:0; right:0; bottom:0; max-width:var(--maxw); margin:0 auto; height:88dvh; background:var(--bg); border-radius:22px 22px 0 0; display:flex; flex-direction:column; animation:rise .25s ease; }
@keyframes rise { from{transform:translateY(100%)} to{transform:none} }
.sheet .sh-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.sheet .sh-head b { flex:1; font-size:17px; }
.sheet .sh-head .x { width:38px; height:38px; border:none; background:var(--line); border-radius:50%; font-size:20px; cursor:pointer; }
.tabs { display:flex; gap:6px; padding:10px 16px 0; }
.tabs button { flex:1; padding:9px; border:none; background:transparent; border-bottom:3px solid transparent; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer; }
.tabs button.active { color:var(--blue); border-color:var(--blue); }
.legal-body { flex:1; overflow-y:auto; padding:16px 18px 30px; font-size:14px; line-height:1.6; }
.legal-body h3 { font-size:16px; margin:16px 0 6px; }
.legal-body h2 { font-size:18px; margin:4px 0 8px; }
.legal-body p, .legal-body li { color:var(--ink); }
.legal-body .meta { color:var(--muted); font-size:12px; }

/* ---- Helpers ------------------------------------------------------------ */
.demo-flag { display:inline-flex; align-items:center; gap:6px; background:var(--amber); color:#4a2e00; font-size:11px; font-weight:800; letter-spacing:.4px; padding:4px 10px; border-radius:999px; }
.center { text-align:center; }
.spinner { width:22px; height:22px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; opacity:0; transition:all .25s; z-index:70; max-width:90%; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- On-behalf disclaimer ---------------------------------------------- */
.disclaimer { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:8px; font-size:13.5px; }
.disclaimer p { margin:0 0 8px; }
.disclaimer ul { margin:0; padding-left:18px; }
.disclaimer li { margin-bottom:6px; line-height:1.45; }

/* ---- Dashboard (choice screen) — was referenced in app.js but unstyled -- */
.dash-empty { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; font-size:14px; color:var(--muted); margin-bottom:12px; }
.dash-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.dash-totals .dt { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 6px; text-align:center; box-shadow:var(--shadow); }
.dash-totals .dt b { display:block; font-size:22px; font-weight:800; color:var(--navy); line-height:1.1; }
.dash-totals .dt span { font-size:11.5px; color:var(--muted); }
.dash-list { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.dash-row { display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; }
.dash-row .net { font-weight:700; font-size:15px; }
.dash-row .cnt { font-size:13px; color:var(--muted); }

/* ---- Desktop / laptop: render the app as a centered phone frame --------- */
/* On a phone the .app fills the viewport. On a wider screen (laptop) it would
   otherwise stretch into a tall 480px column, so we cap its height and center
   it as a device-style frame on the navy backdrop. */
@media (min-width:540px) {
  body { display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:24px 0; }
  .app { flex:0 0 auto; width:480px; height:min(880px, calc(100dvh - 48px)); border-radius:30px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.04); }
  /* keep the legal sheet & toast anchored to the framed app, not the window */
  .sheet { border-radius:22px 22px 30px 30px; }
}