/*
 * YES Group Forms — front-end styling.
 *
 * Deliberate choices:
 *  - inputs are 16px, because anything smaller makes iOS zoom the page in on
 *    focus and never zoom back out;
 *  - every control is at least 44px tall, matching the tap-target work done on
 *    the basket and checkout;
 *  - widths are all relative, so the form cannot cause sideways scrolling on a
 *    narrow phone.
 */

.yes-form-wrap {
	max-width: 640px;
	margin: 0 0 2em;
}

.yes-form,
.yes-form * {
	box-sizing: border-box;
}

.yes-form__intro {
	margin: 0 0 1.25em;
	font-size: 15px;
	line-height: 1.5;
}

.yes-form-field {
	margin: 0 0 1.25em;
	min-width: 0;
}

.yes-form__label {
	display: block;
	margin: 0 0 0.35em;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.yes-form__req {
	color: #be2a26;
	margin-left: 2px;
}

.yes-form__desc {
	margin: 0 0 0.5em;
	font-size: 13px;
	line-height: 1.4;
	color: #5b5b5b;
}

.yes-form__input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	font-family: inherit;
	color: #1c1c1c;
	background: #fff;
	border: 1px solid #b8b8b8;
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
}

textarea.yes-form__input {
	min-height: 120px;
	resize: vertical;
}

.yes-form__input:focus {
	outline: 2px solid #1c5fa8;
	outline-offset: 1px;
	border-color: #1c5fa8;
}

.yes-form-field--invalid .yes-form__input {
	border-color: #be2a26;
	border-width: 2px;
	background: #fffafa;
}

.yes-form__error {
	margin: 0.4em 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #a11b17;
}

/* Fieldsets and checkboxes */
.yes-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.yes-form__check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 2px 0;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}

.yes-form__check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
}

.yes-form-field--consent {
	padding: 12px;
	background: #f7f7f7;
	border-radius: 4px;
}

/* Actions */
.yes-form__actions {
	margin-top: 1.5em;
}

.yes-form__submit {
	display: inline-block;
	min-height: 48px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: #be2a26;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.yes-form__submit:hover,
.yes-form__submit:focus {
	background: #a11b17;
}

.yes-form__submit[disabled] {
	opacity: 0.65;
	cursor: default;
}

.yes-form__privacy {
	margin: 0.9em 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5b5b5b;
}

/* Notices */
.yes-form-notice {
	padding: 14px 16px;
	margin: 0 0 1.5em;
	border-radius: 6px;
	border: 1px solid transparent;
	border-left-width: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.yes-form-notice:focus {
	outline: 2px solid #1c5fa8;
	outline-offset: 2px;
}

.yes-form-notice__title {
	margin: 0 0 0.4em;
	font-size: 17px;
	font-weight: 700;
}

.yes-form-notice p:last-child,
.yes-form-notice ul:last-child {
	margin-bottom: 0;
}

.yes-form-notice--ok {
	background: #edf8f0;
	border-color: #cfe8d6;
	border-left-color: #1b7a3d;
	color: #14522a;
}

.yes-form-notice--error {
	background: #fdecec;
	border-color: #f3cfcf;
	border-left-color: #be2a26;
	color: #8a1512;
}

.yes-form-notice--error a {
	color: #8a1512;
	text-decoration: underline;
}

.yes-form-notice ul {
	margin: 0.4em 0 0 1.2em;
	padding: 0;
}

.yes-form-notice li {
	margin: 0 0 0.25em;
}

/* Honeypot: hidden from people, still present for bots to trip over.
   Kept out of the layout without display:none, which some bots check for. */
.yes-form-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}