/*
 * Bloc de recherche par localisation (module Géolocalisation de Dokan Pro) au-dessus des produits
 * du catalogue — compact, aux jetons du design system (comportement : js/tm-dokan-geo.js).
 *
 * Objectif : voir la première rangée de produits sans défiler. Ordinateur et tablette (≥ 768 px) :
 * une seule ligne « Localisation · Rayon · Rechercher · Voir la carte » (environ 66 px au lieu de
 * 442 px pour le formulaire sur trois lignes et la carte de 300 px) ; carte repliée par défaut,
 * 280 px une fois ouverte. Mobile : bloc replié derrière un bouton « Localisation ».
 *
 * Balisage de Dokan (views/filters.php) dans .tbay-filter (widget « Produits d'archive »), après le
 * panneau des filtres actifs et avant la ligne « résultats · Trier par » :
 *   form.dokan-geolocation-location-filters > .dokan-row > colonnes (recherche produits,
 *   localisation, catégories, rayon, bouton) puis div#dokan-geolocation-locations-map.
 * Les champs « Recherche produits » et catégories du bloc, en double avec la recherche de l'en-tête
 * et les filtres de la colonne, sont masqués (vides, la recherche par localisation s'en passe).
 * La feuille de Dokan (dokan-geolocation-filters.css) déclare tailles, bordures et marges en
 * !important : les mêmes propriétés le sont ici, et seulement elles.
 */

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-geo-filters-column:has(input[name="s"]),
body.tm-catalog-page form.dokan-geolocation-location-filters #dokan-geo-product-categories-root {
	display: none;
}

body.tm-catalog-page form.dokan-geolocation-location-filters {
	box-sizing: border-box;
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-sans);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-row.dokan-hide {
	display: none;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-row::before,
body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-row::after {
	content: none;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-geo-filters-column,
body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-w12 {
	float: none;
	flex: 0 0 auto;
	width: auto;
	margin: 0 !important;
	padding: 0;
}

/* Localisation : la place restante */
body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-geo-filters-column:has(.location-address) {
	flex: 1 1 220px;
	min-width: 0;
}

/* Rayon */
body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-w12 {
	flex: 0 1 260px;
	min-width: 180px;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .location-address {
	position: relative;
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="text"] {
	box-sizing: border-box;
	width: 100% !important;
	height: 40px !important;
	margin: 0;
	padding: 0 var(--space-8) 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm) !important;
	line-height: var(--lh-normal) !important;
	color: var(--fg-1);
	background: var(--bg-surface);
	border: 1px solid var(--border-default) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: none;
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="text"]::placeholder {
	color: var(--fg-4);
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="text"]:focus {
	border-color: var(--border-focus) !important;
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Icône « me localiser » et indicateur de chargement, dans le champ, à droite */
body.tm-catalog-page form.dokan-geolocation-location-filters .location-address .locate-icon,
body.tm-catalog-page form.dokan-geolocation-location-filters .location-address .locate-loader {
	position: absolute;
	top: 50%;
	right: var(--space-3) !important;
	width: 18px !important;
	height: 18px !important;
	margin-top: -9px !important;
	background-position: center;
	background-size: contain;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .range-slider-container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0 !important;
}

body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-range-slider-value {
	float: none;
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--fg-2);
}

/* « Rayon 200km » : Dokan colle la valeur et l'unité. */
body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-range-slider-value span {
	margin-right: 0.2em;
	font-weight: var(--fw-semibold);
	color: var(--fg-1);
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="range"].dokan-range-slider {
	float: none;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: 4px !important;
	margin: 0 !important;
	background: var(--tm-blue-100) !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="range"].dokan-range-slider::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	background: var(--bg-surface);
	border: 2px solid var(--tm-blue-500);
	border-radius: 50%;
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="range"].dokan-range-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	background: var(--bg-surface);
	border: 2px solid var(--tm-blue-500);
	border-radius: 50%;
}

body.tm-catalog-page form.dokan-geolocation-location-filters input[type="range"].dokan-range-slider:focus-visible {
	box-shadow: var(--shadow-focus);
}

