/**
 * The 71 voucher system.
 *
 * Scoped under .the71v so nothing here can leak into the rest of the Elementor
 * page. Colours are set explicitly rather than inherited, because these blocks
 * sit on both the dark and the light sections of the site.
 */

.the71v {
	--the71v-gold: #c9a24d;
	/* Brand gold is only 2.4:1 against white. This is the lightest gold that
	   still carries white button text at 4.5:1. */
	--the71v-gold-deep: #8f6e1f;
	--the71v-ink: #141414;
	--the71v-paper: #ffffff;
	--the71v-muted: #6b6b6b;
	--the71v-line: #e3ded2;
	--the71v-bad: #b3261e;
	--the71v-good: #1c6b3f;

	box-sizing: border-box;
	max-width: 620px;
	/* Outer margin keeps it off the header and footer, inner padding keeps the
	   content off the edge of the card. */
	margin: clamp(24px, 5vw, 56px) auto;
	padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 44px);
	background: var(--the71v-paper);
	border-radius: 6px;
	color: var(--the71v-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

.the71v *,
.the71v *::before,
.the71v *::after {
	box-sizing: border-box;
}

.the71v.the71v-wide {
	max-width: 1040px;
}

/* ------------------------------------------------------- Two column split */

.the71v-intro {
	max-width: 42rem;
	margin: 0 auto clamp(24px, 4vw, 40px);
	text-align: center;
}

.the71v-intro h2 {
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 1.15;
	text-wrap: balance;
	margin-bottom: 12px;
}

.the71v-split {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 44px);
	/* Stretch, not start. The picture fills its column whatever the form's
	   height, so adding fields never leaves dead white space beside them. */
	align-items: stretch;
}

.the71v-split--reverse .the71v-split__media {
	order: 2;
}

.the71v-split__media {
	position: relative;
	/* Guards the short states, the closed notice and the success card, where
	   the body is barely taller than a paragraph. */
	min-height: 420px;
}

.the71v-split__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Stated rather than left off, so the fill still wins if an older copy of
	   this stylesheet is cached alongside it. */
	aspect-ratio: auto;
	max-height: none;
	object-fit: cover;
	border-radius: 4px;
}

.the71v-split__body {
	min-width: 0;
}

.the71v h2 {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	color: var(--the71v-ink);
}

.the71v h3 {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--the71v-muted);
}

.the71v p {
	margin: 0 0 14px;
	color: #3f3f3f;
}

.the71v-lede {
	font-size: 17px;
}

/* ---------------------------------------------------------------- Fields */

.the71v-field,
.the71v-check {
	margin-bottom: 18px;
}

.the71v-row {
	display: flex;
	gap: 16px;
}

.the71v-row .the71v-field {
	flex: 1 1 0;
	min-width: 0;
}

.the71v label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--the71v-ink);
}

.the71v input[type="text"],
.the71v input[type="email"],
.the71v input[type="tel"],
.the71v input[type="date"],
.the71v input[type="search"],
.the71v input[type="password"],
.the71v select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--the71v-line);
	border-radius: 4px;
	background: #fff;
	color: var(--the71v-ink);
	/* 16px minimum or iOS zooms the page on focus. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.the71v select {
	background-image: linear-gradient(45deg, transparent 50%, var(--the71v-muted) 50%),
		linear-gradient(135deg, var(--the71v-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.the71v input:focus,
.the71v select:focus {
	outline: 2px solid var(--the71v-gold);
	outline-offset: 1px;
	border-color: var(--the71v-gold);
}

.the71v-field--code input {
	font-size: 22px;
	letter-spacing: 3px;
	font-weight: 700;
	text-transform: uppercase;
}

.the71v-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--the71v-muted);
}

.the71v-error {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--the71v-bad);
}

.the71v-error:empty {
	display: none;
}

.the71v-field--invalid input,
.the71v-field--invalid select {
	border-color: var(--the71v-bad);
}

.the71v-formerror {
	display: none;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 3px solid var(--the71v-bad);
	background: #fdf2f1;
	color: var(--the71v-bad);
	font-weight: 600;
}

.the71v-formerror.is-visible {
	display: block;
}

.the71v-check label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #3f3f3f;
}

.the71v-check input {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--the71v-gold);
}

/* Links in the consent tick box. Underlined and darker than the body so they
   read as links without borrowing the theme's own link colour. The theme styles
   bare a, so the .the71v prefix is what stops it winning. */
.the71v .the71v-check a {
	color: var(--the71v-gold-deep);
	text-decoration: underline;
}

.the71v .the71v-check a:hover,
.the71v .the71v-check a:focus {
	color: var(--the71v-ink);
}

/* The honeypot. Off screen rather than display:none, which some bots skip. */
.the71v-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.the71v-smallprint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--the71v-muted);
}

/* --------------------------------------------------------------- Buttons */

