/*
 * Fixed brand skin (per explicit request): blue card background, white pill
 * inputs, square white checkboxes/radios with a teal fill, teal pill submit
 * button. This intentionally does NOT adapt to the active theme — colors,
 * radii and spacing below are hardcoded to match the approved design.
 */

:root {
	--vafc-bg: #0069b4;
	--vafc-text: #ffffff;
	--vafc-hint: rgba(255, 255, 255, 0.75);
	--vafc-input-bg: #ffffff;
	--vafc-input-text: #16324a;
	--vafc-accent: #22b5a0;
	--vafc-accent-text: #ffffff;
	--vafc-required: #ffd166;
	--vafc-error: #ff8a80;
	--vafc-success: #8be9b1;
	--vafc-confirmation-text: #00305d;
}

.vafc-form {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1.25em;
	background: var(--vafc-bg);
	color: var(--vafc-text);
	padding: 2em;
	box-sizing: border-box;
	font-family: inherit;
}

/* Honeypot: off-screen (not display:none) so most bots still fill it in,
   while it stays fully invisible and unreachable for real visitors. */
.vafc-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vafc-field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	flex: 1 1 100%;
	box-sizing: border-box;
	min-width: 0;
}

.vafc-field-width-half {
	flex-grow: 0;
	flex-basis: calc(50% - 0.625em);
}

.vafc-field-width-third {
	flex-grow: 0;
	flex-basis: calc(33.333% - 0.834em);
}

/* Below this, half/third-width fields stack to full width for usability. */
@media (max-width: 640px) {
	.vafc-field-width-half,
	.vafc-field-width-third {
		flex-basis: 100%;
	}
}

/* Forces a flex-wrap line break before the field that follows it. */
.vafc-row-break {
	flex-basis: 100%;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.vafc-field-label,
.vafc-fieldset-label {
	font-weight: 700;
	color: var(--vafc-text);
}

.vafc-field select,
.vafc-field input[type="text"],
.vafc-field input[type="email"],
.vafc-field input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	background: var(--vafc-input-bg);
	color: var(--vafc-input-text);
	border: none;
	border-radius: 999px;
	padding: 0.85em 1.25em;
	font-size: 1em;
	font-family: inherit;
}

.vafc-field select:focus,
.vafc-field input[type="text"]:focus,
.vafc-field input[type="email"]:focus,
.vafc-field input[type="tel"]:focus {
	outline: 3px solid var(--vafc-accent);
	outline-offset: 2px;
}

/*
 * Page builders (Breakdance included) often ship a global "all elements are
 * flex/block" reset with high specificity that can outrank the native
 * `hidden` attribute's default `display: none`. Force it so conditional
 * fields actually disappear instead of just losing their layout.
 */
.vafc-form [hidden] {
	display: none !important;
}

/* Visually nest a conditional field under the option that reveals it. */
.vafc-field[data-vafc-condition-field] {
	margin-left: 1.75em;
}

.vafc-options-stacked {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.vafc-options-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 2em;
}

.vafc-option-label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-weight: 400;
	color: var(--vafc-text);
}

.vafc-option-label input[type="checkbox"],
.vafc-option-label input[type="radio"] {
	flex-shrink: 0;
	margin-top: 3px;
}

.vafc-option-label a,
.vafc-option-label a:visited,
.vafc-fieldset-label a,
.vafc-fieldset-label a:visited,
.vafc-field-description a,
.vafc-field-description a:visited {
	color: inherit !important;
	text-decoration: underline !important;
}

.vafc-option-label a:hover,
.vafc-option-label a:focus,
.vafc-fieldset-label a:hover,
.vafc-fieldset-label a:focus,
.vafc-field-description a:hover,
.vafc-field-description a:focus {
	opacity: 0.85;
}

.vafc-form input[type="checkbox"],
.vafc-form input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.2em;
	height: 1.2em;
	min-width: 1.2em;
	border-radius: 4px;
	background: var(--vafc-input-bg);
	position: relative;
	cursor: pointer;
	margin: 0;
}

.vafc-form input[type="checkbox"]:checked::after,
.vafc-form input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 2px;
	background: var(--vafc-accent);
}

.vafc-form input[type="checkbox"]:focus-visible,
.vafc-form input[type="radio"]:focus-visible {
	outline: 2px solid var(--vafc-accent);
	outline-offset: 2px;
}

.vafc-field-submit {
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 0.5em;
}

/* Only stretch the button full-width on small screens. */
@media (max-width: 640px) {
	.vafc-submit {
		width: 100%;
	}
}

.vafc-submit {
	background: var(--vafc-accent);
	color: var(--vafc-accent-text);
	border: none;
	border-radius: 999px;
	padding: 0.9em 2.5em;
	font-size: 1.05em;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.vafc-submit:hover,
.vafc-submit:focus-visible {
	filter: brightness(1.08);
}

.vafc-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.vafc-submit.vafc-is-loading {
	color: transparent !important;
	position: relative;
}

.vafc-submit.vafc-is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--vafc-accent-text);
	border-radius: 50%;
	animation: vafc-spin 0.6s linear infinite;
}

@keyframes vafc-spin {
	to {
		transform: rotate(360deg);
	}
}

.vafc-field-description {
	margin: 0;
	font-size: 0.85em;
	color: var(--vafc-hint);
}

/* Aligns with the checkbox's own text (checkbox width + gap in .vafc-option-label), not the checkbox icon itself. */
.vafc-field-description-checkbox {
	margin-left: 1.8em;
}

.vafc-required-mark {
	color: var(--vafc-required);
}

.vafc-form-messages {
	flex-basis: 100%;
	padding: 0.75em 1.25em;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
}

.vafc-form-messages.vafc-message-error {
	color: var(--vafc-error);
}

.vafc-form-messages.vafc-message-success {
	color: var(--vafc-success);
}

.vafc-field.vafc-has-error select,
.vafc-field.vafc-has-error input {
	outline: 2px solid var(--vafc-error);
}

.vafc-field-error {
	margin: 0;
	font-size: 0.85em;
	color: var(--vafc-error);
}

.vafc-confirmation {
	display: flex;
	flex-direction: column;
	gap: 1em;
	color: var(--vafc-confirmation-text);
}

.vafc-confirmation-has-bg {
	padding: 2em;
	border-radius: 12px;
	box-sizing: border-box;
}

.vafc-confirmation-logo img {
	max-width: 220px;
	height: auto;
	display: block;
}

.vafc-add-to-calendar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.vafc-add-to-calendar a,
.vafc-add-to-calendar a:visited,
.vafc-add-to-calendar a:hover,
.vafc-add-to-calendar a:focus {
	background: var(--vafc-accent);
	color: var(--vafc-accent-text) !important;
	border-radius: 999px;
	padding: 0.7em 1.5em;
	text-decoration: none !important;
	font-weight: 700;
}

.vafc-add-to-calendar a:hover {
	filter: brightness(1.08);
}

.vafc-confirmation-headline {
	margin: 0;
	font-size: 1.4em;
}

.vafc-confirmation-back-link {
	margin: 0;
	font-size: 0.9em;
}

.vafc-confirmation-back-link a {
	color: var(--vafc-confirmation-text);
	opacity: 0.75;
}

.vafc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}