/* Authoritative public-form presentation. Apply these classes to public-facing
	 NationBuilder forms; page-specific layout belongs in the page stylesheet. */
.opportunity-form-panel {
	--form-panel-border: var(--brand-teal);
	--form-panel-ink: var(--brand-purple);
	--form-panel-surface: var(--bs-white);
	--form-panel-field-border: var(--bs-input-border-color);
	padding: clamp(1.75rem, 4vw, 3.5rem);
	background: var(--form-panel-surface);
	border: clamp(0.3rem, 0.8vw, 0.625rem) solid var(--form-panel-border);
	color: var(--form-panel-ink);

	& .opportunity-form-panel__title {
		margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
		color: var(--form-panel-ink);
		font-family: var(--bs-font-family-headline);
		font-size: clamp(2.5rem, 5vw, 4rem);
		font-weight: 800;
		line-height: 0.82;
		text-align: center;
		text-transform: uppercase;
	}

	& .opportunity-form-panel__title-emphasis {
		color: var(--form-panel-border);
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.form-group {
		margin-bottom: 0;
	}

	label {
		display: inline-block;
		margin-bottom: 0.45rem;
		color: var(--form-panel-ink);
		font-family: var(--bs-font-family-base);
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1.2;
	}

	.form-control,
	.custom-select {
		min-height: 2.85rem;
		border: 1px solid var(--form-panel-field-border);
		border-radius: var(--radius-pill);
		background: var(--bs-white);
		color: var(--form-panel-ink);
		font-family: var(--bs-font-family-base);
		font-size: 0.875rem;

		&:focus {
			border-color: var(--form-panel-border);
			box-shadow: 0 0 0 3px rgb(0 188 193 / 20%);
		}
	}

	.labeled-tags-container {
		padding-top: 4px;
	}

	.custom-control-label {
		font-size: 0.8rem;
		font-weight: 500;
		font-size: 1.15rem;
	}

	.custom-control-input:checked ~ .custom-control-label::before {
		border-color: var(--form-panel-border);
		background-color: var(--form-panel-border);
	}

	& .opportunity-form-panel__help {
		margin: 0;
		color: var(--form-panel-ink);
		font-family: var(--bs-font-family-base);
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1.5;
		opacity: 0.65;
		text-align: center;
	}

	.btn-signup,
	.submit-button {
		width: 100%;
		min-height: 3.25rem;
		margin: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--form-panel-ink);
		color: #fff;
		font-family: var(--bs-font-family-base);
		font-size: 1rem;
		font-weight: 600;

		&:hover,
		&:focus {
			background: var(--form-panel-border);
			color: #fff;
		}
	}

	.form-errors:not(:empty) {
		padding: 0.85rem 1rem;
		border-radius: 0.5rem;
		background: var(--form-error-surface);
		color: var(--form-error-ink);
		font-weight: 700;
	}
}

form label {
	margin-bottom: 5px;
	color: var(--brand-purple);
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.36px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--input-border-color-subtle);
	border-radius: var(--radius-pill);
	background: transparent;
	color: inherit;
	font: inherit;
}

form select.custom-select {
	background-color: transparent;
	border-color: var(--input-border-color-subtle);
}

/* NationBuilder account-access forms. */
body.session-page {
	background:
		radial-gradient(circle at 85% 12%, rgb(0 237 225 / 65%), transparent 28rem),
		linear-gradient(145deg, var(--surface-soft) 0%, #d7f7f4 100%);

	& main#content {
		min-height: calc(100vh - var(--size-header));
		background: transparent;
	}

	& main#content > .page-shell {
		width: min(100%, 46rem);
	}

	& .form {
		flex: 0 0 100%;
		width: 100%;
		max-width: 38rem;
		margin-inline: auto;
	}

	& .card,
	& .card-group {
		overflow: hidden;
		border: 0;
		border-radius: 1.5rem;
		background: var(--secondary);
		box-shadow: 0 1.5rem 4rem rgb(var(--secondary-rgb) / 22%);
	}

	& .card-group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		& .card {
			border-radius: 0;
			box-shadow: none;
		}

		& .card + .card {
			border-left: 1px solid rgb(229 253 252 / 24%);
			background: var(--brand-purple);
		}
	}

	& .card-body {
		padding: clamp(2rem, 5vw, 3.5rem) !important;
		color: var(--surface-soft);
	}

	& .card h2,
	& .form > h2 {
		margin: 0 0 1.25rem;
		color: var(--primary);
		font-family: "Reddit Sans Condensed", sans-serif;
		font-size: clamp(2rem, 5vw, 3.25rem);
		font-weight: 800;
		line-height: 0.95;
		letter-spacing: -0.03em;
	}

	& .card p,
	& .card small,
	& .card .small,
	& .form > small {
		color: var(--surface-soft);
	}

	& .form-control-material {
		margin-top: 1.75rem;
	}

	& .form-control {
		border: 2px solid transparent;
		background: #fff;
		color: var(--secondary);

		&:focus {
			border-color: var(--primary);
			box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 30%);
		}
	}

	& .floating-label {
		color: var(--surface-soft);
	}

	& .btn-primary {
		width: 100%;
		margin-top: 1.25rem;
		border: 0;
		background: var(--primary);
		color: var(--secondary);
		font-weight: 800;

		&:hover,
		&:focus {
			background: var(--surface-soft);
			color: var(--secondary);
		}
	}

	& .form-group > a,
	& .card a:not(.btn) {
		display: inline-block;
		margin-top: 1rem;
		color: var(--primary);
		font-weight: 700;
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	& .form-errors:not(:empty) {
		margin-top: 1rem;
		padding: 0.85rem 1rem;
		border-radius: 0.5rem;
		background: #fff;
		color: var(--secondary);
		font-weight: 700;
	}

	@media (width <= 767px) {
		& .card-group {
			grid-template-columns: 1fr;

			& .card + .card {
				border-top: 1px solid rgb(229 253 252 / 24%);
				border-left: 0;
			}
		}
	}
}