/* ==========================================================================
   Book A Site Visit — minimal modal wizard
   --------------------------------------------------------------------------
   Loaded after custom.css. Everything is namespaced under .booking-modal /
   .booking-* so it can't leak into the theme.

   Design intent: a quiet, monochrome sheet. White surface, hairline rules,
   no gradients, fills or shadows on controls. Colour is reserved for state —
   black for selection, red for errors — so the wizard reads as UI rather than
   as another marketing panel. Type and tokens come from the theme.
   ========================================================================== */

/* --------------------------------------------------
   01. Nav trigger
   -------------------------------------------------- */

.main-menu ul li.nav-item-book>a {
	position: relative;
}

.main-menu ul li.nav-item-book>a::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease-in-out;
}

.main-menu ul li.nav-item-book>a:hover::after,
.main-menu ul li.nav-item-book>a:focus-visible::after {
	transform: scaleX(1);
}

/* A ninth menu item pushes the desktop nav past the container between the
   SlickNav breakpoint (992px) and the widest layout, where it would wrap to
   three rows and squash the logo. Tighten the spacing across that range only —
   above 1500px the row fits at the theme's original density. */
@media only screen and (min-width: 992px) {

	.main-menu .nav-menu-wrapper>ul {
		flex-wrap: nowrap;
	}

	.main-menu ul li a {
		white-space: nowrap;
	}

	/* Keep the logo at full size instead of letting flex shrink it. */
	.navbar-brand {
		flex: 0 0 auto;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1499px) {

	.main-menu ul li {
		margin: 0 4px;
	}

	.main-menu ul li a {
		font-size: 15px;
		padding: 12px 7px !important;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1279px) {

	.main-menu .nav-menu-wrapper {
		margin: 0 10px;
	}

	.main-menu ul li {
		margin: 0 1px;
	}

	.main-menu ul li a {
		font-size: 13px;
		padding: 10px 5px !important;
	}
}

/* Narrowest desktop widths: the logo has to give a little too. */
@media only screen and (min-width: 992px) and (max-width: 1099px) {

	.navbar-brand img {
		width: 150px;
	}
}

/* --------------------------------------------------
   02. Shell
   -------------------------------------------------- */

.booking-modal {
	--booking-line: rgba(0, 0, 0, 0.12);
	--booking-line-soft: rgba(0, 0, 0, 0.07);
	--booking-muted: rgba(0, 0, 0, 0.5);
	font-family: var(--default-font);
	color: var(--primary-color);
	z-index: 1090;
}

.booking-modal .modal-dialog {
	max-width: 680px;
}

.booking-modal .modal-content {
	border: none;
	border-radius: 4px;
	background: var(--white-color);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.booking-modal.fade .modal-dialog {
	transform: translateY(12px);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.booking-modal.show .modal-dialog {
	transform: none;
	opacity: 1;
}

/* --------------------------------------------------
   03. Header
   -------------------------------------------------- */

.booking-modal-header {
	align-items: center;
	gap: 16px;
	padding: 22px 32px 18px;
	border: none;
}

.booking-modal-title {
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin: 0;
}

.booking-modal-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	/* auto pushes it to the far edge of the header row */
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 15px;
	color: var(--booking-muted);
	background: none;
	border: none;
	border-radius: 3px;
	transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.booking-modal-close:hover,
.booking-modal-close:focus-visible {
	color: var(--primary-color);
	background: rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------
   04. Stepper — three rules that fill in as you advance
   -------------------------------------------------- */

.booking-stepper {
	flex: 0 0 auto;
	padding: 0 32px 22px;
}

.booking-stepper-list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.booking-stepper-item {
	flex: 1 1 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
	padding-top: 9px;
	border-top: 1px solid var(--booking-line-soft);
	transition: border-color 0.3s ease-in-out;
}

.booking-stepper-index,
.booking-stepper-label {
	font-size: 12px;
	line-height: 1.3em;
	color: var(--booking-muted);
	transition: color 0.3s ease-in-out;
}

.booking-stepper-index {
	font-variant-numeric: tabular-nums;
}

.booking-stepper-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.booking-stepper-item.is-done {
	border-top-color: var(--primary-color);
}

.booking-stepper-item.is-active {
	border-top-color: var(--primary-color);
}

.booking-stepper-item.is-active .booking-stepper-index,
.booking-stepper-item.is-active .booking-stepper-label {
	color: var(--primary-color);
	font-weight: 500;
}

/* --------------------------------------------------
   05. Body & step panels
   -------------------------------------------------- */

.booking-modal-body {
	padding: 4px 32px 28px;
}

.booking-modal-body::-webkit-scrollbar {
	width: 5px;
}

.booking-modal-body::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
}

.booking-step[hidden] {
	display: none;
}

.booking-step.is-active {
	animation: bookingStepIn 0.3s ease-out both;
}

@keyframes bookingStepIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.booking-step-title {
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35em;
	color: var(--primary-color);
	margin: 0 0 20px;
}

.booking-field {
	margin-bottom: 20px;
}

.booking-label {
	display: block;
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--booking-muted);
	margin-bottom: 7px;
}

.booking-optional {
	font-weight: 400;
	opacity: 0.7;
}

/* --------------------------------------------------
   06. Inputs — underline-free boxes with a single hairline
   -------------------------------------------------- */

.booking-control {
	display: block;
	width: 100%;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--booking-line);
	border-radius: 3px;
	padding: 11px 13px;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease-in-out;
	-webkit-appearance: none;
	appearance: none;
}

.booking-control::placeholder {
	color: var(--booking-muted);
	opacity: 0.6;
}

.booking-control:hover {
	border-color: rgba(0, 0, 0, 0.25);
}

.booking-control:focus {
	border-color: var(--primary-color);
}

.booking-textarea {
	min-height: 76px;
	line-height: 1.55em;
	resize: vertical;
}

.booking-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 36px;
	cursor: pointer;
}

.booking-date {
	cursor: pointer;
}

.booking-date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.2s ease-in-out;
}

