/**
 * Google reCAPTCHA field.
 *
 * Kept deliberately unopinionated: each form plugin styles its own labels, so
 * this file only handles the two things the widget itself gets wrong — the
 * iframe's fixed 304px width on narrow phones, and the v3 badge, which Google
 * floats over the bottom-right corner of every page it is loaded on.
 */

.xl-recaptcha-field {
	margin: 0 0 18px;
}

.xl-recaptcha-label {
	display: block;
	margin-bottom: 8px;
}

.xl-recaptcha-required {
	color: #e02b2b;
	margin-left: 2px;
}

.xl-recaptcha-widget {
	max-width: 100%;
}

/* Google's response textarea — the one that actually carries the token — must
   stay hidden. It ships with `display: none` as an INLINE style, which is
   normally the end of it, but a form stylesheet that says
   `.xjob-apply-form textarea { display: block !important }` beats an inline
   rule and puts the raw token on the page as a scrollable box under the
   checkbox. Hence `!important` here, and enough specificity (three simple
   selectors) to outrank the two-class form rules that caused it. */
.xl-recaptcha-field .xl-recaptcha-widget textarea[name^="g-recaptcha-response"],
.xl-recaptcha-field textarea.g-recaptcha-response[name^="g-recaptcha-response"] {
	display: none !important;
}

/* The checkbox iframe is a fixed 304 x 78 and cannot be made fluid, so it is
   scaled down instead — and the wrapper's height is corrected to match, or the
   shrunk widget would leave a gap under itself. */
@media ( max-width: 360px ) {
	.xl-recaptcha-v2 .xl-recaptcha-widget {
		transform: scale( 0.85 );
		transform-origin: 0 0;
		height: 66px;
	}
}

/* v3 draws no field of its own; Google requires the attribution instead. */
.xl-recaptcha-badge-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.75;
}

.xl-recaptcha-badge-note a {
	text-decoration: underline;
}

/* With the notice above shown next to the form, Google's floating badge is
   redundant and sits on top of whatever is in the bottom-right corner. */
.xl-recaptcha-v3-active .grecaptcha-badge {
	visibility: hidden;
}

/* Marked by the form when a submission was rejected for a missing check, so
   the outline lands on the widget rather than only on the message under it.
   Each form plugin names its own invalid state, hence the list. */
.xl-recaptcha-field.xl-recaptcha-invalid .xl-recaptcha-widget,
.xl-recaptcha-field.xjob-input-error .xl-recaptcha-widget,
.xl-recaptcha-field.xfb-invalid .xl-recaptcha-widget,
.xl-recaptcha-field.ccf-invalid .xl-recaptcha-widget {
	outline: 1px solid #e02b2b;
	outline-offset: 3px;
	border-radius: 4px;
}

/* The job form inserts its error text as a sibling of the field it belongs to,
   so the message for this one lands directly under the widget. */
.xl-recaptcha-field + .xjob-field-err {
	display: block;
	margin-top: 6px;
}