/* Brush 'N' Blush booking form.
   Inherits the theme's tokens. Nothing here redefines a colour the theme
   already owns, so a brand change in one place moves the form with it. */

.bnbb{
  --bnbb-radius: var(--r-btn, 8px);
  font-family: var(--body, system-ui, sans-serif);
  color: var(--ink, #111111);
}
.bnbb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bnbb-step{
  padding: var(--s6, 32px) 0;
  border-bottom: 1px solid var(--border, #E1E8E7);
}
.bnbb-step:first-child{padding-top:0}

.bnbb-h{
  font-family: var(--display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 25px);
  line-height: var(--lh-subhead, 1.3);
  margin: 0 0 var(--s2, 8px);
}
.bnbb-help{color:var(--muted,#3F4A4A);font-size:15px;line-height:var(--lh-body,1.6);margin:0 0 var(--s4,16px);max-width:62ch}

/* ---- Services ---- */
.bnbb-group{border:0;margin:0 0 var(--s5,24px);padding:0}
.bnbb-group legend{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted,#3F4A4A);padding:0;margin-bottom:var(--s3,12px);
}
.bnbb-options{display:grid;gap:var(--s2,8px);grid-template-columns:repeat(2,minmax(0,1fr))}
.bnbb-option{
  display:flex;align-items:center;gap:var(--s3,12px);min-height:52px;
  padding:var(--s3,12px) var(--s4,16px);
  border:1px solid var(--line,#E3DED4);border-radius:var(--bnbb-radius);
  cursor:pointer;background:var(--surface,#fff);
  transition:border-color 200ms ease, background-color 200ms ease;
}
.bnbb-option:hover{border-color:var(--line-strong,#CFC5B6)}
.bnbb-option input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent,#7A5D14);margin:0}
.bnbb-option__name{flex:1;font-size:15px;line-height:var(--lh-tight,1.4)}
.bnbb-option__price{
  font-size:14px;font-weight:600;color:var(--muted,#3F4A4A);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bnbb-option:has(input:checked){
  border-color:var(--accent,#7A5D14);
  background:var(--cream-deep,#EFE8DE);
}
.bnbb-option:has(input:focus-visible){outline:3px solid var(--accent,#7A5D14);outline-offset:2px}

/* ---- Location ---- */
.bnbb-choice{display:grid;gap:var(--s3,12px);grid-template-columns:repeat(2,minmax(0,1fr))}
.bnbb-radio{
  display:flex;align-items:flex-start;gap:var(--s3,12px);
  padding:var(--s4,16px);border:1px solid var(--line,#E3DED4);
  border-radius:var(--bnbb-radius);cursor:pointer;background:var(--surface,#fff);
}
.bnbb-radio input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent,#7A5D14);margin-top:2px}
.bnbb-radio strong{display:block;font-size:16px;line-height:var(--lh-subhead,1.3)}
.bnbb-radio small{display:block;color:var(--muted,#3F4A4A);font-size:14px;line-height:var(--lh-tight,1.4);margin-top:2px}
.bnbb-radio:has(input:checked){border-color:var(--accent,#7A5D14);background:var(--cream-deep,#EFE8DE)}
.bnbb-radio:has(input:focus-visible){outline:3px solid var(--accent,#7A5D14);outline-offset:2px}

/* ---- Fields ---- */
.bnbb-field{margin-bottom:var(--s4,16px)}
.bnbb-field label{
  display:block;font-size:14px;font-weight:600;margin-bottom:var(--s2,8px);
  line-height:var(--lh-tight,1.4);
}
.bnbb-optional{font-weight:400;color:var(--muted,#3F4A4A)}
.bnbb-field input[type="text"],
.bnbb-field input[type="tel"],
.bnbb-field input[type="email"],
.bnbb-field input[type="date"],
.bnbb-field textarea{
  width:100%;min-height:48px;padding:var(--s3,12px) var(--s4,16px);
  font:400 16px/1.5 var(--body, system-ui, sans-serif);color:var(--ink,#111111);
  background:var(--cream,#F7F4EF);border:1px solid var(--line,#E3DED4);
  border-radius:var(--bnbb-radius);
}
.bnbb-field textarea{min-height:96px;resize:vertical}
.bnbb-field input:focus-visible,.bnbb-field textarea:focus-visible{
  outline:3px solid var(--accent,#7A5D14);outline-offset:2px;background:#fff;
}
.bnbb-field--date input{max-width:15rem}
.bnbb-row{display:grid;gap:var(--s4,16px);grid-template-columns:repeat(2,minmax(0,1fr))}
.bnbb-field[data-invalid="1"] input,
.bnbb-field[data-invalid="1"] textarea{border-color:var(--danger,#A3182A)}

.bnbb-error{
  display:flex;align-items:flex-start;gap:6px;
  color:var(--danger,#A3182A);font-size:14px;line-height:var(--lh-tight,1.4);
  margin:var(--s2,8px) 0 0;
}
.bnbb-error::before{content:"!";flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  background:var(--danger,#A3182A);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;margin-top:1px}
.bnbb-error--form{margin:var(--s4,16px) 0}

/* ---- Slots ---- */
.bnbb-slots{margin-top:var(--s4,16px);min-height:64px}
.bnbb-slotgrid{display:grid;gap:var(--s2,8px);grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.bnbb-slot{
  min-height:48px;padding:var(--s3,12px);border:1px solid var(--line,#E3DED4);
  border-radius:var(--bnbb-radius);background:var(--surface,#fff);cursor:pointer;
  font:500 15px/1.2 var(--body, system-ui, sans-serif);color:var(--ink,#111111);
  font-variant-numeric:tabular-nums;
  transition:border-color 200ms ease,background-color 200ms ease,color 200ms ease;
}
.bnbb-slot:hover{border-color:var(--line-strong,#CFC5B6)}
.bnbb-slot[aria-pressed="true"]{background:var(--accent,#7A5D14);border-color:var(--accent,#7A5D14);color:#fff}
.bnbb-slot:focus-visible{outline:3px solid var(--accent,#7A5D14);outline-offset:2px}

/* Skeletons match the shape of what is arriving, so nothing jumps. */
.bnbb-skeleton{display:grid;gap:var(--s2,8px);grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.bnbb-skeleton span{
  height:48px;border-radius:var(--bnbb-radius);
  background:linear-gradient(90deg,var(--cream,#F7F4EF) 25%,#E7DFD2 37%,var(--cream,#F7F4EF) 63%);
  background-size:400% 100%;animation:bnbb-shimmer 1.4s ease infinite;
}
@keyframes bnbb-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.bnbb-none{
  border:1px dashed var(--line-strong,#CFC5B6);border-radius:var(--bnbb-radius);
  padding:var(--s5,24px);background:var(--cream,#F7F4EF);
}
.bnbb-none strong{display:block;margin-bottom:4px}
.bnbb-none span{display:block;color:var(--muted,#3F4A4A);font-size:15px}
.bnbb-none__next{margin-top:var(--s3,12px);color:var(--ink,#111111) !important;font-weight:600}
.bnbb-jump{
  margin-top:var(--s3,12px);min-height:44px;padding:0 var(--s4,16px);
  border:1px solid var(--teal-deep,#0E4F54);border-radius:var(--bnbb-radius);
  background:transparent;color:var(--teal-deep,#0E4F54);cursor:pointer;
  font:600 15px/1.2 var(--body, system-ui, sans-serif);
  transition:background-color 200ms ease,color 200ms ease;
}
.bnbb-jump:hover{background:var(--teal-deep,#0E4F54);color:#fff}
.bnbb-jump:focus-visible{outline:3px solid var(--accent,#7A5D14);outline-offset:2px}

/* ---- Consent, honeypot, summary ---- */
.bnbb-consent{display:flex;align-items:flex-start;gap:var(--s3,12px);font-weight:400;font-size:15px;line-height:var(--lh-body,1.6)}
.bnbb-consent input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent,#7A5D14)}
.bnbb-consent a{color:var(--accent,#7A5D14)}
.bnbb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bnbb-summary:not(:empty){
  margin:var(--s6,32px) 0 0;padding:var(--s5,24px);
  background:var(--cream-deep,#EFE8DE);border-radius:var(--r-card,14px);
}
.bnbb-summary dl{display:grid;gap:var(--s3,12px);margin:0}
.bnbb-summary div{display:flex;justify-content:space-between;gap:var(--s4,16px);flex-wrap:wrap}
.bnbb-summary dt{font-size:14px;color:var(--muted,#3F4A4A)}
.bnbb-summary dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bnbb-summary .bnbb-summary__note{
  margin-top:var(--s4,16px);padding-top:var(--s4,16px);
  border-top:1px solid rgba(10,59,63,.2);font-size:14px;color:var(--muted,#3F4A4A);text-align:left;
}

/* ---- Submit ---- */
.bnbb-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;margin-top:var(--s6,32px);padding:var(--s4,16px) var(--s8,48px);
  border:1.5px solid var(--accent,#7A5D14);border-radius:var(--bnbb-radius);
  background:var(--accent,#7A5D14);color:#fff;
  font:700 11px/1 var(--body, system-ui, sans-serif);
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background-color 200ms ease;
}
.bnbb-submit:hover{background:var(--accent-hover,#5F480F);border-color:var(--accent-hover,#5F480F)}
.bnbb-submit[disabled]{opacity:.6;cursor:not-allowed}
.bnbb-submit:focus-visible{outline:3px solid var(--accent,#7A5D14);outline-offset:3px}
.bnbb-fineprint{margin:var(--s3,12px) 0 0;font-size:14px;color:var(--muted,#3F4A4A);max-width:60ch}

/* ---- Done ---- */
.bnbb-done{padding:var(--s6,32px);background:var(--cream-deep,#EFE8DE);border-radius:var(--r-card,14px)}
.bnbb-done h2{font-family:var(--display,Georgia,serif);margin:0 0 var(--s3,12px)}
.bnbb-done dl{display:grid;gap:var(--s3,12px);margin:var(--s5,24px) 0}
.bnbb-done dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#3F4A4A)}
.bnbb-done dd{margin:2px 0 0;font-size:16px}
.bnbb-done pre{
  white-space:pre-wrap;font:400 15px/1.6 var(--body, system-ui, sans-serif);
  background:#fff;border-radius:var(--bnbb-radius);padding:var(--s4,16px);margin:0 0 var(--s4,16px);
  overflow-x:auto;
}
.bnbb-ref{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;font-weight:600;letter-spacing:.06em;
  background:#fff;border-radius:var(--r-chip,8px);padding:6px 12px;
}

@media (max-width:640px){
  .bnbb-options,.bnbb-choice,.bnbb-row{grid-template-columns:1fr}
  .bnbb-submit{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .bnbb-skeleton span{animation:none}
}