:root {
	--error-indicator: oklch(60.83% 0.209 27.03);
	--question-title: 1rem;
	--question-label: 1rem;
}

.override {
	width: 100% !important;
	margin: 0 !important;
	overflow: auto !important;
	padding-block-end: 1.938rem;
}

.progress-bar-container {
	margin-block-end: 1rem;
}

.ft-override {
	padding: 0 !important;
	/* display: none !important; */
}

.header-main-container {
	z-index: 1000;
	/* box-shadow:
		rgba(60, 64, 67, 0.025) 0px 1px 3px 0px,
		rgba(60, 64, 67, 0.0125) 0px 4px 8px 3px; */
}

.override:has(.progress-bar-container) .progress-bar-container {
	max-width: 90dvw;
}

.button.skip {
	display: none !important;
}

.button {
	max-width: 251.12px;
}

.flex-container > * + * {
	margin-block-start: 1.938rem;
}

.questionnaire-container {
	overflow: initial;
}

.questionnaire-grouped {
	--bg-color: oklch(from #f8f8f8 l c h);
	flex: 1;
	width: 70rem;
	margin: 0 auto;
	max-width: 90dvw;
	& .g-card + .g-card {
		position: relative;
		&::before {
			position: absolute;
			content: '';
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 1.5px;
			background-color: oklch(from #d0d0d0d0 l c h / 20%);
			z-index: 1;
		}
	}
}

.g-card__wrapper {
	box-shadow:
		rgba(60, 64, 67, 0.1) 0px 1px 3px 0px,
		rgba(60, 64, 67, 0.07) 0px 3px 5px;
	border-radius: 0.7rem;
	overflow: hidden;
}

.g-card {
	background-color: var(--bg-color);
	padding-block: 1.5rem;
	padding-inline: 1.7rem;
	text-align: initial;
}

.g-card:is(.cover) {
	margin-block-end: 1.5rem;
	border-radius: 0.7rem;
	box-shadow:
		rgba(60, 64, 67, 0.1) 0px 1px 3px 0px,
		rgba(60, 64, 67, 0.07) 0px 3px 5px;
}

.g-card__title {
	font-size: var(--question-title);
	font-weight: 500;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.g-card__title:lang(geo) {
	font-weight: 500;
}

.g-card__title--light {
	font-weight: 400;
}

.g-card__title--error {
	color: var(--error-indicator);
}

.g-card__title--required {
	font-size: 1.4rem;
	line-height: inherit;
	color: var(--error-indicator);
	vertical-align: middle;
}

.g-card__content.g-flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.g-card__content.g-flex-col {
	display: flex;
	flex-flow: column;
}

.g-card__content.reverse {
	display: flex;
	flex-direction: row-reverse;
}

.g-card__error {
	font-size: 0.8rem;
	margin-inline: 1rem;
	margin-block-start: 1rem;
	display: none;
}

.g-card__error.error-visible {
	display: block;
	color: var(--error-indicator);
}

.g-card__iframe {
	width: 100%;
	height: 100%;
}

.g-card__actions {
	display: inline-grid;
	grid-template-columns: repeat(2, 1fr);
	width: max-content;
	margin-inline: auto;

	column-gap: 1rem;
}

.choice {
	display: flex;
	min-height: 1.5rem;
	padding-inline: 0 0.5em;
	padding-block: 0.5em;
	align-items: center;
}

.choice--boolean {
	padding: 0;
}

.choice--action {
	padding: 0;
}

.choice__label {
	margin-inline-start: 0.75em;
	font-size: var(--question-label);
}

.choice__label--action {
	margin: 0;
}

.radio {
	min-width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	border: 2px solid var(--btn-background-border-selectable);
	box-shadow: var(--btn-shadow);
	position: relative;
}

.radio--indicator {
	position: relative;

	&::before {
		transition:
			width 0.125s,
			height 0.125s;
		content: '';
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		position: absolute;
		background-color: var(--primary-color);
	}
}

.radio--actual:checked + .radio--indicator {
	border-color: var(--primary-color);
	box-shadow: var(--btn-shadow-hover);

	&::before {
		width: 70%;
		height: 70%;
	}
}

.checkbox {
	--transition-duration: 0.125s;
	--transition-type: ease;
	min-width: 1.3rem;
	height: 1.3rem;
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--btn-background-border-selectable);
	box-shadow: var(--btn-shadow);
	position: relative;
	overflow: hidden;
}

.checkbox--indicator {
	position: relative;
	background-color: transparent;
	transition: border-color var(--transition-duration) var(--transition-type);

	&::before {
		transition: all var(--transition-duration) var(--transition-type);
		position: absolute;
		content: '';
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-color: var(--primary-color);
		z-index: 1;
	}
}

.checkbox--actual:checked + .checkbox--indicator {
	border-color: var(--primary-color);
	box-shadow: var(--btn-shadow-hover);

	&::before {
		width: 40px;
		height: 40px;
	}
}

.checkbox--indicator > .checkmark {
	width: 80%;
	height: 80%;
	border-bottom: 2px solid var(--bg-color);
	position: relative;
	z-index: 2;
	transform: rotate(-45deg) translateX(10%) translateY(-30%);
	&::before {
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		height: 50%;
		width: 2px;
		background-color: var(--bg-color);
	}
}

.boolean--indicator {
	border-radius: 50%;
}

.action--indicator {
	padding-block: 0.25em;
	padding-inline: 0.5em;
	display: inline-flex;
	justify-content: center;
	width: 100%;

	border-radius: var(--bs-border-radius-pill) !important;
	background: var(--btn-background-selectable);
	box-shadow: var(--btn-shadow);
	cursor: pointer;
	transition: var(--btn-hover-transition);
}

.action--actual:checked + .action--indicator {
	background-color: var(--primary-color);
	color: oklch(100% 0 0);
}

.g-flex:has(.boolean--indicator) {
	padding-inline: 20%;
}

.boolean--indicator {
	box-shadow: var(--btn-shadow);
}

.boolean--actual:checked + .boolean--indicator {
	&[data-type='like'] path:first-of-type {
		fill: #329f28;
	}
	&[data-type='dislike'] path:first-of-type {
		fill: #d3121a;
	}
}

.choice--rating-star {
	display: inline-block;
	padding: 0;

	& + & {
		margin-inline-start: 1rem;
	}

	&:first-of-type {
		margin-inline-start: auto;
	}
	&:last-of-type {
		margin-inline-end: auto;
	}
}

.g-card:has(.choice--rating-star:nth-child(1) .rating-star--actual:checked)
	.choice--rating-star:nth-child(-n + 1),
.g-card:has(.choice--rating-star:nth-child(2) .rating-star--actual:checked)
	.choice--rating-star:nth-child(-n + 2),
.g-card:has(.choice--rating-star:nth-child(3) .rating-star--actual:checked)
	.choice--rating-star:nth-child(-n + 3),
.g-card:has(.choice--rating-star:nth-child(4) .rating-star--actual:checked)
	.choice--rating-star:nth-child(-n + 4),
.g-card:has(.choice--rating-star:nth-child(5) .rating-star--actual:checked)
	.choice--rating-star:nth-child(-n + 5) {
	& #star-filled {
		display: initial !important;
		& path {
			fill: var(--star-color);
		}
	}

	& #star-outlined {
		display: none !important;
	}
}

