/*
 * Wattys Bookings — public booking form.
 * Scoped under .watt-book, sized in em so it inherits the theme's type scale,
 * and colours are driven by --watt-* custom properties a theme can override.
 */

.watt-book {
	--watt-accent: #b26a00;
	--watt-text: #1d2327;
	--watt-muted: #646970;
	--watt-line: #d5d7da;
	--watt-surface: #fff;
	/* Tracks --watt-surface automatically (a hardcoded light grey would look
	   wrong the moment an owner picks a non-white card colour in Settings). */
	--watt-surface-alt: color-mix(in srgb, var(--watt-surface), #000 4%);
	--watt-radius: 10px;
	/* A soft, theme-matching focus/glow ring, derived from whatever accent
	   is actually configured — a hardcoded rgba() here would stop matching
	   the moment an owner picks a different Accent colour in Settings. */
	--watt-accent-glow: color-mix(in srgb, var(--watt-accent), transparent 80%);
	--watt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
	--watt-shadow-md: 0 4px 16px rgba(16, 24, 40, .08);

	max-width: 46em;
	margin: 0 auto;
	padding: 1.8em 2em 2.2em;
	background: var(--watt-surface);
	border: 1px solid var(--watt-line);
	border-radius: calc(var(--watt-radius) + 4px);
	box-shadow: var(--watt-shadow-md);
	color: var(--watt-text);
}

@media (max-width: 30em) {
	.watt-book {
		padding: 1.4em 1.2em 1.8em;
	}
}

.watt-book *,
.watt-book *::before,
.watt-book *::after {
	box-sizing: border-box;
}

.watt-book-title {
	margin: 0 0 .3em;
	font-size: 1.6em;
	font-weight: 700;
	letter-spacing: -.01em;
}

.watt-book-intro {
	color: var(--watt-muted);
	margin-bottom: 1.4em;
	line-height: 1.5;
}

.watt-book-alert {
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #8a1f21;
	padding: .8em 1.1em;
	margin-bottom: 1.2em;
	border-radius: 0 var(--watt-radius) var(--watt-radius) 0;
	font-size: .95em;
}

/* Step indicator ----------------------------------------------------- */

.watt-steps {
	display: flex;
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
	counter-reset: watt-step;
}

.watt-step {
	flex: 1 1 0;
	counter-increment: watt-step;
	text-align: center;
}

.watt-step-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	max-width: 100%;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	color: var(--watt-muted);
	cursor: default;
}

/* The number badge — becomes a solid accent-filled circle once active or
   done, and a checkmark once done, so progress reads at a glance rather
   than relying on a thin coloured line alone. */
.watt-step-btn::before {
	content: counter(watt-step);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--watt-surface);
	border: 2px solid var(--watt-line);
	font-size: 1.05em;
	font-weight: 700;
	color: var(--watt-muted);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.watt-step.is-active .watt-step-btn,
.watt-step.is-done .watt-step-btn {
	color: var(--watt-text);
	font-weight: 600;
}

.watt-step.is-active .watt-step-btn::before,
.watt-step.is-done .watt-step-btn::before {
	background: var(--watt-accent);
	border-color: var(--watt-accent);
	color: #fff;
}

.watt-step.is-done .watt-step-btn::before {
	content: "✓";
}

.watt-step-btn:not(:disabled) {
	cursor: pointer;
}

.watt-step-btn:not(:disabled):hover::before,
.watt-step-btn:not(:disabled):focus-visible::before {
	box-shadow: 0 0 0 4px var(--watt-accent-glow);
	outline: none;
}

/* Badge above, label below instead of side-by-side on a narrow phone
   screen — three steps with an inline label each would otherwise crowd. */
@media (max-width: 30em) {
	.watt-step-btn {
		flex-direction: column;
		gap: .3em;
	}
}

/* Service picker ----------------------------------------------------- */

.watt-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: .8em;
}

/* Once there's room for the grid's own natural column count (--watt-service-cols,
   set per the number of services so e.g. 4 lands as a balanced 2x2 instead of an
   auto-fit 3-then-1 leftover row), use exactly that many. Below this width the
   auto-fit rule above still applies, so small screens keep wrapping normally. */
