@charset "utf-8";
/*
 * Ninja Forms → Stag Lane Dental design.
 *
 * Maps Ninja Forms' markup onto the static template's contact form styles
 * (stylesheet.css .contact-fil1/2/3, .contact-btn1, hovers.css checkboxes, dropdown.css),
 * breakpoint for breakpoint. Scoped to the contact sections so other forms are untouched.
 *
 * Form setup expected: Layout & Styles rows of 50/50 cells, labels "hidden" for the inputs
 * (placeholders are shown), checkboxes with the label on the right.
 * The "Treatment of interest" <select> is replaced by the template's custom dropdown in
 * js/theme.js (.custom-select1 markup), so dropdown.css styles it.
 */

/* ---------- Reset Ninja Forms' structure ------------------------------------------------- */
.contact-wrapp .nf-form-cont,
.contact-wrapp .nf-form-cont .nf-form-wrap,
.contact-wrapp .nf-form-cont .nf-form-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* "Fields marked with * are required" – kept for screen readers, hidden visually (the
   placeholders carry the asterisks in the design). */
.contact-wrapp .nf-form-cont .nf-form-fields-required {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
}

.contact-wrapp .nf-form-cont .nf-row { width: 100%; margin: 0 0 2%; }
.contact-wrapp .nf-form-cont .nf-row > nf-cells { display: flex; justify-content: space-between; width: 100%; }
.contact-wrapp .nf-form-cont .nf-multi-cell .nf-cell { float: none; padding: 0; }
/* Ninja Forms' custom elements are inline by default and add line-box height – make them blocks */
.contact-wrapp .nf-form-cont nf-rows-wrap,
.contact-wrapp .nf-form-cont nf-fields,
.contact-wrapp .nf-form-cont nf-field,
.contact-wrapp .nf-form-cont nf-section { display: block; }
/* The empty character-limit box carries a 5px top margin that leaks out of the field – no limits are used */
.contact-wrapp .nf-form-cont .nf-input-limit:empty { display: none; }
.contact-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 50%"] { width: 49.2% !important; }
.contact-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 100%"] { width: 100% !important; }
.contact-wrapp .nf-form-cont .nf-field-container { margin: 0; }
.contact-wrapp .nf-form-cont .nf-field-element { width: 100%; }

/* Spacing between the blocks, as in the template (.contact-row2 / .checkbox1 / .checkbox2) */
.contact-wrapp .nf-form-cont .nf-row:has(.textarea-container) { margin-bottom: 5.4%; }
.contact-wrapp .nf-form-cont .nf-row:has(.checkbox-container) { margin-bottom: 2.6%; }
.contact-wrapp .nf-form-cont .nf-row:has(.submit-container) { margin: 1.6% 0 0; }

