/* ==========================================================================
   One Page Search — Styles v1.2.0
   ========================================================================== */

.ops-search-form {
	--ops-color: #AE995A;
	--ops-color-bg: #FFFFFE;
	--ops-input-width: 100px;
	--ops-input-width-large: 125px;
	--ops-highlight-bg: rgba(174, 153, 90, 0.22);
	--ops-highlight-current-bg: rgba(174, 153, 90, 0.55);
}

/* Formulaire — disposition Ctrl+F : [🔍 input  1/5 | ^ v ×] */
.ops-search-form {
	display: inline-flex;
	align-items: stretch;
	background-color: var(--ops-color-bg);
	border: 1px solid var(--ops-color);
	border-radius: 4px;
	height: 33px;
	padding: 0;
	gap: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* Zone gauche : loupe + input + compteur */
.ops-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--ops-color);
	padding: 0 6px 0 8px;
}

.ops-input {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #040404 !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	width: var(--ops-input-width) !important;
	text-align: left !important;
	flex-shrink: 1;
}

.ops-input::placeholder {
	color: var(--ops-color);
	opacity: 0.55;
}

.ops-input:focus::placeholder {
	opacity: 0.3;
}

/* Compteur : caché tant qu'il n'y a pas de résultats */
.ops-count {
	display: flex;
	align-items: center;
	visibility: hidden;
	font-size: 11px;
	font-weight: 400;
	color: var(--ops-color);
	white-space: nowrap;
	min-width: 36px;
	padding: 0 6px 0 4px;
	opacity: 0.8;
	flex-shrink: 0;
}

.ops-count.ops-count--visible {
	visibility: visible;
}

.ops-count.ops-count--empty {
	opacity: 0.45;
}

/* Séparateur vertical */
.ops-separator {
	display: block;
	width: 1px;
	background-color: var(--ops-color);
	opacity: 0.3;
	flex-shrink: 0;
	align-self: stretch;
}

/* Boutons nav & clear — toujours visibles, reset WP/Elementor */
.ops-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	width: 22px !important;
	height: 100% !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;

	color: var(--ops-color) !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;

	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ops-btn svg {
	display: block;
	flex-shrink: 0;
	stroke: var(--ops-color) !important;
}

.ops-btn:hover {
	opacity: 0.55;
}

.ops-btn:disabled {
	opacity: 0.2;
	cursor: default;
}

/* ==========================================================================
   Surlignage des résultats dans la page
   ========================================================================== */

mark.ops-highlight {
	background-color: var(--ops-highlight-bg, rgba(174, 153, 90, 0.22));
	color: inherit;
	border-radius: 2px;
	padding: 0 1px;
}

mark.ops-highlight--current {
	background-color: var(--ops-highlight-current-bg, rgba(174, 153, 90, 0.55));
	outline: 1.5px solid var(--ops-color, #AE995A);
	border-radius: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (hover: hover) and (pointer: fine) and (min-width: 1441px) {
	.ops-input {
		width: var(--ops-input-width-large) !important;
	}
}