/* The public consult booking page (/book and /book/manage/...). Colours come from the site's tokens (--ink, --paper, --mist,
   --line, --slate, --brand-600, --spark, --danger, --tile-bg, --tile-border), which the dark theme re-points, so every rule works
   in both themes. Author: Jeremiah Buttler */

.bk-zone{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin:0 0 1rem}
.bk-zone label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.88rem;color:var(--ink)}
.bk-zone select{padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--paper);color:var(--ink)}

.bk-days{border:0;margin:0;padding:0;min-width:0}
.bk-days legend{font-weight:700;font-size:1rem;color:var(--ink);padding:0;margin-bottom:.5rem}
.bk-days legend small{display:block;font-weight:500;color:var(--slate);font-size:.82rem;margin-top:.15rem}
.bk-day{margin:0 0 1rem}
.bk-day h3{font-size:.9rem;margin:0 0 .45rem;color:var(--ink)}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}

.bk-slot{position:relative;display:flex;flex-direction:column;gap:.1rem;padding:.55rem .75rem;border:1px solid var(--tile-border,var(--line));
  border-radius:10px;background:var(--tile-bg,var(--paper));color:var(--ink);cursor:pointer;font-weight:600;font-size:.9rem}
.bk-slot small{font-weight:500;color:var(--slate);font-size:.78rem}
.bk-slot:hover{border-color:var(--brand-600)}
.bk-slot input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.bk-slot:has(input:checked){border-color:var(--brand-600);box-shadow:0 0 0 2px var(--brand-600)}
.bk-slot:has(input:focus-visible){outline:2px solid var(--spark);outline-offset:2px}

.bk-opt{font-weight:500;color:var(--slate)}
.bk-error{color:var(--danger,#dc2626);font-size:.9rem;margin:.2rem 0 0}
.bk-empty{color:var(--slate);margin:.2rem 0 1rem}
.bk-message{margin:0 0 1rem;padding:.6rem .8rem;border-radius:10px;background:var(--mist);color:var(--ink);font-weight:600}

.bk-done .bk-when,.bk-manage .bk-when{font-size:1.15rem;color:var(--ink);margin:.4rem 0}
.bk-when span{font-size:.92rem;font-weight:500;color:var(--slate)}
.bk-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.bk-actions form{margin:0}
.bk-cancel{color:var(--danger,#b02a2a)}
.bk-manage .contact-form{margin-top:1rem}
@media (max-width:520px){.bk-slots{grid-template-columns:repeat(2,1fr)}}
.bk-title{font-size:1.1rem;margin:0 0 .6rem}