/*
 * Alientech Dealer Locator — frontend styles.
 *
 * Reskin completo allineato al mockup Figma "D 3.2 - Dealers" / "card_dealers_dark"
 * (Alientech Design System: grigi scuri + accento giallo elettrico, font N27/Lato,
 * card scure con angolo, colori per modalità di connessione).
 *
 * Tutto è scoped sotto `.attdl-archive` / `.attdl-card` per non collidere col tema.
 * I token sono ridefiniti localmente (`--attdl-*`) così il plugin è autosufficiente
 * anche se il sito non carica il pacchetto del design system.
 *
 * Webfont: N27 (display) e Lato (body) sono già iniettati dal tema custom Elementor
 * del sito — qui si referenziano solo per nome famiglia (`--attdl-font-*`). Il plugin
 * NON bundla i woff2 né li carica via @font-face/@import.
 */

/* ------------------------------------------------------------------ *
 * Token Alientech (scoped).
 * ------------------------------------------------------------------ */
.attdl-archive,
.attdl-map,
.attdl-leaflet-popup {
	--attdl-yellow: rgb(255, 238, 0);
	--attdl-yellow-hover: rgb(255, 243, 82);
	--attdl-yellow-press: rgb(255, 250, 184);
	--attdl-yellow-deep: rgb(173, 162, 0);

	--attdl-ink: rgb(38, 38, 38);        /* superficie scura primaria */
	--attdl-ink-deep: rgb(25, 25, 25);   /* sfondo più profondo */
	--attdl-ink-soft: rgb(63, 68, 67);   /* card / superficie sollevata */

	--attdl-grey-500: rgb(149, 152, 150);
	--attdl-grey-300: rgb(192, 193, 192);
	--attdl-grey-200: rgb(214, 214, 212);
	--attdl-grey-050: rgb(245, 245, 244);
	--attdl-white: rgb(255, 255, 255);

	--attdl-magenta: rgb(255, 0, 79);    /* pin mappa */
	--attdl-info: rgb(29, 134, 218);
	--attdl-info-hover: rgb(137, 192, 236); /* chip filtri hover (era #89C0EC) */
	--attdl-success: rgb(0, 194, 135);
	--attdl-purple: rgb(149, 48, 192);
	--attdl-datalog: rgb(163, 124, 180);

	--attdl-font-display: "N27", "Helvetica Neue", Arial, sans-serif;
	--attdl-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--attdl-radius-sm: 4px;
	--attdl-radius-md: 8px;
	--attdl-radius-lg: 12px;
	--attdl-radius-pill: 64px;

	--attdl-shadow-card: 0 6px 15px -2px rgba(16, 24, 40, 0.45);
	--attdl-gradient-sep: linear-gradient(90deg, rgb(0, 194, 135) 27%, rgb(29, 134, 218) 49%, rgb(149, 48, 192) 69%);
	--attdl-radial-dark: radial-gradient(2721px 1363px at 50% 141.7%, rgb(63, 68, 67) 0%, rgb(38, 38, 38) 74%, rgb(25, 25, 25) 100%);
}

/* Guard overflow orizzontale del documento. `.attdl-archive` è full-bleed
 * (`width:100vw` + breakout, sotto): dentro una pagina Elementor annidata il
 * breakout può sforare il documento in orizzontale, e un menu fixed/sticky del
 * tema eredita la larghezza allargata (appare a ~2× e cade in basso). `clip` sul
 * documento taglia SOLO lo sfratto orizzontale mantenendo il full-bleed (a
 * differenza di un clip sul container, che re-introdurrebbe i bordi laterali).
 * `clip` (non `hidden`) non crea uno scroll-port → `position:sticky` resta valido.
 * Questo foglio è caricato solo sulle pagine ATTDL (archivio/single/embed) → la
 * regola non tocca il resto del sito. */
html {
	overflow-x: clip;
}

/* ------------------------------------------------------------------ *
 * Shell archivio.
 * ------------------------------------------------------------------ */
