#answerLink {
	min-height: 24px;
	/* Approximate height of the link */
	margin-top: 1rem !important;
	/* Force consistent spacing */
	visibility: hidden;
	/* Hide but preserve space */
	opacity: 0;
	/* Fully transparent when hidden */
	transition: opacity 0.2s ease;
	/* Smooth fade in */
}

#answerLink.d-none {
	display: block !important;
	/* Override Bootstrap's d-none */
	visibility: hidden;
	opacity: 0;
}

#answerLink:not(.d-none) {
	visibility: visible;
	opacity: 1;
}

html {
	/* Always show vertical scrollbar */
	overflow-y: scroll;
}

/* prevent the page from scrolling or bouncing vertically when 
you hit the top/bottom, especially on mobile. 
No pull-to-refresh or overscroll glow. */
html,
body {
	overscroll-behavior-y: none;
}

.option {
	position: relative;
	padding-left: 25px;
	display: flex;
	align-items: flex-start;
}

.option-arrow {
	position: absolute;
	left: 0;
	top: 0.5em;
	font-weight: bold;
}

.option-text {
	flex: 1;
}

@media (max-width: 991.98px) {
	.option {
		padding-left: 0;
	}

	.option-arrow {
		display: none;
	}

	.option-text {
		width: 100%;
	}
}

/* Prevent the buttons from being hidden by the bottom bar in google */
@media (max-width: 992px) {
	.mb-safe-area {
		padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
	}
}

.text-center-custom {
	min-height: 38px;
	/* Height of the buttons */
	margin-bottom: 1rem;
	/* Consistent bottom spacing */
}

/* Add new styles for the report form */
.report-form {
	transition: all 0.3s ease;
}

.report-form:not(.d-none) {
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Make buttons the same height */
.btn-preguntas {
	height: 40px;
}