.wp-block-miraigo-hubspot-embed {
	inline-size: 100%;
}

/* The scheduler iframe is on crm.mirai.com and cannot be styled: only its container is. */
.wp-block-miraigo-hubspot-embed .meetings-iframe-container {
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-miraigo-hubspot-embed .meetings-iframe-container iframe {
	display: block;
	inline-size: 100%;
	border: 0;
}

/* Reserves the slot at roughly the final card height, so the page reads the same before the IDs arrive. */
.wp-block-miraigo-hubspot-embed.is-pending {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--embed--placeholder-form);
	padding: var(--wp--preset--spacing--45);
	border: var(--wp--custom--border--hairline) dashed var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--gray-200);
}

.wp-block-miraigo-hubspot-embed.hubspot-embed--meetings.is-pending {
	min-block-size: var(--wp--custom--embed--placeholder-meetings);
}

.hubspot-embed__placeholder {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: center;
}

/*
 * Loading and failure states (view.js). While loading, the skeleton covers the
 * embed, which stays laid out but invisible: HubSpot measures its own height
 * inside the iframe, and display: none would make it measure zero.
 */
.wp-block-miraigo-hubspot-embed.is-loading {
	position: relative;
	min-block-size: var(--wp--custom--embed--placeholder-form);
}

.wp-block-miraigo-hubspot-embed.hubspot-embed--meetings.is-loading {
	min-block-size: var(--wp--custom--embed--placeholder-meetings);
}

.hubspot-embed__skeleton {
	display: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--25);
}

.wp-block-miraigo-hubspot-embed.is-loading .hubspot-embed__skeleton {
	display: flex;
	position: absolute;
	z-index: 1;
	inset: 0;
}

/* The demo card has no padding of its own (form-hero__card--bare), so the skeleton brings it. */
.hubspot-embed__skeleton--meetings {
	padding: var(--wp--preset--spacing--35);
}

.hubspot-embed__skeleton-label,
.hubspot-embed__skeleton-field,
.hubspot-embed__skeleton-button {
	display: block;
	background-color: var(--wp--preset--color--gray-100);
}

.hubspot-embed__skeleton-label {
	inline-size: 30%;
	block-size: var(--wp--preset--font-size--label-sm);
	margin-block-start: var(--wp--preset--spacing--25);
	border-radius: var(--wp--custom--radius--chip);
}

.hubspot-embed__skeleton-field {
	block-size: var(--wp--custom--embed--input-height);
	border-radius: var(--wp--custom--radius--input);
}

.hubspot-embed__skeleton-field--tall {
	block-size: calc(var(--wp--custom--embed--input-height) * 2);
}

.hubspot-embed__skeleton-field--calendar {
	flex-grow: 1;
}

.hubspot-embed__skeleton-button {
	align-self: center;
	inline-size: 40%;
	block-size: var(--wp--custom--embed--input-height);
	margin-block-start: var(--wp--preset--spacing--35);
	border-radius: var(--wp--custom--radius--button);
}

@media (prefers-reduced-motion: no-preference) {

	.hubspot-embed__skeleton > * {
		animation: hubspot-embed-pulse 1.4s ease-in-out infinite alternate;
	}
}

@keyframes hubspot-embed-pulse {

	to {
		opacity: 0.5;
	}
}

.wp-block-miraigo-hubspot-embed.is-loading .hubspot-embed__target,
.wp-block-miraigo-hubspot-embed.is-loading .meetings-iframe-container {
	visibility: hidden;
}

.wp-block-miraigo-hubspot-embed.is-failed .meetings-iframe-container {
	display: none;
}

.hubspot-embed__fallback {
	padding-block: var(--wp--preset--spacing--45);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: center;
}

/* Same reason as the meetings skeleton: the demo card has no padding of its own. */
.hubspot-embed--meetings .hubspot-embed__fallback {
	padding-inline: var(--wp--preset--spacing--35);
}

.hubspot-embed__fallback[hidden] {
	display: none;
}

.hubspot-embed__fallback p {
	margin: 0;
}

.hubspot-embed__fallback p + p {
	margin-block-start: var(--wp--preset--spacing--25);
}

.hubspot-embed__fallback a {
	color: inherit;
	text-decoration: underline;
}

/*
 * The HubSpot form, rendered as HTML (view.js passes `css: ''`). HubSpot still
 * injects its layout CSS after this file, up to (0,5,1) specificity, so the
 * selectors below carry enough classes to win without !important.
 */
.wp-block-miraigo-hubspot-embed .hs-form {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-miraigo-hubspot-embed .hs-form fieldset[class] {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-inline-size: none;
	margin-block-end: var(--wp--preset--spacing--30);
}

@media (min-width: 768px) {

	.wp-block-miraigo-hubspot-embed .hs-form fieldset.form-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-miraigo-hubspot-embed .hs-form fieldset.form-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wp-block-miraigo-hubspot-embed .hs-form fieldset[class] .hs-form-field.field {
	inline-size: auto;
	float: none;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-field.field .input {
	margin: 0;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-field > label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-required {
	color: var(--wp--preset--color--text-brand);
}

/* Second selector beats HubSpot's `.hs-custom-style fieldset input:not(...)` (0,7,2); the phone wrapper div is not a field. */
.wp-block-miraigo-hubspot-embed .hs-form .hs-form-field.field .input .hs-input:not([type="checkbox"], [type="radio"], .hs-fieldtype-intl-phone),
.wp-block-miraigo-hubspot-embed .hs-form.hs-custom-style fieldset .hs-form-field.field .input input.hs-input:not([type="checkbox"], [type="radio"]) {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--wp--custom--embed--input-height);
	padding-inline: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--body-sm);
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-field.field .input textarea.hs-input {
	min-block-size: calc(var(--wp--custom--embed--input-height) * 2);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-field.field .input .hs-input.invalid.error {
	box-shadow: inset 0 0 0 var(--wp--custom--border--button) var(--wp--preset--color--border-brand);
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-input::placeholder {
	color: var(--wp--preset--color--text-secondary);
}

/* Consent block: the text itself is Mirai's, set in HubSpot (see config/hubspot.php). */
.wp-block-miraigo-hubspot-embed .hs-form .legal-consent-container {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--body-xs);
}

/* Brand red on white is 4.19:1, short of AA for small text, so links and errors stay text-primary. */
.wp-block-miraigo-hubspot-embed .hs-form .legal-consent-container a {
	color: inherit;
	text-decoration: underline;
}

.wp-block-miraigo-hubspot-embed .hs-form .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-form-booleancheckbox-display {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--body-xs);
}

.wp-block-miraigo-hubspot-embed .hs-form .legal-consent-container .hs-form-booleancheckbox-display > span {
	margin-inline-start: 0;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-error-msgs label,
.wp-block-miraigo-hubspot-embed .hs-form .legal-consent-container .hs-error-msgs label {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-error-msgs {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-submit .actions {
	margin-block-start: var(--wp--preset--spacing--35);
	text-align: center;
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-submit .hs-button {
	min-block-size: var(--wp--custom--control--min-target);
	padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--45);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--background-brand);
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 600;
	line-height: 1.1;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.wp-block-miraigo-hubspot-embed .hs-form .hs-submit .hs-button:hover {
	background-color: var(--wp--custom--color--brand-hover);
}

.wp-block-miraigo-hubspot-embed .submitted-message {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--body-md);
	text-align: center;
}