/* BookWorxs public booking — STRUCTURE ONLY.
   ------------------------------------------------------------------
   Every colour, font, radius, shadow and spacing value comes from a
   --bw-* variable (the theme contract in services/api/src/lib/bookingTheme.ts).
   This file must never name a colour or a font family. The same sheet
   serves the hosted page, a website embed and a WordPress plugin; the
   host supplies the variables on the .bw root.                      */

.bw, .bw * { box-sizing: border-box; }
.bw {
  --bw-brand: #2B3A55; --bw-primary: #2B3A55; --bw-on-primary: #fff; --bw-secondary: #5A6B84; --bw-accent: #C9A24D;
  --bw-ink: #1A1D23; --bw-muted: #5F6672; --bw-heading: #1F2A3D; --bw-surface: #fff; --bw-bg: #F6F7F9;
  --bw-tint: #EEF1F5; --bw-border: #D9DEE6; --bw-success: #1E7F4F; --bw-danger: #B4322E;
  --bw-font-heading: Inter, Georgia, serif; --bw-font-body: Inter, system-ui, sans-serif;
  --bw-weight-heading: 700; --bw-weight-body: 400;
  --bw-r-button: 8px; --bw-r-card: 10px; --bw-r-field: 8px;
  --bw-card-border: 1px solid #D9DEE6; --bw-card-shadow: none;
  --bw-size-body: 16px; --bw-size-h1: 32px; --bw-line-height: 1.6; --bw-gap: 16px; --bw-max-width: 880px;

  font-family: var(--bw-font-body); font-weight: var(--bw-weight-body); font-size: var(--bw-size-body);
  line-height: var(--bw-line-height); color: var(--bw-ink); background: var(--bw-bg);
  -webkit-font-smoothing: antialiased; min-height: 100%;
}
.bw--embedded { background: transparent; min-height: 0; }
.bw__frame { max-width: var(--bw-max-width); margin: 0 auto; padding: 0 calc(var(--bw-gap) * 1.25) calc(var(--bw-gap) * 3); }
.bw h1, .bw h2, .bw h3 { font-family: var(--bw-font-heading); font-weight: var(--bw-weight-heading); color: var(--bw-heading); margin: 0; line-height: 1.2; text-wrap: balance; }
.bw p { margin: 0; }
.bw button { font: inherit; cursor: pointer; }
.bw a { color: var(--bw-primary); }

/* ---- header: identity + powered-by ------------------------------- */
.bw__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bw-gap); padding: calc(var(--bw-gap) * 1.1) 0; border-bottom: 1px solid var(--bw-border); }
.bw__brand { display: flex; align-items: center; gap: calc(var(--bw-gap) * .75); min-width: 0; }
.bw__logo { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: var(--bw-tint); color: var(--bw-primary); display: grid; place-items: center; font-family: var(--bw-font-heading); font-weight: var(--bw-weight-heading); font-size: 16px; overflow: hidden; }
.bw__logo img { width: 100%; height: 100%; object-fit: cover; }
.bw__name { font-family: var(--bw-font-heading); font-weight: var(--bw-weight-heading); color: var(--bw-heading); font-size: 1.15em; line-height: 1.2; }
.bw__meta { color: var(--bw-muted); font-size: .85em; line-height: 1.3; }
.bw__powered { color: var(--bw-muted); font-size: .78em; white-space: nowrap; }

/* ---- hero band ----------------------------------------------------- */
.bw__hero { background: var(--bw-tint); border-radius: var(--bw-r-card); padding: calc(var(--bw-gap) * 2) calc(var(--bw-gap) * 1.5); margin-top: calc(var(--bw-gap) * 1.25); }
.bw__hero h1 { font-size: var(--bw-size-h1); margin-bottom: calc(var(--bw-gap) * .5); }
.bw__hero p { color: var(--bw-ink); max-width: 36em; }

