/* QMQA — property type dropdown for the BookingPress extras step.
   Styled to match the custom "cit" dropdowns used by the contact form.

   Rules inside the form are scoped under .bpa-frontend-main-container on
   purpose: BookingPress ships `.bpa-frontend-main-container * { padding: 0 }`,
   which has the same specificity as a bare class and loads after this file, so
   unscoped rules lose. The options list is excluded — it is rendered at body
   level (see below) and so is out of that reset's reach. */

.bpa-frontend-main-container .qmqa-fields-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.bpa-frontend-main-container .qmqa-property-field {
	margin: 0 0 20px;
	width: 33%;
	overflow: visible;
}

.bpa-frontend-main-container .qmqa-property-label {
	display: block;
	margin-bottom: 6px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	color: #7a7a7a;
}

.bpa-frontend-main-container .qmqa-required {
	color: #ee2445;
}

/* Package Three locks de-snagging to "Yes — Included" — there is no choice to
   make, so the required mark would only confuse. */
.bpa-frontend-main-container .qmqa-is-locked .qmqa-required {
	display: none;
}

/* The step's own "Basic Details" title makes way for the section labels below,
   which carry its exact style instead. */
.bpa-frontend-main-container .bpa-front-module--basic-details .bpa-front-module-heading {
	display: none;
}

/* Basic Details section labels ("Your details" / "Address" / "Agreements"),
   injected by ensureDetailSections(). Full flex row so a label never shares a
   line with a field column; styled to measure identically to the (now hidden)
   "Basic Details" module heading: Josefin 18px / 600 / #20363d. */
.bpa-frontend-main-container .qmqa-form-section {
	width: 100%;
	flex: 0 0 100%;
	margin: 28px 0 12px;
	/* The field columns carry a 12px gutter; without it the labels hang left
	   of the fields they title. */
	padding: 0 12px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #20363d;
}

/* The first label stands where the module heading used to. */
.bpa-frontend-main-container .qmqa-form-section[data-qmqa-section="details"] {
	margin-top: 0;
}

/* The plugin's fields enter with bpaFadeInUp (0.3s); the labels are inserted
   in the same tick, so an identical animation keeps them in step. Own copy of
   the keyframes so a plugin rename can't orphan the reference. */
