/**
 * SERPsKit Community Form — Popup (Form 1) styles.
 *
 * Layout/positioning only. All colors, fonts, sizes are inlined on the
 * elements from settings so they match exactly between preview and frontend.
 *
 * Heavy use of !important on positioning so themes can't accidentally
 * break the full-screen overlay.
 */

/* ---------- Overlay / wrapper ---------- */

.scf-popup-overlay.scf-popup-mode {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2147483600 !important; /* max-ish */
	display: none !important;
	background: #fff;
	opacity: 0;
	transition: opacity .35s ease, transform .55s cubic-bezier(.6,.05,.28,1);
	box-sizing: border-box !important;
	overflow: hidden !important;
}
.scf-popup-overlay.scf-popup-mode.scf-is-open {
	display: block !important;
	opacity: 1;
}
.scf-popup-overlay.scf-popup-mode.scf-is-closing {
	transform: translateY(-100%) !important;
	opacity: 0;
}

/* Body lock while popup is open. */
body.scf-popup-open {
	overflow: hidden !important;
}

/* Editor preview mode (NOT full-screen). */
.scf-popup-overlay.scf-preview-mode {
	position: relative;
	width: 100%;
	min-height: 520px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
	display: block;
}

.scf-popup-wrap {
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ---------- Background slideshow ---------- */

.scf-popup-bg {
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	background: #e8e3d5;
	overflow: hidden;
	z-index: 0;
}
.scf-popup-bg-slide {
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.scf-popup-bg-slide.scf-bg-active {
	opacity: 1;
}

/* ---------- Inner content (centered) ---------- */

.scf-popup-inner {
	position: relative !important;
	z-index: 2 !important;
	width: 100%;
	height: 100%;
	/* Generous bottom padding to reserve room for the absolutely positioned
	   close circle (which is pinned to the bottom of the popup). */
	padding: 24px 20px 160px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	text-align: center !important;
	overflow-y: auto;
}

.scf-popup-overlay .scf-welcome-text,
.scf-popup-overlay .scf-site-name,
.scf-popup-overlay .scf-subscribe-text {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.scf-welcome-text {
	margin: 0;
	padding: 0;
	line-height: 1;
	font-weight: 700;
}
.scf-site-name {
	margin: 0;
	padding: 0;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -.01em;
}

/* ---------- Search box ---------- */

.scf-search-form {
	width: 100%;
	max-width: 100%;
	display: flex !important;
	justify-content: center !important;
	margin: 0;
	padding: 0;
}
.scf-search-box {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	padding: 0 18px;
}
.scf-search-input {
	flex: 1 1 auto !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	padding: 0 36px 0 6px !important;
	height: 100% !important;
	line-height: 1;
	color: #fff;
	font-family: inherit;
	box-shadow: none !important;
	margin: 0 !important;
}
.scf-search-input::placeholder {
	color: inherit;
	opacity: 1;
}
.scf-search-input::-webkit-search-cancel-button { display: none; }
.scf-search-btn {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 4px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
}

/* ---------- Subscribe heading ---------- */

.scf-subscribe-text {
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-weight: 700;
}

/* ---------- Subscribe form ---------- */

.scf-subscribe-form {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
	margin: 0;
	padding: 0;
}
.scf-subscribe-form input[type="text"],
.scf-subscribe-form input[type="email"] {
	display: block !important;
	box-sizing: border-box !important;
	padding: 0 14px !important;
	outline: 0;
	line-height: 1;
	box-shadow: none !important;
}
.scf-subscribe-form input::placeholder {
	color: inherit;
	opacity: .85;
}
.scf-submit-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	border: 0 !important;
	background-color: var(--scf-btn-bg, #FFC71D) !important;
	color: var(--scf-btn-color, #fff) !important;
	transition: background-color .2s ease, color .2s ease;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0 14px !important;
}
.scf-submit-btn:hover,
.scf-submit-btn:focus-visible {
	background-color: var(--scf-btn-hover, #FFB800) !important;
	color: var(--scf-btn-hover-color, #fff) !important;
}
.scf-form-message {
	margin-top: 12px;
	min-height: 1em;
	font-size: 16px;
}
.scf-form-message.scf-error { color: #ff6b6b !important; }

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

.scf-close-circle-wrap {
	/* Pinned to the bottom of the popup, centered horizontally — so it stays
	   at the bottom regardless of how much content is above it. The inline
	   margin styles in the HTML are intentionally overridden here. */
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 30px !important;
	margin: 0 auto !important;
	width: 100%;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	z-index: 3;
}
.scf-close-label { line-height: 1.2; margin: 0; }
.scf-close-circle {
	border: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
	transition: transform .2s ease;
	padding: 0 !important;
}
.scf-close-circle:hover { transform: translateY(2px); }

/* ---------- Mobile responsive (proportional scale) ---------- */

@media (max-width: 768px) {
	.scf-popup-overlay.scf-popup-mode .scf-popup-inner {
		padding: 16px 12px 120px !important;
	}
	.scf-popup-overlay .scf-close-circle-wrap {
		bottom: 20px !important;
	}
	.scf-popup-overlay .scf-welcome-text { font-size: 20px !important; }
	.scf-popup-overlay .scf-site-name    { font-size: 44px !important; line-height: 1.05; }
	.scf-popup-overlay .scf-subscribe-text { font-size: 20px !important; line-height: 1.25; }

	.scf-popup-overlay .scf-search-box  { width: 92% !important; max-width: 480px !important; height: 46px !important; }
	.scf-popup-overlay .scf-search-input { font-size: 14px !important; }

	.scf-popup-overlay .scf-subscribe-form input[type="text"],
	.scf-popup-overlay .scf-subscribe-form input[type="email"],
	.scf-popup-overlay .scf-submit-btn {
		width: 92% !important;
		max-width: 420px !important;
		font-size: 15px !important;
		height: 42px !important;
	}
	.scf-popup-overlay .scf-close-circle {
		width: 50px !important;
		height: 50px !important;
	}
	.scf-popup-overlay .scf-close-label { font-size: 13px !important; }
}

@media (max-width: 480px) {
	.scf-popup-overlay .scf-welcome-text { font-size: 18px !important; }
	.scf-popup-overlay .scf-site-name    { font-size: 36px !important; }
	.scf-popup-overlay .scf-subscribe-text { font-size: 16px !important; }
}