/**
 * CTA.
 *
 * A photo under a navy-to-brand gradient, two soft light orbs and a faint dot
 * grid. On top, centred: an eyebrow pill, the title, a line of copy, then the
 * form as one frosted capsule with the field and the button inside it.
 *
 * The form is whatever the shortcode prints (Contact Form 7 on the demo,
 * Mailchimp for WP works too), so the rules below style its fields
 * generically rather than by class names the widget doesn't control. Colours,
 * radius and padding are custom properties, which is what the widget's style
 * controls set.
 */

.gx-cta {
	--gx-cta-accent: var(--color-primary, #1273C4);
	--gx-cta-overlay: 1;
	--gx-cta-radius: 32px;
	--gx-cta-pad-y: clamp(64px, 8vw, 116px);
	--gx-cta-pad-x: clamp(20px, 5vw, 64px);
	--gx-cta-field-bg: rgba(255, 255, 255, .12);
	--gx-cta-field-border: rgba(255, 255, 255, .26);
	--gx-cta-input-color: #ffffff;
	--gx-cta-btn-bg: linear-gradient(120deg, color-mix(in srgb, var(--gx-cta-accent) 70%, #ffffff) 0%, var(--gx-cta-accent) 100%);
	--gx-cta-btn-color: #ffffff;
	--gx-cta-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--gx-cta-pad-y) var(--gx-cta-pad-x);
	border-radius: var(--gx-cta-radius);
	background: var(--color-black, #0C2338);
	box-shadow: 0 40px 80px -48px rgba(12, 35, 56, .65);
	text-align: center;
}

/* ------------------------------------------------------------ backdrop */

.gx-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-position: center;
	background-size: cover;
	transform: scale(1.05);
	transition: transform 1.6s var(--gx-cta-ease);
}

.gx-cta:hover .gx-cta__bg {
	transform: scale(1.1);
}

.gx-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: var(--gx-cta-overlay);
	background:
		radial-gradient(ellipse 60% 70% at 50% 45%, rgba(12, 35, 56, .15), transparent 70%),
		linear-gradient(120deg, rgba(8, 24, 41, .92) 0%, rgba(11, 60, 110, .78) 45%, color-mix(in srgb, var(--gx-cta-accent) 60%, transparent) 100%);
}

/* Dot grid, fading out towards the middle so it never sits under the text. */
.gx-cta__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
	background-size: 18px 18px;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, transparent 40%, #000 100%);
	mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, transparent 40%, #000 100%);
}

.gx-cta__orb {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	animation: gx-cta-float 14s ease-in-out infinite alternate;
}

.gx-cta__orb--1 {
	top: -120px;
	right: -80px;
	width: 380px;
	height: 380px;
	background: color-mix(in srgb, var(--gx-cta-accent) 65%, transparent);
	opacity: .55;
}

.gx-cta__orb--2 {
	bottom: -140px;
	left: -100px;
	width: 340px;
	height: 340px;
	background: rgba(14, 155, 168, .5);
	opacity: .5;
	animation-duration: 18s;
	animation-direction: alternate-reverse;
}

@keyframes gx-cta-float {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-40px, 30px, 0);
	}
}

/* ------------------------------------------------------------- content */

.gx-cta__content {
	position: relative;
	max-width: 680px;
	margin: 0 auto;
}

.gx-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.gx-cta__eyebrow-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5EE0C0;
}

.gx-cta__eyebrow-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: gx-cta-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes gx-cta-ping {
	75%,
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

.gx-cta .gx-cta__title {
	margin: 22px 0 16px;
	font-family: var(--font-title, inherit);
	font-size: clamp(30px, 2.6vw + 16px, 52px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

.gx-cta__desc {
	max-width: 540px;
	margin: 0 auto;
	font-size: clamp(15.5px, .3vw + 14px, 17.5px);
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- form */

.gx-cta__form {
	max-width: 560px;
	margin: 36px auto 0;
	text-align: left;
}

.gx-cta__form form {
	margin: 0;
}

/* The row that holds field + button becomes the capsule: CF7's autop <p>,
   MC4WP's fields div, or the form itself when it has them as children. */
.gx-cta__form form > p,
.gx-cta__form .mc4wp-form-fields,
.gx-cta__form form:has(> input:not([type="hidden"])) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--gx-cta-field-border);
	border-radius: 999px;
	background: var(--gx-cta-field-bg);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: border-color .3s, box-shadow .3s, background-color .3s;
}

.gx-cta__form form > p:focus-within,
.gx-cta__form .mc4wp-form-fields:focus-within,
.gx-cta__form form:has(> input:not([type="hidden"])):focus-within {
	border-color: rgba(255, 255, 255, .55);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .12);
}

.gx-cta__form br,
.gx-cta__form label:not(:has(input)) {
	display: none;
}

.gx-cta__form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

/* The field: transparent inside the capsule, with an envelope. */
.gx-cta .gx-cta__form input:is([type="email"], [type="text"], [type="tel"], [type="search"]) {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 56px;
	margin: 0;
	padding: 0 18px 0 52px;
	border: 0;
	border-radius: 999px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 20px center / 20px no-repeat;
	box-shadow: none;
	font-size: 16px;
	color: var(--gx-cta-input-color);
	outline: 0;
}

.gx-cta .gx-cta__form input::placeholder {
	color: rgba(255, 255, 255, .66);
	opacity: 1;
}

.gx-cta .gx-cta__form input:focus {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--gx-cta-input-color);
}