/* ---- progress ------------------------------------------------------ */
.bw__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: calc(var(--bw-gap) * 1.25) 0; }
.bw__step { display: flex; align-items: center; gap: 8px; font-size: .85em; color: var(--bw-muted); }
.bw__step .n { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--bw-tint); color: var(--bw-muted); font-weight: 700; font-size: .85em; border: 1px solid var(--bw-border); }
.bw__step--active { color: var(--bw-heading); font-weight: 700; }
.bw__step--active .n { background: var(--bw-primary); color: var(--bw-on-primary); border-color: var(--bw-brand); box-shadow: 0 0 0 2px var(--bw-brand); }
.bw__step--done .n { background: var(--bw-success); color: #fff; border-color: var(--bw-success); }
.bw__step--done .n::before { content: "✓"; }
.bw__step--done .n span { display: none; }

/* ---- the panel ----------------------------------------------------- */
.bw__panel { background: var(--bw-surface); border: var(--bw-card-border); border-radius: var(--bw-r-card); box-shadow: var(--bw-card-shadow); padding: calc(var(--bw-gap) * 1.5); }
.bw__panel h2 { font-size: 1.4em; margin-bottom: 4px; }
.bw__lead { color: var(--bw-muted); margin-bottom: var(--bw-gap); }
.bw__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--bw-gap); margin-top: calc(var(--bw-gap) * 1.25); }
.bw__actions--end { justify-content: flex-end; }

/* buttons */
.bw__btn { border: 1px solid transparent; border-radius: var(--bw-r-button); padding: 12px 20px; font-weight: 700; line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bw__btn--primary { background: var(--bw-primary); color: var(--bw-on-primary); }
.bw__btn--primary:hover { filter: brightness(.94); }
.bw__btn--primary[disabled] { opacity: .45; cursor: not-allowed; }
.bw__btn--ghost { background: var(--bw-surface); color: var(--bw-ink); border-color: var(--bw-border); }
.bw__btn--ghost:hover { background: var(--bw-tint); }
.bw__btn:focus-visible { outline: 3px solid var(--bw-accent); outline-offset: 2px; }

/* ---- step 1: services ---------------------------------------------- */
.bw__services { display: grid; gap: calc(var(--bw-gap) * .75); }
.bw__service { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; text-align: left; width: 100%; background: var(--bw-surface); border: 1px solid var(--bw-border); border-radius: var(--bw-r-card); padding: 14px 16px; color: var(--bw-ink); }
.bw__service:hover { border-color: var(--bw-brand); }
.bw__service--selected { border-color: var(--bw-brand); background: var(--bw-tint); box-shadow: inset 0 0 0 1px var(--bw-brand); }
.bw__radio { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--bw-border); background: var(--bw-surface); }
.bw__service--selected .bw__radio { border: 6px solid var(--bw-brand); }
.bw__service b { display: block; font-family: var(--bw-font-heading); font-weight: var(--bw-weight-heading); color: var(--bw-heading); font-size: 1.05em; }
.bw__service small { display: block; color: var(--bw-muted); font-size: .88em; line-height: 1.45; }
.bw__price { font-weight: 700; font-size: 1.1em; color: var(--bw-heading); white-space: nowrap; }
.bw__price--free { color: var(--bw-success); }

/* ---- step 2: calendar ---------------------------------------------- */
.bw__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bw__calhead b { font-family: var(--bw-font-heading); font-weight: var(--bw-weight-heading); color: var(--bw-heading); font-size: 1.1em; }
.bw__nav { border: 1px solid var(--bw-border); background: var(--bw-surface); border-radius: var(--bw-r-button); width: 36px; height: 36px; display: grid; place-items: center; color: var(--bw-ink); }
.bw__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bw__dow { text-align: center; font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: var(--bw-muted); padding: 4px 0; }
.bw__day { aspect-ratio: 1; border: 1px solid var(--bw-border); border-radius: var(--bw-r-field); background: var(--bw-surface); color: var(--bw-ink); font-weight: 600; display: grid; place-items: center; position: relative; }
.bw__day--pad { border-color: transparent; background: transparent; }
.bw__day--open { border-color: var(--bw-brand); color: var(--bw-primary); }
.bw__day--open::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--bw-brand); }
.bw__day--closed { color: var(--bw-muted); opacity: .45; cursor: not-allowed; }
.bw__day--selected { background: var(--bw-primary); color: var(--bw-on-primary); border-color: var(--bw-primary); }
.bw__day--selected::after { background: var(--bw-on-primary); }
.bw__staff { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--bw-gap); }
.bw__chip { border: 1px solid var(--bw-border); background: var(--bw-surface); border-radius: 999px; padding: 6px 12px; font-size: .9em; color: var(--bw-ink); }
.bw__chip--on { border-color: var(--bw-brand); background: var(--bw-tint); color: var(--bw-heading); font-weight: 700; }