.booking-date::-webkit-calendar-picker-indicator:hover {
	opacity: 0.9;
}

/* Honeypot — off-screen, never display:none (bots skip hidden inputs). */
.booking-hp {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* --------------------------------------------------
   07. Service list — plain rows, radio on the left
   -------------------------------------------------- */

.booking-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	border-top: 1px solid var(--booking-line-soft);
}

.booking-option {
	display: block;
	margin: 0;
	border-bottom: 1px solid var(--booking-line-soft);
	cursor: pointer;
}

.booking-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.booking-option-body {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 2px;
}

.booking-option-mark {
	flex: 0 0 auto;
	position: relative;
	width: 15px;
	height: 15px;
	border: 1px solid var(--booking-line);
	border-radius: 50%;
	transition: border-color 0.2s ease-in-out;
}

.booking-option-mark::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--primary-color);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out;
}

.booking-option-name {
	font-size: 15px;
	line-height: 1.35em;
	color: var(--primary-color);
	transition: color 0.2s ease-in-out;
}

.booking-option:hover .booking-option-mark {
	border-color: var(--primary-color);
}

.booking-option input:checked+.booking-option-body .booking-option-mark {
	border-color: var(--primary-color);
}

.booking-option input:checked+.booking-option-body .booking-option-mark::after {
	opacity: 1;
	transform: scale(1);
}

.booking-option input:checked+.booking-option-body .booking-option-name {
	font-weight: 500;
}

.booking-option input:focus-visible+.booking-option-body {
	outline: 1px solid var(--primary-color);
	outline-offset: 1px;
}

/* --------------------------------------------------
   08. Date quick-picks & time slots
   -------------------------------------------------- */

