/*
 * Forms pages (exm-page--forms): Request a Quote and Membership Application.
 * Restyles the markup of the forms module (modules/forms, shortcodes [emiratesx_quote_form] and
 * [emiratesx_membership_form]) with CSS only. No PHP, field name, id, name, nonce, honeypot or behaviour is touched.
 * Core: modern.css. The module's own rules (assets/forms.css, selectors .ex-forms*) are kept and overridden here:
 * every selector starts with .exm-page--forms (body class and page marker), so these rules win whatever the load order
 * (on a page that is not request-a-quote or membership-application the module loads its stylesheet late, in the footer).
 *
 * Layout: dark page, the intro (kicker, h1, lead) sticks on the left, the form is an ivory card on the right.
 * Tokens: the module reads --exf-* variables, they are set once on .ex-forms below.
 */

/* ------------------------------------------------------------------ page shell */
.exm-page--forms .exm-formpage.e-con {
	position: relative;
	display: block;
	isolation: isolate;
	padding: clamp(120px, 12vw, 176px) 0 clamp(80px, 9vw, 140px);
}
.exm-page--forms .exm-formpage.e-con::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 55% at 92% -6%, rgba(195, 170, 120, .16), transparent 60%),
		radial-gradient(ellipse 45% 40% at 0% 100%, rgba(195, 170, 120, .07), transparent 60%);
}
.exm-page--forms .exm-formpage > .exm-frame { position: relative; z-index: 1; }
.exm-page--forms .exm-formpage__grid.e-con {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.exm-page--forms .exm-formpage__intro.e-con {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.exm-page--forms .exm-formpage__intro .exm-kicker .elementor-heading-title { margin-bottom: clamp(24px, 3vw, 40px); }
.exm-page--forms .exm-formpage__intro .exm-h1 .elementor-heading-title { font-size: clamp(42px, 4.7vw, 72px); }
.exm-page--forms .exm-formpage__intro .exm-lead { padding-top: clamp(22px, 2.4vw, 32px); }
.exm-page--forms .exm-formpage__intro .exm-lead .elementor-widget-container { max-width: 420px; }
.exm-page--forms .exm-formpage__form.e-con { display: block; min-width: 0; }

@keyframes exmf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.exm-page--forms .exm-formpage__intro > .elementor-widget { animation: exmf-rise .9s cubic-bezier(.22, 1, .36, 1) both; }
.exm-page--forms .exm-formpage__intro > .elementor-widget:nth-child(2) { animation-delay: .1s; }
.exm-page--forms .exm-formpage__intro > .elementor-widget:nth-child(3) { animation-delay: .22s; }
.exm-page--forms .exm-formpage__form .ex-forms { animation: exmf-rise 1s .18s cubic-bezier(.22, 1, .36, 1) both; }

/* ------------------------------------------------------------------ the card and its tokens */
.exm-page--forms .ex-forms {
	--exf-fg: #101B18;
	--exf-soft: #535D55;
	--exf-rule: #D9D2C5;
	--exf-field-bg: #FBF9F4;
	--exf-field-line: #8F8774;
	--exf-accent: #101B18;
	--exf-error: #9B2C1F;
	--exf-focus: #101B18;
	--exf-btn-bg: #101B18;
	--exf-btn-fg: #F4F0E7;
	--exf-btn-border: #101B18;
	--exf-btn-bg-hover: #C3AA78;
	--exf-btn-fg-hover: #101B18;
	--exf-btn-border-hover: #C3AA78;
	--exf-ghost-hover: rgba(16, 27, 24, .07);
	--exf-box-bg: rgba(16, 27, 24, .045);
	--exf-gold: #C3AA78;
	--exf-panel: #EDE8DD;
	color-scheme: light;
	max-width: none;
	margin: 0;
	padding: clamp(26px, 3.6vw, 56px);
	border-top: 2px solid var(--exf-gold);
	border-radius: 2px;
	background: #F4F0E7;
	color: var(--exf-fg);
	font-size: 16px;
	line-height: 1.6;
}
/* one calm grid: two columns of fields on a wide card, one on a narrow one */
.exm-page--forms .ex-forms .ex-forms__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 24px;
}
.exm-page--forms .ex-forms .ex-forms__form > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="full_name"],
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="email_address"],
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="company_organisation"],
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="country_of_residence"],
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="preferred_dates_timeframe"],
.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row="estimated_budget_usd"] { grid-column: auto; }

