:root{
  --bg:#081017;
  --bg-2:#0a1219;
  --surface:#0e1b24;
  --surface-2:#12222d;
  --line:#1d3340;
  --teal:#14b8a6;
  --teal-dark:#0d9488;
  --teal-soft:rgba(20,184,166,.14);
  --red:#ef4444;
  --orange:#f97316;
  --text:#e9f1f4;
  --muted:#8aa1ac;
  --gold:#d4a437;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#000;color:var(--text);
  display:flex;justify-content:center;
}
#app{
  width:100%;max-width:440px;
  /* Fixed viewport height so inner scroll containers (.page) scroll
     instead of the whole document. 100dvh handles mobile browser chrome. */
  height:100vh;height:100dvh;max-height:100dvh;
  background:var(--bg);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none!important}

/* ---------- Header ---------- */
.app-header{
  position:sticky;top:0;z-index:30;flex-shrink:0;
  background:linear-gradient(180deg,#0d2530,#0a1a22);
  padding:14px 16px 12px;border-bottom:1px solid var(--line);
}
.hdr-top{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.brand .logo{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-size:20px;
}
.brand h1{font-size:16px;font-weight:700;line-height:1.15}
.brand h1 span{color:var(--teal)}
.hdr-icons{display:flex;align-items:center;gap:14px;font-size:19px;color:var(--text)}
.hdr-icons i{cursor:pointer}
/* the inline (top-row) search + the top-row avatar are desktop-only */
.app-header .hdr-search{display:none !important}
.hdr-icons .ai-avatar{display:none}
.search-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.search-box{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:30px;padding:11px 16px;
}
.search-box i{color:var(--muted)}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13.5px}
.search-box input::placeholder{color:var(--muted)}
.ai-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--teal);position:relative;
  background:#163b44;display:grid;place-items:center;font-size:20px;color:#7ee0d3;
}
.ai-avatar .star{position:absolute;top:-2px;right:-2px;color:var(--gold);font-size:12px}

/* ---------- Scroll content ---------- */
/* min-height:0 is required so this flex child can shrink below its content
   size and become the scrollable region (instead of the whole #app growing). */
.page{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 96px;scroll-behavior:smooth}
.page::-webkit-scrollbar{width:0}

/* banners */
.banner-track{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(120deg,#0f3942,#0c2730);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;position:relative;overflow:hidden;
}
.banner-track .map{
  position:absolute;inset:0;opacity:.18;
  background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/640px-Equirectangular_projection_SW.jpg') center/cover;
}
.banner-track .pin{
  width:42px;height:42px;border-radius:12px;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal);font-size:18px;flex-shrink:0;z-index:1;
}
.banner-track .txt{z-index:1}
.banner-track h3{font-size:15px;font-weight:700;margin-bottom:3px}
.banner-track p{font-size:12px;color:var(--muted);line-height:1.4}
.banner-track .chev{margin-left:auto;color:var(--teal);z-index:1}

.banner-ai{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  background:linear-gradient(120deg,#0d3b45,#0b2c58);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;position:relative;overflow:hidden;cursor:pointer;
}
.banner-ai::after{
  content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;
  background:radial-gradient(circle,rgba(45,212,191,.28),transparent 70%);
}
.banner-ai .ai-ic{
  width:44px;height:44px;border-radius:13px;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal);font-size:20px;flex-shrink:0;z-index:1;
}
.banner-ai .txt{z-index:1}
.banner-ai h3{font-size:15px;font-weight:700;margin-bottom:3px;color:#fff}
.banner-ai p{font-size:12px;color:rgba(255,255,255,.82);line-height:1.4}
.banner-ai .chev{margin-left:auto;color:var(--teal);z-index:1}

.community-card{
  display:flex;align-items:center;gap:14px;margin-top:18px;
}
.community-card .info{flex:1}
.community-card h2{font-size:18px;font-weight:700;margin-bottom:6px}
.community-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.community-card .thumb{
  width:118px;height:96px;border-radius:14px;object-fit:cover;flex-shrink:0;
}
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#04201d;font-weight:700;font-size:13px;
  padding:11px 18px;border-radius:30px;
}
.btn-pill.ghost{background:var(--teal-soft);color:var(--teal)}

/* section heading */
.sec-title{font-size:20px;font-weight:800;margin:24px 0 14px}
.tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap;padding:9px 18px;border-radius:30px;font-size:13.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.tab.active{background:var(--teal);color:#04201d;border-color:var(--teal)}

/* service grid — 2 modern cards per line on mobile */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}

/* ---- Modern service card ---- */
.service-card{
  position:relative;cursor:pointer;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-card:active{transform:scale(.985)}
.service-card .img-wrap{
  position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);
}
.service-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:active img{transform:scale(1.06)}
.service-card .img-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,23,0) 45%,rgba(8,16,23,.55) 100%);
}
.service-card .cat-chip{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  padding:4px 9px;border-radius:999px;
  background:rgba(20,184,166,.92);color:#03211d;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.service-card .fav{
  position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.94);color:#1c2a31;display:grid;place-items:center;font-size:13px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .2s;
}
.service-card .fav:active{transform:scale(.85)}
.service-card .fav.on{color:var(--red)}

.service-card .sc-body{
  flex:1;display:flex;flex-direction:column;padding:12px 13px 13px;
}
.service-card .label{
  font-size:14.5px;font-weight:800;line-height:1.2;letter-spacing:-.2px;
}
.service-card .sc-desc{
  font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.service-card .sc-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.service-card .sc-rating{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--text);
}
.service-card .sc-rating i{color:var(--gold);font-size:11px}
.service-card .sc-price{font-size:12px;font-weight:800;color:var(--teal)}
.service-card .sc-cta{
  margin-top:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:800;color:#03211d;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  padding:9px 12px;border-radius:12px;
  box-shadow:0 4px 12px rgba(20,184,166,.28);
  transition:filter .2s, transform .2s;
}
.service-card .sc-cta i{font-size:11px;transition:transform .25s}
.service-card:active .sc-cta{filter:brightness(1.05)}

/* emergency */
.emergency{
  margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;
}
.emergency .head{display:flex;gap:12px}
.emergency .head .warn{color:var(--red);font-size:20px}
.emergency h3{font-size:17px;font-weight:800}
.emergency .head p{font-size:12.5px;color:var(--muted);margin-top:2px}
.emergency .body{display:flex;gap:14px;margin-top:14px}
.emergency .btns{flex:1;display:flex;flex-direction:column;gap:10px}
.emergency .row2{display:flex;gap:10px}
.em-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:12px;font-weight:700;font-size:13.5px;color:#fff;flex:1;
}
.em-btn.teal{background:var(--teal)}
.em-btn.red{background:var(--red)}
.em-btn.orange{background:var(--orange)}
.em-btn.dark{background:var(--surface-2);border:1px solid var(--line)}
.emergency .amb-img{width:108px;border-radius:12px;object-fit:cover;flex-shrink:0}

/* helping */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.help-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;cursor:pointer;
}
.help-card i{font-size:22px;color:var(--teal)}

/* ---------- Bottom nav (mobile) ----------
   The rail lives directly on <body> (outside #app) so on desktop it can be a
   true full-height fixed left column. On mobile it is a fixed bottom tab bar
   pinned to the bottom edge of the viewport, centred to match the app frame. */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:440px;
  z-index:50;display:flex;justify-content:space-around;flex-shrink:0;
  background:#0a1620;border-top:1px solid var(--line);padding:9px 4px 11px;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);flex:1;cursor:pointer}
.nav-item i{font-size:19px}
.nav-item.active{color:var(--teal)}

/* ---------- Drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;opacity:0;pointer-events:none;transition:.25s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:84%;max-width:340px;z-index:50;
  background:#0b1a21;transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;padding:22px 20px;
  border-left:1px solid var(--line);
}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.drawer-head .pfp{
  width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#a87b2e,#7a5a22);
  display:grid;place-items:center;font-size:22px;color:#fff;
}
.drawer-head .who{flex:1}
.drawer-head .who b{font-size:18px;font-weight:700}
.drawer-head .who small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.drawer-head .x{font-size:20px;color:var(--muted);cursor:pointer}
.menu-list{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
.menu-list::-webkit-scrollbar{width:6px}
.menu-list::-webkit-scrollbar-track{background:transparent}
.menu-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
.menu-list::-webkit-scrollbar-thumb:hover{background:var(--teal)}
.menu-item{display:flex;align-items:center;gap:16px;padding:13px 6px;font-size:15.5px;font-weight:500;border-radius:10px;cursor:pointer;transition:background .15s ease}
.menu-item i{width:22px;text-align:center;font-size:17px;color:var(--muted)}
.menu-item:hover{background:var(--surface)}
.menu-item:active{background:var(--surface)}
.menu-sep{height:1px;background:var(--line);margin:10px 0}
.signin{display:flex;align-items:center;gap:16px;padding:13px 6px;color:var(--teal);font-weight:700;font-size:15.5px;cursor:pointer;border-radius:10px;transition:background .15s ease}
.signin:hover{background:var(--surface)}
.signin i{font-size:17px}

/* ---------- Detail / generic screens ---------- */
.sub-header{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,#0d2530,#0a1a22);padding:16px;border-bottom:1px solid var(--line);
}
.sub-header i.back{font-size:18px;cursor:pointer}
.sub-header h2{font-size:17px;font-weight:700}
.detail-hero{width:100%;height:210px;object-fit:cover}
.detail-body{padding:18px 16px 90px}
.detail-body h1{font-size:22px;font-weight:800;margin-bottom:8px}
.rating{display:flex;align-items:center;gap:6px;color:var(--gold);font-size:13px;margin-bottom:14px}
.rating .muted{color:var(--muted)}
.detail-body p.desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.feature-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.feature-list div{display:flex;align-items:center;gap:12px;font-size:14px}
.feature-list i{color:var(--teal)}
.price-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:#0a1620;border-top:1px solid var(--line);z-index:25;
}
.price-bar .price{flex:1}
.price-bar .price small{color:var(--muted);font-size:12px;display:block}
.price-bar .price b{font-size:20px;color:var(--teal)}
.price-bar .cta{
  background:var(--teal);color:#04201d;font-weight:800;font-size:15px;
  padding:14px 26px;border-radius:30px;
}

