/*
 * HC Forms Layout: full-page form stages and WPForms skin in the HanaCon
 * colors (same values as the HanaStage theme tokens, hardcoded here so the
 * plugin looks the same on every theme). Override the --hcfl-* variables from
 * a theme to re-color everything.
 */

.hcfl-stage,
div.wpforms-container.hc-msforms:not(.hcfl-stage *) {
	/* Button fill: rose to pink. Rose is too light for text, so text accents,
	   focus rings and checked marks use the stronger plum. */
	--hcfl-accent: #fbaec0;
	--hcfl-accent-2: #ffc1e9;
	--hcfl-accent-strong: #87458e;
	--hcfl-on-accent: #4e3a5f;
	--hcfl-sky: #b7daf0;
	--hcfl-text: #4e3a5f;
	--hcfl-muted: #7d627f;
	--hcfl-border: #9a8aa6;
	--hcfl-error: #b3261e;
	--hcfl-required: #b1245f;
	--hcfl-card-bg: rgba(255, 255, 255, 0.95);
	--hcfl-field-bg: #fff;
	--hcfl-secondary-bg: rgba(255, 255, 255, 0.92);
	--hcfl-track: rgba(78, 58, 95, 0.12);
	--hcfl-error-bg: #fdf3f4;
	--hcfl-overlay: transparent;
	--hcfl-stage-bg: linear-gradient(160deg, #ffe9f1 0%, #ffc1e9 55%, #cfe6f5 100%);
	--hcfl-tint: rgba(251, 174, 192, 0.22);
	--hcfl-radius: 24px;
	--hcfl-radius-field: 14px;
	--hcfl-shadow: 0 18px 40px rgba(135, 69, 142, 0.22);
	--hcfl-width: 1200px;
	--hcfl-form-width: 1200px;
	--hcfl-font: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Always declared, so native controls, select popups and iframes never have to guess. */
	color-scheme: light;
}

/* The stage page has no theme styles that set this on the root, so scrollbars
   and the canvas follow the mode too. */
html:has(body.hcfl-page) {
	color-scheme: light;
}

html:has(body.hcfl-page.is-dark-mode) {
	color-scheme: dark;
}

.hcfl-stage {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 4vw, 48px);
	font-family: var(--hcfl-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--hcfl-text);
	background: var(--hcfl-stage-bg);
}

.hcfl-stage *,
.hcfl-stage *::before,
.hcfl-stage *::after {
	box-sizing: border-box;
}

/* The cards sit centered above the page footer. */
.hcfl-stage__main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Form state: the image fills the viewport behind the card. */
.hcfl-stage[data-state="form"].has-background {
	background-image: linear-gradient(var(--hcfl-overlay), var(--hcfl-overlay)), var(--hcfl-bg);
	background-position: 0 0, center;
	background-size: auto, cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.hcfl-stage[data-state="intro"] .hcfl-form,
.hcfl-stage[data-state="form"] .hcfl-start {
	display: none;
}

.hcfl-stage--embedded {
	min-height: 0;
	border-radius: var(--hcfl-radius);
}

.hcfl-stage--embedded[data-state="form"].has-background {
	background-attachment: scroll;
}

body.hcfl-page {
	margin: 0;
}

/* ---------- Start card ---------- */

.hcfl-start {
	width: min(100%, var(--hcfl-width));
}

.hcfl-start__frame {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	aspect-ratio: 16 / 9;
	padding: 6% 4%;
	background: linear-gradient(135deg, var(--hcfl-accent), var(--hcfl-accent-2) 55%, var(--hcfl-sky));
	border-radius: var(--hcfl-radius);
	box-shadow: var(--hcfl-shadow);
}

.hcfl-stage.has-background .hcfl-start__frame {
	background-image: linear-gradient(var(--hcfl-overlay), var(--hcfl-overlay)), var(--hcfl-bg);
	background-position: 0 0, center;
	background-size: auto, cover;
	background-repeat: no-repeat;
}

.hcfl-start__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 40%;
	min-width: 280px;
	padding: 24px;
	background: var(--hcfl-card-bg);
	border-radius: calc(var(--hcfl-radius) - 6px);
}

