/* ==========================================================================
   Cibico – Ricerca full-screen
   --------------------------------------------------------------------------
   Struttura a runtime (creata da search-overlay.js):

   #cibico-search-overlay          ← sfondo scuro, fisso a tutto schermo
   ├ #cibico-search-close
   └ #cibico-search-stage          ← colonna centrata, max 720px
     └ .searchform-wrapper         ← spostata qui dalla sua posizione originale
       └ form                      ← colonna flex, min-height:0
         ├ #cibico-search-bar      ← CARD 1: riga input + suggerimenti
         │  ├ .flex-row
         │  └ #cibico-search-suggested
         └ .live-search-results    ← CARD 2: risultati (nodo di Flatsome)

   PERCHÉ È SICURO
   Ogni regola è scoped sotto #cibico-search-overlay: le form di ricerca
   nella loro posizione naturale (header, menu mobile, widget, footer) non
   ricevono NESSUNO stile da questo file. A riposo il sito è intatto.

   NOTE TECNICHE
   • min-height:0 su tutta la catena flex: senza, il figlio scrollabile non
     si comprime e il pannello sfonda il viewport.
   • !important dove il tema o gli stili inline delle opzioni tema
     vincerebbero altrimenti (bottoni e .live-search-results).
   ========================================================================== */

   :root {
	--cbc-cobalto: #235267;
	--cbc-crema: #faf7f2;
	--cbc-bordo: #e6e2db;
	--cbc-testo: #2b2b2b;
	--cbc-testo-soft: #6b6b6b;
	--cbc-panel-radius: 14px;
	--cbc-shadow: 0 18px 50px rgba(20, 28, 30, 0.28);
}

/* ==========================================================================
   1. CONTENITORE OVERLAY
   ========================================================================== */

#cibico-search-overlay[hidden] {
	display: none;
}

#cibico-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: flex;
	flex-direction: column;
	align-items: center;

	/* 100dvh segue la barra dinamica dei browser mobile */
	height: 100vh;
	height: 100dvh;
	min-height: 0;

	padding: 72px 20px 20px;
	overflow: hidden;

	background: rgba(18, 26, 28, 0.68);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

	opacity: 0;
	transition: opacity 0.22s ease;
	will-change: opacity;
}

#cibico-search-overlay.is-visible {
	opacity: 1;
}

#cibico-search-overlay.is-settled {
	will-change: auto;
}

/* Blocco scroll della pagina sotto */
body.cibico-search-open {
	overflow: hidden;
}

/* ==========================================================================
   2. CATENA FLEX
   Ogni livello deve poter comprimersi, altrimenti lo scroll interno dei
   risultati non funziona e il pannello sfonda il viewport.
   ========================================================================== */

#cibico-search-stage,
#cibico-search-stage .searchform-wrapper,
#cibico-search-stage form {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	max-width: 720px;
	min-height: 0;
	flex: 1 1 auto;
	margin: 0 auto;
	padding: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* L'animazione di entrata sta su un solo livello, lo stage */
#cibico-search-stage {
	transform: translateY(-10px);
	transition: transform 0.22s ease;
}

#cibico-search-overlay.is-visible #cibico-search-stage {
	transform: translateY(0);
}

/* ==========================================================================
   3. CARD 1 — barra di ricerca + suggerimenti
   ========================================================================== */

#cibico-search-bar {
	flex: 0 0 auto;
	background: #fff;
	border-radius: var(--cbc-panel-radius);
	box-shadow: var(--cbc-shadow);
	overflow: hidden;
}

#cibico-search-bar .flex-row {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 0 8px 0 20px;
	margin: 0;
}

/* Neutralizza le colonne di Flatsome dentro la riga */
#cibico-search-bar .flex-col {
	margin: 0;
	padding: 0;
}

#cibico-search-bar .flex-col.flex-grow {
	flex: 1 1 auto;
	min-width: 0;
}

#cibico-search-overlay .search-field {
	width: 100%;
	height: 60px;
	margin: 0 !important;
	padding: 0;
    padding-left: 2px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--cbc-testo);
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#cibico-search-overlay .search-field::placeholder {
	color: var(--cbc-testo-soft);
	opacity: 1;
}

#cibico-search-overlay .search-field:focus {
	outline: none;
	box-shadow: none !important;
}

/* Lente: il tema la stila come bottone pieno, va neutralizzata */
#cibico-search-overlay .ux-search-submit,
#cibico-search-overlay button[type="submit"] {
	flex: 0 0 auto;
	width: 46px !important;
	height: 46px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--cbc-cobalto) !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	line-height: 1 !important;
	text-indent: 0 !important;
	transition: background 0.15s ease;
}

#cibico-search-overlay .ux-search-submit:hover,
#cibico-search-overlay button[type="submit"]:hover {
	background: var(--cbc-crema) !important;
}

/* Con del testo la lente lascia il posto alla X: stessa posizione, stessa
   dimensione, nessuno scarto visivo. L'invio da tastiera resta attivo. */
#cibico-search-overlay.has-query .ux-search-submit,
#cibico-search-overlay.has-query button[type="submit"] {
	display: none !important;
}

#cibico-search-clear {
	display: none;
	flex: 0 0 auto;
	width: 46px !important;
	height: 46px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--cbc-testo-soft) !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

#cibico-search-overlay.has-query #cibico-search-clear {
	display: flex;
}

#cibico-search-clear:hover {
	background: var(--cbc-crema) !important;
	color: var(--cbc-testo) !important;
}

/* ---- Suggerimenti ---- */
#cibico-search-suggested {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--cbc-bordo);
	background: var(--cbc-crema);
}