/* simple list screens */
.list-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:12px;display:flex;align-items:center;gap:14px;
}
.list-card .ic{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-size:18px;flex-shrink:0}
.list-card .meta{flex:1}
.list-card .meta b{font-size:15px;display:block}
.list-card .meta small{color:var(--muted);font-size:12.5px}
.list-card .amt{font-weight:700;color:var(--teal)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty i{font-size:46px;color:var(--line);margin-bottom:14px;display:block}

/* toast */
.toast{
  position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--teal);color:#04201d;font-weight:700;font-size:13.5px;
  padding:12px 22px;border-radius:30px;z-index:99;opacity:0;transition:.3s;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Doctor Ads Section (Book Consultation page) ---- */
.doctor-ads-section{padding:0 16px 20px}
.ad-filter-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch}
.ad-filter-tabs::-webkit-scrollbar{display:none}
.ad-filter-tab{
  white-space:nowrap;padding:8px 16px;border-radius:20px;font-size:12.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.2s;
}
.ad-filter-tab.active{background:var(--teal);color:#04201d;border-color:var(--teal)}
.ad-filter-tab:hover{border-color:var(--teal)}
.ads-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px 16px;align-items:stretch}
.ads-list .doc-list-card{margin:0}
.ads-list .ads-loading,.ads-list .ads-empty{grid-column:1 / -1}
.ads-loading{text-align:center;padding:30px;color:var(--muted);font-size:14px}
.ads-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.ads-empty i{font-size:40px;color:var(--line);margin-bottom:12px;display:block}
.ad-card-item{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px;margin-bottom:14px;transition:border-color .2s;
}
.ad-card-item:hover{border-color:var(--teal)}
.ad-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ad-doctor-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal);font-size:18px;flex-shrink:0;
}
.ad-doctor-info{flex:1;min-width:0}
.ad-doctor-info h4{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-doctor-info span{font-size:12px;color:var(--muted)}
.ad-type-badge{
  background:var(--teal-soft);color:var(--teal);font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:12px;text-transform:capitalize;flex-shrink:0;
}
.ad-card-title{font-size:16px;font-weight:800;margin-bottom:6px}
.ad-card-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.ad-card-details{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ad-detail-item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.ad-detail-item i{color:var(--teal);width:16px;text-align:center;font-size:12px}
.ad-book-btn{
  width:100%;padding:12px;border-radius:12px;background:var(--teal);color:#04201d;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s;
}
.ad-book-btn:hover{opacity:.9}

/* ---- Doctor schedule inside ad card ---- */
.ad-schedule{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:12px;
}
.ad-schedule.no-sched{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.5;
}
.ad-schedule.no-sched i{color:var(--gold)}
.ad-schedule-head{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--teal);
  margin-bottom:10px;text-transform:uppercase;letter-spacing:.4px;
}
.ad-schedule-grid{display:flex;flex-direction:column;gap:8px}
.ad-sched-chip{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
}
.asc-day{font-size:13px;font-weight:700;min-width:78px}
.asc-time{font-size:12.5px;color:var(--teal);font-weight:600}
.asc-loc{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.asc-loc i{font-size:10px}

/* ---- Consultation top slider ---- */
.consult-slider{margin:0 16px;position:relative}
.consult-slider .cs-track{
  display:flex;overflow:hidden;border-radius:18px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;
}
.cs-slide{
  min-width:100%;display:flex;align-items:center;gap:16px;padding:22px 20px;
  border:1px solid var(--line);border-radius:18px;
}
.cs-slide-ic{
  width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:var(--teal);font-size:24px;flex-shrink:0;
}
.cs-slide-txt h3{font-size:18px;font-weight:800;margin-bottom:5px}
.cs-slide-txt p{font-size:13px;color:var(--muted);line-height:1.45}
.cs-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.cs-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s}
.cs-dot.active{background:var(--teal);width:20px;border-radius:6px}

/* ---- Consultation statistics ---- */
.consult-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;
}
.cstat{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  position:relative;overflow:hidden;
}
.cstat::after{content:'';position:absolute;right:-18px;bottom:-18px;width:64px;height:64px;border-radius:50%;background:var(--teal-soft);opacity:.4}
.cstat-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;z-index:1}
.cstat-ic.teal{background:var(--teal-soft);color:var(--teal)}
.cstat-ic.gold{background:rgba(212,164,55,.16);color:var(--gold)}
.cstat-ic.blue{background:rgba(59,130,246,.16);color:#60a5fa}
.cstat-ic.green{background:rgba(34,197,94,.16);color:#4ade80}
.cstat-val{font-size:26px;font-weight:800;line-height:1;z-index:1}
.cstat-lbl{font-size:12.5px;color:var(--muted);z-index:1}

/* ---- Ad Booking Modal ---- */
.ad-book-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
}
.ad-book-modal-content{
  background:var(--bg);border:1px solid var(--line);border-radius:20px 20px 0 0;
  width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
  animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ad-book-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2;
}
.ad-book-modal-head h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.ad-book-modal-head h3 i{color:var(--teal)}
.ad-book-modal-head button{width:32px;height:32px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:16px;color:var(--muted)}
.ad-login-required{text-align:center;padding:40px 24px}
.ad-login-required i{font-size:48px;color:var(--teal);margin-bottom:16px}
.ad-login-required h4{font-size:18px;font-weight:700;margin-bottom:8px}
.ad-login-required p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:20px}
.ad-login-actions{display:flex;gap:12px;justify-content:center;margin-bottom:16px}
.ad-login-btn{
  padding:12px 22px;border-radius:12px;background:var(--teal);color:#04201d;
  font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;
}
.ad-signup-btn{
  padding:12px 22px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;
}
.ad-cancel-btn{
  padding:10px 20px;border-radius:10px;color:var(--muted);font-size:13px;font-weight:600;
  background:none;border:none;cursor:pointer;
}
.ad-book-form-wrap{padding:16px 20px}
.ad-book-ad-info{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px}
.ad-book-ad-info h4{font-size:15px;font-weight:700;margin-bottom:6px}
.ad-book-ad-info p{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:4px}
.ad-book-ad-info p i{color:var(--teal);width:16px}
.ad-book-form{display:flex;flex-direction:column;gap:14px}
.ad-form-field label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.ad-form-field label i{color:var(--teal);font-size:12px}
.ad-form-field input,.ad-form-field select{
  width:100%;padding:12px 14px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:14px;outline:none;
  font-family:inherit;
}
.ad-form-field input:focus,.ad-form-field select:focus{border-color:var(--teal)}
.ad-form-field select{appearance:none;-webkit-appearance:none}
.ad-pay-instructions{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px;font-size:12.5px;color:var(--muted);line-height:1.6;
}
.ad-confirm-book-btn{
  width:100%;padding:14px;border-radius:12px;background:var(--teal);color:#04201d;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:4px;
}
.portals-item{background:var(--teal-soft);border:1px solid rgba(20,184,166,.2);border-radius:10px;color:var(--teal)!important;font-weight:700!important}
.portals-item i{color:var(--teal)!important}
.signup{color:var(--gold)!important}

/* ===========================================================================
   Community Posts & Comments
   =========================================================================== */

/* Create post card */
.comm-create-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px;margin-bottom:16px;
}
.comm-create-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.comm-user-ava{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;
  font-weight:800;font-size:14px;
}
.comm-create-btn{
  flex:1;text-align:left;padding:11px 16px;border-radius:30px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-size:13.5px;cursor:pointer;transition:border-color .15s;
}
.comm-create-btn:hover{border-color:var(--teal)}
.comm-create-actions{display:flex;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.comm-create-actions button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 4px;
  border-radius:10px;background:none;cursor:pointer;transition:background .15s;
}
.comm-create-actions button:hover{background:var(--surface-2)}

/* Post cards */
.comm-post-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px;margin-bottom:12px;
}
.comm-post-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.comm-post-ava{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:17px;
}
.comm-post-meta{flex:1;min-width:0}
.comm-post-meta b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comm-post-meta span{font-size:12px;color:var(--muted)}
.comm-post-more{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(239,68,68,.1);color:#fca5a5;font-size:13px;flex-shrink:0;
  cursor:pointer;transition:background .15s;
}
.comm-post-more:hover{background:rgba(239,68,68,.2)}
.comm-post-title{font-size:16px;font-weight:800;margin-bottom:6px;line-height:1.3}
.comm-post-content{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:12px;word-break:break-word;white-space:pre-line}
.comm-post-actions{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.comm-act{
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--muted);padding:8px 14px;border-radius:10px;background:none;
  cursor:pointer;transition:all .15s;flex:1;justify-content:center;
}
.comm-act:hover{background:var(--surface-2)}
.comm-act.liked{color:#ef4444}
.comm-act.liked i{color:#ef4444}

/* Community empty */
.comm-empty{text-align:center;padding:50px 20px;color:var(--muted)}
.comm-empty i{font-size:42px;color:var(--line);display:block;margin-bottom:14px}
.comm-empty h4{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px}
.comm-empty p{font-size:13px;line-height:1.5}
.comm-empty-small{text-align:center;padding:30px 20px;color:var(--muted)}
.comm-empty-small i{font-size:28px;color:var(--line);display:block;margin-bottom:10px}

/* Community modals */
.comm-modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  backdrop-filter:blur(4px);
}
.comm-modal{
  background:var(--bg);border:1px solid var(--line);border-radius:20px 20px 0 0;
  width:100%;max-width:500px;max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;animation:slideUp .3s ease;
}
.comm-modal-tall{height:80vh}
.comm-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.comm-modal-head h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px}
.comm-modal-head button{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:16px;cursor:pointer;
}

