/* ==========================================================================
   Make a Referral — /referrals/make-a-referral/ (build/make_referral.py)
   Prefix: bw-mar-. Loaded on this page only.

   The Forminator "Referral Form" uses design "none", so Forminator ships only
   its grid + utilities here; everything visual below is ours, modelled on the
   Contact mockup's form (white inputs, hairline border, 4px radius, navy
   submit with arrow). Forminator's grid rules run to (0,5,0) and load after
   the child theme, hence the few !important declarations on spacing.
   ========================================================================== */

/* --- intro ---------------------------------------------------------------- */
.bw-mar-req { color: #B4232A; font-weight: 700; }
.bw-mar-intro { max-width: 680px; }

/* --- section headings inside the form (Forminator HTML fields) ------------ */
.bw-mar-form .bw-mar-fs {
	display: grid;
	grid-template-columns: 34px 1fr;
	column-gap: 14px;
	align-items: center;
	padding-top: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bw-hairline);
}
.bw-mar-form .forminator-row:first-of-type .bw-mar-fs,
.bw-mar-form .forminator-response-message + .forminator-row .bw-mar-fs { padding-top: 0; }
.bw-mar-form .bw-mar-fs__num {
	grid-row: 1 / span 2;
	width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--bw-navy); color: #fff;
	font-family: var(--bw-sans); font-size: 15px; font-weight: 700; line-height: 1;
}
.bw-mar-form .bw-mar-fs__title {
	margin: 0;
	font-family: var(--bw-serif); font-weight: 600; font-size: 22px; line-height: 1.25;
	color: var(--bw-ink);
}
.bw-mar-form .bw-mar-fs__note {
	grid-column: 2;
	margin: 2px 0 0;
	font-family: var(--bw-sans); font-size: 14px; line-height: 1.5; color: var(--bw-body);
}
/* Breathing room above every section after the first. */
.bw-mar-form .forminator-field-html { padding-top: 14px; }
.bw-mar-form .forminator-row:first-of-type .forminator-field-html,
.bw-mar-form .forminator-response-message + .forminator-row .forminator-field-html { padding-top: 0; }

/* --- grid spacing --------------------------------------------------------- */
.bw-mar-form .forminator-ui.forminator-custom-form[data-grid=open] .forminator-row:not(:last-child) {
	margin-bottom: 22px !important;
}
@media (max-width: 782px) {
	.bw-mar-form .forminator-ui.forminator-custom-form[data-grid=open] .forminator-col:not(:last-child) {
		margin-bottom: 20px !important;
	}
}

