/**
 * Barra di ricerca in testa al sito.
 *
 * Scritta mobile-first: sul telefono e' una fascia compatta con il campo a
 * tutta larghezza e il pulsante ridotto alla sola lente (la parola "Cerca"
 * costerebbe meta' della riga); dai 600px in su il pulsante mostra anche il
 * testo e la barra si centra su una larghezza massima leggibile.
 *
 * Breakpoint: 600 / 900 / 1200, gli stessi del resto del tema.
 */

.cng-searchbar {
	background: var(--cng-color-forest);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cng-searchbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
}

/*
 * Il campo e il pulsante stanno dentro un'unica "pillola" bianca: e' un solo
 * oggetto per l'occhio, quindi il bordo di messa a fuoco va sul contenitore,
 * non sull'input (che al suo interno non ha piu' cornice).
 */
.cng-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 3px 3px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--cng-color-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cng-search-form:focus-within {
	border-color: var(--cng-color-orange);
	box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.28);
}

.cng-search-icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--cng-color-orange);
}

/*
 * Il campo si prende tutto lo spazio che resta; min-width 0 evita che il
 * testo lungo del segnaposto lo allarghi oltre la riga su telefono.
 *
 * Il selettore e' volutamente lungo: Astra e WooCommerce vestono ogni
 * input[type="search"] con cornice, sfondo e spaziatura propri, e lo fanno
 * con piu' specificita' di una semplice classe. Dentro la pillola bianca
 * quella cornice si vedeva come un rettangolo nel rettangolo. Si batte con
 * la specificita', non con !important, cosi' chi gestira' il sito potra'
 * ancora ritoccare il campo dal Personalizza.
 */
.cng-searchbar input[type="search"].cng-search-field,
.woocommerce .cng-searchbar input[type="search"].cng-search-field,
.woocommerce-page .cng-searchbar input[type="search"].cng-search-field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--cng-font-body);
	font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al focus */
	line-height: 1.3;
	color: var(--cng-color-ink);
	-webkit-appearance: none;
	appearance: none;
}

.cng-search-field::placeholder {
	color: var(--cng-color-muted);
	opacity: 1;
}