.attdl-archive {
	/* Full-bleed: rompe il container del tema così mappa + sezioni scure vanno
	 * edge-to-edge (mockup). Il contenuto resta centrato dai max-width interni. */
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	background: var(--attdl-radial-dark);
	color: var(--attdl-grey-050);
	font-family: var(--attdl-font-body);
	font-size: 16px;
	line-height: 1.45;
}

.attdl-archive * {
	box-sizing: border-box;
}

/* Header / titolo "Trova rivenditori" con righe gialle ai lati. */
.attdl-archive__header {
	margin: 0;
	padding: 56px 24px 28px;
	text-align: center;
}

.attdl-archive__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0 auto;
	max-width: 1400px;
	font-family: var(--attdl-font-display);
	font-weight: 400;
	font-size: clamp(36px, 6vw, 72px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--attdl-white);
}

.attdl-archive__title::before,
.attdl-archive__title::after {
	content: "";
	flex: 1 1 0;
	height: 2px;
	background: var(--attdl-yellow);
	opacity: 0.95;
}

/* ------------------------------------------------------------------ *
 * Hero mappa + barra di ricerca flottante.
 * ------------------------------------------------------------------ */
.attdl-hero {
	position: relative;
	width: 100%;
}

.attdl-archive__map.attdl-map {
	width: 100%;
	height: 100vh;
	height: 100svh; /* svh: esclude la barra browser mobile, no jump al collasso. */
	margin: 0 0 80px; /* spazio fra mappa e elenco rivenditori. */
	border: 0;
	border-bottom: 1px solid var(--attdl-yellow); /* #ffee00 */
	border-radius: 0;
	background: var(--attdl-ink-deep);
	/* Isola lo stacking context della mappa: i controlli Leaflet (zoom, attribution)
	 * hanno z-index:1000 interno e, senza contesto proprio, bucherebbero il menu
	 * fixed del sito su mobile. `isolation:isolate` crea lo stacking context.
	 * Desktop-safe: il pill filtri overlay resta sibling a z-index:1000, sopra la mappa. */
	isolation: isolate;
}

/* Attribution Leaflet: sfondo trasparente + testo bianco (default Leaflet = pill
 * bianca con testo scuro, illeggibile sulla mappa scura). Scopata su `.attdl-map`
 * → vale archivio + embed + widget M19. `text-shadow` per leggibilità sui tile chiari. */
