/* ==========================================================================
   Safe-Plus Dental Care — Design System
   Palette: Navy #1B3A5C · Sky #00AEEF · Off-white #F7FAFC · Ink #2D3A45
   Type: Poppins (display) / Roboto (body) / Noto Sans Bengali (bn)
   Spacing follows a golden-ratio scale: 8 13 21 34 55 89 144
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Roboto:wght@400;500;700&family=Noto+Sans+Bengali:wght@400;600&display=swap');

:root{
  /* Tells the browser this site is designed for LIGHT mode only. Without
     this, some phones/browsers (especially Android Chrome's "Force Dark"
     and Samsung Internet's dark mode) automatically re-colour unstyled
     parts of the page for dark mode — which can turn text and its
     background the same shade of white/light-grey and make it
     unreadable. This single line prevents that. */
  color-scheme: light only;
  --navy:#1B3A5C;
  --navy-deep:#132C46;
  --sky:#00AEEF;
  --sky-deep:#0077A3;
  /* --sky-deep was #0090C7 (contrast with white text = 3.6:1, fails the
     4.5:1 WCAG AA minimum for normal-size text/buttons). Darkened so
     every white-on-sky button and sky-coloured link text passes AA. */
  --sky-btn-hover:#00597D; /* extra-dark hover state for primary buttons, for a clear pressed/hover feel */
  --bg:#F7FAFC;
  --bg-alt:#EEF4F8;
  --ink:#2D3A45;
  --ink-soft:#5B6B77;
  --white:#FFFFFF;
  --success:#4CAF7D;
  --error:#E4626F;
  --border:#E1E9EF;

  --space-1:.5rem;    /* 8px  */
  --space-2:.8125rem; /* 13px */
  --space-3:1.3125rem;/* 21px */
  --space-4:2.125rem; /* 34px */
  --space-5:3.4375rem;/* 55px */
  --space-6:5.5625rem;/* 89px */

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --shadow-s:0 2px 10px rgba(27,58,92,.06);
  --shadow-m:0 10px 30px rgba(27,58,92,.10);
  --shadow-l:0 20px 50px rgba(27,58,92,.16);
  --ease:cubic-bezier(.22,1,.36,1);

  /* Single source of truth for the page's left/right edge padding, used
     by .container, the nav bar, and the hero's full-bleed image so they
     always line up exactly — never drift out of sync with each other. */
  --container-pad:16px;
}
@media (max-width:380px){
  :root{--container-pad:10px;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* Fixes a white flash/gap on mobile browser zoom-out or elastic overscroll:
   both html and body get the page background, and rubber-band scroll is
   disabled so there's never bare white beyond the page edges. */
html,body{min-height:100dvh;}
/* Stops pinch-zooming out on mobile from revealing empty space beside the
   page. Cause: the slide-in mobile menu (.nav-links, see the @media block
   below) sits just off the right edge of the screen via a CSS transform
   until it's opened, and some phones still count that off-screen area
   when working out how wide the page is. IMPORTANT: this uses "clip", not
   "hidden" — an earlier attempt used overflow-x:hidden here, which fixed
   the same symptom but also disabled native momentum/smooth scrolling on
   some phones. "clip" gives the same visual fix without that side effect. */
html{overflow-x:hidden;overflow-x:clip;}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;
  font-family:'Roboto',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  width:100%;
}

h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  color:var(--navy);
  line-height:1.2;
  margin:0 0 var(--space-2);
  font-weight:700;
}
h1{font-size:clamp(2rem,4vw,3.05rem);font-weight:800;}
h2{font-size:clamp(1.5rem,3vw,2.25rem);}
h3{font-size:1.375rem;}
p{margin:0 0 var(--space-2);color:var(--ink-soft);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.bn{font-family:'Noto Sans Bengali','Roboto',sans-serif;}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--container-pad);}
.section{padding:var(--space-6) 0;}
.section-alt{background:var(--bg-alt);}
.eyebrow{
  display:inline-block;color:var(--sky-deep);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.75rem;margin-bottom:var(--space-1);
}
.section-head{max-width:640px;margin:0 auto var(--space-5);text-align:center;}
.section-head p{margin:0 auto;}

/* Smile-arc underline — signature motif echoing the brand's tooth curve */
.arc-accent{position:relative;display:inline-block;}
.arc-accent::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-10px;height:10px;
  border-bottom:3px solid var(--sky);border-radius:0 0 50% 50%/0 0 100% 100%;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--sky-deep);color:var(--white);box-shadow:var(--shadow-s);}
