.componentContactForm {display: flex; flex-direction: column; align-items: flex-start;}

.componentContactForm .line {display: flex; flex-direction: column; gap: 1rem; width: 100%;}
.componentContactForm label {display: block; position: relative; width: 100%;}
.componentContactForm .errorMessage {position: absolute; left: .75rem; top: -1rem; line-height: 1; font-size: .75rem;}

.componentContactForm input,
.componentContactForm textarea {
	box-sizing: border-box; width: 100%; 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;
}
.componentContactForm input {height: 3.25rem;}
.componentContactForm textarea {min-height: 7rem; padding-top: 1rem; padding-bottom: 1rem; resize: vertical;}
.componentContactForm input::placeholder,
.componentContactForm textarea::placeholder {color: rgba(255,255,255,.7);}
.componentContactForm input.error,
.componentContactForm textarea.error {border-color: var(--color-accent);}

.componentContactForm .notes {margin-top: 1rem;}

/* Left-aligned button (RTL flex-column: align-self flex-end = left, see project's known quirk) */
.componentContactForm button {align-self: flex-end; margin-top: 2rem;}

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

/* Contact Popup — fixed (not absolute/document-relative) so it centers in the viewport regardless
   of scroll position, same reasoning/fix as .bookingPopupWrap */
.aPopup.contactPopupWrap {position: fixed !important; overflow: visible !important;}

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

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