.ab-booking-form-wrapper {
	/* Defaults (overridden inline per-instance via PHP using the admin Form Styling settings) */
	--ab-primary-color: #DF202E;
	--ab-bg-color: #060709;
	--ab-border-color: #FFFFFF2E;
	--ab-text-color: #ffffff;
	--ab-label-color: #ffffff;
	--ab-font-family: inherit;
	--ab-title-font-size: 22px;
	--ab-label-font-size: 14px;
	--ab-input-font-size: 14px;
	--ab-input-bg-color: #060709;
	--ab-input-border-color: #FFFFFF2E;
	--ab-input-text-color: #ffffff;
	--ab-placeholder-color: #ffffff;
	--ab-input-height: 42px;
	--ab-input-border-radius: 8px;
	--ab-button-bg-color: #DF202E;
	--ab-button-text-color: #ffffff;
	--ab-button-height: 46px;
	--ab-border-radius: 12px;
	--ab-form-padding: 28px;
	--ab-form-max-width: 560px;

	/* Derived tones — computed automatically from the colors above so every
	   hover / muted-text / tinted-background state adapts to whatever
	   palette is chosen (dark or light) without needing extra settings. */
	--ab-muted-text-color: color-mix(in srgb, var(--ab-text-color) 55%, transparent);
	--ab-hover-tint: color-mix(in srgb, var(--ab-primary-color) 12%, var(--ab-input-bg-color));
	--ab-selected-tint: color-mix(in srgb, var(--ab-primary-color) 14%, var(--ab-bg-color));
	--ab-focus-ring: color-mix(in srgb, var(--ab-primary-color) 35%, transparent);
	--ab-disabled-tint: color-mix(in srgb, var(--ab-input-text-color) 25%, transparent);

	max-width: var(--ab-form-max-width);
	width: 100%;
	margin: 0 auto;
	font-family: var(--ab-font-family);
}

.ab-booking-form-wrapper,
.ab-booking-form-wrapper *,
.ab-booking-form-wrapper *::before,
.ab-booking-form-wrapper *::after {
	box-sizing: border-box;
}

.ab-booking-form {
	background: var(--ab-bg-color);
	border: 1px solid var(--ab-border-color);
	border-radius: var(--ab-border-radius);
	padding: var(--ab-form-padding);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	font-family: inherit;
}

.ab-form-title {
	margin: 0 0 20px;
	font-size: var(--ab-title-font-size);
	font-weight: 700;
	color: var(--ab-text-color);
	font-family: inherit;
}

.ab-step {
	margin-bottom: 22px;
	opacity: 0.4;
	pointer-events: none;
	filter: grayscale(0.15);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.ab-step-active,
.ab-step-unlocked {
	opacity: 1;
	pointer-events: auto;
	filter: none;
}

.ab-label {
	display: block;
	font-weight: 600;
	font-size: var(--ab-label-font-size);
	color: var(--ab-label-color);
	margin-bottom: 10px;
	font-family: inherit;
}

.ab-empty-notice {
	color: var(--ab-muted-text-color);
	font-size: var(--ab-input-font-size);
	margin: 0;
}

/* ==========================================================================
   Step 1 — Service cards
   ========================================================================== */
.ab-services-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 480px) {
	.ab-services-list {
		grid-template-columns: 1fr;
	}
}

.ab-service-card {
	display: block;
	border: 2px solid var(--ab-input-border-color) !important;
	border-radius: var(--ab-input-border-radius);
	padding: 12px 14px;
	cursor: pointer;
	position: relative;
	background-color: var(--ab-input-bg-color) !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ab-service-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ab-service-card:hover {
	border-color: color-mix(in srgb, var(--ab-primary-color) 60%, var(--ab-input-border-color)) !important;
	background-color: var(--ab-hover-tint) !important;
}

.ab-service-card:has(input:focus-visible) {
	box-shadow: 0 0 0 3px var(--ab-focus-ring);
}

.ab-service-card:has(input:checked) {
	border-color: var(--ab-primary-color) !important;
	background-color: var(--ab-selected-tint) !important;
}

/* Small filled dot in the corner so "selected" is obvious at a glance,
   independent of how subtle the tinted background looks on a given palette. */
.ab-service-card::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--ab-input-border-color);
	background: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ab-service-card:has(input:checked)::after {
	border-color: var(--ab-primary-color);
	background: var(--ab-primary-color);
	box-shadow: inset 0 0 0 2.5px var(--ab-bg-color);
}