.attdl-map .leaflet-control-attribution {
	background: none !important; /* batte il CSS bundle Leaflet a prescindere dall'ordine di load. */
	background-color: transparent !important;
	color: var(--attdl-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.attdl-map .leaflet-control-attribution a {
	color: var(--attdl-white);
}

/* Barra ricerca: nell'hero è flottante in basso; fuori dall'hero (embed) resta in flusso. */
.attdl-archive__filters {
	position: relative; /* contesto per il ::before bordo-gradiente. */
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: 16px;
	max-width: 920px;
	background: var(--attdl-ink);
	border-radius: var(--attdl-radius-lg);
	box-shadow: var(--attdl-shadow-card);
}

/* Bordo 1px a gradiente conico (tecnica mask): conic-gradient riempito, mascherato
 * per lasciare solo la cornice di 1px. I colori usano i token globali Elementor del
 * tema. `pointer-events:none` così non intercetta i click sui controlli. */
.attdl-archive__filters::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	z-index: 1;
	pointer-events: none;
	background: conic-gradient(
		from 270deg,
		var(--e-global-color-ec47253) 0deg,
		var(--e-global-color-a5dcddd) 140deg,
		var(--e-global-color-799abcb) 280deg,
		var(--e-global-color-ec47253) 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.attdl-hero .attdl-archive__filters {
	position: absolute;
	left: 50%;
	bottom: 4svh; /* ~4% dal fondo della mappa (= fondo schermo, mappa = 100svh). */
	transform: translateX(-50%);
	z-index: 1000;
	width: calc(100% - 48px);
}

.attdl-archive__filters-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

.attdl-archive__filters-label {
	font-family: var(--attdl-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--attdl-grey-050);
	white-space: nowrap;
}

/* Select "Servizi" (Tutti…) — pill bianca con bordo grigio. */
.attdl-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.attdl-select select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 150px;
	height: 40px;
	padding: 0 34px 0 12px;
	font-family: var(--attdl-font-body);
	font-size: 16px;
	font-style: italic;
	color: var(--attdl-grey-500);
	background-color: var(--attdl-white);
	/* Freccia come SVG di sfondo (data-URI) invece del triangolo `::after`:
	 * allinea la resa a staging e separa in modo pulito i due tipi di select
	 * (Servizi = freccia a destra qui, Paese `--button` = icona lista a sinistra). */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233f4443'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
	border: 1px solid rgb(230, 230, 230);
	border-radius: 10px;
	cursor: pointer;
}

/* Freccia verso l'alto quando la tendina è aperta (classe `is-open` toggle-ata da
 * assets/js/attam-upcoming.js su pointerdown; rimossa su change/blur/Esc/Enter/click-outside). */
.attdl-select.is-open select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 6l5-6 5 6z' fill='%233f4443'/%3E%3C/svg%3E") !important;
}

.attdl-select select:focus-visible {
	outline: 2px solid var(--attdl-yellow);
	outline-offset: 1px;
}

/* "Seleziona Stato": select stilizzata come bottone grigio con icona lista. */
.attdl-select--button select {
	min-width: 200px;
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	color: var(--attdl-ink);
	background: var(--attdl-grey-200);
	border: 0;
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 18px 18px;
}

.attdl-select--button select:hover {
	background-color: var(--attdl-grey-300);
}

/* Bottoni della barra.
 *
 * Tutti i selettori sono scopati sotto `.attdl-archive` per alzare la specificità
 * a (0,2,0) e battere lo style globale bottoni del kit Elementor
 * `.elementor-kit-N button` (0,1,1), che altrimenti sovrascrive background/color/
 * border/padding/font. Nessun `!important`: la specificità basta perché il kit non
 * lo usa. Vale per archivio (`<main>`) ed embed (`.attdl-archive--embed`). */
.attdl-archive .attdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 40px;
	padding: 0 18px;
	font-family: var(--attdl-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	border: 0;
	border-radius: var(--attdl-radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.attdl-archive .attdl-btn:active {
	transform: translateY(1px);
}

.attdl-archive .attdl-btn__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.attdl-archive .attdl-btn--grey {
	background: var(--attdl-grey-500);
	color: var(--attdl-ink);
}

.attdl-archive .attdl-btn--grey:hover {
	background: var(--attdl-grey-300);
}

.attdl-archive .attdl-btn--yellow,
.attdl-archive .attdl-archive__submit {
	background: var(--attdl-yellow);
	color: var(--attdl-ink);
}

.attdl-archive .attdl-btn--yellow:hover,
.attdl-archive .attdl-archive__submit:hover {
	background: var(--attdl-yellow-hover);
}

.attdl-archive .attdl-btn--blue {
	background: var(--attdl-info);
	color: var(--attdl-white);
}

.attdl-archive .attdl-btn--blue:hover {
	background: #65ADE6;
}

.attdl-archive .attdl-btn--block {
	flex: 1 1 0;
}

/* Submit nativo (no-JS): mostrato come bottone giallo della barra. */
.attdl-archive .attdl-archive__submit {
	height: 40px;
	padding: 0 18px;
	font-weight: 700;
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * Sezione "ELENCO DEALERS" — pannello scuro con bordo giallo.
 * ------------------------------------------------------------------ */
.attdl-archive__results {
	background: var(--attdl-ink-deep);
	margin-top: 0;
}

.attdl-archive__results-inner {
	max-width: 1328px;
	margin: 0 auto;
	padding: 64px clamp(20px, 6vw, 120px) 80px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Riga "Filtri:" + chip dei filtri attivi. */
.attdl-archive__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	width: 70%;
	margin: 0 auto 64px;
}

.attdl-archive__chips-label {
	font-family: var(--attdl-font-display);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--attdl-grey-500);
	margin-right: 4px;
}

/* Chip filtri: outline blu (stile staging). Scopati sotto `.attdl-archive` per
 * specificità (0,2,0) e battere il colore link del tema senza `!important`. */
.attdl-archive .attdl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 8px 10px 8px 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--attdl-info);
	background: transparent;
	border: 2px solid var(--attdl-info);
	border-radius: var(--attdl-radius-md);
	text-decoration: none;
}

.attdl-archive .attdl-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	color: var(--attdl-info);
	font-size: 20px;
	line-height: 1;
}

