/* Forms */
input,
select,
textarea {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
	color: var(--text-primary) !important;
	padding: 8px 12px;
	border-radius: var(--border-radius);
	transition: background-color .3s, border-color .3s;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 6px var(--accent-primary);
}

select {
	background-image: linear-gradient(45deg, transparent 50%, var(--text-primary) 50%), linear-gradient(135deg, var(--text-primary) 50%, transparent 50%), linear-gradient(to right, var(--bg-tertiary), var(--bg-tertiary));
	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
	background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
	background-repeat: no-repeat;
	padding-right: 2.5em;
}

.form-text,
.help-text,
.input-hint,
small.form-text {
	color: var(--text-hint) !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--text-hint) !important;
	opacity: .95;
}

input:focus::placeholder,
textarea:focus::placeholder {
	opacity: .7;
}

/* Standardize the width of inline currency selects across forms */
.input-group .currency-select {
	/* Ensure selected value is fully visible next to the chevron */
	text-transform: uppercase; /* currency codes are clearer uppercase */
	flex: 0 0 auto; /* prevent stretching inside input groups */
	width: 6rem !important; /* override form-control flex rules */
	min-width: auto; /* guard against collapse from framework defaults */
}

@media (max-width: 480px) {
	.currency-select { min-width: 5.5rem; }
}