.ab-service-name {
	display: block;
	font-weight: 600;
	color: var(--ab-text-color) !important;
	font-size: var(--ab-input-font-size);
	font-family: inherit;
	padding-right: 24px;
}

.ab-service-meta {
	display: block;
	font-size: 12px;
	color: var(--ab-muted-text-color) !important;
	margin-top: 4px;
}

/* ==========================================================================
   Inputs, textarea, date field — shared base + all interactive states
   ========================================================================== */
.ab-date-input,
.ab-input,
.ab-textarea {
	width: 100%;
	height: var(--ab-input-height);
	padding: 0 12px;
	border: 1px solid var(--ab-input-border-color) !important;
	background-color: var(--ab-input-bg-color) !important;
	color: var(--ab-input-text-color) !important;
	border-radius: var(--ab-input-border-radius);
	font-size: var(--ab-input-font-size);
	margin-bottom: 10px;
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ab-date-input::placeholder,
.ab-input::placeholder,
.ab-textarea::placeholder {
	color: var(--ab-placeholder-color) !important;
	opacity: 1 !important;
}

/* Chrome/Edge/Safari paint autofilled fields (Name/Email/Phone match browser
   autofill heuristics — a <textarea> never does, which is why only those
   three fields looked grey/white while Notes stayed correctly dark). This
   is the standard trick to force our own colors back on top of autofill. */
.ab-date-input:-webkit-autofill,
.ab-input:-webkit-autofill,
.ab-date-input:-webkit-autofill:hover,
.ab-input:-webkit-autofill:hover,
.ab-date-input:-webkit-autofill:focus,
.ab-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ab-input-text-color);
	caret-color: var(--ab-input-text-color);
	-webkit-box-shadow: 0 0 0 1000px var(--ab-input-bg-color) inset !important;
	box-shadow: 0 0 0 1000px var(--ab-input-bg-color) inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

.ab-date-input:hover,
.ab-input:hover {
	border-color: color-mix(in srgb, var(--ab-primary-color) 45%, var(--ab-input-border-color));
}

.ab-date-input:focus,
.ab-input:focus,
.ab-textarea:focus {
	outline: none;
	border-color: var(--ab-primary-color);
	box-shadow: 0 0 0 3px var(--ab-focus-ring);
}

.ab-date-input:disabled,
.ab-input:disabled,
.ab-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ab-date-input {
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.ab-textarea {
	height: auto;
	min-height: 70px;
	padding: 10px 12px;
	resize: vertical;
}

.ab-day-off-msg {
	color: #f87171;
	font-size: 13px;
	margin-top: 8px;
}

/* ==========================================================================
   Step 3 — Time slot buttons
   ========================================================================== */
.ab-slots-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ab-slot-btn {
	border: 1px solid var(--ab-input-border-color) !important;
	background-color: var(--ab-input-bg-color) !important;
	color: var(--ab-input-text-color) !important;
	border-radius: var(--ab-input-border-radius);
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	font-family: inherit;
}

.ab-slot-btn:hover:not(:disabled):not(.ab-slot-selected) {
	border-color: color-mix(in srgb, var(--ab-primary-color) 60%, var(--ab-input-border-color)) !important;
	background-color: var(--ab-hover-tint) !important;
}

.ab-slot-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ab-focus-ring);
}

.ab-slot-btn.ab-slot-selected {
	background-color: var(--ab-primary-color) !important;
	border-color: var(--ab-primary-color) !important;
	color: var(--ab-button-text-color) !important;
	font-weight: 600;
}

.ab-slot-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: var(--ab-input-bg-color);
}

.ab-no-slots {
	color: var(--ab-muted-text-color);
	font-size: 13px;
}

/* ==========================================================================
   Payment summary + submit + messages
   ========================================================================== */
.ab-payment-summary {
	margin-top: 8px;
	padding: 10px 12px;
	background-color: color-mix(in srgb, var(--ab-primary-color) 8%, var(--ab-input-bg-color)) !important;
	border: 1px solid var(--ab-input-border-color) !important;
	border-radius: var(--ab-input-border-radius);
	font-size: 13px;
	color: var(--ab-text-color) !important;
}

.ab-submit-btn {
	width: 100%;
	height: var(--ab-button-height);
	background-color: var(--ab-button-bg-color) !important;
	color: var(--ab-button-text-color) !important;
	border: none;
	border-radius: var(--ab-input-border-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	font-family: inherit;
}

.ab-submit-btn:hover:not(:disabled) {
	opacity: 0.9;
}

.ab-submit-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ab-focus-ring);
}

