:root {
	--primary-color: #12284C;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	font-family: 'Montserrat';
}

body {
	padding: 12px;
	background-color: var(--primary-color);
}

.container {
	border-radius: 4px;
	color: var(--primary-color);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;

	strong {
		color: var(--primary-color);
		font-weight: 600;
	}

	form {
		border-radius: 4px;
		overflow: hidden;
	}

	.content {
		padding: 16px 16px 24px;
		background-color: #fff;

		display: flex;
		flex-direction: column;
		gap: 24px;

		border-radius: 4px;

		&.thanks {
			text-align: center;
		}
	}

	fieldset {
		border: none;

		p {
			margin-bottom: 12px;
		}

		h2 {
			margin-bottom: 8px;

			font-size: 16px;
			font-weight: 600;
		}

	}

	label {
		font-size: 14px;
	}

	textarea {
		padding: 4px 8px;
		min-width: 100%;
	}

	button {
		margin-top: 8px;
		width: 100%;

		padding: 8px 16px;

		box-shadow: none;
		border: none;

		border-radius: 4px;

		cursor: pointer;

		background-color: #fff;
		color: var(--primary-color);
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 1.1px;

		&:hover,
		&:active {
			opacity: .95;
		}
	}

	.field-recomendation-score {
		input {
			width: 0;
			height: 0;

			position: absolute;
			left: 0;
			top: 0;
		}

		.r-inputs {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}

		label {
			position: relative;
			display: inline-block;

			width: 30px;
			height: 30px;

			border: 1px solid var(--primary-color);
			border-radius: 50%;

			color: var(--primary-color);
			font-weight: 600;

			text-align: center;
			vertical-align: middle;

			cursor: pointer;

			transition: all .2s;

			display: flex;
			justify-content: center;
			align-items: center;

			text-align: center;

			&:has(input:checked),
			&:hover,
			&:active {
				background-color: var(--primary-color);
				color: #fff;
			}
		}
	}

	.star-inputs {
		display: flex;
		flex-direction: column;
		justify-self: flex-start;
		gap: 12px;

		label {
			position: relative;

			width: fit-content;

			cursor: pointer;

			display: flex;
			align-items: center;
			gap: 8px;


			&::before {
				content: "";

				background-image: url(/static/star.png);
				background-repeat: no-repeat;
				background-size: contain;

				min-width: 24px;
				min-height: 24px;
			}

			&.filled {
				&::before {
					background-image: url(/static/star-filled.png)
				}
			}
		}

		input {
			position: absolute;
			top: 0;
			left: 0;

			width: 0;
			height: 0;
		}
	}

	@media (min-width: 840px) {
		max-width: 840px;

		padding-bottom: 12px;

		font-size: 18px;

		margin: 0 auto;

		h2 {
			font-size: 20px;
		}

		.content {
			padding: 24px 48px 32px 24px;
			gap: 32px;
		}

		form {
			display: flex;
			flex-direction: column;
			align-items: center;

			gap: 8px;
		}

		button {
			width: fit-content;
			padding: 12px 48px;
		}

		.field-recomendation-score {
			.r-inputs {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
			}
		}
	}
}

.error {
	background-color: #DC2626;
	color: #fff;

	position: absolute;
	left: 50%;
	top: 24px;
	transform: translateX(-50%);
	z-index: 2;

	width: 90%;

	animation: erroranim .5s;

	.error-close {
		cursor: pointer;

		display: flex;
		justify-content: flex-end;

		padding: 4px 6px;

		filter: invert(1);
	}

	.message {
		font-size: 14px;

		padding: 0 16px 16px;
	}
}

@keyframes erroranim {
	0% {
		top: -100%;
	}

	100% {
		top: 24px;
	}
}