:root{
  --cyan:#0e7c86; --cyan-dark:#0a5a62; --amber:#f2a53c;
  --text:#1a2b2e; --text-dim:#5c6f72; --bg:#f5faf9; --surface:#ffffff; --border:#dde8e7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Tajawal',Tahoma,sans-serif;line-height:1.6}
h1,h2,h3{font-family:'Readex Pro',sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}

.back-pill{position:fixed;inset-block-start:14px;inset-inline-start:14px;z-index:120;background:var(--surface);color:var(--cyan-dark);border:1px solid var(--border);padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ---- Slim topstrip (not a hero) ---- */
.topstrip{position:sticky;inset-block-start:0;z-index:90;background:var(--surface);border-block-end:1px solid var(--border)}
.topstrip__inner{max-width:1280px;margin-inline:auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--cyan-dark);flex-shrink:0}
.brand__mark{width:32px;height:32px;border-radius:9px;background:var(--cyan);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.brand__name{font-family:'Readex Pro',sans-serif;font-size:15px}
.topstrip__nav{display:flex;gap:20px;flex:1;font-size:14px;font-weight:600;color:var(--text-dim)}
.topstrip__nav a:hover{color:var(--cyan)}
.btn-book-visit{background:var(--amber);color:#2b1a00;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:10px;flex-shrink:0}

/* ---- Catalog hero: search IS the hero ---- */
.catalog-hero{background:linear-gradient(180deg,#eaf6f5,var(--bg));padding:36px 24px 24px}
.catalog-hero__inner{max-width:1000px;margin-inline:auto;text-align:center}
.catalog-hero h1{font-size:clamp(24px,4vw,34px);margin:0 0 10px;color:var(--cyan-dark)}
.catalog-hero p{color:var(--text-dim);margin:0 0 22px;font-size:14.5px}
.search-row{margin-block-end:16px}
#test-search{width:100%;max-width:520px;padding:14px 18px;border-radius:12px;border:1px solid var(--border);font-size:15px;background:var(--surface)}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600}
.chip.is-active{background:var(--cyan);border-color:var(--cyan);color:#fff}

.content{max-width:1280px;margin-inline:auto;padding:28px 24px 0}

/* ---- Tests grid ---- */
.tests-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-block-end:20px}
.test-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
.test-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.test-card__name{font-weight:700;font-size:15.5px;margin:0}
.test-card__price{font-family:'Readex Pro',sans-serif;font-weight:700;color:var(--cyan-dark);white-space:nowrap}
.test-card__note{font-size:12.5px;color:var(--text-dim);flex:1}
.test-card__meta{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.badge--fasting{background:rgba(242,165,60,.18);color:#a5650a}
.badge--turnaround{background:rgba(14,124,134,.1);color:var(--cyan-dark)}
.test-card__add{margin-block-start:4px;background:var(--cyan);color:#fff;font-weight:700;font-size:13px;padding:9px;border-radius:9px}
.test-card__add.is-added{background:var(--amber);color:#2b1a00}
.empty-state{text-align:center;color:var(--text-dim);padding:30px 0}

/* ---- Packages ---- */
.packages-section{padding:36px 0}
.packages-section h2,.branches-section h2{font-size:22px;margin:0 0 4px;color:var(--cyan-dark)}
.section-lead{color:var(--text-dim);margin:0 0 18px;font-size:13.5px}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.package-card{background:var(--surface);border:2px solid var(--cyan);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.package-card__prices{display:flex;align-items:baseline;gap:8px}
.package-card__old{text-decoration:line-through;color:var(--text-dim);font-size:13px}
.package-card__price{font-family:'Readex Pro',sans-serif;font-weight:700;font-size:20px;color:var(--cyan-dark)}
.package-card__includes{font-size:12.5px;color:var(--text-dim);margin:6px 0 0;padding-inline-start:18px}
.package-card__book{margin-block-start:6px;background:var(--cyan-dark);color:#fff;font-weight:700;font-size:13px;padding:10px;border-radius:9px}

/* ---- Branches ---- */
.branches-section{padding:8px 0 40px}
.branches-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:stretch}
.branches-layout__img{width:100%;height:100%;object-fit:cover;border-radius:16px;min-height:220px}
.branches-grid{display:flex;flex-direction:column;gap:12px;justify-content:center}
.branch-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px}
.branch-card h4{margin:0 0 4px;font-size:14.5px;color:var(--cyan-dark)}
.branch-card p{margin:2px 0;font-size:12.5px;color:var(--text-dim)}

/* ---- Footer ---- */
.site-footer{background:var(--cyan-dark);color:#dff2f0;margin-block-start:20px}
.site-footer__inner{max-width:1280px;margin-inline:auto;padding:34px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.footer-col h4{margin:0 0 8px;font-size:14px;color:var(--amber)}
.footer-col p{margin:4px 0;font-size:12.5px;color:#bfe0dc}
.brand--footer{color:#fff;margin-block-end:8px}
.footer-bottom{text-align:center;padding:14px;font-size:11.5px;color:#8fc4bf;border-block-start:1px solid rgba(255,255,255,.1)}

/* ---- WA FAB ---- */
.wa-fab{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:95;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}

/* ---- Booking wizard modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,30,30,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-backdrop.is-open{display:flex}
.wizard-modal{background:var(--surface);border-radius:18px;max-width:520px;width:100%;max-height:92vh;overflow:auto}
.wizard-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 10px}
.wizard-head h3{margin:0;font-size:17px;color:var(--cyan-dark)}
.wizard-close{font-size:18px;color:var(--text-dim)}
.wizard-steps{display:flex;gap:6px;padding:0 22px 14px}
.wizard-step-dot{width:26px;height:5px;border-radius:99px;background:var(--border)}
.wizard-step-dot.is-active,.wizard-step-dot.is-done{background:var(--cyan)}
.wizard-body{padding:0 22px 10px;min-height:160px}
.wizard-body label{display:block;font-size:13px;font-weight:600;margin:12px 0 6px}
.wizard-body input,.wizard-body select{width:100%;padding:11px 14px;border-radius:9px;border:1px solid var(--border);font-size:14px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-block-start:8px}
.slot-btn{border:1px solid var(--border);padding:10px;border-radius:9px;font-size:12.5px;background:var(--surface)}
.slot-btn.is-selected{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.selected-tests-list{list-style:none;padding:0;margin:0;font-size:13px}
.selected-tests-list li{display:flex;justify-content:space-between;padding:6px 0;border-block-end:1px solid var(--border)}
.wizard-foot{display:flex;justify-content:space-between;padding:14px 22px 22px}
.btn-primary{background:var(--cyan);color:#fff;font-weight:700;padding:11px 22px;border-radius:10px;font-size:14px}
.btn-secondary{background:var(--bg);color:var(--text);padding:11px 18px;border-radius:10px;font-size:14px;border:1px solid var(--border)}
.confirm-box{text-align:center;padding:10px 0}
.confirm-box__code{font-family:'Readex Pro',sans-serif;font-size:22px;font-weight:700;color:var(--cyan-dark);background:rgba(14,124,134,.08);padding:12px;border-radius:10px;margin:14px 0}

/* ---- Responsive ---- */
@media (max-width:900px){
  .branches-layout{grid-template-columns:1fr}
  .branches-layout__img{min-height:180px}
}
@media (max-width:768px){
  .topstrip__inner{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .topstrip__nav{order:3;flex-basis:100%;gap:14px;font-size:12.5px;overflow-x:auto;white-space:nowrap}
  .btn-book-visit{order:2;margin-inline-start:auto}
}
@media (max-width:420px){
  .btn-book-visit{padding:9px 12px;font-size:12px}
  .back-pill{padding:6px 12px;font-size:11px}
}