/*
 * qot-blocks - pop-up campaign card (SPEC_qot-popup-capture_v2 s6).
 * One contained, responsively sized card on every device. Fixed position and
 * hidden until opened, so it adds no layout shift.
 *
 * Styling comes from each campaign (Settings -> Pop-ups): QoT brand presets and
 * colour overrides arrive as --qot-pp-* custom properties on #qot-popup, plus
 * qot-popup--{edge,width,align,corners,backdrop}-* modifier classes. Fallbacks
 * are the QoT tokens, so an unstyled campaign still renders on-brand.
 */
.qot-popup[hidden] {
	display: none !important;
}

.qot-popup {
	--qot-pp-width: 480px;
	--qot-pp-radius: var( --brand-radius-lg, 12px );
	--qot-pp-button-radius: var( --brand-radius-pill, 999px );
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.qot-popup--width-narrow { --qot-pp-width: 400px; }
.qot-popup--width-wide { --qot-pp-width: 560px; }
.qot-popup--corners-soft { --qot-pp-radius: var( --brand-radius-md, 8px ); --qot-pp-button-radius: var( --brand-radius-md, 8px ); }
.qot-popup--corners-square { --qot-pp-radius: 0; --qot-pp-button-radius: 0; }

.qot-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 27, 54, 93, 0.6 );
}

.qot-popup--backdrop-light .qot-popup__backdrop {
	background: rgba( 245, 245, 245, 0.75 );
}

.qot-popup--backdrop-none .qot-popup__backdrop {
	background: transparent;
}

.qot-popup__card {
	position: relative;
	width: min( 92vw, var( --qot-pp-width ) );
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: var( --brand-space-6, 32px ) var( --brand-space-5, 24px ) var( --brand-space-5, 24px );
	background: var( --qot-pp-bg, var( --brand-surface, #ffffff ) );
	color: var( --qot-pp-text, var( --brand-text-body, #404040 ) );
	border-radius: var( --qot-pp-radius );
	box-shadow: 0 18px 48px rgba( 0, 0, 0, 0.25 );
	font-family: var( --brand-font-body, Georgia, serif );
	text-align: center;
}

.qot-popup--align-left .qot-popup__card {
	text-align: left;
}

.qot-popup--edge-top .qot-popup__card {
	border-top: 6px solid var( --qot-pp-accent, var( --brand-accent, #D4B483 ) );
}

.qot-popup--edge-left .qot-popup__card {
	border-left: 6px solid var( --qot-pp-accent, var( --brand-accent, #D4B483 ) );
}

.qot-popup__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) );
	font-size: 28px;
	line-height: 44px;
	cursor: pointer;
	border-radius: var( --brand-radius-pill, 999px );
}

.qot-popup__close:hover,
.qot-popup__close:focus-visible {
	background: rgba( 127, 127, 127, 0.15 );
	outline: 2px solid var( --qot-pp-accent, var( --brand-accent, #D4B483 ) );
	outline-offset: 0;
}

.qot-popup__media {
	margin: 0 auto var( --brand-space-4, 16px );
	max-width: 160px;
}

.qot-popup--align-left .qot-popup__media {
	margin-left: 0;
}

.qot-popup__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --brand-radius-md, 8px );
}

.qot-popup__headline,
#qot-popup .qot-newsletter-cta__headline {
	margin: 0 0 var( --brand-space-2, 8px );
	padding-right: 28px;
	padding-left: 28px;
	font-family: var( --brand-font-display, Georgia, serif );
	font-size: var( --brand-text-2xl, 1.5rem );
	font-weight: var( --brand-font-weight-bold, 700 );
	line-height: var( --brand-line-height-display, 1.2 );
	color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) );
}

.qot-popup--align-left .qot-popup__headline,
#qot-popup.qot-popup--align-left .qot-newsletter-cta__headline {
	padding-left: 0;
}

.qot-popup__subcopy,
#qot-popup .qot-newsletter-cta__subcopy {
	margin: 0 0 var( --brand-space-4, 16px );
	font-size: var( --brand-text-base, 1rem );
	line-height: var( --brand-line-height-body, 1.5 );
	color: var( --qot-pp-text, var( --brand-text-body, #404040 ) );
}

/* Shared 3-2-1-Go! form inside the card: strip the inline block's own framing. */
#qot-popup .qot-popup__cta {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	max-width: none;
	text-align: inherit;
	color: inherit;
}

#qot-popup .qot-popup__cta .qot-newsletter-cta__copy {
	margin: 0 0 var( --brand-space-4, 16px );
}

#qot-popup .qot-newsletter-cta__form {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var( --brand-space-2, 8px );
	margin: 0;
}

#qot-popup .qot-newsletter-cta__email {
	flex: 0 0 auto;
	height: auto;
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid rgba( 27, 54, 93, 0.25 );
	border-radius: var( --brand-radius-md, 8px );
	background: #ffffff;
	color: #1B365D;
	font-size: 16px;
}