.cng-searchbar input[type="search"].cng-search-field:focus,
.woocommerce .cng-searchbar input[type="search"].cng-search-field:focus,
.woocommerce-page .cng-searchbar input[type="search"].cng-search-field:focus {
	outline: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* Safari disegna una X nativa dentro i campi search: fa a pugni con la
   pillola, e il campo si svuota comunque da tastiera. */
.cng-search-field::-webkit-search-decoration,
.cng-search-field::-webkit-search-cancel-button,
.cng-search-field::-webkit-search-results-button {
	-webkit-appearance: none;
}

.cng-search-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px; /* area toccabile piena sul telefono */
	min-height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: var(--cng-color-orange);
	color: #fff;
	font-family: var(--cng-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.cng-search-submit:hover,
.cng-search-submit:focus {
	background: var(--cng-color-orange-dark);
	color: #fff;
}

.cng-search-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cng-search-submit-icon {
	display: flex;
}

/* Sul telefono resta la sola lente dentro il pulsante. */
.cng-search-submit-text {
	display: none;
}

@media (min-width: 600px) {
	.cng-searchbar-inner {
		padding: 14px 20px;
	}

	.cng-search-form {
		gap: 10px;
		padding: 4px 4px 4px 16px;
	}

	.cng-searchbar input[type="search"].cng-search-field {
		padding: 8px 0;
		font-size: 16px;
	}

	.cng-search-submit {
		min-height: 40px;
		padding: 0 20px;
	}

	.cng-search-submit-icon {
		display: none;
	}

	.cng-search-submit-text {
		display: inline;
	}
}

@media (min-width: 900px) {
	.cng-searchbar-inner {
		padding: 12px 24px;
	}

	/* Da laptop in su la lente grande a sinistra diventa ridondante: il
	   pulsante arancione dice gia' cosa fa il campo. */
	.cng-search-icon {
		display: none;
	}

	/* Su schermo largo il campo non deve prendersi tutta la riga: una
	   pillola centrata di 720px e' gia' abbondante per qualsiasi ricerca
	   ("decespugliatore a scoppio 4 tempi" sta comodo) e la fascia resta
	   leggera invece di sembrare una barra dell'indirizzo. */
	.cng-search-form {
		max-width: 720px;
		margin: 0 auto;
		padding-left: 20px;
	}
}

/* ==========================================================================
   Pannello dei suggerimenti in tempo reale
   ========================================================================== */
/*
 * Il pannello galleggia sopra il contenuto, quindi l'ancoraggio sta sul
 * contenitore della barra, non sul modulo: cosi' il pannello e' largo quanto
 * la pillola bianca anche quando il pulsante cambia larghezza fra i
 * breakpoint.
 */
.cng-searchbar-inner {
	position: relative;
}

.cng-search-results {
	position: absolute;
	top: calc(100% - 6px);
	right: 16px;
	left: 16px;
	z-index: 999;
	max-height: min(62vh, 520px);
	/* Solo scorrimento verticale: senza overflow-x esplicito il browser
	   attiva anche quello orizzontale e compare una barra parassita. */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px;
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	-webkit-overflow-scrolling: touch;
}

/*
 * Sul telefono il prezzo va SOTTO il nome, non accanto: i nomi di questi
 * prodotti sono lunghissimi ("STIHL MSA 60 C-B Set - Motosega a batteria con
 * barra da 30 cm") e un prezzo di un prodotto variabile ("339,00 - 399,00")
 * gli mangerebbe meta' riga, lasciando leggere tre parole su dieci.
 * La foto resta a sinistra su entrambe le righe: da qui la griglia ad aree.
 */
.cng-search-result {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-areas:
		"img body"
		"img price";
	align-items: center;
	gap: 2px 10px;
	padding: 8px;
	border-radius: var(--cng-radius-control);
	color: var(--cng-color-ink);
	text-decoration: none;
}

/* Il dito e il mouse evidenziano come le frecce della tastiera: un solo
   stato visivo, cosi' non si vedono mai due righe "attive" insieme. */
.cng-search-result:hover,
.cng-search-result.is-active,
.cng-search-all:hover,
.cng-search-all.is-active {
	background: var(--cng-color-trust-bg);
	color: var(--cng-color-ink);
}

.cng-search-result-image {
	grid-area: img;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	border: 1px solid var(--cng-color-border);
	object-fit: cover;
	background: var(--cng-color-bg);
}

.cng-search-result-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Due righe al massimo per il nome: i nomi di questi prodotti sono lunghi
   ("STIHL MSA 60 C-B Set - Motosega a batteria con barra da 30 cm") e a tre
   righe entrerebbero tre prodotti in tutto il pannello. */
.cng-search-result-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.cng-search-result-level {
	font-size: 11px;
	font-weight: 600;
	color: var(--cng-color-forest);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cng-search-result-price {
	grid-area: price;
	font-size: 14px;
	font-weight: 700;
	color: var(--cng-color-ink);
	white-space: nowrap;
}

.cng-search-result-price del {
	margin-right: 4px;
	font-weight: 400;
	font-size: 12px;
	color: var(--cng-color-muted);
}

.cng-search-result-price ins {
	text-decoration: none;
	color: var(--cng-color-orange);
}

/* Sul telefono il prezzo di un prodotto variabile ("339,00 - 399,00") ruba
   troppa riga al nome: va sotto, allineato a destra non serve. */
.cng-search-result-price .woocommerce-Price-amount {
	white-space: nowrap;
}

.cng-search-all {
	display: block;
	margin-top: 2px;
	padding: 10px 8px;
	border-top: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	color: var(--cng-color-forest);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.cng-search-empty {
	margin: 0;
	padding: 16px 12px;
	color: var(--cng-color-muted);
	font-size: 14px;
	text-align: center;
}

/* Mentre la risposta e' in volo la lente pulsa piano: dice che sta lavorando
   senza spostare niente nel layout. */
.cng-search-form.is-loading .cng-search-submit {
	opacity: 0.75;
}

@media (min-width: 600px) {
	.cng-search-results {
		right: 20px;
		left: 20px;
		padding: 8px;
	}

	/* Da tablet in su lo spazio c'e': nome e prezzo tornano sulla stessa
	   riga, con il prezzo incolonnato a destra. */
	.cng-search-result {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas: "img body price";
		gap: 14px;
		padding: 10px;
	}

	.cng-search-result-price {
		text-align: right;
	}

	.cng-search-result-image {
		width: 56px;
		height: 56px;
	}

	.cng-search-result-name {
		-webkit-line-clamp: 1;
		font-size: 15px;
	}

	.cng-search-result-price {
		font-size: 15px;
	}
}

@media (min-width: 900px) {
	/* Stessa larghezza e stesso centraggio della pillola: il pannello deve
	   sembrare il prolungamento del campo, non un secondo elemento. */
	.cng-search-results {
		right: 24px;
		left: 24px;
		max-width: 720px;
		margin: 0 auto;
	}
}