/* Form and rating styles.
 *
 * Loads after Bootstrap (see index.html) and after theme.css and default.css.
 * That order is what removed twenty of the twenty-one !important declarations
 * this file used to carry: the sheet previously loaded BEFORE Bootstrap, lost
 * to it at equal specificity, and !important was the workaround. The one that
 * remains is on .jTdQsH — a generated class inside the embedded Typeform
 * widget, whose own styles we do not control and cannot outrank otherwise.
 *
 * Values resolve through the tiers in theme.css: component token, then role,
 * then primitive. Do not add a hardcoded colour here.
 */

@keyframes blinker {
	25% {
		opacity: 0.2;
		color: red;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0.2;
		color: red;
	}
}

/* Surface, radius and padding come from the shared card rule in default.css.
 * Only width and layout are this form's own. */
form.default {
	/* The page font token has to reach here too, or forms drift from the page. */
	font-family: var(--bg-page-font-family, var(--bg-font-body));
	margin: 0 auto;
	width: 100%;
	max-width: var(--bg-form-max-width, 580px);
	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: left;
}

form.default h1 {
	font-size: var(--bg-form-title-size, 20px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 26px;
	color: var(--bg-surface-heading, var(--bg-ink));
	font-family: var(--bg-heading-font-family, var(--bg-font-heading));
	margin-bottom: 6px;
	-webkit-text-size-adjust: 100%;
	white-space: normal;
	text-align: center;
}

form.default .form-page {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;

	margin: 10px;
	gap: 0.8rem;
}

form.default .form-page h2 {
	font-size: 1.1em;
	margin-bottom: 0.5em;
}

.form-group.col {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.center-self {
	align-self: center;
}

.form-group.col > label {
	margin-right: 10px;
	width: 50%;
	text-align: left;
}

/* A cell holding one toggle or checkbox in the preference tables. Was a class
 * hook with no rule behind it; it is the alignment that kept being fixed
 * elsewhere, so it is stated once here. */
td.input-option {
	vertical-align: middle;
}

.star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}

.star-rating input[type="radio"] {
	/* don't hide it otherwise it won't be focusable */
	opacity: 0;
	pointer-events: none;
}

.star-rating label {
	font-size: 2rem;
	color: var(--bg-rating-idle, var(--bg-line));
	cursor: pointer;
}

/* Higher specificity than the resting rule above, so it wins without
 * !important now that nothing else is competing. */
.star-rating input[type="radio"]:checked ~ label {
	color: var(--bg-rating-selected, var(--bg-rating));
}

.star-rating label:hover,
.star-rating label:hover ~ label {
	color: var(--bg-rating-selected, var(--bg-rating));
}

/* A focused star must be visible to a keyboard user: the input itself is
 * transparent, so the ring has to be drawn on its label. */
.star-rating input[type="radio"]:focus-visible + label {
	outline: var(--bg-focus-width) solid var(--bg-focus-ring);
	outline-offset: 2px;
}

.custom-pill {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-pill .btn-check {
	display: none;
	/* Hide the radio button */
}

.custom-pill .btn {
	border-radius: var(--bg-primary-radius, var(--bg-radius-control));
	margin-right: 5px;
	margin-bottom: 5px;
	position: relative;
	padding-right: 10px;

	/* Extra space for the checkmark */
}

.custom-pill .btn::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	color: var(--bg-primary-checked-text, var(--bg-ink));
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.custom-pill .btn-check:checked + .btn::before {
	content: "✔ ";
	/* Checkmark symbol */
	opacity: 1;
	color: var(--bg-primary-checked-text, var(--bg-ink));
}

.custom-pill .btn-check:checked + .btn {
	background-color: var(--bg-primary-checked-background, var(--bg-accent-subtle));
	color: var(--bg-primary-checked-text, var(--bg-ink));
}

.custom-pill .btn-check:focus-visible + .btn {
	outline: var(--bg-focus-width) solid var(--bg-focus-ring);
	outline-offset: 2px;
}

.form-buttons {
	display: flex;
	justify-content: right;
	margin-top: 20px;
}

.form-buttons button {
	margin-right: 10px;
}

.extra-space {
	margin-bottom: 2rem;
}

table.nps {
	width: 100%;
	border: 0px;
	padding: 0px;
}

table.nps td.center {
	font-size: 12pt;
	line-height: 12pt;
	text-align: left;
	border: 1px solid var(--bg-surface-border, var(--bg-line));
	padding: 10pt;
	text-align: center;
	width: 20pt;
	height: 25pt;
}

table.nps a {
	color: var(--bg-link-color, var(--bg-accent));
	text-decoration: none;
	cursor: pointer;
}

table.nps td.left {
	font-size: 12pt;
	line-height: 12pt;
	text-align: left;
	border: 1px solid var(--bg-surface-border, var(--bg-line));
	padding: 10pt;
	text-align: center;
	border-radius: 4px 0px 0px 4px;
	width: 20pt;
	height: 25pt;
}

table.nps td.right {
	font-size: 12pt;
	line-height: 12pt;
	text-align: left;
	border: 1px solid var(--bg-surface-border, var(--bg-line));
	padding: 8pt;
	text-align: center;
	border-radius: 0px 4px 4px 0px;
	width: 22pt;
	height: 25pt;
}

table.nps-footer td.left {
	color: var(--bg-page-muted, var(--bg-ink-muted));
	font-size: 14px;
	line-height: 18px;
	text-align: left;
}

table.nps-footer td.right {
	color: var(--bg-page-muted, var(--bg-ink-muted));
	font-size: 14px;
	line-height: 18px;
	text-align: right;
}

table.nps-footer hr {
	color: var(--bg-page-muted, var(--bg-ink-muted));
	margin: 1rem 0;
	border: 0;
	border-top: solid 1px var(--bg-page-muted, var(--bg-ink-muted));
}

.scale-rating {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: stretch;
	align-items: center;
	width: 100%;
}

.scale-rating input[type="radio"] {
	/* don't hide it otherwise it won't be focusable */
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.scale-rating label {
	color: var(--bg-rating-idle, var(--bg-line));
	cursor: pointer;
	border-radius: var(--bg-rating-radius, 4px);
	border: 1px solid var(--bg-rating-border, var(--bg-line));
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin: 2px; /* space between stars */
}

@media (max-width: 768px) {
	.scale-rating label {
		width: 2rem;
		height: 2rem;
		margin: 1px;
	}
}
@media (max-width: 650px) {
	.scale-rating label {
		margin: 1px;
	}
}
@media (max-width: 500px) {
	.scale-rating label {
		margin: 1px;
	}
}

.scale-rating label.double {
	padding-left: 2px;
	padding-right: 2px;
}

.scale-rating div.scale-header {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 100%;
}

.scale-rating div.scale-footer {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--bg-rating-caption, var(--bg-ink-muted));
	width: 100%;
}

.scale-rating label:hover {
	background-color: var(--bg-rating-selected, var(--bg-rating));
	border: 1px solid
		var(--bg-rating-border-selected, var(--bg-rating-selected, var(--bg-rating)));
	color: var(--bg-rating-selected-text, var(--bg-ink));
}

.scale-rating label:hover + label,
.scale-rating input[type="radio"]:checked + label {
	background-color: var(--bg-rating-selected, var(--bg-rating));
	border: 1px solid
		var(--bg-rating-border-selected, var(--bg-rating-selected, var(--bg-rating)));
	color: var(--bg-rating-selected-text, var(--bg-ink));
}

.scale-rating input[type="radio"]:focus-visible + label {
	outline: var(--bg-focus-width) solid var(--bg-focus-ring);
	outline-offset: 2px;
}

.typeform-widget {
	width: 100%;
	height: 500px;
}
@media (max-width: 768px) {
	.typeform-widget {
		height: 400px;
	}
}
@media (max-width: 500px) {
	.typeform-widget {
		height: 300px;
	}
}

.jTdQsH {
	visibility: hidden !important;
}

form.wizard li.nav-item {
	background-color: var(--bg-wizard-tab-background, var(--bg-line-subtle));
}

form.wizard li.nav-item > button.active {
	background-color: var(--bg-wizard-tab-active-background, var(--bg-surface));
	border-radius: 0px;
}