/**
 * Mater pop-up.
 *
 * Royal Coral tokens, matching MaterPopup.dc.html: 50/50 split with the image on the
 * left, form on the right, collapsing to an image strip above the form on mobile.
 *
 * Contrast note: the submit button is ink on coral, not white on coral. White on
 * coral measures 2.55:1, which fails AA and fails even the large-text threshold, so
 * no font size rescues it.
 */

.mc-popup {
	--mc-navy: #174A7E;
	--mc-sky: #2B8FE5;
	--mc-coral: #FF7A66;
	--mc-coral-hi: #f2634d;
	--mc-ink: #253746;
	--mc-muted: #607080;
	--mc-tint: #EAF6FF;
	--mc-line: #d7e6f2;

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: 'Source Sans 3', system-ui, sans-serif;
}

.mc-popup[hidden] {
	display: none;
}

.mc-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 12, 38, 64, .58 );
	backdrop-filter: blur( 4px );
	animation: mc-popup-fade .25s ease;
}

.mc-popup__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 1040px;
	max-height: 92vh;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba( 9, 30, 52, .45 );
	animation: mc-popup-in .38s cubic-bezier( .2, .7, .3, 1 );
}

/*
 * No image configured means one column, not an empty half.
 *
 * The pop-up renders its media panel only when an image is set in Business Info.
 * Without this the two-column grid kept a 50% empty column, so the text sat squeezed
 * into the right half of a 1040px panel with nothing beside it.
 *
 * Placed AFTER the base rule deliberately. Both selectors have the same specificity, so
 * source order decides, and an earlier modifier only won because both declarations
 * carried !important. Ordering it correctly means the override needs no !important and
 * cannot be quietly defeated by someone tidying those away.
 */
.mc-popup__panel--no-media {
	grid-template-columns: 1fr;
	max-width: 560px;
}

@keyframes mc-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mc-popup-in {
	from { opacity: 0; transform: translateY( 24px ) scale( .97 ); }
	to { opacity: 1; transform: none; }
}

.mc-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .92 );
	color: var( --mc-navy );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.mc-popup__close:hover {
	background: var( --mc-coral );
	color: #fff;
}

.mc-popup__close:focus-visible {
	outline: 3px solid var( --mc-navy );
	outline-offset: 2px;
}

.mc-popup__media {
	position: relative;
	background: #eef5fc;
	min-height: 100%;
}

.mc-popup__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.mc-popup__body {
	padding: 38px 38px 34px;
	overflow-y: auto;
	max-height: 92vh;
}

.mc-popup__eyebrow {
	display: inline-block;
	background: var( --mc-tint );
	color: var( --mc-sky );
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.mc-popup__title {
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp( 24px, 2.6vw, 30px );
	letter-spacing: -.02em;
	color: var( --mc-navy );
	margin: 0 0 10px;
	line-height: 1.15;
}

.mc-popup__sub {
	font-size: 15.5px;
	line-height: 1.6;
	color: var( --mc-muted );
	margin: 0 0 20px;
}

.mc-popup__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mc-popup__form label {
	display: block;
	margin-bottom: 12px;
}

.mc-popup__form label > span {
	display: block;
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	color: var( --mc-navy );
	margin-bottom: 5px;
}

.mc-popup__req {
	color: var( --mc-coral );
}

.mc-popup__form input[type="text"],
.mc-popup__form input[type="tel"],
.mc-popup__form input[type="email"],
.mc-popup__form select {
	width: 100%;
	border: 1.5px solid var( --mc-line );
	border-radius: 11px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15px;
	color: var( --mc-ink );
	background: #fff;
	min-height: 46px;
}

.mc-popup__form input:focus,
.mc-popup__form select:focus {
	border-color: var( --mc-sky );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 43, 143, 229, .18 );
}

.mc-popup__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --mc-ink );
	margin-bottom: 10px;
	cursor: pointer;
}

.mc-popup__consent input {
	margin-top: 2px;
	width: 17px;
	height: 17px;
	accent-color: var( --mc-sky );
	flex: none;
}

.mc-popup__consent span {
	font-family: inherit;
	font-weight: 400;
	font-size: 12.5px;
	color: var( --mc-ink );
	margin: 0;
}

