/* CTA form banner — Figma. A blue section with a rounded two-column card: a pale-blue content
   column (badge, eyebrow, title, text, white USP card, phone row) beside a white form column
   (WPForms embed or a static placeholder mirroring the design). Tokens only; mobile-first. */

.ppc-cta-form-banner {
	/* Figma pattern fill: white stars at 16% blended with overlay onto the blue (see tokens.css). */
	background: var(--ppc-texture-scheme5) repeat left top / 54.95px 109.9px, var(--ppc-color-scheme5-bg);
	background-blend-mode: overlay, normal;
	padding-block: var(--ppc-section-pad-y);
	padding-inline: var(--ppc-section-inset-x);
}

.ppc-cta-form-banner__container {
	max-width: var(--ppc-container-width);
	margin-inline: auto;
}

.ppc-cta-form-banner__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 40px;
	overflow: hidden;
	background: var(--ppc-color-surface);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
}

/* Glossy inset highlight over the whole card (Figma). */
.ppc-cta-form-banner__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow:
		inset -3px -3px 4px rgba(0, 0, 0, 0.25),
		inset 3px 3px 3px rgba(255, 255, 255, 0.25);
}

@media (min-width: 60rem) {
	.ppc-cta-form-banner__card {
		grid-template-columns: 1fr 1fr;
	}
}

/* Left content column */
.ppc-cta-form-banner__content {
	background: var(--ppc-color-surface-panel);
	padding: clamp(2rem, 4vw, 3rem);
}

.ppc-cta-form-banner__badge {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 2rem;
}

.ppc-cta-form-banner__eyebrow {
	margin: 0;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-cta-form-banner__title {
	margin: 1rem 0 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-blue-zodiac);
}

.ppc-cta-form-banner__text {
	margin: 1rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

/* White USP card */
.ppc-cta-form-banner__usp-card {
	margin-top: 2.5rem;
	padding: 1.75rem 2rem;
	background: var(--ppc-color-surface);
	border-radius: var(--ppc-radius-medium);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
}

.ppc-cta-form-banner__usp-title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: 1.25rem;
	line-height: var(--ppc-line-height-h5);
	color: var(--ppc-color-scheme6-bg);
}

.ppc-cta-form-banner__usps {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ppc-cta-form-banner__usp {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-scheme6-bg);
}

.ppc-cta-form-banner__check {
	flex-shrink: 0;
	color: var(--ppc-color-scheme5-bg);
}

/* Phone row */
.ppc-cta-form-banner__phone {
	display: flex;
	align-items: center;
	/* Figma: 8px between dot and label, 32px before the number (via the link's margin). */
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.ppc-cta-form-banner__phone-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ppc-color-success);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.ppc-cta-form-banner__phone-label {
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-body);
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-cta-form-banner__phone-link {
	margin-left: 1.5rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	color: var(--ppc-color-scheme5-bg);
	text-decoration: underline;
}

.ppc-cta-form-banner__phone-link:hover {
	color: var(--ppc-color-picton-blue-darker);
}

/* Right form column */
.ppc-cta-form-banner__form {
	background: var(--ppc-color-surface);
	padding: clamp(2rem, 4vw, 3rem);
}