.rating-number-wrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: calc(2.5rem * 6 + 0.5rem * 5);
	justify-content: center;
	gap: 0.5rem;
	margin-inline: auto;
}

.choice--rating-number {
	padding: 0;
}

.rating-number {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--btn-background-selectable);
	box-shadow: var(--btn-shadow);
	transition: var(--btn-hover-transition);
	border: 0.6px solid var(--btn-background-border-selectable);
	cursor: pointer;
}

.rating-number--indicator {
	display: flex;
	& span {
		margin: auto;
	}
}

.rating-number--actual:checked + .rating-number--indicator {
	background-color: var(--primary-color);
	color: oklch(100% 0 0);
}

.rating-emoji-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-inline: auto;
}

.choice--rating-emoji {
	padding: 0;
}

.rating-emoji {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	box-shadow: var(--btn-shadow);
	transition: var(--btn-hover-transition);
	cursor: pointer;
	& path {
		shape-rendering: geometricPrecision;
		fill: #ffffff;
	}

	& circle {
		transition: var(--btn-hover-transition);
		fill-opacity: 0.3;
		stroke-opacity: 0.3;
	}
}

.rating-emoji--indicator {
	display: inline-block;
}

.rating-emoji--actual:checked + .rating-emoji--indicator {
	& circle {
		fill-opacity: 1;
		stroke-opacity: 1;
	}
}

.rating-textarea {
	padding-inline: 0;
	border-bottom: 1.5px solid oklch(from var(--primary-color) l c h / 50%);
	height: 100%;
	background-color: transparent;
}

.g-card__content:has(.rating-textarea)::after {
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) ' ';

	/* This is how textarea text behaves */
	white-space: pre-wrap;

	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
	word-break: break-word;
}

.g-card__content > .rating-textarea,
.g-card__content::after {
	font: inherit;
	grid-area: 1 / 1 / 2 / 2;
}

.rating-textarea:focus {
	border-bottom: 2px solid var(--primary-color);
}

textarea {
	word-break: break-all;
	max-width: 100%;
}

input ~ *:focus-visible {
	outline: 2px solid orange;
	outline-offset: 2px;
}

.ft-container > a {
	width: max-content;
	display: block;
	margin: auto;
}

.ft-container > a > svg {
	width: 8.25rem;
}

@media screen and (min-width: 780px) {
	.g-card {
		padding-inline: 3rem;
	}
	.boolean--indicator {
		transition: var(--btn-hover-transition);
		cursor: pointer;
		&:hover {
			scale: var(--btn-hover-scale);
			box-shadow: var(--btn-shadow-hover);
		}
	}

	.action--indicator {
		transition: var(--btn-hover-transition);
		cursor: pointer;
		&:hover {
			scale: var(--btn-hover-scale);
			box-shadow: var(--btn-shadow-hover);
		}
	}

	.rating-number-wrapper {
		max-width: 100%;
		gap: 0.8rem;
		margin: 0;
	}

	.rating-number--indicator {
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 0.2rem;
		& span {
			font-size: 1.2rem;
		}
	}

	.rating-number--indicator:hover {
		scale: var(--btn-hover-scale);
		box-shadow: var(--btn-shadow-hover);
	}

	.rating-emoji--indicator:hover {
		scale: var(--btn-hover-scale);
		box-shadow: var(--btn-shadow-hover);
		& circle {
			fill-opacity: 1;
			stroke-opacity: 1;
		}
	}

	.ft-container > a > svg {
		width: 11.875rem;
	}

	.submit-container {
		max-width: 73%;
	}

	.button {
		max-width: 19.5rem;
	}
}

@media screen and (max-height: 800px) and (min-width: 780px) {
	.footer-container {
		border-bottom-width: 1rem;
	}
}
/* @media screen and (max-height: 700px) and (min-width: 780px) {
	:root {
		font-size: 0.75rem !important;
	}
} */