/* Form Group - Mobile-first */
.form-group {
	margin-bottom: 1.5rem;

	/* Style for focused field labels */
	&:focus-within .form-label {
		color: var(--clr-focus);
		opacity: 1;
	}
}

/* Form Label - Mobile-first */
.form-label {
	color: var(--clr-text-high);
	font-family: "Manrope", "Inter", sans-serif;
	font-size: var(--fs-400);
	font-weight: var(--fw-400);
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
	opacity: 0.85;

	&:not(:first-of-type) {
		margin-top: 1.5rem;
	}
}

/* Form Control - Mobile-first */
.form-control {
	background-color: var(--clr-surface-1);
	border: 1px solid var(--clr-border);
	border-radius: 6px;
	color: var(--clr-text-high);
	font-family: "Manrope", "Inter", sans-serif;
	font-size: var(--fs-500);
	padding: 0.75rem 1rem;
	transition-property: background-color, border-color, box-shadow, color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	width: 100%;

	&:focus {
		background-color: var(--clr-surface-1);
		border-color: var(--clr-focus);
		box-shadow: 0 0 0 0.2rem var(--clr-focus-ring);
		color: var(--clr-text-high);
		outline: none;
	}

	&::placeholder {
		color: var(--clr-text-medium);
	}
}

/* Textarea */
textarea.form-control {
	min-height: 100px;
	resize: vertical;
}

/* Form Text */
.form-text {
	color: var(--clr-text-high);
	font-size: var(--fs-400);
	margin-top: 0.25rem;
}

/* Form Select - Mobile-first */
.form-select {
	background-color: var(--clr-background);
	border: 1px solid var(--clr-border);
	border-radius: 6px;
	color: var(--clr-text-high);
	font-family: "Manrope", "Inter", sans-serif;
	font-size: var(--fs-500);
	padding: 0.75rem 1rem;
	cursor: pointer;
	width: 100%;

	&:focus {
		background-color: var(--clr-background);
		border-color: var(--clr-focus);
		box-shadow: 0 0 0 0.2rem var(--clr-focus-ring);
		color: var(--clr-text-high);
		outline: none;
	}

	/* Style for select options */
	option {
		text-align: center;
		background-color: var(--clr-background);
		color: var(--clr-text-high);
		padding: 1rem;

		/* Style for selected option */
		&:checked {
			background-color: var(--clr-secondary);
			color: var(--clr-text-high);
		}

		/* Style for option hover */
		&:hover {
			background-color: var(--clr-cta);
			color: var(--clr-on-cta);
		}
	}
}

/* Bootstrap checkboxes / radios — drop default blue fill + focus glow */
.form-check-input:checked {
	background-color: var(--clr-cta);
	border-color: var(--clr-cta);
}

.form-check-input:checked[type="checkbox"] {
	background-image: var(--form-check-icon);
}

.form-check-input:checked[type="radio"] {
	background-image: var(--form-radio-icon);
}

.form-switch .form-check-input:checked {
	background-image: var(--form-switch-thumb);
}

.form-check-input:focus {
	border-color: var(--clr-focus);
	box-shadow: 0 0 0 0.2rem var(--clr-focus-ring);
	outline: none;
}

/* Submit Button — align with app-buttons (loaded after this file) */
.btn-info {
	font-family: "Inter", system-ui, sans-serif;
}

/* Error States */
.is-invalid {
	border-color: #e66d6d;
}

.invalid-feedback {
	color: #e66d6d;
	font-size: var(--fs-400);
	margin-top: 0.25rem;
}

/* Help Text */
.help-text {
	color: var(--clr-text-medium);
	font-size: var(--fs-400);
	margin-top: 0.25rem;
}

/* Form Section - Mobile-first */
.form-section {
	background-color: var(--clr-background);
	border: 1px solid var(--clr-border);
	border-radius: 8px;
	padding: 1.5rem;

	@media (min-width: 768px) {
		padding: 2rem;
	}
}

.border-end {
	border-right: 1px solid var(--clr-border) !important;
}

.asteriskField {
	display: none;
}