#qot-popup .qot-newsletter-cta__email:focus-visible {
	outline: 2px solid var( --qot-pp-accent, var( --brand-accent, #D4B483 ) );
	outline-offset: 1px;
}

#qot-popup .qot-newsletter-cta__button,
.qot-popup__button {
	flex: 0 0 auto;
	display: block;
	transform: none;
	box-shadow: none;
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 12px 20px;
	border: 0;
	border-radius: var( --qot-pp-button-radius );
	background: var( --qot-pp-button, var( --brand-primary, #1B365D ) );
	color: var( --qot-pp-button-text, var( --brand-text-on-dark, #F5F5F5 ) );
	font-size: var( --brand-text-lg, 1.125rem );
	font-weight: var( --brand-font-weight-semibold, 600 );
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

#qot-popup .qot-newsletter-cta__button:hover,
.qot-popup__button:hover {
	filter: brightness( 0.92 );
	color: var( --qot-pp-button-text, var( --brand-text-on-dark, #F5F5F5 ) );
}

#qot-popup .qot-newsletter-cta__button:focus-visible,
.qot-popup__button:focus-visible {
	outline: 3px solid var( --qot-pp-accent, var( --brand-accent, #D4B483 ) );
	outline-offset: 2px;
	color: var( --qot-pp-button-text, var( --brand-text-on-dark, #F5F5F5 ) );
}

#qot-popup .qot-newsletter-cta__message {
	color: inherit;
	min-height: 0;
}

#qot-popup .qot-newsletter-cta__message:empty {
	display: none;
}

.qot-popup__consent {
	margin: var( --brand-space-3, 12px ) 0 0;
	font-size: var( --brand-text-xs, 0.8125rem );
	line-height: 1.4;
	color: var( --qot-pp-small, var( --brand-text-muted, #707070 ) );
}

.qot-popup__consent a,
.qot-popup__secondary a {
	color: inherit;
	text-decoration: underline;
}

.qot-popup__secondary {
	margin: var( --brand-space-3, 12px ) 0 0;
	font-size: var( --brand-text-sm, 0.875rem );
	color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) );
}

/* Theme hardening wins otherwise. qot-theme newsletter-tones.css paints every
 * .qot-newsletter-cta--inline navy with !important (a counter to the GoDaddy
 * Site Designer contrast layer), and that layer forces colour through
 * --dsgo-text-color. Inside the pop-up the campaign style must win, so these
 * declarations are !important under the #qot-popup ID and set
 * --dsgo-text-color to our own value. */
#qot-popup .qot-popup__cta {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var( --qot-pp-text, var( --brand-text-body, #404040 ) ) !important;
	--dsgo-text-color: var( --qot-pp-text, var( --brand-text-body, #404040 ) );
}

#qot-popup .qot-popup__headline,
#qot-popup .qot-newsletter-cta__headline {
	color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) ) !important;
	--dsgo-text-color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) );
}

#qot-popup .qot-popup__subcopy,
#qot-popup .qot-newsletter-cta__subcopy,
#qot-popup .qot-newsletter-cta__message {
	color: var( --qot-pp-text, var( --brand-text-body, #404040 ) ) !important;
	--dsgo-text-color: var( --qot-pp-text, var( --brand-text-body, #404040 ) );
}

#qot-popup .qot-newsletter-cta__email {
	background-color: #ffffff !important;
	border: 1px solid rgba( 27, 54, 93, 0.25 ) !important;
	border-radius: var( --brand-radius-md, 8px ) !important;
	color: #1B365D !important;
	--dsgo-text-color: #1B365D;
}

#qot-popup .qot-newsletter-cta__email::placeholder {
	color: #707070 !important;
	opacity: 1;
}

#qot-popup .qot-newsletter-cta__button,
#qot-popup .qot-popup__button {
	background-color: var( --qot-pp-button, var( --brand-primary, #1B365D ) ) !important;
	border: 0 !important;
	border-radius: var( --qot-pp-button-radius ) !important;
	color: var( --qot-pp-button-text, var( --brand-text-on-dark, #F5F5F5 ) ) !important;
	--dsgo-text-color: var( --qot-pp-button-text, var( --brand-text-on-dark, #F5F5F5 ) );
}

#qot-popup .qot-popup__consent {
	color: var( --qot-pp-small, var( --brand-text-muted, #707070 ) ) !important;
	--dsgo-text-color: var( --qot-pp-small, var( --brand-text-muted, #707070 ) );
}

#qot-popup .qot-popup__consent a,
#qot-popup .qot-popup__secondary,
#qot-popup .qot-popup__secondary a {
	color: inherit !important;
	--dsgo-text-color: inherit;
}

#qot-popup .qot-popup__secondary {
	color: var( --qot-pp-heading, var( --brand-primary, #1B365D ) ) !important;
}

/* Belt and braces: keep the label and honeypot hidden even if theme CSS is late. */
.qot-popup .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

#qot-popup .qot-newsletter-cta__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* The sticky bar steps aside while the card is open. */
.qot-popup-open [data-qot-newsletter="sticky"] {
	display: none !important;
}

@media ( max-width: 480px ) {
	.qot-popup {
		padding: 12px;
	}
	.qot-popup__card {
		padding: var( --brand-space-6, 32px ) var( --brand-space-4, 16px ) var( --brand-space-4, 16px );
	}
	.qot-popup__headline,
	#qot-popup .qot-newsletter-cta__headline {
		font-size: var( --brand-text-xl, 1.25rem );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.qot-popup:not( [hidden] ) .qot-popup__card {
		animation: qot-popup-in 0.2s ease-out;
	}
	@keyframes qot-popup-in {
		from { opacity: 0; transform: translateY( 8px ); }
		to { opacity: 1; transform: none; }
	}
}