.btn-primary:hover{background:var(--sky-btn-hover);transform:translateY(-2px);box-shadow:var(--shadow-m);}
.btn-outline{border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--navy);transform:translateY(-2px);}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow-m);}
.btn-ghost{border-color:var(--border);color:var(--navy);background:var(--white);}
.btn-danger{border-color:#c0392b;color:#fff;background:#c0392b;}
.btn-danger:hover{background:#a93226;}
.record-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;}
.record-badge.blue{background:#e7f0fe;color:#1B3A5C;}
.record-badge.red{background:#fdecea;color:#c0392b;}
.record-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--border);background:#f4f6f8;display:flex;align-items:center;justify-content:center;font-size:1.4rem;}
.golden-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:linear-gradient(135deg,#f7e08a,#c9a227);color:#4a3b00;}
.stock-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;}
.stock-badge.ok{background:#DCF5E3;color:#136B39;}
.stock-badge.low{background:#FBDCE0;color:#A11E3A;}

/* ---- Rx-side slide-in patient records panel ---- */
.records-slide-panel{position:fixed;top:0;right:0;width:min(380px,92vw);height:100vh;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.18);z-index:1200;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.records-slide-panel.open{transform:translateX(0);}
.records-slide-header{padding:1rem 1.1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;}
.records-slide-body{padding:1rem 1.1rem;overflow-y:auto;flex:1;}
.records-slide-toggle{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:1150;background:var(--navy);color:#fff;border:none;border-radius:8px 0 0 8px;padding:.7rem .5rem;font-size:.8rem;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;}
.records-slide-toggle .badge-count{writing-mode:horizontal-tb;display:block;background:#c0392b;color:#fff;border-radius:999px;font-size:.7rem;padding:.05rem .4rem;margin-top:.3rem;}
.btn-ghost:hover{border-color:var(--sky);color:var(--sky-deep);}
.btn-sm{padding:.6rem 1.15rem;font-size:.85rem;}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--sky);outline-offset:2px;
}

/* ===== Header / Nav ("tab bar") ===== */
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--container-pad);max-width:1180px;margin:0 auto;gap:var(--space-2);}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Poppins',sans-serif;font-weight:800;color:var(--navy);font-size:1.05rem;}
.brand img{width:38px;height:38px;border-radius:9px;}
.nav-links{display:flex;align-items:center;gap:var(--space-4);flex-wrap:nowrap;}
.nav-links a{font-weight:600;font-size:.92rem;color:var(--ink);padding:.4rem 0;position:relative;white-space:nowrap;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--sky);transition:width .25s var(--ease);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%;}
.nav-links a[aria-current="page"]{color:var(--sky-deep);}
.nav-cta{display:flex;align-items:center;gap:var(--space-2);flex:none;}
.nav-login-btn{font-weight:700;font-size:.85rem;color:var(--navy);border:1.5px solid var(--border);border-radius:999px;padding:.5rem 1rem;background:var(--white);white-space:nowrap;}
.nav-login-btn:hover{border-color:var(--sky);color:var(--sky-deep);}
.nav-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--sky-deep);color:#fff;font-weight:800;font-size:.72rem;vertical-align:middle;margin-right:.2rem;}
/* Book Appointment gets its own high-contrast treatment wherever it appears in the nav */
.nav-book-btn{
  background:var(--sky-deep)!important;color:#fff!important;border:2px solid var(--sky-deep)!important;
  font-weight:800!important;box-shadow:0 4px 14px rgba(0,119,163,.35);white-space:nowrap;
}
.nav-book-btn:hover{background:var(--sky-btn-hover)!important;border-color:var(--sky-btn-hover)!important;}
.nav-toggle{display:none;background:none;border:2px solid var(--border);border-radius:10px;padding:.5rem;flex:none;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px;}
.only-mobile-menu{display:none;}

/* COMPACT tier — any "computer" window that's a bit narrower (small
   laptop, half-split desktop window, tablet landscape) still gets the
   FULL nav bar (never the hamburger), just with tighter spacing so
   nothing gets crowded or clipped. Real phones (see the ≤760px block
   further down) are unaffected and keep their existing hamburger menu. */
@media (min-width:761px) and (max-width:1180px){
  .nav{padding:var(--space-2) var(--space-2);gap:.4rem;}
  .brand span{display:none;}
  .brand img{width:32px;height:32px;}
  .nav-links{gap:.55rem;}
  .nav-links a{font-size:.78rem;}
  .nav-login-btn{padding:.4rem .65rem;font-size:.76rem;}
  .nav-book-btn{padding:.55rem .8rem!important;font-size:.78rem;}
}

@media (max-width:760px){
  /* Fixed to the true dynamic viewport height and independently scrollable,
     so long menus (or short screens) never get visually clipped. */
  .nav-links{
    position:fixed;left:0;right:0;top:var(--header-h,64px);
    height:calc(100dvh - var(--header-h,64px));
    background:var(--white);flex-direction:column;
    align-items:stretch;padding:var(--space-4) var(--space-4) var(--space-6);gap:var(--space-3);
    transform:translateX(100%);transition:transform .3s var(--ease);
    overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:.7rem 0;font-size:1rem;}
  .nav-links .nav-book-btn{width:100%;text-align:center;padding:1rem;font-size:1rem;margin-top:var(--space-2);}
  .nav-toggle{display:block;}
  .nav-cta{display:none;} /* phone number in the header isn't needed on mobile — the call FAB + emergency banner already cover it */
  .only-mobile-menu{display:list-item;}
}

/* ===== Hero ===== */
.hero{
  position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--white);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(0,174,239,.35), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(0,174,239,.18), transparent 40%);
  pointer-events:none;
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-5);
  align-items:center;padding:var(--space-6) 0;
}
.hero h1{color:var(--white);}
.hero p.lead{color:rgba(255,255,255,.82);font-size:1.05rem;max-width:520px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 var(--space-4);}
.hero-badge{
  display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);padding:.55rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.hero-photo{position:relative;}
