/* CareNow hi-fi mockups — brand estimated from the 2026 website prototype.
   Every value here is an approximation pending the real Figma variables. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --wine-900:#5C1730; --wine-700:#8A2149; --wine-500:#A63A63; --wine-300:#C9739A;
  --pink-300:#E8B4C8; --pink-200:#F2C4D8; --pink-100:#FADCE7; --pink-50:#FDF2F6;
  --cream:#F7E3A1;  --cream-soft:#FBF1CE;
  --sage:#C3D5B4;   --sage-soft:#E4EEDC;
  --ink:#2B1620; --mut:#857078; --faint:#A99098;
  --line:#F0DCE5; --line2:#F7EEF2; --paper:#fff;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
html{ height:100%; }
body{ font-family:var(--sans); color:var(--ink); background:#F7F2F4;
  -webkit-font-smoothing:antialiased; height:100dvh; overflow:hidden;
  overscroll-behavior:none; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }

/* The app fills the viewport. On a wide screen it settles into a single
   column, the way a responsive webapp does -- no device frame. */
.app{ height:100dvh; max-width:480px; margin:0 auto; background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden; }
.scroll{ position:relative; flex-grow:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain; scrollbar-width:none; }
.scroll::-webkit-scrollbar{ width:0; }
.pad{ padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:16px; }

/* top bar */
.top{ padding:calc(14px + env(safe-area-inset-top)) 16px 10px; display:flex; align-items:center; gap:9px; flex-shrink:0;
  background:var(--paper); border-bottom:1px solid var(--line2); }
.mark{ width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 50% 50%, var(--pink-200) 0 26%, var(--wine-700) 27% 100%); }
.srch{ flex-grow:1; height:38px; border-radius:19px; background:var(--pink-50);
  border:1px solid var(--line); display:flex; align-items:center; gap:9px; padding:0 14px;
  color:var(--faint); font-size:12.5px; }
.srch svg{ flex-shrink:0; }
.tbtn{ width:38px; height:38px; border-radius:12px; background:var(--pink-50); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
  color:var(--wine-700); }