/* Con una query attiva i suggerimenti spariscono: spazio ai risultati */
#cibico-search-overlay.has-query #cibico-search-suggested {
	display: none;
}

#cibico-search-suggested-label {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cbc-testo-soft);
}

#cibico-search-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.cibico-search-tag {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	min-height: 0 !important;
	padding: 6px 14px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cbc-cobalto) !important;
	background: #fff !important;
	border: 1px solid var(--cbc-bordo) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cibico-search-tag:hover,
.cibico-search-tag:focus-visible {
	background: var(--cbc-cobalto) !important;
	border-color: var(--cbc-cobalto) !important;
	color: #fff !important;
}

/* ==========================================================================
   4. CARD 2 — risultati
   Gli !important battono gli stili inline delle opzioni tema.
   ========================================================================== */

#cibico-search-overlay .live-search-results {
	display: none !important;
	position: static !important;
	flex: 1 1 auto;
	min-height: 0;
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 6px !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #fff !important;
	border: none !important;
	border-radius: var(--cbc-panel-radius) !important;
	box-shadow: var(--cbc-shadow) !important;
}

/* Serve la query attiva E dei risultati reali: Flatsome non svuota i nodi
   quando il campo torna vuoto, quindi il solo DOM non è una condizione
   sufficiente. Copre X, backspace, taglia, undo. */
#cibico-search-overlay.has-query.has-results .live-search-results {
	display: block !important;
}

#cibico-search-overlay .autocomplete-suggestions {
	display: block !important;
	position: static !important;
	width: auto !important;
	max-height: none !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

#cibico-search-overlay .autocomplete-suggestion {
	display: flex !important;
	align-items: center;
	gap: 16px;
	padding: 12px !important;
	border: none !important;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.12s ease;
}

#cibico-search-overlay .autocomplete-suggestion + .autocomplete-suggestion {
	border-top: 1px solid var(--cbc-bordo) !important;
	border-radius: 0;
}

#cibico-search-overlay .autocomplete-suggestion:hover,
#cibico-search-overlay .autocomplete-suggestion.selected {
	background: var(--cbc-crema) !important;
}

#cibico-search-overlay .autocomplete-suggestion .search-image {
	flex: 0 0 auto;
	width: 56px !important;
	height: 56px !important;
	margin: 0 !important;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

#cibico-search-overlay .autocomplete-suggestion .search-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--cbc-testo);
}

#cibico-search-overlay .autocomplete-suggestion .search-name strong {
	font-weight: 700;
	color: var(--cbc-cobalto);
}

#cibico-search-overlay .autocomplete-suggestion .search-price {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cbc-testo);
	white-space: nowrap;
}

#cibico-search-overlay .autocomplete-suggestion .search-price del,
#cibico-search-overlay .autocomplete-suggestion .search-price del .amount {
	font-weight: 400;
	color: var(--cbc-testo-soft);
	text-decoration: line-through;
}

/* ==========================================================================
   5. PULSANTE CHIUSURA
   ========================================================================== */

#cibico-search-close {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 1;
	display: flex;
	width: 42px !important;
	height: 42px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

#cibico-search-close:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	#cibico-search-overlay {
		padding: 64px 16px 16px;
	}
}

@media (max-width: 600px) {
	#cibico-search-overlay {
		padding: 64px 12px 12px;
	}

	#cibico-search-close {
		top: 12px;
		right: 12px;
		width: 38px !important;
		height: 38px !important;
	}

	#cibico-search-bar .flex-row {
		padding: 0 6px 0 16px;
	}

	/* 16px esatti: sotto questa soglia iOS Safari forza lo zoom al focus */
	#cibico-search-overlay .search-field {
		height: 54px;
		font-size: 16px;
	}

	#cibico-search-overlay .ux-search-submit,
	#cibico-search-overlay button[type="submit"],
	#cibico-search-clear {
		width: 42px !important;
		height: 42px !important;
	}

	/* Etichetta sopra, tag a capo: evita la riga singola sbilanciata */
	#cibico-search-suggested {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px 16px 14px;
	}

	#cibico-search-tag-list {
		gap: 7px;
	}

	.cibico-search-tag {
		padding: 6px 12px !important;
		font-size: 12.5px !important;
	}

	#cibico-search-overlay .live-search-results {
		margin-top: 10px !important;
	}

	#cibico-search-overlay .autocomplete-suggestion {
		gap: 12px;
		padding: 10px !important;
	}

	#cibico-search-overlay .autocomplete-suggestion .search-image {
		width: 48px !important;
		height: 48px !important;
	}

	#cibico-search-overlay .autocomplete-suggestion .search-name {
		font-size: 14px;
	}

	#cibico-search-overlay .autocomplete-suggestion .search-price {
		flex-direction: column;
		align-items: flex-end;
		gap: 1px;
		font-size: 13px;
	}
}

@media (max-width: 360px) {
	#cibico-search-overlay .autocomplete-suggestion .search-image {
		width: 42px !important;
		height: 42px !important;
	}

	#cibico-search-overlay .autocomplete-suggestion .search-name {
		font-size: 13.5px;
	}
}

/* ==========================================================================
   7. ACCESSIBILITÀ
   ========================================================================== */

#cibico-search-overlay .cibico-search-tag:focus-visible,
#cibico-search-clear:focus-visible,
#cibico-search-overlay .ux-search-submit:focus-visible {
	outline: 2px solid var(--cbc-cobalto);
	outline-offset: 2px;
}

#cibico-search-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#cibico-search-overlay {
		transition: opacity 0.12s ease !important;
	}

	#cibico-search-stage {
		transform: none !important;
		transition: none !important;
	}
}