.hero-photo .frame{
  position:relative;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-l);
  border:6px solid rgba(255,255,255,.12);
}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;}

/* Hero slideshow — a real horizontal slide (not a crossfade), and the
   full cover image is always shown uncropped (object-fit:contain) so
   no text/CTA baked into the design gets cut off. */
.hero-slider{position:relative;aspect-ratio:4/5;background:var(--navy-deep);}
.hero-slider-track{display:flex;height:100%;width:100%;transition:transform .7s var(--ease);}
.hero-slider-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;background:var(--navy-deep);}
.hero-slider-dots{position:absolute;left:0;right:0;bottom:var(--space-2);display:flex;justify-content:center;gap:.4rem;z-index:2;}
.hero-slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);cursor:pointer;transition:background .3s var(--ease);}
.hero-slider-dot.active{background:var(--white);}

/* Stat card sits BELOW the image, in normal flow, instead of floating on
   top of it — avoids overlapping/covering the sliding cover images. */
.hero-stat-card{
  background:var(--white);color:var(--navy);margin-top:var(--space-3);
  border-radius:var(--radius-m);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-m);
  display:flex;justify-content:center;gap:var(--space-4);
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1;max-width:none;margin:0;}
}
@media (max-width:640px){
  /* Let the hero image run full-bleed edge-to-edge on phones instead of
     sitting in a narrow, padded box — this is what was reading as
     "cut off"/cramped. */
  .hero-photo{margin:0 calc(var(--container-pad) * -1);}
  .hero-photo .frame{border-radius:0;border-left:none;border-right:none;border-width:3px;}
  .hero-slider{aspect-ratio:1/1;}
  .hero-stat-card{margin-left:var(--container-pad);margin-right:var(--container-pad);}
}
.stat-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.5rem;color:var(--navy);}
.stat-label{font-size:.75rem;color:var(--ink-soft);}

/* Two-column content layouts (photo+text, text+photo) used on the home,
   services, and doctor-profile pages. Stacks to a single column on
   phones/small tablets so nothing gets squeezed or pushed off-screen. */
.split-grid{display:grid;gap:var(--space-5);}
.split-grid-11{grid-template-columns:1fr 1fr;align-items:center;}
.split-grid-11-top{grid-template-columns:1fr 1fr;align-items:start;}
.split-grid-82{grid-template-columns:.8fr 1.2fr;align-items:start;}
@media (max-width:820px){
  .split-grid-11,.split-grid-11-top,.split-grid-82{grid-template-columns:1fr;}
}

/* ===== Cards ===== */
.grid{display:grid;gap:var(--space-4);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.rx-vitals-row{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:640px){
  .rx-vitals-row{grid-template-columns:1fr 1fr;}
  .admin-main .grid-2,.admin-main .grid-3{grid-template-columns:1fr;}
}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:var(--space-4);box-shadow:var(--shadow-s);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);}
.card-icon{
  width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--sky),var(--sky-deep));
  display:flex;align-items:center;justify-content:center;color:var(--white);margin-bottom:var(--space-3);font-size:1.4rem;
}
.card a.card-link{color:var(--sky-deep);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:.3rem;}

/* Why choose us */
.feature-row{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-bottom:1px solid var(--border);}
.feature-row:last-child{border-bottom:none;}
.feature-num{
  font-family:'Poppins',sans-serif;font-weight:800;color:var(--sky);font-size:1.6rem;min-width:2.4ch;
}

/* Counters */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.counter-card{text-align:center;padding:var(--space-4) var(--space-2);background:var(--white);border-radius:var(--radius-m);box-shadow:var(--shadow-s);transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.counter-card[data-detail]:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);}
.counter-num{font-family:'Poppins',sans-serif;font-weight:800;color:var(--navy);font-size:2.2rem;}
@media (max-width:768px){.counters{grid-template-columns:repeat(2,1fr);}}
.counters-3{grid-template-columns:repeat(3,1fr);max-width:700px;margin:0 auto var(--space-5);}
@media (max-width:520px){.counters-3{grid-template-columns:1fr;}}

/* Testimonials */
.t-card{background:var(--white);border-radius:var(--radius-m);border:1px solid var(--border);padding:var(--space-4);box-shadow:var(--shadow-s);}
.stars{color:#F5A623;letter-spacing:2px;margin-bottom:var(--space-1);font-size:.95rem;}
.t-person{display:flex;align-items:center;gap:.7rem;margin-top:var(--space-3);}
.t-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy);}
.carousel{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2);}
.carousel::-webkit-scrollbar{height:6px;}
.carousel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.carousel > *{scroll-snap-align:start;flex:0 0 min(340px,85%);}