.exm-page--forms .ex-forms .ex-forms__lead:not(:empty) { margin: 0 0 30px; }
.exm-page--forms .ex-forms .ex-forms__review-note,
.exm-page--forms .ex-forms .ex-forms__intro {
	margin: 0;
	padding: 16px 22px;
	border-left: 2px solid var(--exf-gold);
	background: var(--exf-panel);
	color: #26332C;
	font-size: 14.5px;
	line-height: 1.65;
}
.exm-page--forms .ex-forms .ex-forms__required-note {
	margin: 0 0 -10px;
	color: var(--exf-soft);
	font-size: 12px;
	letter-spacing: .06em;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ labels and controls */
.exm-page--forms .ex-forms .ex-forms__label,
.exm-page--forms .ex-forms .ex-forms__legend {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	color: var(--exf-fg);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
}
.exm-page--forms .ex-forms .ex-forms__star { color: #766B54; font-weight: 600; }
.exm-page--forms .ex-forms .ex-forms__input {
	min-height: 54px;
	padding: 14px 16px;
	border: 1px solid var(--exf-field-line);
	border-radius: 2px;
	background-color: var(--exf-field-bg);
	color: var(--exf-fg);
	font-size: 16px;
	line-height: 1.45;
	transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.exm-page--forms .ex-forms .ex-forms__input:hover { border-color: var(--exf-fg); }
.exm-page--forms .ex-forms .ex-forms__input:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--exf-fg);
	background-color: #FFFFFF;
	box-shadow: 0 0 0 1px var(--exf-fg), inset 0 -3px 0 0 var(--exf-gold);
}
.exm-page--forms .ex-forms .ex-forms__input:-webkit-autofill { -webkit-text-fill-color: #101B18; box-shadow: 0 0 0 1000px #FBF9F4 inset; }
.exm-page--forms .ex-forms .ex-forms__input[aria-invalid="true"] {
	border-color: var(--exf-error);
	box-shadow: inset 3px 0 0 0 var(--exf-error);
}
.exm-page--forms .ex-forms .ex-forms__input[aria-invalid="true"]:focus {
	border-color: var(--exf-error);
	box-shadow: 0 0 0 1px var(--exf-error), inset 0 -3px 0 0 var(--exf-gold);
}
.exm-page--forms .ex-forms .ex-forms__textarea { min-height: 190px; line-height: 1.65; }
.exm-page--forms .ex-forms .ex-forms__select {
	padding-inline-end: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101B18' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12px 8px;
}
.exm-page--forms .ex-forms .ex-forms__input--code { max-width: 11em; font-size: 20px; letter-spacing: .32em; }
.exm-page--forms .ex-forms .ex-forms__input option { background: #FBF9F4; color: #101B18; }

/* inline error under a field: a small diamond and bold text, never colour alone */
.exm-page--forms .ex-forms .ex-forms__error {
	margin: 10px 0 0;
	color: var(--exf-error);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
}
.exm-page--forms .ex-forms .ex-forms__error::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 9px;
	background: currentColor;
	vertical-align: .12em;
	transform: rotate(45deg);
}

/* error summary (focus moves here after a failed submit) */
.exm-page--forms .ex-forms .ex-forms__summary {
	padding: 20px 24px;
	border: 1px solid var(--exf-error);
	border-left-width: 4px;
	border-radius: 2px;
	background: rgba(155, 44, 31, .06);
	color: var(--exf-fg);
	font-size: 15px;
}
.exm-page--forms .ex-forms .ex-forms__summary:focus { outline: 2px solid var(--exf-fg); outline-offset: 3px; }
.exm-page--forms .ex-forms .ex-forms__summary li::marker { color: var(--exf-error); }
.exm-page--forms .ex-forms .ex-forms__noscript { border-radius: 2px; background: var(--exf-panel); }

/* ------------------------------------------------------------------ choice groups: tiles for radios and chips */
.exm-page--forms .ex-forms .ex-forms__fieldset { margin: 0; }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choices { display: flex; flex-wrap: wrap; flex-direction: row; gap: 10px; }
.exm-page--forms .ex-forms .ex-forms__fieldset[data-ex-row="membership_status"] .ex-forms__choices,
.exm-page--forms .ex-forms .ex-forms__fieldset[data-ex-row="areas_of_interest"] .ex-forms__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice {
	align-items: center;
	gap: 14px;
	min-height: 54px;
	padding: 12px 20px;
	border: 1px solid #CFC7B8;
	border-radius: 2px;
	background: #FBF9F4;
	color: var(--exf-fg);
	font-size: 15px;
	transition: border-color .25s, background-color .25s, color .25s;
}
.exm-page--forms .ex-forms .ex-forms__fieldset[data-ex-row="membership_status"] .ex-forms__choice { justify-content: flex-start; }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:hover { border-color: var(--exf-fg); }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:has(input:checked) {
	border-color: #101B18;
	background: #101B18;
	color: #F4F0E7;
}
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:has(input:checked) input { border-color: var(--exf-gold); }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:has(input[type="checkbox"]:checked) input { background: var(--exf-gold); color: #101B18; }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:has(input[type="radio"]:checked) input::before { background: var(--exf-gold); }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice:has(input:checked) input:focus-visible { outline-color: var(--exf-gold); }
.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choice a { text-decoration-thickness: 1px; }

/* the drawn checkbox and radio (the module draws them; here: smaller, ink on ivory, gold tick) */
.exm-page--forms .ex-forms .ex-forms__choice input {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-color: var(--exf-field-line);
	background: #FFFFFF;
	color: #C3AA78;
}
.exm-page--forms .ex-forms .ex-forms__choice input[type="checkbox"]:checked { border-color: #101B18; background: #101B18; }
.exm-page--forms .ex-forms .ex-forms__choice input[type="radio"]::before { width: 10px; height: 10px; background: #101B18; }
.exm-page--forms .ex-forms .ex-forms__choice input[type="radio"]:checked { border-color: #101B18; }
.exm-page--forms .ex-forms .ex-forms__choice input:focus-visible { outline: 2px solid #101B18; outline-offset: 3px; }
.exm-page--forms .ex-forms .ex-forms__choice input[aria-invalid="true"] { border-color: var(--exf-error); box-shadow: 0 0 0 1px var(--exf-error); }
.exm-page--forms .ex-forms .ex-forms__fieldset[aria-invalid="true"] .ex-forms__choice { border-color: var(--exf-error); }

/* the two acknowledgements at the end: plain rows, not tiles */
.exm-page--forms .ex-forms .ex-forms__row--check { margin: 0; }
.exm-page--forms .ex-forms .ex-forms__choice--check {
	align-items: flex-start;
	padding: 4px 0;
	color: #26332C;
	font-size: 14.5px;
	line-height: 1.65;
}
.exm-page--forms .ex-forms .ex-forms__choice--check input { margin-top: 2px; }

/* service specific fields */
.exm-page--forms .ex-forms .ex-forms__group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	padding: 26px 26px 28px;
	border: 1px solid #D2CABA;
	border-radius: 2px;
	background: rgba(237, 232, 221, .55);
}
.exm-page--forms .ex-forms .ex-forms__group .ex-forms__legend {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: #766B54;
}
.exm-page--forms .ex-forms .ex-forms__group .ex-forms__row { margin: 0; }

/* ------------------------------------------------------------------ fee notices and member verification */
.exm-page--forms .ex-forms .ex-forms__notices { margin: 0; }
.exm-page--forms .ex-forms .ex-forms__notice {
	margin: 0;
	padding: 18px 22px;
	border: 0;
	border-left: 2px solid var(--exf-gold);
	border-radius: 0;
	background: var(--exf-panel);
	color: #26332C;
	font-size: 14.5px;
	line-height: 1.7;
}
.exm-page--forms .ex-forms .ex-forms__notice--scope { border-left-color: var(--exf-error); }
.exm-page--forms .ex-forms .ex-forms__member { display: grid; gap: 30px; }
.exm-page--forms .ex-forms .ex-forms__member .ex-forms__row { margin: 0; }
.exm-page--forms .ex-forms .ex-forms__verify {
	margin: 0;
	padding: 24px;
	border: 1px solid #D2CABA;
	border-radius: 2px;
	background: rgba(237, 232, 221, .55);
}
.exm-page--forms .ex-forms .ex-forms__verify-intro { color: var(--exf-soft); font-size: 14.5px; line-height: 1.65; }
.exm-page--forms .ex-forms .ex-forms__verify-code { margin-block-start: 20px; gap: 14px 18px; }
.exm-page--forms .ex-forms .ex-forms__verify-code .ex-forms__button { min-height: 58px; }
.exm-page--forms .ex-forms .ex-forms__verify-status { font-size: 14.5px; }
.exm-page--forms .ex-forms .ex-forms__verify-status[data-state="error"] { color: var(--exf-error); }

/* ------------------------------------------------------------------ buttons */
.exm-page--forms .ex-forms .ex-forms__actions { margin: 0; padding-top: 30px; border-top: 1px solid var(--exf-rule); }
.exm-page--forms .ex-forms .ex-forms__button {
	min-height: 56px;
	padding: 0 24px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.exm-page--forms .ex-forms .ex-forms__button[data-ex-submit] {
	justify-content: space-between;
	gap: 44px;
	min-width: 280px;
}
.exm-page--forms .ex-forms .ex-forms__button[data-ex-submit]::after {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--exm-arrow-up-right) center / contain no-repeat;
	mask: var(--exm-arrow-up-right) center / contain no-repeat;
	transition: transform .3s;
}
@media (hover: hover) {
	.exm-page--forms .ex-forms .ex-forms__button[data-ex-submit]:not([disabled]):hover { transform: translateY(-2px); }
	.exm-page--forms .ex-forms .ex-forms__button[data-ex-submit]:not([disabled]):hover::after { transform: translate(3px, -3px); }
}
.exm-page--forms .ex-forms .ex-forms__button:focus-visible { outline: 2px solid #101B18; outline-offset: 4px; }
.exm-page--forms .ex-forms .ex-forms__button--secondary { min-height: 50px; border-color: #101B18; color: #101B18; }
.exm-page--forms .ex-forms .ex-forms__button--secondary:hover { background: #101B18; color: #F4F0E7; border-color: #101B18; }
.exm-page--forms .ex-forms .ex-forms__button--secondary[disabled]:hover { background: transparent; color: #101B18; border-color: #101B18; }
.exm-page--forms .ex-forms .ex-forms__status { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------ the thank-you view */
.exm-page--forms .ex-forms .ex-forms__success {
	padding: 6px 0 0;
	border: 0;
	background: transparent;
}
.exm-page--forms .ex-forms .ex-forms__success::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23C3AA78'/%3E%3Cpath d='M19 33l9 9 17-19' fill='none' stroke='%23101B18' stroke-width='3.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.exm-page--forms .ex-forms .ex-forms__success-text {
	margin: 0;
	color: var(--exf-fg);
	font-size: clamp(20px, 1.9vw, 26px);
	letter-spacing: -.02em;
	line-height: 1.5;
}
.exm-page--forms .ex-forms .ex-forms__success-ref {
	margin: 32px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--exf-rule);
	color: var(--exf-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 899px) {
	.exm-page--forms .exm-formpage.e-con { padding-top: 112px; }
	.exm-page--forms .exm-formpage__grid.e-con { grid-template-columns: 1fr; gap: 44px; }
	.exm-page--forms .exm-formpage__intro.e-con { position: static; }
	.exm-page--forms .exm-formpage__intro .exm-h1 .elementor-heading-title { font-size: clamp(44px, 8vw, 64px); }
}
@media (max-width: 640px) {
	.exm-page--forms .ex-forms .ex-forms__form { grid-template-columns: 1fr; }
	.exm-page--forms .ex-forms .ex-forms__form > .ex-forms__row[data-ex-row] { grid-column: 1 / -1; }
	.exm-page--forms .ex-forms .ex-forms__group { grid-template-columns: 1fr; padding: 20px 18px 22px; }
	.exm-page--forms .ex-forms .ex-forms__fieldset[data-ex-row="membership_status"] .ex-forms__choices,
	.exm-page--forms .ex-forms .ex-forms__fieldset[data-ex-row="areas_of_interest"] .ex-forms__choices { grid-template-columns: 1fr; }
	.exm-page--forms .ex-forms .ex-forms__fieldset .ex-forms__choices { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
	.exm-page--forms .ex-forms .ex-forms__button { width: 100%; }
	.exm-page--forms .ex-forms .ex-forms__button[data-ex-submit] { min-width: 0; }
	.exm-page--forms .ex-forms .ex-forms__verify { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.exm-page--forms .exm-formpage__intro > .elementor-widget,
	.exm-page--forms .exm-formpage__form .ex-forms { animation: none !important; }
	.exm-page--forms .ex-forms * { transition: none !important; }
}