.mc-popup__submit {
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: var( --mc-coral );
	color: var( --mc-ink ); /* Ink, not white. White on coral is 2.55:1 and fails AA. */
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba( 255, 122, 102, .34 );
	transition: background .25s, transform .25s;
	margin-top: 6px;
}

.mc-popup__submit:hover {
	background: var( --mc-coral-hi );
	transform: translateY( -2px );
}

.mc-popup__submit:focus-visible {
	outline: 3px solid var( --mc-navy );
	outline-offset: 2px;
}

.mc-popup__fine {
	font-size: 12px;
	line-height: 1.5;
	color: #8a99a8;
	margin: 12px 0 0;
	text-align: center;
}

.mc-popup__fine a {
	color: var( --mc-navy );
}

.mc-popup__success-state {
	text-align: center;
	padding: 26px 10px;
}

.mc-popup__tick {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var( --mc-tint );
	color: var( --mc-sky );
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
}

.mc-popup__continue {
	border: 0;
	border-radius: 999px;
	background: var( --mc-navy );
	color: #fff;
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 26px;
	cursor: pointer;
	margin-top: 8px;
}

.mc-popup__continue:hover {
	background: #0f335a;
}

.mc-message {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.mc-message:empty {
	display: none;
}

.mc-message--ok {
	color: #0b5f43;
}

.mc-message--error {
	color: #b3261e;
}

body.mc-popup-open {
	overflow: hidden;
}

/* Mobile: image becomes a strip above the form. */
@media ( max-width: 760px ) {
	.mc-popup {
		padding: 12px;
	}

	.mc-popup__panel {
		grid-template-columns: 1fr;
		max-height: 94vh;
	}

	.mc-popup__media {
		height: 170px;
		min-height: 0;
	}

	.mc-popup__media img {
		object-fit: cover;
	}

	.mc-popup__body {
		padding: 24px 20px 22px;
	}

	.mc-popup__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-popup__backdrop,
	.mc-popup__panel {
		animation: none;
	}

	.mc-popup__submit:hover {
		transform: none;
	}
}


/* ===== ONE DESIGN SYSTEM: the pop-up form matches the page form =====
 *
 * The two forms on this site are the same form. They post to the same REST route, they
 * carry the same field names and they capture the same consents, and until now they did
 * not look like each other: the pop-up drew 46px controls with an 11px radius and 12.5px
 * labels, the page form 48px controls with a 12px radius and 14px labels, and only the
 * page form had a focus ring you could see. Two geometries for one component is a bug in
 * the design system, not a style preference, and it is the kind that gets copied.
 *
 * This block brings the pop-up onto the page form's numbers, sourced from the .mc-form
 * rules in mater-templates/assets/location.css:
 *
 *   control padding    13px 15px          radius 12px      min-height 48px
 *   control font       16px               border 1.5px solid var( --mc-line )
 *   label spacing      15px below         label text 14px, 6px above the control
 *   focus              sky border + 3px rgba( 43,143,229,.18 ) ring
 *   focus-visible      2px solid sky outline, 2px offset
 *   consent box        18x18, 4px radius, 10px gap, 3px optical nudge
 *   consent text       13.5px / 1.5
 *
 * WHY IT IS APPENDED RATHER THAN EDITED IN PLACE. Every selector below matches one that
 * already exists earlier in this file at the same specificity, so source order is what
 * decides, and being last is what makes these win. Nothing here needs !important and
 * nothing here can be defeated except by moving it, which is why it is at the end and
 * says so.
 *
 * --mc-line and --mc-sec are re-declared on .mc-popup so the two forms draw their borders
 * and their small print from the same values as location.css rather than from a second
 * set that had already drifted by one hex digit. */
.mc-popup {
	--mc-line: #dbe7f1;
	--mc-sec: #33475a;
}

.mc-popup__form label {
	display: block;
	margin-bottom: 15px;
}

.mc-popup__form label > span {
	display: block;
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var( --mc-navy );
	margin-bottom: 6px;
}

.mc-popup__form input[type="text"],
.mc-popup__form input[type="tel"],
.mc-popup__form input[type="email"],
.mc-popup__form select {
	width: 100%;
	border: 1.5px solid var( --mc-line );
	border-radius: 12px;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 16px;
	color: var( --mc-ink );
	background: #fff;
	min-height: 48px;
}

.mc-popup__form input:focus,
.mc-popup__form select:focus {
	border-color: var( --mc-sky );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 43, 143, 229, .18 );
}