/* Boutons « Rechercher » (principal) et « Voir la carte » (secondaire) */
body.tm-catalog-page form.dokan-geolocation-location-filters button.dokan-btn.dokan-geo-product-search-btn,
body.tm-catalog-page .tm-geo-map-toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	width: auto;
	height: 40px;
	margin: 0;
	padding: 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--radius-md);
	box-shadow: none;
	cursor: pointer;
}

body.tm-catalog-page form.dokan-geolocation-location-filters button.dokan-btn.dokan-geo-product-search-btn {
	color: var(--fg-inverse);
	background: var(--tm-blue-500);
	border: 1px solid var(--tm-blue-500);
}

body.tm-catalog-page form.dokan-geolocation-location-filters button.dokan-btn.dokan-geo-product-search-btn:hover {
	background: var(--tm-blue-600);
	border-color: var(--tm-blue-600);
}

body.tm-catalog-page .tm-geo-map-toggle {
	color: var(--tm-blue-700);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
}

body.tm-catalog-page .tm-geo-map-toggle:hover {
	border-color: var(--tm-blue-300);
	background: var(--tm-blue-50);
}

body.tm-catalog-page .tm-geo-map-toggle svg,
body.tm-catalog-page .tm-geo-toggle svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

body.tm-catalog-page form.dokan-geolocation-location-filters button.dokan-btn.dokan-geo-product-search-btn:focus-visible,
body.tm-catalog-page .tm-geo-map-toggle:focus-visible,
body.tm-catalog-page .tm-geo-toggle:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Carte : repliée par défaut (classe posée par js/tm-dokan-geo.js) */
body.tm-catalog-page .tbay-filter > #dokan-geolocation-locations-map {
	box-sizing: border-box;
	height: 280px;
	min-height: 0;
	margin: 0 0 var(--space-4);
	overflow: hidden;
	background: var(--bg-sunken);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}

body.tm-catalog-page .tbay-filter.tm-geo--map-closed > #dokan-geolocation-locations-map {
	display: none;
}

/* Mobile : bouton « Localisation » qui déplie le bloc */
body.tm-catalog-page .tm-geo-toggle {
	display: none;
}

@media (max-width: 767px) {
	body.tm-catalog-page .tm-geo-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		max-width: 100%;
		height: 36px;
		margin: 0 0 var(--space-3);
		padding: 0 var(--space-4);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: var(--fw-medium);
		color: var(--tm-blue-700);
		background: var(--tm-blue-50);
		border: 1px solid var(--tm-blue-100);
		border-radius: var(--radius-pill);
	}

	body.tm-catalog-page .tm-geo-toggle span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* Recherche par localisation active : même teinte que les puces des filtres actifs. */
	body.tm-catalog-page .tm-geo-toggle--active {
		color: var(--tm-blue-800);
		background: var(--tm-pale-blue);
		border-color: var(--tm-pale-blue);
	}

	body.tm-catalog-page .tbay-filter.tm-geo--collapsed > form.dokan-geolocation-location-filters,
	body.tm-catalog-page .tbay-filter.tm-geo--collapsed > #dokan-geolocation-locations-map {
		display: none;
	}

	/* Déplié : localisation et rayon sur toute la largeur, puis les deux boutons côte à côte. */
	body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-row {
		flex-wrap: wrap;
	}

	body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-geo-filters-column:has(.location-address),
	body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-w12 {
		flex: 1 1 100%;
	}

	/* Dokan met chaque colonne en pleine largeur sous 767 px. */
	body.tm-catalog-page form.dokan-geolocation-location-filters .dokan-geo-filters-column:has(.dokan-geo-product-search-btn),
	body.tm-catalog-page form.dokan-geolocation-location-filters .tm-geo-map-col {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}

	body.tm-catalog-page form.dokan-geolocation-location-filters button.dokan-btn.dokan-geo-product-search-btn,
	body.tm-catalog-page .tm-geo-map-toggle {
		justify-content: center;
		width: 100%;
	}

	body.tm-catalog-page .tbay-filter > #dokan-geolocation-locations-map {
		height: 220px;
	}
}