/* =========================================================================
   Alrasly — Fluent Forms restyle (shared: /contact page + service-page modal)
   Zero plugin defaults remain. Scoped to .contact-form. The white card +
   two-column field grid are the .contact-form--card variant (the /contact page);
   the modal uses bare .contact-form (single column, the panel is the card).
   Brand law (CLAUDE.md) supreme: palette only, radius 0, squares only, Manrope.
   FF v6 markup: <fieldset> wraps .ff-el-group items; labels .ff-el-input--label,
   controls .ff-el-form-control inside .ff-el-input--content, submit .ff_submit_btn_wrapper.
   ========================================================================= */

/* ---------- card (the /contact page) ---------- */
.contact-form--card{
	background:var(--white);
	border:1px solid rgba(41,37,97,.12);
	border-top:3px solid var(--blue);
	padding:var(--space-6);
}

/* ---------- the field grid (FF nests groups in a <fieldset>) ---------- */
.contact-form .frm-fluent-form{ margin:0; }
.contact-form fieldset{
	border:0; margin:0; padding:0; min-inline-size:0;
	display:grid; grid-template-columns:1fr; gap:var(--space-4);
}
/* sr-only legend, pulled out of grid flow so it can't claim a cell */
.contact-form fieldset > legend{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.contact-form .ff-el-group{ margin:0; min-width:0; }
/* source-tracking hidden fields must not claim a grid cell */
.contact-form .ff-el-group:has(input[type="hidden"]){ display:none !important; }

/* ---------- labels ---------- */
.contact-form .ff-el-input--label{ margin:0 0 var(--space-2); padding:0; line-height:1; }
.contact-form .ff-el-input--label > label{
	display:inline-block; font-family:var(--font-latin);
	font-size:var(--fs-caption); font-weight:var(--fw-semibold); color:var(--navy);
	letter-spacing:.06em; text-transform:uppercase; line-height:1.3; margin:0;
}
[dir="rtl"] .contact-form .ff-el-input--label > label{ letter-spacing:normal; text-transform:none; }
/* kill FF's own asterisk (it renders on the label wrapper) — we draw our own mark */
.contact-form .ff-el-input--label::after,
.contact-form .ff-el-input--label::before{ content:none !important; }
/* required mark — a small blue square bar (2×8), tight to the label.
   content !important beats FF's own "label::after { content:' *' }". */
.contact-form .ff-el-input--label.ff-el-is-required > label::after{
	content:'' !important; display:inline-block; width:2px; height:8px;
	background:var(--blue); margin-inline-start:6px; vertical-align:middle;
}

/* ---------- inputs / select / textarea ---------- */
.contact-form .ff-el-form-control{
	display:block; width:100%; box-sizing:border-box; height:48px;
	padding:0 var(--space-3);
	background:var(--white) !important; color:var(--ink) !important;
	border:1px solid var(--ink) !important; box-shadow:none !important;
	font-family:var(--font-latin); font-size:var(--fs-body); line-height:1.4;
	transition:border-color .15s ease;
}
[dir="rtl"] .contact-form .ff-el-form-control{ font-family:var(--font-arabic); }
.contact-form textarea.ff-el-form-control{ height:auto; min-height:120px; padding:var(--space-3); resize:vertical; }
.contact-form .ff-el-form-control::placeholder{ color:rgba(45,45,45,.5); }

/* hover → navy edge; focus → 2px blue square ring (the global pattern) */
.contact-form .ff-el-form-control:hover{ border-color:var(--navy) !important; }
.contact-form .ff-el-form-control:focus,
.contact-form .ff-el-form-control:focus-visible{
	border-color:var(--blue) !important;
	outline:2px solid var(--blue) !important; outline-offset:2px;
}

/* ---------- select: strip native skin, draw a square navy chevron (CSS triangle) ---------- */
.contact-form select.ff-el-form-control{
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	cursor:pointer; padding-inline-end:var(--space-7);
}
.contact-form .ff-el-input--content{ position:relative; }
.contact-form .ff-el-input--content:has(select)::after{
	content:''; position:absolute; top:50%; inset-inline-end:var(--space-4); margin-top:-3px;
	width:0; height:0;
	border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--navy);
	pointer-events:none;
}
.contact-form select.ff-el-form-control::-ms-expand{ display:none; }

/* ---------- submit — full-width of its column, navy with the brand fill-sweep ---------- */
.contact-form .ff_submit_btn_wrapper{ margin:0; }
.contact-form .ff-btn-submit{
	display:inline-flex; align-items:center; justify-content:center;
	width:100%; height:52px; padding:0 var(--space-5);
	font-family:var(--font-latin); font-size:var(--fs-body); font-weight:var(--fw-semibold); line-height:1.2;
	color:var(--white) !important; border:0 !important; cursor:pointer; text-shadow:none !important;
	background-color:var(--navy) !important;
	background-image:linear-gradient(90deg, var(--blue) 0 50%, var(--navy) 50%) !important;
	background-repeat:no-repeat; background-size:200% 100% !important; background-position:100% 0 !important;
	box-shadow:none !important;
	transition:background-position .18s ease, transform .12s ease;
}
.contact-form .ff-btn-submit:hover,
.contact-form .ff-btn-submit:focus-visible{ background-position:0 0 !important; color:var(--white) !important; }
.contact-form .ff-btn-submit:active{ transform:translateY(1px); background-image:linear-gradient(90deg, var(--blue-active) 0 50%, var(--navy-active) 50%) !important; }
.contact-form .ff-btn-submit:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:2px; }

/* ---------- validation — on-palette navy, no plugin red, no default error boxes ---------- */
.contact-form .ff-el-is-error .ff-el-form-control,
.contact-form .ff-el-form-control.has-error{ border-color:var(--navy) !important; }
.contact-form .error,
.contact-form .text-danger,
.contact-form .ff-el-is-error .error{
	color:var(--navy) !important; font-size:var(--fs-caption); font-weight:var(--fw-semibold);
	margin-top:var(--space-1); background:none !important; border:0 !important; padding:0 !important;
}
.contact-form .ff-message-error,
.contact-form .ff-errors-in-stack{ color:var(--navy) !important; background:none !important; border:0 !important; padding:0 !important; }

/* ---------- success — brand tile ---------- */
.contact-form .ff-message-success{
	background:var(--offwhite); border:1px solid rgba(41,37,97,.12); border-left:3px solid var(--blue);
	padding:var(--space-5); color:var(--navy); font-size:var(--fs-body); line-height:var(--lh-body);
}

/* ---------- two-column field grid (card only, ≥1040px) ---------- */
@media (min-width:1040px){
	.contact-form--card fieldset{ grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5); }
	/* Message (the textarea group) + submit span the full row; everything else pairs up. */
	.contact-form--card fieldset > .ff-el-group:has(textarea){ grid-column:1 / -1; }
}