.hcfl-start__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hcfl-accent-strong);
}

.hcfl-start__deadline {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.hcfl-start__intro {
	font-size: 0.9375rem;
}

.hcfl-start__intro p {
	margin: 0 0 0.75em;
}

.hcfl-start__card .hcfl-button {
	margin-top: auto;
}

.hcfl-lang {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hcfl-lang__link {
	padding: 4px 14px;
	border: 1px solid var(--hcfl-accent-strong);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hcfl-accent-strong);
	text-decoration: none;
}

.hcfl-lang__link:hover,
.hcfl-lang__link.is-current {
	border-color: transparent;
	background: linear-gradient(135deg, var(--hcfl-accent), var(--hcfl-accent-2));
	color: var(--hcfl-on-accent);
}

/* ---------- Form card ---------- */

.hcfl-form {
	width: min(100%, var(--hcfl-form-width));
}

.hcfl-card {
	padding: 36px;
	background: var(--hcfl-card-bg);
	border-radius: var(--hcfl-radius);
	box-shadow: var(--hcfl-shadow);
}

.hcfl-card__head {
	margin: -36px -36px 20px;
	padding: 36px 36px 26px;
	background: linear-gradient(var(--hcfl-tint), rgba(251, 174, 192, 0));
	border-radius: var(--hcfl-radius) var(--hcfl-radius) 0 0;
}

.hcfl-card__title {
	margin: 0;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hcfl-text);
}

.hcfl-required-note {
	margin: 0 0 16px;
	font-size: 0.875rem;
	color: var(--hcfl-muted);
}

.hcfl-card__foot {
	margin: 32px -36px -36px;
	padding: 18px 36px;
	font-size: 0.8125rem;
	color: var(--hcfl-muted);
	background: var(--hcfl-tint);
	border-radius: 0 0 var(--hcfl-radius) var(--hcfl-radius);
}

.hcfl-card__foot p {
	margin: 0 0 0.5em;
}

.hcfl-card__foot p:last-child {
	margin-bottom: 0;
}

.hcfl-card__foot a {
	color: var(--hcfl-accent-strong);
}

.hcfl-status {
	margin: 0;
	padding: 10px 14px;
	border-left: 4px solid var(--hcfl-accent-strong);
	border-radius: 0 var(--hcfl-radius-field) var(--hcfl-radius-field) 0;
	background: var(--hcfl-tint);
	font-size: 0.9375rem;
	font-weight: 700;
}

.hcfl-start__card .hcfl-status {
	margin-top: auto;
	font-size: 0.875rem;
}

.hcfl-preview-note {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	margin: 0;
	padding: 6px 72px 6px 16px;
	background: #fff3cd;
	color: #664d03;
	font-size: 0.8125rem;
	text-align: center;
}

.hcfl-stage--embedded .hcfl-preview-note {
	position: static;
	margin: -16px -16px 16px;
}

.hcfl-notice {
	padding: 10px 14px;
	border-left: 4px solid var(--hcfl-error);
	background: var(--hcfl-error-bg);
}

/* ---------- Dark mode ---------- */

/* Same switch as the HanaStage theme: body.is-dark-mode, stored in
   localStorage under "hanastage-theme" (see js/stage.js). */
body.is-dark-mode .hcfl-stage,
body.is-dark-mode div.wpforms-container.hc-msforms:not(.hcfl-stage *) {
	--hcfl-accent-strong: #ffc1e9;
	--hcfl-text: #eef1ff;
	--hcfl-muted: #b6bfdc;
	--hcfl-border: #7f89b3;
	--hcfl-error: #ff8a80;
	--hcfl-required: #ff9ec8;
	--hcfl-card-bg: rgba(23, 28, 49, 0.95);
	--hcfl-field-bg: #1d2440;
	--hcfl-secondary-bg: #1d2440;
	--hcfl-track: rgba(238, 241, 255, 0.16);
	--hcfl-error-bg: rgba(255, 138, 128, 0.14);
	--hcfl-overlay: rgba(17, 20, 37, 0.5);
	--hcfl-stage-bg: linear-gradient(160deg, #1b1430 0%, #2b1845 55%, #14233a 100%);
	--hcfl-tint: rgba(251, 174, 192, 0.14);
	--hcfl-shadow: 0 18px 40px rgba(2, 3, 11, 0.55);
	color-scheme: dark;
}

body.is-dark-mode div.wpforms-container.hc-msforms:not(.hcfl-stage *) {
	--hcfl-overlay: transparent;
}

.hcfl-theme-toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 11;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hcfl-border);
	border-radius: 50%;
	background: var(--hcfl-card-bg);
	color: var(--hcfl-accent-strong);
	box-shadow: var(--hcfl-shadow);
	cursor: pointer;
	transition: background 0.15s ease;
}

