/* Booking page only. Uses the colour variables from ../styles.css. */
#bookForm{max-width:860px;}

/* Step headings */
.book-step{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px;}
.book-step-num{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px;}

/* Step 1 panel: calendar left, times right (stacked on small screens) */
.book-panel{display:grid; grid-template-columns:300px 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:36px;}
.book-cal{padding:22px; border-right:1px solid var(--line);}
.book-times{padding:22px 26px;}

/* Mini calendar */
.cal-month{font-family:var(--serif); font-size:18px; margin-bottom:12px;}
.cal-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;}
.cal-grid.cols-3{grid-template-columns:repeat(3, 1fr);}
.cal-grid.cols-5{grid-template-columns:repeat(5, 1fr);}
.cal-grid.cols-6{grid-template-columns:repeat(6, 1fr);}
.cal-grid.cols-7{grid-template-columns:repeat(7, 1fr);}
.cal-head{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); text-align:center; padding-bottom:4px;}
.cal-day{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:50%; background:var(--accent-tint); color:var(--accent-dark); font:inherit; font-size:15px; font-weight:600; cursor:pointer; max-width:48px; width:100%; justify-self:center;}
.cal-day:hover{border-color:var(--accent);}
.cal-day.on{background:var(--accent); color:#fff;}
.cal-day:focus-visible{outline:3px solid var(--accent-tint); outline-offset:2px; border-color:var(--accent);}
.cal-day.busy, .cal-day:disabled{background:transparent; color:#a3a2a9; font-weight:400; text-decoration:line-through; cursor:not-allowed;}
.cal-day.busy:hover{border-color:transparent;}
.cal-day.new-month::after{content:attr(data-mon); position:absolute; top:-7px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:600; text-transform:uppercase; color:var(--muted); background:#fff; padding:0 3px; text-decoration:none;}
.cal-legend{margin-top:14px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}

/* Times */
.slot-day h2{font-family:var(--serif); font-weight:normal; font-size:20px; margin-bottom:14px;}
.slot-day[hidden]{display:none;}
.slot-group{margin-bottom:14px;}
.slot-group-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:6px;}
.slot-list{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; max-width:420px;}
.where-list{display:flex; flex-wrap:wrap; gap:8px;}
.where-list .slot label{padding:10px 16px;}
.slot{position:relative;}
.slot input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0;}
.slot label{display:block; margin:0; text-align:center; padding:10px 4px; border:1px solid #c9c8ce; border-radius:8px; background:#fff; color:var(--ink); font-size:14px; font-weight:600; cursor:pointer;}
.slot label:hover{border-color:var(--accent); color:var(--accent-dark);}
.slot input:checked + label{background:var(--accent); border-color:var(--accent); color:#fff;}
.slot input:focus-visible + label{outline:3px solid var(--accent-tint); outline-offset:2px; border-color:var(--accent);}
.book-note, .book-empty{font-size:13px; color:var(--muted);}
.book-note{margin-top:4px;}

/* Step 2 */
.js-book .book-details{display:none;}
.js-book .book-details.open{display:block; scroll-margin-top:90px;}
.book-chosen{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:520px; padding:12px 16px; margin-bottom:18px; border-radius:10px; background:var(--accent-tint); color:var(--accent-dark); font-weight:600; font-size:15px;}
.book-change{background:none; border:0; padding:0; font:inherit; font-size:14px; color:var(--accent-dark); text-decoration:underline; cursor:pointer;}
.book-legend{font-size:14px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.opt{font-weight:400; color:var(--muted);}
.book-submit{min-width:200px;}
.book-card{max-width:560px; padding:24px;}
.book-card p{margin-bottom:12px;}

@media (max-width:760px){
  .book-panel{grid-template-columns:1fr;}
  .book-cal{border-right:0; border-bottom:1px solid var(--line); padding:18px;}
  .book-times{padding:18px;}
  .cal-day{max-width:56px;}
  .book-submit{width:100%;}
}

/* How would you like to meet? */
.meet-list{display:grid; gap:8px; max-width:520px;}
.meet{position:relative;}
.meet input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0;}
.meet label{display:flex; flex-direction:column; gap:2px; margin:0; padding:12px 16px; border:1px solid #c9c8ce; border-radius:10px; background:#fff; cursor:pointer;}
.meet-label{font-size:15px; font-weight:600; color:var(--ink);}
.meet-hint{font-size:13px; font-weight:400; color:var(--muted);}
.meet label:hover{border-color:var(--accent);}
.meet input:checked + label{border-color:var(--accent); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent);}
.meet input:checked + label .meet-label{color:var(--accent-dark);}
.meet input:focus-visible + label{outline:3px solid var(--accent-tint); outline-offset:2px;}
#placeField[hidden]{display:none;}