/* --- labels --------------------------------------------------------------- */
.bw-mar-form .forminator-label {
	display: block;
	margin: 0 0 7px;
	font-family: var(--bw-sans); font-size: 14px; font-weight: 600; line-height: 1.35;
	color: var(--bw-ink);
}
.bw-mar-form .forminator-required { color: #B4232A; }

/* --- inputs --------------------------------------------------------------- */
.bw-mar-form .forminator-input,
.bw-mar-form .forminator-textarea,
.bw-mar-form select.forminator-select--field {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px !important;
	background-color: #fff;
	border: 1px solid #D3DAE6 !important;
	border-radius: 4px !important;
	box-shadow: none;
	font-family: var(--bw-sans); font-size: 16px; font-weight: 400; line-height: 1.5;
	color: var(--bw-ink);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.bw-mar-form .forminator-textarea {
	min-height: var(--forminator-textarea-min-height, 140px);
	resize: vertical;
}
.bw-mar-form .forminator-input::placeholder,
.bw-mar-form .forminator-textarea::placeholder { color: #8C93A8; opacity: 1; }

/* Native select (design "none" skips select2) with our own chevron. */
.bw-mar-form select.forminator-select--field {
	padding-right: 42px !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B1F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}
.bw-mar-form select.forminator-select--field:invalid,
.bw-mar-form select.forminator-select--field option[value=""] { color: #8C93A8; }
.bw-mar-form select.forminator-select--field option { color: var(--bw-ink); }

.bw-mar-form .forminator-input:hover,
.bw-mar-form .forminator-textarea:hover,
.bw-mar-form select.forminator-select--field:hover { border-color: #AEB8CB !important; }
.bw-mar-form .forminator-input:focus,
.bw-mar-form .forminator-textarea:focus,
.bw-mar-form select.forminator-select--field:focus {
	outline: none;
	border-color: var(--bw-navy) !important;
	box-shadow: 0 0 0 3px rgba(11, 31, 79, .14);
}

/* --- errors --------------------------------------------------------------- */
.bw-mar-form .forminator-has_error .forminator-input,
.bw-mar-form .forminator-has_error .forminator-textarea,
.bw-mar-form .forminator-has_error select.forminator-select--field {
	border-color: #B4232A !important;
}
.bw-mar-form .forminator-error-message {
	display: block;
	margin-top: 6px;
	font-family: var(--bw-sans); font-size: 14px; line-height: 1.4; color: #B4232A;
}
.bw-mar-form .forminator-error-message:empty { display: none; }

/* Top-of-form response box: error summary and the thank-you message. */
.bw-mar-form .forminator-response-message { margin: 0 0 24px; }
.bw-mar-form .forminator-response-message[aria-hidden="true"],
.bw-mar-form .forminator-response-message:empty { display: none; }
.bw-mar-form .forminator-response-message.forminator-error,
.bw-mar-form .forminator-response-message.forminator-success {
	padding: 18px 20px;
	border-radius: 6px;
	font-family: var(--bw-sans); font-size: 15px; line-height: 1.6;
}
.bw-mar-form .forminator-response-message.forminator-error {
	background: #FDF1F1; border: 1px solid #F0C2C4; color: #8E1C22;
}
.bw-mar-form .forminator-response-message.forminator-success {
	background: var(--bw-surface); border: 1px solid var(--bw-hairline);
	border-left: 4px solid var(--bw-gold); color: var(--bw-ink);
}
.bw-mar-form .forminator-response-message p { margin: 0 0 6px; }
.bw-mar-form .forminator-response-message p:last-child { margin-bottom: 0; }
.bw-mar-form .forminator-response-message a { color: var(--bw-navy); font-weight: 600; }
.bw-mar-form .forminator-response-message ul { margin: 6px 0 0; padding-left: 18px; }

/* --- consent checkbox ------------------------------------------------------- */
/* The "Consent" label is redundant beside the statement; keep it for AT. */
.bw-mar-form .forminator-field-consent .forminator-label {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bw-mar-form .forminator-checkbox__wrapper { display: flex; align-items: flex-start; gap: 12px; }
.bw-mar-form .forminator-checkbox.forminator-consent {
	position: relative; flex: 0 0 auto; margin: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	/* 44px tap area around a 20px box. */
	width: 44px; height: 44px; margin: -12px -12px -12px -12px;
}
.bw-mar-form .forminator-checkbox.forminator-consent input {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: pointer; z-index: 1;
}
.bw-mar-form .forminator-checkbox-box {
	width: 20px; height: 20px; border-radius: 3px;
	border: 1.5px solid #AEB8CB; background: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s, border-color .15s;
}
.bw-mar-form .forminator-consent input:checked + .forminator-checkbox-box {
	background: var(--bw-navy); border-color: var(--bw-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}
.bw-mar-form .forminator-consent input:focus-visible + .forminator-checkbox-box {
	outline: 2px solid var(--bw-gold); outline-offset: 2px;
}
.bw-mar-form .forminator-has_error .forminator-checkbox-box { border-color: #B4232A; }
.bw-mar-form .forminator-consent__label {
	padding-top: 1px;
	font-family: var(--bw-sans); font-size: 15px; line-height: 1.5; color: var(--bw-body);
}
.bw-mar-form .forminator-consent__label a { color: var(--bw-navy); font-weight: 600; text-decoration: underline; }
.bw-mar-form .forminator-consent__label a:hover { color: var(--bw-gold); }

/* --- submit ----------------------------------------------------------------- */
/* Navy/white in every state — Hello Elementor would paint it pink on hover. */
.bw-mar-form .forminator-row-last { margin-top: 30px; }
body .bw-mar-form .forminator-button.forminator-button-submit,
body .bw-mar-form .forminator-button.forminator-button-submit:hover,
body .bw-mar-form .forminator-button.forminator-button-submit:focus,
body .bw-mar-form .forminator-button.forminator-button-submit:active {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	min-height: 52px;
	padding: 15px 28px;
	background-color: var(--bw-navy);
	color: #fff;
	border: 1.5px solid var(--bw-navy);
	border-radius: 4px;
	font-family: var(--bw-sans); font-size: 15px; font-weight: 600; line-height: 1.2;
	text-transform: none; letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
body .bw-mar-form .forminator-button.forminator-button-submit::after {
	content: "";
	width: 15px; height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12'%3E%3Cpath d='M1 6h12M8.5 1.5L13 6l-4.5 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .2s ease;
}
body .bw-mar-form .forminator-button.forminator-button-submit:hover {
	background-color: var(--bw-navy-deep);
	border-color: var(--bw-navy-deep);
}
body .bw-mar-form .forminator-button.forminator-button-submit:hover::after { transform: translateX(3px); }
body .bw-mar-form .forminator-button.forminator-button-submit:focus { outline: none; }
body .bw-mar-form .forminator-button.forminator-button-submit:focus-visible {
	outline: 2px solid var(--bw-gold); outline-offset: 3px;
}
body .bw-mar-form .forminator-button.forminator-button-submit:disabled,
body .bw-mar-form .forminator-button.forminator-button-submit[aria-busy="true"] { opacity: .7; cursor: progress; }
/* Forminator's in-button spinner (design none leaves it unstyled). */
.bw-mar-form .forminator-button .forminator-icon-loader { display: none; }

/* --- side panel -------------------------------------------------------------- */
@media (min-width: 1025px) {
	.bw-mar-panel { position: sticky; top: 24px; }
}
.bw-mar-way .e-con.bw-mar-way__icon { flex: 0 0 64px !important; width: 64px; height: 64px; min-height: 0; }
.bw-mar-way__words, .bw-mar-way .bw-mar-way__words { flex: 1 1 0 !important; min-width: 0; }
.bw-mar-way__text a, .bw-mar-note__text a { color: var(--bw-navy); font-weight: 700; text-decoration: none; }
.bw-mar-way__text a:hover { color: var(--bw-gold); text-decoration: underline; }
/* Long email address: let it break rather than burst the panel. */
.bw-mar-way__link--email { overflow-wrap: anywhere; }
.bw-mar-way__link { display: inline-block; padding: 3px 0; }
.bw-mar-note .e-con.bw-mar-note__icon { flex: 0 0 40px !important; }
.bw-mar-note__text p { margin-bottom: 6px; }
.bw-mar-note__text strong { color: var(--bw-gold); font-weight: 700; }

@media (max-width: 1024px) {
	/* Panel sits under the form; two ways side by side where there is room. */
	.bw-mar-panel { position: static; }
}
@media (max-width: 767px) {
	.bw-mar-form .bw-mar-fs__title { font-size: 20px; }
	body .bw-mar-form .forminator-button.forminator-button-submit { width: 100%; }
}
/* The referrals address is long: smaller, and it breaks after the @ (<wbr>). */
.bw-mar-way__link--email { font-size: 14px; }
/* Touch: the panel's phone/email links become 44px targets. */
@media (max-width: 1024px) {
	.bw-mar-way__link { padding: 10px 0; }
}