/* Homepage newsletter popup - promo (#hfd-nlp) and manual signup (#hfd-nlp2).
 *
 * z-index sits BELOW the age gate (999999) on purpose: the gate must always
 * win. It is above Elementor (100000 / 900000) so the panel is never buried.
 * The cookie banner is higher still (10202020) and deliberately not out-
 * stacked - popup.js waits for it instead, so consent is never obscured.
 *
 * Brand: Higher Fire purple #2A0035 / #7647A9, matching the child theme.
 */
.hfd-nlp {
	position: fixed;
	inset: 0;
	z-index: 990000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity .2s ease;
}
.hfd-nlp.is-open { opacity: 1; }
.hfd-nlp[hidden] { display: none !important; }
/* The manual dialog opens as the promo closes, so it needs the higher layer
 * for the 220ms the two overlap. */
.hfd-nlp--step2 { z-index: 990001; }

.hfd-nlp__backdrop { position: absolute; inset: 0; background: rgba(12,0,16,.68); }

.hfd-nlp__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 34px 26px 26px;
	border-radius: 14px;
	background: #fff;
	color: #2A0035;
	text-align: center;
	box-shadow: 0 18px 50px rgba(0,0,0,.45);
	border-top: 5px solid #7647A9;
	transform: translateY(10px) scale(.98);
	transition: transform .2s ease;
	/* The live theme capitalises text in some containers - see CLAUDE.md 8a.
	 * Without this, "sales@higherfiredirect.cc" renders as
	 * "Sales@Higherfiredirect.Cc". It will NOT reproduce on staging. */
	text-transform: none;
}
.hfd-nlp__panel * { text-transform: none; }
.hfd-nlp.is-open .hfd-nlp__panel { transform: none; }

.hfd-nlp__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #7647A9;
	font-size: 30px;
	line-height: 40px;
	cursor: pointer;
	border-radius: 50%;
}
.hfd-nlp__close:hover { background: #F3EDF9; color: #2A0035; }
.hfd-nlp__close:focus-visible { outline: 3px solid #7647A9; outline-offset: 2px; }

.hfd-nlp__title {
	margin: 0 0 6px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .4px;
	color: #2A0035;
}
.hfd-nlp__sub {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #7647A9;
}
.hfd-nlp__desc {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.55;
	color: #44364d;
}

/* --- the promo's call to action ----------------------------------- */
.hfd-nlp__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 15px 18px;
	border: 0;
	border-radius: 8px;
	background: #7647A9;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .6px;
	cursor: pointer;
	transition: background .15s ease;
}
.hfd-nlp__cta:hover { background: #5E3689; }
.hfd-nlp__cta:focus-visible { outline: 3px solid #2A0035; outline-offset: 2px; }

/* --- the manual signup dialog ------------------------------------- */
.hfd-nlp__email {
	margin: 0 0 14px;
	padding: 14px 12px;
	border: 2px dashed #CDB6E6;
	border-radius: 8px;
	background: #F7F2FC;
	font-size: 17px;
	font-weight: 700;
	color: #2A0035;
	/* An address must be selectable and must never be broken mid-word by a
	 * hyphen the visitor would then copy. */
	word-break: break-all;
	overflow-wrap: anywhere;
	hyphens: none;
	user-select: all;
	-webkit-user-select: all;
}
/* When the clipboard is unavailable the address becomes the thing to act on. */
.hfd-nlp__email.needs-manual-copy {
	border-style: solid;
	border-color: #7647A9;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(118,71,169,.18);
	font-size: 19px;
}

.hfd-nlp__status {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}
.hfd-nlp__status[hidden] { display: none !important; }
.hfd-nlp__status.is-ok     { background: #E7F7EC; color: #146C2E; }
.hfd-nlp__status.is-manual { background: #FDF3E3; color: #7A4A06; font-weight: 600; }
.hfd-nlp__status.is-ok::before { content: "\2713\00a0"; }

.hfd-nlp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}
.hfd-nlp__btn {
	flex: 1 1 140px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 16px;
	border: 2px solid #7647A9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .5px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.hfd-nlp__btn--ghost { background: #fff;    color: #7647A9; }
.hfd-nlp__btn--ghost:hover { background: #F3EDF9; }
.hfd-nlp__btn--solid { background: #7647A9; color: #fff; }
.hfd-nlp__btn--solid:hover,
.hfd-nlp__btn--solid:focus { background: #5E3689; color: #fff; }
.hfd-nlp__btn:focus-visible { outline: 3px solid #2A0035; outline-offset: 2px; }

.hfd-nlp__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b5f73;
}

/* --- narrow phones ------------------------------------------------ */
@media (max-width: 400px) {
	.hfd-nlp { padding: 10px; }
	.hfd-nlp__panel { padding: 30px 16px 20px; border-radius: 12px; }
	.hfd-nlp__title { font-size: 20px; }
	.hfd-nlp__sub { font-size: 15px; }
	.hfd-nlp__desc { font-size: 14px; }
	.hfd-nlp__email { font-size: 15px; padding: 12px 8px; }
	/* 320px cannot fit two 140px buttons plus a 10px gap and 32px of panel
	 * padding, so they stack rather than squeezing below a usable width. */
	.hfd-nlp__actions { flex-direction: column; }
	.hfd-nlp__btn { flex: 1 1 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.hfd-nlp, .hfd-nlp__panel { transition: none; }
	.hfd-nlp__panel { transform: none; }
}