.hcfl-theme-toggle:hover {
	background: var(--hcfl-tint);
}

.hcfl-theme-toggle svg {
	width: 20px;
	height: 20px;
}

/* The icon shows what a click switches to. */
.hcfl-theme-toggle__sun,
body.is-dark-mode .hcfl-theme-toggle__moon {
	display: none;
}

body.is-dark-mode .hcfl-theme-toggle__sun {
	display: block;
}

/* ---------- Page footer ---------- */

.hcfl-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 24px;
	width: min(100%, var(--hcfl-form-width));
	margin: 24px auto 0;
	padding: 12px 24px;
	background: var(--hcfl-card-bg);
	border-radius: var(--hcfl-radius-field);
	font-size: 0.875rem;
	color: var(--hcfl-muted);
}

.hcfl-footer__copyright {
	margin: 0;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.hcfl-footer__copyright.is-swapping {
	opacity: 0;
}

.hcfl-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcfl-footer a {
	color: var(--hcfl-accent-strong);
	font-weight: 700;
	text-decoration: none;
}

.hcfl-footer a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.hcfl-footer__copyright {
		transition: none;
	}
}

/* ---------- Buttons ---------- */

.hcfl-button,
div.wpforms-container.hc-msforms .wpforms-form button.wpforms-submit,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-button {
	display: inline-block;
	min-height: 44px;
	padding: 10px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hcfl-accent), var(--hcfl-accent-2));
	color: var(--hcfl-on-accent);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hcfl-button:hover,
