/* Referrals page — KiwiSaver / Investment referral form (2026-09-29).
   The ElementsKit contact-form widget generates styling for text inputs and
   textareas from its own controls (58px tall, 20px padding, 15/15/15/0 radius,
   no border). It emits nothing for <select>, radio groups or the acceptance
   checkbox, which this form is the first on the site to use — so those three
   are styled here to match the inputs the widget does handle, rather than
   falling back to browser defaults next to styled fields.

   Scoped to .tnc-referral-form (a class on the form's own wrapper in the CF7
   markup) so nothing here can reach the Contact form. Enqueued on page 11420
   only. */

/* ---- field borders -----------------------------------------------------
   The ElementsKit widget is configured with border:none, because on Contact
   Us its white fields sit on a tinted panel (rgb(235,240,247)) and read by
   contrast alone. This page has a white background, so the same settings gave
   white fields on white — no visible edge at all, and no way to tell where
   the First Name box was.

   #8794AC measures 3.06:1 against white: the lightest navy-tinted grey that
   still meets the 3:1 WCAG minimum for the boundary of a form control.
   Everything lighter was tried and measured first — #E7E7E7 (the theme's own
   default border colour) is only 1.24:1, and #C6D0E0 just 1.56:1, both of
   which look tidy but leave the same "where is the field" problem for anyone
   on a dim screen or with low vision.

   !important for the same reason as the padding below: the widget emits its
   own border declaration from its control, later in the cascade. */
.tnc-referral-form input.form-control,
.tnc-referral-form textarea.form-control,
.tnc-referral-form select.form-control {
	border: 1px solid #8794AC !important;
}
.tnc-referral-form input.form-control:focus,
.tnc-referral-form textarea.form-control:focus,
.tnc-referral-form select.form-control:focus {
	border-color: #004AAD !important;
}

/* ---- group labels ----------------------------------------------------- */
.tnc-referral-form .tnc-choice-label {
	display: block;
	margin-bottom: 10px;
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: #071A51;
}

/* ---- Opportunity Type radios ------------------------------------------
   CF7 renders each option as an inline .wpcf7-list-item whose <label> is a
   block, which stacks the control above its text and leaves the five options
   reading as two disconnected rows. Laying each item out as a flex row puts
   the dot beside its own text. */
.tnc-referral-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.tnc-referral-form .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}
.tnc-referral-form .wpcf7-radio .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	font-family: "Golos Text", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: #6F6F6F;
}
.tnc-referral-form .wpcf7-radio input[type="radio"] {
	width: 16px !important;
	height: 16px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 16px;
	accent-color: #004AAD;
}

/* ---- dropdowns ---------------------------------------------------------
   Matched to the widget's own input styling. appearance:none is needed to
   drop the native control before a caret of our own can be drawn; without it
   the browser arrow sits on top of the background image on WebKit. The
   right-hand padding leaves room for that caret. */
.tnc-referral-form select.form-control {
	display: block;
	width: 100%;
	height: 58px;
	/* !important is needed on padding specifically: ElementsKit emits
	   `padding: 20px` for this widget's fields from its own control, and it
	   loads after this file. With 20px top and bottom inside a 58px control the
	   content box is only 18px, against a 25.5px line — which is what was
	   clipping the descenders of "Please choose an option", not the
	   line-height. Zero vertical padding lets the browser centre the text in
	   the full height. */
	padding: 0 44px 0 20px !important;
	/* border comes from the shared field-border rule above, not from here */
	border-radius: 15px 15px 15px 0;
	background-color: #FFFFFF;
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	font-weight: 400;
	/* line-height stays `normal`: a line-height equal to the control height
	   (tried first, 58px) pushes the text baseline below the select's content
	   box in Chrome and clips the descenders of "Please choose an option".
	   Browsers already centre a select's own text vertically. */
	line-height: normal;
	color: #6F6F6F;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	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 1l5 5 5-5' fill='none' stroke='%23071A51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 20px center;
	cursor: pointer;
}
.tnc-referral-form select.form-control:focus {
	outline: 2px solid #004AAD;
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.tnc-referral-form select.form-control {
		height: 48px;
		padding: 0 40px 0 15px;
	}
}

/* ---- consent ----------------------------------------------------------
   The authorisation wording is a statement the visitor is agreeing to, so it
   reads at body size above its own control rather than being squeezed into
   the checkbox label. */
.tnc-referral-form .tnc-consent-text {
	display: block;
	margin-bottom: 12px;
	padding: 16px 18px;
	border-radius: 15px 15px 15px 0;
	background: #EEF2F9;
	font-family: "Golos Text", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #071A51;
}
.tnc-referral-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.tnc-referral-form .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
}
/* The visible word sits in CF7's own .wpcf7-list-item-label span, which
   carries the widget's grey field colour — setting it on the <label> alone
   has no effect on what you actually read. */
.tnc-referral-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-weight: 500;
	color: #071A51;
}
.tnc-referral-form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 18px;
	accent-color: #004AAD;
}

/* The submit button keeps ElementsKit's own full-width styling, which is what
   the Contact form's "Send Message" uses too. A min-width/width:auto override
   was written first and removed: it never applied (the widget emits width:100%
   from its own control, later in the cascade) and a narrower button here would
   have made the two forms inconsistent for no gain. */