.tbtn.dot::after{ content:''; position:absolute; top:5px; right:5px; width:8px; height:8px;
  border-radius:50%; background:var(--wine-700); border:1.5px solid #fff; }
.top.bk{ gap:11px; }
.bkb{ width:36px; height:36px; border-radius:50%; background:var(--pink-50);
  display:flex; align-items:center; justify-content:center; color:var(--wine-700); flex-shrink:0; }
.ttl{ font-weight:700; font-size:15px; }
.sub{ font-size:11.5px; color:var(--mut); }

/* tab bar */
.tabs{ display:flex; height:calc(66px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); background:var(--paper); border-top:1px solid var(--line2); flex-shrink:0; padding-top:7px; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; color:var(--faint); font-weight:500; }
.tab i{ width:22px; height:22px; border-radius:7px; background:var(--pink-100); display:block; }
.tab.on{ color:var(--wine-700); font-weight:700; }
.tab.on i{ background:var(--wine-700); }
.tab i.ava{ border-radius:50%; background:var(--wine-500); color:#fff; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }

/* type */
.h1{ font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:500; color:var(--wine-900); }
.h2{ font-size:15.5px; font-weight:700; line-height:1.3; }
.h3{ font-size:13.5px; font-weight:700; }
.lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.mut{ font-size:12.5px; color:var(--mut); line-height:1.45; }
.sm{ font-size:11.5px; color:var(--mut); }
.num{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; }

/* layout prims */
.row{ display:flex; align-items:center; gap:10px; }
.row.sb{ justify-content:space-between; }
.col{ display:flex; flex-direction:column; gap:5px; }
.grow{ flex-grow:1; }
.sec{ display:flex; flex-direction:column; gap:11px; }
.sech{ display:flex; align-items:baseline; justify-content:space-between; }
.more{ font-size:12px; font-weight:600; color:var(--wine-700); }
.hs{ display:flex; gap:11px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px 4px; }
.hs::-webkit-scrollbar{ height:0; }
.hs > *{ flex:0 0 auto; }

/* cards */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:14px;
  display:flex; flex-direction:column; gap:10px; }
.card.flat{ border:none; background:var(--pink-50); }
.card.dash{ border-style:dashed; border-color:var(--pink-300); background:#fff; }
.tile{ width:158px; border:1px solid var(--line); border-radius:16px; padding:11px; background:#fff;
  display:flex; flex-direction:column; gap:8px; }
.tile.w{ width:236px; } .tile.s{ width:120px; } .tile.r{ width:132px; padding:0; overflow:hidden; border:none; }

/* brand bits */
.hero{ border-radius:22px; background:var(--wine-900); color:#fff; padding:20px; position:relative;
  overflow:hidden; display:flex; flex-direction:column; gap:13px; }
.hero .blob{ position:absolute; border-radius:48% 52% 40% 60%; background:rgba(242,196,216,.15); }
.chip{ padding:8px 13px; border-radius:20px; border:1px solid var(--line); background:#fff;
  font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:7px; }
.chip.on{ background:var(--wine-700); color:#fff; border-color:var(--wine-700); font-weight:600; }
.chip i{ width:20px; height:20px; border-radius:50%; display:block; background:var(--pink-200); }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.tag{ font-size:10.5px; padding:3px 9px; border-radius:20px; background:var(--pink-50); color:var(--wine-700); font-weight:600; }
.tag.g{ background:var(--sage-soft); color:#4C6B3B; }
.tag.c{ background:var(--cream-soft); color:#7A5B12; }
.btn{ height:48px; border-radius:26px; background:var(--wine-700); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.btn.ghost{ background:#fff; color:var(--wine-700); border:1.5px solid var(--pink-300); }
.btn.on-dark{ background:#fff; color:var(--wine-700); }
.btn.s{ height:38px; border-radius:20px; font-size:13px; padding:0 17px; }
.fld{ height:48px; border-radius:14px; border:1px solid var(--line); background:var(--pink-50);
  display:flex; align-items:center; padding:0 14px; font-size:14px; color:var(--faint); }
.bar{ height:7px; border-radius:5px; background:rgba(255,255,255,.22); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--cream); border-radius:5px; }
.bar.lt{ background:var(--pink-100); } .bar.lt > i{ background:var(--wine-700); }
.sep{ height:1px; background:var(--line2); }
.img{ border-radius:12px; background:linear-gradient(135deg,var(--pink-100),var(--pink-200)); }
.img.g{ background:linear-gradient(135deg,var(--sage-soft),var(--sage)); }
.img.c{ background:linear-gradient(135deg,var(--cream-soft),var(--cream)); }
.img.d{ background:linear-gradient(150deg,var(--wine-500),var(--wine-900)); }
.ava{ border-radius:50%; background:var(--pink-100); color:var(--wine-700); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:12px; }

/* Sticky limit strip.
   Full-bleed: it sits outside .pad so it spans the app edge to edge.
   Zero layout cost: the negative margin lets content flow underneath.
   Hidden until the hero card leaves the top of the scroller (see beranda's
   IntersectionObserver), then fades in. */
.limitpin{ position:sticky; top:0; z-index:6; margin-bottom:-58px;
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .24s ease, transform .24s ease; }
.limitpin.show{ opacity:1; transform:none; pointer-events:auto; }
.limitpin .inner{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line); padding:11px 16px;
  display:flex; align-items:center; gap:11px; }
.limitpin .n{ font-family:var(--serif); font-weight:600; font-size:15.5px; white-space:nowrap; }
/* content dissolves rather than cutting off at the edge */
.limitpin::after{ content:''; display:block; height:18px;
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0)); }

/* show-to-cashier */
.kasir{ background:var(--wine-900); color:#fff; min-height:100%; }
.codebox{ background:rgba(255,255,255,.1); border:1px dashed rgba(242,196,216,.5); border-radius:16px;
  padding:16px; display:flex; flex-direction:column; gap:7px; align-items:center; }
.code{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:31px; font-weight:700;
  letter-spacing:.16em; color:var(--cream); }
.qr{ width:150px; height:150px; border-radius:14px; background:#fff; padding:11px; }
.qr div{ width:100%; height:100%; border-radius:5px;
  background:
    repeating-linear-gradient(90deg,var(--wine-900) 0 8px,transparent 8px 16px),
    repeating-linear-gradient(0deg,var(--wine-900) 0 8px,transparent 8px 16px),
    #fff; }

/* timeline */
.tl{ display:flex; flex-direction:column; }
.tlrow{ display:flex; gap:13px; }
.rail{ width:56px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.rail .ln{ width:2px; background:var(--line); flex-grow:1; min-height:12px; }
.rail .ln.d{ background:repeating-linear-gradient(to bottom,var(--pink-300) 0 4px,transparent 4px 9px); }
.pair{ position:relative; width:54px; height:38px; flex-shrink:0; }
.pair > div{ position:absolute; width:36px; height:36px; border-radius:50%; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.pair .a{ left:0; background:var(--wine-700); color:#fff; }
.pair .b{ right:0; background:var(--pink-200); color:var(--wine-900); }
.tlb{ flex-grow:1; padding-bottom:18px; min-width:0; }
.tld{ font-size:11px; color:var(--mut); font-weight:700; margin-bottom:6px; }

/* bills */
.due{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.dueh{ background:var(--pink-50); padding:11px 14px; display:flex; justify-content:space-between; align-items:center; }
.duer{ padding:12px 14px; display:flex; align-items:center; gap:11px; }
.duer + .duer{ border-top:1px solid var(--line2); }
.dt{ width:9px; height:9px; border-radius:50%; border:2px solid var(--wine-700); flex-shrink:0; }
.dt.f{ background:var(--wine-700); border-color:var(--wine-700); }

.feedend{ text-align:center; font-size:11.5px; color:var(--faint); padding:10px 0 4px; }
.spin{ width:22px; height:22px; border-radius:50%; border:2.5px solid var(--pink-200);
  border-top-color:var(--wine-700); margin:0 auto; }

/* ============ v0.6: search, treatments, map ============ */

/* real input, so a real phone raises a real keyboard */
.searchwrap{ position:sticky; top:0; z-index:7; background:var(--paper);
  padding:10px 16px 12px; border-bottom:1px solid var(--line2); margin:0 -16px; }
.sfield{ display:flex; align-items:center; gap:9px; height:48px; border-radius:24px;
  background:var(--pink-50); border:1.5px solid var(--line); padding:0 8px 0 15px; }
.sfield.focus{ border-color:var(--wine-700); background:#fff; }
.sfield input{ flex-grow:1; border:0; background:transparent; outline:0; min-width:0;
  font-family:var(--sans); font-size:14.5px; color:var(--ink); }
.sfield input::placeholder{ color:var(--faint); }
.sfield .clear{ width:26px; height:26px; border-radius:50%; background:var(--pink-200);
  color:var(--wine-900); display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; }
/* a chosen treatment sits inside the field, clearable but not editable */
.inpill{ display:flex; align-items:center; gap:7px; background:var(--wine-700); color:#fff;
  border-radius:16px; padding:5px 6px 5px 12px; font-size:13px; font-weight:600; flex-shrink:0; }
.inpill .x{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center; font-size:12px; }

/* recent searches — mixed pills, one height, wrapping */
.rp{ display:flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:18px;
  background:var(--pink-50); border:1px solid var(--line); font-size:12.5px; white-space:nowrap; }
.rp .lg{ width:22px; height:22px; border-radius:6px; flex-shrink:0; }
.rp .lg.rnd{ border-radius:50%; }

/* full-row clinic card */
.frow{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line2); }
.frow:last-child{ border-bottom:0; }
.frow .lg{ width:52px; height:52px; border-radius:13px; flex-shrink:0; }
.frow .meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px; color:var(--mut); }
.frow .meta b{ color:var(--ink); font-weight:600; }
.dotsep{ width:3px; height:3px; border-radius:50%; background:var(--faint); flex-shrink:0; }
.prc{ text-align:right; flex-shrink:0; }
.prc .r{ font-size:13.5px; font-weight:700; color:var(--wine-700); white-space:nowrap; }
.prc .c{ font-size:11px; color:var(--mut); white-space:nowrap; }
.spons{ font-size:9.5px; padding:2px 7px; border-radius:10px; background:var(--cream-soft);
  color:#7A5B12; font-weight:700; letter-spacing:.02em; }

/* compact treatment card, used in results */
.tcard{ border:1px solid var(--line); border-radius:14px; padding:11px 12px;
  display:flex; flex-direction:column; gap:4px; }
.tcard .p{ font-size:13.5px; font-weight:700; color:var(--wine-700); }

/* floating Daftar / Peta switch — rides above the keyboard */
.switch{ position:fixed; left:50%; transform:translateX(-50%); z-index:20;
  /* the app column is centred, so viewport-centring lands correctly */
  bottom:calc(22px + env(safe-area-inset-bottom));
  background:var(--wine-900); border-radius:24px; padding:4px; display:flex; gap:2px;
  box-shadow:0 10px 26px -8px rgba(60,20,38,.55); }
.switch a{ padding:9px 20px; border-radius:20px; font-size:13px; font-weight:600; color:rgba(255,255,255,.72); }
.switch a.on{ background:#fff; color:var(--wine-900); }
.switch.abovetabs{ bottom:calc(84px + env(safe-area-inset-bottom)); }
.kbarea{ height:250px; border-radius:14px 14px 0 0; background:var(--line2);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--faint);
  margin:8px -16px calc(-18px - env(safe-area-inset-bottom)); }

/* map */
.mapbg{ position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(92,23,48,.055) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(92,23,48,.055) 0 1px,transparent 1px 46px),
    linear-gradient(160deg,#EFEAE4,#E7EDE4 60%,#EDE6EA); }
.mapbg::before{ content:''; position:absolute; left:-10%; top:34%; width:130%; height:56px;
  background:rgba(150,180,200,.4); transform:rotate(-7deg); }
.mapbg::after{ content:''; position:absolute; left:26%; top:-10%; width:44px; height:130%;
  background:rgba(255,255,255,.55); transform:rotate(9deg); }
.pin{ position:absolute; transform:translate(-50%,-100%); background:#fff; border-radius:16px;
  padding:6px 11px; font-size:12px; font-weight:700; color:var(--wine-900); white-space:nowrap;
  box-shadow:0 5px 14px -4px rgba(60,20,38,.4); border:1.5px solid var(--wine-700); }
.pin.sel{ background:var(--wine-700); color:#fff; }
.pin::after{ content:''; position:absolute; left:50%; bottom:-6px; width:9px; height:9px;
  background:inherit; border-right:1.5px solid var(--wine-700); border-bottom:1.5px solid var(--wine-700);
  transform:translateX(-50%) rotate(45deg); }
.mapcard{ position:absolute; left:12px; right:12px; bottom:calc(140px + env(safe-area-inset-bottom));
  background:#fff; border-radius:18px; padding:13px; box-shadow:0 12px 30px -10px rgba(60,20,38,.4); }

/* expandable longer-term options */
details.more-terms{ }
details.more-terms > summary{ list-style:none; cursor:pointer; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--wine-700); padding:8px 0 2px;
  display:flex; align-items:center; justify-content:center; gap:6px; }
details.more-terms > summary::-webkit-details-marker{ display:none; }
details.more-terms > summary .cv{ transition:transform .2s ease; font-size:11px; }
details.more-terms[open] > summary .cv{ transform:rotate(180deg); }
details.more-terms .terms2{ display:flex; gap:9px; align-items:stretch; padding-top:9px; }

/* combined clinic card: shell + tags from the card style, meta + price from the row style */
.fcard{ border:1px solid var(--line); border-radius:18px; padding:13px;
  display:flex; flex-direction:column; gap:11px; background:#fff; }
.fcard .hd{ display:flex; gap:12px; }
.fcard .lg{ width:56px; height:56px; border-radius:14px; flex-shrink:0; }
.fcard .meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11.5px; color:var(--mut); }
.fcard .meta b{ color:var(--ink); font-weight:600; }
.fcard .ft{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.fcard .ft .lab{ font-size:12.5px; color:var(--mut); }

/* sticky action bar on detail screens — outside the scroller, so always present */
.actionbar{ flex-shrink:0; background:var(--paper); border-top:1px solid var(--line2);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:9px; }

/* keep the floating switch from covering the end of the list */
body:has(.switch) .pad{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

/* saved-draft dot on a tab glyph */
.tab i{ position:relative; }
.tab.dot i::after{ content:''; position:absolute; top:-3px; right:-5px; width:10px; height:10px;
  border-radius:50%; background:var(--wine-700); border:2px solid #fff; }

/* icon tile for account rows */
.racon{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; background:var(--pink-50); }
.racon svg{ width:19px; height:19px; }