/* Search button + panel for the brand guides (sites/_gedeeld/zoek). Colours come from the site through these variables;
   without them the panel uses the system colours. */
.zk-knop { display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em; border: 1px solid currentColor; border-radius: 999px;
  color: inherit; text-decoration: none; font: inherit; font-size: .95em; line-height: 1; cursor: pointer; background: transparent; }
.zk-knop svg { width: 1.05em; height: 1.05em; flex: none; }
.zk-knop:hover, .zk-knop:focus-visible { background: var(--zk-hover, rgba(127,127,127,.12)); }
@media (max-width: 560px) { .zk-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .zk-knop { padding: .55em; } }

.zk-open, .zk-open body { overflow: hidden; }
.zk-panel { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); display: flex; justify-content: center; align-items: flex-start;
  padding: max(16px, 8vh) 16px 16px; }
.zk-panel[hidden] { display: none; }
.zk-doos { width: 100%; max-width: 560px; max-height: calc(100vh - 32px - 8vh); overflow: auto; border-radius: 14px; padding: 14px;
  background: var(--zk-bg, Canvas); color: var(--zk-fg, CanvasText); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.zk-rij { display: flex; gap: 8px; }
.zk-veld { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .7em .9em; border-radius: 10px;
  border: 1px solid var(--zk-rand, rgba(127,127,127,.5)); background: transparent; color: inherit; }
.zk-veld:focus { outline: 2px solid var(--zk-accent, Highlight); outline-offset: 1px; }
.zk-dicht { font: inherit; font-size: 1.5rem; line-height: 1; width: 2.2em; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.zk-status { margin: .6em .2em 0; font-size: .9rem; opacity: .75; }
.zk-status:empty { display: none; }
.zk-lijst { list-style: none; margin: .5em 0 0; padding: 0; }
.zk-lijst a { display: block; padding: .6em .7em; border-radius: 8px; color: inherit; text-decoration: none; }
.zk-lijst a:hover, .zk-lijst a.is-on { background: var(--zk-hover, rgba(127,127,127,.14)); }
.zk-lijst strong { display: block; font-weight: 600; }
.zk-lijst span { display: block; font-size: .85rem; opacity: .7; margin-top: .15em; }
.zk-alles { display: inline-block; margin: .7em .2em .2em; font-size: .9rem; color: var(--zk-accent, LinkText); }