/*
 * Contact (Figma: desktop 335:260 · mobile 428:6898 — named "FAQs" in Figma). Form = Contact Form 7, markup in
 * plugin/zain-core/forms/contact.html. Card art: composite contact/card-art (pink shape + photo, clipped by the card).
 */

.zain-contact {
	display: grid;
	grid-template-columns: calc(520 * var(--s)) calc(669 * var(--s));
	column-gap: calc(163 * var(--s));
	align-items: start;
	width: calc(1628 * var(--s));
	align-content: start;
	min-height: calc(930 * var(--s));
	padding: 0 0 calc(40 * var(--s)) calc(181 * var(--s));
	border-radius: calc(30 * var(--s));
	background: image-set(url(../../img/contact/card-art-1x.webp) 1x, url(../../img/contact/card-art.webp) 2x) center / cover no-repeat, var(--wp--custom--color--ivory);
}

.zain-contact__text {
	padding-top: calc(168 * var(--s));
}

.zain-contact__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--line-height--hero);
}

.zain-contact__lead {
	margin-top: 32px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--note);
	line-height: var(--wp--custom--line-height--note);
}

.zain-contact__email {
	margin-top: 24px;
}

.zain-contact__email .wp-block-button__link {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--custom--type--contact-email--size);
	line-height: var(--wp--custom--type--contact-email--line);
	text-decoration: none;
}

.zain-contact__email .wp-block-button__link:hover {
	text-decoration: underline;
}

.zain-contact__form {
	margin-top: calc(84 * var(--s));
	padding: 80px;
	border-radius: 35px;
	background: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ Form (335:285) */

.zain-form,
.zain-form__fields {
	display: flex;
	flex-direction: column;
}

.zain-form__fields {
	gap: 20px;
}

.zain-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.zain-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--regular);
	line-height: var(--wp--custom--line-height--regular);
}

.zain-field__req {
	color: #c2666f;
}

.zain-field .wpcf7-form-control-wrap {
	display: block;
}

.zain-field input,
.zain-field textarea {
	display: block; /* inline inputs add line-box space under them */
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 12px 16px;
	border: 1px solid #d0d0d0;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.zain-field textarea {
	height: 140px;
	padding: 16px;
	resize: vertical;
}

.zain-field input:hover,
.zain-field textarea:hover {
	border-color: var(--wp--custom--color--forest-line);
}

.zain-field input:focus-visible,
.zain-field textarea:focus-visible {
	border-color: var(--wp--preset--color--forest);
	outline-offset: 0;
}

/* Field states (no Figma design, HANDOFF 2026-10-21): a field CF7 rejects gets a wine border and its message
   under it; the wine stays while it has focus, the ring turns wine too. */
.zain-field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--wine);
}

.zain-field [aria-invalid="true"]:focus-visible {
	outline-color: var(--wp--preset--color--wine);
}

.zain-form__consent {
	margin-top: 32px;
	color: #555;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.zain-form__consent .wpcf7-list-item {
	margin: 0;
}

.zain-form__consent label {
	display: flex;
	align-items: center;
	gap: 14px;
}

.zain-form__consent input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--forest);
}

.zain-form__consent a {
	color: inherit;
	font-weight: 600;
}

.zain-form__consent a:hover {
	color: var(--wp--preset--color--forest);
}

.zain-form__consent .wpcf7-not-valid input {
	outline: 2px solid var(--wp--preset--color--wine);
	outline-offset: 1px;
}

.zain-form__submit {
	display: grid; /* the spinner sits on the button, in the same cell */
	align-self: flex-start;
	margin-top: 40px;
}

.zain-form__submit > * {
	grid-area: 1 / 1;
}

.zain-form .wpcf7-submit {
	min-width: 167px;
	height: 50px;
	padding: 10px 34px;
	border: 0;
	border-radius: 12px;
	background: var(--wp--custom--color--forest-tint);
	color: var(--wp--preset--color--forest);
	font: inherit;
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

/* Hover and focus: honey, white text — the hero Book Now's hover (Habib 2026-10-22) */
.zain-form .wpcf7-submit:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--honey);
	color: var(--wp--preset--color--white);
}

/* Note under the button (RISK P1) and the trap field bots fill in (zain-core contact-form.php) */
.zain-form__note {
	margin: 16px 0 0;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--regular);
	line-height: var(--wp--custom--line-height--regular);
}

.zain-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Sending (Habib 2026-10-21): the button turns forest, its label gives way to a white spinner until CF7 answers,
   and it takes no second click. Reduced motion: "Sending…" instead of the spinning ring. */
.zain-form[data-status="submitting"] .wpcf7-submit {
	background: var(--wp--preset--color--forest);
	color: transparent;
	pointer-events: none;
}

.zain-form .wpcf7-spinner {
	place-self: center;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	border-top-color: var(--wp--preset--color--white);
	background: none;
	opacity: 1;
	pointer-events: none;
	animation: zain-spin 0.8s linear infinite;
}

.zain-form[data-status="submitting"] .wpcf7-spinner {
	visibility: visible;
}

.zain-form .wpcf7-spinner::before {
	content: none;
}

@keyframes zain-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zain-form .wpcf7-spinner {
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
	}

	.zain-form .wpcf7-spinner::before {
		content: "Sending…";
		position: static;
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--regular);
		font-weight: 600;
		animation: none;
	}
}

/* Messages sit in the gap under their field instead of pushing the form down: CF7 removes one the moment its
   field is fixed (on blur), and a form that jumps mid-click makes the click on the box or Submit miss. */
.zain-form .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	color: var(--wp--preset--color--wine);
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px; /* fits the 20px gap between fields */
}

.zain-form__consent .wpcf7-not-valid-tip {
	top: calc(100% + 6px);
}

/* Answer under the form: forest on its tint when sent, wine on rose for anything that needs fixing or failed */
.wpcf7 .zain-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid;
	border-radius: 12px;
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--wine);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.wpcf7 .zain-form:is([data-status="invalid"], [data-status="unaccepted"], [data-status="spam"], [data-status="failed"], [data-status="aborted"]) .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--wp--preset--color--wine) 30%, transparent); /* beats CF7's per-state colours */
}

.wpcf7 .zain-form[data-status="sent"] .wpcf7-response-output {
	border-color: var(--wp--custom--color--forest-line);
	background: var(--wp--custom--color--forest-tint);
	color: var(--wp--preset--color--forest);
}

@media (max-width: 1199px) {
	.zain-contact {
		grid-template-columns: 1fr;
		width: calc(416 * var(--s));
		min-height: 0;
		margin-top: 4px;
		/* The form doesn't scale with --s, so reserve the photo's band (1098 → 1546 in the frame) below it and pin
		   the art to the bottom: the photo always sits 24px under the form instead of behind it on narrow phones. */
		padding: 0 calc(12 * var(--s)) calc(448 * var(--s));
		border-radius: calc(20 * var(--s));
		background-image: image-set(url(../../img/contact/card-art-m-1x.webp) 1x, url(../../img/contact/card-art-m.webp) 2x);
		background-position: center bottom;
		background-size: 100% auto;
	}

	.zain-contact__text {
		padding: calc(66 * var(--s)) calc(16 * var(--s)) 0 calc(12 * var(--s));
	}

	.zain-contact__form {
		margin-top: 40px;
		padding: 40px 32px;
	}

	.zain-form__row {
		grid-template-columns: 1fr;
	}

	.zain-form__submit {
		align-self: stretch;
	}

	.zain-form .wpcf7-submit {
		width: 100%;
	}
}