.c-help-banner {
	padding: var(--spacing-lg) 0;
	background-color: var(--color-blue);

	.c-help-banner__sub-title {
		color: var(--color-white);
		text-transform: uppercase;
	}

	.c-help-banner__title {
		display: block;
		color: var(--color-white);
	}

	.c-help-banner__form-input-wrapper {
		position: relative;

		max-width: 640px;

		@media (width <= 768px) {
			max-width: 320px;
		}

		input {
			width: 100%;
			padding: var(--spacing-xs);
			border: none;

			background-color: var(--color-white);

			outline: none;
		}
	}

	.c-help-banner__loading {
		display: none;
		position: absolute;
		top: 50%;
		right: var(--spacing-sm);
		transform: translateY(-50%);
		z-index: 1000;
		font-style: italic;

		&.on {
			display: flex;
		}
	}

	.c-help-banner__form-return {
		width: 100%;
		max-width: 640px;
		max-height: 640px;
		overflow-x: hidden;
		overflow-y: auto;

		position: absolute;
		z-index: 100;

		background-color: var(--color-white);

		outline: 1px solid var(--color-grey-light);
		outline-offset: -1px;
		margin-block-start: 2px;

		&:has(ol:empty) {
			display: none;
		}
	}

	.c-help-banner__form-list {
		display: flex;
		flex-flow: column nowrap;
		gap: var(--spacing-sm);
		margin: 0;
		padding: var(--spacing-xs);

		list-style: none;

		li {
			a {
				&:hover {
					color: var(--color-blue);
				}
			}
		}
	}
}