/* DMU Booking: public page. System fonts unless the client uploads theirs, one accent colour from the admin. */
:root{
  --accent:#4a4a5e; --ink:#1d1d24; --muted:#6b6b78; --line:#e4e4ea; --soft:#f5f5f8; --bg:#f3f3f6; --card:#fff;
  --danger:#b3261e; --ok:#1e7a46; --radius:14px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --head:var(--font);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--font)}
body.embed{background:transparent}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}

.bk{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px}
.embed .bk{min-height:0; padding:0}
.bk-card{display:grid; grid-template-columns:280px minmax(0,1fr); width:100%; max-width:760px; background:var(--card); border-radius:var(--radius); box-shadow:0 1px 2px rgba(20,20,40,.06),0 8px 30px rgba(20,20,40,.07); overflow:hidden}
.bk-card.wide{max-width:960px}
.bk-side{padding:32px 28px; border-right:1px solid var(--line)}
.bk-main{padding:32px; min-width:0}
.bk-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin-bottom:14px}
.bk-owner{margin:0 0 4px; color:var(--muted); font-weight:600}
.bk-title{font-size:1.5rem; line-height:1.2; margin:0 0 16px}
.bk-facts{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; color:var(--muted); font-weight:500}
.bk-facts li{display:flex; gap:10px; align-items:flex-start}
.bk-picked{color:var(--ink)!important}
.bk-desc{color:var(--muted); margin:0; white-space:pre-line}
.ic{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

h1,h2{font-family:var(--head)}
.bk-headfont h1,.bk-headfont h2{font-weight:400}
h2{font-size:1.25rem; margin:0 0 18px}
h3{font-size:1rem; margin:0 0 12px}
.bk-muted{color:var(--muted)}
.small{font-size:.9rem}
.bk-note{background:var(--soft); border-radius:8px; padding:10px 14px; margin:0 0 16px}
.bk-error{color:var(--danger); margin:0 0 14px}
.bk-empty{background:var(--soft); border-radius:10px; padding:18px; margin:0 0 18px}
.bk-cal-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.bk-cal-head h2{margin:0}
.bk-back,.bk-nav{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; cursor:pointer; flex:none; color:var(--accent)}
.bk-back:hover,.bk-nav:hover:not(:disabled){background:var(--soft)}
.bk-nav:disabled{opacity:.3; cursor:default}

/* Event type list */
.bk-types{display:grid; gap:12px}
.bk-type{display:grid; gap:4px; text-align:left; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; transition:border-color .15s, box-shadow .15s}
.bk-type:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.bk-type-title{font-weight:700; font-size:1.05rem}
.bk-type-meta{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.92rem}
.bk-type-meta .ic{width:16px; height:16px}
.bk-type-desc{color:var(--muted); font-size:.92rem}

/* Calendar + times */
.bk-pick{display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:28px; margin-top:12px}
.bk-month{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.bk-month-title{font-weight:600}
.bk-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center}
.bk-dow{font-size:.75rem; color:var(--muted); padding:4px 0; text-transform:uppercase; letter-spacing:.03em}
.bk-day{aspect-ratio:1; max-height:48px; border:0; border-radius:50%; background:transparent; color:#b4b4be; font-weight:500; cursor:default}
.bk-day.open{color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,#fff); font-weight:700; cursor:pointer}
.bk-day.open:hover{background:color-mix(in srgb,var(--accent) 20%,#fff)}
.bk-day.on{background:var(--accent); color:#fff}
.bk-times h3{font-weight:600}
.bk-slot-list{display:grid; gap:8px; max-height:360px; overflow-y:auto; padding-right:4px}
.bk-slot{padding:11px; border:1px solid color-mix(in srgb,var(--accent) 45%,#fff); border-radius:8px; background:var(--card); color:var(--accent); font-weight:600; cursor:pointer; transition:background .15s,color .15s}
.bk-slot:hover{background:var(--accent); color:#fff}
.bk-tz{display:flex; align-items:center; gap:8px; margin-top:22px; color:var(--muted); font-size:.92rem; flex-wrap:wrap}
.bk-tz select{border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--card); max-width:100%}

/* Form */
.bk-form{display:grid; gap:14px; max-width:460px}
.bk-field{display:grid; gap:6px}
.bk-field label{font-weight:600; font-size:.95rem}
.bk-opt{font-weight:400; color:var(--muted)}
.bk-field input,.bk-field textarea{width:100%; border:1px solid #d6d6de; border-radius:8px; padding:11px 12px; background:var(--card)}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.bk-field textarea{resize:vertical; min-height:84px}
.bk-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.bk-consent{font-size:.85rem; color:var(--muted); margin:0}
.bk-btn{display:inline-flex; justify-content:center; align-items:center; gap:8px; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:12px 22px; font-weight:600; text-decoration:none; cursor:pointer}
.bk-btn:hover{filter:brightness(1.1)}
.bk-btn:disabled{opacity:.6; cursor:wait}
.bk-btn.ghost{background:var(--card); color:var(--accent); border:1px solid var(--accent)}
.bk-btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.bk-btn.ghost.danger{background:var(--card); color:var(--danger)}
.bk-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* Done */
.bk-done-icon{width:52px; height:52px; border-radius:50%; background:color-mix(in srgb,var(--ok) 14%,#fff); color:var(--ok); display:grid; place-items:center; margin-bottom:14px}
.bk-done-icon .ic{width:28px; height:28px; stroke-width:2.4}
.bk-when{font-size:1.1rem; font-weight:700; margin:0 0 6px}
.bk-label{font-weight:600; margin:22px 0 8px}
.bk-add{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.bk-add a{border:1px solid var(--line); border-radius:8px; padding:8px 14px; text-decoration:none; color:var(--ink); font-weight:500}
.bk-add a:hover{border-color:var(--accent); color:var(--accent)}

.bk-foot{margin-top:16px; font-size:.88rem; color:var(--muted)}
.bk-langs{display:flex; gap:14px; justify-content:center}
.bk-langs a{color:var(--muted); text-decoration:none}
.bk-langs a:hover{color:var(--accent)}
.bk-langs [aria-current]{color:var(--ink); font-weight:600}
.bk-pad{padding:24px}

@media (max-width:820px){
  .bk-card,.bk-card.wide{grid-template-columns:1fr}
  .bk-side{border-right:0; border-bottom:1px solid var(--line); padding:24px}
  .bk-main{padding:24px}
  .bk-pick{grid-template-columns:1fr}
  .bk-slot-list{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); max-height:none}
}
@media (max-width:480px){
  .bk{padding:16px 12px; justify-content:flex-start}
  .bk-side,.bk-main{padding:20px 18px}
  .bk-title{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}
.bk-foot{display:flex; flex-direction:column; align-items:center; gap:8px}
.bk-brand{color:var(--muted); text-decoration:none; font-size:.8rem; letter-spacing:.02em}
.bk-brand:hover{color:var(--ink)}
.bk-logo{display:block; max-width:180px; max-height:56px; width:auto; height:auto; margin:0 0 18px}