/* ==========================================================================
   WPForms reskin — every form on this site is built in WPForms per project
   direction; this file makes WPForms' own stable class hooks
   (wpforms-container, wpforms-field, wpforms-field-label, wpforms-submit,
   etc.) render with the same visual design as the original .contact-form-card
   component, instead of introducing a second, competing form look.
   WPForms' own theme CSS is set to "Base Styling Only" (Settings > General)
   so only structural/layout rules ship from WPForms itself — everything
   visual here is ours, no !important needed.
   ========================================================================== */

/* The white card look lives on .intellinez-form-card (the wrapper around
   both the form AND the "No spam..." hint below it), not on
   .wpforms-container itself — that way the hint text renders as part of
   the same visual box instead of floating below it. See template's
   contact-section markup. */
.intellinez-form-card {
	border-radius: var(--radius-2xl);
	border: 1px solid hsl(var(--border) / 0.5);
	background: hsl(var(--card));
	padding: 2rem;
}

.intellinez-form-card .form-hint {
	margin-top: 1.25rem;
}

.wpforms-container .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	/* Full width by default (a single field is its own row/"parent column").
	   wpforms-layout.js adds .wpforms-field--half/--third at runtime, only to
	   fields that actually have a same-size neighbor to pair with — see that
	   file for why a static CSS pairing rule can't do this safely. */
	flex: 1 1 100%;
	min-width: 0;
}
.wpforms-field--half { flex-basis: calc(50% - 0.625rem); }
.wpforms-field--third { flex-basis: calc(33.333% - 0.834rem); }

.wpforms-field-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	margin: 0;
}

.wpforms-required-label {
	color: hsl(var(--destructive));
	font-weight: 500;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field input[type="number"],
.wpforms-field textarea,
.wpforms-field select {
	width: 100%;
	/* !important: WPForms' own base CSS puts a max-width (60%/25% for its
	   medium/small size classes) on the input itself, on top of the width
	   the .wpforms-field wrapper (the actual "parent column") already gets
	   from --half/--third above — a second, redundant size calculation that
	   shrinks the field inside its own column and leaves dangling empty
	   space. The wrapper alone decides the column width; the field inside
	   it is always 100% of that column, full stop. */
	max-width: 100% !important;
	border-radius: var(--radius-md);
	border: 1px solid hsl(var(--input));
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	font-family: var(--font-sans);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
	cursor: pointer;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.wpforms-field textarea {
	/* !important here (unlike the rest of this file): WPForms' own
	   "Base Styling Only" CSS declares a competing height/resize rule at
	   the same specificity and loads after ours, so a plain override
	   silently lost this fight (visible resize handle, oversized box). */
	height: auto !important;
	min-height: 120px !important;
	max-height: none !important;
	resize: none !important;
}

.wpforms-field-checkbox fieldset,
.wpforms-field-radio fieldset,
.wpforms-field-gdpr-checkbox fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.wpforms-field-checkbox legend,
.wpforms-field-radio legend,
.wpforms-field-gdpr-checkbox legend {
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground));
}

.wpforms-field-checkbox ul,
.wpforms-field-radio ul,
.wpforms-field-gdpr-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wpforms-field-checkbox li,
.wpforms-field-radio li,
.wpforms-field-gdpr-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.wpforms-field-checkbox input[type="checkbox"],
.wpforms-field-radio input[type="radio"],
.wpforms-field-gdpr-checkbox input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: hsl(var(--primary));
	cursor: pointer;
}

.wpforms-field-checkbox label.wpforms-field-label-inline,
.wpforms-field-radio label.wpforms-field-label-inline,
.wpforms-field-gdpr-checkbox label.wpforms-field-label-inline {
	font-size: 0.875rem;
	color: hsl(var(--foreground));
	cursor: pointer;
}

.wpforms-field-description {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

.wpforms-error,
.wpforms-field input.wpforms-error,
.wpforms-field textarea.wpforms-error {
	border-color: hsl(var(--destructive)) !important;
}

label.wpforms-error {
	border: none !important;
	font-size: 0.75rem;
	color: hsl(var(--destructive));
	display: block;
}

.wpforms-submit-container {
	margin: 1.25rem 0 0 !important;
}

.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	width: 100%;
	height: 2.75rem;
	padding: 0 2rem;
	border: none;
	border-radius: var(--radius-md);
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--font-sans);
	color: hsl(var(--primary-foreground));
	background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
	box-shadow: 0 0 20px hsl(174 72% 46% / 0.15);
	cursor: pointer;
	transition: all 0.2s ease;
}
.wpforms-submit:hover { opacity: 0.9; }
.wpforms-submit:disabled { pointer-events: none; opacity: 0.5; }

.wpforms-confirmation-container {
	font-size: 0.875rem;
	color: hsl(var(--foreground));
	text-align: center;
	padding: 1rem 0 0;
}