/* PathoHub Lab Equipment Marketplace — Clinical Teal, same family as the Lab Requirement Studio */
:root{
  --p:#0e5b78; --p2:#1b7fa3; --pc:#c8e6f2; --leaf:#8cc63f; --ok:#1e8e3e; --red:#c5221f; --amber:#b45309;
  --on:#13232f; --onv:#4a5a66; --bg:#f4f8fa; --s1:#fff; --s2:#eef4f7; --s3:#e3edf2; --ov:#dbe5eb;
  --e1:0 1px 2px rgba(19,35,47,.14), 0 1px 3px 1px rgba(19,35,47,.06);
  --e3:0 4px 12px 3px rgba(19,35,47,.08), 0 1px 3px rgba(19,35,47,.14);
  --font:"Google Sans Flex","Google Sans",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
body{ margin:0; font-family:var(--font); color:var(--on); min-height:100vh; overflow-x:hidden;
  background:radial-gradient(60% 40% at 90% 0%, #dff1f8, transparent 70%), radial-gradient(50% 40% at 0% 30%, #eaf5df, transparent 70%), var(--bg); }
body.lock{ overflow:hidden; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; }
a{ color:var(--p); }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid #2aa3c8; outline-offset:2px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-weight:600; font-size:15px; text-decoration:none; transition:background .2s, box-shadow .2s, border-color .2s; }
.btn.fill{ background:var(--p); color:#fff; } .btn.fill:hover{ background:var(--p2); box-shadow:var(--e1); }
.btn.line{ background:var(--s1); color:var(--p); border-color:var(--ov); } .btn.line:hover{ background:#f3f9fc; }
.btn.wa{ background:#25d366; color:#fff; } .btn.wa:hover{ background:#1ebe5a; }
.btn.big{ min-height:52px; padding:12px 26px; font-size:16px; }
.btn.sm{ min-height:36px; padding:7px 14px; font-size:13.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.x{ width:42px; height:42px; border:0; border-radius:50%; background:var(--s2); cursor:pointer; font-size:16px; flex:none; }

/* header */
.top{ position:sticky; top:10px; z-index:40; display:flex; align-items:center; gap:14px; margin:10px 12px 0; padding:8px 12px 8px 16px; border-radius:28px;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); box-shadow:var(--e1); }
.brand img{ height:38px; width:auto; }
.topTitle{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .topTitle b{ font-size:16px; } .topTitle span{ font-size:12.5px; color:var(--onv); }
.topNav{ margin-left:auto; display:flex; gap:4px; } .topNav a{ text-decoration:none; color:var(--on); font-size:14px; font-weight:500; padding:8px 12px; border-radius:999px; } .topNav a:hover{ background:var(--s2); }
.top > .btn{ flex:none; }

main{ max-width:1240px; margin:0 auto; padding:0 16px; }
.hero{ padding:46px 0 26px; }
.kicker{ margin:0 0 8px; color:var(--p); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; }
.hero h1{ margin:0; font-size:clamp(30px, 4.4vw, 50px); line-height:1.1; letter-spacing:-.02em; max-width:880px; } .hero h1 span{ color:var(--p); }
.lead{ font-size:18px; line-height:1.6; color:var(--onv); max-width:760px; margin:16px 0 22px; }
.heroActs{ display:flex; gap:10px; flex-wrap:wrap; }
.trust{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.trust li{ background:var(--s1); border-radius:18px; padding:14px 16px; box-shadow:var(--e1); display:flex; flex-direction:column; gap:4px; }
.trust b{ font-size:15px; } .trust span{ font-size:13.5px; color:var(--onv); line-height:1.45; }

.tabs{ position:sticky; top:84px; z-index:30; display:flex; gap:8px; padding:10px 0; background:linear-gradient(var(--bg) 70%, transparent); }
.tab{ border:1.5px solid var(--ov); background:var(--s1); color:var(--on); border-radius:999px; padding:10px 18px; font-weight:700; cursor:pointer; min-height:46px; }
.tab b{ display:inline-block; min-width:24px; margin-left:4px; padding:0 7px; border-radius:99px; background:var(--s2); color:var(--p); }
.tab.on{ background:var(--p); color:#fff; border-color:var(--p); } .tab.on b{ background:#fff; }

.filters{ display:grid; grid-template-columns:minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap:8px; margin:6px 0 14px; }
.filters input, .filters select{ min-height:46px; border:1px solid var(--ov); border-radius:14px; padding:0 14px; background:var(--s1); color:var(--on); width:100%; }
.panelNote{ color:var(--onv); margin:6px 0 10px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{ border:1px solid var(--ov); background:var(--s1); border-radius:999px; padding:7px 14px; font-size:13.5px; cursor:pointer; color:var(--on); min-height:38px; }
.chip.on{ background:var(--p); color:#fff; border-color:var(--p); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:16px; }
.card{ background:var(--s1); border-radius:22px; box-shadow:var(--e1); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.card:hover{ box-shadow:var(--e3); transform:translateY(-2px); }
.ph{ position:relative; height:210px; background:#fff; border-bottom:1px solid var(--s3); cursor:pointer; border:0; padding:0; width:100%; display:block; }
.ph img{ position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; }
.ph .noimg{ position:absolute; inset:0; display:grid; place-items:center; color:#9aabb0; font-size:34px; }
.badge{ position:absolute; top:10px; left:10px; z-index:1; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; background:#e6f4ea; color:#1e6b34; }
.badge.Good{ background:#e0f2fe; color:#075985; } .badge.Fair{ background:#fff7e6; color:var(--amber); } .badge.Needs{ background:#fdecea; color:var(--red); }
.cb{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.cb small{ color:var(--onv); font-size:12.5px; } .cb h3{ margin:2px 0 0; font-size:18px; line-height:1.25; }
.meta{ color:var(--onv); font-size:13.5px; } .price{ font-size:18px; font-weight:700; color:var(--p); margin-top:4px; } .price em{ font-style:normal; font-size:12.5px; font-weight:500; color:var(--onv); }
.cb .acts{ display:flex; gap:8px; margin-top:auto; padding-top:10px; flex-wrap:wrap; } .cb .acts .btn{ flex:1 1 auto; }
.card.want{ background:linear-gradient(160deg, #eef7fb, #f3faea); border:1.5px dashed #9fc9da; box-shadow:none; justify-content:center; min-height:200px; }
.sub{ color:var(--p); font-size:13.5px; font-weight:600; } .cb ul{ margin:4px 0 0; padding-left:18px; font-size:13px; color:#344256; }

.empty{ grid-column:1 / -1; text-align:center; padding:40px 16px; color:var(--onv); background:var(--s1); border-radius:22px; box-shadow:var(--e1); }
.empty b{ display:block; color:var(--on); font-size:19px; margin-bottom:6px; } .empty .btn{ margin:14px 6px 0; }
.more{ text-align:center; margin:16px 0; }

.sec{ margin:56px 0; } .sec h2{ font-size:clamp(24px, 3vw, 34px); margin:0 0 6px; letter-spacing:-.01em; } .secSub{ color:var(--onv); margin:0 0 18px; }
.svcGrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.svc{ background:var(--s1); border-radius:20px; padding:18px; box-shadow:var(--e1); display:flex; flex-direction:column; gap:6px; }
.svc i{ font-style:normal; font-size:28px; } .svc b{ font-size:16px; } .svc span{ color:var(--onv); font-size:14px; line-height:1.5; }
.center{ text-align:center; margin-top:18px; }
.howGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .how{ background:var(--s1); border-radius:20px; padding:18px 20px; box-shadow:var(--e1); }
.how h3{ margin:0 0 8px; } .how ol{ margin:0; padding-left:20px; line-height:1.8; color:#344256; }
.terms ul{ background:var(--s1); border-radius:20px; padding:18px 22px 18px 38px; box-shadow:var(--e1); line-height:1.7; color:#344256; font-size:14.5px; margin:10px 0 0; }

.manage{ margin:22px 0 0; background:#fff7e6; border:1.5px solid #f5d48a; border-radius:22px; padding:18px 20px; }
.manage h2{ margin:0 0 6px; font-size:20px; } .manage .acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.foot{ text-align:center; padding:34px 16px 90px; color:var(--onv); font-size:14px; } .foot img{ height:40px; margin:0 auto 10px; } .foot .small{ font-size:12.5px; }

/* dialog */
.dlg{ position:fixed; inset:0; z-index:100; background:rgba(10,30,40,.5); display:flex; align-items:flex-start; justify-content:center; padding:24px 12px; overflow:auto; }
.dlgBox{ background:var(--s1); border-radius:24px; width:100%; max-width:860px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.dlgHead{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--s1); border-bottom:1px solid var(--s3); border-radius:24px 24px 0 0; }
.dlgHead b{ flex:1; font-size:18px; } .dlgBody{ padding:16px 18px 22px; }
.gal{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
.galMain{ position:relative; height:min(52vh, 420px); background:#fff; border:1px solid var(--s3); border-radius:18px; }
.galMain img{ position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; }
.thumbs{ display:flex; gap:6px; flex-wrap:wrap; } .thumbs button{ position:relative; width:72px; height:72px; border:1px solid var(--ov); border-radius:12px; background:#fff; cursor:pointer; padding:0; }
.thumbs button img{ position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); object-fit:contain; } .thumbs button.on{ border:2px solid var(--p); }
.facts{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; } .facts th, .facts td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--s3); vertical-align:top; }
.facts th{ width:36%; color:var(--onv); font-weight:600; background:#f8fbfc; }
.note{ background:var(--s2); border-radius:14px; padding:12px 14px; font-size:13.5px; color:#344256; line-height:1.55; margin:12px 0; }
form.f{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
form.f label{ display:block; font-size:13.5px; font-weight:600; color:var(--onv); }
form.f label b{ color:var(--red); }
form.f input, form.f select, form.f textarea{ display:block; margin-top:4px; border:1px solid var(--ov); border-radius:12px; padding:10px 12px; min-height:46px; color:var(--on); background:#fff; font-weight:400; width:100%; }
form.f .w{ grid-column:1 / -1; } form.f h3{ grid-column:1 / -1; margin:10px 0 0; font-size:16px; color:var(--p); }
.checks{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.checks label{ flex-direction:row !important; align-items:center; gap:6px !important; border:1px solid var(--ov); border-radius:999px; padding:6px 12px; font-weight:500 !important; color:var(--on) !important; cursor:pointer; }
.checks input{ min-height:0 !important; width:auto !important; }
.agree{ grid-column:1 / -1; display:flex !important; flex-direction:row !important; align-items:flex-start; gap:8px !important; font-weight:500 !important; color:var(--on) !important; line-height:1.45; }
.agree input{ width:20px !important; min-height:0 !important; height:20px; margin-top:2px; flex:none; accent-color:var(--p); }
.pics{ grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pic{ position:relative; width:86px; height:86px; border-radius:12px; overflow:hidden; border:1px solid var(--ov); background:#fff; }
.pic img{ width:100%; height:100%; object-fit:cover; } .pic button{ position:absolute; top:3px; right:3px; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:12px; }
.addPic{ width:86px; height:86px; border:2px dashed var(--ov); border-radius:12px; display:grid; place-items:center; text-align:center; font-size:12px; color:var(--onv); cursor:pointer; background:#fff; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.msg{ grid-column:1 / -1; margin:0; color:var(--red); font-weight:600; min-height:1em; }
.done{ text-align:center; padding:26px 10px; } .done .big{ font-size:48px; } .done h3{ margin:8px 0; font-size:22px; } .done p{ color:var(--onv); line-height:1.6; }
.link{ word-break:break-all; background:var(--s2); border-radius:12px; padding:10px 12px; font-size:13.5px; margin:10px 0; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200; background:#13232f; color:#fff; padding:12px 18px; border-radius:14px; font-size:14.5px; display:none; max-width:90vw; }

@media (max-width:980px){ .topNav{ display:none; } .trust{ grid-template-columns:1fr 1fr; } .svcGrid{ grid-template-columns:1fr 1fr; } .filters{ grid-template-columns:1fr 1fr; } .filters input{ grid-column:1 / -1; } .top > .btn{ margin-left:auto; } }
@media (max-width:640px){
  .top{ margin:8px; padding:6px 8px 6px 12px; gap:10px; } .topTitle span{ display:none; } .brand img{ height:32px; } .top > .btn{ padding:8px 14px; font-size:13.5px; min-height:40px; }
  .hero{ padding:26px 0 12px; } .lead{ font-size:16px; } .trust, .svcGrid, .howGrid{ grid-template-columns:1fr; } .tabs{ top:70px; } .tab{ padding:8px 14px; font-size:14px; }
  form.f{ grid-template-columns:1fr; } .dlg{ padding:0; } .dlgBox{ border-radius:0; min-height:100vh; } .dlgHead{ border-radius:0; }
}

/* language switch · Gujarati font */
.lang{ flex:none; border:1.5px solid var(--ov); background:var(--s1); color:var(--p); border-radius:999px; padding:8px 14px; min-height:40px; font-weight:700; cursor:pointer; font-family:"Noto Sans Gujarati", var(--font); }
.lang:hover{ background:#f3f9fc; }
body.gu{ font-family:"Noto Sans Gujarati", var(--font); }
body.gu .hero h1{ line-height:1.25; } body.gu .lead, body.gu .trust span, body.gu .svc span{ line-height:1.7; }

/* the engineer inside every form */
.helper{ position:sticky; top:-16px; z-index:3; display:flex; align-items:center; gap:10px; margin:-16px -18px 14px; padding:12px 18px; background:linear-gradient(120deg, #eef7fb, #f3faea); border-bottom:1px solid var(--s3); }
.helper img{ width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:top; background:#fff; box-shadow:var(--e1); flex:none; }
.helper .bubble{ flex:1; background:#fff; border-radius:4px 16px 16px 16px; padding:8px 12px; box-shadow:var(--e1); }
.helper small{ display:block; color:var(--p); font-weight:700; font-size:11.5px; } .helper p{ margin:2px 0 0; font-size:14px; line-height:1.5; }
.helper .hear{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#fff; box-shadow:var(--e1); cursor:pointer; font-size:17px; }
.helper.pop .bubble, .guide.pop .gBubble{ animation:hlpPop .35s cubic-bezier(.34,1.3,.64,1); }
@keyframes hlpPop{ from{ transform:scale(.94); opacity:.4; } to{ transform:none; opacity:1; } }

/* the engineer on the whole page */
.guide{ position:fixed; right:14px; bottom:12px; z-index:60; display:flex; align-items:flex-end; gap:8px; pointer-events:none; }
.guide > *{ pointer-events:auto; }
.gMan{ border:0; background:none; padding:0; cursor:pointer; filter:drop-shadow(0 8px 14px rgba(19,35,47,.25)); animation:gBob 3.2s ease-in-out infinite; }
.gMan img{ height:126px; width:auto; }
@keyframes gBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.gBubble{ position:relative; display:none; width:min(320px, calc(100vw - 110px)); margin-bottom:58px; background:#fff; border-radius:18px 18px 4px 18px; padding:14px 14px 12px; box-shadow:var(--e3); }
.guide.open .gBubble{ display:block; }
.gBubble p{ margin:0 22px 10px 0; font-size:14.5px; line-height:1.5; }
.gX{ position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; border-radius:50%; background:var(--s2); cursor:pointer; font-size:12px; }
.gSay{ position:absolute; bottom:8px; right:8px; width:32px; height:32px; border:0; border-radius:50%; background:var(--s2); cursor:pointer; }
.gActs{ display:flex; flex-direction:column; gap:6px; margin-right:34px; }
.gActs button, .gActs a{ text-align:left; border:1px solid var(--ov); background:var(--s1); color:var(--p); border-radius:12px; padding:8px 12px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; }
.gActs button:hover, .gActs a:hover{ background:#f3f9fc; }
body.lock .guide{ display:none; }
@media (max-width:640px){
  .lang{ padding:6px 10px; min-height:36px; font-size:13px; }
  .gMan img{ height:92px; } .gBubble{ margin-bottom:42px; } .foot{ padding-bottom:120px; }
  .helper{ gap:8px; padding:10px 14px; margin:-16px -18px 12px; } .helper img{ width:46px; height:46px; } .helper p{ font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce){ .gMan, .helper.pop .bubble, .guide.pop .gBubble{ animation:none; } }