.componentAppointmentForm .line {display: flex; flex-direction: column; gap: 1rem;}
.componentAppointmentForm .line + .line {margin-top: 1rem;}
.componentAppointmentForm button {display: flex; width: fit-content; margin: 2rem auto 0;}
.componentAppointmentForm label {display: block; position: relative;}
.componentAppointmentForm .errorMessage {position: absolute; left: .75rem; top: -1rem; line-height: 1; font-size: .75rem;}

.componentAppointmentForm input,
.componentAppointmentForm select {
	box-sizing: border-box; width: 100%; height: 3.25rem; margin-bottom: 0; padding: 0 1.25rem;
	border: 1px solid rgba(255,255,255,.35); border-radius: .5rem;
	background-color: transparent; font-family: inherit; font-size: .9rem; color: #fff; appearance: none;
}
.componentAppointmentForm input::placeholder {color: rgba(255,255,255,.7);}
.componentAppointmentForm input.error,
.componentAppointmentForm select.error {border-color: var(--color-accent);}

.componentAppointmentForm select {background-repeat: no-repeat; background-position: left 1.1rem center; background-size: .75rem;}
.componentAppointmentForm select:has(option[value=""]:checked) {color: rgba(255,255,255,.7);}
.componentAppointmentForm select option {color: var(--color-primary);}

.componentAppointmentForm select,
.componentAppointmentForm .dateWrapper input {
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'>\
			<path d='M1 1 L6 6 L11 1' stroke='%23ffffff' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
		</svg>"
	);
}
.componentAppointmentForm .dateWrapper input {background-repeat: no-repeat; background-position: left 1.1rem center; background-size: .75rem;}

.componentAppointmentForm .dateWrapper {position: relative;}
.componentAppointmentForm .dateWrapper .datepicker {position: absolute; display: none; width: 100%; z-index: 5; top: calc(100% + .5rem);}

@media screen and (min-width: 40em) {
	.componentAppointmentForm .line {flex-direction: row; gap: 1.5rem;}
	.componentAppointmentForm .line + .line {margin-top: 1.5rem;}
	.componentAppointmentForm .line > * {width: 100%;}
}

/* Booking Popup — fixed (not absolute/document-relative) so it centers in the viewport regardless
   of scroll position, since the header trigger stays visible on scroll (position: fixed) */
/* vendor .aPopup base sets overflow:hidden + a flow-content-only auto height — override both so
   the absolutely-positioned inline datepicker (which extends past that height) isn't clipped */
.aPopup.bookingPopupWrap {position: fixed !important; overflow: visible !important;}

/* Booking Popup — brand override of the generic gray/white .componentPopup chrome (shared with
   admin popups like member login, left untouched there) */
.bookingPopup.componentPopup {
	width: 94vw; max-width: 40rem; border: 0; border-radius: 1rem; overflow: visible !important;
	background-color: var(--color-primary); font-family: var(--font-primary);
}
.bookingPopup.componentPopup > .header {
	height: auto; padding: 1.5rem 1.5rem 0; border-bottom: 0; background-color: transparent;
}
.bookingPopup.componentPopup > .header .title {padding-right: 0; font-size: 1.2rem; font-weight: 700; color: #fff;}
.bookingPopup.componentPopup > .header .close {margin-right: 0; margin-left: -.5rem; color: rgba(255,255,255,.7);}
.bookingPopup.componentPopup > .header .close:hover {color: #fff;}
.bookingPopup.componentPopup > .body {min-height: 0; padding: 1.5rem;}

@media screen and (min-width: 40em) {
	.bookingPopup.componentPopup > .header {padding: 2rem 2rem 0;}
	.bookingPopup.componentPopup > .body {padding: 2rem;}
}