/*
 * Contact Form 7 overrides — Shamims Web theme.
 * Makes CF7's generated markup (form-control wrappers, labels, validation
 * tips, response message, submit button) match the site's original
 * hand-coded contact form design exactly — regardless of whether the
 * Form tab uses our custom ".field" wrapper divs or CF7's own default
 * <p>-wrapped template, and regardless of any competing base styles
 * shipped in CF7's own plugin stylesheet (hence the !important guards
 * below — they only reset CF7's own defaults, nothing else on the site).
 */

/* Overall spacing between stacked fields — tightened per feedback (was 14px). */
.contact-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

/* Works whether a field lives in our div.field wrapper or a plain <p> tag
   (CF7's own default output). Removes browser/plugin default margins that
   were causing labels and inputs to look "stuck together". */
.contact-form .field,
.contact-form p {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	margin: 0 !important;
}

/* Hides the <br> that sits between the <label> and the field in the Form
   tab's current markup (<label>...</label><br><span>...</span>). It's no
   longer needed now that label/field are flex column items with their own
   gap, and leaving it in adds an extra blank line's worth of space.
   Removing it from the Form tab itself (see reply) is the cleaner fix, but
   this keeps things correct even if a <br> is ever left in by accident. */
.contact-form br {
	display: none !important;
}

/* Label styling + guaranteed spacing below the label, applied broadly so it
   works no matter how deeply nested the label is. */
.contact-form label {
	display: block !important;
	margin: 0 0 2px !important;
	font-size: 12.5px !important;
	font-family: var(--font-mono) !important;
	color: var(--text-3) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

/* CF7 wraps each field in <span class="wpcf7-form-control-wrap">. Force it to
   be a full-width block (its default is inline) so the input below drops to
   its own line with the gap defined above, instead of sitting glued to the
   label on the same line. */
.contact-form .wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* The actual input/textarea — force the same size & spacing as the original
   hand-coded fields regardless of CF7's own base stylesheet.
   :not([type="submit"]) matters here — CF7 tags the submit button with this
   same "wpcf7-form-control" class, so without this exclusion these rules were
   overriding the gradient submit button with plain dark-input styling. */
.contact-form input.wpcf7-form-control:not([type="submit"]),
.contact-form textarea.wpcf7-form-control {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: var(--bg-soft) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 12px !important;
	padding: 13px 16px !important;
	margin: 0 !important;
	color: var(--text-1) !important;
	font-family: var(--font-body) !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	outline: none !important;
	transition: border-color .25s, box-shadow .25s;
}
.contact-form textarea.wpcf7-form-control {
	min-height: 52px !important;
	resize: vertical !important;
}
.contact-form input.wpcf7-form-control:not([type="submit"]):focus,
.contact-form textarea.wpcf7-form-control:focus {
	border-color: var(--violet-soft) !important;
	box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18) !important;
}
.contact-form input.wpcf7-form-control:not([type="submit"])::placeholder,
.contact-form textarea.wpcf7-form-control::placeholder {
	color: var(--text-3) !important;
	opacity: 1;
}

/* Field validation error text (shown under a field on failed validation). */
.contact-form .wpcf7-not-valid-tip {
	color: var(--coral) !important;
	font-size: 12.5px !important;
	margin-top: 6px !important;
	font-family: var(--font-body) !important;
}

/* Red outline on invalid fields, matching the theme's focus-state language.
   Also excludes the submit button for the same reason as above. */
.contact-form input.wpcf7-form-control.wpcf7-not-valid:not([type="submit"]),
.contact-form textarea.wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--coral) !important;
	box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.18) !important;
}

/* Submit button: reset native <input type="submit"> chrome so .btn-primary
   renders identically to the original <button>, with generous spacing above it.
   These are spelled out explicitly (not just relying on the shared .btn-primary
   rule in style.css) so this button can never again be silently overridden by
   a generic ".wpcf7-form-control" rule from CF7's own stylesheet or elsewhere. */
.contact-form input[type="submit"].btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	margin-top: 6px !important;
	align-self: flex-start !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 14px 26px !important;
	border-radius: 999px !important;
	border: none !important;
}
.contact-form input[type="submit"].btn-primary {
	background: var(--grad-warm) !important;
	color: #12080A !important;
	box-shadow: 0 10px 30px -10px rgba(255, 107, 74, 0.55) !important;
}
.contact-form input[type="submit"].btn-primary:hover {
	filter: brightness(1.03);
}
.contact-form input[type="submit"].btn-primary::after {
	content: "→";
	margin-left: 10px;
	font-weight: 400;
}

/* Loading spinner CF7 shows next to the submit button while sending. */
.contact-form .wpcf7-spinner {
	margin-left: 12px;
	vertical-align: middle;
	opacity: 0.8;
}

/* Response message (success/error) shown below the form after submission —
   styled like the theme's own .form-status, but for CF7's response box. */
.contact-form .wpcf7-response-output {
	margin-top: 16px !important;
	padding: 12px 16px !important;
	border-radius: 12px !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	border: 1px solid var(--border-strong) !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--text-2) !important;
}

/* Success state. */
.contact-form.sent .wpcf7-response-output {
	border-color: var(--cyan) !important;
	color: var(--cyan) !important;
	background: rgba(34, 211, 238, 0.08) !important;
}

/* Error / spam / invalid / aborted states. */
.contact-form.invalid .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output {
	border-color: var(--coral) !important;
	color: var(--coral) !important;
	background: rgba(255, 107, 74, 0.08) !important;
}

/* CF7's hidden anti-spam / tracking fields shouldn't affect layout spacing. */
.contact-form .wpcf7-form-control-wrap:has(input[type="hidden"]) {
	display: none !important;
}