@layer styles {
	/***
	
	FORMS DESIGN SYSTEM
	Modern, accessible form styling with minimal design
	
	***/

	/* Form Container */
	.form,
	form {
		--form-gap: 0;
		--form-border-radius: 0px;
		--form-border-width: 2px;
		--form-focus-color: var(--color-mid);

		display: flex;
		flex-direction: column;
		gap: var(--form-gap);
		max-width: 60rem;
	}

	.form--wide {
		max-width: 100%;
	}

	/* Form Groups */
	.form-group {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);

		&:hover .form-label,
		&:focus-within .form-label {
			opacity: 1;
		}

		&:has(.form-input:valid:not(:placeholder-shown)) .form-label,
		&:has(.form-textarea:valid:not(:placeholder-shown)) .form-label,
		&:has(.form-select:not([value=''])) .form-label {
			opacity: 1;
		}
	}

	.form-group--inline {
		flex-direction: row;
		align-items: center;
		gap: var(--space-s);
	}

	.form-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-s);
	}

	/* Labels */
	.form-label {
		font-size: var(--step-0);
		font-weight: var(--font-semibold);
		letter-spacing: var(--letterspacing-base);
		line-height: var(--leading-fine);
		color: currentColor;
		display: block;
		font-family: var(--font-base);
		text-transform: none;
		opacity: 0.75;
		transition: opacity 0.3s var(--transition-alt);
	}

	.form-label--required::after {
		content: ' *';
		color: var(--color-primary);
	}

	.form-label--optional::after {
		content: ' (optional)';
		font-weight: var(--font-regular);
		font-size: 0.875em;
		opacity: 0.7;
	}

	/* Basic Text Inputs - Minimal style with bottom border only */
	.form-input,
	.form-textarea {
		width: 100%;
		background-color: transparent;
		border: none;
		border-bottom: var(--form-border-width, 1px) solid currentColor;
		padding: var(--space-xs) var(--space-2xs);
		font-size: var(--step-0);
		font-family: var(--font-base);
		color: currentColor;
		transition: border-color 0.3s var(--transition-alt), opacity 0.3s var(--transition-alt);
		opacity: 0.5;
		outline: none;

		&:hover {
			opacity: 1;
		}

		&:focus {
			opacity: 1;
			border-bottom-color: var(--form-focus-color);
			border-bottom-width: 2px;
		}

		&::-webkit-input-placeholder {
			color: currentColor;
			opacity: 0.4;
			font-family: var(--font-base);
			text-transform: none;
		}

		&::-moz-placeholder {
			color: currentColor;
			opacity: 0.4;
			font-family: var(--font-base);
			text-transform: none;
		}

		&:-ms-input-placeholder {
			color: currentColor;
			opacity: 0.4;
			font-family: var(--font-base);
			text-transform: none;
		}

		&::-ms-input-placeholder {
			color: currentColor;
			opacity: 0.4;
			font-family: var(--font-base);
			text-transform: none;
		}

		&::placeholder {
			color: currentColor;
			opacity: 0.4;
			font-family: var(--font-base);
			text-transform: none;
		}

		&:disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}

		&:invalid:not(:placeholder-shown) {
			border-bottom-color: #d32f2f;
		}

		&:valid:not(:placeholder-shown) {
			opacity: 1;
		}
	}

	/* Reverse colors in light background sections */
	.bg-light .form-input,
	.bg-light .form-textarea {
		border-bottom-color: var(--color-dark);

		&:focus {
			border-bottom-color: var(--form-focus-color, currentColor);
		}
	}

	.form-textarea {
		resize: vertical;
		min-height: 8em;
		line-height: var(--leading-standard);
	}

	/* Full-border inputs for more complex/structured forms */
	.form-input--bordered,
	.form-select--bordered,
	.form-textarea--bordered {
		border: var(--form-border-width, 1px) solid currentColor;
		border-radius: var(--form-border-radius, 0);
		background-color: transparent;
		padding: var(--space-xs) var(--space-s);
		opacity: 0.6;

		&:hover {
			opacity: 0.8;
		}

		&:focus {
			opacity: 1;
			border-width: var(--form-border-width, 2px);
			border-color: var(--form-focus-color, currentColor);
			padding: calc(var(--space-xs) - 1px) calc(var(--space-s) - 1px);
		}
	}

	/* Select Dropdowns */
	.form-select {
		width: 100%;
		background-color: transparent;
		border: var(--form-border-width, 1px) solid currentColor;
		border-radius: var(--form-border-radius, 0);
		padding: var(--space-xs) var(--space-s);
		font-size: var(--step-0);
		font-family: var(--font-base);
		color: currentColor;
		cursor: pointer;
		transition: all 0.3s var(--transition-alt);
		opacity: 0.8;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--space-s) center;
		padding-right: calc(var(--space-s) + 1.5em);

		&:hover {
			opacity: 1;
		}

		&:focus {
			outline: var(--form-border-width) solid var(--form-focus-color, currentColor);
			outline-offset: var(--form-border-width);
		}

		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}

	/* Checkboxes and Radio Buttons */
	.form-checkbox,
	.form-radio {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		cursor: pointer;
		font-size: var(--step--1);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		* {
			text-transform: none;
		}

		input[type='checkbox'],
		input[type='radio'] {
			width: 1.25em;
			height: 1.25em;
			margin: 0;
			cursor: pointer;
			accent-color: var(--color-grey);
			flex-shrink: 0;
			transition: all 0.3s var(--transition-alt);

			&:focus-visible {
				outline: var(--form-border-width) solid var(--form-focus-color, currentColor);
				outline-offset: var(--form-border-width);
			}
		}
	}

	.bg-light .form-checkbox input[type='checkbox'],
	.bg-light .form-radio input[type='radio'] {
		accent-color: var(--color-dark);
	}

	/* Checkbox/Radio Group */
	.form-checkbox-group,
	.form-radio-group {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.form-checkbox-group--inline,
	.form-radio-group--inline {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-s);
	}

	/* File Input */
	.form-file {
		display: block;
		width: 100%;
		padding: var(--space-s);
		border: var(--form-border-width) dashed currentColor;
		border-radius: var(--form-border-radius, 0);
		cursor: pointer;
		transition: all 0.3s var(--transition-alt);
		opacity: 0.6;
		text-align: center;

		&:hover {
			opacity: 1;
			border-style: solid;
		}

		&:focus-within {
			outline: var(--form-border-width) solid var(--form-focus-color, currentColor);
			outline-offset: var(--form-border-width);
		}

		input[type='file'] {
			width: 0.1px;
			height: 0.1px;
			opacity: 0;
			position: absolute;
			z-index: -1;
		}
	}

	.form-file__label {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2xs);
		cursor: pointer;
		font-size: var(--step--1);
	}

	.form-file__icon {
		font-size: var(--step-2);
	}

	/* Help Text */
	.form-help {
		font-size: var(--step--2);
		opacity: 0.7;
		line-height: var(--leading-fine);
		margin-top: var(--space-3xs);
	}

	/* Error States */
	.form-error {
		font-size: var(--step--2);
		color: #d32f2f;
		margin-top: var(--space-3xs);
		display: none;
	}

	.form-group--error .form-error {
		display: block;
	}

	.form-group--error .form-input,
	.form-group--error .form-textarea,
	.form-group--error .form-select {
		border-color: #d32f2f;
	}

	/* Fieldset */
	.form-fieldset {
		border: var(--form-border-width, 1px) solid currentColor;
		border-radius: var(--form-border-radius, 0);
		padding: var(--space-s) var(--space-m);
		opacity: 0.8;
	}

	.form-legend {
		font-family: var(--font-button);
		font-size: var(--step-0);
		font-weight: var(--font-medium);
		text-transform: uppercase;
		letter-spacing: var(--letterspacing-loose);
		padding: 0 var(--space-xs);
	}

	/* Form Actions */
	.form-actions {
		display: flex;
		gap: var(--space-s);
		-webkit-margin-before: var(--space-l);
		margin-block-start: var(--space-l);
		align-items: center;
		flex-wrap: wrap;
	}

	@media screen and (max-width: 680px) {
		.form-actions {
			-webkit-margin-before: 0px;
			margin-block-start: 0px;
			flex-grow: 1;
			min-width: 200px;

			.btn {
				min-width: 100%;
			}
		}
	}

	.subscribe-form {
		> .flex {
			> div {
				@media screen and (max-width: 680px) {
					&:nth-of-type(1) {
						order: 1;
					}

					&:nth-of-type(2) {
						order: 2;
					}

					&:nth-of-type(3) {
						order: 4;
					}

					&:nth-of-type(4) {
						order: 3;
					}
				}
			}
		}
	}

	.form-actions--end {
		justify-content: flex-end;
	}

	.form-actions--center {
		justify-content: center;
	}

	.form-actions--space-between {
		justify-content: space-between;
	}

	/* Success Message */
	.form-success {
		padding: var(--space-s) var(--space-m);
		background-color: rgba(76, 175, 80, 0.1);
		border: var(--form-border-width, 1px) solid #4caf50;
		border-radius: var(--form-border-radius, 0);
		color: currentColor;
		font-size: var(--step-0);
		display: none;
	}

	.form-success--visible {
		display: block;
	}

	/* Loading State */
	.form--loading {
		pointer-events: none;
		opacity: 0.6;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			cursor: wait;
		}
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
		.form-row {
			grid-template-columns: 1fr;
		}

		.form-checkbox-group--inline,
		.form-radio-group--inline {
			flex-direction: column;
		}
	}
}