/* Fields — WPForms embed and the static placeholder share these visuals. */
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-field-label,
.ppc-cta-form-banner__field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--ppc-color-picton-blue);
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="text"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="email"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="tel"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="url"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="number"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form select,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form textarea,
.ppc-cta-form-banner__input {
	width: 100%;
	background: var(--ppc-color-picton-blue-lightest);
	border: 0;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input::placeholder,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form textarea::placeholder,
.ppc-cta-form-banner__input::placeholder {
	color: rgba(25, 25, 25, 0.6);
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input:focus-visible,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form select:focus-visible,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form textarea:focus-visible,
.ppc-cta-form-banner__input:focus-visible {
	outline: 2px solid var(--ppc-color-picton-blue-dark);
	outline-offset: 2px;
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form textarea,
.ppc-cta-form-banner__input[id="ppc-cfb-message"] {
	min-height: 8rem;
}

/* Placeholder layout */
.ppc-cta-form-banner__field {
	margin-bottom: 1.25rem;
}

.ppc-cta-form-banner__field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.ppc-cta-form-banner__field-grid .ppc-cta-form-banner__field {
	margin-bottom: 0;
}

.ppc-cta-form-banner__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-family: var(--ppc-font-open-sans);
	font-size: 0.875rem;
	color: var(--ppc-color-neutral-darker);
}

.ppc-cta-form-banner__consent-check {
	flex-shrink: 0;
	margin-top: 0.15rem;
}

/* Consent checkbox (WPForms choice label): match the placeholder consent row. */
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label {
	font-family: var(--ppc-font-open-sans);
	font-size: 0.875rem;
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label a {
	color: var(--ppc-color-picton-blue-dark);
}

/* Submit + multi-page prev/next — WPForms buttons and the placeholder div share the shared
   maincta look + sparkle. */
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"],
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-page-button,
.ppc-cta-form-banner__submit {
	width: 100%;
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2046'%3E%3Cpath%20d='M17.5089%200C17.5089%200%2020.9412%2012.2978%2027.2092%2016.1501C33.4775%2020.0022%2046%2017.5089%2046%2017.5089C46%2017.5089%2033.7023%2020.9412%2029.8499%2027.2092L29.6737%2027.5078C26.0749%2033.866%2028.4904%2046%2028.4904%2046C28.4904%2046%2025.1649%2034.0833%2019.082%2030.0366L18.7908%2029.8499C12.5311%2026.003%200.0340204%2028.4836%200%2028.4904C0.0386839%2028.4796%2011.9233%2025.155%2015.9635%2019.0819L16.1501%2018.7907C20.0023%2012.5225%2017.5089%200%2017.5089%200ZM19.0043%206.26607C19.0172%206.5127%2019.0294%206.76335%2019.0387%207.01714C19.181%2010.9456%2018.8564%2015.8477%2016.8019%2019.1909C14.7473%2022.5342%2010.5198%2025.0376%206.9507%2026.6851C6.72019%2026.7916%206.49187%2026.8951%206.26608%2026.995C6.51269%2026.9821%206.76336%2026.9705%207.01715%2026.9613C10.9456%2026.819%2015.8477%2027.1435%2019.191%2029.1981C22.5341%2031.2527%2025.0376%2035.4794%2026.6852%2039.0485C26.7915%2039.2789%2026.8952%2039.5075%2026.995%2039.7331C26.9821%2039.4867%2026.9706%2039.2364%2026.9614%2038.9829C26.819%2035.0543%2027.1436%2030.1523%2029.1982%2026.8091C31.2527%2023.4659%2035.4795%2020.9624%2039.0486%2019.3149C39.2791%2019.2084%2039.5074%2019.1042%2039.7332%2019.0042C39.4868%2019.0172%2039.2365%2019.0294%2038.9829%2019.0387C35.0544%2019.1809%2030.1524%2018.8564%2026.8091%2016.8019C23.4659%2014.7472%2020.9625%2010.5198%2019.3149%206.95069C19.2084%206.72008%2019.1042%206.49195%2019.0043%206.26607Z'%20fill='%23ffffff'%20fill-opacity='0.9'/%3E%3C/svg%3E") no-repeat right 8px center / 40px,
		var(--ppc-color-hero-cta);
	border: 0.7px solid var(--ppc-color-hero-cta-border);
	border-radius: var(--ppc-hero-cta-radius);
	color: #ffffff;
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 1.125rem;
	padding: 0.85rem 1rem;
	/* WPForms forces height:41px + inline-block, which squeezes the label off-centre; flex
	   centering with height:auto restores true vertical centering. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	line-height: var(--ppc-line-height-tight);
	box-shadow: var(--ppc-shadow-maincta);
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in;
}

/* Prev/next size to their row instead of spanning the form. */
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-page-button {
	width: auto;
	padding-right: 3rem;
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-pagebreak-left {
	display: flex;
	gap: 1rem;
}

.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:hover,
.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-page-button:hover,
.ppc-cta-form-banner__submit:hover {
	transform: scale(1.02);
	/* Same dark hover fill as the shared maincta; the sparkle image layer stays on top. */
	background-color: var(--ppc-color-picton-blue-darkest);
}

/* Placeholder submit is a non-interactive div. */
.ppc-cta-form-banner__submit {
	text-align: center;
	cursor: default;
}

.ppc-cta-form-banner__form-disclaimer {
	/* Figma: 10px italic black, 24px below the button, left-aligned like the form content. */
	margin: 1.5rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: 0.625rem;
	font-style: italic;
	line-height: var(--ppc-line-height-body);
	text-align: left;
	color: var(--ppc-color-neutral-darkest);
}

/* Footer */
/* Stacked below desktop: everything centered. Desktop: credit left, rating right. */
.ppc-cta-form-banner__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	/* Figma: 48px below the card, row inset 24px from the container edges. */
	margin-top: 3rem;
	padding-inline: 1.5rem;
	text-align: center;
}

@media (min-width: 60rem) {
	.ppc-cta-form-banner__footer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

.ppc-cta-form-banner__credit {
	margin: 0;
	font-family: var(--ppc-font-sans);
	font-style: italic;
	/* Figma: prefix 18px italic #f2f2f2, name 24px semibold white. */
	font-size: 1.125rem;
	line-height: 1.45;
	color: var(--ppc-color-card-surface);
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.ppc-cta-form-banner__credit-prefix {
	display: block;
}

.ppc-cta-form-banner__credit-name {
	font-style: normal;
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 1.5rem;
	color: #ffffff;
	text-decoration: none;
}

.ppc-cta-form-banner__rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ppc-font-sans);
	font-size: 0.875rem;
	color: #ffffff;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ppc-cta-form-banner__rating-label {
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-cta-form-banner__rating-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ppc-color-success);
}

/* Mobile: one column everywhere (WPForms half-width fields stack), tighter padding, and the
   corner badge goes: it only adds clutter above the eyebrow at phone width. */
@media (max-width: 40rem) {
	.ppc-cta-form-banner__content,
	.ppc-cta-form-banner__form {
		padding: 1.5rem;
	}

	.ppc-cta-form-banner__badge {
		display: none;
	}

	.ppc-cta-form-banner__usp-card {
		padding: 1.5rem;
	}

	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form .wpforms-one-half {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	.ppc-cta-form-banner__field-grid {
		grid-template-columns: 1fr;
	}

	/* All text centred on mobile. */
	.ppc-cta-form-banner__card {
		text-align: center;
	}

	.ppc-cta-form-banner__usps {
		align-items: center;
	}

	/* Phone: dot + label on one line, the number on its own line below. */
	.ppc-cta-form-banner__phone {
		flex-wrap: wrap;
		justify-content: center;
	}

	.ppc-cta-form-banner__phone-link {
		flex-basis: 100%;
		margin-left: 0;
	}

	.ppc-cta-form-banner__consent {
		justify-content: center;
	}

	.ppc-cta-form-banner__form-disclaimer {
		text-align: center;
	}

	/* Field text (and thus the placeholders) centred like the rest of the element. */
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="text"],
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="email"],
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="tel"],
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="url"],
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form input[type="number"],
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form select,
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form textarea,
	.ppc-cta-form-banner__input {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"],
	.ppc-cta-form-banner__submit {
		transition: none;
	}

	.ppc-cta-form-banner__form-embed div.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:hover,
	.ppc-cta-form-banner__submit:hover {
		transform: none;
	}
}