/**
 * DalPraLab Smart Search — stili front-end.
 *
 * Estetica allineata a dalpralab.it: accento oro, sfondi crema, testo
 * nero caldo, titoli in serif (Cormorant Garamond) e testo in Inter.
 * Tutte le classi sono prefissate "dplab-" per personalizzazione semplice
 * nel tema (Divi). Il colore accento è guidato dalla variabile --dplab-accent.
 */

:root {
	--dplab-accent: #C9A227;   /* Oro brand, sovrascritto dalle impostazioni */
	--dplab-accent-2: #C9A84C; /* Oro chiaro */
	--dplab-ink: #0A0A0A;      /* Nero caldo */
	--dplab-text: #353030;     /* Testo */
	--dplab-muted: #8c8474;    /* Grigio caldo */
	--dplab-cream: #F5F1E8;    /* Avorio */
	--dplab-bg: #ffffff;
	--dplab-border: #e8e1d2;   /* Bordo caldo */
	--dplab-radius: 6px;
	--dplab-shadow: 0 18px 48px rgba( 53, 48, 48, 0.14 );
	--dplab-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--dplab-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Contenitore ---- */
.dplab-search {
	position: relative;
	width: 100%;
	max-width: 580px;
	font-family: var( --dplab-font-sans );
	font-size: 16px;
	color: var( --dplab-text );
	box-sizing: border-box;
}

.dplab-search * {
	box-sizing: border-box;
}

/* ---- Campo di input ---- */
.dplab-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --dplab-bg );
	border: 1px solid var( --dplab-border );
	border-radius: var( --dplab-radius );
	padding: 0 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dplab-search__field:focus-within {
	border-color: var( --dplab-accent );
	box-shadow: 0 0 0 3px rgba( 201, 162, 39, 0.16 );
}

.dplab-search__icon {
	flex: 0 0 auto;
	color: var( --dplab-accent );
}

.dplab-search__input {
	flex: 1 1 auto;
	border: none;
	outline: none;
	background: transparent;
	padding: 14px 2px;
	font-family: inherit;
	font-size: 1rem;
	color: var( --dplab-ink );
	width: 100%;
}

.dplab-search__input::placeholder {
	color: var( --dplab-muted );
	opacity: 1;
}

.dplab-search__input::-webkit-search-cancel-button {
	display: none; /* Usiamo il nostro pulsante cancella */
}

.dplab-search__clear {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var( --dplab-muted );
	padding: 0 4px;
	transition: color 0.15s ease;
}

.dplab-search__clear:hover {
	color: var( --dplab-ink );
}

/* ---- Tendina risultati ---- */
.dplab-search__results {
	position: absolute;
	z-index: 9999;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var( --dplab-bg );
	border: 1px solid var( --dplab-border );
	border-radius: var( --dplab-radius );
	box-shadow: var( --dplab-shadow );
	max-height: 72vh;
	overflow-y: auto;
}

/* Sottile filo oro in alto alla tendina */
.dplab-search__results::before {
	content: '';
	display: block;
	height: 2px;
	margin: -8px -8px 8px;
	background: linear-gradient( 90deg, var( --dplab-accent ), var( --dplab-accent-2 ) );
	border-radius: var( --dplab-radius ) var( --dplab-radius ) 0 0;
}

/* ---- Singolo risultato ---- */
.dplab-search__item {
	padding: 12px 14px;
	border-radius: var( --dplab-radius );
	cursor: pointer;
	transition: background 0.14s ease;
}

.dplab-search__item + .dplab-search__item {
	border-top: 1px solid rgba( 232, 225, 210, 0.6 );
}

.dplab-search__item.is-active,
.dplab-search__item:hover {
	background: var( --dplab-cream );
	border-top-color: transparent;
}

.dplab-search__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.dplab-search__main {
	min-width: 0; /* Permette il troncamento del testo */
}

.dplab-search__title {
	font-family: var( --dplab-font-serif );
	font-weight: 600;
	font-size: 1.22em;
	line-height: 1.25;
	color: var( --dplab-ink );
	letter-spacing: 0.01em;
}