div.wpforms-container.hc-msforms .wpforms-form button.wpforms-submit:hover,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-button:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--hcfl-accent) 82%, var(--hcfl-accent-strong)), color-mix(in srgb, var(--hcfl-accent-2) 82%, var(--hcfl-accent-strong)));
	box-shadow: 0 6px 16px color-mix(in srgb, var(--hcfl-accent-strong) 28%, transparent);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-button.wpforms-page-prev {
	border-color: var(--hcfl-border);
	background: var(--hcfl-secondary-bg);
	color: var(--hcfl-accent-strong);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-button.wpforms-page-prev:hover {
	border-color: var(--hcfl-accent-strong);
	background: var(--hcfl-tint);
	box-shadow: none;
}

.hcfl-stage :focus-visible,
div.wpforms-container.hc-msforms :focus-visible {
	outline: 3px solid var(--hcfl-accent-strong);
	outline-offset: 2px;
}

/* Programmatic focus target after "Start now" */
.hcfl-stage .hcfl-card__title:focus-visible,
.hcfl-stage .hcfl-required-note:focus-visible {
	outline: none;
}

/* ---------- WPForms skin ---------- */

div.wpforms-container.hc-msforms {
	--wpforms-field-border-radius: var(--hcfl-radius-field);
	--wpforms-field-border-color: var(--hcfl-border);
	--wpforms-field-background-color: var(--hcfl-field-bg);
	--wpforms-field-text-color: var(--hcfl-text);
	--wpforms-field-menu-color: var(--hcfl-field-bg);
	--wpforms-label-color: var(--hcfl-text);
	--wpforms-label-sublabel-color: var(--hcfl-muted);
	--wpforms-button-background-color: var(--hcfl-accent-strong);
	--wpforms-button-text-color: var(--hcfl-on-accent);
	--wpforms-button-border-radius: 999px;
	--wpforms-page-break-color: var(--hcfl-accent-strong);

	max-width: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: var(--hcfl-text);
}

div.wpforms-container.hc-msforms .wpforms-form,
div.wpforms-container.hc-msforms .wpforms-field-container {
	padding: 0;
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field {
	padding: 12px 0;
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-label {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hcfl-text);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-required-label {
	color: var(--hcfl-required);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-description,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-sublabel {
	font-size: 0.875rem;
	color: var(--hcfl-muted);
}

div.wpforms-container.hc-msforms .wpforms-form input[type="text"],
div.wpforms-container.hc-msforms .wpforms-form input[type="email"],
div.wpforms-container.hc-msforms .wpforms-form input[type="url"],
div.wpforms-container.hc-msforms .wpforms-form input[type="tel"],
div.wpforms-container.hc-msforms .wpforms-form input[type="number"],
div.wpforms-container.hc-msforms .wpforms-form textarea,
div.wpforms-container.hc-msforms .wpforms-form select {
	max-width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--hcfl-border);
	border-radius: var(--hcfl-radius-field);
	background: var(--hcfl-field-bg);
	font: inherit;
	color: var(--hcfl-text);
}

div.wpforms-container.hc-msforms .wpforms-form input:focus,
div.wpforms-container.hc-msforms .wpforms-form textarea:focus,
div.wpforms-container.hc-msforms .wpforms-form select:focus {
	border-color: var(--hcfl-accent-strong);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcfl-accent-strong) 25%, transparent);
	outline: none;
}

/* Radio and checkbox rows: large click targets. */
div.wpforms-container.hc-msforms .wpforms-form ul.wpforms-icon-choices,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-radio ul,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-checkbox ul {
	margin: 0;
	padding: 0;
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-radio ul li,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-checkbox ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 12px;
	border-radius: var(--hcfl-radius-field);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-radio ul li:hover,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-checkbox ul li:hover {
	background: var(--hcfl-tint);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-radio ul li input,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-checkbox ul li input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--hcfl-accent-strong);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-radio ul li label,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-checkbox ul li label {
	flex: 1;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
}

/* Dropdowns. Windows and Android draw the popup of a native <select> from the
   colors of its <option>s, which would otherwise inherit light text in dark
   mode on a default white list. */
div.wpforms-container.hc-msforms .wpforms-form select option,
div.wpforms-container.hc-msforms .wpforms-form select optgroup {
	background-color: var(--hcfl-field-bg);
	color: var(--hcfl-text);
}

/* Modern dropdown (Choices.js): the list background comes from
   --wpforms-field-menu-color above, the text has to follow it. */
div.wpforms-container.hc-msforms .wpforms-form .choices__inner,
div.wpforms-container.hc-msforms .wpforms-form .choices__list--dropdown,
div.wpforms-container.hc-msforms .wpforms-form .choices__list--dropdown .choices__item,
div.wpforms-container.hc-msforms .wpforms-form .choices__input {
	color: var(--hcfl-text);
}

div.wpforms-container.hc-msforms .wpforms-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
	color: var(--hcfl-on-accent);
}

div.wpforms-container.hc-msforms .wpforms-form .choices__input {
	background-color: var(--hcfl-field-bg);
}

/* Rich Text field. The visual editor is an iframe and its menus open in
   panels appended to <body>, so neither inherits our colors. The whole editor
   keeps one light palette with dark text in both modes; the iframe body gets
   the same through the tiny_mce_before_init filter (see HCFL_Stage). */
div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-editor-wrap,
div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-editor-container,
div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-editor-area,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-tinymce {
	color-scheme: light;
}

div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-editor-container,
div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-editor-area,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-tinymce,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-toolbar-grp,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-statusbar {
	background-color: #fff;
	color: #1d2327;
}

div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-btn .mce-txt,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-btn .mce-ico,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-path-item,
div.wpforms-container.hc-msforms .wpforms-field-richtext .mce-statusbar .mce-wordcount {
	color: #3c434a;
}

div.wpforms-container.hc-msforms .wpforms-field-richtext .wp-switch-editor {
	background-color: #f6f7f7;
	color: #50575e;
}

div.wpforms-container.hc-msforms .wpforms-field-richtext .tmce-active .switch-tmce,
div.wpforms-container.hc-msforms .wpforms-field-richtext .html-active .switch-html {
	background-color: #fff;
	color: #1d2327;
}

/* Toolbar dropdown panels (paragraph format, colors, ...). */
.mce-floatpanel.mce-menu,
.mce-floatpanel.mce-menu .mce-menu-item {
	color-scheme: light;
	background-color: #fff;
	color: #1d2327;
}

.mce-floatpanel.mce-menu .mce-menu-item .mce-text,
.mce-floatpanel.mce-menu .mce-menu-item .mce-ico {
	color: #1d2327;
}

.mce-floatpanel.mce-menu .mce-menu-item:hover,
.mce-floatpanel.mce-menu .mce-menu-item:focus,
.mce-floatpanel.mce-menu .mce-menu-item.mce-active {
	background-color: #f0f0f1;
}

/* Validation and confirmation */
div.wpforms-container.hc-msforms .wpforms-form label.wpforms-error,
div.wpforms-container.hc-msforms .wpforms-form em.wpforms-error {
	display: block;
	font-size: 0.875rem;
	color: var(--hcfl-error);
}

div.wpforms-container.hc-msforms .wpforms-form input.wpforms-error,
div.wpforms-container.hc-msforms .wpforms-form textarea.wpforms-error,
div.wpforms-container.hc-msforms .wpforms-form select.wpforms-error {
	border-color: var(--hcfl-error);
}

div.wpforms-container.hc-msforms .wpforms-confirmation-container-full,
div.wpforms-container.hc-msforms.wpforms-container-full .wpforms-confirmation-container-full {
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid var(--hcfl-accent-strong);
	border-radius: 0 var(--hcfl-radius-field) var(--hcfl-radius-field) 0;
	background: var(--hcfl-tint);
	color: var(--hcfl-text);
}

/* WPForms colors the paragraphs inside the message itself (dark text), which
   is unreadable on the dark card, so everything in it follows the container. */
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full p,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full li,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full strong,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full em,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full h1,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full h2,
div.wpforms-container.hc-msforms .wpforms-confirmation-container-full h3 {
	color: inherit;
}

div.wpforms-container.hc-msforms .wpforms-confirmation-container-full p {
	margin: 0 0 0.5em;
}

div.wpforms-container.hc-msforms .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

div.wpforms-container.hc-msforms .wpforms-confirmation-container-full a {
	color: var(--hcfl-accent-strong);
}

/* Form-level error box (for example "This form is closed." on submit). */
div.wpforms-container.hc-msforms .wpforms-error-container {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--hcfl-error);
	border-radius: 0 var(--hcfl-radius-field) var(--hcfl-radius-field) 0;
	background: var(--hcfl-error-bg);
	color: var(--hcfl-text);
}

