/**
 * Charitable Divi Builder Styles
 *
 * Styles for Charitable modules in the Divi Visual Builder.
 *
 * @package Charitable
 * @since 1.8.12
 */

/* ==========================================================================
   Preview Container - Visual Builder
   ========================================================================== */

/**
 * Main preview wrapper for VB AJAX previews.
 * Disables all interactions while maintaining visual appearance.
 */
.charitable-divi-vb-preview,
.charitable-divi-preview {
	position: relative;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Disable pointer events on container and ALL descendants */
.charitable-divi-vb-preview,
.charitable-divi-vb-preview *,
.charitable-divi-preview,
.charitable-divi-preview * {
	pointer-events: none !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
}

/* Override cursor for all elements */
.charitable-divi-vb-preview *,
.charitable-divi-preview * {
	cursor: default !important;
}

/* Disable ALL hover effects */
.charitable-divi-vb-preview *:hover,
.charitable-divi-preview *:hover,
.charitable-divi-vb-preview *:focus,
.charitable-divi-preview *:focus,
.charitable-divi-vb-preview *:active,
.charitable-divi-preview *:active {
	transform: none !important;
	opacity: inherit !important;
	box-shadow: inherit !important;
	background-color: inherit !important;
	color: inherit !important;
	border-color: inherit !important;
	text-decoration: inherit !important;
}

/* Specifically target common interactive elements */
.charitable-divi-vb-preview a,
.charitable-divi-vb-preview button,
.charitable-divi-vb-preview input,
.charitable-divi-vb-preview select,
.charitable-divi-vb-preview textarea,
.charitable-divi-vb-preview .charitable-button,
.charitable-divi-vb-preview .donate-button,
.charitable-divi-vb-preview .et_pb_button,
.charitable-divi-vb-preview [role="button"] {
	pointer-events: none !important;
	cursor: default !important;
}

/* Disable link hover underlines */
.charitable-divi-vb-preview a:hover,
.charitable-divi-preview a:hover {
	text-decoration: none !important;
}

/* Disable button hover states */
.charitable-divi-vb-preview button:hover,
.charitable-divi-vb-preview .charitable-button:hover,
.charitable-divi-vb-preview .donate-button:hover,
.charitable-divi-vb-preview .et_pb_button:hover,
.charitable-divi-preview button:hover,
.charitable-divi-preview .charitable-button:hover,
.charitable-divi-preview .donate-button:hover {
	background: inherit !important;
	color: inherit !important;
	transform: none !important;
	box-shadow: inherit !important;
}

.charitable-divi-preview-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 500;
	border-radius: 3px;
	z-index: 100;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	pointer-events: none !important;
}

/* ==========================================================================
   Placeholder Styles
   ========================================================================== */

.charitable-divi-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: #f7f7f7;
	border: 2px dashed #ddd;
	border-radius: 4px;
	text-align: center;
	min-height: 150px;
}

.charitable-divi-placeholder-icon {
	color: #999;
	margin-bottom: 15px;
}

.charitable-divi-placeholder-icon svg {
	width: 48px;
	height: 48px;
}

.charitable-divi-placeholder-text {
	color: #666;
	font-size: 14px;
	margin: 0;
	max-width: 300px;
}

/* ==========================================================================
   Feedback Section
   ========================================================================== */

.charitable-divi-feedback-notice {
	padding: 15px;
	background: #f0f6fc;
	border: 1px solid #c8e1ff;
	border-radius: 4px;
}

.charitable-divi-feedback-notice p {
	margin: 0 0 10px;
	color: #24292e;
}

.charitable-divi-feedback-notice p:last-child {
	margin-bottom: 0;
}

.charitable-divi-feedback-notice a.et-fb-button {
	display: inline-block;
	text-decoration: none;
}

/* ==========================================================================
   Module-Specific Styles
   ========================================================================== */

/* Ensure forms display correctly in preview */
.charitable-divi-preview .charitable-donation-form,
.charitable-divi-preview .campaign,
.charitable-divi-preview .campaigns {
	opacity: 1;
}

