/**
 * Reference Code Popup Styles - 100% Fully Scoped & Conflict-Proof
 *
 * @package TwentyTwentyFour_Child
 */

/* ==========================================
 * 1. Neutralize Popup Maker Plugin Defaults
 * ========================================== */
 
 html.pum-open .mysticky-welcomebar-fixed-wrap {
    pointer-events: none !important;
}

.pum-close,
button.pum-close,
.pum-container .pum-close,
.popmake-close,
.pum-theme-default .pum-close {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.pum-overlay,
.popmake-overlay,
.pum-theme-77,
.pum-theme-default-theme,
#pum-108.pum-overlay {
	background: transparent !important;
	background-color: transparent !important;
}

.pum-container {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: auto !important;
}

/* ==========================================
 * 2. Scoped Reset & Isolation
 * ========================================== */
.popup-overlay,
.popup-overlay *,
.popup-overlay *::before,
.popup-overlay *::after {
	box-sizing: border-box !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================
 * 3. Fullscreen Dark Overlay Backdrop
 * ========================================== */
.popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(0, 0, 0, 0.65) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999999 !important;
	margin: 0 !important;
	padding: 20px !important;
	overflow-y: auto !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

.popup-overlay.rcp-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ==========================================
 * 4. Popup Card Container (Centered Modal Box)
 * ========================================== */
.popup-overlay .popup-box,
.popup-overlay .popup {
	position: relative !important;
	width: 100% !important;
	max-width: 980px !important;
	aspect-ratio: 1735 / 851 !important;
	margin: auto !important;
	overflow: hidden !important;
	border-radius: 12px !important;
	background-color: #e5edcf !important;
	background-image: radial-gradient(
		circle at 72% 42%,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(246, 248, 231, 0.92) 28%,
		rgba(229, 237, 207, 0.96) 100%
	) !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

.popup-overlay .popup-box::before,
.popup-overlay .popup::before {
	content: "" !important;
	position: absolute !important;
	left: -80px !important;
	bottom: -80px !important;
	width: 360px !important;
	height: 280px !important;
	border: 2px solid rgba(92, 119, 69, 0.17) !important;
	border-radius: 50% !important;
	transform: rotate(12deg) !important;
	z-index: 0 !important;
	pointer-events: none !important;
}

.popup-overlay .popup-box::after,
.popup-overlay .popup::after {
	content: "" !important;
	position: absolute !important;
	right: -80px !important;
	top: -70px !important;
	width: 320px !important;
	height: 260px !important;
	border: 2px solid rgba(92, 119, 69, 0.12) !important;
	border-radius: 50% !important;
	transform: rotate(-20deg) !important;
	z-index: 0 !important;
	pointer-events: none !important;
}

/* ==========================================
 * 5. Logo
 * ========================================== */
.popup-box .logo,
.popup-box .popup-logo {
	position: absolute !important;
	left: 3.5% !important;
	top: 3.5% !important;
	width: 44% !important;
	max-width: 44% !important;
	height: auto !important;
	z-index: 8 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================
 * 6. Content Wrapper
 * ========================================== */
.popup-box .content,
.popup-box .popup-content {
	position: absolute !important;
	left: 4% !important;
	top: 15% !important;
	width: 44% !important;
	text-align: center !important;
	z-index: 10 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================
 * 7. Headline & Subtext (Exact 2 Lines)
 * ========================================== */
.popup-box .headline,
.popup-box .popup-headline,
.popup-box h1,
.popup-box h2 {
	margin: 0 !important;
	padding: 0 !important;
	color: #102d20 !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: clamp(22px, 2.7vw, 38px) !important;
	line-height: 1.02 !important;
	font-weight: 700 !important;
	letter-spacing: -0.8px !important;
	text-align: center !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.popup-box .headline-line1 {
	white-space: nowrap !important;
	display: inline-block !important;
}

.popup-box .headline-line2 {
	display: inline-block !important;
}

.popup-box .green {
	color: #2d7d2e !important;
	white-space: nowrap !important;
	display: inline !important;
}

/* Subtext */
.popup-box .subtext,
.popup-box .popup-subtext {
	margin: clamp(8px, 1.2vw, 14px) auto 0 !important;
	padding: 0 !important;
	max-width: 680px !important;
	color: #111111 !important;
	font-size: clamp(12px, 1.25vw, 16px) !important;
	line-height: 1.3 !important;
	text-align: center !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================
 * 8. Form, Email Input & Submit Button (Scoped)
 * ========================================== */
.popup-box .form,
.popup-box .popup-form,
.popup-box #rcp-popup-form {
	margin: clamp(10px, 1.4vw, 16px) auto 0 !important;
	padding: 0 !important;
	width: 88% !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Scoped Email Input */
.popup-box .email,
.popup-box .rcp-input-email,
.popup-box input[type="email"] {
	width: 100% !important;
	height: clamp(38px, 4vw, 48px) !important;
	border: 1.5px solid #c8c8c8 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	padding: 0 clamp(10px, 1.2vw, 16px) !important;
	font-size: clamp(13px, 1.2vw, 16px) !important;
	color: #444444 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) inset !important;
	outline: none !important;
	display: block !important;
	box-sizing: border-box !important;
	text-align: left !important;
	margin: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.popup-box .email::placeholder,
.popup-box .rcp-input-email::placeholder,
.popup-box input[type="email"]::placeholder {
	color: #9a9a9a !important;
	opacity: 1 !important;
}

.popup-box .email:focus,
.popup-box .rcp-input-email:focus,
.popup-box input[type="email"]:focus {
	border-color: #17652c !important;
	box-shadow: 0 0 0 3px rgba(23, 101, 44, 0.15) !important;
}

/* Scoped Submit Button - Ultra High Specificity (No Hover/Color Change) */
button#rcp-submit,
button#rcp-submit:hover,
button#rcp-submit:active,
button#rcp-submit:focus,
.popup-box button#rcp-submit,
.popup-box button#rcp-submit:hover,
.popup-box button#rcp-submit:active,
.popup-box button#rcp-submit:focus,
.popup-overlay button#rcp-submit,
.popup-overlay button#rcp-submit:hover,
.popup-overlay button#rcp-submit:active,
.popup-overlay button#rcp-submit:focus,
body .popup-overlay .popup-box button#rcp-submit,
body .popup-overlay .popup-box button#rcp-submit:hover,
body .popup-overlay .popup-box button#rcp-submit:active,
body .popup-overlay .popup-box button#rcp-submit:focus,
html body .popup-overlay .popup-box button#rcp-submit,
html body .popup-overlay .popup-box button#rcp-submit:hover,
html body .popup-overlay .popup-box button#rcp-submit:active,
html body .popup-overlay .popup-box button#rcp-submit:focus,
html body div.popup-overlay div.popup-box form#rcp-popup-form button#rcp-submit,
html body div.popup-overlay div.popup-box form#rcp-popup-form button#rcp-submit:hover,
html body div.popup-overlay div.popup-box form#rcp-popup-form button#rcp-submit:active,
html body div.popup-overlay div.popup-box form#rcp-popup-form button#rcp-submit:focus,
html body div.popup-overlay div.popup-box form#rcp-popup-form button.popup-btn,
html body div.popup-overlay div.popup-box form#rcp-popup-form button.popup-btn:hover,
html body div.popup-overlay div.popup-box form#rcp-popup-form button.popup-btn:active,
html body div.popup-overlay div.popup-box form#rcp-popup-form button.popup-btn:focus {
	width: 100% !important;
	height: clamp(38px, 4vw, 48px) !important;
	margin-top: clamp(8px, 1vw, 12px) !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #17652c !important;
	background-color: #17652c !important;
	color: #ffffff !important;
	font-size: clamp(14px, 1.3vw, 18px) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
	outline: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	transition: none !important;
	text-decoration: none !important;
}

/* Neutralize Theme/Muffin pseudo-elements on popup button (100% Scoped) */
.popup-box button#rcp-submit::before,
.popup-box button#rcp-submit::after,
.popup-box button#rcp-submit:hover::before,
.popup-box button#rcp-submit:hover::after,
.popup-overlay button#rcp-submit::before,
.popup-overlay button#rcp-submit::after,
.popup-overlay button#rcp-submit:hover::before,
.popup-overlay button#rcp-submit:hover::after,
#rcp-popup-form button::before,
#rcp-popup-form button::after,
#rcp-popup-form button:hover::before,
#rcp-popup-form button:hover::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Scoped Button Disabled State */
html body .popup-overlay .popup-box button#rcp-submit:disabled,
html body .popup-overlay .popup-box button.popup-btn:disabled {
	background: #94a3b8 !important;
	background-color: #94a3b8 !important;
	color: #f1f5f9 !important;
	cursor: not-allowed !important;
	opacity: 0.75 !important;
}

/* ==========================================
 * 9. Disclaimer / Terms (Clean Space Above Fruits)
 * ========================================== */
.popup-box .disclaimer,
.popup-box .popup-terms {
	margin: clamp(8px, 1vw, 12px) auto 0 !important;
	padding: 0 !important;
	color: #222222 !important;
	font-size: clamp(10px, 0.9vw, 13px) !important;
	line-height: 1.25 !important;
	max-width: 600px !important;
	text-align: center !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================
 * 10. Products, Leaves, Fruits & Close Button
 * ========================================== */
.popup-box .products,
.popup-box .popup-products {
	position: absolute !important;
	right: 1.3% !important;
	top: 14% !important;
	width: 50.5% !important;
	height: auto !important;
	z-index: 5 !important;
	display: block !important;
	pointer-events: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.popup-box .left-leaves,
.popup-box .popup-left-leaves {
	position: absolute !important;
	left: -2.5% !important;
	bottom: 22% !important;
	width: 17% !important;
	height: auto !important;
	z-index: 2 !important;
	display: block !important;
	pointer-events: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.popup-box .fruit-image,
.popup-box .popup-fruit-image {
	position: absolute !important;
	left: 30.5% !important;
	bottom: -4px !important;
	width: 30% !important;
	height: auto !important;
	z-index: 3 !important;
	display: block !important;
	pointer-events: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.popup-box .close-btn,
.popup-box .popup-close {
	position: absolute !important;
	top: 12px !important;
	right: 14px !important;
	width: 34px !important;
	height: 34px !important;
	border: none !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #173c28 !important;
	font-size: 24px !important;
	line-height: 32px !important;
	text-align: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 30 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: 0.2s ease !important;
	outline: none !important;
	pointer-events: auto !important;
}

.popup-box .close-btn:hover,
.popup-box .popup-close:hover {
	background: #ffffff !important;
	color: #000000 !important;
}

/* ==========================================
 * 11. Status & Feedback Messages
 * ========================================== */
.popup-box .rcp-message-container {
	margin-top: 10px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	border-radius: 6px !important;
	display: none;
}

.popup-box .rcp-message-container.rcp-success {
	display: block !important;
	padding: 8px 12px !important;
	color: #15803d !important;
	background-color: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
}

.popup-box .rcp-message-container.rcp-error {
	display: block !important;
	padding: 8px 12px !important;
	color: #b91c1c !important;
	background-color: #fef2f2 !important;
	border: 1px solid #fecaca !important;
}

.popup-box .rcp-msg-text {
	margin: 0 !important;
	font-weight: 600 !important;
}

/* ==========================================
 * 12. Media Queries (Mobile & Tablet)
 * ========================================== */
@media (min-width: 768px) and (max-width: 1200px) {
	.popup-overlay .popup-box,
	.popup-overlay .popup {
		max-width: 90% !important;
	}
	.popup-box .logo,
	.popup-box .popup-logo {
		width: 46% !important;
	}
	.popup-box .content,
	.popup-box .popup-content {
		left: 4% !important;
		width: 44% !important;
		top: 15% !important;
	}
	.popup-box .products,
	.popup-box .popup-products {
		width: 52% !important;
		right: 0% !important;
		top: 15% !important;
	}
	.popup-box .left-leaves,
	.popup-box .popup-left-leaves {
		width: 18% !important;
		left: -2% !important;
		bottom: 15% !important;
	}
	.popup-box .fruit-image,
	.popup-box .popup-fruit-image {
		width: 30% !important;
		left: 28% !important;
		bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.popup-overlay .popup-box,
	.popup-overlay .popup {
		aspect-ratio: auto !important;
		min-height: auto !important;
		padding-bottom: 24px !important;
		max-width: 420px !important;
	}
	.popup-box .logo,
	.popup-box .popup-logo {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 88% !important;
		max-width: 88% !important;
		margin: 16px auto 0 !important;
		display: block !important;
	}
	.popup-box .content,
	.popup-box .popup-content {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 92% !important;
		margin: 14px auto 0 !important;
	}
	.popup-box .headline,
	.popup-box .popup-headline {
		font-size: 28px !important;
		line-height: 1.05 !important;
		letter-spacing: -0.5px !important;
	}
	.popup-box .subtext,
	.popup-box .popup-subtext {
		margin-top: 12px !important;
		font-size: 14px !important;
	}
	.popup-box .form,
	.popup-box .popup-form,
	.popup-box #rcp-popup-form {
		width: 94% !important;
		margin-top: 16px !important;
	}
	.popup-box .email,
	.popup-box .rcp-input-email,
	.popup-box input[type="email"],
	.popup-box .button,
	.popup-box .popup-btn,
	.popup-box #rcp-submit {
		height: 46px !important;
		font-size: 15px !important;
	}
	.popup-box .button,
	.popup-box .popup-btn,
	.popup-box #rcp-submit {
		margin-top: 10px !important;
	}
	.popup-box .disclaimer,
	.popup-box .popup-terms {
		font-size: 12px !important;
		margin-top: 12px !important;
	}
	.popup-box .products,
	.popup-box .popup-products {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		width: 104% !important;
		margin: 12px -2% 0 !important;
		height: auto !important;
		display: block !important;
	}
	.popup-box .left-leaves,
	.popup-box .popup-left-leaves {
		position: absolute !important;
		left: -4% !important;
		bottom: 0% !important;
		width: 32% !important;
	}
	.popup-box .fruit-image,
	.popup-box .popup-fruit-image {
		position: absolute !important;
		left: 18% !important;
		bottom: 0 !important;
		width: 60% !important;
	}
	.popup-box .close-btn,
	.popup-box .popup-close {
		top: 8px !important;
		right: 8px !important;
		width: 30px !important;
		height: 30px !important;
		font-size: 20px !important;
		line-height: 28px !important;
	}
}

/* =========================================================
 * 13. Restore page scrolling when popup is hidden
 * ========================================================= */
html.rcp-popup-dismissed,
body.rcp-popup-dismissed {
	overflow: auto !important;
	overflow-x: hidden !important;
	position: static !important;
}

body.rcp-popup-dismissed.pum-open,
body.rcp-popup-dismissed.pum-open-overlay,
body.rcp-popup-dismissed.pum-open-scrollable {
	overflow: auto !important;
	overflow-x: hidden !important;
	position: static !important;
}

body.rcp-popup-dismissed .pum-overlay,
body.rcp-popup-dismissed .popmake-overlay {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}