/* ────────────────────────────────────────────────────────────
   Hypr Mobile — iOS flat skin
   Loaded AFTER style.css; overrides every component in place.
   Look: systemGrouped background, white 12px cards, hairline
   separators, SF Pro type, system blue accents, no 3D shadows.
   The original skin lives untouched in style.css.
   ──────────────────────────────────────────────────────────── */

:root {
  --ios-blue:    #007AFF;
  --ios-green:   #34C759;
  --ios-red:     #FF3B30;
  --ios-orange:  #FF9500;
  --ios-yellow:  #FFCC00;
  --ios-gray-bg: #F2F2F7;
  --ios-label:   #1C1C1E;
  --ios-2:       #3C3C43;      /* secondary label */
  --ios-3:       #8E8E93;      /* tertiary label */
  --ios-sep:     rgba(60, 60, 67, .29);
  --ios-sep-soft:rgba(60, 60, 67, .12);
  --ios-fill:    rgba(120, 120, 128, .12);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
          'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;
  --r-card: 14px;
  /* flatten the candy tokens so any leftover rule reads neutral */
  --cream:   var(--ios-gray-bg);
  --cream-2: #E5E5EA;
  --mint:    #E9F5EF;
  --mint-2:  #D1D1D6;
  --mint-3:  #C7C7CC;
  --teal:    var(--ios-blue);
  --teal-dk: var(--ios-label);
  --ink:     var(--ios-label);
  --ink-soft:var(--ios-3);
  --card:    #fff;
  --orange:  var(--ios-orange);
  --orange-d:#C93400;
  --line:    var(--ios-sep-soft);
  --shadow:  0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: none;
  --r-lg: var(--r-card);
  --r-md: 10px;
}

/* ── page shell ─────────────────────────────────────────────── */
body {
  /* grouped table-view background; the lobby photo is dropped */
  background: var(--ios-gray-bg);
  color: var(--ios-label);
  letter-spacing: -0.01em;
}
.phone { width: min(100%, 440px); padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); }

/* characters are content, not chrome — keep them, calmer */
.char { filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); animation: none !important; }
.cast img { height: 64px; }
.cast img:nth-child(odd), .cast img:nth-child(even) { animation: none; }

.screen { animation: ios-fade .3s ease; }
@keyframes ios-fade { from { opacity: 0; transform: translateY(6px); } }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 17px; }

.tag {
  background: var(--ios-fill);
  color: var(--ios-2);
  border: none;
  font-weight: 600;
}

/* ── brand / title block (iOS large title) ──────────────────── */
.brand { padding: 24px 4px 8px; text-align: left; max-width: none; }
.brand h1 {
  font-size: 33px; font-weight: 700; color: var(--ios-label);
  letter-spacing: -0.6px; text-shadow: none; line-height: 1.1;
}
.brand h1 span { display: inline; font-size: 33px; color: var(--ios-label); }
.lead { color: var(--ios-3); font-weight: 400; font-size: 15px; text-shadow: none; margin-top: 4px; }

/* ── search card ────────────────────────────────────────────── */
.search-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 18px;
  box-shadow: none;
}
.field input {
  font: 400 17px/1 var(--font);
  letter-spacing: 0;
  color: var(--ios-label);
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 84px 15px 44px;
  box-shadow: none;
  transition: box-shadow .15s;
}
.field input::placeholder { color: var(--ios-3); }
.field input:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(0,122,255,.25); }
.field-icon { font-size: 20px; left: 13px; }
.idcheck { font-size: 13px; font-weight: 600; }
.idcheck.ok  { color: var(--ios-green); }
.idcheck.bad { color: var(--ios-red); }