.attdl-archive .attdl-chip:hover,
.attdl-archive .attdl-chip:hover .attdl-chip__remove {
	color: var(--attdl-info-hover);
	border-color: var(--attdl-info-hover);
}

.attdl-archive__chips-hint {
	font-size: 14px;
	color: var(--attdl-grey-500);
}

/* ------------------------------------------------------------------ *
 * Sezioni per tipo dealer (M20.G): container + gruppo.
 * ------------------------------------------------------------------ */
.attdl-archive__list-groups {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Ogni sezione (heading + separatore + griglia) centrata al 70% su desktop;
 * ≤1024px passa a 100% + padding-inline 16px (vedi media query). */
.attdl-archive__group {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 70%;
	margin: 0 auto;
}

/* Titolo gruppo + separatore gradiente firma. */
.attdl-archive__group-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.attdl-archive__group-title {
	margin: 0;
	font-family: var(--attdl-font-display);
	font-weight: 400;
	font-size: 32px;
	letter-spacing: -0.03em;
	color: var(--attdl-yellow);
}

.attdl-archive__separator {
	height: 1px;
	width: 100%;
	background: var(--attdl-gradient-sep);
}

/* ------------------------------------------------------------------ *
 * Griglia card.
 * ------------------------------------------------------------------ */
.attdl-archive__list {
	list-style: none;
	/* Larghezza piena dentro `.attdl-archive__group` (che porta il 70%/responsive). */
	width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	/* `min(380px, 100%)`: in una colonna Elementor più stretta di 380px (embed su
	 * viewport desktop, dove `@media 720px` non scatta) una card non forza mai una
	 * traccia più larga del container → niente overflow orizzontale. */
	grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
	gap: 16px;
}

.attdl-archive__empty {
	width: 70%;
	margin: 0 auto;
	padding: 48px 24px;
	text-align: center;
	color: var(--attdl-grey-500);
	background: var(--attdl-ink-soft);
	border-radius: var(--attdl-radius-lg);
	font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * Card dealer chiara (mockup "card detail" light): superficie grigio chiaro,
 * titolo blu, testo scuro, bordo a gradiente firma + notch per tipo dealer.
 * ------------------------------------------------------------------ */
.attdl-card {
	position: relative;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: var(--attdl-radius-lg);
	background: var(--attdl-grey-200);
	color: var(--attdl-ink);
	box-shadow: var(--attdl-shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.attdl-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.35);
}

/* Bordo 1px a gradiente firma (tecnica mask, come il contenitore filtri). */
.attdl-card::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	z-index: 2;
	pointer-events: none;
	background: conic-gradient(
		from 270deg,
		var(--e-global-color-ec47253) 0deg,
		var(--e-global-color-a5dcddd) 140deg,
		var(--e-global-color-799abcb) 280deg,
		var(--e-global-color-ec47253) 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Angolo (notch) firma in alto a sinistra. Verde fisso per tutti i tipi
 * dealer: scelta puramente estetica, il tipo non influenza il colore. */
.attdl-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: var(--attdl-success);
	clip-path: polygon(0 0, 0 100%, 100% 0);
	z-index: 3;
}

/* Testata: titolo su superficie chiara + separatore sottile. */
.attdl-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px 16px;
	border-bottom: 1px solid rgba(38, 38, 38, 0.14);
}

.attdl-card__title {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--attdl-font-display);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #145B94;
}

.attdl-card__title a {
	/* `!important` per battere il colore link del tema (accent giallo) che
	   altrimenti vince su `inherit`: il nome resta linkabile ma con il colore
	   del titolo (uguale ai dealer senza pagina dettaglio). */
	color: #145B94 !important;
	text-decoration: none;
}