/* ---- step 3: times ------------------------------------------------- */
.bw__times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bw__time { border: 1px solid var(--bw-border); background: var(--bw-surface); color: var(--bw-ink); border-radius: var(--bw-r-field); padding: 11px 6px; text-align: center; font-weight: 600; }
.bw__time:hover { border-color: var(--bw-primary); }
.bw__time--on { background: var(--bw-primary); color: var(--bw-on-primary); border-color: var(--bw-primary); }
.bw__group { margin: var(--bw-gap) 0 8px; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--bw-muted); }
.bw__empty { color: var(--bw-muted); padding: var(--bw-gap) 0; }

/* ---- step 4: details ----------------------------------------------- */
.bw__form { display: grid; gap: var(--bw-gap); grid-template-columns: 1fr 1fr; }
.bw__field { display: grid; gap: 6px; }
.bw__field--full { grid-column: 1 / -1; }
.bw__field label { font-weight: 600; font-size: .92em; color: var(--bw-heading); }
.bw__field input, .bw__field textarea { font: inherit; color: var(--bw-ink); background: var(--bw-surface); border: 1px solid var(--bw-border); border-radius: var(--bw-r-field); padding: 11px 12px; width: 100%; }
.bw__field input:focus, .bw__field textarea:focus { outline: 2px solid var(--bw-primary); outline-offset: 1px; border-color: var(--bw-primary); }
.bw__field textarea { min-height: 84px; resize: vertical; }
.bw__hint { font-size: .8em; color: var(--bw-muted); }
.bw__human { grid-column: 1 / -1; min-height: 66px; }
.bw__human-preview { border: 1px dashed var(--bw-border); border-radius: var(--bw-r-field); padding: 12px; color: var(--bw-muted); font-size: .85em; background: var(--bw-tint); }

/* ---- step 5: confirm + done ---------------------------------------- */
.bw__summary { display: grid; gap: 10px; border: 1px solid var(--bw-border); border-radius: var(--bw-r-card); padding: var(--bw-gap); background: var(--bw-tint); }
.bw__row { display: grid; grid-template-columns: 34% 1fr; gap: 10px; font-size: .95em; }
.bw__row span:first-child { color: var(--bw-muted); }
.bw__row span:last-child { color: var(--bw-ink); font-weight: 600; }
.bw__done { text-align: center; padding: calc(var(--bw-gap) * 1.5) 0; }
.bw__check { width: 64px; height: 64px; border-radius: 50%; background: var(--bw-success); color: #fff; display: grid; place-items: center; font-size: 32px; margin: 0 auto calc(var(--bw-gap) * .75); }
.bw__done h2 { font-size: 1.6em; margin-bottom: 6px; }
.bw__done p { color: var(--bw-muted); max-width: 32em; margin: 0 auto; }
.bw__done .bw__summary { text-align: left; margin: var(--bw-gap) auto 0; max-width: 480px; }
.bw__done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--bw-gap); }
.bw__alert { border-radius: var(--bw-r-field); padding: 10px 12px; font-size: .92em; margin-bottom: var(--bw-gap); background: var(--bw-tint); color: var(--bw-ink); border: 1px solid var(--bw-border); }
.bw__alert--danger { border-color: var(--bw-danger); color: var(--bw-danger); }

/* ---- footer -------------------------------------------------------- */
.bw__foot { display: flex; justify-content: space-between; gap: var(--bw-gap); color: var(--bw-muted); font-size: .8em; padding: calc(var(--bw-gap) * 1.25) 0 0; margin-top: calc(var(--bw-gap) * 1.5); border-top: 1px solid var(--bw-border); }

