/* ==========================================================================
   Newsletter popup (Hustle module 7, "Updates")
   --------------------------------------------------------------------------
   Hustle ships almost nothing visual of its own: the card, the mask, even the
   fixed positioning all come from the CSS it generates out of the module's
   design settings. Those rules are class-based, so everything here is scoped
   to the module's id and wins without a single !important.

   If the popup is ever rebuilt in Hustle it gets a new module id and these
   rules stop matching - the popup would fall back to Hustle's own look, which
   is obvious on sight. Change the three #hustle-popup-id-7 selectors below to
   the new number and it is dressed again.
   ========================================================================== */

/* `display` is deliberately left alone here. Hustle keeps the popup closed
   with display:none and opens it by changing that, so an ID-level display of
   our own would pin it open - invisible behind opacity:0, but still a
   full-screen box swallowing every click on the page. The card is centred by
   positioning it rather than by making this a flex container. */
#hustle-popup-id-7 {
	--sa-pop-navy: #132653;
	--sa-pop-red: #AF1D2B;
	--sa-pop-text: #5E6778;
	--sa-pop-line: #DADEE7;
	--sa-pop-display: 'Orbitron', 'Inter', system-ui, sans-serif;
	--sa-pop-body: 'Roboto', system-ui, -apple-system, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 1000002;
	overscroll-behavior: contain;
}

#hustle-popup-id-7 * { box-sizing: border-box; }

/* ------------------------------------------------------------------- Mask */

#hustle-popup-id-7 .hustle-popup-mask {
	position: fixed;
	inset: 0;
	background: rgba(12, 38, 75, .55);
	backdrop-filter: blur(3px);
	cursor: pointer;
}

/* ------------------------------------------------------------------- Card */

#hustle-popup-id-7 .hustle-popup-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, calc(100% - 48px));
	max-width: none;
	max-height: calc(100vh - 48px);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: none;
	box-shadow: none;
}

#hustle-popup-id-7 .hustle-optin,
#hustle-popup-id-7 .hustle-layout {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

#hustle-popup-id-7 .hustle-main-wrapper {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

#hustle-popup-id-7 .hustle-layout-body {
	margin: 0;
	padding: 36px 32px 32px;
	border: 0;
	background: none;
}

/* Hustle boxes the logo and wording in a 2px black rectangle inset by 58px,
   which is what the module's design settings ask for. Both go. */
#hustle-popup-id-7 .hustle-layout-content {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ Close */

#hustle-popup-id-7 .hustle-button-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--sa-pop-line);
	border-radius: 50%;
	background: #fff;
	color: var(--sa-pop-navy);
	font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
#hustle-popup-id-7 button.hustle-button-close.has-background,
#hustle-popup-id-7 button.hustle-button-close {
	background: #fff;
	color: var(--sa-pop-navy);
}
#hustle-popup-id-7 button.hustle-button-close:hover {
	background: var(--sa-pop-navy);
	color: #fff;
}
/* Hustle puts focus on this button as the popup opens, so a filled focus
   state would read as the resting look. A ring instead. */
#hustle-popup-id-7 button.hustle-button-close:focus-visible {
	outline: 2px solid var(--sa-pop-navy);
	outline-offset: 2px;
}
/* The circle stays 36px; a thumb gets 44 to aim at. */
#hustle-popup-id-7 .hustle-button-close::after {
	content: '';
	position: absolute;
	inset: -4px;
}

/* ------------------------------------------------------------------- Logo */

/* Hustle lays the feature image out absolutely inside its holder so its own
   fit and position settings can move it around, which means the holder needs a
   height of its own or the logo has no box at all. */
#hustle-popup-id-7 .hustle-image {
	position: relative;
	display: block;
	width: 100%;
	height: 96px; /* the logo file is square with built-in padding; 58px made it tiny */
	margin: 0 auto 18px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}
#hustle-popup-id-7 .hustle-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center center;
}

/* ---------------------------------------------------------------- Wording */

#hustle-popup-id-7 .hustle-content {
	margin: 0;
	padding: 0;
	background: none;
}
#hustle-popup-id-7 .hustle-content-wrap { padding: 0; }

#hustle-popup-id-7 .hustle-title {
	margin: 0;
	padding: 0;
	font-family: var(--sa-pop-display);
	font-size: 21px;
	font-weight: 700;
	line-height: 29px;
	letter-spacing: .4px;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--sa-pop-navy);
}

#hustle-popup-id-7 .hustle-subtitle {
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--sa-pop-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 23px;
	text-align: center;
	color: var(--sa-pop-text);
}

#hustle-popup-id-7 .hustle-group-content {
	margin: 10px 0 0;
	font-family: var(--sa-pop-body);
	font-size: 15px;
	line-height: 23px;
	text-align: center;
	color: var(--sa-pop-text);
}

/* ------------------------------------------------------------------- Form */

#hustle-popup-id-7 .hustle-layout-form {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

#hustle-popup-id-7 .hustle-form-fields {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
}

