/**
 * WB Ad Manager - Frontend Styles
 *
 * @package WB_Ad_Manager
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	/* ── Semantic tokens ── */
	--wbam-bg:            var(--bg, var(--wp--preset--color--base, #ffffff));
	--wbam-surface:       var(--surface, #f6f7f7);
	--wbam-surface-alt:   var(--surface-alt, #f0f0f1);
	--wbam-text:          var(--text-1, var(--wp--preset--color--contrast, #1d2327));
	--wbam-text-muted:    var(--text-2, #646970);
	--wbam-text-subtle:   #8c8f94;
	--wbam-text-inverse:  #ffffff;
	--wbam-accent:        var(--brand, var(--wp--preset--color--primary, #2271b1));
	--wbam-accent-hover:  var(--brand-hover, #135e96);
	--wbam-accent-fg:     #ffffff;
	--wbam-success:       #00a32a;
	--wbam-danger:        #d63638;
	--wbam-danger-bg:     #f8d7da;
	--wbam-warning:       #dba617;
	--wbam-border:        #e5e5e5;
	--wbam-border-strong: #c3c4c7;
	--wbam-border-subtle: #dcdcde;
	--wbam-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.04);
	--wbam-shadow-md:     0 2px 6px rgba(0, 0, 0, 0.08);
	--wbam-shadow-lg:     0 4px 12px rgba(0, 0, 0, 0.12);
	--wbam-r-sm: 4px;
	--wbam-r-md: 8px;
	--wbam-r-lg: 12px;
	--wbam-font-size-xs: 0.75rem;
	--wbam-font-size-sm: 0.8125rem;
	--wbam-font-size-md: 1rem;
	--wbam-font-size-lg: 1.125rem;
	--wbam-font-size-xl: 1.25rem;
	/* ── Legacy aliases — deprecated, do not use in new code ── */
	--wbam-bg-white:      var(--wbam-bg);
	--wbam-bg-light:      var(--wbam-surface);
	--wbam-text-body:     var(--wbam-text);
	--wbam-text-dark:     var(--wbam-text);
	--wbam-text-light:    var(--wbam-text-inverse);
	--wbam-text-meta:     var(--wbam-text-subtle);
	--wbam-label-color:   var(--wbam-text-muted);
	--wbam-border-color:  var(--wbam-border);
	--wbam-border-color-dark: var(--wbam-border-subtle);
	--wbam-success-color: var(--wbam-success);
	--wbam-error-color:   var(--wbam-danger);
	--wbam-error-bg:      var(--wbam-danger-bg);

	--wbam-spacing: 20px;
	--wbam-spacing-sm: 15px;
	--wbam-border-radius: 4px;
	--wbam-label-size: 11px;
	--wbam-transition: 0.2s ease;

	/* Color Variables */
	--wbam-bg-white: #fff;
	--wbam-bg-light: #f9f9f9;
	--wbam-bg-placeholder: #f5f5f5;
	--wbam-bg-dark: #333;
	--wbam-bg-darker: #2a2a2a;
	--wbam-bg-button: #2271b1;
	--wbam-bg-transparent-light: rgba(255, 255, 255, 0.05);
	--wbam-text-dark: #333;
	--wbam-text-light: #fff;
	--wbam-text-body: #1d2327;
	--wbam-text-meta: #999;
	--wbam-label-color: #666;
	--wbam-border-color: #e0e0e0;
	--wbam-border-color-dark: #ddd;
	--wbam-border-color-darker: #444;
	--wbam-hover-bg-light: #fce8e6;
	--wbam-hover-text-danger: #c5221f;
	--wbam-hover-bg-dark: rgba(0, 0, 0, 0.2);
	--wbam-hover-bg-darker: rgba(0, 0, 0, 0.1);
	--wbam-success-color: #00a32a;
	--wbam-error-color: #d63638;
	--wbam-error-bg: #fcf0f1;
	--wbam-error-bg-dark: rgba(214, 54, 56, 0.1);
	--wbam-shadow-color: rgba(0, 0, 0, 0.15);
	--wbam-shadow-medium: rgba(0, 0, 0, 0.1);
	--wbam-shadow-strong: rgba(0, 0, 0, 0.3);
	--wbam-overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Base Ad Styles
   ========================================================================== */

.wbam-ad {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
}

.wbam-ad * {
	box-sizing: border-box;
}

.wbam-placement {
	margin: var(--wbam-spacing) 0;
	clear: both;
	position: relative;
}

/* ==========================================================================
   Ad Label
   ========================================================================== */

.wbam-ad-label {
	display: block;
	font-size: var(--wbam-label-size);
	color: var(--wbam-label-color);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	margin: 0;
	padding: 5px 0;
}

.wbam-ad-label-above {
	margin-bottom: 5px;
}

.wbam-ad-label-below {
	margin-top: 5px;
}

/* ==========================================================================
   Image Ads
   ========================================================================== */

.wbam-ad-image {
	line-height: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.wbam-ad-image a {
	display: inline-block;
	text-decoration: none;
	transition: opacity var(--wbam-transition);
	max-width: 100%;
}

.wbam-ad-image a:hover {
	opacity: 0.9;
}

.wbam-ad-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wbam-border-radius);
	display: block;
	object-fit: contain;
}

/* ==========================================================================
   Image Ad Container Constraints
   Prevent oversized images from taking up unwanted space
   ========================================================================== */

/* Default container for all image ads - reasonable max-width */
.wbam-placement .wbam-ad-image {
	max-width: 728px;
	width: 100%;
}

/* Full-width content area placements can be larger */
.wbam-placement-before-content .wbam-ad-image,
.wbam-placement-after-content .wbam-ad-image,
.wbam-placement-paragraph .wbam-ad-image,
.wbam-placement-shortcode .wbam-ad-image {
	max-width: 970px;
}

/* Header/Footer - standard leaderboard size */
.wbam-placement-footer .wbam-ad-image,
.wbam-placement-header .wbam-ad-image {
	max-width: 728px;
}

/* Sidebar placements - medium rectangle size */
.wbam-placement-sidebar .wbam-ad-image {
	max-width: 300px;
}

/* Widget sidebar constraint - fill available width */
.widget .wbam-ad-image {
	max-width: 100%;
	width: 100%;
}

.widget .wbam-ad-image img {
	width: 100%;
	object-fit: contain;
}

/* BuddyPress/bbPress placements */
.wbam-activity-ad .wbam-ad-image,
.wbam-bp-directory-ad .wbam-ad-image,
.wbam-bp-between-item .wbam-ad-image,
.wbam-comment-ad .wbam-ad-image,
.wbam-bbpress-ad .wbam-ad-image {
	max-width: 600px;
}

/* Sticky ads - constrained to container */
.wbam-sticky-ad .wbam-ad-image {
	max-width: 100%;
}

.wbam-sticky-ad .wbam-ad-image img {
	max-height: 250px;
	width: auto;
}

/* Popup ads - fit within modal */
.wbam-popup-content .wbam-ad-image {
	max-width: 100%;
}

.wbam-popup-content .wbam-ad-image img {
	max-height: 400px;
	width: auto;
}

/* ==========================================================================
   Rich Content Ads
   ========================================================================== */

.wbam-ad-rich-content {
	text-align: left;
}

.wbam-ad-rich-content p:first-child {
	margin-top: 0;
}

.wbam-ad-rich-content p:last-child {
	margin-bottom: 0;
}

.wbam-ad-rich-content img {
	max-width: 100%;
	height: auto;
}

.wbam-ad-rich-content a {
	color: inherit;
}

/* ==========================================================================
   Code Ads (AdSense, etc.)
   ========================================================================== */

.wbam-ad-code {
	display: block;
	overflow: hidden;
}

.wbam-ad-code iframe {
	max-width: 100%;
}

.wbam-ad-code ins {
	display: block !important;
}

/* ==========================================================================
   Placement Positions
   ========================================================================== */

.wbam-placement-header {
	margin: 0 0 var(--wbam-spacing);
}

.wbam-placement-footer {
	margin: var(--wbam-spacing) 0 0;
}

.wbam-placement-before-content {
	margin: 0 0 var(--wbam-spacing);
}

.wbam-placement-after-content {
	margin: var(--wbam-spacing) 0 0;
}

.wbam-placement-paragraph {
	margin: var(--wbam-spacing) 0;
}

.wbam-placement-shortcode {
	margin: var(--wbam-spacing) 0;
}

/* ==========================================================================
   BuddyPress Activity
   ========================================================================== */

.wbam-activity-ad {
	padding: 15px !important;
	background: var(--wbam-bg-light, #f9f9f9);
	border-radius: var(--wbam-border-radius);
}

.wbam-activity-ad .wbam-placement {
	margin: 0;
}

.wbam-placement-bp-activity {
	margin: 0;
}

/* BuddyPress specific adjustments */
/* #activity-stream .wbam-activity-ad {
	border-left: none;
}

#activity-stream .wbam-activity-ad .activity-avatar {
	display: none;
} */

/* ==========================================================================
   Alignment Variations
   ========================================================================== */

.wbam-align-left {
	text-align: left;
}

.wbam-align-center {
	text-align: center;
}

.wbam-align-right {
	text-align: right;
}

/* ==========================================================================
   Width Variations
   ========================================================================== */

.wbam-width-full {
	width: 100%;
}

.wbam-width-auto {
	width: auto;
	display: inline-block;
}

/* ==========================================================================
   Lazy Load Support
   ========================================================================== */

.wbam-lazy {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wbam-lazy.wbam-loaded {
	opacity: 1;
}

.wbam-lazy-placeholder {
	background: var(--wbam-bg-placeholder, #f5f5f5);
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media screen and (max-width: 768px) {
	:root {
		--wbam-spacing: 15px;
		--wbam-spacing-sm: 10px;
	}

	.wbam-ad-image img {
		border-radius: 0;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--wbam-spacing: 12px;
		--wbam-spacing-sm: 8px;
		--wbam-label-size: 10px;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.wbam-ad,
	.wbam-placement {
		display: none !important;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.wbam-ad a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Screen reader only text */
.wbam-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Dark Mode Support - Multi-theme compatible
   ========================================================================== */

/* Dark mode color overrides with theme fallback chain */
html.dark-mode,
body.dark-scheme,
[data-theme="dark"],
.theme-dark {
	--wbam-bg-white: var(--color-theme-white-box, var(--reign-site-sections-bg-color, #1a1a1a));
	--wbam-bg-light: var(--global-body-lightcolor, var(--reign-site-secondary-bg-color, rgba(255, 255, 255, 0.05)));
	--wbam-bg-placeholder: var(--global-body-lightcolor, var(--reign-site-secondary-bg-color, #2a2a2a));
	--wbam-bg-dark: var(--global-title-color, var(--reign-site-headings-color, #2a2a2a));
	--wbam-bg-darker: var(--color-theme-white-box, var(--reign-site-sections-bg-color, #1a1a1a));
	--wbam-bg-button: var(--button-background-color, var(--reign-site-button-bg-color, #2271b1));
	--wbam-bg-transparent-light: rgba(255, 255, 255, 0.05);
	--wbam-text-dark: var(--global-font-color, var(--reign-site-body-text-color, #ccc));
	--wbam-text-light: var(--global-title-color, var(--reign-site-headings-color, #fff));
	--wbam-text-body: var(--global-font-color, var(--reign-site-body-text-color, #ccc));
	--wbam-text-meta: var(--color-meta, var(--reign-site-alternate-text-color, #999));
	--wbam-label-color: var(--color-meta, var(--reign-site-alternate-text-color, #999));
	--wbam-border-color: var(--global-border-color, var(--reign-site-border-color, #444));
	--wbam-border-color-dark: var(--global-border-color, var(--reign-site-border-color, #333));
	--wbam-border-color-darker: var(--global-border-color, var(--reign-site-border-color, #444));
	--wbam-hover-bg-light: var(--button-background-hover-color, var(--reign-site-button-bg-hover-color, rgba(233, 69, 96, 0.15)));
	--wbam-hover-text-danger: var(--color-theme-primary, var(--reign-accent-color, #E94560));
	--wbam-shadow-color: rgba(0, 0, 0, 0.3);
	--wbam-shadow-medium: rgba(0, 0, 0, 0.2);
	--wbam-shadow-strong: rgba(0, 0, 0, 0.5);
	--wbam-overlay-bg: rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: dark) {
	:root {
		--wbam-bg-white: var(--color-theme-white-box, var(--reign-site-sections-bg-color, #1a1a1a));
		--wbam-bg-light: var(--global-body-lightcolor, var(--reign-site-secondary-bg-color, rgba(255, 255, 255, 0.05)));
		--wbam-bg-placeholder: var(--global-body-lightcolor, var(--reign-site-secondary-bg-color, #2a2a2a));
		--wbam-bg-dark: var(--global-title-color, var(--reign-site-headings-color, #2a2a2a));
		--wbam-bg-darker: var(--color-theme-white-box, var(--reign-site-sections-bg-color, #1a1a1a));
		--wbam-text-dark: var(--global-font-color, var(--reign-site-body-text-color, #ccc));
		--wbam-text-light: var(--global-title-color, var(--reign-site-headings-color, #fff));
		--wbam-text-body: var(--global-font-color, var(--reign-site-body-text-color, #ccc));
		--wbam-text-meta: var(--color-meta, var(--reign-site-alternate-text-color, #999));
		--wbam-label-color: var(--color-meta, var(--reign-site-alternate-text-color, #999));
		--wbam-border-color: var(--global-border-color, var(--reign-site-border-color, #444));
		--wbam-border-color-dark: var(--global-border-color, var(--reign-site-border-color, #333));
		--wbam-border-color-darker: var(--global-border-color, var(--reign-site-border-color, #444));
		--wbam-shadow-color: rgba(0, 0, 0, 0.3);
		--wbam-shadow-medium: rgba(0, 0, 0, 0.2);
		--wbam-shadow-strong: rgba(0, 0, 0, 0.5);
		--wbam-overlay-bg: rgba(0, 0, 0, 0.85);
	}
	
	.wbam-activity-ad {
		background: var(--wbam-bg-transparent-light, rgba(255, 255, 255, 0.05));
	}

	.wbam-ad-label {
		color: var(--wbam-label-color);
	}

	.wbam-lazy-placeholder {
		background: var(--wbam-bg-placeholder);
	}
}

/* Theme dark mode class support */
.dark-mode .wbam-activity-ad,
.theme-dark .wbam-activity-ad,
[data-theme="dark"] .wbam-activity-ad {
	background: var(--wbam-bg-transparent-light, rgba(255, 255, 255, 0.05));
}

.dark-mode .wbam-ad-label,
.theme-dark .wbam-ad-label,
[data-theme="dark"] .wbam-ad-label {
	color: var(--wbam-label-color);
}

/* ==========================================================================
   Sticky/Floating Ads
   ========================================================================== */

.wbam-sticky-ad {
	position: fixed;
	z-index: 9999;
	background: var(--wbam-bg-white, #fff);
	box-shadow: 0 4px 20px var(--wbam-shadow-color, rgba(0, 0, 0, 0.15));
	border-radius: var(--wbam-border-radius);
	padding: 10px;
	max-width: 350px;
	animation: wbam-slide-in 0.3s ease;
}

.wbam-sticky-ad .wbam-placement {
	margin: 0;
}

.wbam-sticky-bottom-right {
	bottom: 20px;
	right: 20px;
}

.wbam-sticky-bottom-left {
	bottom: 20px;
	left: 20px;
}

.wbam-sticky-bottom-bar {
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	border-radius: 0;
	padding: 15px 20px;
}

.wbam-sticky-top-bar {
	top: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	border-radius: 0;
	padding: 15px 20px;
}

.wbam-sticky-close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--wbam-text);
	color: var(--wbam-bg);
	border: none;
	border-radius: 50%;
	font-size: var(--wbam-font-size-lg);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.wbam-sticky-close:hover {
	background: var(--wbam-danger-bg);
	color: var(--wbam-danger);
}

.wbam-sticky-bottom-bar .wbam-sticky-close,
.wbam-sticky-top-bar .wbam-sticky-close {
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
}

@keyframes wbam-slide-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Popup/Modal Ads
   ========================================================================== */

.wbam-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--wbam-overlay-bg, rgba(0, 0, 0, 0.7));
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: wbam-fade-in 0.3s ease;
}

.wbam-popup-modal {
	position: relative;
	background: var(--wbam-bg-white, #fff);
	border-radius: 8px;
	max-width: 600px;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 10px 40px var(--wbam-shadow-strong, rgba(0, 0, 0, 0.3));
	animation: wbam-scale-in 0.3s ease;
}

.wbam-popup-content {
	padding: 25px;
}

.wbam-popup-content .wbam-placement {
	margin: 0;
}

.wbam-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--wbam-text);
	color: var(--wbam-bg);
	border: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	z-index: 1;
}

.wbam-popup-close:hover {
	background: var(--wbam-danger-bg);
	color: var(--wbam-danger);
}

@keyframes wbam-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes wbam-scale-in {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==========================================================================
   BuddyPress Directory Ads
   ========================================================================== */

.wbam-bp-directory-ad {
	padding: 20px;
	background: var(--wbam-bg-light, #f9f9f9);
	border-radius: var(--wbam-border-radius);
	margin: 15px 0;
}

.wbam-bp-directory-ad .wbam-placement {
	margin: 0;
}

.wbam-bp-between-item {
	list-style: none !important;
	padding: 15px !important;
	background: var(--wbam-bg-light, #f9f9f9);
	margin: 10px 0 !important;
	border-radius: var(--wbam-border-radius);
}

/* ==========================================================================
   Responsive - Sticky & Popup
   ========================================================================== */

@media screen and (max-width: 480px) {
	.wbam-sticky-ad {
		max-width: calc(100% - 40px);
	}

	.wbam-sticky-bottom-right,
	.wbam-sticky-bottom-left {
		left: 20px;
		right: 20px;
	}

	.wbam-popup-modal {
		max-width: 100%;
		margin: 10px;
	}

	.wbam-popup-content {
		padding: 20px;
	}
}

/* ==========================================================================
   Comment Ads
   ========================================================================== */

.wbam-comment-ad {
	padding: 20px;
	background: var(--wbam-bg-light, #f9f9f9);
	border-radius: var(--wbam-border-radius);
	margin: var(--wbam-spacing) 0;
}

.wbam-comment-ad .wbam-placement {
	margin: 0;
}

.wbam-comment-before_form {
	margin-bottom: var(--wbam-spacing);
}

.wbam-comment-after_form {
	margin-top: var(--wbam-spacing);
}

.wbam-comment-between {
	margin: 15px 0;
	border-left: 3px solid var(--wbam-border-color-dark, #ddd);
	padding-left: 15px;
}

/* ==========================================================================
   bbPress Ads
   ========================================================================== */

.wbam-bbpress-ad {
	padding: 20px;
	background: var(--wbam-bg-light, #f9f9f9);
	border-radius: var(--wbam-border-radius);
	margin: var(--wbam-spacing) 0;
}

.wbam-bbpress-ad .wbam-placement {
	margin: 0;
}

.wbam-bbpress-before_forums,
.wbam-bbpress-before_topics,
.wbam-bbpress-before_single_topic {
	margin-bottom: var(--wbam-spacing);
}

.wbam-bbpress-after_forums,
.wbam-bbpress-after_topics,
.wbam-bbpress-after_single_topic {
	margin-top: var(--wbam-spacing);
}

.wbam-bbpress-between-replies {
	margin: 15px 0;
	border-left: 3px solid var(--wbam-border-color-dark, #ddd);
	padding-left: 15px;
}

/* bbPress widget styles */
.wbam-bbpress-forum-ad-widget,
.wbam-bbpress-topic-ad-widget {
	margin-bottom: var(--wbam-spacing);
}

/* ==========================================================================
   BuddyPress Widget Ads
   ========================================================================== */

.wbam-bp-profile-ad,
.wbam-bp-group-ad,
.wbam-bp-activity-ad-widget {
	margin-bottom: var(--wbam-spacing);
}

.wbam-bp-profile-widget .wbam-placement,
.wbam-bp-group-widget .wbam-placement,
.wbam-bp-activity-widget .wbam-placement {
	margin: 0;
}

/* Dark mode support for comment & bbPress sections */
@media (prefers-color-scheme: dark) {
	.wbam-comment-ad,
	.wbam-bbpress-ad {
		background: var(--wbam-bg-transparent-light, rgba(255, 255, 255, 0.05));
	}

	.wbam-comment-between,
	.wbam-bbpress-between-replies {
		border-left-color: var(--wbam-border-color-darker);
	}
}

.dark-mode .wbam-comment-ad,
.theme-dark .wbam-comment-ad,
[data-theme="dark"] .wbam-comment-ad,
.dark-mode .wbam-bbpress-ad,
.theme-dark .wbam-bbpress-ad,
[data-theme="dark"] .wbam-bbpress-ad {
	background: var(--wbam-bg-transparent-light, rgba(255, 255, 255, 0.05));
}

.dark-mode .wbam-comment-between,
.theme-dark .wbam-comment-between,
[data-theme="dark"] .wbam-comment-between,
.dark-mode .wbam-bbpress-between-replies,
.theme-dark .wbam-bbpress-between-replies,
[data-theme="dark"] .wbam-bbpress-between-replies {
	border-left-color: var(--wbam-border-color-darker);
}

/* ==========================================================================
   Email Capture Ads
   ========================================================================== */

.wbam-ad-email-capture {
	position: relative;
	background: var(--wbam-bg-white, #ffffff);
	color: var(--wbam-text-body, #1d2327);
	border-radius: 8px;
	padding: 30px;
	box-shadow: 0 4px 20px var(--wbam-shadow-medium, rgba(0, 0, 0, 0.1));
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}

.wbam-email-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	background: var(--wbam-hover-bg-darker, rgba(0, 0, 0, 0.1));
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	padding: 0;
}

.wbam-email-close:hover {
	background: var(--wbam-hover-bg-dark, rgba(0, 0, 0, 0.2));
}

.wbam-email-close .dashicons {
	font-size: var(--wbam-font-size-lg);
	width: 18px;
	height: 18px;
	color: inherit;
}

.wbam-email-content {
	position: relative;
}

.wbam-email-headline {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.wbam-email-description {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.8;
}

.wbam-email-form {
	margin: 0;
}

.wbam-email-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wbam-email-field {
	width: 100%;
}

.wbam-email-input {
	width: 100%;
	padding: 12px 15px;
	font-size: 15px;
	border: 2px solid var(--wbam-border-color, #e0e0e0);
	border-radius: 6px;
	background: var(--wbam-bg-white, #fff);
	color: var(--wbam-text-body, #1d2327);
	transition: border-color 0.2s ease;
}

.wbam-email-input:focus {
	outline: none;
	border-color: var(--wbam-email-btn, var(--wbam-bg-button, #2271b1));
}

.wbam-email-input::placeholder {
	color: var(--wbam-text-meta, #999);
}

.wbam-email-submit {
	margin-top: 5px;
}

.wbam-email-button {
	width: 100%;
	padding: 14px 20px;
	font-size: var(--wbam-font-size-md);
	font-weight: 600;
	color: var(--wbam-text-light, #fff);
	background: var(--wbam-email-btn, var(--wbam-bg-button, #2271b1));
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.1s ease;
}

.wbam-email-button:hover {
	opacity: 0.9;
}

.wbam-email-button:active {
	transform: scale(0.98);
}

.wbam-email-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wbam-email-privacy {
	margin: 15px 0 0;
	font-size: var(--wbam-font-size-xs);
	opacity: 0.6;
	line-height: 1.4;
}

/* Success State */
.wbam-email-success {
	padding: 20px;
	text-align: center;
}

.wbam-email-success-icon {
	margin-bottom: 15px;
}

.wbam-email-success-icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--wbam-success-color, #00a32a);
}

.wbam-email-success-message {
	margin: 0;
	font-size: var(--wbam-font-size-md);
	font-weight: 500;
}

/* Error State */
.wbam-email-error {
	margin-top: 15px;
	padding: 10px 15px;
	background: var(--wbam-error-bg, #fcf0f1);
	border-radius: 4px;
}

.wbam-email-error-message {
	margin: 0;
	color: var(--wbam-error-color, #d63638);
	font-size: var(--wbam-font-size-sm);
}

/* Loading State */
.wbam-email-form.wbam-loading .wbam-email-button {
	position: relative;
	color: transparent;
}

.wbam-email-form.wbam-loading .wbam-email-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid var(--wbam-text-light, #fff);
	border-top-color: transparent;
	border-radius: 50%;
	animation: wbam-spin 0.8s linear infinite;
}

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

/* Responsive */
@media screen and (max-width: 480px) {
	.wbam-ad-email-capture {
		padding: 25px 20px;
		border-radius: 0;
		max-width: 100%;
	}

	.wbam-email-headline {
		font-size: var(--wbam-font-size-lg);
	}

	.wbam-email-input,
	.wbam-email-button {
		padding: 12px;
		font-size: 14px;
	}
}

/* Dark Mode - Email Capture */
@media (prefers-color-scheme: dark) {
	.wbam-ad-email-capture {
		box-shadow: 0 4px 20px var(--wbam-shadow-strong);
	}

	.wbam-email-input {
		background: var(--wbam-bg-darker);
		border-color: var(--wbam-border-color-darker);
		color: var(--wbam-text-light);
	}

	.wbam-email-error {
		background: var(--wbam-error-bg-dark, rgba(214, 54, 56, 0.1));
	}
}

.dark-mode .wbam-email-input,
.theme-dark .wbam-email-input,
[data-theme="dark"] .wbam-email-input {
	background: var(--wbam-bg-darker);
	border-color: var(--wbam-border-color-darker);
	color: var(--wbam-text-light);
}

/* ==========================================================================
   Universal ad slot wrapper
   Applied by Placement_Engine::render_ad() around every rendered ad so
   responsive rules apply uniformly across image, code, AdSense, and
   rich-content ad types without each handler needing its own CSS.
   ========================================================================== */

.wbam-ad-slot {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
}

/* Images inside any slot: never overflow their container.
   Works for image ads and also for user-pasted <img> tags in
   rich-content / code ads. */
.wbam-ad-slot img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* iframes (AdSense, DFP, third-party tag managers) commonly render
   inside their own <ins> / <iframe>. Constrain them to the slot. */
.wbam-ad-slot iframe,
.wbam-ad-slot ins,
.wbam-ad-slot .adsbygoogle {
	max-width: 100%;
}

/* Responsive ads: fill the available width and let the script/image
   pick its own height. Most third-party responsive ad scripts
   (AdSense auto, Amazon OneLink, etc.) need width:100% on the
   outer container to trigger their own layout. */
.wbam-ad-slot--responsive {
	width: 100%;
}

.wbam-ad-slot--responsive iframe,
.wbam-ad-slot--responsive ins,
.wbam-ad-slot--responsive .adsbygoogle {
	width: 100% !important;
}