/**
 * Barre de recherche « pilule » — layout de base.
 *
 * Couleurs, bordures, arrondis, typographies et marges viennent des contrôles
 * Elementor : on ne fixe ici que la structure et les remises à zéro nécessaires
 * pour neutraliser le style d'input du thème.
 */

.sonate-search-bar {
	--ssb-height: 45px;
	--ssb-icon-size: 18px;
	--ssb-icon-stroke: 1.5;
	width: 100%;
	box-sizing: border-box;
}

.sonate-search-bar *,
.sonate-search-bar *::before,
.sonate-search-bar *::after {
	box-sizing: border-box;
}

.sonate-search-bar__form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: var(--ssb-height);
	transition: border-color 0.2s ease;
}

.sonate-search-bar--button-left .sonate-search-bar__form {
	flex-direction: row-reverse;
}

/* ---------- Champ ---------- */

.sonate-search-bar__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: calc(var(--ssb-height) - 4px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	line-height: 1.2;
}

.sonate-search-bar__input:focus,
.sonate-search-bar__input:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

/* Croix native de <input type="search"> : elle réintroduit un style de navigateur
   au milieu de la pilule. */
.sonate-search-bar__input::-webkit-search-decoration,
.sonate-search-bar__input::-webkit-search-cancel-button,
.sonate-search-bar__input::-webkit-search-results-button,
.sonate-search-bar__input::-webkit-search-results-decoration {
	appearance: none;
	-webkit-appearance: none;
}

/* ---------- Bouton ---------- */

.sonate-search-bar__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	flex: 0 0 auto;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 1;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.sonate-search-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ssb-icon-size);
	height: var(--ssb-icon-size);
}

.sonate-search-bar__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
}

/* L'épaisseur du trait de la loupe Sonate, pilotée par le contrôle Elementor.
   En CSS, `stroke-width` l'emporte sur l'attribut SVG de même nom. */
.sonate-search-bar__svg circle,
.sonate-search-bar__svg line {
	stroke-width: var(--ssb-icon-stroke, 1.5);
}

/* Icône choisie dans la bibliothèque Elementor (police d'icônes ou SVG importé). */
.sonate-search-bar__icon i {
	font-size: var(--ssb-icon-size);
	line-height: 1;
}

.sonate-search-bar__button-text {
	white-space: nowrap;
}

/* ---------- Accessibilité ---------- */

.sonate-search-bar .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}