.booking-daypicks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.booking-chip {
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1em;
	color: var(--primary-color);
	background: none;
	border: 1px solid var(--booking-line);
	border-radius: 3px;
	padding: 8px 12px;
	transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.booking-chip:hover {
	border-color: var(--primary-color);
}

.booking-chip.is-active {
	color: var(--white-color);
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.booking-slot-group+.booking-slot-group {
	margin-top: 12px;
}

.booking-slot-group-title {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--booking-muted);
	margin-bottom: 7px;
}

.booking-slot-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.booking-slot {
	margin: 0;
	cursor: pointer;
}

.booking-slot input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.booking-slot span {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1em;
	color: var(--primary-color);
	background: none;
	border: 1px solid var(--booking-line);
	border-radius: 3px;
	padding: 9px 13px;
	transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.booking-slot:hover span {
	border-color: var(--primary-color);
}

.booking-slot input:checked+span {
	color: var(--white-color);
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.booking-slot input:focus-visible+span {
	outline: 1px solid var(--primary-color);
	outline-offset: 1px;
}

.booking-slot input:disabled+span {
	color: var(--booking-muted);
	border-color: var(--booking-line-soft);
	opacity: 0.55;
	cursor: not-allowed;
}

.booking-slot:has(input:disabled) {
	cursor: not-allowed;
}

.booking-slot:has(input:disabled):hover span {
	border-color: var(--booking-line-soft);
}

/* --------------------------------------------------
   09. Reveal panels & checkbox
   -------------------------------------------------- */

.booking-reveal[hidden] {
	display: none;
}

.booking-reveal {
	margin-bottom: 20px;
	animation: bookingStepIn 0.25s ease-out both;
}

.booking-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	cursor: pointer;
}

.booking-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.booking-check-box {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var(--booking-line);
	border-radius: 2px;
	transition: all 0.2s ease-in-out;
}

.booking-check-box::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid var(--white-color);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg) scale(0.6);
	opacity: 0;
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.booking-check:hover .booking-check-box {
	border-color: var(--primary-color);
}

.booking-check input:checked+.booking-check-box {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.booking-check input:checked+.booking-check-box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.booking-check input:focus-visible+.booking-check-box {
	outline: 1px solid var(--primary-color);
	outline-offset: 2px;
}

.booking-check-text {
	font-size: 14px;
	color: var(--primary-color);
}

/* --------------------------------------------------
   10. Summary line (step 3)
   -------------------------------------------------- */

.booking-summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 16px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--booking-line-soft);
	font-size: 13.5px;
	line-height: 1.4em;
}

.booking-summary-val {
	color: var(--primary-color);
}

.booking-summary-sep {
	color: var(--booking-muted);
}

.booking-summary-edit {
	margin-left: auto;
	font-size: 13px;
	font-weight: 400;
	color: var(--booking-muted);
	background: none;
	border: none;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease-in-out;
}

.booking-summary-edit:hover {
	color: var(--primary-color);
}

.booking-privacy,
.booking-hint {
	font-size: 12.5px;
	line-height: 1.5em;
	color: var(--booking-muted);
	margin: 16px 0 0;
}

.booking-hint {
	margin: 10px 0 0;
}

.booking-hint[hidden] {
	display: none;
}

/* --------------------------------------------------
   11. Validation
   -------------------------------------------------- */

.booking-error {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--error-color);
	margin: 6px 0 0;
	display: none;
}

.booking-error.is-shown {
	display: block;
}

.booking-field.has-error .booking-control {
	border-color: var(--error-color);
}

/* Radio groups: mark the choices, not every divider — reddening each row rule
   reads as though every option is broken. */
.booking-field.has-error .booking-option-mark,
.booking-field.has-error .booking-slot span {
	border-color: rgba(230, 87, 87, 0.55);
}

.booking-field.is-shaking {
	animation: bookingNudge 0.3s ease-in-out both;
}

@keyframes bookingNudge {

	0%,
	100% {
		transform: translateX(0);
	}

	33% {
		transform: translateX(-3px);
	}

	66% {
		transform: translateX(3px);
	}
}

.booking-form-error {
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--error-color);
	border-left: 2px solid var(--error-color);
	padding: 2px 0 2px 12px;
	margin: 18px 0 0;
}

.booking-form-error[hidden] {
	display: none;
}

/* --------------------------------------------------
   12. Footer & buttons
   -------------------------------------------------- */

.booking-modal-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	padding: 16px 32px 22px;
	border-top: 1px solid var(--booking-line-soft);
}

.booking-modal-footer>* {
	margin: 0;
}

.booking-modal-footer[hidden] {
	display: none;
}

.booking-step-count {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--booking-muted);
	white-space: nowrap;
}

