/**
 * Contact Page & WPForms Style Overrides
 *
 * Matches the DigitalNeurone theme's glassmorphic design language:
 * - Semi-transparent surfaces with backdrop blur
 * - Brand gradient accents (indigo → cyan → violet)
 * - Rounded corners, subtle shadows, smooth transitions
 *
 * Uses !important where necessary to override WPForms' high-specificity
 * selectors (e.g. div.wpforms-container-full button[type=submit]:hover).
 *
 * @package DigitalNeurone
 * @since 1.0.2
 */

/* ============================================
   Contact Hero
   ============================================ */
.contact-hero {
	min-height: 22rem;
}

@media (min-width: 768px) {
	.contact-hero {
		min-height: 26rem;
	}
}

.contact-hero__icon {
	font-size: 3.5rem;
	line-height: 1;
	background: linear-gradient(
		135deg,
		var(--color-brand-primary, #6366f1),
		var(--color-brand-accent, #06b6d4),
		var(--color-brand-secondary, #8b5cf6)
	);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-shift 4s ease infinite;
}

@media (min-width: 768px) {
	.contact-hero__icon {
		font-size: 4.5rem;
	}
}

/* ============================================
   Contact Info Cards
   ============================================ */
.contact-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
	transform: translateY(-2px);
}

/* ============================================
   WPForms Overrides — DigitalNeurone Theme
   ============================================ */

/* Reset default WPForms container */
.neurone-wpforms-wrap .wpforms-container {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Form wrapper reset */
.neurone-wpforms-wrap .wpforms-form {
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------
   Field Width Overrides
   WPForms limits .wpforms-field-medium to 60%
   and .wpforms-field-small to 25%. Force full width.
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-container input.wpforms-field-medium,
.neurone-wpforms-wrap .wpforms-container input.wpforms-field-small,
.neurone-wpforms-wrap .wpforms-container input.wpforms-field-large,
.neurone-wpforms-wrap .wpforms-container select.wpforms-field-medium,
.neurone-wpforms-wrap .wpforms-container select.wpforms-field-small,
.neurone-wpforms-wrap .wpforms-container select.wpforms-field-large,
.neurone-wpforms-wrap .wpforms-container textarea.wpforms-field-medium,
.neurone-wpforms-wrap .wpforms-container textarea.wpforms-field-small,
.neurone-wpforms-wrap .wpforms-container textarea.wpforms-field-large,
.neurone-wpforms-wrap .wpforms-container .wpforms-field-row.wpforms-field-medium,
.neurone-wpforms-wrap .wpforms-container .wpforms-field-row.wpforms-field-small,
.neurone-wpforms-wrap .wpforms-container .wpforms-field-row.wpforms-field-large {
	max-width: 100% !important;
}

/* Name field row blocks should fill evenly */
.neurone-wpforms-wrap .wpforms-field .wpforms-field-row .wpforms-field-row-block {
	flex: 1 1 0%;
}

/* -----------------------------------------------
   Field Containers
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field {
	padding: 0 0 1.25rem 0 !important;
}

/* -----------------------------------------------
   Labels
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field-label {
	font-family: var(--font-heading, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--neurone-text-secondary, #475569) !important;
	padding-left: 0.125rem;
	margin-bottom: 0.375rem;
}

/* Sub-labels */
.neurone-wpforms-wrap .wpforms-field-sublabel {
	font-family: var(--font-sans, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
	font-size: 0.6875rem !important;
	color: var(--neurone-text-muted, #94a3b8) !important;
}

/* Required asterisk */
.neurone-wpforms-wrap .wpforms-required-label {
	color: var(--color-brand-primary, #6366f1) !important;
	font-weight: 700 !important;
}

/* -----------------------------------------------
   Input Fields (text, email, url, tel, number)
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field input[type="text"],
.neurone-wpforms-wrap .wpforms-field input[type="email"],
.neurone-wpforms-wrap .wpforms-field input[type="url"],
.neurone-wpforms-wrap .wpforms-field input[type="tel"],
.neurone-wpforms-wrap .wpforms-field input[type="number"],
.neurone-wpforms-wrap .wpforms-field input[type="password"],
.neurone-wpforms-wrap .wpforms-field select,
.neurone-wpforms-wrap .wpforms-field textarea {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.875rem !important;
	font-family: var(--font-sans, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
	line-height: 1.5 !important;
	color: var(--neurone-text-primary, #0f172a) !important;
	background: color-mix(in srgb, var(--neurone-bg-secondary, #fff) 50%, transparent) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid color-mix(in srgb, var(--neurone-border, #e2e8f0) 60%, transparent) !important;
	border-radius: 0.75rem !important;
	outline: none !important;
	transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s !important;
	box-sizing: border-box !important;
}

/* Placeholder */
.neurone-wpforms-wrap .wpforms-field input::placeholder,
.neurone-wpforms-wrap .wpforms-field textarea::placeholder {
	color: var(--neurone-text-muted, #94a3b8) !important;
	opacity: 0.7 !important;
}

/* Focus */
.neurone-wpforms-wrap .wpforms-field input[type="text"]:focus,
.neurone-wpforms-wrap .wpforms-field input[type="email"]:focus,
.neurone-wpforms-wrap .wpforms-field input[type="url"]:focus,
.neurone-wpforms-wrap .wpforms-field input[type="tel"]:focus,
.neurone-wpforms-wrap .wpforms-field input[type="number"]:focus,
.neurone-wpforms-wrap .wpforms-field input[type="password"]:focus,
.neurone-wpforms-wrap .wpforms-field select:focus,
.neurone-wpforms-wrap .wpforms-field textarea:focus {
	border-color: var(--neurone-accent, #6366f1) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--neurone-accent, #6366f1) 15%, transparent) !important;
	background: var(--neurone-bg-secondary, #fff) !important;
}

/* -----------------------------------------------
   Textarea
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field textarea {
	resize: vertical;
	min-height: 8rem;
}

/* -----------------------------------------------
   Select / Dropdown
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.825L.6 3.425 1.4 2.625 6 7.225l4.6-4.6.8.8z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	padding-right: 2.5rem !important;
}

/* -----------------------------------------------
   Checkbox & Radio Overrides
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field input[type="checkbox"],
.neurone-wpforms-wrap .wpforms-field input[type="radio"] {
	accent-color: var(--neurone-accent, #6366f1);
	width: 1.125rem !important;
	height: 1.125rem !important;
	margin-right: 0.5rem;
}

/* -----------------------------------------------
   Submit Button
   Override WPForms' div.wpforms-container-full
   selectors which set background-color via
   CSS custom properties and a dark hover overlay.
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-submit-container {
	padding-top: 0.5rem !important;
}

/* Normal state */
.neurone-wpforms-wrap div.wpforms-container-full button[type="submit"],
.neurone-wpforms-wrap div.wpforms-container-full .wpforms-submit,
.neurone-wpforms-wrap .wpforms-submit-container button[type="submit"],
.neurone-wpforms-wrap .wpforms-submit-container .wpforms-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.75rem 2rem !important;
	height: auto !important;
	font-family: var(--font-heading, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #fff !important;
	background: linear-gradient(
		135deg,
		var(--color-brand-primary, #6366f1),
		var(--color-brand-accent, #06b6d4),
		var(--color-brand-secondary, #8b5cf6)
	) !important;
	background-size: 200% 200% !important;
	animation: gradient-shift 4s ease infinite !important;
	border: none !important;
	border-radius: 0.75rem !important;
	cursor: pointer !important;
	transition: transform 0.2s, box-shadow 0.2s !important;
	width: 100% !important;
	box-shadow: none !important;
}

/* Hover state — override WPForms' dark overlay gradient */
.neurone-wpforms-wrap div.wpforms-container-full button[type="submit"]:hover,
.neurone-wpforms-wrap div.wpforms-container-full button[type="submit"]:active,
.neurone-wpforms-wrap div.wpforms-container-full .wpforms-submit:hover,
.neurone-wpforms-wrap div.wpforms-container-full .wpforms-submit:active,
.neurone-wpforms-wrap .wpforms-submit-container button[type="submit"]:hover,
.neurone-wpforms-wrap .wpforms-submit-container button[type="submit"]:active,
.neurone-wpforms-wrap .wpforms-submit-container .wpforms-submit:hover,
.neurone-wpforms-wrap .wpforms-submit-container .wpforms-submit:active {
	background: linear-gradient(
		135deg,
		var(--color-brand-primary, #6366f1),
		var(--color-brand-accent, #06b6d4),
		var(--color-brand-secondary, #8b5cf6)
	) !important;
	background-size: 200% 200% !important;
	animation: gradient-shift 4s ease infinite !important;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--neurone-accent, #6366f1) 40%, transparent) !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Focus state */
.neurone-wpforms-wrap div.wpforms-container-full button[type="submit"]:focus,
.neurone-wpforms-wrap div.wpforms-container-full .wpforms-submit:focus,
.neurone-wpforms-wrap .wpforms-submit-container button[type="submit"]:focus,
.neurone-wpforms-wrap .wpforms-submit-container .wpforms-submit:focus {
	outline: none !important;
}

.neurone-wpforms-wrap div.wpforms-container-full button[type="submit"]:focus::after,
.neurone-wpforms-wrap div.wpforms-container-full .wpforms-submit:focus::after {
	display: none !important;
}

/* Loading spinner */
.neurone-wpforms-wrap .wpforms-submit-spinner {
	margin-left: 0.5rem;
}

/* -----------------------------------------------
   Confirmation / Success Message
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-confirmation-container-full {
	padding: 1.5rem 2rem !important;
	background: color-mix(in srgb, #10b981 10%, var(--neurone-bg-secondary, #fff)) !important;
	border: 1px solid color-mix(in srgb, #10b981 30%, transparent) !important;
	border-radius: 0.75rem !important;
	color: var(--neurone-text-primary, #0f172a) !important;
	font-family: var(--font-sans, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
}

/* -----------------------------------------------
   Validation Errors
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field.wpforms-has-error input,
.neurone-wpforms-wrap .wpforms-field.wpforms-has-error textarea,
.neurone-wpforms-wrap .wpforms-field.wpforms-has-error select {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

.neurone-wpforms-wrap label.wpforms-error,
.neurone-wpforms-wrap em.wpforms-error {
	font-family: var(--font-sans, 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif) !important;
	font-size: 0.75rem !important;
	color: #ef4444 !important;
	margin-top: 0.25rem !important;
}

/* -----------------------------------------------
   GDPR / Agreement Fields
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-field-gdpr-checkbox .wpforms-field-label,
.neurone-wpforms-wrap .wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--neurone-text-secondary, #475569) !important;
}

/* -----------------------------------------------
   reCAPTCHA spacing
   ----------------------------------------------- */
.neurone-wpforms-wrap .wpforms-recaptcha-container {
	margin-top: 0.5rem;
}

/* -----------------------------------------------
   Dark Mode — Comprehensive Overrides
   ----------------------------------------------- */
@media (prefers-color-scheme: dark) {
	/* Input text color */
	.neurone-wpforms-wrap .wpforms-field input[type="text"],
	.neurone-wpforms-wrap .wpforms-field input[type="email"],
	.neurone-wpforms-wrap .wpforms-field input[type="url"],
	.neurone-wpforms-wrap .wpforms-field input[type="tel"],
	.neurone-wpforms-wrap .wpforms-field input[type="number"],
	.neurone-wpforms-wrap .wpforms-field input[type="password"],
	.neurone-wpforms-wrap .wpforms-field select,
	.neurone-wpforms-wrap .wpforms-field textarea {
		color: var(--neurone-text-primary, #f8fafc) !important;
	}

	/* Labels — readable against dark background */
	.neurone-wpforms-wrap .wpforms-field-label {
		color: var(--neurone-text-secondary, #cbd5e1) !important;
	}

	/* Sub-labels */
	.neurone-wpforms-wrap .wpforms-field-sublabel {
		color: var(--neurone-text-muted, #94a3b8) !important;
	}

	/* Form title / description within the card */
	.contact-form-card h2 {
		color: var(--neurone-text-primary, #f8fafc) !important;
	}

	.contact-form-card > p {
		color: var(--neurone-text-muted, #94a3b8) !important;
	}

	/* Dropdown arrow for dark mode */
	.neurone-wpforms-wrap .wpforms-field select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.825L.6 3.425 1.4 2.625 6 7.225l4.6-4.6.8.8z'/%3E%3C/svg%3E") !important;
	}

	/* Success confirmation in dark mode */
	.neurone-wpforms-wrap .wpforms-confirmation-container-full {
		background: color-mix(in srgb, #10b981 10%, var(--neurone-bg-secondary, #1e293b)) !important;
		color: var(--neurone-text-primary, #f8fafc) !important;
	}

	.neurone-wpforms-wrap .wpforms-confirmation-container-full p {
		color: var(--neurone-text-primary, #f8fafc) !important;
	}

	/* Required asterisk stays visible */
	.neurone-wpforms-wrap .wpforms-required-label {
		color: var(--color-brand-accent, #22d3ee) !important;
	}
}