/* ==========================================================================
   Before-you-go brochure popup — DESKTOP ONLY (>=992px)
   Built 2026-10-02 for owner review on staging. Sibling: assets/js/exit-intent.js

   Colours are sampled from the live theme, not invented:
     navy   rgb(16,41,97)   #102961   (the LOCATIONS / heading navy)
     gold   rgb(200,150,62) #C8963E   (the site's "Get My Free Quote" CTA)
     body   rgb(64,64,64)   #404040 · inputs #eee with a 1px #c7c7c7 border
   The button keeps the site's 30px pill radius and Open Sans 800 so it reads
   like every other CTA on the site.

   The overlay is display:none until .is-open is added AND the viewport is
   >=992px — so even a script bug cannot show it on a phone, and there is no
   layout shift because nothing is in flow.
   ========================================================================== */

.gd-exit {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	background: rgba(16, 41, 97, .58);
	-webkit-overflow-scrolling: touch;
}

/* Desktop gate, belt and braces with the JS check. */
@media (min-width: 992px) {
	.gd-exit.is-open {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.gd-exit__panel {
	position: relative;
	width: 544px;
	max-width: calc(100% - 48px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
	padding: 24px 30px 22px;
	font-family: "Open Sans", sans-serif;
	color: #404040;
	text-align: left;
	animation: gd-exit-in .22s ease-out;
}

@keyframes gd-exit-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gd-exit__panel { animation: none; }
}

.gd-exit__eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #C8963E;
	margin: 0 0 6px;
}

.gd-exit__title {
	font-size: 24px;
	line-height: 1.22;
	font-weight: 800;
	color: #102961;
	margin: 0 0 8px;
}

.gd-exit__sub {
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 13px;
}

.gd-exit__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #102961;
	margin: 0 0 6px;
}

.gd-exit__input {
	width: 100%;
	box-sizing: border-box;
	background: #eee;
	border: 1px solid #c7c7c7;
	border-radius: 0;
	color: #000;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	padding: 12px 14px;
}

.gd-exit__input:focus {
	outline: 2px solid #102961;
	outline-offset: 1px;
	border-color: #102961;
}

.gd-exit__btn {
	display: inline-block;
	margin: 16px 0 0;
	padding: 13px 40px;
	background: #C8963E;
	border: 1px solid #C8963E;
	border-radius: 30px;
	color: #102961;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}

.gd-exit__btn:hover,
.gd-exit__btn:focus {
	background: #b4852f;
	border-color: #b4852f;
}

.gd-exit__btn[disabled] {
	opacity: .7;
	cursor: default;
}

.gd-exit__consent {
	margin: 11px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
}

.gd-exit__consent a {
	color: #102961;
	text-decoration: underline;
}

.gd-exit__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: #102961;
}

.gd-exit__check input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

/* the required marker — sits right of the box, in front of "I agree" */
.gd-exit__req {
	color: #ff1a1a;
	font-weight: 700;
	font-size: 15px;
	margin-right: 1px;
}

/* 3rd line of the heading, on its own — the guarantee line */
.gd-exit__guarantee {
	display: block;
	margin-top: 7px;
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #102961;
}

/* keep a two-word link label ("SMS Terms") from splitting across lines */
.gd-exit__consent a {
	white-space: nowrap;
}

/* the guarantee's icon — the same green-box check the site's own trust cards use */
.gd-exit__tick {
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

/* review link (?gd_exit_preview=1) at a window too narrow for the desktop popup */
.gd-exit-preview-note {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: #102961;
	color: #ffffff;
	font: 700 14px/1.5 "Open Sans", Arial, sans-serif;
	padding: 14px 18px;
	text-align: center;
}

.gd-exit__fine {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #767676;
}

.gd-exit__fine u {
	text-decoration: underline;
}

.gd-exit__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: #8a8a8a;
	cursor: pointer;
}

.gd-exit__close:hover,
.gd-exit__close:focus {
	color: #102961;
}

.gd-exit__msg {
	margin: 12px 0 0;
	font-size: 13.5px;
	min-height: 18px;
}

.gd-exit__msg[data-bad="1"] {
	color: #B3261E;
	font-weight: 700;
}

.gd-exit__msg[data-good="1"] {
	color: #0D7A3F;
	font-weight: 700;
}

.gd-exit__decline {
	display: inline-block;
	margin: 14px 0 0 14px;
	font-size: 13px;
	color: #767676;
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* The vendor's own brochure form, embedded — the SAME Wufoo form the sitewide
   pullout uses (muvqdbt1a70fji), so the lead notifies through Wufoo's own sending
   infrastructure exactly like every other capture surface on the site. Sized from the
   vendor's own content (327px measured at 470/500/620px wide) plus slack, and kept
   correct at runtime by the embedKey height messages handled in exit-intent.js. */
.gd-exit__brochure {
	display: block;
	width: 100%;
	border: 0;
	margin: 8px 0 0;
	background: #fff;
}

.gd-exit__actions {
	margin-top: 8px;
	text-align: center;
}

.gd-exit__actions .gd-exit__decline {
	margin: 0;
}
