/* AI-Genics — Contact page: Contact Form 7 "Contact page form" (Figma 1439:44959), inserted into the slot .ag-form-contact.
   CF7 renders <form class="ag-cf7 ag-cf7-contact">; every rule below is scoped to that class.
   Sizes: Figma px × --u. --u = 1px at 1920 and scales with the viewport above 1024 px (the same proportional model as the
   Elementor page), and is a plain 1px at ≤ 1024 px. Undesigned states (typed text, focus, invalid, response, sending) are
   kept minimal and on-brand: white text, a thin ice/beige inner outline, beige error tips, ice response line. */

.ag-cf7-contact { --u: calc(100vw / 1920); position: relative; margin: 0; font-family: var(--ag-body, 'DM Sans'), sans-serif; }
@media (max-width: 1024px) { .ag-cf7-contact { --u: 1px; } }
.ag-cf7-contact p { margin: 0; }
.ag-cf7-contact .ag-cf-field > p, .ag-cf7-contact .ag-cf-actions > p { display: contents; } /* CF7's automatic <p> */

/* grid: 2 × 302 px columns, 13 px column gap, 15 px row gap; the message spans both columns */
.ag-cf7-contact .ag-cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(13 * var(--u)); row-gap: calc(15 * var(--u)); }
.ag-cf7-contact .ag-cf-wide { grid-column: 1 / -1; }
.ag-cf7-contact .wpcf7-form-control-wrap { display: block; position: relative; }

