/* Modern, slick input styling */
input,
textarea,
select {
	/* Base styling */
	padding: var(--vr-spacing-05) var(--hr-spacing-1);
	color: #333;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	outline: none;
}

select {
	/* Remove default browser styling */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Focus state */
input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-ocean-blue);
}

.validated input:invalid,
.validated textarea:invalid,
.validated select:invalid {
	border-color: var(--color-accent-red);
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
	background-color: #f5f5f5;
	color: #999;
	cursor: not-allowed;
	border-color: #e0e0e0;
}

/* Textarea specific styling */
textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
}

/* Optional - Placeholder styling */
::placeholder {
	color: #b3b3b3;
	opacity: 1;
}

select {
	cursor: pointer;

	/* Custom dropdown arrow */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: var(--vr-spacing-1);
	padding-right: var(--vr-spacing-3); /* Space for the dropdown arrow */
}

label.required::after {
	content: ' *';
	color: var(--color-accent-red);
	font-weight: normal;
}