:root {
	--font-heading: "Canela", serif;
	--font-body: "hk-grotesk-m";
	--modal-max-width: min(90vw, 31.25rem); /* More responsive max-width */
}

/* Paywall modal overlay */
.mod-paywall-modal {
	display: none; /* hidden until triggered */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* Dynamic viewport height */
	background: rgba(0, 0, 0, 0.8); /* dark semi-transparent bg */
	z-index: 9999; /* on top of everything */
	display: flex;
	align-items: flex-start; /* Changed from center to allow scrolling from top */
	justify-content: center;
	padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom, 1.5rem));
	box-sizing: border-box;
	overflow-y: auto; /* Add scroll for smaller screens */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Modal inner content */
.mod-paywall-modal__content {
	background-image: url(./img/MOD-Pro-Background-Upgrade.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-color: #000;
	padding: 5rem 2rem;
	width: 100%;
	max-width: var(--modal-max-width);
	text-align: center;
	color: #fff;
	margin: auto;
	box-sizing: border-box;
	padding-bottom: max(5rem, env(safe-area-inset-bottom, 1.5rem)); /* Ensure bottom content is visible */
}

/* Reduce bottom padding when the LearnDash extra section is present */
.mod-paywall-modal__content--has-learndash-extra {
	padding-bottom: 2.5rem; /* Adjust as needed */
	padding-top: 2.5rem;
}

/* Title container and image */
.mod-paywall-modal__title-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: min(4vh, 2rem);
}

.mod-paywall-modal__title {
	width: min(40%, 10rem);
	height: auto;
}

/* Subtitle */
.mod-paywall-modal__subtitle {
	font-family: var(--font-heading);
	font-size: min(4vw, 3rem);
	margin: min(3vh, 1.5rem) 0;
}

/* Features section */
.mod-paywall-modal__features {
	text-align: center; /* This will center the UL block inside */
}

.mod-paywall-modal__features-title {
	font-family: var(--font-body);
	font-size: min(3.5vw, .85rem);
	margin-bottom: 1rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mod-paywall-modal__features-list {
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
	width: 250px;
}

.mod-paywall-modal__features-item {
	margin-bottom: 0.75rem;
}

/* Remove the broken ::before rule */
/*
.mod-paywall-modal__features-item::before {
	content: "+";
	position: absolute;
	left: 0.5em;
	top: 0.15em;
	font-weight: 500;
	color: #fff;
}
*/

.mod-paywall-modal__features-item-header {
	display: flex;
	align-items: baseline; /* Aligns symbol with text */
	gap: 0.5em; /* Space between symbol and text */
}

.mod-paywall-modal__features-item-symbol {
	font-weight: 500;
	color: #fff;
}

.mod-paywall-modal__features-item-title,
.mod-paywall-modal__features-item-desc {
	display: block;
}

.mod-paywall-modal__features-item-title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: min(3vw, 0.9rem);
	cursor: pointer;
}

.mod-paywall-modal__features-item-desc {
	display: none; /* Hide by default */
	font-family: var(--font-body);
	font-size: min(2.8vw, 0.85rem);
	line-height: 1.4;
	opacity: 0.7;
	padding-left: 1.3em;
}

/* --- Accordion Symbol and Description Visibility --- */

/* By default, show the plus and hide the minus/description */
.mod-paywall-modal__features-item-symbol--minus,
.mod-paywall-modal__features-item-desc {
	display: none;
}
.mod-paywall-modal__features-item-symbol--plus {
	display: inline;
	width: 8px;
}

/* When the item is active, flip visibility */
.mod-paywall-modal__features-item.active .mod-paywall-modal__features-item-symbol--minus,
.mod-paywall-modal__features-item.active .mod-paywall-modal__features-item-desc {
	display: block; /* Use block for desc to ensure it's on its own line */
}
.mod-paywall-modal__features-item.active .mod-paywall-modal__features-item-symbol--minus {
	display: inline; /* Keep the minus on the same line as the title */
	width: 8px;
}
.mod-paywall-modal__features-item.active .mod-paywall-modal__features-item-symbol--plus {
	display: none;
}