#hustle-popup-id-7 .hustle-field {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Matched by what the field is not, rather than by type="text": Hustle prints
   the name field with no type attribute at all, so an [type="text"] selector
   skips it and it alone kept the plugin's grey box. */
#hustle-popup-id-7 .hustle-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
#hustle-popup-id-7 .hustle-field textarea,
#hustle-popup-id-7 .hustle-field select {
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--sa-pop-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	font-family: var(--sa-pop-body);
	font-size: 15px;
	line-height: 22px;
	color: #0C0407;
	transition: border-color .15s ease;
}
#hustle-popup-id-7 .hustle-field textarea { height: auto; min-height: 90px; }

#hustle-popup-id-7 .hustle-field input::placeholder,
#hustle-popup-id-7 .hustle-field textarea::placeholder {
	color: var(--sa-pop-text);
	opacity: 1;
}
#hustle-popup-id-7 .hustle-field input:focus,
#hustle-popup-id-7 .hustle-field textarea:focus,
#hustle-popup-id-7 .hustle-field select:focus {
	border-color: var(--sa-pop-navy);
	outline: 2px solid rgba(19, 38, 83, .3);
	outline-offset: 1px;
}
#hustle-popup-id-7 .hustle-field.hustle-field-error input,
#hustle-popup-id-7 .hustle-field input.hustle-error { border-color: var(--sa-pop-red); }

#hustle-popup-id-7 .hustle-button-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin: 16px 0 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 9999px;
	background: var(--sa-pop-red);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
	font-family: var(--sa-pop-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: .2px;
	text-transform: none;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
#hustle-popup-id-7 .hustle-button-submit:hover {
	background: #951825;
	transform: translateY(-1px);
}
#hustle-popup-id-7 .hustle-button-submit:focus-visible {
	outline: 2px solid var(--sa-pop-navy);
	outline-offset: 2px;
}

#hustle-popup-id-7 .hustle-error-message {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px solid rgba(175, 29, 43, .3);
	border-radius: 10px;
	background: rgba(175, 29, 43, .07);
	font-family: var(--sa-pop-body);
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: var(--sa-pop-red);
}
#hustle-popup-id-7 .hustle-error-message:empty { display: none; }

/* --------------------------------------------------- "Not interested" link */

/* Hustle prints this under the card, loose on the mask, where it reads as a
   stray line of text. It belongs inside, below the button. */
#hustle-popup-id-7 .hustle-layout-footer {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}
#hustle-popup-id-7 .hustle-nsa-link {
	margin: 0;
	padding: 0;
	font-family: var(--sa-pop-body);
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	color: var(--sa-pop-text);
}
#hustle-popup-id-7 .hustle-nsa-link a {
	border: 0;
	background: none;
	font-size: inherit;
	color: var(--sa-pop-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
#hustle-popup-id-7 .hustle-nsa-link a:hover { color: var(--sa-pop-navy); }

/* The footer is lifted into the card, so the card has to leave room for it. */
#hustle-popup-id-7 .hustle-layout-body { padding-bottom: 60px; }

/* ---------------------------------------------------------------- Success */

#hustle-popup-id-7 .hustle-success {
	padding: 44px 32px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
	text-align: center;
}
#hustle-popup-id-7 .hustle-icon-check {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(4, 120, 87, .1);
	color: #047857;
	font-size: 24px;
}
#hustle-popup-id-7 .hustle-success-content,
#hustle-popup-id-7 .hustle-success-content p {
	margin: 0;
	font-family: var(--sa-pop-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-pop-navy);
}

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

@media (max-width: 560px) {
	#hustle-popup-id-7 .hustle-popup-content { width: calc(100% - 24px); max-height: calc(100vh - 24px); }
	#hustle-popup-id-7 .hustle-main-wrapper { border-radius: 20px; }
	#hustle-popup-id-7 .hustle-layout-body { padding: 30px 20px 58px; }
	#hustle-popup-id-7 .hustle-layout-footer { left: 20px; right: 20px; bottom: 20px; }
	#hustle-popup-id-7 .hustle-title { font-size: 20px; line-height: 27px; }
	#hustle-popup-id-7 .hustle-subtitle { font-size: 14px; line-height: 21px; }
	#hustle-popup-id-7 .hustle-image { height: 76px; margin-bottom: 14px; }
	#hustle-popup-id-7 .hustle-button-close { top: 12px; right: 12px; }
}

/* A short phone in landscape has no room for a centred card, so it hangs from
   the top and scrolls instead. */
@media (max-height: 520px) {
	#hustle-popup-id-7 .hustle-popup-content {
		top: 12px;
		transform: translateX(-50%);
		max-height: calc(100vh - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#hustle-popup-id-7 .hustle-button-submit,
	#hustle-popup-id-7 .hustle-button-close,
	#hustle-popup-id-7 .hustle-field input { transition: none; }
	#hustle-popup-id-7 .hustle-button-submit:hover { transform: none; }
}