/* ── buttons: filled / plain pills, no 3D edges ─────────────── */
.btn {
  font: 600 17px var(--font);
  border-radius: 12px;
  padding: 13px 20px;
  letter-spacing: -0.4px;
  transition: transform .1s, opacity .1s;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--ios-blue);
  box-shadow: none;
  margin-top: 14px;
}
.btn.primary:active { box-shadow: none; opacity: .8; }
.btn.ghost {
  background: var(--ios-fill);
  color: var(--ios-blue);
  border: none;
  box-shadow: none;
}
.btn.ghost:active { border-color: transparent; }
.btn.ghost.dark { background: rgba(118,118,128,.32); color: #fff; }
.btn:disabled { filter: none; opacity: .4; }

/* step strip */
.step-strip { margin-top: 20px; }
.mini-step { color: var(--ios-3); font-weight: 600; }
.step-ico {
  width: 34px; height: 34px;
  background: #fff;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  font-size: 15px;
}
.step-arrow { color: var(--mint-3); }

/* ── visit head (translucent nav bar) ───────────────────────── */
.visit-head {
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: none;
  border-bottom: 0.5px solid var(--ios-sep);
  border-radius: 0;
  margin: -8px -16px 12px;
  padding: 10px 16px;
  box-shadow: none;
  top: 0;
}
.head-back {
  background: none; box-shadow: none;
  width: auto; height: auto; border-radius: 0;
  font-size: 17px; color: var(--ios-blue); font-weight: 600;
}
.head-avatar-wrap {
  background: none; animation: none; padding: 0;
  border: 0.5px solid var(--ios-sep);
}
.head-avatar { border-radius: 50%; }
.head-name { font-weight: 600; font-size: 16px; }
.head-sub { color: var(--ios-3); }
.lv-badge {
  background: var(--ios-fill); color: var(--ios-2); border: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.meter-bar {
  background: var(--cream-2); border: none; box-shadow: none;
  height: 4px; border-radius: 2px;
}
.meter-fill {
  background: var(--ios-blue);
  border-radius: 2px;
  transition: width .6s cubic-bezier(.3, .8, .3, 1);
}
.meter-steps { font-size: 10px; color: var(--ios-3); }

/* ── banners: tinted rows, no borders ───────────────────────── */
.banner { border: none; border-radius: 10px; box-shadow: none; font-weight: 600; font-size: 14px; }
.banner.active { background: rgba(52,199,89,.15); color: #147A36; }
.banner.done   { background: rgba(255,204,0,.18); color: #7A6000; }

/* ── grouped cards ──────────────────────────────────────────── */
.card {
  background: #fff;
  border: none;
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card h3 { color: var(--ios-3); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }
.card p { font-size: 15px; }
.card.with-char .kv { padding-right: 88px; }

.patient-card { align-items: center; }
.avatar {
  width: 60px; height: 60px; border-radius: 50%;
  border: none; box-shadow: none;
  background: var(--ios-fill);
}
.name-th { font-size: 19px; font-weight: 600; }
.name-en { color: var(--ios-3); font-size: 13px; }
.chips { margin-top: 8px; }
.chip {
  background: rgba(255,59,48,.12); color: var(--ios-red);
  border: none; font-weight: 600; padding: 4px 10px;
}
.chip.none { background: rgba(52,199,89,.15); color: #147A36; }

.kv { gap: 10px 14px; margin-top: 10px; }
.kv dt { color: var(--ios-3); font-size: 12px; }
.kv dd { font-size: 15px; font-weight: 400; color: var(--ios-label); margin-top: 1px; }

.privileges { border-radius: 8px; overflow: hidden; }
.priv {
  background: var(--ios-gray-bg);
  border-radius: 0;
  padding: 9px 12px;
  font-size: 15px;
  border-bottom: 0.5px solid var(--ios-sep-soft);
}
.priv:last-child { border-bottom: none; }
.ptype {
  background: var(--ios-fill); color: var(--ios-2);
  border: none; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.sub { border-top: 0.5px solid var(--ios-sep); }

/* ── journey list (iOS list rows) ───────────────────────────── */
.jrow {
  border-bottom: 0.5px solid var(--ios-sep);
  padding: 11px 2px;
  gap: 12px;
}
.jrow:last-child { border-bottom: none; }
.jrow .dot { border: none; box-shadow: none; width: 10px; height: 10px; }
.jrow.done .dot { background: var(--ios-green); }
.jrow.done { color: var(--ios-label); }
.jrow.now .dot { background: var(--ios-blue); animation: none; }
.jrow.now { color: var(--ios-label); }
.jrow .jname { font-size: 16px; font-weight: 400; }
.jrow .jtime { color: var(--ios-3); font-size: 13px; }
.jrow.wait .dot { background: var(--mint-3); box-shadow: none; }

/* ── menu list ──────────────────────────────────────────────── */
.menu-list { display: flex; flex-direction: column; gap: 0; margin: 0 0 16px; }
.menu-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font);
  background: #fff;
  border: none;
  border-bottom: 0.5px solid var(--ios-sep);
  border-radius: 0;
  padding: 12px 16px;
  box-shadow: none;
  transition: background .15s;
}
.menu-list > .menu-card:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }
.menu-list > .menu-card:last-child  { border-radius: 0 0 var(--r-card) var(--r-card); border-bottom: none; }
.menu-card:hover { transform: none; border-color: transparent; background: var(--ios-gray-bg); }
.menu-card:active { transform: none; background: var(--ios-fill); }
.menu-ico {
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 20px; box-shadow: none;
}
.menu-card.station .menu-ico { background: rgba(0,122,255,.12); }
.menu-card.expense .menu-ico { background: rgba(255,149,0,.12); }
.menu-card.med     .menu-ico { background: rgba(255,45,149,.12); }
.menu-card.qr      .menu-ico { background: rgba(52,199,89,.12); }
.menu-t { font-size: 17px; font-weight: 400; color: var(--ios-label); }
.menu-s { font-size: 13px; color: var(--ios-3); }
.menu-count {
  font-size: 13px; font-weight: 600; color: var(--ios-3);
  background: var(--ios-fill); border: none; padding: 3px 10px;
}
.menu-count.soon { background: var(--ios-fill); color: var(--ios-3); }
.menu-cta {
  font-size: 13px; font-weight: 600; color: #fff; background: var(--ios-blue);
  padding: 4px 12px; border-radius: 999px; box-shadow: none;
}
.chev { color: var(--ios-3); font-size: 17px; font-weight: 400; }

/* ── sub-page titles: nav bar + chevron back ────────────────── */
.page-title { padding: 10px 0 14px; gap: 6px; }
.page-title h2 { font-size: 26px; font-weight: 700; color: var(--ios-label); letter-spacing: -0.4px; }
.page-title p { color: var(--ios-3); font-weight: 400; }
.page-back {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: none;
  box-shadow: none;
  color: var(--ios-blue);
  font: 400 28px/1 var(--font);
  display: grid; place-items: center;
  transition: opacity .15s;
}
.page-back:hover { transform: none; border-color: transparent; }
.page-back:hover  { opacity: .5; }
.page-back:active { transform: none; opacity: .3; }

/* ── stations (grouped list rows) ───────────────────────────── */
.station-row {
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 11px 2px;
  margin: 0;
  border-bottom: 0.5px solid var(--ios-sep);
  transition: none;
}
.card > #station-list > .station-row:first-child { padding-top: 2px; }
.card > #station-list > .station-row:last-child { border-bottom: none; }
.station-row:hover { transform: none; border-color: transparent; }
.st-name { font-weight: 400; font-size: 16px; }
.st-time {
  background: none; border: none; color: var(--ios-3);
  font-size: 13px; padding: 0;
}
.st-badge { border: none; font-size: 12px; padding: 3px 10px; font-weight: 600; }
.st-pass    { background: rgba(52,199,89,.15); color: #147A36; }
.st-create  { background: rgba(255,204,0,.2);  color: #7A6000; }
.st-forward { background: rgba(0,122,255,.12); color: #0060CC; }
.btn.checkin {
  font-size: 15px; font-weight: 600; padding: 5px 14px;
  background: none; color: var(--ios-blue);
  border: none; border-radius: 999px;
  box-shadow: none;
}
.btn.checkin.checked { background: none; border: none; color: var(--ios-green); }
.btn.checkin:hover { background: var(--ios-fill); }
.checkin-status-line { border-bottom: 0.5px solid var(--ios-sep); font-weight: 400; }

/* ── expenses ───────────────────────────────────────────────── */
.expense-summary { gap: 12px; margin-bottom: 16px; }
.sum-card {
  border: none; border-radius: var(--r-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  padding: 14px 16px;
}
.sum-card.pay  { background: #fff; }
.sum-card.priv { background: #fff; }
.sum-label { color: var(--ios-3); font-size: 13px; font-weight: 400; }
.sum-val { font-size: 28px; font-weight: 700; color: var(--ios-label); letter-spacing: -0.5px; }
.sum-card.pay .sum-val  { color: var(--ios-orange); }
.sum-card.priv .sum-val { color: var(--ios-green); }
.sum-note { font-size: 12px; color: var(--ios-3); }

.inv-row {
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--ios-sep);
  border-radius: 0;
  padding: 12px 2px;
  margin: 0;
}
.card > #invoice-list > .inv-row:first-child { padding-top: 2px; }
.card > #invoice-list > .inv-row:last-child { border-bottom: none; }
.inv-row:hover { border-color: transparent; }
.inv-badge { border: none; font-size: 12px; padding: 3px 10px; font-weight: 600; }
.inv-paid     { background: rgba(52,199,89,.15); color: #147A36; }
.inv-waiting  { background: rgba(255,204,0,.2);  color: #7A6000; }
.inv-create   { background: var(--ios-fill);     color: var(--ios-2); }
.inv-cancelled{ background: rgba(255,59,48,.12); color: var(--ios-red); }
.inv-ref { color: var(--ios-3); font-weight: 400; }
.inv-total { color: var(--ios-label); font-weight: 600; font-size: 17px; }
.inv-owe { color: var(--ios-orange); }
.inv-priv { color: var(--ios-green); }
.inv-items { border-top: 0.5px solid var(--ios-sep-soft); }
.btn.qr-btn {
  font-size: 15px; font-weight: 600; padding: 7px 18px;
  background: var(--ios-blue); color: #fff; border: none;
  border-radius: 999px; box-shadow: none;
}
.btn.qr-btn.done { background: none; color: var(--ios-green); box-shadow: none; border: none; }

.empty { color: var(--ios-3); padding: 36px 10px; }
.empty-ico { font-size: 40px; animation: none; opacity: .5; }

.meds-hero {
  background: #fff;
  border: none; border-radius: var(--r-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  padding: 20px 18px 24px;
}

/* ── medications (pills) ────────────────────────────────────── */
.med-row {
  background: transparent;
  border: none;
  border-left: none;
  border-bottom: 0.5px solid var(--ios-sep);
  border-radius: 0;
  padding: 12px 2px;
  margin: 0;
  transition: none;
}
.card > #meds-list > .med-row:first-child { padding-top: 2px; }
.card > #meds-list > .med-row:last-child { border-bottom: none; }
.med-row:hover { border-color: transparent; transform: none; }
.med-name { font-weight: 600; font-size: 16px; }
.med-date { background: none; border: none; color: var(--ios-3); font-size: 13px; padding: 0; }
.med-trade { color: var(--ios-3); }
.med-use {
  background: var(--ios-fill); border: none; border-radius: 8px;
  font-size: 13px; color: var(--ios-2);
}
.med-qty { font-weight: 600; }
.med-unit { color: var(--ios-3); }
.med-packs {
  background: var(--ios-fill); color: var(--ios-2);
  border: none; font-size: 12px;
}
.med-badge { border: none; font-size: 12px; font-weight: 600; }
.med-badge.stat  { background: rgba(255,59,48,.12);  color: var(--ios-red); }
.med-badge.prn   { background: rgba(255,204,0,.2);   color: #7A6000; }
.med-badge.had   { background: rgba(175,82,222,.12); color: #8E36D0; }
.med-badge.manual{ background: rgba(52,199,89,.15);  color: #147A36; }
.med-row.manual { background: transparent; border-left: none; }
.soon-title { font-size: 17px; font-weight: 600; color: var(--ios-label); }
.soon-sub { color: var(--ios-3); }

/* ── overlays ───────────────────────────────────────────────── */
.overlay { background: rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.overlay video { border-radius: 0; }
.guide {
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 20px;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.35);
}
.guide span {
  background: rgba(0,0,0,.65); color: #fff;
  font-weight: 500; font-size: 13px; padding: 6px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.scan-live { font-weight: 600; }
.btn.ghost.dark { background: rgba(120,120,128,.4); color: #fff; }

.qr-box {
  width: min(90vw, 360px);
  background: #fff;
  border: none;
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  animation: ios-pop .25s ease;
}
@keyframes ios-pop { from { opacity: 0; transform: scale(.96); } }
.qr-amount { color: var(--ios-label); font-weight: 700; font-size: 40px; letter-spacing: -1px; }
.qr-label { color: var(--ios-3); }
.qr-img-wrap {
  background: var(--ios-gray-bg); border: none; border-radius: 14px;
  box-shadow: none;
}
.qr-ref { color: var(--ios-3); font-weight: 400; }
.qr-patient { font-weight: 600; }
.qr-status { border-radius: 10px; font-weight: 600; }
.qr-status.loading { background: rgba(255,204,0,.2); color: #7A6000; }
.qr-status.ok      { background: rgba(52,199,89,.15); color: #147A36; }
.qr-status.err     { background: rgba(255,59,48,.12); color: var(--ios-red); }
.btn.qr-pay {
  background: var(--ios-blue); box-shadow: none; border-radius: 12px;
  margin-top: 14px;
}

/* ── toast (iOS banner chip) ────────────────────────────────── */
.toast {
  background: rgba(28,28,30,.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: opacity .3s, transform .3s;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-title { font-weight: 600; }

@media (max-width: 360px) {
  .head-meter { display: none; }
  .menu-t { font-size: 16px; }
  .brand h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen, .qr-box, .toast { animation: none; transition: none; }
}