.dplab-search__excerpt {
	margin-top: 3px;
	font-size: 0.86em;
	color: var( --dplab-muted );
	line-height: 1.45;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dplab-search__meta {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.dplab-search__type {
	display: inline-block;
	font-size: 0.68em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --dplab-muted );
	background: var( --dplab-cream );
	border-radius: 3px;
	padding: 2px 7px;
}

/* ---- Categoria evidenziata ---- */
.dplab-search__cat {
	display: inline-block;
	font-size: 0.72em;
	color: var( --dplab-text );
	background: rgba( 201, 162, 39, 0.12 );
	border-radius: 3px;
	padding: 2px 7px;
}

/* ---- Prezzo (prodotti) ---- */
.dplab-search__price {
	flex: 0 0 auto;
	font-family: var( --dplab-font-serif );
	font-weight: 600;
	font-size: 1.15em;
	color: var( --dplab-accent );
	white-space: nowrap;
}

/* ---- Termine evidenziato ---- */
.dplab-search__mark {
	background: rgba( 201, 162, 39, 0.28 );
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
}

/* ---- Intestazione "Suggeriti" ---- */
.dplab-search__heading {
	padding: 6px 14px 8px;
	font-size: 0.68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --dplab-accent );
}

/* ---- Badge ---- */
.dplab-search__badge {
	display: inline-block;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --dplab-accent );
	border: 1px solid var( --dplab-accent );
	border-radius: 10px;
	padding: 2px 9px;
	vertical-align: middle;
	white-space: nowrap;
	font-family: var( --dplab-font-sans );
	text-transform: uppercase;
}

/* Badge "Top" (contenuti in evidenza) */
.dplab-search__badge--top {
	color: var( --dplab-ink );
	background: linear-gradient( 90deg, var( --dplab-accent ), var( --dplab-accent-2 ) );
	border-color: transparent;
}

/* ---- Stato vuoto ---- */
.dplab-search__empty {
	padding: 22px 14px;
	text-align: center;
	color: var( --dplab-muted );
}

.dplab-search__empty-title {
	display: block;
	font-family: var( --dplab-font-serif );
	font-size: 1.2em;
	font-weight: 600;
	color: var( --dplab-ink );
}

.dplab-search__empty-tip {
	display: block;
	font-size: 0.85em;
	margin-top: 4px;
}

/* ---- Accessibilità: testo solo per screen reader ---- */
.dplab-search .screen-reader-text,
.dplab-search__status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * Overlay nell'header
 * ====================================================================== */

.dplab-overlay-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var( --dplab-ink );
	color: var( --dplab-accent );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba( 10, 10, 10, 0.28 );
	transition: transform 0.15s ease, background 0.15s ease;
}

.dplab-overlay-toggle:hover {
	transform: translateY( -1px );
	background: #1a1a1a;
}

.dplab-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 10, 10, 10, 0.62 );
	backdrop-filter: blur( 4px );
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
}

.dplab-overlay[hidden] {
	display: none;
}

.dplab-overlay__inner {
	position: relative;
	width: 100%;
	max-width: 660px;
}

.dplab-overlay__inner .dplab-search {
	max-width: 100%;
}

.dplab-overlay__inner .dplab-search__field {
	background: #fff;
	border-color: transparent;
	box-shadow: var( --dplab-shadow );
	padding: 4px 16px;
}

.dplab-overlay__inner .dplab-search__input {
	padding: 18px 2px;
	font-size: 1.1rem;
}

.dplab-overlay__close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: var( --dplab-ink );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

body.dplab-overlay-open {
	overflow: hidden; /* Blocca lo scroll quando l'overlay è aperto */
}

/* =========================================================================
 * Responsive
 * ====================================================================== */

@media ( max-width: 600px ) {
	.dplab-search {
		font-size: 15px;
	}
	.dplab-search__row {
		flex-direction: column;
	}
	.dplab-search__price {
		margin-top: 4px;
	}
	.dplab-overlay {
		padding: 8vh 12px 12px;
	}
}

/* ---- Anteprima nell'editor a blocchi ---- */
.dplab-search--preview .dplab-search__input {
	pointer-events: none;
}