/* Service-mode widget: one service, its size, its extras.
   Only what widget-base.css does not already cover — everything else reuses the shared classes
   so a theme restyles both flows at once. */

#bf-widget { max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; }

.bf-svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--bf-line); }
.bf-svc-head .n { font-family: var(--bf-font-display); font-size: 20px; font-weight: 700; }
.bf-svc-head .m { color: var(--bf-muted); font-size: 13px; margin-top: 3px; }
.bf-svc-head .p { font-weight: 700; font-size: 20px; white-space: nowrap; }

/* Rows that can be picked: sizes (one of) and extras (many). */
.bf-pick { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: var(--bf-panel); transition: border-color .12s, background .12s; }
.bf-pick:hover { border-color: var(--bf-brand); }
.bf-pick.on { border-color: var(--bf-brand); box-shadow: inset 0 0 0 1px var(--bf-brand); }
.bf-pick .bf-pick-main { flex: 1; min-width: 0; }
.bf-pick .bf-pick-name { font-weight: 600; }
.bf-pick .bf-pick-sub { color: var(--bf-muted); font-size: 12px; margin-top: 2px; }
.bf-pick .bf-pick-price { font-weight: 600; white-space: nowrap; }
.bf-pick input[type=radio], .bf-pick input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; }

/* Quantity stepper for extras that allow more than one. */
.bf-qty { display: flex; align-items: center; gap: 8px; }
.bf-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bf-line);
  background: transparent; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.bf-qty button:hover { border-color: var(--bf-brand); }
.bf-qty .v { min-width: 20px; text-align: center; font-weight: 600; }

/* Running total pinned to the bottom so the price is never off-screen mid-decision. */
.bf-total { position: sticky; bottom: 0; background: var(--bf-bg); border-top: 1px solid var(--bf-line);
  padding: 12px 0 0; margin-top: 18px; box-shadow: var(--bf-bar-shadow); }
.bf-total .row { display: flex; justify-content: space-between; align-items: baseline; }
.bf-total .lbl { color: var(--bf-muted); font-size: 13px; }
.bf-total .val { font-size: 22px; font-weight: 700; font-family: var(--bf-font-display); }

.bf-back { background: none; border: 0; color: var(--bf-muted); cursor: pointer; font: inherit;
  padding: 0; margin-bottom: 12px; }
