/**
 * IES HubSpot Form widget.
 * Landing / Hero card + type live here so the module looks the same in a
 * landing-page hero or dropped on any other page. Field/button chrome for
 * "landing" still comes from theme .hero-hs-form-container on the mount.
 *
 * Built-in heading = Figma light-purple header bar (centered). Clear Heading
 * in the widget to omit it and use a separate Elementor Heading instead.
 */

.elementor-widget-ies-hubspot-form,
.elementor-widget-ies-hubspot-form > .elementor-widget-container {
	padding: 0;
	margin: 0;
	max-width: 100%;
}

.ies-hs-form {
	width: 100%;
	box-sizing: border-box;
}

/*
 * Landing / Hero — the card. Single source; not scoped to .ies-lp-hero.
 */
.ies-hs-form--landing {
	background: var(--ies-white, #fff);
	color: var(--ies-navy, #11294b);
	border: 2px solid var(--ies-primary, #5d43de);
	border-radius: 32px;
	padding: 40px 28px;
	overflow: hidden;
}

.ies-hs-form--landing:has(.ies-hs-form__heading) {
	padding-top: 0;
}

.ies-hs-form--landing :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ies-navy, #11294b);
	font-family: var(--ies-font-display, Onest, sans-serif);
}

.ies-hs-form--landing :is(p, li, label, span) {
	color: inherit;
}

.ies-hs-form__heading {
	margin: 0 0 24px;
	padding: 40px 30px;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--ies-font-display, Onest, sans-serif);
	font-size: var(--ies-h3-size, 28px);
	font-weight: var(--ies-h3-weight, 700);
	line-height: var(--ies-h3-line-height, 1.1);
	color: var(--ies-navy, #11294b);
	background: var(--ies-primary-lighter, #d2d1f1);
	border-radius: 20px 20px 0 0;
}

/* Bleed the purple header to the card edges (landing card padding is 28px). */
.ies-hs-form--landing .ies-hs-form__heading {
	margin: 0 -28px 24px;
	border-radius: 32px 32px 0 0;
}

.ies-hs-form__mount {
	min-height: 80px;
}

/*
 * HubSpot places .legal-consent-container before .hs_submit in the DOM.
 * Flex order moves that fieldset below the submit button.
 */
.ies-hs-form .ies-hs-form__mount form.hs-form {
	display: flex;
	flex-flow: column nowrap;
}

.ies-hs-form .ies-hs-form__mount form.hs-form > fieldset:has(.legal-consent-container) {
	order: 1;
	margin: 20px 0 0 !important;
}

.ies-hs-form .ies-hs-form__mount .legal-consent-container,
.ies-hs-form .ies-hs-form__mount .legal-consent-container p {
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.12px;
}

/*
 * Fields: 10px radius (not pill). Submit stays fully rounded via theme / rules below.
 * Select is listed with !important so HubSpot’s default dropdown radius cannot win.
 * Scoped to this widget so homepage hero email pills are unchanged.
 *
 * Forms with HubSpot Style & preview saved also get .hs-custom-style + injected
 * padding/min-height. Beat those so landing embeds still match theme sizing.
 */
.ies-hs-form .ies-hs-form__mount .hs-input,
.ies-hs-form .ies-hs-form__mount input.hs-input,
.ies-hs-form .ies-hs-form__mount select,
.ies-hs-form .ies-hs-form__mount select.hs-input,
.ies-hs-form .ies-hs-form__mount form.hs-custom-style .hs-input,
.ies-hs-form .ies-hs-form__mount form.hs-custom-style input.hs-input,
.ies-hs-form .ies-hs-form__mount form.hs-custom-style select.hs-input {
	box-sizing: border-box !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 13px 20px !important;
	border-radius: 10px !important;
}

.ies-hs-form .ies-hs-form__mount form.hs-custom-style select.hs-input {
	padding-right: 44px !important;
}

.ies-hs-form .ies-hs-form__mount textarea.hs-input,
.ies-hs-form .ies-hs-form__mount form.hs-custom-style textarea.hs-input {
	box-sizing: border-box !important;
	min-height: 110px !important;
	height: auto !important;
	padding: 13px 20px !important;
	border-radius: 20px !important;
}

/*
 * Landing/page embeds reuse .hero-hs-form-container, which visually hides
 * labels + field descriptions. Opt in via the Field labels / Field descriptions
 * switchers. !important matches the clip rules in style.css.
 */
.ies-hs-form--labels .ies-hs-form__mount .hs-form-field > label {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	overflow: visible !important;
	clip: auto !important;
	border: 0 !important;
	display: block !important;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ies-navy, #11294b);
}

/* Tighter label → description when both are shown */
.ies-hs-form--labels.ies-hs-form--descriptions .ies-hs-form__mount .hs-form-field > label {
	margin-bottom: 4px !important;
}

.ies-hs-form--descriptions .ies-hs-form__mount .hs-field-desc {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	overflow: visible !important;
	clip: auto !important;
	border: 0 !important;
	display: block !important;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #5a6072;
}

.ies-hs-form--labels .ies-hs-form__mount .hs-form-field,
.ies-hs-form--descriptions .ies-hs-form__mount .hs-form-field {
	margin: 0 0 16px !important;
}

.ies-hs-form--labels .ies-hs-form__mount .hs-form-field:last-of-type,
.ies-hs-form--descriptions .ies-hs-form__mount .hs-form-field:last-of-type {
	margin-bottom: 0 !important;
}

.ies-hs-form .ies-hs-form__mount select,
.ies-hs-form .ies-hs-form__mount select.hs-input {
	-webkit-appearance: none;
	appearance: none;
}

.ies-hs-form .ies-hs-form__mount .hs-button,
.ies-hs-form .ies-hs-form__mount input[type="submit"].hs-button,
.ies-hs-form .ies-hs-form__mount input.hs-button {
	display: inline-block;
	width: auto;
	width: fit-content;
	border-radius: 50px;
}

.ies-hs-form--placeholder {
	padding: 28px 20px;
	border: 1px dashed var(--ies-primary-lighter, #d2d1f1);
	border-radius: 16px;
	background: var(--ies-primary-soft, #f6f3ff);
	color: var(--ies-navy, #11294b);
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* Blog variant — compact subscribe look (works outside single-post CSS) */
.ies-hs-form--blog .ies-hs-form__mount .hs-form,
.ies-hs-form--blog .ies-hs-form__mount form {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.ies-hs-form--blog .ies-hs-form__mount fieldset {
	max-width: 100% !important;
	margin: 0 0 12px !important;
	padding: 0;
	border: 0;
}

.ies-hs-form--blog .ies-hs-form__mount .hs-form-field > label {
	display: none;
}

.ies-hs-form--blog .ies-hs-form__mount .hs-input,
.ies-hs-form--blog .ies-hs-form__mount input.hs-input,
.ies-hs-form--blog .ies-hs-form__mount select,
.ies-hs-form--blog .ies-hs-form__mount select.hs-input {
	width: 100% !important;
	box-sizing: border-box;
	padding: 12px 16px;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 16px;
	border: 1px solid var(--ies-primary-lighter, #d2d1f1);
	border-radius: 10px;
	color: var(--ies-navy, #11294b);
}

.ies-hs-form--blog .ies-hs-form__mount .hs-button,
.ies-hs-form--blog .ies-hs-form__mount input[type="submit"] {
	display: inline-block;
	width: auto;
	width: fit-content;
	min-height: 44px;
	margin-top: 8px;
	padding: 10px 20px;
	font-family: var(--ies-font-body, Onest, sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: #fff !important;
	background: var(--ies-primary, #5d43de) !important;
	border: none !important;
	border-radius: 50px;
	cursor: pointer;
}

.ies-hs-form--blog .ies-hs-form__mount .hs-button:hover,
.ies-hs-form--blog .ies-hs-form__mount input[type="submit"]:hover {
	background: var(--ies-primary-dark, #4d4285) !important;
}

.ies-hs-form.ies-hs-form--button-full .ies-hs-form__mount .hs-button,
.ies-hs-form.ies-hs-form--button-full .ies-hs-form__mount input[type="submit"] {
	display: block;
	width: 100%;
}

@media (max-width: 1024px) {
	.ies-hs-form--landing {
		padding: 32px 28px;
		border-radius: 24px;
	}

	.ies-hs-form--landing:has(.ies-hs-form__heading) {
		padding-top: 0;
	}

	.ies-hs-form--landing .ies-hs-form__heading {
		margin-left: -28px;
		margin-right: -28px;
		border-radius: 24px 24px 0 0;
		padding: 32px 28px;
	}
}