/* ---------- Text inputs & textarea (= .contact-fil1 .contact-fil2 / .contact-fil3) -------- */
.contact-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
.contact-wrapp .nf-form-cont textarea.ninja-forms-field {
	width: 100%;
	height: 58.8px;
	float: none;
	margin: 0;
	padding: 0 25.8px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26px;
	line-height: normal;
	text-align: left;
	color: #2f2f2f;
	background: #f7f5f1;
	border: 1px solid #f7f5f1;
	border-radius: 10px;
	box-shadow: none;
	resize: none;
	transition: all 0.25s ease-out 0s;
	display: block;
}
.contact-wrapp .nf-form-cont textarea.ninja-forms-field { padding-top: 19.1px; overflow: hidden; }
.contact-wrapp .nf-form-cont .ninja-forms-field::placeholder { color: #2f2f2f; opacity: 1; }

/* ---------- Treatment of interest – template dropdown (built by js/theme.js) -------------- */
.contact-wrapp .nf-form-cont .custom-select1 {
	width: 100%;
	float: none;
	margin: 0;
	background: #f7f5f1;
	border: 1px solid #f7f5f1;
	border-radius: 10px;
}
/* Ninja Forms hides every "div div" in a select wrapper – show ours (but keep closed lists closed) */
.contact-wrapp .nf-form-cont .list-select-wrap .custom-select1,
.contact-wrapp .nf-form-cont .list-select-wrap .custom-select1 div { display: block; }
.contact-wrapp .nf-form-cont .list-select-wrap .custom-select1 .select-items.select-hide { display: none; }
.contact-wrapp .nf-form-cont .custom-select1 .select-items { z-index: 100; }
.contact-wrapp .nf-form-cont .custom-select1 .select-selected.is-placeholder { color: #2f2f2f; }
.contact-wrapp .nf-form-cont .custom-select1:hover .select-selected,
.contact-wrapp .nf-form-cont .custom-select1 .select-selected[aria-expanded="true"] { color: #cbb16a; }
.contact-wrapp .nf-form-cont .custom-select1 .select-items [aria-selected="true"] { color: #ffffff; background: #222941; }

/* ---------- Consent checkboxes (= hovers.css .checkbox1 / .checkbox2) ---------------------- */
.contact-wrapp .nf-form-cont .checkbox-container .field-wrap { display: block; position: relative; }
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-element { width: auto; position: absolute; top: 0; left: 0; }
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label { width: 100%; display: block; margin: 0; padding: 0; }
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label {
	cursor: pointer;
	display: block;
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 11.4px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: normal;
	color: #2f2f2f;
	top: 4px;
}
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label a { font-weight: 600; color: #2f2f2f; }
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label a:hover { color: #b88e53; }
/* The required state is announced through aria-required – the red asterisk isn't in the design */
.contact-wrapp .nf-form-cont .checkbox-container .ninja-forms-req-symbol { display: none; }

.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label:before {
	content: '';
	width: 19.9px;
	height: 19.9px;
	background: url(../images/checked-transparent-brown-gradient-square-thumb.svg) no-repeat center / 100%;
	position: absolute;
	top: -2px;
	left: 0;
}
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label:after {
	content: '';
	width: 11.3px;
	height: 10.4px;
	background: url(../images/checked-brown-gradient-plain-icon.svg) no-repeat center / 100%;
	position: absolute;
	top: 2.6px;
	left: 4.2px;
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s ease;
}
.contact-wrapp .nf-form-cont .checkbox-container:has(input:checked) .nf-field-label label:after,
.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label.nf-checked-label:after {
	opacity: 1;
	transform: scale(1);
}
/* Keyboard focus lands on the (visually hidden) checkbox – show it on the drawn box */
.contact-wrapp .nf-form-cont .checkbox-container:has(input:focus-visible) .nf-field-label label:before {
	outline: 3px solid #cbb16a;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Send message (= .contact-btn1 + .btn-white-brown-gradient-on-hover-brown-transparent-brown) */
.contact-wrapp .nf-form-cont .submit-container .field-wrap { display: block; position: relative; }
.contact-wrapp .nf-form-cont .submit-container .nf-field-label { display: none; }
.contact-wrapp .nf-form-cont .submit-container .nf-field-element {
	width: 100%;
	margin: 8px 0 0;
	border-radius: 500px;
	position: relative;
	z-index: 0;
}
.contact-wrapp .nf-form-cont .submit-container .nf-field-element:after {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(203,177,106,1) 0%, rgba(184,142,83,1) 100%) border-box;
	border-radius: 500px;
	opacity: 1;
	transition: 0.25s ease-out 0s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.contact-wrapp .nf-form-cont .submit-container .nf-field-element:before {
	content: "";
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	background: linear-gradient(90deg, rgba(203,177,106,1) 0%, rgba(184,142,83,1) 100%) border-box;
	border-radius: 500px;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	box-sizing: border-box;
}
.contact-wrapp .nf-form-cont .submit-container input[type="submit"] {
	width: 100%;
	margin: 0;
	padding: 17px 50px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26px;
	line-height: normal;
	text-align: center;
	color: #ffffff;
	background: none;
	border: none;
	border-radius: 500px;
	cursor: pointer;
	transition: all 0.25s ease-out 0s;
	display: block;
	/* Arrow (= .contact-btn1 .circle-effects1, 4.3px wide, 27px from the right) */
	background: url(../images/right-white-plain-arrow.svg) no-repeat right 27px center / 4.3px auto;
}
.contact-wrapp .nf-form-cont .submit-container .field-wrap:hover .nf-field-element:after { opacity: 0; }
.contact-wrapp .nf-form-cont .submit-container .field-wrap:hover input[type="submit"] { color: #b99155; }
.contact-wrapp .nf-form-cont .submit-container .field-wrap:hover input[type="submit"] { background-image: url(../images/right-brown-plain-arrow.svg); }
.contact-wrapp .nf-form-cont .submit-container input[type="submit"]:disabled { cursor: progress; opacity: 0.7; }

/* ---------- Validation & messages ---------------------------------------------------------- */
.contact-wrapp .nf-form-cont .nf-error input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
.contact-wrapp .nf-form-cont .nf-error textarea.ninja-forms-field,
.contact-wrapp .nf-form-cont .nf-error .custom-select1 { border-color: #b3261e; }
.contact-wrapp .nf-form-cont .nf-error.checkbox-container .nf-field-label label:before { outline: 1px solid #b3261e; outline-offset: 1px; border-radius: 4px; }
.contact-wrapp .nf-form-cont .nf-error-msg,
.contact-wrapp .nf-form-cont .nf-form-errors .nf-error-msg {
	margin: 6px 0 0;
	font-size: 11.4px;
	font-weight: 500;
	line-height: normal;
	color: #b3261e;
}
.contact-wrapp .nf-form-cont .checkbox-container .nf-error-msg { margin: 10px 0 0 30px; }
.contact-wrapp .nf-form-cont .nf-response-msg {
	padding: 25px 25.8px;
	font-size: 15px;
	line-height: 1.6;
	color: #2f2f2f;
	background: #f7f5f1;
	border-radius: 10px;
}
.contact-wrapp .nf-form-cont .nf-response-msg p { margin: 0; }

/* ---------- Breakpoints (mirroring stylesheet.css / dropdown.css / hovers.css) ------------- */

/* The button arrow is hidden between 768px and 1240px in the template */
@media screen and (min-width: 768px) and (max-width: 1240px) {
	.contact-wrapp .nf-form-cont .submit-container input[type="submit"],
	.contact-wrapp .nf-form-cont .submit-container .field-wrap:hover input[type="submit"] { background-image: none; }
}

@media screen and (min-width: 901px) and (max-width: 1024px) {
	.contact-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
	.contact-wrapp .nf-form-cont textarea.ninja-forms-field { height: 54.8px; font-size: 12px; }
	.contact-wrapp .nf-form-cont .submit-container input[type="submit"] { font-size: 12px; }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
	.contact-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
	.contact-wrapp .nf-form-cont textarea.ninja-forms-field { height: 51.8px; font-size: 11px; }
	.contact-wrapp .nf-form-cont .submit-container input[type="submit"] { font-size: 11px; }
}

/* Phones & small tablets: two columns of 48%, centred text */
@media screen and (max-width: 767px) {
	.contact-wrapp .nf-form-cont .nf-row { margin-bottom: 0; }
	.contact-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 50%"] { width: 48% !important; }
	.contact-wrapp .nf-form-cont .nf-cell:has(.textbox-container),
	.contact-wrapp .nf-form-cont .nf-cell:has(.email-container),
	.contact-wrapp .nf-form-cont .nf-cell:has(.listselect-container),
	.contact-wrapp .nf-form-cont .nf-cell:has(.textarea-container) { margin-bottom: 4.2%; }
	.contact-wrapp .nf-form-cont .nf-row:has(.textarea-container) { margin-bottom: 20px; }
	.contact-wrapp .nf-form-cont .nf-row:has(.checkbox-container) { margin-bottom: 6px; }
	.contact-wrapp .nf-form-cont .nf-row:has(.checkbox-container) + .nf-row:has(.checkbox-container) { margin-bottom: 10px; }
	.contact-wrapp .nf-form-cont .nf-row:has(.submit-container) { margin: 0; }

	.contact-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]),
	.contact-wrapp .nf-form-cont textarea.ninja-forms-field {
		height: 52.8px;
		padding: 0 5%;
		font-size: 11px;
		text-align: center;
	}
	.contact-wrapp .nf-form-cont textarea.ninja-forms-field { padding-top: 19.1px; }
	.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label { top: -3px; }
	.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label:before { top: -6px; }
	.contact-wrapp .nf-form-cont .checkbox-container .nf-field-label label:after { top: -1.4px; }
	.contact-wrapp .nf-form-cont .submit-container .nf-field-element { margin-top: 10px; }
	.contact-wrapp .nf-form-cont .submit-container input[type="submit"] { font-size: 11px; }
}

/* Phones: one column */
@media screen and (max-width: 480px) {
	.contact-wrapp .nf-form-cont .nf-row > nf-cells { display: block; }
	.contact-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 50%"] { width: 100% !important; }
}

/* ---------- Contact Us page ("Message us", .contact4-wrapp = contact-us.php) --------------
   Taller enquiry box and a 207px submit button on the left, like the design's .contact-fil3 /
   .contact-btn1 there. */
.contact4-wrapp .nf-form-cont textarea.ninja-forms-field { height: 140px; }
.contact4-wrapp .nf-form-cont .nf-row:has(.textarea-container) { margin-bottom: 35px; }
.contact4-wrapp .nf-form-cont .submit-container .nf-field-element { width: 207px; max-width: 100%; }


/* ===========================================================================================
 * Referral form (Professional Referrals – .referrals-wrapp, design: css/referrals.css,
 * hovers.css "referrals" / "upload-effect", datepicker.css).
 *
 * Form setup expected (Ninja Forms → Referrals): HTML fields with <h3> section headings, the
 * "Referral reason" checkbox list, 50/50 rows of inputs with hidden labels (placeholders
 * shown), two File Upload fields side by side, two textareas, two consent checkboxes
 * (label on the right) and Submit.
 * =========================================================================================== */

/* ---------- Structure ---------------------------------------------------------------------- */
.referrals-wrapp .nf-form-cont,
.referrals-wrapp .nf-form-cont .nf-form-wrap,
.referrals-wrapp .nf-form-cont .nf-form-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.referrals-wrapp .nf-form-cont .nf-form-content,
.referrals-wrapp .nf-form-cont .nf-after-form-content,
.referrals-wrapp .nf-form-cont .nf-response-msg { max-width: 1109px; margin: 0 auto; text-align: left; } /* = .referrals-col3 (96%) */
.referrals-wrapp .nf-form-cont nf-rows-wrap,
.referrals-wrapp .nf-form-cont nf-fields,
.referrals-wrapp .nf-form-cont nf-field,
.referrals-wrapp .nf-form-cont nf-section { display: block; }
.referrals-wrapp .nf-form-cont .nf-input-limit:empty { display: none; }

/* The form's own title and "Fields marked with * are required": kept for screen readers only
   (the section headings and the asterisks in the placeholders carry it in the design). */
.referrals-wrapp .nf-form-cont .nf-form-title,
.referrals-wrapp .nf-form-cont .nf-form-fields-required {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
}

.referrals-wrapp .nf-form-cont .nf-row { width: 100%; margin: 0 0 14px; } /* = .referrals-row3 margin 1.3% */
.referrals-wrapp .nf-form-cont .nf-row > nf-cells { display: flex; justify-content: space-between; width: 100%; }
.referrals-wrapp .nf-form-cont .nf-multi-cell .nf-cell { float: none; padding: 0; }
.referrals-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 50%"] { width: 49.2% !important; }
.referrals-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 100%"] { width: 100% !important; }
.referrals-wrapp .nf-form-cont .nf-cell .nf-field-container + .nf-field-container,
.referrals-wrapp .nf-form-cont .nf-cell nf-field + nf-field { margin-top: 14px; } /* Two fields stacked in one cell (Email / Practice Name) */
.referrals-wrapp .nf-form-cont .nf-field-container { margin: 0; }
.referrals-wrapp .nf-form-cont .nf-field-element { width: 100%; }

/* Section headings (HTML fields) – "Referral reason", "Patient details", "Dentist details" */
.referrals-wrapp .nf-form-cont .html-container .nf-field-label { display: none; }
.referrals-wrapp .nf-form-cont .html-container h3 { margin: 0 0 26px; text-align: center; } /* + the 14px row gap = the design's 40px */
.referrals-wrapp .nf-form-cont .nf-row:has(.html-container h3) { margin-top: 51px; }          /* = .referrals-col3 margin 65px */
.referrals-wrapp .nf-form-cont .nf-row:first-child:has(.html-container h3),
.referrals-wrapp .nf-form-cont .nf-row:has(.listcheckbox-container) + .nf-row { margin-top: 0; }
/* An HTML field without a heading is the gap before the uploads – make it exactly the design's */
.referrals-wrapp .nf-form-cont .nf-row:has(.html-container):not(:has(h3)) { height: 51px; margin: 0; overflow: hidden; }
.referrals-wrapp .nf-form-cont .nf-row:has(.html-container):not(:has(h3)) .nf-field-container { display: none; }

/* ---------- Referral reason – checkboxes, 4 per row (= .referrals-col4 / .checkbox1) -------- */
.referrals-wrapp .nf-form-cont .nf-row:has(.listcheckbox-container) { margin-bottom: 76px; }
.referrals-wrapp .nf-form-cont .listcheckbox-container .nf-field-label { display: none; }
.referrals-wrapp .nf-form-cont .listcheckbox-container ul {
	width: 93.8%; /* 1040px of 1109px, = .referrals-col4 90% of the section */
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 1.2%;
	row-gap: 33px;
	text-align: left;
}
.referrals-wrapp .nf-form-cont .listcheckbox-container li { margin: 0; padding: 0; }
.referrals-wrapp .nf-form-cont .listcheckbox-container li label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.33;
	color: #2f2f2f;
	text-align: left;
}
.referrals-wrapp .nf-form-cont .listcheckbox-container li label:before { top: 0; }
.referrals-wrapp .nf-form-cont .listcheckbox-container li label:after { top: 4.6px; }
/* Keyboard focus is on the (off-screen) checkbox – show it on the drawn box */
.referrals-wrapp .nf-form-cont .listcheckbox-container li input:focus-visible + label:before { outline: 3px solid #cbb16a; outline-offset: 2px; border-radius: 4px; }

/* ---------- Inputs & textareas (= .referrals-fil1 / .referrals-fil2 / .referrals-fil5) ------ */
.referrals-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="hidden"]),
.referrals-wrapp .nf-form-cont textarea.ninja-forms-field {
	width: 100%;
	height: 57px;
	margin: 0;
	padding: 0 36.6px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: normal;
	text-align: left;
	color: #2f2f2f;
	background: none;
	border: 1px solid rgba(47, 47, 47, 0.4);
	border-radius: 500px;
	box-shadow: none;
	resize: none;
	display: block;
	transition: border-color 0.25s ease-out 0s;
}
.referrals-wrapp .nf-form-cont textarea.ninja-forms-field { height: 131px; padding: 20px 37.7px 0; overflow: auto; }
.referrals-wrapp .nf-form-cont .ninja-forms-field::placeholder { color: #2f2f2f; opacity: 1; }
.referrals-wrapp .nf-form-cont input.ninja-forms-field:focus,
.referrals-wrapp .nf-form-cont textarea.ninja-forms-field:focus { border-color: #b99155; }

/* Date of birth – calendar icon on the right (= datepicker.css) */
.referrals-wrapp .nf-form-cont .date-container .pikaday__container { position: relative; }
.referrals-wrapp .nf-form-cont .date-container .pikaday__container:after {
	content: "";
	width: 16px;
	padding: 0 0 19px;
	background: url(../images/date-grey-plain-icon.svg) no-repeat center / 100% 100%;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	pointer-events: none;
}
.referrals-wrapp .nf-form-cont .date-container input.ninja-forms-field:not([type="hidden"]) { padding-right: 60px; }

/* ---------- File uploads (= .upload-btn-wrapper + .referrals-btn1) -------------------------- */
.referrals-wrapp .nf-form-cont .file_upload-container .field-wrap {
	min-height: 105px;
	padding: 24.4px 22.2px 24.4px 37.7px;
	border: 1px solid rgba(47, 47, 47, 0.4);
	border-radius: 500px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 12px;
}
/* The field label is the box's text: "Radiographs (drag files here or)" – the box is the drop zone */
.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-label {
	display: block;
	position: static !important;
	width: auto;
	height: auto;
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
}
.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-label label {
	visibility: visible; /* The field's label is set to "hidden" in Ninja Forms – here it is the box's text */
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #2f2f2f;
}
.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-label label:after { content: " (drag files here or)"; }
.referrals-wrapp .nf-form-cont .file_upload-container .nf-help { display: none; }
.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-element {
	width: auto;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-fileinput-button {
	margin: 0;
	padding: 18px 50px 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26px;
	line-height: normal;
	color: #ffffff;
	background: linear-gradient(90deg, rgba(203,177,106,1) 0%, rgba(184,142,83,1) 100%) border-box;
	border: 1px solid transparent;
	border-radius: 500px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: all 0.25s ease-out 0s;
	/* Arrow (= .circle-effects1 in the design's button) */
	padding-right: 56px;
	background-image: url(../images/right-white-plain-arrow.svg), linear-gradient(90deg, rgba(203,177,106,1) 0%, rgba(184,142,83,1) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 27px center, 0 0;
	background-size: 4.3px auto, 100% 100%;
}
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-fileinput-button:hover,
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-fileinput-button:focus-visible {
	color: #b99155;
	background-image: url(../images/right-brown-plain-arrow.svg), none;
	background-color: transparent;
	border-color: #b99155;
}
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-button-cancel {
	margin: 8px 0 0;
	padding: 6px 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	color: #222941;
	background: none;
	border: 1px solid rgba(47, 47, 47, 0.4);
	border-radius: 500px;
	cursor: pointer;
}
/* Progress bar only while a file is uploading (the bar then has a width) */
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-progress { width: 100%; height: 6px; margin: 8px 0 0; background: rgba(47, 47, 47, 0.1); border-radius: 500px; display: none; }
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-progress:has(.nf-fu-progress-bar[style*="width"]:not([style*="width: 0"])) { display: block; }
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-progress-bar { height: 100%; }
.referrals-wrapp .nf-form-cont .file_upload-container .nf-fu-progress-bar { background: #b99155; border-radius: 500px; }
.referrals-wrapp .nf-form-cont .file_upload-container .files_uploaded { width: 100%; text-align: right; font-size: 13px; color: #2f2f2f; }
.referrals-wrapp .nf-form-cont .file_upload-container .files_uploaded p { margin: 6px 0 0; }

/* ---------- Consent checkboxes (= .checkbox-col1 .checkbox1 / .checkbox2) ------------------ */
.referrals-wrapp .nf-form-cont .nf-row:has(.checkbox-container) { margin: 0 0 20px; }
.referrals-wrapp .nf-form-cont .nf-row:has(.textarea-container) + .nf-row:has(.checkbox-container) { margin-top: 36px; }
.referrals-wrapp .nf-form-cont .nf-row:has(.checkbox-container) + .nf-row:has(.checkbox-container) { margin-bottom: 30px; }
.referrals-wrapp .nf-form-cont .checkbox-container .field-wrap { display: block; position: relative; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-element { width: auto; position: absolute; top: 0; left: 0; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label { width: 100%; display: block; margin: 0; padding: 0; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label {
	cursor: pointer;
	display: block;
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.33;
	color: #2f2f2f;
	text-align: left;
	top: 4px;
}
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label a { font-weight: 600; color: #363b3e; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label a:hover { color: #000000; }
.referrals-wrapp .nf-form-cont .checkbox-container .ninja-forms-req-symbol { display: none; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label:before {
	content: '';
	width: 19.9px;
	height: 19.9px;
	background: url(../images/checked-transparent-brown-gradient-square-thumb.svg) no-repeat center / 100%;
	position: absolute;
	top: -4px;
	left: 0;
}
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label:after {
	content: '';
	width: 11.3px;
	height: 10.4px;
	background: url(../images/checked-brown-gradient-plain-icon.svg) no-repeat center / 100%;
	position: absolute;
	top: 0.6px;
	left: 4.2px;
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s ease;
}
.referrals-wrapp .nf-form-cont .checkbox-container:has(input:checked) .nf-field-label label:after,
.referrals-wrapp .nf-form-cont .checkbox-container .nf-field-label label.nf-checked-label:after { opacity: 1; transform: scale(1); }
.referrals-wrapp .nf-form-cont .checkbox-container:has(input:focus-visible) .nf-field-label label:before { outline: 3px solid #cbb16a; outline-offset: 2px; border-radius: 4px; }

/* ---------- Submit (= .referrals-box .contact-btn1) ----------------------------------------- */
.referrals-wrapp .nf-form-cont .submit-container .field-wrap { display: block; }
.referrals-wrapp .nf-form-cont .submit-container .nf-field-label { display: none; }
.referrals-wrapp .nf-form-cont .submit-container .nf-field-element { width: auto; display: inline-block; margin: 8px 0 0; }
.referrals-wrapp .nf-form-cont .submit-container input[type="submit"] {
	margin: 0;
	padding: 18px 56px 16px 50px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26px;
	line-height: normal;
	color: #ffffff;
	background-image: url(../images/right-white-plain-arrow.svg), linear-gradient(90deg, rgba(203,177,106,1) 0%, rgba(184,142,83,1) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: right 27px center, 0 0;
	background-size: 4.3px auto, 100% 100%;
	border: 1px solid transparent;
	border-radius: 500px;
	cursor: pointer;
	transition: all 0.25s ease-out 0s;
}
.referrals-wrapp .nf-form-cont .submit-container input[type="submit"]:hover,
.referrals-wrapp .nf-form-cont .submit-container input[type="submit"]:focus-visible {
	color: #b99155;
	background-image: url(../images/right-brown-plain-arrow.svg), none;
	background-color: transparent;
	border-color: #b99155;
}
.referrals-wrapp .nf-form-cont .submit-container input[type="submit"]:disabled { cursor: progress; opacity: 0.7; }

/* ---------- Validation & messages ---------------------------------------------------------- */
.referrals-wrapp .nf-form-cont .nf-error input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="hidden"]),
.referrals-wrapp .nf-form-cont .nf-error textarea.ninja-forms-field,
.referrals-wrapp .nf-form-cont .nf-error.file_upload-container .field-wrap { border-color: #b3261e; }
.referrals-wrapp .nf-form-cont .nf-error.checkbox-container .nf-field-label label:before,
.referrals-wrapp .nf-form-cont .nf-error.listcheckbox-container li label:before { outline: 1px solid #b3261e; outline-offset: 1px; border-radius: 4px; }
.referrals-wrapp .nf-form-cont .nf-error-msg {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
	color: #b3261e;
	text-align: left;
}
.referrals-wrapp .nf-form-cont .listcheckbox-container .nf-error-msg { text-align: center; margin-top: 16px; }
.referrals-wrapp .nf-form-cont .checkbox-container .nf-error-msg { margin: 10px 0 0 30px; }
.referrals-wrapp .nf-form-cont .nf-response-msg {
	padding: 25px 37.7px;
	font-size: 15px;
	line-height: 1.6;
	color: #2f2f2f;
	text-align: center;
	border: 1px solid rgba(47, 47, 47, 0.4);
	border-radius: 30px;
}
.referrals-wrapp .nf-form-cont .nf-response-msg p { margin: 0; }

/* ---------- Tablets ------------------------------------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.referrals-wrapp .nf-form-cont .listcheckbox-container ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; width: 70%; }
	.referrals-wrapp .nf-form-cont .file_upload-container .field-wrap { padding-left: 28px; }
	.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-label label { font-size: 14px; }
}

/* ---------- Phones (= referrals.css / hovers.css ≤767px): one column, centred -------------- */
@media screen and (max-width: 767px) {
	.referrals-wrapp .nf-form-cont .nf-row > nf-cells { display: block; }
	.referrals-wrapp .nf-form-cont .nf-multi-cell .nf-cell[style*="width: 50%"] { width: 100% !important; }
	.referrals-wrapp .nf-form-cont .nf-multi-cell .nf-cell + .nf-cell { margin-top: 14px; }
	.referrals-wrapp .nf-form-cont .html-container h3 { margin-bottom: 8px; }
	.referrals-wrapp .nf-form-cont .nf-row:has(.html-container h3) { margin-top: 26px; }
	.referrals-wrapp .nf-form-cont .nf-row:has(.listcheckbox-container) { margin-bottom: 40px; }
	.referrals-wrapp .nf-form-cont .nf-row:has(.html-container):not(:has(h3)) { height: 20px; }
	.referrals-wrapp .nf-form-cont .listcheckbox-container ul { width: 100%; display: block; }
	.referrals-wrapp .nf-form-cont .listcheckbox-container li { margin: 0 0 10px; text-align: center; }
	.referrals-wrapp .nf-form-cont .listcheckbox-container li label { display: inline-block; }

	.referrals-wrapp .nf-form-cont input.ninja-forms-field:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="hidden"]),
	.referrals-wrapp .nf-form-cont textarea.ninja-forms-field { height: 49px; padding: 0 5%; text-align: center; }
	.referrals-wrapp .nf-form-cont textarea.ninja-forms-field { height: 117px; padding: 15px 5% 0; border-radius: 30px; }
	.referrals-wrapp .nf-form-cont .date-container input.ninja-forms-field:not([type="hidden"]) { padding: 0 44px; }

	.referrals-wrapp .nf-form-cont .file_upload-container .field-wrap { display: block; padding: 18px 11% 20px; text-align: center; border-radius: 30px; }
	.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-label { margin: 0 0 16px; }
	.referrals-wrapp .nf-form-cont .file_upload-container .nf-field-element { align-items: center; }
	.referrals-wrapp .nf-form-cont .file_upload-container .files_uploaded { text-align: center; }

	.referrals-wrapp .nf-form-cont .nf-row:has(.textarea-container) + .nf-row:has(.checkbox-container) { margin-top: 26px; }
	.referrals-wrapp .nf-form-cont .submit-container { text-align: center; }
	.referrals-wrapp .nf-form-cont .submit-container input[type="submit"] { font-size: 14px; }
}