/**
 * La loupe de la carte publique — 0.99.516 (demande d'Olivier).
 *
 * Le bouton porte `citivo-geoloc-btn` : centrage, noir au repos et bleu au
 * survol viennent de citivo-carte-publique.css, comme les autres boutons de
 * la carte. Cette feuille ne dessine que la fenêtre.
 *
 * ⚠️ La liste de propositions reprend le dessin de celle de « Ma commune »
 * (citivo-abonnements.css, non chargée sur la carte) mais DANS le flux : la
 * fenêtre grandit avec elle au lieu de la couper.
 * ⚠️ Fenêtre en HAUT de l'écran (pas centrée) : sur téléphone, le clavier
 * cacherait le champ et la liste.
 * ⚠️ `[hidden]` gardé : un `display` explicite bat l'attribut `hidden`.
 * ⚠️ Couleurs redéclarées au survol et au focus : le thème colore les boutons.
 *
 * @package Citivo
 */

.citivo-carte-recherche-fenetre {
	width: min( 440px, calc( 100vw - 32px ) );
	max-width: none;
	max-height: calc( 100vh - 32px );
	margin: 12vh auto auto;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	color: #333333;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .3 );
	overflow: auto;
}

.citivo-carte-recherche-fenetre::backdrop {
	background: rgba( 15, 20, 30, .55 );
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-form {
	position: relative;
	margin: 0;
	padding: 20px;
}

.citivo-carte-recherche-fenetre label {
	display: block;
	margin: 0 44px .5rem 0;
	font-size: var( --citivo-fs-titre, 1.1rem );
	font-weight: 700;
	color: #315ba3;
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-texte {
	box-sizing: border-box;
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid #c9d1dd;
	border-radius: 6px;
	background: #ffffff;
	color: #333333;
	font-size: max( 16px, var( --citivo-fs-champ, 16px ) ); /* 16 px : iOS ne zoome pas sur le champ. */
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-texte:focus {
	border-color: #315ba3;
	outline: 2px solid rgba( 49, 91, 163, .25 );
	outline-offset: 0;
}

/* La liste, dessin de « Ma commune », dans le flux. */
.citivo-carte-recherche-fenetre .citivo-commune-resultats {
	display: flex;
	flex-direction: column;
	max-height: 16rem;
	overflow-y: auto;
	margin-top: 2px;
	border: 1px solid rgba( 0, 0, 0, .15 );
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .12 );
}

.citivo-carte-recherche-fenetre .citivo-commune-resultats[hidden] {
	display: none;
}

.citivo-carte-recherche-fenetre .citivo-commune-option,
.citivo-carte-recherche-fenetre .citivo-commune-option:hover,
.citivo-carte-recherche-fenetre .citivo-commune-option:focus {
	display: block;
	width: 100%;
	margin: 0;
	padding: .6rem .75rem;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	color: #333333;
	font-size: var( --citivo-fs-champ, 16px );
	font-weight: 400;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.citivo-carte-recherche-fenetre .citivo-commune-option:hover,
.citivo-carte-recherche-fenetre .citivo-commune-option:focus {
	background: #eef2f9;
	color: #315ba3;
}

.citivo-carte-recherche-fenetre .citivo-commune-vide {
	margin: 0;
	padding: .6rem .75rem;
	font-size: var( --citivo-fs-action, 14px );
	opacity: .8;
}

/* « Valider » : le bleu du site, comme les boutons principaux. */
.citivo-carte-recherche-fenetre .citivo-carte-recherche-valider,
.citivo-carte-recherche-fenetre .citivo-carte-recherche-valider:hover,
.citivo-carte-recherche-fenetre .citivo-carte-recherche-valider:focus {
	display: block;
	margin: 1rem 0 0 auto;
	padding: .6rem 1.4rem;
	border: 0;
	border-radius: 6px;
	background: #315ba3;
	color: #ffffff;
	font-size: var( --citivo-fs-champ, 16px );
	font-weight: 600;
	cursor: pointer;
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-valider:hover {
	background: #24467f;
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-retour {
	margin: .5rem 0 0;
	font-size: var( --citivo-fs-action, 14px );
	color: #b42318;
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-retour:empty {
	display: none;
}

/* La croix, en haut à droite (dessin de la fenêtre des badges). */
.citivo-carte-recherche-fenetre .citivo-carte-recherche-fermer,
.citivo-carte-recherche-fenetre .citivo-carte-recherche-fermer:hover,
.citivo-carte-recherche-fenetre .citivo-carte-recherche-fermer:focus {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #333333;
	cursor: pointer;
}

.citivo-carte-recherche-fenetre .citivo-carte-recherche-fermer:hover {
	background: #e3e7ee;
}