/* Disable all interactive elements in preview */
.charitable-divi-preview input,
.charitable-divi-preview select,
.charitable-divi-preview textarea,
.charitable-divi-preview button,
.charitable-divi-preview a {
	pointer-events: none !important;
	cursor: default !important;
}

/* Style donate buttons in preview */
.charitable-divi-preview .donate-button,
.charitable-divi-preview .charitable-donate-button {
	opacity: 0.9;
}

/* ==========================================================================
   Campaigns Grid Preview
   ========================================================================== */

.charitable-divi-preview .campaign-loop {
	pointer-events: none;
}

/* ==========================================================================
   Dark Mode Support (Divi Builder)
   ========================================================================== */

.et-fb-root-ancestor--dark .charitable-divi-placeholder {
	background: #2b2b2b;
	border-color: #444;
}

.et-fb-root-ancestor--dark .charitable-divi-placeholder-icon {
	color: #666;
}

.et-fb-root-ancestor--dark .charitable-divi-placeholder-text {
	color: #999;
}

.et-fb-root-ancestor--dark .charitable-divi-feedback-notice {
	background: #1e3a5f;
	border-color: #2c5282;
}

.et-fb-root-ancestor--dark .charitable-divi-feedback-notice p {
	color: #e2e8f0;
}

/* ==========================================================================
   Donate Button Module Styles
   ========================================================================== */

/* Button wrapper for alignment */
.charitable-button-wrapper {
	width: 100%;
}

/*
 * Donate-button builder-preview styles — neutral structural defaults only.
 *
 * Pre-1.8.16.1 this rule hardcoded padding, teal background, white text, font-
 * weight 600, border-radius 4px, and so on. That was fine for D4 legacy
 * previews (this stylesheet doesn't load on the frontend), but on D5 it fought
 * the Divi design controls and produced builder/frontend visual drift the
 * customer could see. Everything visual is now deferred to either the frontend
 * charitable.css base (also loaded in the VB iframe) or the user's Divi
 * design-tab overrides.
 */
.charitable-button.donate-button,
.charitable-button.donate-button.et_pb_button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Link style donate button */
.charitable-donate-link {
	color: #29c4a9;
	text-decoration: underline;
	font-weight: 500;
	transition: color 0.2s ease;
}

.charitable-donate-link:hover {
	color: #22a897;
}

/* ==========================================================================
   Responsive Column Grid
   ========================================================================== */

/* Ensure campaigns grid uses flexbox */
.et_pb_charitable_campaigns .campaign-loop,
.et_pb_charitable_campaigns .campaigns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.et_pb_charitable_campaigns .campaign-loop > li,
.et_pb_charitable_campaigns .campaigns .campaign {
	box-sizing: border-box;
}

/* ==========================================================================
   Custom CSS Toggle Styles
   ========================================================================== */

/* Ensure custom CSS targets work correctly */
.et_pb_charitable_campaign .campaign-title,
.et_pb_charitable_campaigns .campaign-title,
.et_pb_charitable_campaign h1,
.et_pb_charitable_campaign h2,
.et_pb_charitable_campaign h3 {
	margin-top: 0;
}

/* Form field styles */
.et_pb_charitable_donation_form input[type="text"],
.et_pb_charitable_donation_form input[type="email"],
.et_pb_charitable_donation_form input[type="number"],
.et_pb_charitable_donation_form select,
.et_pb_charitable_donation_form textarea {
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
   Visual Builder Integration
   ========================================================================== */

/* Module container in builder */
.et_pb_charitable_campaign,
.et_pb_charitable_campaigns,
.et_pb_charitable_donation_form,
.et_pb_charitable_donate_button {
	position: relative;
}

/* Fix z-index issues in builder */
.et-fb .et_pb_charitable_campaign,
.et-fb .et_pb_charitable_campaigns,
.et-fb .et_pb_charitable_donation_form,
.et-fb .et_pb_charitable_donate_button {
	z-index: 1;
}