/* ══════════════════════════════════════════════════════
   CharChaki — shared site shell (navbar + mobile drawer)
   One file, linked by every public page. The header markup had drifted into
   nine variants, so the drawer, the sizing and the shadow only ever existed
   on whichever page was edited last. Anything that belongs to the shell
   belongs here, not inside a page.
   ══════════════════════════════════════════════════════ */

/* ── Navbar depth ── */
.ck-nav{
  box-shadow:
    0 1px 0 rgba(17,12,15,.04),
    0 2px 6px -2px rgba(17,12,15,.08),
    0 10px 24px -12px rgba(140,20,64,.18);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.ck-nav.is-stuck{
  box-shadow:
    0 1px 0 rgba(17,12,15,.06),
    0 4px 12px -2px rgba(17,12,15,.12),
    0 18px 40px -16px rgba(140,20,64,.30);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
}

/* ── Mobile bar sizing ──
   Book Now was set at desktop size and rendered taller than the logo, so the
   bar read as a button with a logo attached. Size it to the bar. */
@media (max-width:1023px){
  .ck-nav .btn-primary{
    padding:.5rem .9rem!important;
    font-size:.8125rem!important;
    border-radius:999px;
    box-shadow:0 4px 12px -4px rgba(196,30,91,.5);
  }
  .ck-nav .btn-primary:hover{transform:none}
  .ck-nav img{height:2rem}
  .ck-nav .max-w-7xl{height:3.5rem}
  #menu-btn{padding:.45rem;margin-right:-.15rem}
}
@media (max-width:380px){
  .ck-nav .btn-primary{padding:.45rem .7rem!important;font-size:.75rem!important}
  .ck-nav img{height:1.75rem}
}

/* ── Drawer ── */
.ck-scrim{
  position:fixed;inset:0;z-index:60;background:rgba(15,4,10,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s ease;
}
.ck-scrim.is-open{opacity:1}
.ck-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(86vw,340px);
  background:#fff;display:flex;flex-direction:column;
  box-shadow:-18px 0 44px -16px rgba(20,4,12,.45);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.ck-drawer.is-open{transform:none}
.ck-drawer[hidden],.ck-scrim[hidden]{display:none}

.ck-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #f1f3f6;flex:0 0 auto;
}
.ck-drawer-x{
  width:36px;height:36px;border-radius:10px;border:1px solid #eceff3;background:#fff;
  color:#6b7280;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.ck-drawer-x svg{width:18px;height:18px}
.ck-drawer-x:hover{background:#fdf2f6;color:#c41e5b;border-color:#f3c3d6}

.ck-drawer-nav{flex:1 1 auto;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ck-drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;
  font-size:.9375rem;font-weight:600;color:#374151;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.ck-drawer-item:hover,.ck-drawer-item:focus-visible{background:#fdf2f6;color:#c41e5b}
.ck-drawer-item.is-accent{color:#c41e5b}
/* The page you are on, marked by shell.js rather than by hand in 14 files. */
.ck-drawer-item.is-current{background:#fdf2f6;color:#c41e5b}
.ck-drawer-item.is-current .ck-drawer-ico{
  background:linear-gradient(145deg,#c41e5b,#a51849);color:#fff;
}
.ck-drawer-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#fff1f6,#ffdcea);color:#c41e5b;
  box-shadow:inset 0 1px 0 #fff,0 3px 8px -4px rgba(196,30,91,.45);
}
.ck-drawer-ico svg{width:18px;height:18px}
.ck-drawer-chev{width:16px;height:16px;margin-left:auto;color:#cbd2dc;flex:0 0 auto}

.ck-drawer-foot{flex:0 0 auto;border-top:1px solid #f1f3f6;padding:12px;display:flex;flex-direction:column;gap:8px}
.ck-drawer-call{
  display:flex;align-items:center;gap:9px;justify-content:center;
  padding:10px;border-radius:12px;border:1px solid #eceff3;
  font-size:.875rem;font-weight:600;color:#374151;text-decoration:none;
}
.ck-drawer-call svg{width:17px;height:17px;color:#c41e5b}
.ck-drawer-call:hover{border-color:#f3c3d6;color:#c41e5b}
.ck-drawer-cta{
  display:flex;align-items:center;gap:9px;justify-content:center;
  padding:13px;border-radius:14px;text-decoration:none;
  background:linear-gradient(135deg,#c41e5b,#a51849);color:#fff;
  font-size:.9375rem;font-weight:700;
  box-shadow:0 8px 20px -8px rgba(196,30,91,.6),inset 0 1px 0 rgba(255,255,255,.25);
}
.ck-drawer-cta svg{width:18px;height:18px}
body.ck-drawer-open{overflow:hidden}

/* Floating buttons must never sit on top of the drawer or a dialog. */
body.ck-drawer-open a[aria-label="Chat on WhatsApp"],
body.ck-drawer-open #ck-bar,
body.ck-modal-open a[aria-label="Chat on WhatsApp"],
body.ck-modal-open #ck-bar{
  opacity:0!important;pointer-events:none!important;transition:opacity .2s ease;
}

@media (prefers-reduced-motion:reduce){
  .ck-nav,.ck-drawer,.ck-scrim{transition:none}
}

/* ── Breathing room at the top ──
   The bar sat flush against the viewport edge, so the logo and the controls
   ran right up to it and looked ready to clip — worse on phones with a
   rounded display corner or a status bar overlaying the page. Pad the bar
   itself rather than the sticky wrapper, so it still sticks to y=0 and the
   space travels with it. */
.ck-nav > .max-w-7xl{
  padding-top:6px;
  padding-top:calc(6px + env(safe-area-inset-top));
}
@media (max-width:1023px){
  .ck-nav > .max-w-7xl{
    height:auto!important;
    min-height:3.5rem;
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:8px;
  }
}