/* Before/After */
.ba-slider{position:relative;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-m);aspect-ratio:4/3;user-select:none;}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-slider .after-wrap{clip-path:inset(0 0 0 50%);}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-1px);}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--white);}
.ba-handle .grip{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:42px;height:42px;background:var(--white);
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-m);font-weight:800;color:var(--navy);
}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;}
.ba-tag{position:absolute;top:12px;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--white);background:rgba(27,58,92,.75);}
.ba-tag.before{left:12px;}
.ba-tag.after{right:12px;}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-4);}
.filter-btn{
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--border);background:var(--white);font-weight:600;font-size:.85rem;
  transition:all .2s var(--ease);
}
.filter-btn.active,.filter-btn:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
.consent-note{background:var(--bg-alt);border-left:4px solid var(--sky);padding:var(--space-2) var(--space-3);border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:.88rem;color:var(--ink-soft);margin-top:var(--space-4);}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(19,44,70,.92);display:none;align-items:center;justify-content:center;z-index:2000;padding:var(--space-3);}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw);max-height:85vh;border-radius:var(--radius-m);}
.lightbox-close{position:absolute;top:var(--space-3);right:var(--space-3);background:var(--white);border:none;border-radius:50%;width:44px;height:44px;font-size:1.2rem;}

/* FAQ */
.faq-item{border:1px solid var(--border);border-radius:var(--radius-s);margin-bottom:var(--space-2);overflow:hidden;background:var(--white);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:var(--space-3);font-weight:700;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:.98rem;
}
.faq-q .plus{transition:transform .25s var(--ease);color:var(--sky);font-size:1.3rem;flex:none;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a p{padding:0 var(--space-3) var(--space-3);margin:0;}

/* Locations */
.loc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-s);}
.loc-map{aspect-ratio:16/9;border:none;width:100%;display:block;background:var(--bg-alt);}
.loc-body{padding:var(--space-4);}
.loc-row{display:flex;gap:.7rem;margin-bottom:.7rem;font-size:.92rem;align-items:flex-start;}
.loc-row strong{color:var(--navy);}
.loc-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-3);}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-3);}
.field.full{grid-column:1/-1;}
.field label{font-weight:700;font-size:.85rem;color:var(--navy);}
.field input,.field select,.field textarea{
  padding:.85rem 1rem;border-radius:var(--radius-s);border:1.5px solid var(--border);font-family:inherit;
  font-size:.95rem;background:var(--white);color:var(--ink);transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky);outline:none;}
.field .hint{font-size:.78rem;color:var(--ink-soft);}
.field.error input,.field.error select,.field.error textarea{border-color:var(--error);}
.field .error-msg{color:var(--error);font-size:.8rem;display:none;}
.field.error .error-msg{display:block;}
@media (max-width:768px){.form-grid{grid-template-columns:1fr;}.field.full{grid-column:auto;}}

.booking-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-5);align-items:flex-start;}
@media (max-width:920px){.booking-wrap{grid-template-columns:1fr;}}
.confirm-box{
  display:none;text-align:center;padding:var(--space-5) var(--space-3);background:var(--white);border-radius:var(--radius-m);
  border:1px solid var(--border);box-shadow:var(--shadow-m);
}
.confirm-box.show{display:block;}
.confirm-tick{
  width:64px;height:64px;border-radius:50%;background:var(--success);color:var(--white);display:flex;align-items:center;
  justify-content:center;margin:0 auto var(--space-3);font-size:1.8rem;
}

/* Emergency banner — whole strip is a tel: link now, so a tap anywhere calls */
.emg-banner{
  display:block;background:var(--error);color:var(--white);text-align:center;
  padding:.65rem var(--container-pad);font-size:.85rem;font-weight:700;
}
.emg-banner:hover,.emg-banner:focus-visible{background:#cf4b57;}
.emg-banner .tap-hint{font-weight:400;opacity:.85;margin-left:.3rem;}

/* ===== Install banners (top + bottom) ===== */
.install-banner-top,.install-banner-bottom{
  display:none;align-items:center;justify-content:space-between;gap:var(--space-2);
  background:var(--navy);color:#fff;padding:.7rem var(--container-pad);font-size:.85rem;
}
.install-banner-top.show,.install-banner-bottom.show{display:flex;}
.install-banner-top{position:sticky;top:0;z-index:999;}
.install-banner-bottom{position:fixed;left:0;right:0;bottom:0;z-index:950;box-shadow:0 -6px 20px rgba(0,0,0,.15);}
.install-banner-top strong,.install-banner-bottom strong{color:var(--sky);}
.install-banner-top .btn,.install-banner-bottom .btn{flex:none;}
.install-banner-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1rem;padding:.2rem .4rem;flex:none;}

/* ===== Team / Doctor carousel ===== */
.team-track{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-2) 4px var(--space-3);scroll-behavior:smooth;}
.team-track::-webkit-scrollbar{height:6px;}
.team-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.team-slide{
  scroll-snap-align:start;flex:0 0 min(260px,72%);background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-m);padding:var(--space-3);text-align:center;cursor:pointer;
  box-shadow:var(--shadow-s);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.team-slide:hover,.team-slide:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-m);}
.team-photo{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin:0 auto var(--space-2);max-width:160px;border:4px solid var(--bg-alt);}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.team-slide h3{margin-bottom:.2rem;font-size:1.05rem;}
.team-name-link{color:inherit;text-decoration:none;}
.team-name-link:hover,.team-name-link:focus-visible{color:var(--sky-deep);text-decoration:underline;}
.doctor-card{text-align:center;}
.doctor-card .team-photo{max-width:180px;}
.doctor-card .btn{margin-top:var(--space-2);}
.team-role{font-size:.82rem;color:var(--ink-soft);margin:0;}

