/* ==========================================================================
   Archfine v2 - form plugins in the theme design.
   WPForms (modern render) and Contact Form 7 output inside .af2-plugin-form
   (contact page) or anywhere on a v2 page take the same look as the theme's
   own contact form: paper inputs, violet focus ring, dark gradient button.
   ========================================================================== */

/* ---------- WPForms ---------- */
.af2-site .wpforms-container.wpforms-container-full {
	--wpforms-field-border-radius: 12px;
	--wpforms-field-border-color: var(--af2-line);
	--wpforms-field-background-color: var(--af2-paper);
	--wpforms-field-text-color: var(--af2-ink);
	--wpforms-label-color: var(--af2-ink);
	--wpforms-label-sublabel-color: var(--af2-muted);
	--wpforms-label-error-color: var(--af2-bad);
	--wpforms-button-border-radius: 14px;
	--wpforms-button-background-color: #15131f;
	--wpforms-button-text-color: #fff;
	--wpforms-field-size-input-height: 48px;
	--wpforms-field-size-font-size: 15.5px;
	--wpforms-label-size-font-size: 13.5px;
	--wpforms-label-size-sublabel-font-size: 12.5px;
	margin: 0;
	font-family: var(--af2-font);
}
.af2-plugin-form { margin-top: 24px; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.af2-site .wpforms-container .wpforms-form .wpforms-field { grid-column: 1 / -1; margin: 0; padding: 0; }
.af2-site .wpforms-container .wpforms-form .wpforms-field.wpforms-field-email,
.af2-site .wpforms-container .wpforms-form .wpforms-field.wpforms-field-text { grid-column: span 1; }
.af2-site .wpforms-container .wpforms-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-label,
.af2-site .wpforms-container .wpforms-form legend.wpforms-field-label {
	display: block; margin: 0 0 8px; padding: 0; color: var(--af2-ink); font: 600 13.5px/1.35 var(--af2-font); letter-spacing: 0;
}
.af2-site .wpforms-container .wpforms-form .wpforms-required-label { color: var(--af2-brand); font-weight: 600; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-sublabel { margin-top: 6px; color: var(--af2-faint); font-size: 12.5px; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-row::before,
.af2-site .wpforms-container .wpforms-form .wpforms-field-row::after { display: none; }
.af2-site .wpforms-container .wpforms-form .wpforms-field-row-block { width: auto; margin: 0; padding: 0; float: none; }
.af2-site .wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea) {
	width: 100%; max-width: none; height: auto; min-height: 48px; margin: 0; padding: 12px 14px;
	border-radius: 12px; border: 1px solid var(--af2-line); background: var(--af2-paper); color: var(--af2-ink);
	font: 400 15.5px/1.4 var(--af2-font); box-shadow: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.af2-site .wpforms-container .wpforms-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.af2-site .wpforms-container .wpforms-form :is(input, select, textarea):hover { border-color: #d9d4ca; }
.af2-site .wpforms-container .wpforms-form :is(input, select, textarea):focus {
	outline: none; background: #fff; border-color: var(--af2-brand); box-shadow: 0 0 0 4px rgba(107, 85, 255, .14);
}
.af2-site .wpforms-container .wpforms-form :is(input, select, textarea).wpforms-error {
	border-color: var(--af2-bad); box-shadow: 0 0 0 4px rgba(229, 72, 77, .1);
}
.af2-site .wpforms-container .wpforms-form em.wpforms-error,
.af2-site .wpforms-container .wpforms-form label.wpforms-error { display: block; margin-top: 6px; padding: 0; color: #b4232a; font: 500 13px/1.4 var(--af2-font); font-style: normal; }
.af2-site .wpforms-container .wpforms-form .wpforms-submit-container { margin: 6px 0 0; padding: 0; }
.af2-site .wpforms-container .wpforms-form button.wpforms-submit,
.af2-site .wpforms-container .wpforms-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: auto; min-height: 52px; margin: 0; padding: 0 26px;
	border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: 600 16px/1 var(--af2-font);
	background: linear-gradient(180deg, #2b2554 0%, #15131f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(13, 14, 20, .2), 0 10px 24px -10px rgba(74, 52, 224, .55);
	transition: transform .2s var(--af2-ease), background .2s, opacity .2s;
}
.af2-site .wpforms-container .wpforms-form button.wpforms-submit::after {
	content: ''; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='m22 2-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='m22 2-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.af2-site .wpforms-container .wpforms-form button.wpforms-submit:hover { transform: translateY(-1px); background: linear-gradient(180deg, #3a2f7a 0%, #1b1730 100%); }
.af2-site .wpforms-container .wpforms-form button.wpforms-submit:focus-visible { outline: 2px solid var(--af2-brand); outline-offset: 3px; }
.af2-site .wpforms-container .wpforms-form .wpforms-submit-spinner { margin-left: 10px; vertical-align: middle; }
.af2-site .wpforms-confirmation-container-full,
.af2-site div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px 18px; border-radius: 14px;
	background: rgba(18, 162, 107, .09); border: 1px solid rgba(18, 162, 107, .28); color: #0b6e49; font-size: 15px; line-height: 1.55;
}
.af2-site .wpforms-confirmation-container-full p { margin: 0; }
.af2-site .wpforms-container .wpforms-error-container,
.af2-site .wpforms-container .wpforms-error-alert { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .28); color: #b4232a; font-size: 14.5px; }

/* ---------- Contact Form 7 ---------- */
.af2-site .wpcf7 form { display: grid; gap: 18px; }
.af2-site .wpcf7 form p { margin: 0; }
.af2-site .wpcf7 label { display: grid; gap: 8px; color: var(--af2-ink); font: 600 13.5px/1.35 var(--af2-font); }
.af2-site .wpcf7 .wpcf7-form-control-wrap { display: block; }
.af2-site .wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea) {
	width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--af2-line); background: var(--af2-paper);
	color: var(--af2-ink); font: 400 15.5px/1.4 var(--af2-font); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.af2-site .wpcf7 textarea { min-height: 150px; resize: vertical; }
.af2-site .wpcf7 :is(input, select, textarea):focus { outline: none; background: #fff; border-color: var(--af2-brand); box-shadow: 0 0 0 4px rgba(107, 85, 255, .14); }
.af2-site .wpcf7 .wpcf7-not-valid { border-color: var(--af2-bad); }
.af2-site .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #b4232a; font-size: 13px; font-weight: 500; }
.af2-site .wpcf7 input[type="submit"] {
	justify-self: start; min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: 600 16px/1 var(--af2-font);
	background: linear-gradient(180deg, #2b2554 0%, #15131f 100%); box-shadow: 0 10px 24px -10px rgba(74, 52, 224, .55);
}
.af2-site .wpcf7 form .wpcf7-response-output { margin: 0; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; }
.af2-site .wpcf7 form.sent .wpcf7-response-output { border-color: rgba(18, 162, 107, .4); background: rgba(18, 162, 107, .09); color: #0b6e49; }
.af2-site .wpcf7 form.invalid .wpcf7-response-output, .af2-site .wpcf7 form.failed .wpcf7-response-output { border-color: rgba(229, 72, 77, .35); background: rgba(229, 72, 77, .08); color: #b4232a; }

@media (max-width: 640px) {
	.af2-site .wpforms-container .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; }
	.af2-site .wpforms-container .wpforms-form .wpforms-field.wpforms-field-email,
	.af2-site .wpforms-container .wpforms-form .wpforms-field.wpforms-field-text { grid-column: 1 / -1; }
}

/* WPForms sets fixed widths/heights per field size (medium = 60% / 120px textarea); the theme layout owns these. */
.af2-site div.wpforms-container-full .wpforms-form .wpforms-field-row,
.af2-site div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium { max-width: none !important; width: 100% !important; }
.af2-site div.wpforms-container-full .wpforms-form .wpforms-field-row-block { width: auto !important; max-width: none !important; }
.af2-site div.wpforms-container-full .wpforms-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select) { width: 100% !important; max-width: 100% !important; height: 48px !important; }
.af2-site div.wpforms-container-full .wpforms-form textarea { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 150px !important; }
.af2-site div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-medium,
.af2-site div.wpforms-container-full .wpforms-form .wpforms-field-medium { max-width: 100% !important; }
.af2-site div.wpforms-container-full .wpforms-confirmation-container-full,
.af2-site div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: rgba(18, 162, 107, .09) !important; border: 1px solid rgba(18, 162, 107, .28) !important; color: #0b6e49 !important; border-radius: 14px !important; padding: 16px 18px !important;
}