.attdl-card__title a:hover {
	color: #145B94 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.attdl-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 24px 24px;
	flex: 1 0 auto;
}

/* Riga tipo dealer + paese. */
.attdl-card__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.attdl-card__type {
	font-family: var(--attdl-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--attdl-ink);
}

.attdl-card__country {
	font-size: 13px;
	color: var(--attdl-grey-500);
}

/* Indirizzo + contatti. */
.attdl-card__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 0 auto;
}

.attdl-card__line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	color: var(--attdl-ink);
}

.attdl-card__body p.attdl-card__line {
	margin-block-end: 0;
}

/*
 * Scopati sotto `.attdl-archive` per alzare la specificità a (0,2,1) e battere
 * lo style globale link del kit Elementor `.elementor-kit-N a` (0,1,1), che
 * altrimenti sovrascrive il colore con il giallo del brand. Nessun `!important`.
 */
.attdl-archive .attdl-card__line a {
	color: #145B94;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.attdl-archive .attdl-card__line a:hover {
	color: #262626;
}

.attdl-card__line-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--attdl-ink);
}

/* Pulsanti card. */
.attdl-card__actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

/* ------------------------------------------------------------------ *
 * Sezione Servizi (righe prodotto: logo + tier serviti).
 * ------------------------------------------------------------------ */
.attdl-services {
	margin: 0;
}

.attdl-services__title {
	margin: 0 0 10px;
	font-family: var(--attdl-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--attdl-ink);
}

.attdl-services__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Una riga = un prodotto: logo + tier serviti. */
.attdl-services__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Logo prodotto (SVG firma Alientech). `background-size: contain` preserva il
 * rapporto 14:16 dei loghi senza distorsione. Path relativo da assets/css/. */
.attdl-services__icon {
	width: 18px;
	height: 20px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.attdl-services__icon--kess3 { background-image: url(../img/kess3-logo.svg); }
.attdl-services__icon--ecm-titanium { background-image: url(../img/ecm-titanium-logo.svg); }
.attdl-services__icon--powergate { background-image: url(../img/powergate-logo.svg); }
.attdl-services__icon--academy { background-image: url(../img/alientech-academy-logo.svg); }

.attdl-services__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: var(--attdl-ink);
}

/* Separatore middot tra i tier della stessa riga (es. KESS3 Master · Slave). */
.attdl-services__label + .attdl-services__label::before {
	content: "\00b7";
	margin: 0 8px;
	color: var(--attdl-grey-500);
}

/* ------------------------------------------------------------------ *
 * Paginazione.
 * ------------------------------------------------------------------ */
.attdl-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
}

/* Bottoni prima/precedente/successiva/ultima: quadrato giallo, icona nera.
 *
 * Scopati sotto `.attdl-archive` (specificità 0,2,0) per battere lo stile globale
 * `a`/`svg` del kit Elementor (0,1,1): senza scope il colore link giallo del kit
 * vince → `stroke:currentColor` dell'icona diventa giallo su giallo = invisibile.
 * Stesso pattern di `.attdl-btn`. */
.attdl-archive .attdl-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--attdl-ink);
	background: var(--attdl-yellow);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.attdl-archive .attdl-pagination__btn:hover {
	background: var(--attdl-yellow-hover);
}

/* Ai limiti (prima/ultima pagina) i bottoni restano gialli come da mockup, ma inerti. */
.attdl-archive .attdl-pagination__btn.is-disabled {
	pointer-events: none;
}

.attdl-archive .attdl-pagination__icon {
	width: 16px;
	height: 16px;
	display: block;
	color: var(--attdl-ink);
	stroke: currentColor;
}

/* Box centrale bianco: pagina corrente editabile + totale statico. */
.attdl-archive .attdl-pagination__form {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 8px;
	background: var(--attdl-white);
	border: 1px solid var(--attdl-grey-200);
	border-radius: 8px;
}