/* ---- small screens -------------------------------------------------- */
@media (max-width: 640px) {
  .bw__frame { padding: 0 var(--bw-gap) calc(var(--bw-gap) * 2); }
  .bw__powered { display: none; }
  .bw__hero { padding: calc(var(--bw-gap) * 1.4) var(--bw-gap); }
  .bw__hero h1 { font-size: calc(var(--bw-size-h1) * .78); }
  .bw__steps { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .bw__step { flex-direction: column; gap: 4px; font-size: .68em; text-align: center; }
  .bw__panel { padding: var(--bw-gap); }
  .bw__service { grid-template-columns: 20px 1fr; }
  .bw__price { grid-column: 2; justify-self: start; }
  .bw__times { grid-template-columns: repeat(3, 1fr); }
  .bw__form { grid-template-columns: 1fr; }
  .bw__actions { flex-direction: column-reverse; align-items: stretch; }
  .bw__actions .bw__btn { justify-content: center; }
  .bw__row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .bw * { transition: none !important; } }

/* SMS consent (shown only when the business has turned text messaging on) */
.bw__consent { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--bw-gap) * .5); align-items: start; cursor: pointer; padding: calc(var(--bw-gap) * .6) calc(var(--bw-gap) * .7); border: 1px solid var(--bw-border); border-radius: var(--bw-radius-button); background: var(--bw-tint); }
.bw__consent input { margin-top: .3em; width: 1.1em; height: 1.1em; accent-color: var(--bw-primary); }
.bw__consent b { display: block; font-weight: 600; color: var(--bw-ink); }
.bw__consent small { display: block; margin-top: .2em; color: var(--bw-muted); font-size: .85em; line-height: 1.45; }
.bw__alert--ok { border-color: var(--bw-success); color: var(--bw-success); }

/* inline field validation (never a silently disabled button) */
.bw__field--invalid input, .bw__field--invalid textarea { border-color: var(--bw-danger); }
.bw__error { display: block; margin-top: .3em; font-size: .85em; color: var(--bw-danger); }
.bw__day--unknown { color: var(--bw-muted); }

/* the owner's private preview */
.bw__preview { background: #FFF6DA; color: #6B4A00; border: 1px solid #F5A800; border-radius: 8px; padding: .55rem .8rem; font-size: .9rem; margin: 0 0 1rem; }

/* choosing the person */
.bw__who { margin-bottom: var(--bw-gap); }
.bw__who-label { margin: 0 0 8px; color: var(--bw-muted); font-size: .95em; }
.bw__chip { cursor: pointer; font-weight: 600; }

/* who performs it, on the service card */
.bw__service .bw__with { color: var(--bw-ink); font-weight: 700; }

/* choosing a person: cards */
.bw__people { display: grid; gap: 10px; margin-bottom: var(--bw-gap); }
.bw__person { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--bw-border); background: var(--bw-surface); border-radius: var(--bw-r-card); padding: 12px 14px; font: inherit; color: var(--bw-ink); cursor: pointer; }
.bw__person:hover { border-color: var(--bw-brand); }
.bw__person--on { border-color: var(--bw-brand); background: var(--bw-tint); box-shadow: inset 0 0 0 1px var(--bw-brand); }
.bw__person-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bw__person-body b { font-size: 1.05em; } .bw__person-title { color: var(--bw-heading); font-weight: 600; } .bw__person-bio { color: var(--bw-muted); line-height: 1.4; }
.bw__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; } .bw__tag { border: 1px solid var(--bw-border); border-radius: 999px; padding: 2px 9px; font-size: .82em; color: var(--bw-ink); background: var(--bw-surface); }
.bw__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bw-tint); }
.bw__photo--initials { display: inline-grid; place-items: center; color: var(--bw-primary); font-weight: 700; }
.bw__with-person { display: inline-flex; align-items: center; gap: 8px; } .bw__with-person .bw__photo { width: 32px; height: 32px; }