.the71v .the71v-btn,
.the71v a.the71v-btn {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid var(--the71v-gold-deep);
	border-radius: 3px;
	background: var(--the71v-gold-deep);
	/* The site theme colours links gold, which on a gold button is invisible.
	   Stated here at a specificity the theme cannot win. */
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	max-width: 100%;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.the71v .the71v-btn:hover,
.the71v a.the71v-btn:hover {
	opacity: 0.88;
	color: #ffffff;
}

.the71v-btn[disabled],
.the71v-btn.is-busy {
	opacity: 0.6;
	cursor: wait;
}

.the71v .the71v-btn--ghost,
.the71v a.the71v-btn--ghost,
.the71v .the71v-btn--ghost:hover,
.the71v a.the71v-btn--ghost:hover {
	background: transparent;
	border-color: var(--the71v-gold-deep);
	color: var(--the71v-ink);
}

.the71v-submit {
	width: 100%;
}

.the71v-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--the71v-muted);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------ Result card */

.the71v-card {
	margin: 18px 0;
	border: 1px solid var(--the71v-line);
	border-radius: 5px;
	overflow: hidden;
}

.the71v-card__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--the71v-line);
}

.the71v-card__row:last-child {
	border-bottom: 0;
}

.the71v-card__label {
	flex: 0 0 auto;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--the71v-muted);
	padding-top: 2px;
}

.the71v-card__value {
	text-align: right;
	font-weight: 600;
	word-break: break-word;
}

.the71v-card__value.the71v-code {
	font-size: 20px;
	letter-spacing: 2px;
}

.the71v-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0;
}

.the71v-terms ul {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	color: var(--the71v-muted);
}

.the71v-terms li {
	margin-bottom: 4px;
}

/* ------------------------------------------------------------ Staff tool */

.the71v-staff__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--the71v-line);
	font-size: 14px;
	color: var(--the71v-muted);
}

.the71v-staff__search {
	display: grid;
	gap: 10px;
}

.the71v-staff__login {
	display: grid;
	gap: 6px;
	max-width: 22rem;
	margin: 0 auto;
	text-align: center;
}

.the71v-staff__login h2 {
	margin-bottom: 14px;
}

.the71v-staff__login label {
	text-align: left;
}

.the71v-staff__login button,
.the71v-staff__search button {
	margin-top: 6px;
}

.the71v-note {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--the71v-line);
	background: #f7f6f2;
	font-size: 14px;
}

.the71v-note--good {
	border-left-color: var(--the71v-good);
	background: #f0f7f2;
	color: var(--the71v-good);
	font-weight: 600;
}

.the71v-note--bad {
	border-left-color: var(--the71v-bad);
	background: #fdf2f1;
	color: var(--the71v-bad);
	font-weight: 600;
}

.the71v-result {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--the71v-line);
	border-radius: 6px;
	border-left-width: 5px;
}

.the71v-result--active {
	border-left-color: var(--the71v-good);
}

.the71v-result--redeemed {
	border-left-color: var(--the71v-muted);
	background: #fafafa;
}

.the71v-result--expired {
	border-left-color: var(--the71v-bad);
}

.the71v-result--unused {
	border-left-color: var(--the71v-gold);
}

.the71v-result header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.the71v-badge {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.the71v-result--active .the71v-badge {
	color: var(--the71v-good);
}

.the71v-result--expired .the71v-badge {
	color: var(--the71v-bad);
}

.the71v-campaign {
	font-size: 12px;
	color: var(--the71v-muted);
}

.the71v-checklist {
	margin: 0 0 16px;
	padding-left: 18px;
	font-size: 14px;
	color: #3f3f3f;
}

.the71v-result__actions .the71v-btn {
	width: 100%;
	margin-bottom: 8px;
}

.the71v-confirm {
	padding: 14px;
	border-radius: 4px;
	background: #fdf8ec;
}

.the71v-confirm p {
	margin: 0 0 12px;
	font-weight: 600;
}

.the71v-activate-form {
	display: grid;
	gap: 6px;
}

.the71v-af__intro {
	margin: 0 0 6px;
	font-size: 14px;
}

.the71v .the71v-af__label {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
}

.the71v .the71v-af__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 12px 0 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: #3f3f3f;
}

.the71v .the71v-af__check input {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--the71v-gold);
}

.the71v-activate-form .the71v-btn {
	margin-top: 8px;
}

.the71v.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 860px) {
	.the71v-split {
		grid-template-columns: 1fr;
	}

	.the71v-split__media {
		position: static;
		min-height: 0;
	}

	.the71v-split--reverse .the71v-split__media {
		order: 0;
	}

	.the71v-split__media img {
		/* Landscape when stacked, so the picture sets the scene without
		   pushing the first field below the fold. Back into the flow, so the
		   full height fill above does not apply. */
		position: static;
		height: auto;
		aspect-ratio: 16 / 9;
		max-height: 240px;
	}
}

@media (max-width: 560px) {
	.the71v {
		padding: 28px 18px;
	}

	.the71v-row {
		display: block;
	}

	.the71v-row .the71v-field {
		margin-bottom: 18px;
	}

	.the71v h2 {
		font-size: 22px;
	}

	.the71v-card__row {
		flex-direction: column;
		gap: 2px;
	}

	.the71v-card__value {
		text-align: left;
	}

	.the71v-actions .the71v-btn {
		width: 100%;
	}
}