/* `!important` per battere `.elementor-kit-N input:not(...)` (0,3,1) del tema, che
 * forza padding 16px + bordo + sfondo + min-height: senza, il padding schiaccia il
 * box e il numero di pagina viene clippato. Il tema NON usa `!important` → vinciamo. */
.attdl-archive .attdl-pagination__input {
	width: 3.5ch;
	min-width: 3.5ch;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--attdl-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var(--attdl-ink) !important;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.attdl-archive .attdl-pagination__input::-webkit-outer-spin-button,
.attdl-archive .attdl-pagination__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.attdl-archive .attdl-pagination__input:focus-visible {
	outline: 2px solid var(--attdl-yellow);
	outline-offset: 2px;
	border-radius: 4px;
}

.attdl-archive .attdl-pagination__total {
	font-family: var(--attdl-font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--attdl-grey-500);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Mappa Leaflet: marker magenta + popup card scura.
 * ------------------------------------------------------------------ */
.attdl-map {
	width: 100%;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--attdl-radius-md);
	overflow: hidden;
	background: var(--attdl-ink-deep);
}

/* Pin custom (divIcon). */
.attdl-marker {
	width: 16px;
	height: 21px;
	margin-left: -8px;
	margin-top: -21px;
}

.attdl-marker svg {
	display: block;
	width: 16px;
	height: 21px;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Popup marker = card rivenditore in versione dark (M20.P).
 * Il popup è estratto dal pane Leaflet e appeso a `document.body` (vedi
 * `dealer-map.js`): il wrapper `.attdl-map-popup` è in `position: absolute` con
 * coordinate-documento + z-index alto → esce dallo stacking context della mappa
 * (`.leaflet-map-pane` ha `transform`) e sta sopra il titolo Elementor, senza
 * alzare i tile. Ospita la struttura `.attdl-card` (bordo gradiente + notch verde
 * + righe servizi + bottoni dal CSS archivio); gli override dark sono scopati sotto
 * `.attdl-card--popup`. Il wrapper porta ANCHE la classe `attdl-leaflet-popup` per
 * ereditare i design-token (riga 22) e lo stile dark della card senza duplicare. */
.attdl-map-popup {
	position: absolute;
	z-index: 100000; /* sopra il titolo Elementor; unico valore da alzare se un overlay tema lo supera (F4). */
	/* `max-content`: la card si allarga sul contenuto (la riga KESS3 piena
	 * "Master · Slave · DynoDrive", label `nowrap`, è la riga più larga) e resta
	 * stretta quando i servizi sono pochi. `min/max-width` come guardrail. */
	width: max-content;
	min-width: 300px;
	max-width: 400px;
	transform: translate(-50%, calc(-100% - 16px)); /* centrato sopra il pin. */
}

/* Flip: quando sopra il pin non c'è spazio, la card va sotto (patch #3). */
.attdl-map-popup.is-below {
	transform: translate(-50%, 16px);
}

/* Pulsante di chiusura ✕ (in alto a destra, sopra la card). */
.attdl-map-popup__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 4;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--attdl-grey-050);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.attdl-map-popup__close:hover {
	color: var(--attdl-white);
}

/* Freccia/tip verso il pin (dietro la card; flip in modalità `is-below`). */
.attdl-map-popup::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 16px;
	height: 16px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--attdl-ink-soft);
	z-index: -1;
}

.attdl-map-popup.is-below::after {
	bottom: auto;
	top: -7px;
}

/* Card dark dentro il popup. */
.attdl-leaflet-popup .attdl-card--popup {
	background: var(--attdl-ink-soft);
	color: var(--attdl-grey-050);
}