/* Membership type */
.mod-paywall-modal__membership {
	margin-bottom: 0rem;
}

.mod-paywall-modal__sale-message {
	border: 1px solid #ff72fa;
	border-radius: 0.75rem;
	padding: 0.85rem 1.25rem;
	margin-bottom: 1.5rem;
	background: rgba(255, 114, 250, 0.12);
	text-align: center;
}

.mod-paywall-modal__sale-headline {
	display: block;
	font-family: var(--font-heading);
	font-size: min(4vw, 1.15rem);
	color: #ff72fa;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mod-paywall-modal__sale-subtext {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-body);
	font-size: min(3.2vw, 0.9rem);
	line-height: 1.4;
	color: #ffffff;
	opacity: 0.9;
}

.mod-paywall-modal__membership-label {
	display: block;
	font-family: var(--font-body);
	font-size: 1rem;
	letter-spacing: 0.2em;
	margin-bottom: 1rem;
	text-transform: uppercase;
	opacity: 0.8;
}

/* Toggle section */
.mod-paywall-modal__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: min(3vw, 1rem);
	margin: min(3vh, 1rem) 0;
	flex-wrap: wrap;
}

.mod-paywall-modal__toggle-label {
	font-size: min(2.8vw, 0.9rem);
}

/* Switch style */
.mod-paywall-modal__switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

.mod-paywall-modal__switch-input {
	opacity: 0;
	width: 0;
	height: 0;
}

.mod-paywall-modal__switch-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #555;
	transition: background-color 0.4s ease;
	border-radius: 12px;
}

.mod-paywall-modal__switch-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: #fff;
	transition: 0.4s;
	border-radius: 50%;
}

.mod-paywall-modal__switch-input:checked + .mod-paywall-modal__switch-slider {
	background-color: #ff72fa;
	background-image: none !important;
}

.mod-paywall-modal__switch-input:checked
	+ .mod-paywall-modal__switch-slider::after {
	content: none !important;
	display: none !important;
}

.mod-paywall-modal__switch-input:checked
	+ .mod-paywall-modal__switch-slider:before {
	transform: translateX(26px);
}

/* Price text block */
.mod-paywall-modal__price-block {
	position: relative;
	transition: opacity 0.3s ease;
	text-align: center;
	padding-bottom: 1.5rem; /* Reduced space for save text */
}

