@charset "UTF-8";

/**
 * Harmonized input and select styles for Formagora
 * Used across simple and advanced search forms
 */

/* Base input and select styles */
.formagora-input-container input[type="text"],
.formagora-input-container input[type="search"],
.formagora-input-container select,
.recherche-simple.formagora-input-container input[type="search"],
.recherche-simple.formagora-input-container input[type="text"],
.recherche-avancee.formagora-input-container input[type="text"],
.recherche-avancee.formagora-input-container select {
	border: 2px solid var(--wp--preset--color--main);
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--main);
	padding: 10px;
}

.formagora-input-container input[type="text"],
.formagora-input-container input[type="search"],
.recherche-simple.formagora-input-container input[type="search"],
.recherche-simple.formagora-input-container input[type="text"],
.recherche-avancee.formagora-input-container input[type="text"] {
	padding-left: 8px;
}

.formagora-input-container input::placeholder,
.recherche-simple.formagora-input-container input::placeholder,
.recherche-avancee.formagora-input-container input::placeholder {
	color: var(--wp--preset--color--main);
}

/* Select container with custom arrow */
.formagora-select-container {
	position: relative;
}

.formagora-select-container select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding-right: 30px;
}

/* Text input container with search icon */
.formagora-text-container,
.formagora-input-container .formagora-text-container {
	position: relative;
}

.formagora-text-container input[type="text"],
.formagora-text-container input[type="search"],
.formagora-input-container .formagora-text-container input[type="text"],
.formagora-input-container .formagora-text-container input[type="search"] {
	padding-right: 30px;
}

/* Icons with custom font */
.formagora-select-container::after,
.formagora-text-container::after,
.formagora-input-container .formagora-select-container::after,
.formagora-input-container .formagora-text-container::after {
	font-family: 'formagora';
	position: absolute;
	right: 15px;
	top: 45%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--wp--preset--color--main);
	font-size: 1.1rem;
	line-height: 1;
}

.formagora-select-container::after,
.formagora-input-container .formagora-select-container::after {
	content: "\ea05";
	right: 16px;
	top: 42%;
}

.formagora-text-container::after,
.formagora-input-container .formagora-text-container::after {
	content: "\ea1f";
}