/* Autofill paints its own yellow/white; keep the text readable over it. */
.gx-cta .gx-cta__form input:-webkit-autofill {
	-webkit-text-fill-color: var(--gx-cta-input-color);
	transition: background-color 9999s;
}

/* The button. */
.gx-cta .gx-cta__form :is(button, input[type="submit"]) {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	height: 56px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 999px !important;
	background: var(--gx-cta-btn-bg);
	box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--gx-cta-accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
	font-family: var(--font-title, inherit);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: none;
	color: var(--gx-cta-btn-color);
	cursor: pointer;
	transition: transform .35s var(--gx-cta-ease), box-shadow .35s, filter .3s;
}

.gx-cta .gx-cta__form button::after {
	content: "";
	width: 18px;
	height: 18px;
	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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .35s var(--gx-cta-ease);
}

/* A button that already carries its own icon doesn't need a second one. */
.gx-cta .gx-cta__form button:has(svg, i)::after {
	display: none;
}

.gx-cta .gx-cta__form :is(button, input[type="submit"]):hover,
.gx-cta .gx-cta__form :is(button, input[type="submit"]):focus-visible {
	transform: translateY(-1px);
	background: var(--gx-cta-btn-bg);
	color: var(--gx-cta-btn-color);
	filter: brightness(1.08);
	box-shadow: 0 18px 32px -12px color-mix(in srgb, var(--gx-cta-accent) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.gx-cta .gx-cta__form button:hover::after {
	transform: translateX(3px);
}

.gx-cta .gx-cta__form :is(button, input[type="submit"]):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.gx-cta .gx-cta__form :is(button, input[type="submit"]):active {
	transform: translateY(0) scale(.98);
}

/* CF7 while sending: its spinner would push the button about, so the button
   dims instead. */
.gx-cta__form .wpcf7-spinner {
	display: none;
}

.gx-cta__form .wpcf7-form.submitting :is(button, input[type="submit"]) {
	opacity: .7;
	pointer-events: none;
}

/* Validation and response messages, restyled for the dark ground. */
.gx-cta__form .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 18px);
	left: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #FFB4A8;
}

.gx-cta__form .wpcf7-response-output,
.gx-cta__form .mc4wp-response:not(:empty) {
	margin: 34px 0 0 !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 14px;
	background: rgba(255, 255, 255, .1);
	font-size: 14px;
	text-align: center;
	color: #fff;
}

.gx-cta__form .wpcf7-response-output:empty,
.gx-cta__form .wpcf7-form.init .wpcf7-response-output {
	display: none;
}

.gx-cta__form .wpcf7-form.sent .wpcf7-response-output {
	border-color: rgba(94, 224, 192, .6) !important;
}

.gx-cta__form :is(.wpcf7-form.invalid, .wpcf7-form.failed, .wpcf7-form.spam) .wpcf7-response-output {
	border-color: rgba(255, 180, 168, .6) !important;
}

.gx-cta__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .68);
}

.gx-cta__note svg {
	flex: 0 0 auto;
	color: #5EE0C0;
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 575px) {
	.gx-cta {
		--gx-cta-radius: 24px;
		--gx-cta-pad-y: 56px;
		--gx-cta-pad-x: 18px;
	}

	.gx-cta__orb {
		width: 240px;
		height: 240px;
	}

	/* Too narrow for field and button side by side: stack them. */
	.gx-cta__form form > p,
	.gx-cta__form .mc4wp-form-fields,
	.gx-cta__form form:has(> input:not([type="hidden"])) {
		flex-direction: column;
		align-items: stretch;
		padding: 6px;
		border-radius: 22px;
	}

	.gx-cta .gx-cta__form :is(button, input[type="submit"]) {
		width: 100%;
		height: 52px;
		border-radius: 16px !important;
	}

	.gx-cta .gx-cta__form input:is([type="email"], [type="text"], [type="tel"], [type="search"]) {
		height: 52px;
	}

	.gx-cta__form .wpcf7-not-valid-tip {
		position: static;
		margin: 4px 0 6px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gx-cta__bg,
	.gx-cta .gx-cta__form :is(button, input[type="submit"]),
	.gx-cta .gx-cta__form button::after {
		transition: none;
	}

	.gx-cta:hover .gx-cta__bg {
		transform: scale(1.05);
	}

	.gx-cta__orb,
	.gx-cta__eyebrow-dot::after {
		animation: none;
	}
}

/* color-mix is recent; without it the button, orb and overlay tints vanish. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.gx-cta {
		--gx-cta-btn-bg: linear-gradient(120deg, #3E9BE8 0%, #1273C4 100%);
	}

	.gx-cta__orb--1 {
		background: rgba(18, 115, 196, .65);
	}

	.gx-cta__overlay {
		background: linear-gradient(120deg, rgba(8, 24, 41, .92) 0%, rgba(11, 60, 110, .78) 45%, rgba(18, 115, 196, .6) 100%);
	}

	.gx-cta .gx-cta__form :is(button, input[type="submit"]) {
		box-shadow: 0 12px 26px -10px rgba(18, 115, 196, .8);
	}
}