.bf-back:hover { color: var(--bf-ink); }
.bf-lang { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.bf-lang a { font-size: 12px; color: var(--bf-muted); text-transform: uppercase; cursor: pointer; }
.bf-lang a.on { color: var(--bf-brand); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * Three-step flow: labelled progress, tick-box options, week calendar
 * ------------------------------------------------------------------ */

/* The old indicator was four bare dots for six screens and the service list showed none, so
   the numbers appeared to stall. Three steps, each named, each always visible. */
.bf-steps { display: flex; gap: 4px; justify-content: center; margin: 0 0 20px; }
.bf-step { display: flex; flex-direction: column; align-items: center; gap: 6px;
	flex: 1 1 0; max-width: 140px; }
.bf-step .dot { width: 30px; height: 30px; border-radius: 999px; display: flex;
	align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
	background: var(--bf-surface-2, #1b1e24); color: var(--bf-muted, #8b93a1);
	border: 1px solid var(--bf-line, #262a32); transition: .15s; }
.bf-step .lbl { font-size: 11px; color: var(--bf-muted, #8b93a1); text-align: center;
	line-height: 1.2; }
.bf-step.on .dot { background: var(--bf-brand, #e8600a); color: #fff;
	border-color: var(--bf-brand, #e8600a); }
.bf-step.on .lbl { color: var(--bf-ink, #f2f4f7); font-weight: 600; }
.bf-step.done .dot { background: transparent; color: var(--bf-brand, #e8600a);
	border-color: var(--bf-brand, #e8600a); }

/* Tick-box options. The whole label is the hit area — tapping the NAME of an add-on is what
   everybody does, and previously only the 16px checkbox itself responded. */
.bf-opts { display: flex; flex-direction: column; gap: 8px; }
.bf-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
	border: 1px solid var(--bf-line, #262a32); border-radius: 14px; cursor: pointer;
	background: var(--bf-surface-2, #1b1e24); transition: border-color .15s, background .15s; }
.bf-opt:hover { border-color: var(--bf-brand, #e8600a); }
.bf-opt.on { border-color: var(--bf-brand, #e8600a);
	background: color-mix(in srgb, var(--bf-brand, #e8600a) 8%, transparent); }
.bf-opt-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bf-opt-name { font-weight: 600; }
.bf-opt-desc { font-size: 13px; color: var(--bf-muted, #8b93a1); line-height: 1.45; }
.bf-opt-meta { font-size: 12px; color: var(--bf-muted, #8b93a1); }
.bf-opt-price { font-weight: 600; white-space: nowrap; }

/* A checkbox that matches the rest of the widget rather than the browser's default white square. */
.bf-check { appearance: none; -webkit-appearance: none; flex: none;
	width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; cursor: pointer;
	border: 2px solid var(--bf-line, #3a4049); background: transparent; position: relative;
	transition: .15s; }
.bf-check:checked { background: var(--bf-brand, #e8600a); border-color: var(--bf-brand, #e8600a); }
.bf-check:checked::after { content: ""; position: absolute; left: 6px; top: 2px;
	width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg); }

/* Explanations. The page had none of these and read as a bare price list. */
.bf-prose { font-size: 14px; line-height: 1.6; color: var(--bf-ink-2, #c8cdd6); margin: 14px 0; }
.bf-prose p { margin: 0 0 10px; }
.bf-prose b { color: var(--bf-ink, #f2f4f7); }
.bf-callout { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px;
	font-size: 13.5px; line-height: 1.55; margin: 14px 0;
	background: var(--bf-surface-2, #1b1e24); border: 1px solid var(--bf-line, #262a32); }
.bf-callout .i { flex: none; font-size: 16px; line-height: 1.4; }
.bf-callout.warning { border-color: #8a5a1e; background: rgba(180, 110, 20, .10); }
.bf-callout.star { border-color: var(--bf-brand, #e8600a);
	background: color-mix(in srgb, var(--bf-brand, #e8600a) 9%, transparent); }
.bf-recurring b { color: var(--bf-ink, #f2f4f7); }
.bf-tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
	vertical-align: middle; background: color-mix(in srgb, var(--bf-brand, #e8600a) 18%, transparent);
	color: var(--bf-brand, #e8600a); }
.bf-backlink { display: inline-block; margin: 2px 0 6px; font-size: 13px; cursor: pointer;
	color: var(--bf-muted, #8b93a1); }
.bf-backlink:hover { color: var(--bf-brand, #e8600a); }
.bf-link { color: var(--bf-brand, #e8600a); text-decoration: underline; }
.bf-pick-meta { font-size: 12px; color: var(--bf-muted, #8b93a1); margin-top: 3px; }

/* Week calendar. A date box plus one day of times made the customer hunt for a free day one
   click at a time; this shows where the space actually is before they choose. */
.bf-week { display: flex; align-items: stretch; gap: 6px; margin: 12px 0 6px; }
.bf-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; flex: 1;
	min-width: 0; }
.bf-week-nav { flex: none; width: 30px; border-radius: 10px; cursor: pointer; font-size: 18px;
	border: 1px solid var(--bf-line, #262a32); background: var(--bf-surface-2, #1b1e24);
	color: var(--bf-ink, #f2f4f7); }
.bf-week-nav:disabled { opacity: .3; cursor: default; }
.bf-day { border: 1px solid var(--bf-line, #262a32); border-radius: 12px; padding: 8px 2px;
	text-align: center; cursor: pointer; background: var(--bf-surface-2, #1b1e24);
	transition: .15s; min-width: 0; }
.bf-day:hover { border-color: var(--bf-brand, #e8600a); }
.bf-day.on { border-color: var(--bf-brand, #e8600a);
	background: color-mix(in srgb, var(--bf-brand, #e8600a) 12%, transparent); }
.bf-day.empty { opacity: .38; cursor: default; }
.bf-day.empty:hover { border-color: var(--bf-line, #262a32); }
.bf-day .dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--bf-muted, #8b93a1); }
.bf-day .num { font-size: 17px; font-weight: 700; line-height: 1.25; }
.bf-day .cnt { font-size: 10px; color: var(--bf-muted, #8b93a1); }
.bf-day.on .cnt { color: var(--bf-brand, #e8600a); }
.bf-daylabel { font-weight: 600; margin: 14px 0 4px; text-transform: capitalize; }
.bf-part { margin-top: 10px; }
.bf-part-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bf-muted, #8b93a1); margin-bottom: 6px; }
.bf-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.bf-time { padding: 10px 4px; border-radius: 10px; text-align: center; cursor: pointer;
	font-size: 14px; font-weight: 600; font-family: inherit;
	border: 1px solid var(--bf-line, #262a32); background: var(--bf-surface-2, #1b1e24);
	color: var(--bf-ink, #f2f4f7); transition: .12s; }
.bf-time:hover { border-color: var(--bf-brand, #e8600a); }
.bf-time.sel { background: var(--bf-brand, #e8600a); border-color: var(--bf-brand, #e8600a);
	color: #fff; }
.bf-sum-line.total { font-weight: 700; border-top: 1px solid var(--bf-line, #262a32);
	padding-top: 10px; margin-top: 4px; }

@media (max-width: 430px) {
	.bf-step .lbl { display: none; }
	.bf-day .cnt { display: none; }
}
/* When a service is done in exactly one place, say where rather than offering a one-item menu. */
.bf-where { font-size: 14px; color: var(--bf-ink-2, #c8cdd6); padding: 12px 16px; margin: 8px 0;
	border-radius: 12px; background: var(--bf-surface-2, #1b1e24);
	border: 1px solid var(--bf-line, #262a32); }
.bf-where::before { content: "📍 "; }

/* ------------------------------------------------------------------ *
 * One booking screen: extras beside the calendar on a desktop,
 * stacked on a phone, with the details underneath both.
 * ------------------------------------------------------------------ */
.bf-cols { display: grid; grid-template-columns: 1fr; gap: 4px; }
.bf-col { min-width: 0; }

/* Two columns only where there is genuinely room for two. Below this the extras list and the
   calendar each become unusably narrow, so the page simply gets longer instead — which is the
   right trade on a phone, where scrolling is free and tapping a 40px-wide time button is not. */
@media (min-width: 900px) {
	#bf-widget { max-width: 980px; }
	.bf-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.bf-cols .bf-cat { margin-top: 0; }
}

/* The chosen time, restated next to the button that acts on it. */
.bf-picked { font-size: 13px; font-weight: 600; margin: 6px 0 0;
	color: var(--bf-brand, #e8600a); text-transform: capitalize; }
.bf-picked.none { color: var(--bf-muted, #8b93a1); font-weight: 400; text-transform: none; }
.bf-done-when { font-size: 15px; font-weight: 600; margin: 6px 0 2px; text-transform: capitalize; }
.bf-done-mail { font-size: 13.5px; line-height: 1.5; max-width: 380px; margin: 10px auto 0; }

/* The total bar is pinned to the bottom of the viewport, so whatever is last on the page sits
   underneath it forever unless the page can scroll past its own end. 48px of padding was less
   than the bar is tall, which left the final field permanently half-covered. */
#bf-widget { padding-bottom: 132px; }

@media (min-width: 900px) {
	/* Name, phone and email are short answers; one per row wasted the width the desktop
	   layout just bought. Anything long — a text area, a file, the terms link — still spans. */
	.bf-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
	.bf-details .bf-cat,
	.bf-details .bf-field:has(textarea),
	.bf-details .bf-field:has(input[type="file"]),
	.bf-details .bf-field:has(a.bf-link) { grid-column: 1 / -1; }
}

/* Two figures on a service card: what it costs, and what it costs if you keep coming back.
   Previously the loyalty price was a badge naming a plan, which made a one-off package look
   like a subscription tier you had to join. */
.bf-pick-prices { text-align: right; white-space: nowrap; }
.bf-pick-loyal { font-size: 12.5px; font-weight: 600; margin-top: 2px;
	color: var(--bf-ok, #4ade80); }
.bf-loyal-note { font-size: 13px; line-height: 1.55; color: var(--bf-muted, #8b93a1);
	background: var(--bf-surface-2, #1b1e24); border: 1px solid var(--bf-line, #262a32);
	border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; }
.bf-loyal-note b { color: var(--bf-ink, #f2f4f7); }

/* Exit survey. Big tap targets: this is answered on a phone, once, by somebody who is leaving
   and has no reason to persevere with a fiddly control. */
.bf-stars { display: flex; gap: 6px; }
.bf-star { font-size: 30px; line-height: 1; background: none; border: 0; cursor: pointer;
	padding: 2px 4px; color: var(--bf-line, #3a4049); transition: color .12s; font-family: inherit; }
.bf-star:hover, .bf-star.on { color: var(--bf-brand, #e8600a); }