/* Home page "Two Doctors" focus grid — deliberately bigger/bolder than
   the plain listing on /doctors.html so both doctors read as equally
   important the moment someone lands on the home page. */
.doctor-focus-grid{max-width:900px;margin:0 auto;}
.doctor-focus-card{
  position:relative;overflow:hidden;padding-top:calc(var(--space-4) + 5px);
  border:1px solid var(--border);
}
.doctor-focus-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--sky),var(--sky-deep));}
.doctor-focus-card .team-photo{max-width:210px;border-width:5px;}
.doctor-focus-card h3{font-size:1.3rem;}
.doctor-focus-card .team-role{font-size:.9rem;}
.doctor-focus-card .doctor-focus-bio{font-size:.86rem;color:var(--ink-soft);margin:.5rem 0 var(--space-2);}

.team-modal,.auth-modal{position:fixed;inset:0;background:rgba(19,44,70,.6);display:none;align-items:center;justify-content:center;z-index:2100;padding:var(--space-3);}
.team-modal.open,.auth-modal.open{display:flex;}
.team-modal-card,.auth-modal-card{
  position:relative;background:var(--white);border-radius:var(--radius-l);padding:var(--space-4);
  max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-l);text-align:center;
}
.team-modal-close,.auth-modal-close{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--bg-alt);border:none;border-radius:50%;width:36px;height:36px;font-size:1rem;}
.team-modal-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto var(--space-2);border:4px solid var(--bg-alt);}
.team-modal-role{color:var(--sky-deep);font-weight:700;font-size:.88rem;}
.team-modal-quals{font-size:.85rem;color:var(--ink-soft);}
.team-modal-bio{font-size:.9rem;text-align:left;margin-top:var(--space-2);}
.team-modal-reg{margin-top:var(--space-2);}

/* ===== Auth (login/signup) modal ===== */
.auth-modal-card{text-align:left;max-width:380px;}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:var(--space-3);background:var(--bg-alt);border-radius:999px;padding:.3rem;}
.auth-tab{flex:1;border:none;background:none;padding:.6rem;border-radius:999px;font-weight:700;color:var(--ink-soft);}
.auth-tab.active{background:var(--navy);color:#fff;}
.auth-form .field{margin-bottom:var(--space-2);}
.auth-msg{text-align:center;font-size:.85rem;color:var(--sky-deep);font-weight:600;min-height:1.2em;margin-top:var(--space-2);}

/* ===== Admin panel ===== */
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100dvh;}
/* IMPORTANT: without this, the class rule above (display:grid) silently
   overrides the native "hidden" HTML attribute used to gate the whole
   dashboard behind login — meaning all admin data would render in the
   page before the person signs in, even though it's visually behind the
   login card. This rule restores "hidden" as the final word. */
.admin-shell[hidden]{display:none;}
@media (max-width:860px){.admin-shell{grid-template-columns:1fr;}}
.admin-sidebar{background:var(--navy-deep);color:#fff;padding:var(--space-3);}
.admin-sidebar h2{color:#fff;font-size:1.05rem;}
.admin-nav a{display:block;padding:.7rem .8rem;border-radius:var(--radius-s);color:rgba(255,255,255,.8);font-weight:600;font-size:.9rem;margin-bottom:.3rem;}
.admin-nav a.active,.admin-nav a:hover{background:rgba(255,255,255,.1);color:#fff;}
.admin-main{padding:var(--space-4);background:var(--bg);}
.admin-panel{display:none;}
.admin-panel.active{display:block;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-m);}
.table-scroll .admin-table{min-width:640px;border-radius:0;}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-s);}
.admin-table th,.admin-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:.88rem;}
.admin-table th{background:var(--bg-alt);color:var(--navy);}
.role-badge{padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--bg-alt);color:var(--navy);}
/* ==========================================================================
   ADMIN PANEL — Clinical & Billing extensions
   (Patients, Prescriptions, Payments/Vouchers, Print & PDF documents)
   Added on top of the existing Admin styles above — safe to edit colours/
   spacing here without touching the public website's look.
   ========================================================================== */

/* ---- Rich-text post editor (Admin Panel Blog Posts tab) ---- */
.editor-toolbar{display:flex;gap:.3rem;flex-wrap:wrap;background:var(--bg-alt);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-s) var(--radius-s) 0 0;padding:.4rem;}
.editor-toolbar .btn{padding:.4rem .7rem;}
.rich-editor{min-height:180px;border:1px solid var(--border);border-radius:0 0 var(--radius-s) var(--radius-s);padding:.8rem 1rem;font-size:.95rem;line-height:1.6;color:var(--ink);background:#fff;}
.rich-editor:focus{outline:2px solid var(--sky);outline-offset:-2px;}
.rich-editor img{max-width:100%;border-radius:8px;margin:.4rem 0;display:block;}
.rich-editor:empty::before{content:attr(data-placeholder);color:var(--ink-soft);}

/* ---- Blog listing (blog.html) ----
   A responsive card grid: 1 column on phones, more columns as the
   screen widens. Every card uses flexbox with the CTA pinned to the
   bottom, so cards line up neatly in a row even when one post's title
   or excerpt is longer than its neighbour's. */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);}
