/**
 * Smartland Marketing Popup — front-end styles.
 *
 * This stylesheet only ever loads inside the popup's own shadow root
 * (see templates/popup.php and popup.js) — never in the page's light
 * DOM. Shadow-tree style rules cannot leak out to the rest of the
 * page, and no selector from the theme, a page builder such as
 * Elementor, or any other plugin can reach in and override them,
 * regardless of specificity or !important.
 *
 * The :host reset below closes the one remaining gap: a handful of
 * CSS properties (font-family, color, line-height, etc.) normally
 * inherit from an element's light-DOM ancestors even across a shadow
 * boundary. Resetting `all` on :host stops that inheritance chain at
 * the boundary, so the popup's appearance never depends on the host
 * page's global typography or color styles.
 *
 * All theme-dependent values (colors, widths, radius, z-index) arrive
 * as CSS custom properties scoped to #smp-popup-overlay by an inline
 * <style> block printed alongside the markup. The declarations below
 * carry sensible Smartland Gold fallbacks so the popup still renders
 * correctly if those custom properties are ever missing.
 */

:host {
	all: initial;
	display: contents;
}

.smp-popup-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var( --smp-overlay-color, rgba( 0, 0, 0, 0.6 ) );
	z-index: var( --smp-z-index, 999999 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	box-sizing: border-box;
}

.smp-popup-overlay[hidden] {
	display: none;
}

.smp-popup-overlay.smp-is-visible {
	opacity: 1;
	visibility: visible;
}

.smp-popup-overlay.smp-no-fade {
	transition: none;
}

.smp-popup {
	width: var( --smp-desktop-width, 520px );
	max-width: 92vw;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	background: var( --smp-bg-color, #ffffff );
	border-radius: var( --smp-border-radius, 12px );
	box-shadow: 0 25px 60px -15px rgba( 0, 0, 0, 0.35 ), 0 10px 25px -10px rgba( 0, 0, 0, 0.2 );
	padding: 48px 40px 40px;
	box-sizing: border-box;
	transform: translateY( 16px ) scale( 0.98 );
	transition: transform 0.3s ease;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.smp-popup-overlay.smp-is-visible .smp-popup {
	transform: translateY( 0 ) scale( 1 );
}

.smp-popup-overlay.smp-no-fade .smp-popup {
	transition: none;
}

.smp-popup:focus {
	outline: none;
}

.smp-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var( --smp-text-color, #4a4a4a );
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.smp-popup-close:hover,
.smp-popup-close:focus-visible {
	background-color: rgba( 0, 0, 0, 0.06 );
	color: var( --smp-heading-color, #1a1a1a );
}

.smp-popup-close:focus-visible {
	outline: 2px solid var( --smp-button-color, #c9a227 );
	outline-offset: 2px;
}

.smp-popup-body {
	color: var( --smp-text-color, #4a4a4a );
	font-size: 16px;
	line-height: 1.65;
}

.smp-popup-body > *:last-child {
	margin-bottom: 0;
}

.smp-popup-body h1,
.smp-popup-body h2,
.smp-popup-body h3,
.smp-popup-body h4,
.smp-popup-body h5,
.smp-popup-body h6 {
	color: var( --smp-heading-color, #1a1a1a );
	margin: 0 0 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.smp-popup-body h1 {
	font-size: 32px;
}

.smp-popup-body h2 {
	font-size: 26px;
}

.smp-popup-body h3 {
	font-size: 20px;
}

.smp-popup-body p {
	margin: 0 0 16px;
}

.smp-popup-body a {
	color: var( --smp-button-color, #c9a227 );
	text-decoration: underline;
}

.smp-popup-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 0 0 16px;
}

.smp-popup-body ul,
.smp-popup-body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.smp-popup-body blockquote {
	margin: 0 0 16px;
	padding-left: 16px;
	border-left: 3px solid var( --smp-button-color, #c9a227 );
	font-style: italic;
}

/**
 * Promo layout helpers — optional classes an editor can add to
 * content (via the editor's Text/Code view) for a more polished
 * "limited-time offer" style popup.
 */

.smp-popup-body .smp-popup-eyebrow {
	display: block;
	text-align: center;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --smp-button-color, #c9a227 );
}

.smp-popup-body .smp-popup-headline {
	text-align: center;
	margin: 0 0 24px;
	font-size: 24px;
	line-height: 1.35;
	color: var( --smp-heading-color, #1a1a1a );
}

.smp-popup-body .smp-popup-accent {
	color: var( --smp-button-color, #c9a227 );
}

.smp-popup-body ul.smp-popup-checklist {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.smp-popup-body ul.smp-popup-checklist li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 15px;
}

.smp-popup-body ul.smp-popup-checklist li:last-child {
	margin-bottom: 0;
}

.smp-popup-body ul.smp-popup-checklist li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --smp-button-color, #c9a227 );
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
}

.smp-popup-body .smp-popup-note {
	margin: 0 0 16px;
	padding: 14px 18px;
	background: rgba( 201, 162, 39, 0.08 );
	border-radius: calc( var( --smp-border-radius, 12px ) * 0.5 );
	text-align: center;
	font-size: 14px;
}

.smp-popup-body .smp-popup-meta {
	margin: 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --smp-text-color, #4a4a4a );
	opacity: 0.75;
}

.smp-popup-cta {
	margin-top: 28px;
	text-align: center;
}

.smp-popup-button {
	display: inline-block;
	padding: 14px 32px;
	background: var( --smp-button-color, #c9a227 );
	color: var( --smp-button-text-color, #ffffff );
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	border-radius: calc( var( --smp-border-radius, 12px ) * 0.5 );
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.smp-popup-button:hover,
.smp-popup-button:focus-visible {
	background: var( --smp-button-hover-color, #a9861d );
	transform: translateY( -1px );
}

.smp-popup-button:focus-visible {
	outline: 2px solid var( --smp-button-hover-color, #a9861d );
	outline-offset: 3px;
}

/*
 * Background scroll locking is applied directly to document.body's
 * inline style by popup.js, not via a class here: this stylesheet
 * only ever loads inside the popup's shadow root, and shadow-scoped
 * CSS cannot select <body> — an ancestor outside that shadow tree.
 */

@media ( max-width: 480px ) {
	.smp-popup {
		padding: 36px 24px 28px;
	}

	.smp-popup-body h1 {
		font-size: 26px;
	}

	.smp-popup-body h2 {
		font-size: 22px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.smp-popup-overlay,
	.smp-popup {
		transition: none;
	}
}