/*
 * Tendine con ricerca (Tom Select) nei form anagrafici #adesione:
 * iscrizione (elementi/new-form-diventa-socio.php) e profilo area soci (area_soci/elementi/form-mypage_socio.php).
 * Riproduce l'aspetto dei <select> del sito (adesioni.css, "#adesione select").
 *
 * ATTENZIONE: il CSS del sito stila TUTTI gli input (bordo, padding, width 90%, margin-bottom,
 * hover rosso). Senza gli !important qui sotto, il campo di ricerca interno di Tom Select
 * comparirebbe come un input incorniciato dentro la tendina.
 */
/* inline-block come il <select> nativo: su desktop l'asterisco (<label> flottante, adesioni.css)
   sta alla sua sinistra; con un blocco la tendina scenderebbe di una riga e si sposterebbe a sinistra */
#adesione .ts-wrapper {
	display: inline-block;
	vertical-align: top;
	width: 91%;
	margin-bottom: 20px;
}

#adesione .ts-wrapper .ts-control {
	padding: 12px 40px 12px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 120%;
	line-height: 1.2;
	background-color: #fff;
	/* freccia come quella del select nativo: senza, il campo sembra una casella di testo */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	box-shadow: none;
}

/* la freccia la disegniamo noi: tolgo quella di Tom Select, se presente */
#adesione .ts-wrapper.single .ts-control::after {
	display: none;
}

#adesione .ts-wrapper .ts-control:hover {
	background-color: #ebebeb;
	border-color: #930000;
}

#adesione .ts-wrapper.focus .ts-control {
	border-color: #930000;
	box-shadow: none;
}

/* area soci: obbligatorio ancora vuoto (classe .need-fill messa da markNeedFill() in form-mypage_socio.php).
   La regola del form colora il <select>, che ora è nascosto: la riporto sulla tendina visibile. */
#adesione .need-fill .ts-wrapper .ts-control {
	background-color: #fff3cd;
	border-color: #ffca2c;
}

#adesione .ts-wrapper .ts-control > input {
	width: auto !important;
	min-width: 7rem;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

#adesione .ts-dropdown {
	font-size: 110%;
}

/* voci più alte: più facili da toccare col dito */
#adesione .ts-dropdown .option,
#adesione .ts-dropdown .no-results {
	padding: 10px 8px;
}

#adesione .ts-dropdown .active {
	background-color: #ebebeb;
	color: #930000;
}

@media (pointer: coarse) {
	/* sotto i 16px iOS ingrandisce la pagina quando il campo prende il focus */
	#adesione .ts-wrapper .ts-control > input {
		font-size: 16px !important;
	}
}