@keyframes qmqaFadeInUp {
	0% {
		opacity: 0;
		transform: translateY(10%);
		transform-origin: center;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.bpa-frontend-main-container .qmqa-form-section {
	animation: qmqaFadeInUp 0.3s;
}

/* Between the two agreement checkboxes the stock spacing reads as a hole, so
   only the checkbox followed by its sibling tightens. 6.x lays the fields out
   with an 18px flex row-gap that margins ADD to, so the 12px target needs a
   negative margin: 18px gap − 6px = 12px. */
.bpa-frontend-main-container .bpa-field-main-col.bpa_terms_conditions:has(+ .bpa_terms_conditions) {
	margin-bottom: -6px;
}

/* The agreement checkboxes: one typeface for the whole sentence (the plugin
   sets its own font on the label while the theme styles the links), and
   underlines so Terms & Conditions / Privacy Policy read as clickable.
   el-* is the pre-6.x class prefix, bp-* the 6.x one — keep both. */
.bpa-frontend-main-container .bpa-front-form-control--checkbox .el-checkbox__label,
.bpa-frontend-main-container .bpa-front-form-control--checkbox .el-checkbox__label a,
.bpa-frontend-main-container .bpa-front-form-control--checkbox .bp-checkbox__label,
.bpa-frontend-main-container .bpa-front-form-control--checkbox .bp-checkbox__label a {
	font-family: "Josefin Sans", sans-serif !important;
	font-size: 16px;
}

.bpa-frontend-main-container .bpa-front-form-control--checkbox .el-checkbox__label a,
.bpa-frontend-main-container .bpa-front-form-control--checkbox .bp-checkbox__label a {
	/* !important: the theme strips underlines from all anchors. */
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Unanswered required dropdown after a Continue attempt. */
.bpa-frontend-main-container .qmqa-has-error .qmqa-cit-trigger {
	border-color: #ee2445;
}

.bpa-frontend-main-container .qmqa-field-error {
	margin-top: 6px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px;
	color: #ee2445;
}

/* De-snagging stays inert until a property is chosen: without one there is no
   price band, and a lone de-snagging tick would satisfy the plugin's
   "at least one extra" rule with the property still unset. */
.bpa-frontend-main-container .qmqa-is-disabled {
	opacity: 0.5;
}

.bpa-frontend-main-container .qmqa-is-disabled .qmqa-cit-trigger {
	cursor: not-allowed;
	pointer-events: none;
	background: #f5f6f7;
}

/* Package Three's included de-snagging is fixed to "Yes": shown active (not
   greyed like the disabled state) but not interactive, and with no caret so it
   doesn't read as an openable dropdown. */
.bpa-frontend-main-container .qmqa-is-locked .qmqa-cit-trigger {
	cursor: default;
	pointer-events: none;
}

.bpa-frontend-main-container .qmqa-is-locked .qmqa-cit-trigger svg {
	display: none;
}

/* The real control. Kept in the DOM (it is what drives BookingPress) but
   visually replaced by the trigger below. */
.bpa-frontend-main-container .qmqa-property-select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.bpa-frontend-main-container .qmqa-cit-wrapper {
	position: relative;
	width: 100%;
}

.bpa-frontend-main-container .qmqa-cit-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 16px;
	background: #ffffff;
	color: var( --e-global-color-4d33f7d, #20363D );
	border: 1px solid var( --e-global-color-4d33f7d, #20363D );
	border-radius: 2px;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	z-index: 2;
	user-select: none;
	-webkit-user-select: none;
}

.bpa-frontend-main-container .qmqa-cit-trigger svg {
	width: 10px;
	height: 10px;
	min-width: 10px;
	fill: var( --e-global-color-4d33f7d, #20363D );
	transition: transform 0.2s;
	flex-shrink: 0;
	pointer-events: none;
}

.bpa-frontend-main-container .qmqa-cit-trigger.open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.bpa-frontend-main-container .qmqa-cit-trigger.open.qmqa-drop-up {
	border-radius: 0 0 2px 2px;
}

.bpa-frontend-main-container .qmqa-cit-trigger.open svg {
	transform: rotate( 180deg );
}

.bpa-frontend-main-container .qmqa-cit-trigger.is-placeholder span {
	color: #bac1c3;
}

/* The plugin insets its validation banner from the label and field. Pull it
   back into line with them. */
.bpa-frontend-main-container .bpa-sao__module-row.--bpa-sao-service-extras .bpa-front-extras-error,
.bpa-frontend-main-container .bpa-front-extras-error {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	left: 0;
	right: 0;
	align-self: stretch;
	box-sizing: border-box;
}

/* Options list — rendered at body level, because .bpa-front-default-card sets
   overflow:hidden and would otherwise clip it. Positioned from JS. */
.qmqa-cit-options {
	display: none;
	position: fixed;
	background: #ffffff;
	border: 1px solid var( --e-global-color-4d33f7d, #20363D );
	border-top: none;
	border-radius: 0 0 2px 2px;
	z-index: 2147483000;
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.12 );
	box-sizing: border-box;
}

.qmqa-cit-options.open {
	display: block;
}

.qmqa-cit-options.qmqa-drop-up {
	border-top: 1px solid var( --e-global-color-4d33f7d, #20363D );
	border-bottom: none;
	border-radius: 2px 2px 0 0;
	box-shadow: 0 -6px 20px rgba( 0, 0, 0, 0.12 );
}

.qmqa-cit-options .qmqa-cit-option {
	padding: 10px 16px;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	color: var( --e-global-color-4d33f7d, #20363D );
	background: #ffffff;
	transition: background 0.15s, color 0.15s;
	line-height: 1.4;
	user-select: none;
	-webkit-user-select: none;
}

.qmqa-cit-options .qmqa-cit-option:hover {
	background: var( --e-global-color-4d33f7d, #20363D );
	color: #ffffff;
}

.qmqa-cit-options .qmqa-cit-option.selected {
	font-weight: 600;
}

/* Time slots — one per line, full width, without the capacity counter.
   The plugin sets width:calc(50% - 5px) from a four-class selector and its
   stylesheet loads after this one, so these have to be deeper still to win a
   tie. Hence the long chains rather than !important. */
.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item {
	width: 100%;
	margin-right: 0;
	justify-content: center;
	text-align: center;
	/* Slots wear the same skin as the form buttons: Josefin, uppercase, square,
	   dark outline. font-size and border-radius are !important because the plugin
	   sets them (13px / --bpa-radius-4px) with weight this selector would tie. */
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px !important;
	font-weight: 400;
	line-height: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	border-radius: 0 !important;
	border: 1px solid var( --e-global-color-4d33f7d, #20363D );
	/* The plugin sets the slot border grey via a (0,5,0) !important rule; this
	   (0,6,0) chain wins the colour only with its own !important. */
	border-color: var( --e-global-color-4d33f7d, #20363D ) !important;
	color: var( --e-global-color-4d33f7d, #20363D );
	background: #ffffff;
	padding: 14px 18px;
	transition: background 0.15s, color 0.15s;
}

.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item span {
	color: inherit;
	font: inherit;
}

/* Selected / hovered slot fills solid, like the primary button. */
.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item:hover,
.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item.__bpa-is-selected {
	background: var( --e-global-color-4d33f7d, #20363D ) !important;
	border-color: var( --e-global-color-4d33f7d, #20363D ) !important;
	color: #ffffff !important;
}

.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item:hover span,
.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item.__bpa-is-selected span {
	color: #ffffff !important;
}

/* Unavailable slot stays muted so it doesn't read as clickable. */
.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--items .bpa-front--dt__ts-body--item.__bpa-is-disabled {
	border-color: #cfd6e5;
	background: #f5f6f7;
	color: #a9b2bd !important;
	cursor: not-allowed;
}

.bpa-frontend-main-container .bpa-front--dt__time-slots .bpa-front--dt__ts-body .bpa-front--dt__ts-body--row .bpa-front--dt__ts-body--item .bpa-front--ts-capacity-counter {
	display: none;
}

/* Calendar day numbers use the button typeface. The plugin sets the size with a
   (0,3,0) !important rule, so this (0,5,0) chain is needed to win. */
.bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-day-content {
	font-family: "Josefin Sans", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* Summary step — the chosen extras spelled out instead of "N Extras". */
.bpa-front-bs-sm__extra-wrapper.qmqa-extras-inline .bpa--summary_extra_count_name {
	display: none !important;
}

.qmqa-extras-list__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	line-height: 1.5;
}

.qmqa-extras-list__price {
	white-space: nowrap;
	/* Owner request 2026-08-13: the summary lists which extras are included but
	   not their per-line prices — only the total speaks. Delete this line to
	   bring the prices back. !important because the span also carries the
	   plugin's item-val class, whose display rules otherwise win. */
	display: none !important;
}

/* A third of the width reads as a stray input on a phone, and two of them
   side by side is unreadable. */
@media ( max-width: 767px ) {
	.bpa-frontend-main-container .qmqa-fields-row {
		display: block;
	}

	.bpa-frontend-main-container .qmqa-property-field {
		width: 100%;
	}

	/* "Go Back" + "Book Appointment" (146px + 190px) barely fit a ~350px
	   phone container with no gap — real-device font rendering was enough
	   to tip them onto two stacked lines. Force one row and trim the
	   buttons' own padding/size for headroom, so it holds on narrow phones
	   too, not just the one this was measured on. */
	.bpa-frontend-main-container .bpa-front-tabs--foot {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.bpa-frontend-main-container .bpa-front-tabs--foot .bpa-front-btn.bpa-front-btn.bpa-front-btn {
		padding: 14px 20px 10px;
		font-size: 11px !important;
	}
}

/* 6.x caps the booking form at 1140px with 250px side margins — narrower
   than the Elementor section that hosts it. Fill the section like before. */
.bpa-frontend-main-container.bpa-frontend-main-booking-calendar {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 6.x boxes each step into a 600px scroll pane. That's right for the long
   service list, but on the Summary step it slices the totals mid-row (the
   "cropped" coupon area) — so only the summary gets to grow. */
.bpa-frontend-main-booking-calendar .bpa-front-dc--body:has(.bpa-front-module--booking-summary) {
	max-height: none !important;
}

/* ============ Customer panel (/my-bookings/) ============ */

/* The plugin caps its panel at 1360px — narrower than the site's Elementor
   content width. Let the surrounding container decide instead.
   (id = pre-6.x markup, class = 6.x.) */
.bpa-frontend-main-container #bpa-front-customer-panel-container,
.bpa-frontend-main-container .bpa-front-customer-panel-container,
.bpa-frontend-main-container .bpa-front-mb-v3__inner {
	/* !important: the plugin re-declares its cap later in the cascade. */
	max-width: 100% !important;
}

/* Sidebar navigation wears the site's button type. */
.bpa-frontend-main-container .bpa-front-cp-left-sidebar .bpa-tm__item {
	font-family: "Josefin Sans", sans-serif;
	/* !important + triple selector: the plugin's generated theme CSS carries
	   its own !important on this. */
	font-size: 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

/* Panel and login headings echo the site's display headings: thin,
   uppercase, letterspaced. Scoped to the customer panel only — the booking
   form's module headings are a different, already-styled thing. */
#bpa-front-customer-panel-container .bpa-front-module-heading,
.bpa-front-customer-panel-container .bpa-front-module-heading,
.bpa-front-customer-panel-login-container .bpa-front-module-heading {
	font-family: "Josefin Sans", sans-serif;
	font-size: 26px !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* Bookings-table headers as the site's small uppercase labels…
   (el-* = pre-6.x table classes, bp-* = 6.x) */
#bpa-front-customer-panel-container .el-table__header .cell,
.bpa-front-customer-panel-container .bp-table__header .cell {
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #7a7a7a;
}

/* …and the rows in the site's body face (paragraphs elsewhere are Roboto). */
#bpa-front-customer-panel-container .el-table__body .cell,
.bpa-frontend-main-container .bpa-front-customer-panel-container .bp-table__body .cell,
/* 6.x wraps the text in .bpa-cp-ma-cell-val spans with their own (0,4,0)
   !important font rule — this compound selector outranks it at (0,5,0). */
.bpa-frontend-main-container.bpa-frontend-my-bookings-vue3 .bpa-front-customer-panel-container .bp-table__body .bpa-cp-ma-cell-val {
	font-family: Roboto, sans-serif !important;
	font-size: 14px;
}

/* No avatar in the sidebar — just the name and email. Covers both the
   uploaded-photo variant and the person-icon placeholder. */
.bpa-front-cp-left-sidebar .bpa-tn__default-img,
.bpa-front-cp-left-sidebar .bpa-cp-avatar__default-img {
	display: none !important;
}

/* Login card: field labels match the enquiry form's uppercase labels. */
.bpa-front-customer-panel-login-container .bpa-front-form-label {
	font-family: "Josefin Sans", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #7a7a7a;
}

/* The native checkbox list stays in the DOM — it is what the dropdown drives. */
.bpa-se--wrapper.qmqa-property-hidden {
	display: none !important;
}

/* De-snagging re-inspection: the personal voucher, shown by the coupon field. */
.bpa-frontend-main-container .qmqa-coupon-banner {
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #eef3f2;
	border-left: 3px solid var( --e-global-color-4d33f7d, #20363D );
	color: #20363D;
	font-family: "Josefin Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

/* --- Presentation tweaks ------------------------------------------------- */

/* Time-of-day group labels (Morning / Afternoon / Evening / Night) removed —
   every slot here reads oddly under "Night", and the grouping adds nothing. */
.bpa-frontend-main-container .bpa-front--dt-ts__sub-heading {
	display: none;
}

/* Service-category filter (ALL / Package One / …) hidden. Every package is
   shown by default (the "ALL" tab is active), so the filter only adds clutter. */
.bpa-frontend-main-container .bpa-front-module--category {
	display: none;
}

/* Paragraph text follows the site's global body typography (Roboto / 0.95em /
   300 / 1.6em). The plugin pins these with its own rules — font-family via a
   global !important Josefin rule, and size/weight/line-height via
   .bpa-front-module--service-item selectors — so this needs both !important and
   extra specificity to win. The font-family competitor is a (0,4,0) !important
   rule (.bpa-front-module--service-item … .--bpa-is-desc), so the container class
   is repeated four times, lifting this to (0,4,1). */
.bpa-frontend-main-container.bpa-frontend-main-container.bpa-frontend-main-container.bpa-frontend-main-container p {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif !important;
	font-size: var( --e-global-typography-text-font-size ) !important;
	font-weight: var( --e-global-typography-text-font-weight ) !important;
	line-height: var( --e-global-typography-text-line-height ) !important;
}

/* Buttons match the theme's "Book your inspection" Elementor button:
   Josefin Sans 12px / 400, uppercase, square corners. */
.bpa-frontend-main-container .bpa-front-btn {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 400;
	line-height: 12px;
	letter-spacing: normal;
	text-transform: uppercase;
	/* Radius is !important because the plugin sets it !important on
	   .bpa-front-btn__medium; this (0,2,0) selector still outranks that (0,1,0). */
	border-radius: 0 !important;
}

/* font-size and padding need this more specific rule. The plugin pins buttons to
   16px via a (0,3,0) !important grouped selector (`.bpa-front-btn:not(
   .bpa-fm--bs__coupon-module-textbox .bpa-front-btn)`) and sets padding 10px 18px
   via a (0,2,0) `:not()` selector — both outrank the (0,2,0) rule above. Repeating
   the class lifts this to (0,4,0) so it wins. Padding matches the theme's
   "Book your inspection" button (taller, roomier than the plugin default). */
.bpa-frontend-main-container .bpa-front-btn.bpa-front-btn.bpa-front-btn {
	font-size: 12px !important;
	padding: 16px 30px 12px;
}

/* Card Details (the Stripe payment form) is the one summary-step section the
   plugin's own padding-restore rules miss — every sibling row (Deposit,
   Remaining Amount, etc.) gets 0 24px horizontal padding, this one gets 0. */
.bpa-frontend-main-container .bpa-front-module--pm-card-detail-form {
	padding: 0 24px;
}

/* The de-snag rebooking page (2268) offers exactly one service, so its
   "Select Service" heading labels no choice — hide it there only. The main
   booking page keeps the heading for its three-package choice. */
.page-id-2268 .bpa-front-module--service .bpa-front-module-heading {
	display: none;
}