/* ==========================================
   CTA SECTION BACKGROUND
   Animated blob background
   ========================================== */

/* CTA section should have position relative for absolute blobs */
.cta {
	position: relative;
	overflow: visible; /* Allow blob background to extend beyond */
}

/* Animated blob background container - extends from previous section */
.cta-background {
	top: -120px; /* Extend into previous section for seamless blend */
	filter: url('#cta-plasma');
}

/* Blob color customization for CTA section */
.cta-blob {
	background: radial-gradient(
		circle,
		#ffedd5 0%,
		rgba(249, 115, 22, 0.15) 100%
	);
}

/* Ensure CTA content appears above background */
.cta .container {
	position: relative;
	z-index: 1;
}

/* Blob animations with unique timings */
#cta-blob-1 {
	animation: blob-float-1 22s ease-in-out infinite;
}

#cta-blob-2 {
	animation: blob-float-2 26s ease-in-out infinite 4s;
}

#cta-blob-3 {
	animation: blob-float-3 28s ease-in-out infinite 8s;
}

#cta-blob-4 {
	animation: blob-float-4 24s ease-in-out infinite 2s;
}

#cta-blob-5 {
	animation: blob-float-5 30s ease-in-out infinite 6s;
}

/* ==========================================
   CTA CARD
   ========================================== */

.cta-card {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 26px;
	background: linear-gradient(135deg, rgba(255, 237, 213, 0.7), rgba(219, 234, 254, 0.7)); /* Orange to blue gradient with 70% opacity */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Safari support */
}

.cta-card h2 {
	margin-bottom: 20px;
}

/* Gradient accent for heading */
.cta h2 .accent {
	background: linear-gradient(135deg, #F97316, #7C2D12);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #7C2D12;
}

.cta-card h3 {
	margin: 0;
	line-height: 1.4;
	font-size: clamp(20px, 4vw, 24px);
}

/* Download button in CTA content area */
.cta-download {
	margin-top: 32px;
}

.cta-actions {
	display: flex;
	gap: 12px;
}

/* Contact form container */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 420px;
}

/* Form field wrapper */
.form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Form labels */
.contact-form label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
}

.contact-form label .required {
	color: var(--accent);
	margin-left: 2px;
}

/* Field hints */
.field-hint {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
	margin-top: -2px;
}

/* Text inputs */
.contact-form input[type="text"],
.contact-form input[type="email"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder {
	color: var(--muted);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.1);
}

/* Textarea */
.contact-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.contact-form textarea::placeholder {
	color: var(--muted);
}

.contact-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.1);
}

/* Submit button loading state */
.contact-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Form feedback messages */
.form-message {
	display: none;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
}

.form-message.success {
	display: block;
	background: var(--accent-weak);
	color: var(--accent);
	border: 1px solid var(--accent);
}

.form-message.error {
	display: block;
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

/* Hide WordPress nonce field */
.contact-form input[type="hidden"] {
	display: none;
}

/* ==========================================
   RESPONSIVE: MOBILE (<680px)
   ========================================== */

/* Mobile responsive */
@media (max-width: 640px) {
	.cta-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.contact-form {
		max-width: 100%;
	}

	.contact-form button[type="submit"] {
		width: 100%;
	}
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================== */
/* Blob animations handled by shared blob-background.css */