/* ===== DocOK Header (responsive) ===== */
:root{
  --blue:#1d399a; --yellow:#fec600; --light:#c4d3ed;
  --ink:#101214; --ink-soft:#60666b; --line:#e6eaf0; --bg:#fff;
}

.docok-header{ width:100%; background:#fff; border-bottom:1px solid var(--line); }
.docok-header .bar{
  max-width:960px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  box-sizing:border-box;
}

/* Brand */
.docok-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.docok-logo{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:var(--blue); color:#fff; font-weight:700;
}
.docok-title{ font-weight:700; }

/* Primary nav */
.nav{ display:flex; gap:12px; align-items:center; }
.nav a{ color:var(--ink); text-decoration:none; padding:6px 8px; border-radius:8px; }
.nav a.active{ color:var(--blue); font-weight:600; }

/* Actions (WhatsApp) */
.actions .btn-primary{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background:var(--yellow); color:var(--blue); text-decoration:none; font-weight:700;
}

/* Hamburger (desktop hidden) */
.hamburger{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; display:none; }

/* Subnav chips */
.subnav{ border-top:1px solid var(--line); background:#fff; }
.subnav .rail{
  max-width:960px; margin:0 auto; padding:10px 20px; box-sizing:border-box;
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  border:1px solid var(--light); border-radius:999px; background:#f4f6ff;
  color:#233; text-decoration:none; white-space:nowrap; font-size:13px;
}
.chip.active{ background:#eaf0ff; border-color:#c4d3ed; color:var(--blue); }

/* ===== Mobile drawer ===== */
.mobile-panel{ position:fixed; inset:0; display:none; z-index:1000; }
.mobile-panel.open{ display:block; }
.mobile-panel .overlay{ position:absolute; inset:0; background:rgba(16,18,20,.4); }
.mobile-panel .sheet{
  position:absolute; right:0; top:0; height:100%; width:min(86vw,380px);
  background:#fff; border-left:1px solid var(--line);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease;
}
.mobile-panel.open .sheet{ transform:none; }
.mobile-panel .head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.mobile-panel .menu{ display:flex; flex-direction:column; padding:10px 14px; gap:6px; }
.mobile-panel .menu a{
  padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink);
}
.mobile-panel .footer{ margin-top:auto; padding:12px 14px; border-top:1px solid var(--line); }
.mobile-panel .btn{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; }
.mobile-panel .btn-primary{ background:var(--yellow); color:var(--blue); border:none; }

/* ===== Breakpoints ===== */
@media (max-width: 1024px){
  .docok-header .bar{ padding:8px 16px; }
}
@media (max-width: 860px){
  .nav{ display:none; }
  .hamburger{ display:inline-flex; }
}