/* ============================================================
   Hameldon Bookings - front-end form
   Inherits theme --accent/--ink/--cream if present, else falls
   back to --hb-* set from plugin settings.
   ============================================================ */
.hb-widget{
  --a:var(--accent, var(--hb-accent,#B8933F));
  --i:var(--ink, var(--hb-ink,#1C1814));
  --c:var(--cream, var(--hb-cream,#FBF8F2));
  --line:var(--line,#E7DFD1);
  --body:var(--body,#4A423A);
  --muted:var(--muted,#8A8073);

  max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:30px;
  box-shadow:0 2px 6px rgba(28,24,20,.05),0 16px 36px rgba(28,24,20,.08);
  font-family:var(--font-body,'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif);
  color:var(--body);
}

/* head */
.hb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; }
.hb-service{ font-family:var(--font-head,'Fraunces',serif); font-weight:500; font-size:1.4rem; color:var(--i); margin:0; }
.hb-duration{ color:var(--muted); font-size:.9rem; }
.hb-tz{ color:var(--muted); font-size:.8rem; }

/* head hidden by default (service name lives in page copy) */
.hb-head{ display:none; }
.hb-tz{ display:none; }

/* ---- top pill bar (1 / 2 / 3) ---- */
.hb-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.hb-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--c); color:var(--i); border-radius:999px; padding:8px 16px; font-size:.85rem; font-weight:500; transition:background .2s ease,color .2s ease; }
.hb-pill b{ font-weight:700; color:var(--a); }
.hb-pill.is-active{ background:var(--a); color:#fff; font-weight:600; }
.hb-pill.is-active b{ color:#fff; }

/* grid: pills row, then calendar left (both rows), time + details stacked right */
.hb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"date time" "date details";
  align-items:start;
  gap:24px 48px;
}
.hb-col--date{ grid-area:date; }
.hb-col--time{ grid-area:time; }
.hb-col--details{ grid-area:details; }

/* section headings → plain uppercase (not pills) */
.hb-step-label{ display:block; font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--i); margin-bottom:16px; }
.hb-step-label span{ display:inline; background:none; width:auto; height:auto; margin-right:3px; }
.hb-step-label span::after{ content:"."; }

/* calendar */
.hb-cal-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px; }
.hb-cal-nav button{ background:none; border:0; cursor:pointer; font-size:1.3rem; line-height:1; color:var(--a); width:34px; height:34px; border-radius:8px; }
.hb-cal-nav button:disabled{ opacity:.3; cursor:default; }
.hb-cal-nav button:hover:not(:disabled){ background:var(--c); }
.hb-month{ font-family:var(--font-head,serif); font-size:1.1rem; color:var(--i); min-width:150px; text-align:center; }
.hb-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.hb-cal-dow span{ text-align:center; font-size:.7rem; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.hb-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.hb-day{ aspect-ratio:1; border:1.5px solid transparent; background:none; border-radius:10px; font:inherit; font-size:.92rem; color:var(--i); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.hb-day.is-empty{ visibility:hidden; }
.hb-day.is-off{ color:#c9c2b6; cursor:default; border-color:transparent; }
.hb-day.is-open{ background:#fff; border-color:var(--line); font-weight:600; }
.hb-day.is-open:hover{ border-color:var(--a); }
.hb-day.is-selected{ background:var(--a)!important; border-color:var(--a)!important; color:#fff!important; font-weight:600; }
.hb-cal-note{ font-size:.82rem; color:var(--muted); margin:14px 0 0; }

/* times */
.hb-times{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.hb-times-empty{ grid-column:1 / -1; color:var(--muted); }
.hb-time{ padding:13px 10px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font:inherit; font-weight:500; color:var(--i); cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.hb-time:hover{ border-color:var(--a); }
.hb-time.is-selected{ background:var(--i); border-color:var(--i); color:#fff; }

/* details form */
.hb-field{ display:block; margin-bottom:16px; }
.hb-field span{ display:block; font-weight:600; color:var(--i); font-size:.9rem; margin-bottom:6px; }
.hb-field input{ width:100%; font:inherit; font-size:1rem; color:var(--i); background:var(--c); border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; box-sizing:border-box; transition:border-color .2s ease,box-shadow .2s ease; }
.hb-field input:focus{ outline:none; border-color:var(--a); box-shadow:0 0 0 3px rgba(184,147,63,.15); }

.hb-summary{ background:var(--c); border-radius:12px; padding:14px 16px; margin:6px 0 18px; color:var(--i); font-size:.95rem; }
.hb-error{ color:#b23b3b; margin:0 0 14px; font-size:.92rem; }

.hb-submit{ width:100%; font:inherit; font-weight:600; font-size:1rem; background:var(--a); color:var(--i); border:0; border-radius:999px; padding:16px; min-height:54px; cursor:pointer; transition:filter .2s ease,transform .2s ease; }
.hb-submit:hover:not(:disabled){ filter:brightness(.94); transform:translateY(-1px); }
.hb-submit:disabled{ opacity:.5; cursor:default; }

/* done */
.hb-done{ text-align:center; padding:30px 10px; }
.hb-done-tick{ width:60px; height:60px; margin:0 auto 16px; border-radius:50%; background:var(--a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.hb-done-title{ font-family:var(--font-head,serif); font-weight:500; color:var(--i); margin:0 0 8px; }
.hb-done-msg,.hb-done-when{ color:var(--body); margin:4px 0; }
.hb-done-when{ font-weight:600; color:var(--i); }

/* focus */
.hb-widget button:focus-visible, .hb-widget input:focus-visible{ outline:3px solid var(--a); outline-offset:2px; }

@media (max-width:820px){
  .hb-grid{ grid-template-columns:1fr; gap:26px; }
  .hb-widget{ padding:22px; }
}
@media (prefers-reduced-motion:reduce){
  .hb-widget *{ transition:none!important; }
}