/* fields: 60 px, ice @ 10 %, radius 10, no border; placeholder DM Sans 20/29 −2 % #b6d6dd at +23 px */
.ag-cf7-contact input.wpcf7-form-control,
.ag-cf7-contact textarea.wpcf7-form-control {
	display: block; box-sizing: border-box; width: 100%; height: calc(60 * var(--u)); margin: 0; padding: 0 calc(23 * var(--u));
	border: 0; border-radius: calc(10 * var(--u)); background: rgba(182, 214, 221, 0.1); box-shadow: none; outline: none;
	font-family: inherit; font-weight: 400; font-size: max(13px, calc(20 * var(--u))); line-height: calc(29 * var(--u)); letter-spacing: -0.02em;
	color: var(--ag-white, #fff); transition: box-shadow 0.2s, background-color 0.2s;
}
.ag-cf7-contact textarea.wpcf7-form-control { height: calc(193 * var(--u)); padding: calc(30 * var(--u)) calc(23 * var(--u)); resize: none; overflow: auto; }
.ag-cf7-contact .wpcf7-form-control::placeholder { color: var(--ag-ice, #b6d6dd); opacity: 1; }
.ag-cf7-contact input.wpcf7-form-control:focus,
.ag-cf7-contact textarea.wpcf7-form-control:focus { outline: none; background: rgba(182, 214, 221, 0.14); box-shadow: inset 0 0 0 1px rgba(182, 214, 221, 0.5); }
.ag-cf7-contact input.wpcf7-form-control:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s 0s; }

/* invalid: beige inner outline + the tip UNDER the field, in the flow — a long or two-line message pushes the next row down
   instead of being drawn over it (2026-10-16; it was absolutely positioned in the 15 px row gap) */
.ag-cf7-contact .wpcf7-form-control.wpcf7-not-valid,
.ag-cf7-contact .wpcf7-form-control.wpcf7-not-valid:focus { box-shadow: inset 0 0 0 1px var(--ag-beige, #edcdb8); }
.ag-cf7-contact .wpcf7-not-valid-tip {
	display: block; position: static; margin: calc(6 * var(--u)) 0 0; padding: 0 calc(23 * var(--u));
	font-family: inherit; font-weight: 400; font-size: max(12px, calc(14 * var(--u))); line-height: 1.3; color: var(--ag-beige, #edcdb8);
}

/* Submit Now: 617 × 70, radius 15, red + inner shadow; label Bai Jamjuree Bold 24/22 uppercase + 20 px chevron (gap 5);
   hover beige + black (Figma 1439:45479). Same transition as the site's ag-btn buttons. */
.ag-cf7-contact .ag-cf-actions { position: relative; margin-top: calc(15 * var(--u)); }
.ag-cf7-contact .ag-cf-submit {
	display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); box-sizing: border-box; width: 100%; height: calc(70 * var(--u));
	margin: 0; padding: 0 calc(30 * var(--u)); border: 0; border-radius: calc(15 * var(--u));
	background: var(--ag-red, #a2262d); box-shadow: inset 3px 0 20px 6px rgba(0, 0, 0, 0.2); color: var(--ag-white, #fff);
	font-family: var(--ag-heading, 'Bai Jamjuree'), sans-serif; font-weight: 700; font-size: max(14px, calc(24 * var(--u))); line-height: calc(22 * var(--u));
	letter-spacing: -0.005em; text-transform: uppercase; cursor: pointer; transition: background-color 1.28s, color 1.28s;
}
.ag-cf7-contact .ag-cf-submit::after {
	content: ""; flex-shrink: 0; width: max(14px, calc(20 * var(--u))); height: max(14px, calc(20 * var(--u))); background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 20 20'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ag-cf7-contact .ag-cf-submit:hover { background: var(--ag-beige, #edcdb8); color: var(--ag-black, #000); }
.ag-cf7-contact .ag-cf-submit:focus-visible { outline: 2px solid var(--ag-beige, #edcdb8); outline-offset: 3px; }

/* sending: CF7's spinner, inside the button on the right */
.ag-cf7-contact .wpcf7-spinner { position: absolute; top: 50%; right: calc(24 * var(--u)); margin: -12px 0 0; background-color: rgba(255, 255, 255, 0.3); }

/* response line under the button (inside the panel's 72 px bottom padding on desktop) */
.wpcf7 form.ag-cf7-contact .wpcf7-response-output {
	position: absolute; top: 100%; left: 0; right: 0; margin: calc(14 * var(--u)) 0 0; padding: 0; border: 0; text-align: center;
	font-family: inherit; font-weight: 400; font-size: max(13px, calc(16 * var(--u))); line-height: 1.5; color: var(--ag-ice, #b6d6dd);
}
.wpcf7 form.ag-cf7-contact.invalid .wpcf7-response-output,
.wpcf7 form.ag-cf7-contact.failed .wpcf7-response-output,
.wpcf7 form.ag-cf7-contact.aborted .wpcf7-response-output,
.wpcf7 form.ag-cf7-contact.spam .wpcf7-response-output { color: var(--ag-beige, #edcdb8); }

@media (max-width: 1024px) {
	.wpcf7 form.ag-cf7-contact .wpcf7-response-output { position: static; margin: 16px 0 0; }
}
@media (max-width: 767px) {
	.ag-cf7-contact .ag-cf-grid { grid-template-columns: minmax(0, 1fr); }
	.ag-cf7-contact input.wpcf7-form-control { height: 54px; font-size: 17px; padding: 0 18px; }
	.ag-cf7-contact textarea.wpcf7-form-control { height: 160px; font-size: 17px; padding: 18px; }
	.ag-cf7-contact .wpcf7-not-valid-tip { padding: 0 18px; }
	.ag-cf7-contact .ag-cf-submit { height: 60px; font-size: 20px; }
}

/* (2026-10-19) same error placement as Request a Demo: one short line directly under the field, no layout jump */
.ag-cf7-contact .wpcf7-form-control-wrap { position: relative; display: block; }
.ag-cf7-contact .wpcf7-not-valid-tip {
	position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 2; margin: 0; padding: 0 calc(4 * var(--u));
	font-size: max(12px, calc(13 * var(--u))); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #ffb4b4;
}
@media (max-width: 767px) { .ag-cf7-contact .wpcf7-not-valid-tip { padding: 0 4px; } }

/* (2026-10-19) a little more room: the message sits 7 px under its field with 6 px space below it (only while it is shown) */
.ag-cf7-contact .wpcf7-not-valid-tip { position: static; margin: 6px 0 4px; padding: 0 calc(6 * var(--u)); }