/* ==========================================================
   BTSD Landing Page — scoped entirely under .btsd-lp.
   No selector here ever targets a bare element (body, h1, p, a, ...):
   every rule starts with .btsd-lp so nothing leaks onto the rest of
   the site and nothing from the theme leaks in unexpectedly.

   --brand / --glow-1 / --glow-2 / --pop / --pop-ink / --pop-glow are
   set inline per-post on the .btsd-lp wrapper (see templates/landing-single.php),
   never on :root, so they cannot affect any other page.

   Body text keeps the theme's own font ("Outfit", already loaded
   site-wide by Elementor's global typography) via --btsd-ui below —
   no new font is requested for it. The only self-hosted font in this
   plugin (Anton, assets/fonts/) is used exclusively for the offer
   amount and the step numbers, per the brief; everything else that
   needs a "display" feel reuses --btsd-ui at heavier weight instead.
   ========================================================== */

@font-face {
	font-family: 'BTSD Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'BTSD Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF;
}

.btsd-lp {
	--btsd-ui: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--btsd-disp: "BTSD Anton", Impact, "Arial Narrow", sans-serif;

	--ink: #0A0A0C;
	--ink-2: #121217;
	--line: rgba(255,255,255,.085);
	--line-2: rgba(255,255,255,.17);
	--text: #FFFFFF;
	--text-2: rgba(255,255,255,.66);
	--text-3: rgba(255,255,255,.42);
	--btsd-sticky-h: 78px;

	box-sizing: border-box;
	background: var(--ink);
	color: var(--text);
	font-family: var(--btsd-ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	padding: 0 0 32px;
}
.btsd-lp *,
.btsd-lp *::before,
.btsd-lp *::after {
	box-sizing: border-box;
}
.btsd-lp.btsd-lp--has-sticky {
	padding-bottom: calc(var(--btsd-sticky-h) + env(safe-area-inset-bottom));
}
.btsd-lp a {
	color: inherit;
}
.btsd-lp :focus-visible {
	outline: 3px solid var(--pop);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------------------------- HERO ---------------------------- */
.btsd-lp-hero {
	position: relative;
	isolation: isolate;
	text-align: center;
	padding: 40px 20px 28px;
	overflow: hidden;
}
.btsd-lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(88% 58% at 50% 8%, var(--glow-1), transparent 63%),
		radial-gradient(75% 45% at 50% 104%, var(--glow-2), transparent 72%),
		var(--ink);
}
/*
 * ".btsd-lp .btsd-lp-title" (not just ".btsd-lp-title"): Elementor's kit
 * CSS ships ".elementor-kit-184743 h1" at 0,1,1, which beat a lone 0,1,0
 * class outright — this is why every earlier font-size edit here had no
 * visible effect at all, the rule was never winning the cascade. Nesting
 * under the wrapper (0,2,0) fixes it for real, no !important needed.
 */
.btsd-lp .btsd-lp-title {
	font-family: var(--btsd-ui);
	font-weight: 800;
	font-size: clamp(21px, 4.6vw, 28px);
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
	margin: 0 auto;
	max-width: 720px;
}
.btsd-lp-metarow {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--text-3);
	text-transform: uppercase;
}
.btsd-lp-featured-image {
	margin: 24px auto 0;
	max-width: 780px;
	border-radius: 16px;
	overflow: hidden;
}
.btsd-lp-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------- CONTENT --------------------------- */
.btsd-lp-content {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 20px 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-2);
}
.btsd-lp-content > p:first-of-type {
	font-size: 18px;
	color: var(--text);
}
/* Same reason as .btsd-lp-title above: kit CSS also ships h2/h3 rules
   at the same specificity as ".btsd-lp-content h2" would tie on, so
   this nests one level deeper to win outright instead of relying on
   stylesheet load order. */
.btsd-lp .btsd-lp-content h2,
.btsd-lp .btsd-lp-content h3 {
	color: var(--text);
	font-family: var(--btsd-ui);
	font-weight: 700;
	line-height: 1.2;
}
.btsd-lp-content a:not(.btsd-lp-cta) {
	color: var(--brand);
	text-decoration: underline;
}
.btsd-lp-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* --------------------------- PROMO BLOCK --------------------------- */
.btsd-lp-promo {
	max-width: 640px;
	margin: 28px auto;
	padding: 28px 22px 26px;
	border-radius: 20px;
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% -10%, var(--glow-1), transparent 60%),
		var(--ink-2);
	border: 1px solid var(--line-2);
}
.btsd-lp-promo__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.btsd-lp-promo__logo img {
	max-height: 46px;
	width: auto;
}
.btsd-lp-promo__mark {
	font-family: var(--btsd-ui);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.btsd-lp-promo__condition {
	margin: 0;
	color: var(--text-2);
	font-size: 15px;
	max-width: 32ch;
}
.btsd-lp-promo__amount {
	font-family: var(--btsd-disp);
	font-weight: 400;
	color: var(--pop);
	font-size: clamp(64px, 18vw, 110px);
	line-height: .85;
	margin: 16px 0 0;
	text-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.btsd-lp-promo__expired-msg {
	margin: 16px 0 0;
	font-weight: 600;
	color: var(--text-2);
}
.btsd-lp-promo--expired {
	filter: grayscale(1);
	opacity: .72;
}

.btsd-lp-countdown {
	margin: 16px 0 0;
	font-family: var(--btsd-ui);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--text-2);
}

.btsd-lp-steps {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	text-align: left;
}
.btsd-lp-steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 14px;
	padding: 13px 0;
	border-top: 1px solid var(--line);
}
.btsd-lp-steps li:first-child {
	border-top: none;
	padding-top: 0;
}
.btsd-lp-steps__n {
	font-family: var(--btsd-disp);
	font-size: 26px;
	line-height: 1;
	color: var(--brand);
	min-width: 28px;
}
.btsd-lp-steps__t {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-2);
}