/* Create post form */
.comm-form{padding:16px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}
.comm-form-field{display:flex;flex-direction:column;gap:6px}
.comm-form-field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.comm-form-field input,.comm-form-field select,.comm-form-field textarea{
  width:100%;padding:12px 14px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:14px;outline:none;
  font-family:inherit;
}
.comm-form-field textarea{resize:vertical;min-height:100px;line-height:1.5}
.comm-form-field input:focus,.comm-form-field select:focus,.comm-form-field textarea:focus{border-color:var(--teal)}
.comm-form-field select{appearance:none;-webkit-appearance:none}
.comm-form-field option{background:var(--surface);color:var(--text)}
.comm-submit-btn{
  width:100%;padding:14px;border-radius:12px;background:var(--teal);color:#04201d;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;border:none;
}
.comm-submit-btn:disabled{opacity:.6}

/* Comments */
.comm-comments-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.comm-comment{display:flex;gap:10px;align-items:flex-start}
.comm-comment-ava{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.comm-comment-body{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.comm-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comm-comment-head b{font-size:13px}
.comm-comment-head span{font-size:11px;color:var(--muted)}
.comm-comment-del{
  margin-left:auto;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:rgba(239,68,68,.1);color:#fca5a5;font-size:10px;cursor:pointer;flex-shrink:0;
}
.comm-comment-body p{font-size:13.5px;color:var(--muted);line-height:1.5;word-break:break-word}

/* Comment input */
.comm-comment-input{
  display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0;
  background:var(--bg);
}
.comm-comment-input input{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:11px 16px;color:var(--text);outline:none;font-size:13.5px;font-family:inherit;
}
.comm-comment-input input:focus{border-color:var(--teal)}
.comm-comment-input input::placeholder{color:var(--muted)}
.comm-comment-input button{
  width:42px;height:42px;border-radius:50%;background:var(--teal);color:#04201d;
  font-size:15px;display:grid;place-items:center;flex-shrink:0;cursor:pointer;
}

/* ===========================================================================
   RESPONSIVE: Laptop / Desktop  (min-width: 768px)
   ---------------------------------------------------------------------------
   On mobile the app intentionally locks the viewport (body/#app overflow:hidden,
   height:100dvh) and lets only `.page` scroll — that is correct for touch.
   On laptops/desktops that same model felt "frozen": the hidden scrollbar gave
   no scroll affordance and the wheel only worked while hovering the narrow
   column. The block below switches desktops to a natural, fully-scrollable
   document model with a polished, visible scrollbar and a centered app frame
   that breathes on large screens.
   =========================================================================== */
@media (min-width: 768px) {
  /* --- Re-enable normal page scrolling for mouse/laptop users --- */
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;            /* the document itself can scroll now      */
    background:
      radial-gradient(1200px 600px at 50% -10%, #0e2230 0%, transparent 60%),
      #05090d;
  }
  body {
    display: block;              /* full-bleed: no centered narrow frame    */
    padding: 0;
  }

  /* --- App fills the whole viewport width on desktop (no empty sides) --- */
  #app {
    max-width: 100%;
    width: 100%;
    height: auto;                /* was 100dvh — let content define height  */
    min-height: 100dvh;
    max-height: none;
    overflow: visible;           /* was hidden — never clip on desktop      */
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Reserve the full width of the fixed left sidebar rail on the CONTAINER
       itself. Every child (header, sub-header, page, price-bar…) is therefore
       pushed clear of the rail automatically — no matter what inline padding a
       page sets on .page. This is what makes the sidebar truly global and
       stops content from ever sliding under it. */
    padding-left: 92px;
    box-sizing: border-box;
  }

  /* --- Header stays pinned to the top of the viewport while scrolling --- */
  .app-header {
    position: sticky;
    top: 0;
    border-radius: 0;
    padding: 16px 6vw;
    backdrop-filter: blur(8px);
    /* the 92px sidebar clearance now lives on #app; header only needs its
       own horizontal breathing room here. */
  }
  /* keep header inner content aligned with the page content width */
  .app-header > * { max-width: 1400px; margin-left: auto; margin-right: auto; }

  /* Header layout: brand + menu on the top row, then the search bar on its own
     row below with the AI assistant on the same line to its right. */
  .hdr-top { gap: 24px; }
  .brand { flex: 1 1 auto; }
  .brand h1 { font-size: 20px; white-space: nowrap; }

  /* Keep the inline top-row search hidden — the search bar lives in its own
     row (.search-row) below the brand instead. */
  .app-header .hdr-search { display: none !important; }
  /* Icons on the far right of the top row (menu). The top-row avatar stays
     hidden so the AI assistant only shows next to the search bar. */
  .hdr-icons { flex: 0 0 auto; gap: 18px; margin-left: auto; }
  .hdr-icons .ai-avatar { display: none; }

  /* Show the standalone search row on desktop: search bar spans the width with
     the AI assistant avatar on the same line to its right. */
  .search-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
  .search-box { flex: 1 1 auto; padding: 13px 20px; }
  .search-row .ai-avatar { display: grid; width: 46px; height: 46px; font-size: 20px; }

  /* --- The page region no longer needs its own scroll; it flows naturally --- */
  .page {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;           /* document scroll handles it now          */
    padding: 28px 6vw 40px;
    /* sidebar clearance is handled by #app's padding-left — no override here */
  }

  /* Content max-width so wide layouts stay readable. Left-aligned (not centered)
     so every section shares the same left edge as the service grid, right next
     to the fixed sidebar — prevents the section titles from being clipped. */
  .page > .banner-ai,
  .page > .banner-track,
  .page > .community-card,
  .page > .sec-title,
  .page > .tabs,
  .page > .grid,
  .page > .emergency,
  .page > .help-grid {
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
  }

  .banner-ai {
    padding: 22px 26px;
    box-shadow: 0 10px 30px rgba(20,184,166,.22);
    border-color: transparent;
  }

  /* Service grid — 4 modern cards per line on laptop/PC */
  .grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.45); border-color: var(--teal-dark); }
  .service-card:hover img { transform: scale(1.07); }
  .service-card:hover .sc-cta { filter: brightness(1.08); box-shadow: 0 8px 20px rgba(20,184,166,.4); }
  .service-card:hover .sc-cta i { transform: translateX(4px); }
  .service-card .label { font-size: 16px; }
  .service-card .sc-desc { font-size: 12.5px; }

  /* Hero/feature rows look great wide */
  .banner-track {
    padding: 22px 26px;
    cursor: pointer;
    background: linear-gradient(120deg, var(--teal-dark), var(--teal));
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(20,184,166,.22);
  }
  .banner-track .map { opacity: .12; }
  .banner-track .pin { background: rgba(255,255,255,.2); color: #fff; }
  .banner-track h3 { color: #ffffff; }
  .banner-track p { color: rgba(255,255,255,.85); }
  .banner-track .chev { color: #ffffff; }
  .community-card { padding: 22px; }
  .community-card .thumb { width: 160px; height: 116px; }
  .help-grid { grid-template-columns: repeat(4, 1fr); }

  /* --- Left sidebar navigation (desktop/laptop) — matches reference design ---
     On mobile this same element is the bottom tab bar. On desktop it becomes a
     FULL-HEIGHT vertical rail on the LEFT that is guaranteed to cover the entire
     viewport top→bottom (no floating panel, no empty gap underneath). The nav
     items are packed at the top; the solid teal background fills the rest of the
     column all the way down to the bottom edge — exactly like the reference. */
  .bottom-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;                    /* anchor to the very bottom of the viewport */
    right: auto;
    transform: none;
    width: 92px;
    /* Cover the full viewport height. `bottom:0` + `top:0` already stretch it,
       and the explicit heights are a belt-and-braces fallback for browsers
       that don't resolve top/bottom stretching on a fixed element.           */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    max-width: none;
    flex-direction: column;
    justify-content: flex-start;  /* group items at the top — no stretching   */
    align-items: stretch;
    gap: 8px;                     /* fixed, tight spacing between items        */
    padding: 18px 12px;
    border-radius: 0;             /* square edges — a solid column, not a card */
    border: none;
    border-top: none;             /* override the mobile top border            */
    border-right: 1px solid var(--line);
    box-shadow: 2px 0 24px rgba(0,0,0,.35);
    /* Solid gradient that fills the WHOLE column from top to bottom edge.     */
    background: linear-gradient(180deg,#0d2530 0%,#0a1a22 55%,#08151c 100%);
    z-index: 60;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .bottom-nav::-webkit-scrollbar { width: 0; }

  /* Brand mark removed per request — the top "H" logo above the rail is hidden
     so only the 6 navigation buttons show in a clean vertical column. */
  .bottom-nav::before { content: none; display: none; }

  .nav-item {
    flex-direction: column;
    flex: 0 0 auto;               /* fixed size — items never grow to fill     */
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    padding: 11px 4px;
    border-radius: 16px;
    color: var(--muted);
    transition: background .15s, color .15s, transform .12s;
  }
  .nav-item:hover { background: var(--surface); color: var(--text); transform: translateY(-1px); }
  .nav-item.active { background: var(--teal-soft); color: var(--teal); }
  .nav-item i { font-size: 20px; }
  .nav-item span { font-size: 11px; line-height: 1.2; font-weight: 600; }
  /* remove the old floating-nav bottom clearance; sidebar frees the bottom */
  .page { padding-bottom: 40px; }

  /* Misc desktop polish (kept from original responsive intent) */
  .consult-stats { grid-template-columns: repeat(4, 1fr); }
  /* Doctor listings — 4 cards per row on desktop (matches the service grid) */
  .ads-list { grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0 0 16px; }
  .doc-list-card { margin: 0; padding: 18px; }
  .dlc-avatar { width: 90px; height: 90px; }
  .ad-book-modal { align-items: center; }
  .ad-book-modal-content { border-radius: 20px; max-width: 500px; }
  .comm-modal-overlay { align-items: center; padding: 20px; }
  .comm-modal { border-radius: 20px; max-height: 80vh; }
  .list-card { padding: 18px; }
  .detail-body { padding: 24px 24px 110px; }
  .emergency .body { flex-direction: row; }
  .emergency .amb-img { width: 180px; height: auto; }
  .prof-id { padding: 22px 20px; gap: 22px; }
  .prof-ava { width: 130px; height: 130px; }
  .prof-block { padding: 22px 20px; }
  .date-card { width: 78px; padding: 14px 0; }
  .slot-grid { grid-template-columns: repeat(4, 1fr); }
  .drawer { width: 380px; max-width: 380px; }
  /* price-bar is fixed to the viewport, so it ignores #app's padding. Shift it
     right by half the 92px sidebar width so it stays centred within the content
     area (to the right of the rail) instead of sliding under the sidebar. */
  .price-bar {
    max-width: 1040px;
    padding: 16px 24px;
    border-radius: 16px 16px 0 0;
    left: calc(50% + 46px);
  }

  /* --- A clean, branded scrollbar so users SEE they can scroll --- */
  html { scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--teal), var(--teal-dark));
    border-radius: 999px;
    border: 3px solid #05090d;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--teal); }
  /* the previously hidden .page scrollbar — show inner scroll regions too */
  .page::-webkit-scrollbar,
  .ad-filter-tabs::-webkit-scrollbar { width: 10px; height: 8px; }
  .tabs { overflow-x: auto; }

  /* --- PHARMACY: full-width page on PC/laptop (no empty side margins) --- */
  #app[data-screen="pharmacy"],
  #app[data-screen="pharmacyProfile"] {
    max-width: 100%;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #app[data-screen="pharmacy"] .app-header,
  #app[data-screen="pharmacyProfile"] .app-header { border-radius: 0; }
  #app[data-screen="pharmacy"] .page,
  #app[data-screen="pharmacyProfile"] .page { padding: 24px 40px 40px; }
  /* Let the pharmacy content sections use the full width too */
  #app[data-screen="pharmacy"] .page > .pharm-cat-tabs,
  #app[data-screen="pharmacy"] .page > .pharm-nearby-section,
  #app[data-screen="pharmacy"] .page > .pharm-section-title,
  #app[data-screen="pharmacy"] .page > .pharm-med-grid {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Wider product grid to fill the extra horizontal space */
  #app[data-screen="pharmacy"] .pharm-med-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  /* Profile hero should span the full width edge-to-edge */
  #app[data-screen="pharmacyProfile"] .pharm-profile-hero { margin-left: -40px; margin-right: -40px; }
  #app[data-screen="pharmacyProfile"] .pharm-profile-bookbar { margin-left: -40px; margin-right: -40px; }
}

/* ===========================================================================
   RESPONSIVE: Large Desktop (min-width: 1200px)
   =========================================================================== */
@media (min-width: 1200px) {
  #app { max-width: 100%; }

  /* 4-column service grid on big screens (8 cards -> 4 + 4) */
  .grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .page > .banner-track,
  .page > .community-card,
  .page > .sec-title,
  .page > .tabs,
  .page > .grid,
  .page > .emergency,
  .page > .help-grid { max-width: 1400px; margin-left: 0; margin-right: auto; }

  .consult-stats { padding: 0 24px; gap: 16px; }
  .cstat { padding: 20px 16px; }
  /* sidebar clearance handled by #app padding-left */
  .page { padding: 28px 6vw 40px; }
  .price-bar { max-width: 1280px; }

  /* Doctor cards two-up on wide screens */
  .doctor-ads-section { padding: 0 24px 20px; }
  .ads-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ads-list .doc-list-card { margin: 0; }
  .help-grid { gap: 18px; }

  /* PHARMACY full-width: keep #app override and add a 5-column grid */
  #app[data-screen="pharmacy"] { max-width: 100%; }
  #app[data-screen="pharmacyProfile"] { max-width: 100%; }
  #app[data-screen="pharmacy"] .pharm-med-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---- Administrations Portal gate ---- */
.admin-gate{
  text-align:center;padding:34px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;margin-top:8px;
}
.admin-gate-icon{
  width:78px;height:78px;border-radius:50%;margin:0 auto 18px;
  background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-size:34px;
}
.admin-gate h1{font-size:21px;font-weight:800;margin-bottom:10px}
.admin-gate>p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:24px;max-width:330px;margin-left:auto;margin-right:auto}
.admin-gate-actions{display:flex;gap:12px;justify-content:center;margin-bottom:18px}
.admin-gate-btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:30px;
  font-weight:700;font-size:14px;
}
.admin-gate-btn.primary{background:var(--teal);color:#04201d}
.admin-gate-btn.ghost{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.admin-gate-note{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.admin-gate-note i{color:var(--gold)}

/* ---- Administrations Portal auth form ---- */
.admin-auth-form{display:flex;flex-direction:column;gap:12px;margin:6px auto 14px;max-width:340px;text-align:left}
.aa-field{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.aa-field i{color:var(--teal);font-size:15px;width:18px;text-align:center}
.aa-field input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;padding:13px 0}
.admin-auth-msg{display:none;font-size:13px;margin-bottom:10px;padding:9px 12px;border-radius:10px;text-align:center}
.admin-auth-msg.err{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.admin-auth-alt{font-size:13px;color:var(--muted)}
.admin-auth-alt a{color:var(--teal);font-weight:700}

/* ---- Administrations Portal (signed in) ---- */
.admin-welcome{
  display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#0f3942,#0c2730);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;
}
.admin-welcome-ava{
  width:46px;height:46px;border-radius:14px;background:var(--teal);color:#04201d;
  display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0;
}
.admin-welcome-txt{flex:1;min-width:0}
.admin-welcome-txt b{font-size:15.5px;display:block}
.admin-welcome-txt small{color:var(--muted);font-size:12.5px;text-transform:capitalize}
.admin-signout{width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:15px}

/* chat */
.chat-area{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:80%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.45}
.bubble.bot{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.bubble.me{background:var(--teal);color:#04201d;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.chat-input{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:#0a1620}
.chat-input input{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:12px 18px;color:var(--text);outline:none;font-size:14px}
.chat-input button{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#04201d;font-size:17px}

/* =====================================================================
   Doctor Consultation — listing cards, profile page & booking (redesign)
   ===================================================================== */

/* ---- Doctor list card (consultation listing) ---- */
.doc-list-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin:0 16px 14px;
}
.doc-list-card .dlc-fav{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1px solid var(--line);color:var(--muted);
  display:grid;place-items:center;font-size:14px;z-index:2;
}
.doc-list-card .dlc-fav.on{color:var(--red);background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}
.dlc-top{display:flex;gap:14px;cursor:pointer}
.dlc-avatar{position:relative;width:78px;height:78px;flex-shrink:0;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.dlc-avatar img{width:100%;height:100%;object-fit:cover}
.dlc-avatar-fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--teal);font-size:30px;background:var(--teal-soft)}
.dlc-avatar-fallback.big{font-size:40px}
.dlc-avail{
  position:absolute;left:0;bottom:0;width:100%;text-align:center;
  background:#10b981;color:#04201d;font-size:10px;font-weight:800;padding:3px 0;letter-spacing:.3px;
}
.dlc-info{flex:1;min-width:0;padding-right:30px}
.dlc-name{font-size:17px;font-weight:800;line-height:1.2}
.dlc-spec{font-size:12.5px;color:var(--muted);margin-top:2px}
.dlc-rating{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:13px;color:var(--text)}
.dlc-rating i{color:var(--gold)}
.dlc-rating span{color:var(--muted)}
.dlc-meta{display:flex;gap:18px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.dlc-meta i{color:var(--teal);margin-right:5px}
.dlc-cta{
  width:100%;margin-top:14px;padding:11px;border-top:1px solid var(--line);
  color:var(--teal);font-weight:700;font-size:14px;background:none;text-align:center;
}

/* ---- Programs header (profile page) ---- */
.prog-header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-shrink:0;
  background:linear-gradient(180deg,#0d2530,#0a1a22);padding:16px;border-bottom:1px solid var(--line);
}
.prog-back{font-size:18px;color:#cdd9de;cursor:pointer;margin-right:14px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;flex-shrink:0;transition:background .15s}
.prog-back:hover{background:rgba(255,255,255,.10);color:#fff}
.prog-brand{display:flex;align-items:center;gap:12px;flex:1}
.prog-brand>i{font-size:24px;color:#cdd9de}
.prog-brand div{line-height:1.15}
.prog-brand b{display:block;font-size:16px;font-weight:800}
.prog-brand span{font-size:16px;font-weight:800}
.prog-icons{display:flex;gap:16px;font-size:19px;color:var(--text)}
.prog-icons i{cursor:pointer}
.prof-subbar{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.prof-subbar i{font-size:18px;cursor:pointer}
.prof-subbar h2{font-size:18px;font-weight:800}

/* ---- Profile identity ---- */
.prof-id{display:flex;gap:16px;padding:18px 16px}
.prof-ava{width:104px;height:104px;border-radius:16px;overflow:hidden;flex-shrink:0;background:var(--surface-2)}
.prof-ava img{width:100%;height:100%;object-fit:cover}
.prof-id-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.prof-id-txt h1{font-size:22px;font-weight:800;line-height:1.2}
.prof-spec{font-size:14px;color:var(--muted);margin-top:4px}
.prof-rating{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:14px}
.prof-rating i{color:var(--gold)}
.prof-rating span{color:var(--muted)}

/* ---- Stats ---- */
.prof-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:6px 16px 18px}
.prof-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.prof-stat>i{color:var(--teal);font-size:18px}
.prof-stat b{font-size:18px;font-weight:800}
.prof-stat small{font-size:11.5px;color:var(--muted)}

/* ---- Profile blocks ---- */
.prof-block{padding:18px 16px;border-top:1px solid var(--line)}
.prof-h{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;margin-bottom:14px}
.prof-h i{color:var(--teal)}
.prof-h2,.prof-h3{font-size:17px;font-weight:800;margin-bottom:12px}
.clinic-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.clinic-card b{font-size:17px;font-weight:800}
.clinic-card p{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-top:10px}
.clinic-card p i{color:var(--teal)}
.prof-about{font-size:14px;color:var(--muted);line-height:1.65}
.prof-qual{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px;color:var(--text)}
.prof-qual i{color:var(--teal)}

/* ---- Date picker ---- */
.date-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.date-row::-webkit-scrollbar{height:4px}
.date-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.date-card{
  flex:0 0 auto;width:64px;padding:12px 0;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.18s;
}
.date-card .dc-day{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.4px}
.date-card .dc-num{font-size:22px;font-weight:800;line-height:1}
.date-card .dc-mon{font-size:11px;color:var(--muted)}
.date-card.active{background:var(--teal);border-color:var(--teal)}
.date-card.active .dc-day,.date-card.active .dc-num,.date-card.active .dc-mon{color:#04201d}

/* ---- Time slots ---- */
.slot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.slot-btn{
  padding:13px 4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s;
}
.slot-btn:hover{border-color:var(--teal)}
.slot-btn.active{background:var(--teal);border-color:var(--teal);color:#04201d;font-weight:800}

/* ---- Patient form ---- */
.patient-form{display:flex;flex-direction:column}
.pf-label{font-size:13px;color:var(--muted);margin:6px 0 8px}
.pf-label span{color:var(--red)}
.pf-input{
  width:100%;padding:14px 16px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:14px;outline:none;
  font-family:inherit;margin-bottom:16px;
}
.pf-input::placeholder{color:var(--muted)}
.pf-input:focus{border-color:var(--teal)}
.pf-area{resize:vertical;min-height:84px;line-height:1.5}

/* ---- Booking success overlay ---- */
.book-success{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:120;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:.25s;
}
.book-success.show{opacity:1}
.bs-card{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:28px 22px;max-width:360px;width:100%;text-align:center;
  transform:translateY(14px);transition:.25s;
}
.book-success.show .bs-card{transform:translateY(0)}
.bs-ic{font-size:54px;color:var(--teal);margin-bottom:14px}
.bs-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.bs-card>p{font-size:13.5px;color:var(--muted);line-height:1.55}
.bs-detail{display:flex;flex-direction:column;gap:9px;text-align:left;margin:18px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.bs-detail div{display:flex;align-items:center;gap:10px;font-size:13.5px}
.bs-detail i{color:var(--teal);width:16px;text-align:center}
.bs-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.bs-btn{width:100%;padding:14px;border-radius:30px;background:var(--teal);color:#04201d;font-weight:800;font-size:15px}

/* ===========================================================================
   PHARMACY
   =========================================================================== */

/* ---- Pharmacy Banner ---- */
.pharm-banner{
  background:linear-gradient(135deg,#0d6b4a 0%,#0a5238 50%,#084530 100%);
  padding:18px 16px 14px;display:flex;align-items:center;gap:12px;
  position:relative;flex-shrink:0;
}
.pharm-back{font-size:18px;cursor:pointer;color:#fff}
.pharm-banner-title{display:flex;align-items:center;gap:12px;flex:1}
.pharm-pill-icon{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);
  display:grid;place-items:center;color:#fff;font-size:18px;
}
.pharm-banner-title h2{font-size:20px;font-weight:800;color:#fff;margin:0}
.pharm-banner-title p{font-size:12.5px;color:rgba(255,255,255,.75);margin:2px 0 0}
.pharm-banner-actions{display:flex;gap:10px}
.pharm-icon-btn{
  width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;color:#fff;font-size:16px;position:relative;
}
.pharm-cart-badge{
  position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;
  background:#ef4444;color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;
}

/* ---- Pharmacy Search ---- */
.pharm-search-section{
  background:linear-gradient(180deg,#084530 0%,transparent 100%);
  padding:0 16px 16px;flex-shrink:0;
}
.pharm-search-box{
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:30px;padding:12px 18px;
}
.pharm-search-box i{color:#9ca3af;font-size:14px}
.pharm-search-box input{
  flex:1;background:none;border:none;outline:none;color:#1f2937;
  font-size:14px;font-family:inherit;
}
.pharm-search-box input::placeholder{color:#9ca3af}
.pharm-prescription-btns{display:flex;gap:10px;margin-top:12px}
.pharm-presc-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:12.5px;font-weight:600;
  padding:10px 14px;border-radius:20px;cursor:pointer;
}
.pharm-presc-btn i{font-size:13px}

/* ---- Category Tabs ---- */
.pharm-cat-tabs{
  display:flex;gap:10px;overflow-x:auto;padding:16px 0 12px;
  -webkit-overflow-scrolling:touch;
}
.pharm-cat-tabs::-webkit-scrollbar{display:none}
.pharm-cat-tab{
  white-space:nowrap;padding:9px 18px;border-radius:20px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:all .2s;
}
.pharm-cat-tab.active{background:var(--teal);color:#04201d;border-color:var(--teal)}

/* ---- Nearby Pharmacies ---- */
.pharm-nearby-section{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px;margin-top:4px;
}
.pharm-section-title{
  font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.pharm-section-title i{color:var(--teal)}
.pharm-nearby-list{display:flex;flex-direction:column;gap:10px}
.pharm-nearby-card{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;
}
.pharm-nearby-info{display:flex;align-items:center;gap:12px}
.pharm-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pharm-status-dot.online{background:#22c55e}
.pharm-status-dot.offline{background:#ef4444}
.pharm-nearby-info b{font-size:14.5px;font-weight:700;display:block}
.pharm-nearby-info small{font-size:12px;color:var(--muted)}
.pharm-nearby-meta{display:flex;align-items:center;gap:8px}
.pharm-rating-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;font-size:12px;font-weight:700;
}
.pharm-rating-badge i{color:var(--gold);font-size:11px}
.pharm-delivery-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.3);border-radius:8px;
  padding:5px 10px;font-size:11.5px;font-weight:700;color:var(--teal);
}

/* ---- Medicine Grid ---- */
.pharm-med-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:20px}
.pharm-med-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:16px 14px;position:relative;display:flex;flex-direction:column;
}
.pharm-med-icon{font-size:32px;margin-bottom:10px}
.pharm-wish-btn{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:13px;z-index:2;
}
.pharm-wish-btn.on{color:var(--red);background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}
.pharm-med-name{font-size:15px;font-weight:800;margin-bottom:3px;line-height:1.2}
.pharm-med-generic{font-size:11.5px;color:var(--muted);margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pharm-med-qty{font-size:12px;color:var(--muted);margin-bottom:6px}
.pharm-med-rating{
  display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;margin-bottom:8px;
}
.pharm-med-rating i{color:var(--gold);font-size:11px}
.pharm-med-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pharm-price-current{font-size:16px;font-weight:800;color:var(--teal)}
.pharm-price-old{font-size:12px;color:var(--muted);text-decoration:line-through}
.pharm-rx-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--orange);
  border:1px solid rgba(249,115,22,.4);border-radius:8px;
  padding:4px 10px;margin-bottom:10px;
}
.pharm-add-btn{
  width:100%;padding:11px;border-radius:12px;
  background:var(--teal);color:#04201d;font-weight:700;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:auto;cursor:pointer;border:1px solid var(--teal);
}
.pharm-add-btn.out-of-stock{
  background:var(--surface-2);color:var(--muted);border-color:var(--line);cursor:not-allowed;
}
.pharm-qty-control{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:auto;
}
.pharm-qty-control button{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--teal);color:#04201d;font-size:12px;font-weight:800;
  border:none;cursor:pointer;
}
.pharm-qty-control span{
  flex:1;text-align:center;font-size:15px;font-weight:800;min-width:34px;
}
.pharm-qty-control.small{gap:0}
.pharm-qty-control.small button{width:30px;height:30px;font-size:10px}
.pharm-qty-control.small span{font-size:13px;min-width:26px}

/* ---- Cart Widget ---- */
.pharm-cart-widget{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px;margin-bottom:16px;
}
.pharm-cart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pharm-cart-header h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.pharm-cart-header h3 i{color:var(--teal)}
.pharm-cart-header button{
  width:30px;height:30px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);
  font-size:14px;cursor:pointer;
}
.pharm-cart-items{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.pharm-cart-item{display:flex;align-items:center;gap:12px}
.pharm-cart-item-icon{font-size:22px;flex-shrink:0}
.pharm-cart-item-info{flex:1;min-width:0}
.pharm-cart-item-info b{font-size:14px;font-weight:700;display:block}
.pharm-cart-item-info small{font-size:11.5px;color:var(--muted)}
.pharm-cart-item-price{font-size:14px;font-weight:700;color:var(--teal);white-space:nowrap}
.pharm-cart-footer{border-top:1px solid var(--line);padding-top:14px}
.pharm-cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pharm-cart-total span{font-size:15px;font-weight:700;color:var(--muted)}
.pharm-cart-total b{font-size:20px;font-weight:800;color:var(--teal)}
.pharm-checkout-btn{
  width:100%;padding:14px;border-radius:30px;
  background:var(--teal);color:#04201d;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;border:none;
}

/* ---- Pharmacy Empty ---- */
.pharm-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.pharm-empty i{font-size:40px;color:var(--line);display:block;margin-bottom:12px}

/* ---- Nearby Pharmacies: card grid (2 per line phone / 4 per line desktop) ---- */
.pharm-store-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pharm-store-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;position:relative;
}
.pharm-store-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.pharm-store-card.pharm-selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(20,184,166,.35)}
.pharm-store-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pharm-store-logo{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#0d6b4a,#084530);color:#fff;font-weight:800;font-size:22px;
  display:grid;place-items:center;
}
.pharm-store-logo img{width:100%;height:100%;object-fit:cover}
.pharm-store-delivery{
  display:inline-flex;align-items:center;gap:5px;background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.3);border-radius:8px;padding:4px 8px;
  font-size:10.5px;font-weight:700;color:var(--teal);white-space:nowrap;
}
.pharm-store-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.pharm-store-name{font-size:15px;font-weight:800;line-height:1.25}
.pharm-store-city,.pharm-store-hours{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pharm-store-city i,.pharm-store-hours i{color:var(--teal);font-size:11px;width:12px}
.pharm-store-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
.pharm-store-rating{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800}
.pharm-store-rating i{color:var(--gold);font-size:11px}
.pharm-store-dist{font-size:11.5px;color:var(--muted)}
.pharm-store-view{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--teal);
  border-top:1px solid var(--line);padding-top:10px;
}
.pharm-store-view i{transition:transform .15s}
.pharm-store-card:hover .pharm-store-view i{transform:translateX(4px)}

/* ---- Pharmacy Profile (full page) ---- */
.pharm-profile-page{padding-bottom:96px !important}
.pharm-profile-hero{
  display:flex;gap:16px;align-items:center;
  background:linear-gradient(135deg,#0d6b4a 0%,#0a5238 55%,#084530 100%);
  border-radius:0 0 22px 22px;padding:22px 18px 24px;margin:0 -16px 4px;
}
.pharm-profile-logo{
  width:76px;height:76px;border-radius:20px;flex-shrink:0;overflow:hidden;
  background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:32px;
  display:grid;place-items:center;
}
.pharm-profile-logo img{width:100%;height:100%;object-fit:cover}
.pharm-profile-headinfo{min-width:0;flex:1}
.pharm-profile-headinfo h1{font-size:22px;font-weight:800;color:#fff;line-height:1.2}
.pharm-profile-sub{font-size:13px;color:rgba(255,255,255,.82);margin-top:5px;display:flex;align-items:center;gap:6px}
.pharm-profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pharm-profile-badge{
  display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
  color:#fff;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;
}
.pharm-profile-badge.rating i{color:#fbbf24}
.pharm-profile-badge.delivery{background:rgba(255,255,255,.24)}
.pharm-profile-badge.verified{background:rgba(34,197,94,.25)}
.pharm-profile-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:16px 0 6px}
.pharm-paction{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 10px;cursor:pointer;color:var(--text);font-size:12.5px;font-weight:700;
  transition:transform .15s, border-color .15s;
}
.pharm-paction:hover{transform:translateY(-2px);border-color:var(--teal)}
.pharm-paction i{font-size:22px}
.pharm-paction.upload i{color:#3b82f6}
.pharm-paction.scan i{color:#a855f7}
.pharm-paction.book i{color:var(--teal)}
.pharm-profile-contact{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.pharm-contact-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  font-size:13px;font-weight:600;color:var(--text);text-decoration:none;
}
.pharm-contact-chip i{color:var(--teal)}
.pharm-profile-section{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px;margin-top:14px;
}
.pharm-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pharm-service-card{
  display:flex;align-items:center;gap:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
}
.pharm-service-ic{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(20,184,166,.12);color:var(--teal);display:grid;place-items:center;font-size:18px;
}
.pharm-service-txt{min-width:0}
.pharm-service-txt b{display:block;font-size:13.5px;font-weight:700}
.pharm-service-txt small{font-size:11.5px;color:var(--muted)}
.pharm-profile-about{font-size:13.5px;line-height:1.6;color:var(--muted)}
.pharm-profile-bookbar{
  position:sticky;bottom:0;margin:18px -16px -16px;padding:14px 16px;
  background:linear-gradient(180deg,transparent,var(--bg) 30%);
}
.pharm-profile-bookbar .pharm-checkout-btn{width:100%}

/* ---- Pharmacy responsive ---- */
@media (min-width: 768px) {
  .pharm-med-grid { grid-template-columns: 1fr 1fr 1fr; }
  .pharm-nearby-section { padding: 22px; }
  .pharm-cart-widget { padding: 22px; }
  .pharm-store-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .pharm-service-grid { grid-template-columns: repeat(3, 1fr); }
  .pharm-profile-headinfo h1 { font-size: 26px; }
}
@media (min-width: 768px) {
  .surg-product-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1200px) {
  .pharm-med-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }
  .surg-product-list { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ---- Pharmacy Checkout Modal ---- */
.pharm-checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.pharm-checkout-modal{background:var(--bg);width:100%;max-width:440px;max-height:92vh;border-radius:22px 22px 0 0;overflow-y:auto;padding:0 0 30px;animation:slideUp .3s}
.pharm-checkout-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.pharm-checkout-head h3{font-size:17px;font-weight:700}
.pharm-checkout-head button{width:34px;height:34px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:16px}
.pharm-checkout-form{padding:14px 18px;display:flex;flex-direction:column;gap:16px}
.pchk-section{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.pchk-section h4{font-size:14px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:8px}
.pchk-field{display:flex;flex-direction:column;gap:4px}
.pchk-field label{font-size:12px;font-weight:600;color:var(--muted)}
.pchk-field input,.pchk-field textarea,.pchk-field select{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;width:100%}
.pchk-field input:focus,.pchk-field textarea:focus,.pchk-field select:focus{border-color:var(--teal);outline:none}
.pchk-note{font-size:12px;color:var(--muted);line-height:1.5;padding:6px 0}
.pchk-upload-area{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;text-align:center;transition:border-color .2s}
.pchk-upload-area:hover,.pchk-upload-area.has-file{border-color:var(--teal)}
.pchk-upload-area i{font-size:24px;color:var(--muted)}
.pchk-upload-area span{font-size:13px;color:var(--muted)}
.pchk-summary{background:var(--surface-2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.pchk-summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.pchk-summary-row.total{font-size:16px;font-weight:700;color:var(--text);padding-top:8px;border-top:1px solid var(--line)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---- Pharmacy Delivery Modal (screenshot match) ---- */
.pharm-delivery-modal .pchk-section{background:transparent;border:none;padding:0}
.pharm-delivery-modal .pchk-section h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.pharm-delivery-modal .pchk-field input{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14.5px}
.pharm-delivery-modal .pchk-field input::placeholder{color:var(--muted)}
.pharm-total-green{color:var(--teal)!important}
.pharm-free-delivery{color:var(--teal)!important;font-weight:700}
.pharm-place-order-btn{background:var(--teal)!important;color:#04201d!important;font-size:15px;font-weight:800;border-radius:30px;padding:16px}
.pharm-place-order-btn i{font-size:16px}
.pharm-med-rating span{color:var(--muted);font-weight:500;font-size:11.5px}

/* ============ MEDICAL RECORDS ============ */
.rec-intro{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:4px 0 14px}
.rec-intro-ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-size:20px;flex-shrink:0}
.rec-intro b{display:block;font-size:14px}
.rec-intro small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rec-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.rec-h{font-size:15px;margin:0 0 2px}
.rec-row{display:flex;gap:12px}
.rec-row .rec-field{flex:1}
.rec-field{display:flex;flex-direction:column;gap:6px}
.rec-field label{font-size:12px;color:var(--muted);font-weight:600}
.rec-field input,.rec-field select,.rec-field textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none}
.rec-field input:focus,.rec-field select:focus,.rec-field textarea:focus{border-color:var(--teal)}
.rec-drop{border:2px dashed var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-align:center;transition:.2s;background:var(--surface-2)}
.rec-drop:hover{border-color:var(--teal);background:var(--teal-soft)}
.rec-drop i{font-size:26px;color:var(--teal)}
.rec-drop span{font-size:14px;font-weight:600}
.rec-drop small{font-size:11px;color:var(--muted)}
.rec-file-list{display:flex;flex-direction:column;gap:8px}
.rec-file-chip{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}
.rec-file-chip>i:first-child{color:var(--teal);font-size:16px}
.rec-file-chip span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-file-chip small{color:var(--muted);font-size:11px}
.rec-file-x{color:var(--muted);cursor:pointer;padding:4px}
.rec-file-x:hover{color:var(--red)}
.rec-submit{background:var(--teal);color:#06231f;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.rec-submit:disabled{opacity:.6;cursor:default}
.rec-list{display:flex;flex-direction:column;gap:12px}
.rec-loading{color:var(--muted);font-size:13px;text-align:center;padding:14px}
.rec-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.rec-card-head{display:flex;align-items:center;gap:12px}
.rec-card-ic{width:40px;height:40px;border-radius:10px;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-size:17px;flex-shrink:0}
.rec-card-meta{flex:1;min-width:0}
.rec-card-meta b{display:block;font-size:14px}
.rec-card-meta small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rec-del{color:var(--muted);cursor:pointer;padding:6px}
.rec-del:hover{color:var(--red)}
.rec-card-notes{font-size:13px;color:var(--muted);margin:10px 0 0}
.rec-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rec-file-link{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12px;color:var(--text);text-decoration:none;max-width:100%}
.rec-file-link:hover{border-color:var(--teal);color:var(--teal)}
.rec-file-link i{color:var(--teal)}
.rec-file-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}

/* ============ WALLET STYLES ============ */
.wallet-balance-section{margin-bottom:20px}
.wallet-balance-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:10px}
.wallet-balance-card.main{background:linear-gradient(135deg,#0f3942,#14b8a630);border-color:var(--teal)}
.wallet-balance-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wbc-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.wbc-label .wbc-flag{font-size:16px}
.wbc-amount{font-size:24px;font-weight:800;color:var(--text)}
.wbc-amount.small{font-size:18px}
.wallet-rate-info{font-size:12px;color:var(--teal);text-align:center;padding:8px;background:var(--teal-soft);border-radius:10px;margin-top:8px}
.wallet-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.wallet-action-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.wallet-action-btn i{font-size:18px;padding:8px;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}
.wallet-action-btn.deposit i{background:#14b8a620;color:#14b8a6}
.wallet-action-btn.withdraw i{background:#ef444420;color:#ef4444}
.wallet-action-btn.exchange i{background:#a855f720;color:#a855f7}
.wallet-action-btn.donate i{background:#ec489920;color:#ec4899}
.wallet-action-btn:active{transform:scale(.95);border-color:var(--teal)}
.wallet-form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:20px}
.wallet-form-card h4{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.wf-field{margin-bottom:14px}
.wf-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.wf-field input,.wf-field select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;box-sizing:border-box}
.wf-field input:focus,.wf-field select:focus{border-color:var(--teal);outline:none}
.wallet-submit-btn{width:100%;padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:#06231f}
.wallet-submit-btn.withdraw{background:#ef4444;color:#fff}
.wallet-submit-btn.exchange{background:#a855f7;color:#fff}
.wallet-submit-btn:disabled{opacity:.6}
.wallet-section-title{font-size:15px;font-weight:700;margin:16px 0 12px;display:flex;align-items:center;gap:8px;color:var(--text)}
.wallet-tx-list{display:flex;flex-direction:column;gap:8px}
.wallet-tx-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.wtx-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.wtx-info{flex:1;min-width:0}
.wtx-info b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtx-info small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.wtx-right{text-align:right;flex-shrink:0}
.wtx-amount{display:block;font-size:13px;font-weight:700}
.wtx-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:8px;margin-top:4px;font-weight:600}
.wtx-badge.pending{background:#f59e0b20;color:#f59e0b}
.wtx-badge.approved{background:#14b8a620;color:#14b8a6}
.wtx-badge.rejected{background:#ef444420;color:#ef4444}
.exchange-rates-display{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.erd-item{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface-2);border-radius:10px;font-size:13px;font-weight:600}
.erd-item i{color:var(--teal);font-size:11px}
.exchange-preview{margin:12px 0}
.ep-result{padding:12px;background:var(--teal-soft);border-radius:10px;text-align:center}
.ep-result span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.ep-result b{font-size:18px;color:var(--teal)}
.wf-pay-info{font-size:12px;color:var(--teal);padding:10px;background:var(--surface-2);border-radius:10px;margin-bottom:12px;display:none}

/* ============ DONATION STYLES ============ */
.donation-header-card{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(135deg,#0f3942,#ec489920);border:1px solid var(--line);border-radius:16px;margin-bottom:16px}
.dhc-icon{width:50px;height:50px;border-radius:14px;background:#ec489920;display:grid;place-items:center;color:#ec4899;font-size:22px;flex-shrink:0}
.dhc-text h3{font-size:16px;margin-bottom:4px}
.dhc-text p{font-size:12px;color:var(--muted);line-height:1.4}
.donation-cause-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.dc-header{display:flex;gap:12px;margin-bottom:14px}
.dc-icon{width:42px;height:42px;border-radius:12px;background:#ec489920;display:grid;place-items:center;color:#ec4899;font-size:18px;flex-shrink:0}
.dc-info h4{font-size:14px;margin-bottom:4px}
.dc-info p{font-size:12px;color:var(--muted);line-height:1.4}
.dc-progress{margin-bottom:14px}
.dc-progress-bar{width:100%;height:8px;background:var(--surface-2);border-radius:8px;overflow:hidden;margin-bottom:6px}
.dc-progress-fill{height:100%;background:linear-gradient(90deg,#ec4899,#14b8a6);border-radius:8px;transition:width .6s}
.dc-progress-info{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.dc-donate-btn{width:100%;padding:12px;border:none;border-radius:12px;background:#ec4899;color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.dc-donate-btn:active{transform:scale(.97)}
.donate-cause-info{padding:12px;background:var(--surface-2);border-radius:12px;margin-bottom:14px}
.donate-cause-info h4{font-size:14px;margin-bottom:4px}
.donate-cause-info small{font-size:12px;color:var(--muted)}
.recent-donations-list{display:flex;flex-direction:column;gap:6px}


/* ====================================
   SURGICAL ITEMS STORE STYLES
   ==================================== */

/* Banner */
.surg-banner {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.surg-back {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
}
.surg-banner-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.surg-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}
.surg-banner-title h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}
.surg-banner-title p {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  margin: 2px 0 0;
}
.surg-banner-actions {
  display: flex;
  gap: 8px;
}
.surg-icon-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}
.surg-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search */
.surg-search-section {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  padding: 0 16px 16px;
}
.surg-search-box {
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
}
.surg-search-box i {
  color: #9ca3af;
  font-size: 16px;
}
.surg-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #374151;
  background: transparent;
}
.surg-search-box input::placeholder {
  color: #9ca3af;
}

/* Feature Badges */
.surg-features {
  background: linear-gradient(135deg, #c084fc, #e9d5ff);
  padding: 16px;
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.surg-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.25);
  border-radius: 12px;
  min-width: 90px;
}
.surg-feature i {
  font-size: 22px;
  color: #fff;
}
.surg-feature span {
  font-size: 11px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

/* Category Tabs */
.surg-cat-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.surg-cat-tabs::-webkit-scrollbar { display: none; }
.surg-cat-tab {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid #374151;
  background: transparent;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.surg-cat-tab.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* Products Header */
.surg-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px;
}
.surg-products-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0;
}
.surg-filter-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #4b5563;
  background: #1f2937;
  color: #d1d5db;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Product Cards */
.surg-product-list {
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.surg-product-card {
  background: #1e293b;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #334155;
}
.surg-card-top {
  display: flex;
  gap: 12px;
  position: relative;
}
.surg-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.surg-card-info {
  flex: 1;
  min-width: 0;
}
.surg-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #f3f4f6;
  margin: 0 0 3px;
}
.surg-card-brand {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 3px;
}
.surg-card-desc {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}
.surg-sterile-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #059669;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.surg-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding-left: 68px;
}
.surg-rating {
  font-size: 12px;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 4px;
}
.surg-rating i {
  font-size: 11px;
}
.surg-cat-badge {
  font-size: 11px;
  color: #d1d5db;
  background: #374151;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #4b5563;
}
.surg-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 68px;
  margin-top: 6px;
}
.surg-price-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.surg-price {
  font-size: 16px;
  font-weight: 700;
  color: #34d399;
}
.surg-old-price {
  font-size: 12px;
  color: #6b7280;
  text-decoration: line-through;
}
.surg-add-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #7c3aed;
  background: transparent;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
}
.surg-add-btn:hover {
  background: #7c3aed;
  color: #fff;
}
.surg-add-btn.disabled {
  border-color: #4b5563;
  color: #6b7280;
  cursor: not-allowed;
}
.surg-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  background: #7c3aed;
  border-radius: 8px;
  overflow: hidden;
}
.surg-qty-ctrl button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.surg-qty-ctrl span {
  padding: 0 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.surg-qty-ctrl.small button { width: 26px; height: 26px; font-size: 11px; }
.surg-qty-ctrl.small span { padding: 0 6px; font-size: 12px; }

/* Cart Widget */
.surg-cart-widget {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.surg-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.surg-cart-header h3 {
  color: #f3f4f6;
  font-size: 15px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.surg-cart-header button {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
}
.surg-cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.surg-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #334155;
}
.surg-cart-icon {
  font-size: 22px;
}
.surg-cart-item-info {
  flex: 1;
  min-width: 0;
}
.surg-cart-item-name {
  display: block;
  font-size: 13px;
  color: #e5e7eb;
  font-weight: 500;
}
.surg-cart-item-qty {
  font-size: 11px;
  color: #6b7280;
}
.surg-cart-item-price {
  font-size: 13px;
  color: #34d399;
  font-weight: 600;
  white-space: nowrap;
}
.surg-cart-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #334155;
}
.surg-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.surg-cart-total span { color: #d1d5db; font-size: 14px; }
.surg-total-price { color: #34d399; font-size: 18px; font-weight: 700; }
.surg-cart-actions {
  display: flex;
  gap: 10px;
}
.surg-bulk-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid #7c3aed;
  background: transparent;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.surg-checkout-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Bulk Order Banner */
.surg-bulk-banner {
  margin: 20px 16px;
  padding: 18px 16px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.surg-bulk-text h4 {
  color: #fff;
  font-size: 15px;
  margin: 0 0 3px;
  font-weight: 700;
}
.surg-bulk-text p {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  margin: 0;
}
.surg-bulk-contact-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Modal Overlay */
.surg-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.surg-modal {
  background: #1e293b;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
}
.surg-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.surg-modal-header h3 {
  color: #f3f4f6;
  font-size: 17px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.surg-modal-header button {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
}
.surg-form-field {
  margin-bottom: 14px;
}
.surg-form-field label {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
  font-weight: 500;
}
.surg-form-field input,
.surg-form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #111827;
  color: #f3f4f6;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.surg-form-field input:focus,
.surg-form-field textarea:focus {
  border-color: #7c3aed;
}
.surg-order-summary {
  background: #111827;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.surg-order-summary p {
  color: #d1d5db;
  font-size: 13px;
  margin: 4px 0;
}
.surg-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.surg-empty {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}
.surg-empty i { font-size: 40px; margin-bottom: 12px; }
.surg-empty p { margin: 0; font-size: 14px; }

/* ============ PUBLIC NURSE SECTION (live from nursing portal) ============ */
.nurse-pub-head{display:flex;align-items:center;justify-content:space-between;padding-right:16px}
.nurse-pub-all{font-size:13px;font-weight:600;color:var(--teal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nurse-pub-all:hover{text-decoration:underline}

/* Short intro paragraph under the slider (replaces the old empty hero) */
.nurse-intro{font-size:13.5px;color:var(--muted,#9fb0bb);line-height:1.55;margin:14px 16px 0}

/* Verified-nurse grid: 2 per line on phone, 4 per line on laptop.
   Cards are VERTICAL so they fit the grid columns and never overflow. */
.nurse-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  padding:0 16px 16px;align-items:stretch;
}
.nurse-grid .ads-loading,.nurse-grid .ads-empty{grid-column:1 / -1}

.np-card{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:14px;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease;
}
.np-card:hover{transform:translateY(-2px);border-color:rgba(20,184,166,.5)}
.np-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.np-avatar{position:relative;width:56px;height:56px;border-radius:14px;flex-shrink:0;overflow:hidden;background:rgba(20,184,166,.12);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:22px}
.np-avatar img{width:100%;height:100%;object-fit:cover}
.np-online{position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #0f1b22}
.np-info{flex:1;min-width:0}
.np-info h4{margin:0 0 2px;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-spec{margin:0 0 6px;font-size:12.5px;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--muted,#9fb0bb)}
.np-meta span{white-space:nowrap}
.np-meta i{margin-right:3px}
.np-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.np-chips span{font-size:10.5px;background:rgba(255,255,255,.06);color:#cfe;padding:2px 8px;border-radius:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.np-rate{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;flex-shrink:0}
.np-book{
  margin-top:auto;width:100%;background:var(--teal,#14b8a6);color:#04221f;border:none;
  font-weight:700;font-size:12.5px;padding:9px 16px;border-radius:12px;cursor:pointer;
}
.np-book:active{transform:scale(.98)}

/* Laptop / desktop: 4 nurse cards per line */
@media (min-width: 1024px){
  .nurse-grid{grid-template-columns:repeat(4,1fr);gap:18px;padding:0 24px 16px}
}
@media (min-width: 1200px){
  .nurse-grid{grid-template-columns:repeat(4,1fr);gap:20px}
}

/* ====================================================================
   IN-APP NURSE PROFILE  (opens when a nurse card is tapped)
   ==================================================================== */
.nurse-subbar i{cursor:pointer}
.nurse-profile{max-width:760px;margin:0 auto;overflow-x:hidden}
.nurse-profile *{min-width:0;box-sizing:border-box}

.npf-id{display:flex;gap:14px;align-items:center;padding:18px 16px 12px}
.npf-ava{position:relative;width:84px;height:84px;flex-shrink:0;border-radius:20px;overflow:hidden;background:rgba(20,184,166,.12);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:34px}
.npf-ava img{width:100%;height:100%;object-fit:cover}
.npf-dot{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #0f1b22}
.npf-dot.off{background:#64748b}
.npf-id-txt{flex:1;min-width:0}
.npf-id-txt h1{margin:0 0 3px;font-size:20px;font-weight:800;color:#fff;line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.npf-verified{color:#22c55e;font-size:15px}
.npf-spec{margin:0 0 5px;font-size:13.5px;color:var(--teal);font-weight:600}
.npf-rating{font-size:13px;color:#e6edf1}.npf-rating i{color:#f5b301;margin-right:3px}.npf-rating span{color:var(--muted)}
.npf-status{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(148,163,184,.18);color:#94a3b8}
.npf-status.on{background:rgba(34,197,94,.15);color:#22c55e}

.npf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 16px 4px}
.npf-stat{background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.npf-stat i{color:var(--teal);font-size:16px}
.npf-stat b{color:#fff;font-size:14px;font-weight:800;word-break:break-word}
.npf-stat small{color:var(--muted);font-size:10.5px}

.npf-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px}
.npf-act{border:none;border-radius:14px;padding:12px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff}
.npf-act i{font-size:16px}
.npf-act:active{transform:scale(.97)}
.npf-act.chat{background:linear-gradient(135deg,#14b8a6,#0d9488)}
.npf-act.call{background:linear-gradient(135deg,#22c55e,#16a34a)}
.npf-act.video{background:linear-gradient(135deg,#3b82f6,#2563eb)}

.npf-block{padding:8px 16px 4px}
.npf-h{margin:12px 0 10px;font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.npf-h i{color:var(--teal);font-size:14px}
.npf-loc{background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 14px}
.npf-loc p{margin:0 0 7px;font-size:13px;color:#cdd9df;display:flex;align-items:center;gap:9px;word-break:break-word}
.npf-loc p:last-child{margin-bottom:0}.npf-loc i{color:var(--teal);width:16px;text-align:center;flex-shrink:0}

.npf-details{background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.npf-drow{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.npf-drow:last-child{border-bottom:none}
.npf-drow span{color:var(--muted)}.npf-drow b{color:#fff;text-align:right;word-break:break-word}
.npf-bio{margin:10px 2px 0;font-size:13px;color:#b9c6cd;line-height:1.55}

.npf-chips{display:flex;flex-wrap:wrap;gap:7px}
.npf-chips span{font-size:11.5px;background:rgba(20,184,166,.12);color:#7ee3d6;padding:5px 11px;border-radius:20px;border:1px solid rgba(20,184,166,.22)}

.npf-svc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.npf-svc{background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.npf-svc span{font-size:20px}.npf-svc small{font-size:10.5px;color:#cdd9df;line-height:1.2}

.npf-pkg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.npf-pkg{background:var(--card,#0f1b22);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.npf-pkg-dot{width:12px;height:12px;border-radius:50%}
.npf-pkg h4{margin:2px 0 0;font-size:14px;color:#fff;font-weight:800}
.npf-pkg-price{font-size:14px;font-weight:800;color:var(--teal)}
.npf-pkg p{margin:0;font-size:10.5px;color:var(--muted);line-height:1.35}
.npf-pkg-btn{margin-top:6px;width:100%;background:rgba(20,184,166,.15);color:#7ee3d6;border:1px solid rgba(20,184,166,.3);font-weight:700;font-size:11.5px;padding:7px;border-radius:10px;cursor:pointer}
.npf-pkg-btn:active{transform:scale(.97)}

@media (max-width:420px){
  .npf-svc-row{grid-template-columns:repeat(2,1fr)}
  .npf-pkg-row{grid-template-columns:1fr;gap:9px}
  .npf-pkg{flex-direction:row;justify-content:flex-start;text-align:left;flex-wrap:wrap;gap:4px 10px}
  .npf-pkg-btn{width:auto;margin-top:0;margin-left:auto}
}

/* --------------------------------------------------------------------
   DESKTOP layout for the in-app nurse profile.
   On mobile the profile is a single 760px column (correct). On desktop
   that centered column left big empty gutters on both sides. Here we let
   the profile use the full content width next to the sidebar rail and
   arrange the info blocks into a responsive grid so the space is filled.
   -------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* .nurse-profile IS the .page element, so drop the narrow centering and
     let it share the same left edge / max-width as every other page. */
  .nurse-profile{
    max-width: 1400px;
    margin: 0 auto 0 0;          /* left-aligned with the rest of the app  */
    /* match the horizontal breathing room the other .page screens get on
       desktop (6vw) so the profile is neither centered-narrow nor glued to
       the sidebar rail. */
    padding: 20px 6vw 140px !important;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-auto-flow: dense;
    column-gap: 26px;
    row-gap: 4px;
    align-items: start;
  }

  /* Header identity, stat cards and action buttons span the full width
     across the top of both columns. */
  .nurse-profile > .npf-id,
  .nurse-profile > .npf-stats,
  .nurse-profile > .npf-actions{ grid-column: 1 / -1; }

  /* Bigger, more prominent identity block on desktop. */
  .nurse-profile > .npf-id{ padding: 6px 4px 14px; gap: 20px; }
  .nurse-profile .npf-ava{ width: 108px; height: 108px; font-size: 42px; border-radius: 24px; }
  .nurse-profile .npf-id-txt h1{ font-size: 26px; }
  .nurse-profile .npf-spec{ font-size: 15px; }
  .nurse-profile .npf-rating{ font-size: 14.5px; }

  /* Stats + actions get roomier cards but stay 3-up. */
  .nurse-profile > .npf-stats{ padding: 6px 4px 4px; gap: 16px; }
  .nurse-profile .npf-stat{ padding: 18px 10px; }
  .nurse-profile .npf-stat i{ font-size: 20px; }
  .nurse-profile .npf-stat b{ font-size: 18px; }
  .nurse-profile .npf-stat small{ font-size: 12px; }

  .nurse-profile > .npf-actions{ padding: 14px 4px 18px; gap: 16px; max-width: 720px; }
  .nurse-profile .npf-act{ padding: 15px 8px; font-size: 13.5px; }
  .nurse-profile .npf-act i{ font-size: 18px; }

  /* Info blocks flow into the two columns. Reset the inline horizontal
     padding used on mobile so cards align to the grid tracks. */
  .nurse-profile > .npf-block{ padding: 4px 4px 10px; }
  .nurse-profile .npf-h{ font-size: 16px; margin: 8px 0 12px; }

  /* Care packages usually have the most content — give it the full width
     so the three package cards stay side-by-side and readable. */
  .nurse-profile > .npf-block:last-of-type{ grid-column: 1 / -1; }
  .nurse-profile .npf-pkg-row{ gap: 16px; }
  .nurse-profile .npf-pkg{ padding: 18px 14px; }

  .nurse-profile .npf-svc-row{ gap: 12px; }
}

/* On very wide screens keep the profile readable but still full-bleed to
   the content area — no centered narrow column, no empty side gutters. */
@media (min-width: 1200px) {
  .nurse-profile{
    column-gap: 32px;
    padding-right: 4px !important;
  }
}

/* Pharmacy Portal <-> Public Page Connection Styles */
.pharm-nearby-card.pharm-selected {
  border: 2px solid #14b8a6 !important;
  background: rgba(20, 184, 166, 0.08) !important;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.15) !important;
}
.pharm-nearby-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pharm-nearby-card {
  transition: all 0.2s ease;
}


/* Surgical Store Filter Chips */
.surg-store-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.surg-store-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(124,58,237,0.3);
  background: transparent;
  color: #a78bfa;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.surg-store-chip:hover { background: rgba(124,58,237,0.15); }
.surg-store-chip.active {
  background: rgba(124,58,237,0.25);
  border-color: #7c3aed;
  color: #c4b5fd;
}


/* ===== Wallet payment-method credentials box (added by upgrade_wallet_admin) ===== */
.pm-cred-box{background:#f0fdfa;border:1px solid #99f6e4;border-radius:12px;padding:12px 14px;margin:6px 0 14px;}
.pm-cred-head{font-weight:700;color:#0f766e;display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;}
.pm-cred-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed #ccfbf1;font-size:13px;}
.pm-cred-row:last-child{border-bottom:none;}
.pm-cred-row span{color:#64748b;}
.pm-cred-row b{color:#0f172a;text-align:right;word-break:break-all;}
.pm-cred-copy{cursor:pointer;color:#0d9488;display:inline-flex;align-items:center;gap:6px;}
.pm-cred-copy:hover{text-decoration:underline;}
.pm-cred-note{font-size:12px;color:#475569;background:#ecfeff;border-radius:8px;padding:8px 10px;margin-top:8px;line-height:1.5;}
.pm-cred-empty{font-size:12.5px;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:10px 12px;margin:6px 0 12px;}
.wf-pay-info{margin:2px 0 4px;}