.mc-popup__form input:focus-visible,
.mc-popup__form select:focus-visible {
	outline: 2px solid var( --mc-sky );
	outline-offset: 2px;
	border-color: var( --mc-sky );
}

.mc-popup__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* The consent rows, on the page form's geometry: 18x18 box, 10px gap, 13.5px text. */
.mc-popup__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
}

.mc-popup__consent > input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 3px 0 0;
	border-radius: 4px;
	accent-color: var( --mc-sky );
}

.mc-popup__consent > span {
	flex: 1 1 auto;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --mc-sec );
}

/* The error state, identical in behaviour to the page form's. mc-attribution.js sets
 * .is-error on the label and aria-invalid on the control, then moves focus to it. A
 * box-shadow ring rather than an outline, so it can sit beside the focus outline instead
 * of replacing it. */
.mc-popup__consent.is-error > input[type="checkbox"] {
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, .32 );
}

.mc-popup__consent.is-error > span {
	color: #b3261e;
}

.mc-popup__form input.is-error,
.mc-popup__form select.is-error {
	border-color: #b3261e;
}

@media ( max-width: 760px ) {
	.mc-popup__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}


/* ===== CASCADE CORRECTION: the consent rows are 0,2,1 or they do not win =====
 *
 * MEASURED ON THE LIVE PAGE, which is the only reason this block exists. After the
 * harmonisation above shipped, getComputedStyle on the pop-up's consent row returned
 * display:block, margin-bottom:15px and font-size:14px - none of which is what the rules
 * a few lines up ask for.
 *
 * .mc-popup__form label is 0,1,1. .mc-popup__consent is 0,1,0. The label rule wins on
 * weight no matter where either one sits in the file, so the flex container was inert and
 * the consent text was taking the field-label size. This is the identical failure already
 * recorded against .mc-form label and .mc-consent in location.css, reproduced here by
 * copying the shape of the fix without copying the specificity that made it work.
 *
 * Every declaration below is therefore .mc-popup__form label.mc-popup__consent (0,2,1) or
 * tighter, which is the same weight location.css uses for the page form. Source order is
 * no longer doing any of the work.
 *
 * display is deliberately NOT set on the span: the page form lets it inherit block from
 * the field-label rule and treats it as a flex item, and the two forms have to agree. */
.mc-popup__form label.mc-popup__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
}

.mc-popup__form label.mc-popup__consent > input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 3px 0 0;
	border-radius: 4px;
	accent-color: var( --mc-sky );
}

.mc-popup__form label.mc-popup__consent > span {
	flex: 1 1 auto;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --mc-sec );
}

.mc-popup__form label.mc-popup__consent.is-error > input[type="checkbox"] {
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, .32 );
}

.mc-popup__form label.mc-popup__consent.is-error > span {
	color: #b3261e;
}


/* ===== FIELD HEIGHT: the last two pixels =====
 *
 * With the padding, radius, border and font size matched, the pop-up's text inputs still
 * measured 48px against the page form's 50px. Nothing in either rule set asks for a
 * height: both leave line-height at normal, and normal is a property of the font's own
 * metrics, so two stacks that look the same on screen resolve to a 20px line box in one
 * form and a 22px line box in the other.
 *
 * Declaring it removes the dependency on the font file. 1.375 x 16px is 22px, which is
 * exactly what the page form renders today, so the two agree AND neither moves if a font
 * is swapped later.
 *
 * Only the pop-up is changed. The page form already renders 50px and touching it to reach
 * the same number would be a regression risk taken for nothing. */
.mc-popup__form input[type="text"],
.mc-popup__form input[type="tel"],
.mc-popup__form input[type="email"],
.mc-popup__form select {
	line-height: 1.375;
	min-height: 50px;
}

/*
 * min-height carries the last pixel and a half.
 *
 * With line-height declared the pop-up's inputs still measured 48.5px: the line box is
 * 22px in both forms now, but the pop-up's controls were still resolving to their 48px
 * floor rather than growing past it, so the two forms sat 1.5px apart. Raising the floor
 * to the number the page form actually renders - 50px, measured - removes the last of the
 * difference and does not depend on the font at all.
 */