@media (min-width: 30em) {
	.watt-service-grid {
		grid-template-columns: repeat(var(--watt-service-cols, 3), 1fr);
	}
}

.watt-service-card {
	display: block;
	text-align: left;
	background: var(--watt-surface);
	border: 1px solid var(--watt-line);
	border-left: 4px solid var(--watt-accent);
	border-radius: var(--watt-radius);
	padding: 1em 1.1em;
	cursor: pointer;
	font: inherit;
	color: inherit;
	/* Buttons default to white-space: pre in several browsers, which is why
	   a long service name was bleeding out past its card instead of wrapping. */
	white-space: normal;
	overflow-wrap: break-word;
	transition: box-shadow .15s ease, transform .15s ease;
}

.watt-service-card:hover,
.watt-service-card:focus-visible {
	/* Each service's own colour (set on its Services admin row) becomes the
	   hover fill, so this is controlled per-service from wp-admin rather than
	   here. The !important guards against a theme's own button:hover style
	   (this renders as a <button>) winning the fight for the background. */
	background: var(--watt-accent) !important;
	border-color: var(--watt-accent) !important;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
	transform: translateY(-1px);
	outline: none;
}

.watt-service-card:hover .watt-service-name,
.watt-service-card:hover .watt-service-len,
.watt-service-card:hover .watt-service-desc,
.watt-service-card:hover .watt-service-price,
.watt-service-card:focus-visible .watt-service-name,
.watt-service-card:focus-visible .watt-service-len,
.watt-service-card:focus-visible .watt-service-desc,
.watt-service-card:focus-visible .watt-service-price {
	color: #fff;
}

.watt-service-name {
	display: block;
	font-weight: 600;
	font-size: 1.05em;
}

.watt-service-len {
	display: block;
	font-size: .85em;
	color: var(--watt-muted);
	margin-top: .1em;
}

.watt-service-desc {
	display: block;
	font-size: .9em;
	margin-top: .5em;
	color: var(--watt-muted);
}

.watt-service-price {
	display: inline-block;
	margin-top: .6em;
	font-weight: 600;
}

.watt-service-price::before {
	content: "$";
}

/* Calendar ----------------------------------------------------------- */

.watt-book .watt-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6em;
	margin-bottom: .6em;
}

.watt-book .watt-cal-title {
	font-weight: 600;
	font-size: 1.1em;
}