.ab-submit-btn:active:not(:disabled) {
	filter: brightness(0.92);
}

.ab-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ab-form-messages {
	margin-bottom: 12px;
	font-size: 13px;
}

.ab-message-success {
	background: rgba(16, 185, 129, 0.12);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.35);
	padding: 10px 12px;
	border-radius: 8px;
}

.ab-message-error {
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
	border: 1px solid rgba(239, 68, 68, 0.35);
	padding: 10px 12px;
	border-radius: 8px;
}

/* ==========================================================================
   Flatpickr calendar — themed to match the chosen form palette instead of
   the default light theme, so the popup no longer clashes with dark forms.
   ========================================================================== */
.ab-booking-form-wrapper .flatpickr-calendar {
	background: var(--ab-bg-color);
	border: 1px solid var(--ab-input-border-color);
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	border-radius: var(--ab-input-border-radius);
	font-family: inherit;
}

.ab-booking-form-wrapper .flatpickr-calendar.arrowTop::before,
.ab-booking-form-wrapper .flatpickr-calendar.arrowTop::after {
	border-bottom-color: var(--ab-bg-color);
}

.ab-booking-form-wrapper .flatpickr-months {
	background: var(--ab-bg-color);
	border-top-left-radius: var(--ab-input-border-radius);
	border-top-right-radius: var(--ab-input-border-radius);
}

.ab-booking-form-wrapper .flatpickr-month,
.ab-booking-form-wrapper .flatpickr-current-month .flatpickr-monthDropdown-months,
.ab-booking-form-wrapper .flatpickr-current-month input.cur-year {
	color: var(--ab-text-color);
	fill: var(--ab-text-color);
}

.ab-booking-form-wrapper .flatpickr-current-month .flatpickr-monthDropdown-months option {
	background: var(--ab-bg-color);
	color: var(--ab-text-color);
}

.ab-booking-form-wrapper .flatpickr-prev-month,
.ab-booking-form-wrapper .flatpickr-next-month {
	fill: var(--ab-text-color);
	color: var(--ab-text-color);
}

.ab-booking-form-wrapper .flatpickr-prev-month:hover svg,
.ab-booking-form-wrapper .flatpickr-next-month:hover svg {
	fill: var(--ab-primary-color);
}

.ab-booking-form-wrapper .flatpickr-weekdays {
	background: var(--ab-bg-color);
}

.ab-booking-form-wrapper span.flatpickr-weekday {
	background: var(--ab-bg-color);
	color: var(--ab-muted-text-color);
}

.ab-booking-form-wrapper .flatpickr-innerContainer,
.ab-booking-form-wrapper .flatpickr-rContainer,
.ab-booking-form-wrapper .flatpickr-days,
.ab-booking-form-wrapper .dayContainer {
	background: var(--ab-bg-color);
}

.ab-booking-form-wrapper .flatpickr-day {
	color: var(--ab-text-color);
	border-radius: calc(var(--ab-input-border-radius) * 0.6);
}

.ab-booking-form-wrapper .flatpickr-day.prevMonthDay,
.ab-booking-form-wrapper .flatpickr-day.nextMonthDay {
	color: var(--ab-muted-text-color);
}

.ab-booking-form-wrapper .flatpickr-day:hover,
.ab-booking-form-wrapper .flatpickr-day:focus {
	background: var(--ab-hover-tint);
	border-color: var(--ab-hover-tint);
}

.ab-booking-form-wrapper .flatpickr-day.today {
	border-color: var(--ab-primary-color);
}

.ab-booking-form-wrapper .flatpickr-day.today:hover {
	color: var(--ab-text-color);
}

.ab-booking-form-wrapper .flatpickr-day.selected,
.ab-booking-form-wrapper .flatpickr-day.selected:hover,
.ab-booking-form-wrapper .flatpickr-day.selected:focus {
	background: var(--ab-primary-color);
	border-color: var(--ab-primary-color);
	color: var(--ab-button-text-color);
}

.ab-booking-form-wrapper .flatpickr-day.flatpickr-disabled,
.ab-booking-form-wrapper .flatpickr-day.flatpickr-disabled:hover {
	color: var(--ab-disabled-tint) !important;
	cursor: not-allowed;
	text-decoration: line-through;
	background: transparent;
}