/* Dr. Maruf Pediatrics — Responsive + Sweet Background Final */
:root{--sweet-bg:#fbf7ff;--sweet-bg2:#fffaf4;--sweet-card:#ffffff;--sweet-border:#eadff4}
html,body{max-width:100%;overflow-x:hidden}
body{background:linear-gradient(135deg,var(--sweet-bg) 0%,#f7fbff 48%,var(--sweet-bg2) 100%) fixed !important}
.section,.pagebody{background:transparent !important}
.card,.panel,.kpi,.pagecard,.aboutbox,.contactbox{background:rgba(255,255,255,.94) !important;border-color:var(--sweet-border) !important;box-shadow:0 10px 28px rgba(73,25,110,.07) !important}
img{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.scroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
table{min-width:680px}

/* Public website */
.nav .wrap{min-width:0}.menu{min-width:0}
.hero{background:radial-gradient(circle at 72% 22%,#efe4ff 0,#fbf8ff 38%,#f1f8ff 72%,#fffaf4 100%) !important}
.schedulebar{box-shadow:0 12px 30px rgba(66,8,112,.16)}

@media (max-width: 980px){
  .wrap{width:100%;max-width:100%;padding-left:16px !important;padding-right:16px !important}
  .top .wrap{gap:8px;flex-wrap:wrap}
  .nav .wrap{align-items:flex-start;flex-direction:column;gap:0}
  .brand{padding-bottom:8px !important}
  .menu{display:flex !important;width:100%;overflow-x:auto;flex-wrap:nowrap !important;padding:4px 0 12px;gap:6px;scrollbar-width:thin}
  .menu a{white-space:nowrap;flex:0 0 auto}
  .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;gap:18px !important}
  .hero-grid>div:last-child{grid-column:1/-1}
  .portrait{height:auto !important;max-height:520px;aspect-ratio:4/5;object-fit:cover}
  .hero h1{font-size:38px !important}
  .doctorname{font-size:21px !important}
  .services{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .healthgrid,.gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .schedulebar,.about-grid,.contactgrid{grid-template-columns:1fr !important}
  .schedulebar{margin:14px 16px 0 !important}
}

@media (max-width: 640px){
  body{font-size:15px}
  .top{font-size:12px}.top .wrap{display:block !important}.top .wrap>div+div{margin-top:5px}
  .brand{font-size:22px !important;line-height:1.3}
  .nav{position:sticky;top:0}
  .menu{padding-bottom:10px}.menu a{font-size:13px;padding:8px 10px !important}
  .hero-grid{display:grid !important;grid-template-columns:1fr !important;padding:20px 14px 24px !important}
  .hero-grid>div:last-child{grid-column:auto}
  .portrait{width:100%;max-height:none;aspect-ratio:4/5;border-radius:20px !important}
  .hero h1{font-size:34px !important;line-height:1.15}
  .doctorname{display:block !important;width:100%;font-size:20px !important;text-align:center}
  .cred{font-size:15px;line-height:1.75}
  .appt{padding:16px !important}
  .appt h2{font-size:24px}
  .slotwrap{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .schedulebar{margin:12px !important;padding:18px !important;border-radius:16px !important}
  .services,.healthgrid,.gallery,.about-grid,.contactgrid{grid-template-columns:1fr !important}
  .service{min-height:auto !important}
  .gallery img,.health img{height:auto !important;max-height:420px;object-fit:cover}
  .footer .wrap{display:block !important;text-align:center}.footer .wrap>div+div{margin-top:8px}
  .pagehero{padding:30px 0 18px !important}.pagehero h1{font-size:28px !important}
  .pagecard,.aboutbox,.contactbox{padding:17px !important}
}

/* Staff / Admin dashboard responsive overrides */
@media (max-width: 900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .grid{grid-template-columns:1fr !important}
  .reports{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .row{grid-template-columns:1fr 1fr !important}
  .panel{overflow:hidden}
}
@media (max-width: 600px){
  .wrap{padding:12px !important}
  .top .wrap{display:flex !important;flex-direction:column;align-items:flex-start !important}
  .top .wrap>div:last-child{display:flex;gap:12px;flex-wrap:wrap}
  .top a{margin-left:0 !important}
  .cards,.reports,.grid,.row{grid-template-columns:1fr !important}
  .kpi,.panel{border-radius:14px !important;padding:14px !important}
  .kpi b{font-size:24px !important}
  .panel h2{font-size:22px !important;line-height:1.3}
  input,select,textarea,button{font-size:16px !important;padding:12px !important}
  table{font-size:12px !important;min-width:640px}
  th,td{padding:8px 7px !important;white-space:nowrap}
  .reports a{padding:12px 8px !important}
}


/* FINAL MOBILE/TABLET UX REVISION */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.menu-toggle{display:none;border:1px solid #e7dcef;background:#fff;color:var(--p);width:44px;height:42px;border-radius:11px;font-size:23px;line-height:1;cursor:pointer;box-shadow:0 5px 16px rgba(65,18,104,.08)}
.mobile-quickbar{display:none}

@media (max-width:1024px){
  .nav .wrap{display:block !important;padding-top:0 !important;padding-bottom:0 !important}
  .brand-row{width:100%}
  .brand{padding:14px 0 !important;max-width:calc(100% - 58px)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px}
  .nav .menu{display:none !important;width:100%;overflow:visible !important;flex-wrap:wrap !important;padding:0 0 12px !important;gap:7px !important;border-top:1px solid #f0e8f7}
  .nav .menu.is-open{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:10px !important}
  .nav .menu a{display:block;text-align:center;width:100%;white-space:normal !important;border:1px solid #eee5f5;background:#fff;padding:10px 8px !important;border-radius:10px !important}
  .nav .menu a.active,.nav .menu a:hover{background:var(--p);color:#fff}
  .nav .menu .cta{grid-column:1/-1}
  .hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important}
  .hero-grid>div:last-child{grid-column:1/-1}
}

@media (max-width:640px){
  .top{display:none}
  .nav{top:0 !important}
  .brand{font-size:20px !important;line-height:1.25}
  .nav .menu.is-open{grid-template-columns:1fr !important;max-height:70vh;overflow-y:auto !important;padding-right:2px !important}
  .hero{padding-top:0 !important}
  .hero-grid{display:flex !important;flex-direction:column !important;gap:16px !important;padding:16px 14px 22px !important}
  .hero-grid>div:nth-child(1){order:1;width:100%}
  .hero-grid>div:nth-child(2){order:2;width:100%}
  .hero-grid>div:nth-child(3){order:3;width:100%}
  .portrait{max-width:360px;margin:0 auto;display:block;aspect-ratio:4/5;border-radius:18px !important}
  .hero h1{font-size:31px !important;text-align:center;margin-top:2px}
  .doctorname{max-width:100%;font-size:19px !important}
  .cred,.hero p{text-align:left}
  .appt{margin-top:2px;width:100%}
  .schedulebar{margin:10px 12px 0 !important}
  body{padding-bottom:68px}
  .mobile-quickbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#fff;border-top:1px solid #eadff4;box-shadow:0 -8px 24px rgba(45,11,94,.10)}
  .mobile-quickbar a{padding:9px 5px 8px;text-align:center;font-size:13px;font-weight:700;color:var(--p2);background:#fff}
  .mobile-quickbar a span{display:block;font-size:18px;line-height:1.1;margin-bottom:2px}
  .mobile-quickbar a.primary{background:var(--p);color:#fff}
}

/* Appointment calendar fix */
.appt-date-wrap{position:relative;display:flex;align-items:center;width:100%}.appt-date-wrap .field{width:100%;padding-right:54px}.appt-calendar-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:20px;cursor:pointer;padding:8px;z-index:3}.appt-date-wrap #appt_date_picker{position:absolute;right:8px;top:50%;width:40px;height:40px;transform:translateY(-50%);opacity:0;pointer-events:none}.appt-calendar-btn:focus{outline:2px solid #65139a;outline-offset:2px;border-radius:8px}

/* Public mobile menu hard-fix */
@media (max-width:1024px){
  .nav .menu.is-open{display:grid !important;visibility:visible !important;opacity:1 !important;}
  .nav .menu.is-open a{display:block !important;}
}
@media (max-width:640px){
  .nav .menu.is-open{max-height:calc(100vh - 76px) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;}
  .mobile-quickbar.has-live-queue{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .mobile-quickbar.has-live-queue a{font-size:11px !important;padding-left:2px !important;padding-right:2px !important;}
}


/* FINAL PUBLIC MENU GUARANTEED FIX */
.menu-overlay{position:fixed;inset:0;background:rgba(19,9,33,.42);z-index:1090;opacity:0;transition:opacity .22s ease;pointer-events:none}
.menu-overlay.show{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.nav{z-index:1100}
@media (max-width:1024px){
  .nav{position:sticky;top:0;z-index:1101}
  .nav .wrap{position:relative}
  .nav .menu{position:relative;z-index:1102}
  .nav .menu.is-open{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;padding:12px 0 14px !important;background:#fff}
  .nav .menu.is-open a{display:block !important;width:100%;text-align:left !important;padding:12px 14px !important;font-size:15px !important;line-height:1.35;border-radius:12px !important}
  .nav .menu.is-open .cta,.nav .menu.is-open .queue-cta{grid-column:auto !important}
}
@media (max-width:640px){
  .nav .menu.is-open{max-height:calc(100vh - 74px) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;padding-bottom:18px !important}
}

/* LIVE QUEUE RESPONSIVE AUTO LAYOUT */
@media (max-width:900px){
  .liveq{padding:16px 0 84px !important}
  .liveq-top{grid-template-columns:1fr !important;gap:14px !important}
  .serving{grid-template-columns:82px 1fr !important;gap:12px !important;padding:14px !important}
  .serialbox{height:82px !important;border-radius:16px !important}
  .serialbox b{font-size:34px !important}
  .patient-name{font-size:24px !important;line-height:1.12 !important}
  .qactions{display:grid !important;grid-template-columns:1fr 1fr !important}
  .qbtn{padding:12px 10px !important;font-size:14px !important}
  .stats3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:680px){
  .qcard{padding:14px !important;border-radius:16px !important}
  .qhead{align-items:flex-start !important;flex-direction:column !important}
  .nextbox{padding:13px !important}
  .nextbox b{font-size:20px !important}
  .meta{gap:6px !important}
  .chip{font-size:12px !important;padding:5px 8px !important}
  .stats3{grid-template-columns:1fr !important}
  .qlist .qtable,.qlist .qtable thead,.qlist .qtable tbody,.qlist .qtable tr,.qlist .qtable td{display:block;width:100%}
  .qlist .qtable thead{display:none}
  .qlist .qtable tr{background:#fff;border:1px solid #e8dff1;border-radius:14px;margin-bottom:10px;overflow:hidden}
  .qlist .qtable td{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px !important;border-bottom:1px solid #f1ebf5;text-align:right}
  .qlist .qtable td:last-child{border-bottom:0}
  .qlist .qtable td::before{content:attr(data-label);font-weight:900;color:#5d138a;text-align:left;margin-right:auto}
  .queue-ticker{bottom:70px !important;height:44px !important}
  .queue-ticker-label{padding:0 10px !important;font-size:12px !important}
  .queue-ticker-text{font-size:14px !important;animation-duration:34s !important}
}


/* MOBILE MENU FINAL — no hidden attribute dependency */
@media(max-width:1024px){
  #publicMainMenu{display:none!important}
  #publicMainMenu.is-open{display:grid!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:1202!important;width:100%!important;grid-template-columns:1fr!important;gap:7px!important;background:#fff!important;padding:10px 0 14px!important;max-height:calc(100vh - 72px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  #publicMainMenu.is-open a{display:block!important;width:100%!important;padding:12px 14px!important;margin:0!important;text-align:left!important;font-size:15px!important;white-space:normal!important}
  #publicMenuToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:1203!important;touch-action:manipulation!important}
}
@media(max-width:640px){
  .mobile-quickbar.has-live-queue{grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;max-width:100vw!important;overflow:hidden!important}
  .mobile-quickbar.has-live-queue a{min-width:0!important;white-space:normal!important;line-height:1.1!important;font-size:10px!important}
}


/* HOME MOBILE MENU — INLINE TOGGLE FINAL */
@media(max-width:1024px){
  .nav .wrap{position:relative!important}
  #publicMainMenu{display:none!important}
  #publicMainMenu.is-open{display:grid!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;width:100%!important;max-height:calc(100vh - 72px)!important;overflow-y:auto!important;background:#fff!important;padding:10px 12px 16px!important;border-top:1px solid #eee3f5!important;border-radius:0 0 16px 16px!important;box-shadow:0 18px 34px rgba(42,7,82,.18)!important;z-index:5005!important;grid-template-columns:1fr!important;gap:7px!important;visibility:visible!important;opacity:1!important}
  #publicMainMenu.is-open a{display:block!important;width:100%!important;text-align:left!important;padding:12px 14px!important;border:1px solid #eee5f5!important;background:#fff!important;color:var(--p2)!important;border-radius:10px!important;font-size:15px!important;line-height:1.35!important;white-space:normal!important}
  #publicMainMenu.is-open a.active,#publicMainMenu.is-open a:hover,#publicMainMenu.is-open a:focus{background:var(--p)!important;color:#fff!important}
  #publicMainMenu.is-open .cta,#publicMainMenu.is-open .queue-cta{background:#f7effd!important;color:var(--p)!important;border-color:#dec9ec!important}
  #publicMenuToggle{display:inline-flex!important;pointer-events:auto!important;cursor:pointer!important;z-index:5010!important}
  .menu-overlay.show{display:block!important;position:fixed!important;inset:0!important;background:rgba(20,8,35,.42)!important;z-index:4999!important}
}

/* 2026-08-15 MOBILE + iPAD MENU STABILITY FIX
   Keep the navigation above the dim overlay. Child z-index cannot escape a
   lower nav stacking context, which previously made the opened menu appear dead. */
@media (max-width:1024px){
  .nav{
    position:sticky !important;
    top:0 !important;
    z-index:7000 !important;
    overflow:visible !important;
  }
  .nav .wrap{
    position:relative !important;
    overflow:visible !important;
  }
  .brand-row{
    position:relative !important;
    z-index:7003 !important;
    background:#fff !important;
  }
  #publicMenuToggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    position:relative !important;
    z-index:7004 !important;
  }
  #publicMainMenu{
    display:none !important;
  }
  #publicMainMenu.is-open{
    display:grid !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    z-index:7002 !important;
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    max-height:calc(100dvh - 72px) !important;
    max-height:calc(100vh - 72px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:#fff !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:10px 12px 16px !important;
    border-top:1px solid #eee3f5 !important;
    border-radius:0 0 16px 16px !important;
    box-shadow:0 18px 34px rgba(42,7,82,.18) !important;
  }
  #publicMainMenu.is-open a{
    display:block !important;
    width:100% !important;
    pointer-events:auto !important;
    text-align:left !important;
    white-space:normal !important;
  }
  #publicMenuOverlay.menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:6990 !important;
  }
  #publicMenuOverlay.menu-overlay.show{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  body.menu-open{
    overflow:hidden !important;
    touch-action:pan-x pan-y !important;
  }
}

/* 2026-08-17 DESKTOP + PUBLIC NAV SCROLL STABILITY FIX
   Keep the public navigation visible while scrolling without changing layout/design.
   overflow-x:clip avoids creating a scroll container that can break position:sticky. */
@supports (overflow: clip){
  html,body{overflow-x:clip !important;}
}
.nav{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:7000 !important;
  width:100% !important;
}


/* FINAL MENU FIX: keep navigation visible during page scroll */
.nav{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999 !important;
}
body{
  padding-top:72px;
}
.nav .wrap{
  background:#fff;
}
@media(max-width:980px){
  body{padding-top:120px}
  .nav{
    position:fixed !important;
  }
}

/* FINAL REAL FIX - navigation stays visible while scrolling */
html, body { overflow-x: hidden !important; }
.nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; }
body { padding-top: 90px !important; }
@media (max-width: 980px){ body { padding-top: 150px !important; } }