/* "Get started for" text */
.mod-paywall-modal__price-intro {
	font-family: var(--font-body);
	font-size: min(3vw, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

/* Actual price amount (e.g., $499/mo) */
.mod-paywall-modal__price-amount {
	font-family: var(--font-heading);
	font-size: min(6vw, 2.5rem);
	line-height: 1.2;
	margin: min(2vh, 1rem) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.mod-paywall-modal__price-amount-strikethrough {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	opacity: 0.7;
}

/* Save text under yearly price */
.mod-paywall-modal__save-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	color: #ff72fa;
	font-family: var(--font-body);
	font-size: min(2.8vw, 0.85rem);
	text-transform: uppercase;
	text-align: center;
	margin-top: 0.25rem; /* Reduced margin */
}

/* Button styles */
.mod-paywall-modal__button {
	display: inline-block;
	padding: min(2.5vh, 1rem) min(4vw, 2rem);
	font-size: min(3vw, 1rem);
	font-family: var(--font-body);
	background: #fff;
	color: #000;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	max-width: 90%;
	margin: min(3vh, 1rem) auto;
}

#mod-paywall-modal .modal-content .modal-button:hover {
	opacity: 0.9;
}

/* Toggle icon alignment */
.mod-paywall-modal__toggle-icon {
	display: inline-block;
	vertical-align: middle;
}

/* Styles for the conditional LearnDash extra section */
.mod-paywall-modal__learndash-extra {
	margin-top: 2rem;
	background-color: #1a1a1a;
	padding: 1.5rem;
	width: calc(100% + 4rem); /* Extend beyond parent padding */
	margin-left: -2rem; /* Compensate for parent padding */
	margin-right: -2rem;
	margin-bottom: -5rem; /* Compensate for parent bottom padding */
}

.mod-paywall-modal__learndash-extra-headline {
	font-family: var(--font-body);
	font-size: min(3.2vw, 1.1rem);
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: #e0e0e0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mod-paywall-modal__learndash-extra-text {
	font-family: var(--font-body);
	font-size: min(2.8vw, 0.875rem);
	line-height: 1.5;
	color: #b0b0b0;
	max-width: 80%;
	margin: 0 auto 1.5rem;
}

.mod-paywall-modal__learndash-extra-button {
	display: inline-block;
	padding: 0.8rem 1.5rem;
	font-size: min(2.8vw, 0.875rem);
	font-family: var(--font-body);
	font-weight: 600;
	color: #e0e0e0;
	background-color: transparent;
	border: 2px solid #444;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: all 0.3s ease;
}

.mod-paywall-modal__learndash-extra-button:hover {
	background-color: #444;
	color: #fff;
}

input[type="checkbox"]:checked ~ span::before,
input[type="checkbox"]:checked ~ label span::before {
	background: #fff !important;
}

/* ----------------------------- */
/* Auth step: clean, focused UI  */
/* ----------------------------- */

/* When auth is active, hide paywall marketing sections for focus */
.mod-paywall-modal.mod-auth-active .mod-paywall-modal__features,
.mod-paywall-modal.mod-auth-active .mod-paywall-modal__membership,
.mod-paywall-modal.mod-auth-active .mod-paywall-modal__price-block,
.mod-paywall-modal.mod-auth-active .mod-paywall-modal__button,
.mod-paywall-modal.mod-auth-active .mod-paywall-modal__learndash-extra {
	display: none !important;
}

/* Ensure auth step is visible when active */
.mod-paywall-modal.mod-auth-active .mod-auth-step {
	display: block !important;
}

/* Auth container */
.mod-auth-step {
	margin-top: 1.5rem;
	background: transparent; /* brand: remove panel background */
	border: none; /* brand: remove panel border */
	border-radius: 0; /* brand: square edges */
	padding: 1rem;
	position: relative; /* for loading spinner */
}

.mod-auth-intro {
	font-family: var(--font-body);
	font-size: 0.95rem;
	opacity: 0.9;
	margin: 0 0 0.75rem;
}

/* Tabs */
.mod-auth-tabs {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.mod-auth-tab {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	padding: 0.5rem 0.9rem;
	text-transform: uppercase;
	font-family: var(--font-body);
	letter-spacing: 0.08em;
	cursor: pointer;
	border-radius: 0; /* brand: square tabs */
}

.mod-auth-tab[aria-selected="true"] {
	background: #fff;
	color: #000;
	border-color: #fff;
}

/* Panels */
.mod-auth-panels {
	display: block;
}

.mod-auth-panel label {
	display: block;
	text-align: left;
	margin: 0.5rem auto;
}

.mod-auth-email,
.mod-auth-password {
	width: 100%;
	box-sizing: border-box;
	background: #0f0f10;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: 0.65rem 0.8rem;
	border-radius: 0; /* brand: square inputs */
	font-family: var(--font-body);
}

.mod-auth-newsletter {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0.25rem;
}

.mod-auth-submit {
	display: inline-block;
	padding: 0.65rem 1.2rem;
	font-size: 0.95rem;
	font-family: var(--font-body);
	background: #fff;
	color: #000;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 0; /* brand: square buttons */
	margin-top: 0.5rem;
}

.mod-auth-error {
	margin-top: 0.5rem;
	background: rgba(255, 0, 0, 0.12);
	border: 1px solid rgba(255, 0, 0, 0.35);
	color: #ffb3b3;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-family: var(--font-body);
}

/* Social login area */
.mod-auth-social { 
	display: block;
	margin-top: 1rem;
}

/* Social login buttons container */
.modsg-social-login-buttons {
	width: 100%;
	margin: 1rem 0;
}

/* "Or continue with" divider */
.modsg-social-login-divider {
	position: relative;
	text-align: center;
	margin: 1.25rem 0 1rem;
	overflow: hidden;
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.modsg-social-login-divider::before,
.modsg-social-login-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 35%;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
}

.modsg-social-login-divider::before {
	left: 0;
}

.modsg-social-login-divider::after {
	right: 0;
}

.modsg-social-login-divider span {
	display: inline-block;
	padding: 0 0.75rem;
	background: transparent;
}

/* Row of social login buttons */
.modsg-social-login-row {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap; /* Keep icons on same line */
	margin: 0 auto;
}

/* Override Nextend Social Login default styles for modal compatibility */
.mod-auth-social a[class*="nsl-button"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: auto !important;
	padding: 0.6rem 1.2rem !important;
	border-radius: 4px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	font-family: var(--font-body) !important;
	font-size: 0.85rem !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	/* Override any black backgrounds */
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.mod-auth-social a[class*="nsl-button"]:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
}

/* Google-specific colors */
.mod-auth-social a[class*="nsl-button-google"] {
	background: #fff !important;
	color: #333 !important;
	border-color: #ddd !important;
}

.mod-auth-social a[class*="nsl-button-google"]:hover {
	background: #f8f8f8 !important;
	border-color: #ccc !important;
}

/* Facebook-specific colors */
.mod-auth-social a[class*="nsl-button-facebook"] {
	background: #1877f2 !important;
	color: #fff !important;
	border-color: #1877f2 !important;
}

.mod-auth-social a[class*="nsl-button-facebook"]:hover {
	background: #166fe5 !important;
	border-color: #166fe5 !important;
}

/* Icon styling within buttons */
.mod-auth-social a[class*="nsl-button"] svg,
.mod-auth-social a[class*="nsl-button"] img {
	width: 18px !important;
	height: 18px !important;
	margin-right: 0.5rem !important;
	vertical-align: middle !important;
}

/* Override any inherited dark/black backgrounds from Nextend */
.mod-auth-social .nsl-container,
.mod-auth-social .nsl-container-block {
	background: transparent !important;
}

/* Icon-only style (compact for mobile) */
.mod-auth-social a[class*="nsl-button"][data-style="icon"],
.mod-auth-social a.nsl-button-icon,
.mod-auth-social .nsl-button-svg-container {
	width: 50px !important;
	height: 50px !important;
	min-width: 50px !important;
	padding: 0.75rem !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mod-auth-social a[class*="nsl-button"][data-style="icon"] svg,
.mod-auth-social a[class*="nsl-button"][data-style="icon"] img,
.mod-auth-social a.nsl-button-icon svg,
.mod-auth-social a.nsl-button-icon img,
.mod-auth-social .nsl-button-svg-container svg {
	margin: 0 !important;
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
}

/* Ensure Google icon button stays white */
.mod-auth-social a[class*="nsl-button-google"][data-style="icon"],
.mod-auth-social a.nsl-button-google {
	background: #fff !important;
	border-color: #ddd !important;
}

/* Ensure Facebook icon button stays blue */
.mod-auth-social a[class*="nsl-button-facebook"][data-style="icon"],
.mod-auth-social a.nsl-button-facebook {
	background: #1877f2 !important;
	border-color: #1877f2 !important;
}

/* Loading state (use modal root for stable centering) */
.mod-paywall-modal.mod-loading { pointer-events: none; }

@keyframes modsg-spin { to { transform: rotate(360deg); } }

.mod-paywall-modal.mod-loading::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin-left: -14px;
	margin-top: -14px;
	border: 2px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: modsg-spin 0.8s linear infinite;
	z-index: 10000;
}

/* During redirect, hide all modal content so only spinner is visible */
.mod-paywall-modal.mod-redirecting .mod-paywall-modal__content {
	visibility: hidden;
}