.booking-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1em;
	color: var(--white-color);
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 3px;
	padding: 13px 24px;
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
}

.booking-btn:hover {
	opacity: 0.82;
}

.booking-btn:focus-visible {
	outline: 1px solid var(--primary-color);
	outline-offset: 2px;
}

.booking-btn[hidden] {
	display: none;
}

.booking-btn-ghost {
	display: inline-flex;
	align-items: center;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1em;
	color: var(--booking-muted);
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 13px 14px;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

.booking-btn-ghost:hover {
	color: var(--primary-color);
}

.booking-btn-ghost:focus-visible {
	outline: 1px solid var(--primary-color);
	outline-offset: 2px;
}

.booking-btn-ghost[hidden] {
	display: none;
}

.booking-btn-spinner {
	display: none;
	width: 13px;
	height: 13px;
	margin-right: 8px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--white-color);
	border-radius: 50%;
	animation: bookingSpin 0.7s linear infinite;
}

@keyframes bookingSpin {
	to {
		transform: rotate(360deg);
	}
}

.booking-btn-submit.is-loading {
	pointer-events: none;
	opacity: 0.75;
}

.booking-btn-submit.is-loading .booking-btn-spinner {
	display: block;
}

/* --------------------------------------------------
   13. Success panel
   -------------------------------------------------- */

.booking-success {
	padding: 12px 0 8px;
	animation: bookingStepIn 0.3s ease-out both;
}

.booking-success[hidden] {
	display: none;
}

.booking-success-mark {
	width: 38px;
	height: 38px;
	margin-bottom: 20px;
}

.booking-success-mark svg {
	width: 100%;
	height: 100%;
}

.booking-success-circle {
	stroke: var(--booking-line);
	stroke-width: 1.5;
}

.booking-success-tick {
	stroke: var(--primary-color);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: bookingStroke 0.45s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

@keyframes bookingStroke {
	to {
		stroke-dashoffset: 0;
	}
}

.booking-success h3 {
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35em;
	color: var(--primary-color);
	margin: 0 0 8px;
}

/* Target the message only — .booking-success-recap is also a direct <p> child
   and a `> p` rule would out-specify its own spacing. */
[data-booking-success-text] {
	font-size: 14.5px;
	line-height: 1.55em;
	color: var(--booking-muted);
	max-width: 420px;
	margin: 0;
}

.booking-success-recap {
	font-size: 13.5px;
	line-height: 1.5em;
	color: var(--primary-color);
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--booking-line-soft);
}

.booking-success-recap:empty {
	display: none;
}

.booking-success-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
}

.booking-success-actions .booking-btn-ghost {
	padding-left: 4px;
	padding-right: 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------
   14. Responsive
   -------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.booking-modal .modal-dialog {
		margin: 10px;
	}

	.booking-modal .modal-content {
		max-height: calc(100dvh - 20px);
	}

	.booking-modal-header {
		padding: 18px 20px 14px;
	}

	.booking-modal-title {
		font-size: 17px;
	}

	.booking-stepper {
		padding: 0 20px 18px;
	}

	.booking-stepper-list {
		gap: 6px;
	}

	.booking-stepper-index,
	.booking-stepper-label {
		font-size: 11px;
	}

	.booking-modal-body {
		padding: 4px 20px 22px;
	}

	.booking-options {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.booking-modal-footer {
		padding: 14px 20px 18px;
	}
}

@media only screen and (max-width: 420px) {

	/* Hide the index numerals before the labels — the rules still show progress. */
	.booking-stepper-index {
		display: none;
	}

	/* Keep Back + Continue on one line; the counter is the first thing to go. */
	.booking-step-count {
		display: none;
	}

	.booking-btn {
		margin-left: auto;
	}
}

/* --------------------------------------------------
   15. Reduced motion
   -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.booking-modal.fade .modal-dialog,
	.booking-step.is-active,
	.booking-reveal,
	.booking-success,
	.booking-field.is-shaking,
	.booking-success-tick {
		animation: none !important;
		transition: none !important;
	}

	.booking-success-tick {
		stroke-dashoffset: 0;
	}

	.booking-modal.fade .modal-dialog {
		transform: none;
		opacity: 1;
	}
}