.btsd-lp-code-row {
	margin: 20px 0 0;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	border: 1px solid var(--line-2);
	border-left: 3px solid var(--brand);
	border-radius: 12px;
	padding: 12px 12px 12px 16px;
}
.btsd-lp-code-row__val {
	flex: 1;
	text-align: left;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .08em;
}
/*
 * !important below: the site has a global reset targeting the bare
 * <button> element (found live — it sets background-color and color to
 * the same accent gold, which made this button's label invisible) that
 * loads after this stylesheet and ties on specificity, so it wins the
 * cascade without !important. Scoped to this one class, not a blanket
 * override.
 */
.btsd-lp-btn-copy {
	flex: none;
	background: transparent !important;
	border: 1px solid var(--line-2) !important;
	color: var(--text) !important;
	font-family: var(--btsd-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
}
.btsd-lp-btn-copy[data-copied] {
	background: var(--pop) !important;
	border-color: var(--pop) !important;
	color: var(--pop-ink) !important;
}

/*
 * Doubled up as ".btsd-lp .btsd-lp-cta" (not just "!important") because
 * Elementor's site-wide kit CSS ships ".elementor-kit-184743 a { color;
 * font-family }" on every <a> — specificity 0,1,1, which beats a lone
 * 0,1,0 class. Nesting under the wrapper we already always render inside
 * pushes us to 0,2,0 and wins on specificity alone, no !important needed.
 */
.btsd-lp .btsd-lp-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
	width: 100%;
	background: var(--pop);
	color: var(--pop-ink);
	font-family: var(--btsd-ui);
	font-weight: 700;
	font-size: 16.5px;
	text-decoration: none;
	padding: 16px 24px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 12px 30px -10px var(--pop-glow);
	transition: transform .12s ease, box-shadow .12s ease;
}
/*
 * The same kit CSS also ships "...a:hover { color: secondary-orange }".
 * Adding :hover here pushes our own specificity past it (0,3,0 vs its
 * 0,2,1) without !important, so the label stays readable on hover
 * instead of fading to orange-on-gold.
 */
.btsd-lp .btsd-lp-cta:hover {
	color: var(--pop-ink);
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -10px var(--pop-glow);
}
.btsd-lp .btsd-lp-cta--disabled {
	background: var(--line-2);
	color: var(--text-3);
	cursor: not-allowed;
	box-shadow: none;
}
.btsd-lp-cta-block {
	max-width: 640px;
	margin: 36px auto 0;
	padding: 0 20px;
	text-align: center;
}

.btsd-lp-terms-strip {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: rgba(0,0,0,.35);
	border: 1px solid var(--line-2);
	border-radius: 14px;
	overflow: hidden;
}
.btsd-lp-terms-strip div {
	padding: 12px 8px;
	text-align: center;
	border-left: 1px solid var(--line);
}
.btsd-lp-terms-strip div:first-child {
	border-left: none;
}
.btsd-lp-terms-strip__k {
	display: block;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 3px;
}
.btsd-lp-terms-strip__v {
	display: block;
	font-weight: 700;
	font-size: 14px;
}

/* --------------------------- STICKY BAR --------------------------- */
.btsd-lp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(10,10,12,.94);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line-2);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	transform: translateY(115%);
	transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.btsd-lp-sticky.is-on {
	transform: translateY(0);
}
.btsd-lp-sticky .btsd-lp-cta {
	margin-top: 0;
}

@media (min-width: 600px) {
	.btsd-lp-terms-strip div {
		padding: 14px 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.btsd-lp-sticky,
	.btsd-lp .btsd-lp-cta {
		transition: none;
	}
}

/* ==========================================================
   Theme-chrome exceptions — the only rules in this file that
   don't start with .btsd-lp. Gated on body.btsd-lp-page, which
   the plugin only adds when the flag is on for the post being
   viewed, so nothing here can ever reach any other page.

   The header ad banner (Elementor container "9f4a5a4") is part
   of the site's global Theme-Builder header template, rendered
   by header.php before our wrapper even starts, so it can't be
   reached from inside .btsd-lp and can't be removed by editing
   the theme. Elementor renders it with its own layout classes
   (.e-con / .e-flex, sometimes backed by inline "display" from
   its own CSS generation), which need !important to be beaten
   reliably without touching Elementor's files.
   ========================================================== */
body.btsd-lp-page .elementor-element-9f4a5a4 {
	display: none !important;
}