div.wpforms-container.hc-msforms .wpforms-error-container p {
	margin: 0;
	color: inherit;
}

/* Footer row with buttons; Page Break puts Back and Next in floated wrappers. */
div.wpforms-container.hc-msforms .wpforms-form .wpforms-submit-container,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-field-pagebreak {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-pagebreak-left,
div.wpforms-container.hc-msforms .wpforms-form .wpforms-pagebreak-right {
	float: none;
	margin: 0;
}

/* Page Break progress (WPForms Plus) */
div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-indicator {
	margin: 0 0 16px;
	font-size: 0.875rem;
	color: var(--hcfl-muted);
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-indicator-page-progress-wrap {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--hcfl-track);
	overflow: hidden;
}

div.wpforms-container.hc-msforms .wpforms-form .wpforms-page-indicator-page-progress {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--hcfl-accent), var(--hcfl-accent-strong));
	border-radius: 999px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
	.hcfl-stage {
		padding: 12px;
	}

	.hcfl-stage__main {
		align-items: flex-start;
	}

	.hcfl-footer {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 20px;
	}

	.hcfl-start__frame {
		aspect-ratio: auto;
		min-height: 70vh;
		padding: 16px;
		justify-content: center;
	}

	.hcfl-start__card {
		width: 100%;
		min-width: 0;
	}

	.hcfl-card {
		padding: 22px;
	}

	.hcfl-card__head {
		margin: -22px -22px 16px;
		padding: 22px;
	}

	.hcfl-card__foot {
		margin: 24px -22px -22px;
		padding: 14px 22px;
	}
}