.blog-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-s);text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);}
.blog-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:var(--space-3);}
.blog-card-meta{font-size:.76rem;color:var(--ink-soft);margin:0 0 .35rem;}
.blog-card-title{font-size:1.08rem;margin:0 0 .4rem;color:var(--navy);line-height:1.35;}
.blog-card-excerpt{font-size:.9rem;color:var(--ink-soft);margin:0 0 var(--space-2);flex:1;}
.blog-card-cta{font-weight:700;font-size:.86rem;color:var(--sky-deep);margin-top:auto;}

/* ---- Single article page (blog-post.html) ---- */
.article-cover{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius-m);margin-bottom:var(--space-4);}
.article-body{font-size:1.02rem;line-height:1.8;color:var(--ink);}
.article-body p{margin:0 0 1.1em;}
.article-body img{max-width:100%;border-radius:var(--radius-m);margin:.6em 0;}
.article-body ul,.article-body ol{margin:0 0 1.1em 1.4em;}
.status-pill{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:capitalize;}
.status-pill.pending{background:#FFF3CD;color:#8A6900;}
.status-pill.confirmed{background:#DCEEFF;color:#0B5AA6;}
.status-pill.completed{background:#DCF5E3;color:#136B39;}
.status-pill.cancelled{background:#FBDCE0;color:#A11E3A;}
.status-pill.no-show{background:#EEE;color:#666;}
.status-pill.paid{background:#DCF5E3;color:#136B39;}
.status-pill.due{background:#FBDCE0;color:#A11E3A;}
.status-pill.approved{background:#DCF5E3;color:#136B39;}
.status-pill.rejected{background:#FBDCE0;color:#A11E3A;}

/* ---- Settings sub-tabs ---- */
.settings-tab{font-weight:700;font-size:.85rem;color:var(--ink-soft);text-decoration:none;}
.settings-tab.active{background:var(--navy);color:#fff;}
/* ---- Patient picker: type-to-search combobox (Prescriptions/Appointments/Payments) ---- */
.patient-picker-wrap{position:relative;}
.patient-picker-results{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-s);box-shadow:var(--shadow-m);max-height:220px;overflow-y:auto;z-index:50;margin-top:.2rem;}
.patient-picker-results.open{display:block;}
.picker-item{padding:.6rem .8rem;cursor:pointer;font-size:.88rem;display:flex;justify-content:space-between;gap:.5rem;}
.picker-item:hover{background:var(--bg-alt);}
.picker-item span{color:var(--ink-soft);font-size:.82rem;}
.picker-empty{padding:.6rem .8rem;font-size:.82rem;color:var(--ink-soft);}
.admin-table select, .admin-table .inline-input{font-size:.82rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-s);}
.admin-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:var(--space-3);}
.admin-toolbar input[type="search"]{flex:1;min-width:200px;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-s);}

/* ---- Prescription medicine-row builder ---- */
.rx-item-row{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 1.5fr auto;gap:.5rem;align-items:center;margin-bottom:.5rem;}
.rx-item-row select, .rx-item-row input{padding:.5rem;border:1px solid var(--border);border-radius:var(--radius-s);font-size:.85rem;}
.rx-item-row .rx-med-custom-name{grid-column:1 / -1;border-color:var(--sky);}
@media (max-width:760px){.rx-item-row{grid-template-columns:1fr 1fr;}}

/* ---- Payment method / QR selection cards ---- */
.pay-method-choices{display:flex;gap:.7rem;flex-wrap:wrap;margin:.5rem 0 var(--space-3);}
.pay-method-choice{border:2px solid var(--border);border-radius:var(--radius-m);padding:.6rem 1rem;cursor:pointer;font-weight:700;font-size:.88rem;background:#fff;}
.pay-method-choice.active{border-color:var(--sky);background:var(--bg-alt);color:var(--sky-deep);}
.qr-box{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;background:var(--bg-alt);border-radius:var(--radius-m);padding:var(--space-3);margin-top:var(--space-2);}
.qr-box img{width:140px;height:140px;border-radius:var(--radius-s);border:1px solid var(--border);background:#fff;}
.qr-box svg{border-radius:var(--radius-s);border:1px solid var(--border);flex-shrink:0;}

/* ---- Printable Prescription / Voucher documents ----
   These are rendered inside a modal for previewing on screen, and reused
   as-is by the browser's Print dialog (window.print()). The @media print
   rule below hides EVERYTHING else on the page and only shows the one
   element carrying the "printable-active" class, so the printed / "Saved
   as PDF" page only contains the clinic document, not the whole admin UI. */
.print-modal{position:fixed;inset:0;background:rgba(15,30,45,.55);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:var(--space-4) var(--space-2);z-index:1600;}
.print-modal.open{display:flex;}
/* Actions bar is sticky to the BOTTOM of the modal's own scroll area (not
   the top), so it never sits underneath the site's sticky header, and
   stays reachable without scrolling all the way down through a long
   document. */
.print-modal-actions{
  max-width:720px;width:100%;display:flex;gap:.6rem;justify-content:center;
  position:sticky;bottom:0;background:var(--white);padding:.7rem;margin-top:.6rem;
  border-top:1px solid var(--border);border-radius:0 0 var(--radius-m) var(--radius-m);
  box-shadow:0 -4px 14px rgba(0,0,0,.1);
}
.printable-doc{background:#fff;max-width:720px;width:100%;padding:36px;border-radius:var(--radius-m);box-shadow:var(--shadow-l);font-size:.92rem;color:#111;}
.printable-doc h1,.printable-doc h2,.printable-doc h3{color:#111;}
.doc-letterhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:16px;}
.doc-letterhead img{height:44px;}
.doc-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1.2rem;font-size:.85rem;margin-bottom:14px;}
.doc-table{width:100%;border-collapse:collapse;margin:10px 0;}
.doc-table th,.doc-table td{border:1px solid #ccc;padding:.5rem .6rem;font-size:.85rem;text-align:left;}
.doc-table th{background:#F2F6FA;}
.doc-stamp{display:inline-block;border:3px solid #1E8E4A;color:#1E8E4A;font-weight:800;padding:.3rem .9rem;border-radius:6px;transform:rotate(-6deg);font-size:1rem;letter-spacing:1px;}
.doc-stamp.due{border-color:#C0392B;color:#C0392B;}
.doc-sign-row{display:flex;justify-content:space-between;margin-top:46px;}
.doc-sign-line{border-top:1px solid #333;width:200px;text-align:center;padding-top:6px;font-size:.8rem;}

/* ---- Prescription-specific polish ---- */
.rx-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #E0E6EC;border-radius:10px;overflow:hidden;margin-bottom:18px;}
.rx-info-cell{padding:10px 14px;font-size:.85rem;}
.rx-info-cell:first-child{border-right:1px solid #E0E6EC;background:#FAFCFE;}
.rx-info-cell strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:#7C8A96;margin-bottom:2px;font-weight:700;}
.rx-info-cell span{color:#111;font-weight:600;}
.rx-symbol-row{display:flex;align-items:center;gap:10px;margin:6px 0 12px;}
.rx-symbol{font-family:Georgia,'Times New Roman',serif;font-size:2.1rem;font-weight:700;color:var(--navy);line-height:1;}
.rx-symbol-row h3{margin:0;color:var(--navy);font-size:1rem;letter-spacing:.5px;text-transform:uppercase;}
.rx-med-list{list-style:none;margin:0 0 16px;padding:0;counter-reset:rx-med;}
.rx-med-list li{counter-increment:rx-med;position:relative;padding:10px 10px 10px 34px;border-bottom:1px solid #EEF2F6;}
.rx-med-list li:last-child{border-bottom:none;}
.rx-med-list li::before{content:counter(rx-med);position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;}
.rx-med-name{font-weight:700;color:#111;font-size:.95rem;}
.rx-med-detail{font-size:.82rem;color:#5B6B77;margin-top:2px;}
.rx-med-detail span{display:inline-block;margin-right:12px;}
.rx-advice-box{background:#FAFCFE;border-left:4px solid var(--sky-deep);border-radius:0 8px 8px 0;padding:10px 14px;font-size:.85rem;margin-bottom:12px;}
.rx-advice-box strong{color:var(--navy);}

/* ---- Prescription v2: doctor letterhead + two-column layout (matches
   a real prescription pad: complaints/investigations on the left,
   numbered Rx list on the right) ---- */
.rx-doctor-letterhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px;}
.rx-doctor-letterhead h2{margin:0 0 3px;font-size:1.15rem;color:var(--navy);}
.rx-doctor-letterhead .rx-lh-line{font-size:.78rem;color:#4A5860;line-height:1.5;}
.rx-doctor-letterhead .rx-lh-right{text-align:right;font-size:.8rem;color:#4A5860;white-space:nowrap;}
.rx-doctor-letterhead .rx-lh-right strong{color:var(--navy);}
.rx-patient-row{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.85rem;padding:9px 0;border-top:1.5px solid #DCE3E9;border-bottom:1.5px solid #DCE3E9;margin-bottom:14px;}
.rx-patient-row strong{color:var(--navy);}
.rx-two-col{display:grid;grid-template-columns:.85fr 1.3fr;gap:20px;}
.rx-left-col h4{margin:0 0 6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;color:var(--navy);}
.rx-left-col ul{margin:0 0 16px;padding-left:18px;font-size:.85rem;}
.rx-left-col li{margin-bottom:3px;}
.rx-med-list-v2{list-style:none;margin:6px 0 0;padding:0;counter-reset:rxv2;}
.rx-med-list-v2 li{counter-increment:rxv2;padding:0 0 10px;margin-bottom:10px;border-bottom:1px dotted #C7D0D8;}
.rx-med-list-v2 li:last-child{border-bottom:none;}
.rx-med-list-v2 .rx-med-name{font-size:.9rem;}
.rx-med-list-v2 .rx-med-name::before{content:counter(rxv2)".";font-weight:800;color:var(--navy);margin-right:5px;}
.rx-med-list-v2 .rx-med-generic{color:var(--sky-deep);font-weight:600;}
.rx-med-list-v2 .rx-dose-row{display:flex;gap:16px;font-size:.8rem;color:#4A5860;margin-top:2px;padding-left:16px;}
.rx-med-list-v2 .rx-dose-code{font-weight:700;color:var(--navy);min-width:44px;}
.rx-signature-block{display:flex;justify-content:flex-end;margin-top:36px;}
.rx-signature-block .rx-sig-inner{text-align:center;min-width:200px;}
.rx-signature-block img{max-height:56px;max-width:190px;display:block;margin:0 auto 2px;}
.rx-signature-block .rx-sig-line{border-top:1px solid #333;padding-top:4px;font-size:.82rem;font-weight:700;color:var(--navy);}
.rx-signature-block .rx-sig-sub{font-size:.72rem;color:#5B6B77;font-weight:400;}

/* ---- Mobile: printable documents (prescription/voucher/appointment) ----
   Keeps everything readable and non-overflowing on phone screens: less
   padding, the two-column Rx layout stacks into one column, the doctor
   letterhead stacks instead of squeezing side-by-side, and the modal's
   Print/Download buttons wrap instead of overflowing. */
@media (max-width:640px){
  .print-modal{padding:var(--space-2) .5rem;}
  .print-modal-actions{flex-wrap:wrap;gap:.4rem;}
  .print-modal-actions .btn{flex:1;min-width:auto;padding:.6rem .8rem;font-size:.82rem;}
  .printable-doc{padding:18px;font-size:.85rem;}
  .rx-doctor-letterhead{flex-direction:column;gap:6px;}
  .rx-doctor-letterhead .rx-lh-right{text-align:left;}
  .rx-patient-row{gap:3px 14px;font-size:.8rem;}
  .rx-two-col{grid-template-columns:1fr;gap:14px;}
  .rx-med-list-v2 .rx-dose-row{flex-wrap:wrap;gap:6px 12px;padding-left:0;}
  .rx-signature-block{justify-content:center;margin-top:26px;}
  .doc-letterhead{flex-direction:column;gap:8px;}
  .doc-info-grid,.rx-info-grid{grid-template-columns:1fr;}
  .qr-box{flex-direction:column;text-align:center;}
}

@media print {
  body *{visibility:hidden !important;}
  .printable-doc, .printable-doc *{visibility:visible !important;}
  .printable-doc{position:absolute;top:0;left:0;box-shadow:none;border-radius:0;width:100%;max-width:none;}
  .print-modal{position:static;background:none;padding:0;}
  .print-modal-actions{display:none !important;}
}

/* Footer */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.85);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-4);padding:var(--space-6) 0 var(--space-4);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{color:var(--white);font-size:.95rem;margin-bottom:var(--space-2);}
.site-footer a{color:rgba(255,255,255,.75);font-size:.9rem;display:block;margin-bottom:.5rem;}
.site-footer a:hover{color:var(--sky);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--space-3) 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.55);}
/* Extra bottom breathing room so the fixed call/WhatsApp buttons (and the
   install-app banner, when shown) never sit on top of this last row. */
.footer-bottom{padding-bottom:calc(var(--space-3) + 64px);}
@media (max-width:640px){.footer-bottom{padding-bottom:calc(var(--space-3) + 76px);}}
.newsletter-form{display:flex;gap:.5rem;margin-top:.5rem;}
.newsletter-form input{flex:1;padding:.7rem 1rem;border-radius:999px;border:none;font-size:.85rem;}
.newsletter-form button{border-radius:999px;padding:.7rem 1.1rem;background:var(--sky-deep);color:var(--white);border:none;font-weight:700;}

/* Floating buttons */
.fab-wrap{position:fixed;right:var(--space-3);bottom:var(--space-3);display:flex;flex-direction:column;gap:.7rem;z-index:900;transition:bottom .25s var(--ease);}
.fab-wrap.with-install-banner{bottom:calc(var(--space-3) + 58px);}
.fab{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);
  box-shadow:var(--shadow-m);font-size:1.4rem;transition:transform .25s var(--ease);border:none;
}
.fab:hover{transform:scale(1.08);}
.fab-whatsapp{background:#25D366;}
.fab-call{background:var(--navy);}
.fab-top{background:var(--white);color:var(--navy);border:1.5px solid var(--border);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.fab-top.show{opacity:1;pointer-events:auto;}

/* Breadcrumbs */
.breadcrumbs{font-size:.82rem;color:var(--ink-soft);padding:var(--space-2) 0;}
.breadcrumbs a{color:var(--sky-deep);font-weight:600;}

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:var(--white);padding:var(--space-5) 0 var(--space-4);}
.page-hero h1{color:var(--white);margin-bottom:.4rem;}
.page-hero p{color:rgba(255,255,255,.78);max-width:640px;}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Timeline (about page) */
.timeline{position:relative;padding-left:2rem;}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-bottom:var(--space-4);}
.timeline-item::before{content:"";position:absolute;left:-2rem;top:4px;width:14px;height:14px;border-radius:50%;background:var(--sky);border:3px solid var(--white);box-shadow:0 0 0 2px var(--sky);}
.timeline-year{font-weight:800;color:var(--navy);font-family:'Poppins',sans-serif;font-size:.9rem;}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.flex{display:flex;}
.gap-2{gap:var(--space-2);}
.badge-reg{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-alt);border:1px solid var(--border);
  padding:.4rem .9rem;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--navy);
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--sky-deep);color:var(--white);padding:.7rem 1.1rem;z-index:3000;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}