.watt-nav {
	background: var(--watt-surface);
	border: 1px solid var(--watt-line);
	border-radius: 50%;
	width: 2.4em;
	height: 2.4em;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	color: inherit;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.watt-nav:hover {
	background: var(--watt-accent-glow);
	border-color: var(--watt-accent);
	transform: translateY(-1px);
}

table.watt-cal {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

table.watt-cal th {
	font-size: .75em;
	text-transform: uppercase;
	color: var(--watt-muted);
	font-weight: 600;
	padding: .4em 0;
	text-align: center;
}

table.watt-cal th abbr {
	text-decoration: none;
	border: 0;
}

table.watt-cal td {
	padding: 2px;
	text-align: center;
}

.watt-day {
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 2.6em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1em;
	background: var(--watt-surface);
	border: 1px solid var(--watt-line);
	border-radius: var(--watt-radius);
	cursor: pointer;
	font: inherit;
	color: inherit;
	line-height: 1;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.watt-day:hover:not([disabled]),
.watt-day:focus-visible:not([disabled]) {
	border-color: var(--watt-accent);
	background: var(--watt-accent-glow);
	outline: none;
}

.watt-day[disabled] {
	background: var(--watt-surface-alt);
	color: #b0b3b8;
	cursor: default;
	border-style: dashed;
}

.watt-day.is-selected {
	background: var(--watt-accent);
	border-color: var(--watt-accent);
	color: #fff;
	box-shadow: var(--watt-shadow-sm);
}

.watt-day-num {
	font-weight: 600;
}

.watt-day-free {
	font-size: .65em;
	opacity: .75;
}

.watt-cal-cell.is-today .watt-day {
	box-shadow: inset 0 0 0 2px var(--watt-accent);
}

/* Slots -------------------------------------------------------------- */

.watt-slots {
	margin-top: 1.4em;
}

.watt-slots-title {
	font-size: 1em;
	margin: 0 0 .6em;
}

.watt-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
	gap: .5em;
}

.watt-slot {
	background: var(--watt-surface);
	border: 1px solid var(--watt-line);
	border-radius: var(--watt-radius);
	padding: .7em .4em;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: inherit;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.watt-slot:hover,
.watt-slot:focus-visible {
	border-color: var(--watt-accent);
	background: var(--watt-accent);
	color: #fff;
	outline: none;
	transform: translateY(-1px);
	box-shadow: var(--watt-shadow-sm);
}

.watt-slots-hint {
	display: none;
}

/* On a wide enough screen, put the time slots beside the calendar instead of
   underneath it — a customer can then see the month and the times together
   without scrolling back and forth. Below this width the form stays in its
   original single, narrower column (mobile and small windows). */
@media (min-width: 60em) {
	.watt-book {
		max-width: 64em;
	}

	.watt-panel-when {
		display: grid;
		grid-template-columns: 1fr 16em;
		grid-template-areas:
			"head  slots"
			"body  slots"
			"back  back";
		column-gap: 1.5em;
		align-items: start;
	}

	/* An author display: grid above would otherwise win over the browser's
	   own [hidden] { display: none }, showing this panel even while JS has
	   it hidden (step 1 or step 3 active) — higher specificity forces the
	   hide to still win. */
	.watt-panel-when[hidden] {
		display: none;
	}

	.watt-panel-when .watt-cal-head {
		grid-area: head;
	}

	.watt-panel-when .watt-cal-body {
		grid-area: body;
	}

	.watt-panel-when .watt-back {
		grid-area: back;
	}

	.watt-panel-when .watt-slots,
	.watt-panel-when .watt-slots-hint {
		grid-area: slots;
	}

	.watt-panel-when .watt-slots {
		margin-top: 0;
		max-height: 26em;
		overflow-y: auto;
	}

	.watt-panel-when .watt-slots-hint {
		display: block;
		margin: 0;
		padding: 1em;
		border: 1px dashed var(--watt-line);
		border-radius: var(--watt-radius);
		color: var(--watt-muted);
		font-size: .9em;
	}

	/* Swapped out for the real slot list the moment one loads. */
	.watt-panel-when .watt-slots-hint:has(+ .watt-slots:not([hidden])) {
		display: none;
	}
}

.watt-loading,
.watt-empty {
	color: var(--watt-muted);
	font-size: .95em;
	margin: .4em 0;
}

/* Details form ------------------------------------------------------- */

.watt-chosen {
	background: var(--watt-accent-glow);
	border-left: 4px solid var(--watt-accent);
	border-radius: 0 var(--watt-radius) var(--watt-radius) 0;
	padding: .9em 1.1em;
	margin: 0 0 1.4em;
	font-weight: 600;
}

.watt-field {
	margin: 0 0 1em;
}

.watt-field label {
	display: block;
	font-weight: 600;
	font-size: .9em;
	margin-bottom: .3em;
}

.watt-req {
	color: #d63638;
}

.watt-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.watt-field textarea,
.watt-field select {
	width: 100%;
	padding: .7em .85em;
	border: 1px solid var(--watt-line);
	border-radius: var(--watt-radius);
	font: inherit;
	color: inherit;
	background: var(--watt-surface);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.watt-field input:focus,
.watt-field textarea:focus,
.watt-field select:focus {
	border-color: var(--watt-accent);
	/* Matches whatever Accent colour is actually configured, rather than a
	   colour hardcoded to this file's own default. */
	outline: 3px solid var(--watt-accent-glow);
	outline-offset: 0;
}

/* Dropdown / choice / checkbox custom fields ------------------------- */

.watt-radio-group,
.watt-checklist-group {
	display: flex;
	flex-direction: column;
	gap: .4em;
	/* Breathing room below the question — without this a host theme's own
	   label/paragraph margins can leave the first option sitting right
	   against the question text. */
	margin-top: .5em;
}

.watt-radio-opt,
.watt-checkbox-opt {
	display: flex;
	align-items: center;
	gap: .5em;
	/* !important: a host theme or page builder styling its own <label>
	   elements bold (Elementor's own form/field styles, for one) otherwise
	   wins the fight for a Checklist/Choice option's weight. */
	font-weight: 400 !important;
	cursor: pointer;
}

.watt-radio-opt input,
.watt-checkbox-opt input[type="checkbox"] {
	width: auto;
}

.watt-field-checkbox .watt-checkbox-opt {
	/* More specific than the plain .watt-checkbox-opt rule above, but that
	   one is !important too now (to beat a host theme's own bold labels),
	   so this needs it as well to still win here — a single yes/no
	   checkbox's own label is deliberately bold, unlike a Checklist's
	   option labels. */
	font-weight: 600 !important;
	font-size: .9em;
}

.watt-field input[type="file"] {
	width: 100%;
	padding: .5em 0;
	font-size: .9em;
}

.watt-field-hint {
	display: block;
	margin-top: .3em;
	font-size: .8em;
	color: var(--watt-muted);
}

.watt-recaptcha-wrap {
	margin: 0 0 1em;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.watt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.watt-terms {
	font-size: .85em;
	color: var(--watt-muted);
	margin-bottom: 1em;
}

.watt-actions {
	display: flex;
	gap: .8em;
	align-items: center;
	flex-wrap: wrap;
}

.watt-submit {
	background: var(--watt-accent);
	color: #fff;
	border: 0;
	border-radius: var(--watt-radius);
	padding: .9em 1.8em;
	font: inherit;
	font-size: 1.05em;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--watt-shadow-sm);
	transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

.watt-submit:hover:not([disabled]) {
	filter: brightness(.92);
	transform: translateY(-1px);
	box-shadow: var(--watt-shadow-md);
}

.watt-submit[disabled] {
	opacity: .6;
	cursor: default;
	box-shadow: none;
}

.watt-back {
	background: none;
	border: 0;
	padding: .4em 0;
	color: var(--watt-muted);
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
}

/* Done --------------------------------------------------------------- */

.watt-done {
	background: var(--watt-surface-alt);
	border: 1px solid var(--watt-line);
	border-radius: var(--watt-radius);
	padding: 2em 1.6em;
	text-align: center;
}

.watt-done-icon {
	width: 3.2em;
	height: 3.2em;
	margin: 0 auto .6em;
	display: block;
}

.watt-done-icon circle {
	stroke: var(--watt-accent);
	stroke-width: 2.5;
	/* Draws the circle in as a short entrance animation — a plain static
	   checkmark reads as "fine", a circle that draws itself in reads as
	   "this just succeeded". Both this and the checkmark path below just
	   animate their own stroke-dashoffset to 0, so they share one keyframe
	   and differ only in their own duration/delay. */
	stroke-dasharray: 157;
	stroke-dashoffset: 157;
	animation: watt-draw-in .5s ease-out forwards;
}

.watt-done-icon path {
	stroke: var(--watt-accent);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: watt-draw-in .3s .4s ease-out forwards;
}

@keyframes watt-draw-in {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.watt-done-icon circle,
	.watt-done-icon path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

.watt-done h3 {
	margin-top: 0;
	font-size: 1.25em;
}

.watt-done-when {
	font-size: 1.2em;
	font-weight: 700;
}

.watt-done-ref {
	color: var(--watt-muted);
}

.watt-done-note {
	max-width: 32em;
	margin-left: auto;
	margin-right: auto;
}

@media (prefers-color-scheme: dark) {
	.watt-book {
		--watt-text: #e6e6e6;
		--watt-muted: #a7aaad;
		--watt-line: #3c4043;
		--watt-surface: #1f2124;
		--watt-surface-alt: #26282b;
	}
}