.attdl-leaflet-popup .attdl-card--popup:hover {
	transform: none;
	box-shadow: var(--attdl-shadow-card);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__head {
	border-bottom-color: rgba(255, 255, 255, 0.14);
	padding-right: 48px; /* spazio per il pulsante di chiusura Leaflet. */
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__title {
	color: var(--attdl-yellow);
	font-size: 22px;
}

/* Nel popup dark il titolo resta giallo anche quando è linkato: batte la regola
   archivio `.attdl-card__title a` (blu !important) con specificità maggiore. */
.attdl-leaflet-popup .attdl-card--popup .attdl-card__title a,
.attdl-leaflet-popup .attdl-card--popup .attdl-card__title a:hover {
	color: var(--attdl-yellow) !important;
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__type {
	color: var(--attdl-yellow);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__country {
	color: var(--attdl-grey-300);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__line {
	color: var(--attdl-grey-050);
}

/* Icone contatto gialle (firma), testo chiaro, link blu chiaro per contrasto su dark. */
.attdl-leaflet-popup .attdl-card--popup .attdl-card__line-icon {
	color: var(--attdl-yellow);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__line a {
	color: var(--attdl-info);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-card__line a:hover {
	color: #fff;
}

.attdl-leaflet-popup .attdl-card--popup .attdl-services__title {
	color: var(--attdl-yellow);
}

.attdl-leaflet-popup .attdl-card--popup .attdl-services__labels {
	color: var(--attdl-grey-050);
}

/* Allineamento al mockup (2026-06-30). */

/* Pulsante di chiusura: solo ✕ bianca, nessuno sfondo. Specificità (0,2,0) per
 * battere lo style `button` del kit Elementor (sfondo giallo pill). */
.attdl-map-popup .attdl-map-popup__close,
.attdl-map-popup .attdl-map-popup__close:hover,
.attdl-map-popup .attdl-map-popup__close:focus,
.attdl-map-popup .attdl-map-popup__close:focus-visible,
.attdl-map-popup .attdl-map-popup__close:active {
	box-sizing: border-box;
	min-width: 0;
	padding: 0;
	background: transparent; /* niente sfondo giallo: né all'apertura (auto-focus) né su hover. */
	border: 0;
	box-shadow: none;
	outline: none; /* niente bordo/ring (incl. focus del kit Elementor). */
	color: var(--attdl-white);
}

/* Riquadro nome (head) più scuro del corpo, come da mockup. */
.attdl-leaflet-popup .attdl-card--popup .attdl-card__head {
	background: #262626;
}

/* Pulsanti azione: il popup è su `document.body` (l'archivio li stila sotto
 * `.attdl-archive`, qui non applicabile) → ridichiarati. Specificità (0,3,0) per
 * battere lo style globale `a`/`button` del kit Elementor. */
.attdl-map-popup .attdl-card--popup .attdl-btn {
	box-sizing: border-box; /* reset padding del kit Elementor: il padding resta dentro height:40px. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	height: 40px;
	padding: 0 18px;
	font-family: var(--attdl-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1;
	border: 0;
	border-radius: var(--attdl-radius-md);
	cursor: pointer;
	text-decoration: none;
}

.attdl-map-popup .attdl-card--popup .attdl-btn--block {
	flex: 1 1 0;
}

.attdl-map-popup .attdl-card--popup .attdl-btn--blue,
.attdl-map-popup .attdl-card--popup .attdl-btn--blue:hover,
.attdl-map-popup .attdl-card--popup .attdl-btn--blue:focus,
.attdl-map-popup .attdl-card--popup .attdl-btn--blue:active {
	background: #1d86da;
	color: var(--attdl-white);
	outline: none;
}

.attdl-map-popup .attdl-card--popup .attdl-btn--grey,
.attdl-map-popup .attdl-card--popup .attdl-btn--grey:hover,
.attdl-map-popup .attdl-card--popup .attdl-btn--grey:focus,
.attdl-map-popup .attdl-card--popup .attdl-btn--grey:active {
	background: #d5d5d3;
	color: var(--attdl-ink);
	outline: none;
}

/* ------------------------------------------------------------------ *
 * Embed: niente overlay flottante (degrada a flusso normale).
 * ------------------------------------------------------------------ */
.attdl-archive--embed {
	position: relative; /* contesto per l'overlay filtri (HUD sopra la mappa). */
	padding: 0 0 24px;
}

/* Embed: filtri in overlay sopra la mappa (HUD), ancorati ~4% sopra il fondo mappa.
 * Il contenitore è altissimo (mappa + lista), quindi `bottom` non funziona: anchoro
 * il BORDO INFERIORE della barra alla linea "fondo mappa − 4%" con `top` + translateY(-100%)
 * (height-independent). Mappa = 100svh che parte dal top dell'embed → `top: 96svh`. */
.attdl-archive--embed .attdl-archive__filters {
	position: absolute;
	left: 50%;
	top: 96svh;
	transform: translate(-50%, -100%);
	z-index: 900;
	max-width: 920px;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Responsive.
 * ------------------------------------------------------------------ */

/* Tablet + mobile: sezioni/elenco a piena larghezza con padding-inline 16px. */
@media (max-width: 1024px) {
	.attdl-archive__group,
	.attdl-archive__empty {
		width: 100%;
		padding-inline: 16px;
	}
}

@media (max-width: 720px) {
	.attdl-hero .attdl-archive__filters,
	.attdl-archive--embed .attdl-archive__filters {
		position: relative; /* resta positioned per il ::before bordo-gradiente. */
		/* Reset degli offset dell'overlay desktop: senza questo, `position:relative`
		 * onora ancora `left:50%` (pill spinta a metà fuori schermo a destra),
		 * `top:96svh` dell'embed (pill spinta dentro l'elenco) e `bottom:4svh` dell'hero.
		 * `transform:none` da solo non basta perché non annulla left/top/bottom. */
		inset: auto;
		transform: none;
		width: auto;
		max-width: none;
		margin: 16px; /* respiro 16px su tutti i lati (era -28px overlap sulla mappa). */
		flex-direction: column;
		align-items: stretch;
		/* Reset dello z-index:1000 dell'overlay desktop (serviva solo a stare sopra
		 * la mappa Leaflet): in flusso su mobile crea uno stacking context che copre
		 * il menu fixed del sito quando lo si apre sopra la sezione. */
		z-index: auto;
	}

	.attdl-archive__filters-group,
	.attdl-select,
	.attdl-select select,
	.attdl-btn {
		width: 100%;
	}

	.attdl-archive__map.attdl-map {
		/* Mobile: mappa quadrata invece che alta 70svh. Con lo zoom fit-world (JS)
		 * il planisfero è fittato alla larghezza → un container quadrato lo contiene
		 * con bande grigie minime sopra/sotto. `aspect-ratio` è relativo alla larghezza
		 * reale → corretto anche in colonna Elementor stretta (embed). `min-height` =
		 * fallback per browser senza `aspect-ratio` (altrimenti height:auto ⇒ 0px). */
		height: auto;
		min-height: 340px;
		aspect-ratio: 1 / 1;
		max-height: 82svh;
	}

	.attdl-archive__list {
		grid-template-columns: 1fr;
	}

	/* Barra chip: full-width su mobile (desktop = 70% centrata). */
	.attdl-archive__chips {
		width: 100%;
		margin: 0 0 40px;
	}

	.attdl-archive__title {
		gap: 14px;
	}
}

/* Tablet touch (iPad, Galaxy Tab, ecc.). La mappa a `100svh` riempie il viewport e su
 * touch il gesto di scroll pana la mappa invece di scorrere la pagina → l'utente resta
 * "intrappolato". Su questi device (oltre il breakpoint mobile ≤720) riduciamo la mappa
 * a ~60svh e portiamo i filtri FUORI dalla mappa, in flusso sotto (come su mobile, ma
 * mantenendo il layout a riga). `pointer:coarse` = puntatore primario touch → NON tocca
 * desktop/laptop con mouse, dove il `100svh` resta di design. */
@media (pointer: coarse) and (min-width: 721px) {
	.attdl-archive__map.attdl-map {
		height: 60svh;
		min-height: 340px;
		max-height: none;
		aspect-ratio: auto;
	}

	.attdl-hero .attdl-archive__filters,
	.attdl-archive--embed .attdl-archive__filters {
		position: relative;
		inset: auto;
		transform: none;
		width: auto;
		max-width: 920px;
		margin: 16px auto;
		z-index: auto;
	}
}

/* Indirizzo single/shortcode: niente corsivo (override del default `<address>`). */
.attdl-single__address {
	font-style: normal;
}