/*
 * Stile della pagina di ricerca con mappa (mappa.php).
 * Sezione 1: variabili + reset di base per tutta la pagina.
 * Sezione 2: layout lista + mappa (co-srp-*).
 * L'header/nav/lang-menu/mobile-drawer (.co-header, .co-nav-.../.co-lang-.../.co-mobile-...)
 * NON e' qui: vedi il commento subito prima di "SEARCH RESULTS PAGE" piu' sotto.
 */

:root {
	--verde-col: #070;
	--green-deep: #005c00;
	--green-dark: #004400;
	--green-soft: #e4f3e1;
	--ink: #1a2b1e;
	--ink-2: #2f4a34;
	--muted: #6a7a6d;
	--line: #dde1d8;
	--bg: #f4f5f0;
	--sand: #e8dfc9;
	--star: #f5a623;
	--yellow: #f5c21b;
	--gold: rgba(205, 167, 14, 0.8);
	--gold-solid: #cda70e;
}

* {
	box-sizing: border-box
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg)
}

/* Font, colore e link SOLO nell'area della mappa (lista + mappa, .co-srp) e nei due modal
   che il JS sposta sotto <body> (#advPanel, #orderByModal): applicate a html/body/a
   cambiavano anche header e footer comuni del sito sulle pagine mappa (font Inter al
   posto di quello di sistema, colore dei link) - review punto 53. :where() lascia la
   stessa specificita' delle vecchie regole su body/a, cosi' le regole piu' specifiche
   scritte sotto continuano a valere come prima. */
:where(.co-srp, #advPanel, #orderByModal) {
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased
}

:where(.co-srp, #advPanel, #orderByModal) a {
	color: inherit;
	text-decoration: none
}

.full-bleed {
	width: 100%
}

/* Header/nav/lang-menu/mobile-drawer (.co-header, .co-nav-.../.co-lang-.../.co-mobile-...):
   NESSUNA regola qui - quella vera e' in home-int.css (caricato da common-header.php
   quando APP_MARKET=="INT", cioe' sempre insieme a questo file, dato che questa pagina
   usa l'header home-int-header.php su quel mercato) o non serve affatto (sul mercato
   IT l'header e' menu.php, che non usa queste classi). Una copia locale qui era stata
   scritta a mano per riprodurre lo stile dell'header vero, ma essendo mantenuta a
   parte e' andata fuori sincrono in piu' punti (un "top" su .co-nav-menu assente
   nell'originale staccava visibilmente il dropdown del menu dalla sua voce SOLO su
   questa pagina; .co-mobile-menu a.item non intercettava piu' nulla, il markup reale
   usa da tempo .co-mobile-menu .item/.co-mobile-parent) - rimossa per affidarsi
   sempre e solo a home-int.css, l'unica fonte reale. */

/* ============ SEARCH RESULTS PAGE ============ */
/*
	 * page_start.php avvolge tutta la pagina in <div class="container">, che con
	 * Bootstrap 5 ha un max-width (1320px da 1400px in su): senza questa regola la UI
	 * lista+mappa resta chiusa in una colonna centrale invece di occupare tutto lo schermo.
	 * Selettore "body > .container" (non solo ".container") per non toccare anche
	 * <nav class="navbar container"> dentro il menu (.co-header), che deve restare
	 * dimensionato come in home-int.php.
	 */
body>.container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.co-srp {
	display: grid;
	grid-template-columns: 1.08fr 1fr;
	align-items: start;
	background: #fff
}

.co-srp button,
.co-srp select,
.co-srp-fab {
	cursor: pointer
}

.co-srp button:focus-visible,
.co-srp a:focus-visible,
.co-srp input:focus-visible,
.co-srp select:focus-visible,
.co-srp-fab:focus-visible {
	outline: 3px solid rgba(0, 119, 0, .35);
	outline-offset: 2px
}

.co-srp-list {
	position: relative;
	border-right: 1px solid var(--line);
	min-width: 0
}

.co-srp.no-map {
	grid-template-columns: 1fr
}

.co-srp.no-map .co-srp-map-col {
	display: none
}

.co-srp.no-map .co-srp-list {
	border-right: none
}

.co-srp.no-map .co-srp-grid {
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr))
}

/* Senza questa regola, con la mappa nascosta ".co-srp.no-map .co-srp-grid" (3 classi)
	batteva ".co-srp-grid.rows" (2 classi) sulla specificita' e la vista lista tornava
	una griglia stretta invece di righe a tutta larghezza. */
.co-srp.no-map .co-srp-grid.rows {
	grid-template-columns: 1fr
}

.co-srp-map-col {
	position: sticky;
	top: 60px;
	height: calc(100vh - 60px);
	background: #e8eee4
}

#srpMap {
	position: absolute;
	inset: 0
}

/* Marker "classici" (google.maps.Marker, non Advanced Markers) non espongono un
   elemento DOM stabile su cui scrivere vere regole CSS - Google li disegna a runtime
   come <img> dentro .gm-style senza classi documentate/garantite dall'API, quindi
   questa e' solo un'attenuazione "a costo zero" (se Google cambiasse quel markup la
   regola smetterebbe semplicemente di applicarsi, nessun errore). Scoped a #srpMap
   (non un selettore globale su tutta la pagina) per non toccare l'altra mappa del
   sito (#mappaModal, googleMaps.js). Ammorbidisce la ricomparsa dei marker quando un
   cluster si scioglie con lo zoom (MAP_CLUSTER_MAX_ZOOM in mappa.php): senza,
   passavano da un pallino-cluster a N pin singoli in un frame, un salto brusco. */
#srpMap img {
	transition: opacity .15s ease-out
}

/* Bottone "Chiudi" nativo dell'InfoWindow di Google Maps (.gm-ui-hover-effect):
   markup e stili scritti tutti inline da Google a runtime, non documentati/
   garantiti dall'API - stesso avviso "a costo zero" del blocco #srpMap img qui
   sopra. L'icona X (uno <span> con mask-image, centrata da Google via un margin
   fisso sui 4 lati) non risultava centrata nel cerchio di hover del bottone;
   sostituisco il centraggio a margin con flexbox, che tiene conto delle dimensioni
   reali del bottone invece di un valore fisso. Le regole !important di un foglio
   di stile hanno priorita' sugli stili inline SENZA !important: e' per questo che
   funziona nonostante Google scriva tutto come style="..." sull'elemento. */
#srpMap .gm-ui-hover-effect {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#srpMap .gm-ui-hover-effect>span {
	margin: 0 !important;
}

.co-srp-map-error {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 700;
	text-align: center
}

/* Search + filter bar */
.co-srp-bar {
	position: sticky;
	top: 60px;
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid var(--line);
	padding: 12px 16px 11px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px
}

/* Link di ritorno alla vista lista "classica" (areaSostaCamper.php, via la route
	pulita /sosta-camper) - stessa pillola bordata .tool degli altri controlli
	della barra (vedi .tool piu' sotto), qui solo per l'align-self: il PHP
	(mappa.php) decide dove stamparlo in base a $dispositivoMobile - su desktop
	resta il primo figlio di .co-srp-bar (sticky, sopra il campo di ricerca, che
	e' align-items:stretch: senza align-self la pillola si stirerebbe a piena
	larghezza), su mobile viene stampato dentro .co-srp-types (stessa riga dei
	filtri tipo/Ordina, sotto la ricerca, che e' invece una riga flex normale) per
	non aggiungere una riga di altezza. Il percorso inverso - il bottone
	btViewOnMap.png su areaSostaCamper.php che porta qui - e' in
	include/tastoMappaModal.php. */
.co-srp-classic-link {
	align-self: flex-start
}

.co-srp-types .co-srp-classic-link {
	align-self: center
}

.co-srp-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap
}

.co-srp-field {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s
}

.co-srp-field:focus-within {
	border-color: var(--verde-col);
	box-shadow: 0 0 0 3px var(--green-soft)
}

.co-srp-field input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink)
}

/* EasyAutocomplete avvolge #srpWhere in questo div e gli scrive inline uno "width"
	fisso (pari alla larghezza dell'input calcolata dal flex layout al momento
	dell'init): "flex:1" con flex-basis 0% fa si' che quello "width" inline venga
	ignorato per il sizing, cosi' il wrapper torna a occupare tutto lo spazio
	disponibile invece di restare bloccato a quella larghezza. */
.co-srp-field .easy-autocomplete {
	flex: 1;
	min-width: 0
}

/* easy-autocomplete.min.css applica un bordo/box-shadow di default all'input
	che avvolge (".easy-autocomplete input", anche su :hover/:focus): sovrascrivo
	qui con una specificita' piu' alta per tornare al campo senza bordo del resto
	del progetto (".co-srp-field input" sopra). */
.co-srp-field .easy-autocomplete input {
	width: 100%;
	border: none;
	box-shadow: none;
	padding: 0;
	color: var(--ink)
}

.co-srp-field .clear {
	background: none;
	border: none;
	padding: 0;
	color: var(--muted);
	display: inline-flex;
	flex-shrink: 0
}

.co-srp-field .clear:hover {
	color: var(--ink)
}

/* Gold search frame + type checkboxes */
.co-srp-frame {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px;
	border: 2px solid var(--gold-solid);
	border-radius: 10px;
	background: #fff;
	flex-wrap: wrap;
	width: 100%
}

.co-srp-frame .co-srp-field {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 9px 12px;
	flex: 1 1 auto;
	min-width: 120px
}

.co-srp-frame .co-srp-field input {
	font-size: 14px
}

.co-srp-go {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	background: var(--verde-col);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .02em;
	/* Stessa altezza di .co-srp-adv (il bottone "Filtri avanzati" a fianco) e del
		campo .co-srp-field: align-self:stretch come .co-srp-adv, cosi' entrambi i
		bottoni prendono l'altezza della riga di .co-srp-frame (44px, quella del
		campo). Il solo min-height non bastava: .co-srp-go restava alla propria
		altezza intrinseca (40px desktop, 38px mobile) mentre il bottone filtri si
		stirava a 44px. min-height resta come minimo se la riga fosse piu' bassa. */
	align-self: stretch;
	min-height: 38px
}

.co-srp-go:hover {
	background: var(--green-deep)
}

.co-srp-adv {
	flex-shrink: 0;
	width: 42px;
	align-self: stretch;
	min-height: 38px;
	border: none;
	border-radius: 6px;
	background: var(--gold-solid);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0
}

.co-srp-adv:hover {
	background: #b8940c
}

.co-srp-adv {
	position: relative
}

.co-srp-adv.on {
	background: var(--verde-col)
}

.co-adv-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #cc2a2a;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1
}

.co-adv-panel {
	/* #advPanel e' ora un modal Bootstrap (.modal-content gia' fornisce bordo/sfondo/
		raggio, .modal-body il padding): questa classe resta solo per il contenuto
		(griglia gruppi + toggles + azioni), niente piu' margin/padding/bordo propri. */
	max-height: calc(80vh - 120px);
	overflow-y: auto
}

.co-adv-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(190px, 1fr));
	/* "Sport" (ICONE_AREAPOSIZIONE, categoria 6 = Sports) va sotto "Posizione", nella
		stessa colonna, invece che affiancata come le altre 3 sezioni - vedi
		data-adv-group nel markup PHP. Servizi/Punti di interesse ripetono la propria
		area su entrambe le righe (occupano l'intera colonna), Posizione/Sport si
		dividono la seconda. Su mobile torna a un'unica colonna, vedi il breakpoint
		559px piu' sotto. */
	grid-template-areas:
		"servizi posizione poi"
		"servizi sport     poi";
	gap: 18px
}

.co-adv-group[data-adv-group="servizi"] {
	grid-area: servizi
}

.co-adv-group[data-adv-group="posizione"] {
	grid-area: posizione
}

.co-adv-group[data-adv-group="poi"] {
	grid-area: poi
}

.co-adv-group[data-adv-group="sport"] {
	grid-area: sport
}

.co-adv-group h4 {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--verde-col);
	margin: 0 0 10px
}

.co-adv-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 13px;
	color: var(--ink-2);
	cursor: pointer
}

.co-adv-check input {
	accent-color: var(--verde-col);
	width: 15px;
	height: 15px;
	flex-shrink: 0
}

.co-adv-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--line)
}

.co-adv-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px
}

.co-adv-reset {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink-2);
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit
}

.co-adv-reset:hover {
	border-color: var(--ink)
}

.co-adv-apply {
	border: none;
	background: var(--verde-col);
	color: #fff;
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit
}

.co-adv-apply:hover {
	background: var(--green-deep)
}

@media (max-width:559px) {
	.co-adv-groups {
		grid-template-columns: 1fr;
		grid-template-areas: none
	}

	/* Le regole .co-adv-group[data-adv-group="..."] (poco sopra) assegnano sempre
	   grid-area: servizi/posizione/poi/sport, valide solo per la griglia a 3 colonne
	   di desktop (grid-template-areas qui sopra e' "none" a questo breakpoint): senza
	   azzerarle, i browser non ricadono in modo affidabile sul normale auto-placement
	   in colonna singola - i gruppi finivano sovrapposti invece che impilati.
	   Selettore "[data-adv-group]" (non solo ".co-adv-group"): stessa specificita'
	   (classe + attributo) delle regole da sovrascrivere, altrimenti - pur venendo
	   dopo nel file - perderebbero comunque contro quelle piu' specifiche. */
	.co-adv-group[data-adv-group] {
		grid-area: auto
	}

	.co-adv-actions {
		flex-direction: column-reverse
	}

	.co-adv-actions button {
		width: 100%
	}
}

.co-srp-types {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap
}

.co-srp-types .tools {
	/* Riga propria sotto ai bottoni-filtro tipo; l'allineamento a destra di "Ordina
	   per" viene invece da .ml-auto in mappa.php (utility Bootstrap), non da qui. */
	flex-basis: 100%;
	/* .tools e' anche ".row" (Bootstrap): porta con se' i margini -15px di
	   default, che .no-gutters in mappa.php azzera - ma app/css-stile/
	   camperonline.css (caricato da header.php DOPO bootstrap.min.css) ridefinisce
	   ".row, .form-row" con un altro valore (-10px) fra 992px e 1024px di
	   larghezza, senza !important: essendo pero' un selettore a una sola classe
	   contro le due di questa regola, vince comunque quest'ultima per specificita'
	   (ricerca-aree-sosta.css e' caricato per ultimo, ma qui non serve nemmeno
	   l'ordine di caricamento) - senza, "List view"/"Ordina per" restavano
	   disallineati rispetto a .co-srp-frame proprio in quella fascia di larghezza. */
	margin-right: 0;
	margin-left: 0
}

/* .btn/.btn-outline-success di Bootstrap (gia' caricato sitewide, vedi bootstrap.min.css
   incluso da header.php/menu.php) per i bottoni-filtro tipo (vedi mappa.php), al posto
   della vecchia spunta custom (.co-srp-check/.box/.ic): solo il colore del brand
   (diverso dal success di Bootstrap) e lo spazio icona/testo restano qui, tutto il
   resto (padding, hover, focus, stato .active) e' Bootstrap di serie. */
.co-srp-types .btn-outline-success {
	/* flex:1 (invece della larghezza naturale del contenuto): i 3 bottoni si
	   spartiscono in parti uguali tutta la larghezza della riga, bordo a bordo
	   come .co-srp-frame sopra, invece di restare compatti e allineati a sinistra
	   con spazio vuoto dopo l'ultimo. */
	flex: 1 1 0;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-deep);
	border-color: #b9c2b6
}

.co-srp-types .btn-outline-success i {
	margin-right: 6px
}

.co-srp-types .btn-outline-success:hover {
	color: var(--green-deep) !important;
	background-color: var(--green-soft);
	border-color: var(--verde-col) !important;
}

.co-srp-types .btn-outline-success:focus {
	box-shadow: 0 0 0 .2rem rgba(0, 119, 0, .25)
}

/* :not(:disabled):not(.disabled) ripetuto anche qui (non serve a filtrare nulla, i
   bottoni-filtro non sono mai disabled): senza, questo selettore ha specificita' 3
   classi contro le 4 di Bootstrap (.btn-outline-success:not(:disabled):not(.disabled)
   .active, bootstrap.min.css) per lo stato "premuto" - Bootstrap vinceva sempre e
   il bottone attivo mostrava il suo verde di default invece di quello del brand. */
.co-srp-types .btn-outline-success:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: var(--verde-col);
	border-color: var(--verde-col)
}

.co-srp-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

.co-srp-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	transition: all .12s
}

.co-srp-chip svg {
	flex-shrink: 0;
	color: var(--verde-col)
}

.co-srp-chip:hover {
	border-color: var(--ink)
}

.co-srp-chip.solid {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff
}

.co-srp-chip.solid svg {
	color: #fff
}

.co-srp-chip.on {
	background: var(--green-soft);
	border-color: var(--green-soft);
	color: var(--green-deep)
}

.co-srp-chip .stars {
	color: var(--star);
	letter-spacing: -1px;
	font-size: 12px
}

/* Result header: numero risultati, sotto la riga dei filtri tipo/tools */
.co-srp-count {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
	padding: 4px 2px 0
}

.co-srp-count b {
	color: var(--verde-col)
}

/* "Ordina per" (onlyModalOrderBy.php, incluso in mappa.php - copia di modalOrderBy.php
   senza la colonna <div class="pagination">, qui non usata: vedi il commento nel file)
   sulla stessa riga del conteggio risultati invece che sotto. */
.co-srp-countrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* nowrap, non wrap: il punto del component era tenerli sulla stessa riga anche
	   negli spazi stretti (colonna lista accanto alla mappa, mobile), lasciando il
	   controllo di ordinamento libero di restringersi (vedi min-width:0 sotto e il
	   ritocco per @media max-width:559px) invece di andare a capo su una riga propria. */
	flex-wrap: nowrap;
	gap: 10px
}

.co-srp-countrow .co-srp-count {
	min-width: 0
}

/* Pillola bordata come .co-srp-types .tool (icona + <select> nativo), non piu' il vecchio
   .input-group/.input-group-text/.form-control Bootstrap: era l'unico controllo grigio
   "di serie" in mezzo alle pillole bianche/verdi del resto della barra. */
.co-srp-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--muted);
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap
}

.co-srp-sort svg {
	flex-shrink: 0
}

.co-srp-sort select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font: inherit;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.co-srp-sort select:focus-visible {
	outline: 3px solid rgba(0, 119, 0, .35);
	outline-offset: 2px
}

/* Bottone mobile che apre #orderByModal (vedi onlyModalOrderBy.php): stessa pillola
   bordata di .co-srp-sort (icona + etichetta "Ordina per" + criterio corrente), non
   piu' solo l'icona - senza testo il controllo passava inosservato tra le altre icone
   della barra. Stessa gerarchia visiva del <select> desktop: etichetta attenuata,
   criterio corrente in evidenza (li' lo mostra il <select> stesso nativamente). */
.co-srp-sortbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	flex-shrink: 0;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap
}

.co-srp-sortbtn svg {
	flex-shrink: 0;
	color: var(--ink)
}

.co-srp-sortbtn-value {
	color: var(--ink);
	font-weight: 600
}

.co-srp-sortbtn:hover {
	border-color: var(--ink)
}

/* #orderByModal (il modal "Ordina per" mobile) resta la struttura Bootstrap - vedi il
   commento in onlyModalOrderBy.php - solo il bottone di conferma e' riadattato allo
   stile del resto della pagina: stesso .co-adv-apply di "Apply filters" nel pannello
   filtri avanzati, qui a piena larghezza (li' e' invece affiancato a .co-adv-reset). */
#orderByModal .co-adv-apply {
	width: 100%;
	margin-top: 12px
}

.co-srp-types .tools {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink)
}

.tool:hover {
	border-color: var(--ink)
}

.tool svg {
	color: var(--muted)
}

/* Cards grid */
.co-srp-empty {
	display: none;
	margin: 6px 16px 30px;
	padding: 26px 16px;
	border: 1px dashed var(--line);
	border-radius: 10px;
	background: var(--bg);
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	text-align: center
}

.co-srp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px 10px;
	padding: 4px 16px 30px;
	transition: opacity .15s ease
}

/* Aggiunta/rimossa via JS attorno al fetch di /api/col/ricerca-mappa/ (mappa.php) */
.co-srp-grid.loading {
	opacity: .45;
	pointer-events: none
}

.co-srp-card {
	display: flex;
	flex-direction: column;
	color: var(--ink)
}

/* Vista griglia (default): a differenza della vista lista (.co-srp-grid.rows piu'
   sotto, gia' con un box premiumArea completo), qui le card normali non hanno un box
   vero (niente padding/sfondo su .titlebar/.body - solo .shot e' un riquadro a se').
   Stesso sfondo verde chiaro di .premiumArea nel resto del sito (template.css,
   #dff1e2 li', --green-soft qui - stesso significato/stessa tonalita'), con un
   padding dedicato per farlo vedere come un box: senza, lo sfondo si vedrebbe solo
   negli spazi vuoti fra le righe di testo, non come un riquadro. */
.co-srp-card.premiumArea {
	background: var(--green-soft);
	border-radius: 12px;
	padding: 8px 8px 12px
}

/* Solo foto+titolo sono cliccabili (vedi renderCardHtml()/buildCardHtml() in
   mappa.php): .co-srp-card-link avvolge .shot+.titlebar, il resto della card
   (.body: localita', voto, servizi, disponibilita') sta fuori dal <a>, come
   testo non cliccabile - stesso layout in colonna di prima, solo su un livello
   in piu' di nesting. */
.co-srp-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	cursor: pointer
}

.co-srp-card .shot {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: 10px;
	overflow: hidden;
	background: #cfdac6
}

.co-srp-card .shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease
}

.co-srp-card-link:hover .shot img {
	transform: scale(1.045)
}

.co-srp-card .shots-n {
	position: absolute;
	top: 10px;
	right: 5px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 5px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	z-index: 2
}

.co-srp-card .shots-n svg,
.co-srp-card .shots-n i {
	flex-shrink: 0;
	opacity: .9
}

.co-srp-card .kind {
	position: absolute;
	left: 5px;
	top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 20px)
}

.co-srp-card .kind i {
	font-size: 11px
}

/* $rowTrova->ribbon (vedi AreaDTO::__construct) porta con se' un'icona raster
	("iconMap", 40x40) invece della nostra <i> Font Awesome: la ridimensiono qui
	perche' l'attributo HTML width="40" da solo non basterebbe dentro il badge. */
.co-srp-card .kind img.iconMap {
	width: 13px;
	height: 13px;
	vertical-align: middle;
	flex-shrink: 0
}

/* Con la mappa nascosta la griglia arriva a 5-6 colonne: senza questo, cards
	affiancate con localita' su 1 o 2 righe finiscono con voto/recensioni ad
	altezze diverse. ".rate" (l'ultimo elemento visibile qui, il resto e' mostrato
	solo in vista lista) va sempre in fondo alla card, indipendentemente da quante
	righe occupano sopra titolo/localita'. */
.co-srp-card .body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0
}

/* Contenitore di h3 (e, solo per le card "evidenza" in vista lista, del ribbon voto/
	recensioni affiancato - vedi .rate-ribbon piu' sotto): un semplice wrapper flex
	trasparente in vista griglia (dove il ribbon resta sempre nascosto, quindi qui
	dentro c'e' solo h3 - nessuna differenza visiva rispetto a prima), diventa
	l'area di grid "title" in vista lista (vedi .co-srp-grid.rows .co-srp-card
	.titlebar piu' sotto: prima quel ruolo lo aveva h3 stesso). */
.co-srp-card .titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px
}

.co-srp-card h3 {
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 12px 0 3px;
	text-wrap: pretty
}

.co-srp-card-link:hover h3 {
	color: var(--verde-col)
}

.co-srp-card .loc {
	font-size: 13px;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 9px
}

.co-srp-card .loc .loc-address {
	color: var(--muted);
	font-weight: 400
}

/* $rowTrova->etichetta (vedi AreaDTO::__construct) e' "<i class='fas fa-star'></i>
	VOTO <i class='fas fa-comments ml-3'></i> N_RECENSIONI" - icone Font Awesome
	semplici, non piu' gli span .score/.n di prima. */
.co-srp-card .rate {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	gap: 6px;
	margin-bottom: 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums
}

.co-srp-card .rate .fa-star {
	color: var(--yellow)
}

.co-srp-card .rate .fa-comments {
	color: var(--muted)
}

.co-srp-card .facts {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ink-2);
	margin-bottom: 6px
}

.co-srp-card .facts .pitch {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600
}

.co-srp-card .facts .pitch svg {
	color: var(--verde-col);
	flex-shrink: 0
}

.co-srp-card .facts .dot {
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: #c2c8be
}

.co-srp-card .facts .open {
	color: var(--verde-col);
	font-weight: 700
}

.co-srp-card .price {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums
}

.co-srp-card .price .free {
	color: var(--verde-col)
}

.co-srp-card.hot h3 {
	color: var(--verde-col)
}

.co-srp-card.hot .shot {
	box-shadow: 0 0 0 3px var(--verde-col)
}

/* List (row) view - ricalca il layout della card "classica" gia' in uso altrove sul
   sito (.inserzione, vedi css-stile/template.css e php/template_desktop.html): card
   bordata bianca con barra titolo separata (sfondo chiaro), immagine piu' grande con
   ribbon "a bandiera" in basso a sinistra invece del badge in alto, bottone
   "Availability" verde in fondo - non piu' la riga compatta divisa da un bordo
   inferiore usata prima. Richiede <h3> FUORI da .body (vedi renderCardHtml()/
   buildCardHtml() in mappa.php): solo cosi' puo' diventare una sua area di grid a
   se' stante, a tutta larghezza sopra immagine+corpo. */
.co-srp-grid.rows {
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 0 16px 24px
}

.co-srp-grid.rows .co-srp-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	grid-template-areas: "title title""shot body";
	gap: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	padding: 0;
	transition: box-shadow .15s ease
}

.co-srp-grid.rows .co-srp-card:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, .14)
}

/* Barra titolo a tutta larghezza (stesso ruolo di .inserzione_titolo: sfondo chiaro,
   bordo inferiore a separarla da immagine/corpo) - ora su .titlebar (il contenitore
   di h3, vedi piu' sotto) invece che su h3 direttamente: h3 da solo non basta piu' a
   fare da grid-area quando le card "evidenza" ci affiancano anche il ribbon voto. */
.co-srp-grid.rows .co-srp-card .titlebar {
	grid-area: title;
	padding: 9px 16px;
	background: var(--bg);
	border-bottom: 1px solid var(--line)
}

.co-srp-grid.rows .co-srp-card h3 {
	margin: 0;
	font-size: 16px;
	/* Titolo sempre verde (link-style), non solo in hover come in vista griglia -
	   stesso trattamento di .inserzione_titolo h5 a in css-stile/template.css. */
	color: var(--verde-col)
}

.co-srp-grid.rows .co-srp-card .shot {
	grid-area: shot;
	aspect-ratio: auto;
	min-height: 150px;
	border-radius: 0;
	background: #333
}

/* Ribbon "a bandiera" in basso a sinistra sull'immagine (stesso ruolo/posizione di
   .inserzione_tipo_f), non piu' il badge scuro in alto a sinistra della vista griglia. */
.co-srp-grid.rows .co-srp-card .kind {
	top: auto;
	left: 0;
	bottom: 12px;
	max-width: calc(100% - 10px);
	border-radius: 0 4px 4px 0;
	background: var(--verde-col);
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px
}

.co-srp-grid.rows .co-srp-card .body {
	grid-area: body;
	min-width: 0;
	padding: 12px 16px
}

.co-srp-grid.rows .co-srp-card .loc {
	margin-bottom: 8px
}

.co-srp-grid.rows .co-srp-card .rowmeta {
	display: block
}

.co-srp-grid.rows .co-srp-card .avail {
	display: inline-flex
}

/* Servizi/posizione (.feat-icons, stessa fonte Caratteri/PosizioneLuogo +
	ICONE_AREACARATTERISTICA/ICONE_AREAPOSIZIONE del DTO) e descrizione (.desc,
	stessa troncatura a 60 caratteri) - visibili solo in vista lista, come prima. */
.co-srp-card .rowmeta {
	display: none;
	margin-top: 8px
}

.co-srp-card .feat-icons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 5px
}

/* Didascalia "Servizi / Posizione" sopra le icone (stessa di AreaDTO->testo_desktop
	nel vecchio template): primo figlio di .feat-icons, a tutta larghezza (flex-basis
	100%) cosi' le icone continuano comunque sulla riga sotto grazie a flex-wrap. */
.co-srp-card .feat-caption {
	flex-basis: 100%;
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 2px
}

.co-srp-card .feat-caption i {
	margin-right: 4px
}

/* Icone dopo il titolo (stelleArea/Agriturismo, vedi AreaDTO->post_titolo_icone nel
	vecchio template): stessa dimensione/colore delle stelline gia' usate altrove
	nella pagina (.co-srp-chip .stars). */
.co-srp-card h3 .post-titolo-icone {
	font-size: 12px;
	white-space: nowrap
}

.co-srp-card h3 .stelleArea {
	/* Sovrascrive font-size/position della .stelleArea globale (listFAI.css, pensata
		per il contesto/font-size del vecchio template): qui l'icona deve restare alla
		dimensione fissata da .post-titolo-icone, non un multiplo em di essa. */
	position: static;
	top: auto;
	font-size: 1em;
	color: var(--star)
}

.co-srp-card .feat-ic {
	width: 17px;
	height: 17px;
	object-fit: contain;
	flex-shrink: 0
}

.co-srp-card .desc {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--muted)
}

/* $rowTrova->testo_btn1/icon_btn1 ("Availability" + icona calendario): qui solo
	un'etichetta visiva, non un link separato - la card e' gia' un unico <a> verso
	link_btn1 (che e' lo stesso link della card), un secondo <a> annidato non
	sarebbe HTML valido. */
.co-srp-card .avail {
	display: none;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--green-soft);
	color: var(--green-deep);
	font-size: 10px;
	font-weight: 700;
	width: fit-content
}

/* Ribbon voto/recensioni affiancato al titolo, SOLO per le card "evidenza"
	(Evidenza != '0000' su \DTO\AreaDTO, vedi $mapIsPremium in renderCardHtml()/
	buildCardHtml()) e SOLO in vista lista (in griglia non c'e' spazio per il
	trattamento completo, la card resta uguale alle altre): stesso identico
	contenuto di .rate (rating+recensioni), duplicato nel markup e nascosto/mostrato
	via CSS invece che con logica server/client, cosi' non serve toccare la
	condizione con cui viene generato l'HTML del voto.*/
.co-srp-card .rate-ribbon {
	display: none
}

/* Misure/colori ricalibrati sul mock-up app/php/parcheggio-bootstrap/dist/index.html
	(.listing-card/.listing-header/.rating-ribbon): sfondo verde chiaro su tutta la
	card (non solo la titlebar), titlebar compatta col titolo in grassetto grande,
	ribbon voto a tutta altezza della titlebar senza spazio vuoto sopra/sotto. */
.co-srp-grid.rows .co-srp-card.premiumArea {
	background: var(--green-soft)
}

.co-srp-grid.rows .co-srp-card.premiumArea .titlebar {
	background: #b8e3bd;
	border-bottom: none;
	align-items: stretch;
	padding: 0
}

.co-srp-grid.rows .co-srp-card.premiumArea .titlebar h3 {
	display: flex;
	align-items: center;
	padding: 6px 16px;
	font-size: 19px;
	font-weight: 800;
	color: var(--green-deep)
}

.co-srp-grid.rows .co-srp-card.premiumArea .rate-ribbon {
	display: inline-flex;
	align-self: stretch;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-left: 0;
	padding: 0 18px 0 30px;
	background: var(--verde-col);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	/* Piega "a bandiera" sul lato sinistro, come .rating-ribbon::before nel mock-up
		(li' e' un overlay separato, qui e' piu' semplice ritagliare il ribbon stesso:
		lo sfondo che si "vede" nel taglio e' comunque il mint della titlebar dietro). */
	clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%)
}

.co-srp-grid.rows .co-srp-card.premiumArea .rate-ribbon .fa-star {
	color: var(--yellow)
}

.co-srp-grid.rows .co-srp-card.premiumArea .rate-ribbon .fa-comments {
	color: #fff;
	opacity: .85
}

/* In vista lista il voto resta visibile SOLO nel ribbon per le card evidenza (qui
	sopra): senza questo comparirebbe due volte, identico, anche dentro .body. In
	griglia (dove il ribbon e' sempre nascosto) .rate qui dentro resta l'unico posto
	dove le card evidenza mostrano il voto, come tutte le altre. */
.co-srp-grid.rows .co-srp-card.premiumArea .body>.rate {
	display: none
}

/* Corpo delle card evidenza in vista lista: servizi/posizione+descrizione in alto a
	tutta larghezza, localita'+bottone "Availability" affiancati in fondo (come
	.listing-content nel mock-up: header in alto, address+availability ancorati in
	basso con "mt-auto", non piu' il bottone a tutta altezza di prima). La riga
	centrale vuota (1fr) assorbe lo spazio residuo quando il contenuto e' corto,
	spingendo localita'+bottone in fondo - stessa altezza di .shot, nessun wrapper
	extra nel markup: solo grid-area sugli elementi gia' presenti. */
.co-srp-grid.rows .co-srp-card.premiumArea .body {
	display: grid;
	grid-template-columns: 1fr minmax(150px, 220px);
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"rowmeta rowmeta"
		".       .      "
		"loc     avail  ";
	align-items: center;
	gap: 6px 18px
}

.co-srp-grid.rows .co-srp-card.premiumArea .loc {
	grid-area: loc;
	margin-bottom: 0
}

.co-srp-grid.rows .co-srp-card.premiumArea .rowmeta {
	grid-area: rowmeta;
	margin-top: 0
}

.co-srp-grid.rows .co-srp-card.premiumArea .avail {
	grid-area: avail;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	margin-top: 0;
	padding: 0 20px;
	border-radius: 8px;
	background: var(--verde-col);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap
}

.tool.on {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff
}

.tool.on svg {
	color: #fff
}

/* Map controls & pins */
.co-srp-mapui {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 600;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.co-srp-mapbtn {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	padding: 0
}

.co-srp-mapbtn:hover {
	background: var(--green-soft);
	color: var(--green-deep)
}

.co-srp-maptop {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink)
}

.co-srp-maptop .pulse {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--verde-col)
}

.co-srp-legend {
	position: absolute;
	left: 14px;
	bottom: 26px;
	z-index: 600;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
	padding: 11px 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	/* Le etichette ora sono quelle "lunghe" delle card (markerCardLabel(), non piu' solo
		la sigla) e possono superare la larghezza dello schermo su mobile: il box e'
		assoluto senza una width propria (shrink-to-fit sul contenuto), senza un tetto
		andrebbe fuori dal viewport invece di andare a capo. */
	max-width: calc(100vw - 28px)
}

.co-srp-legend .legend-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink-2)
}

/* Icona marker "a pallino" (PNG, stessa di srpMarkerIcon()/MARKER_LEGEND) mostrata nella
   legenda: stessa dimensione della vecchia .co-pin.co-pin-mini che sostituisce. */
.co-srp-legend .legend-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0
}

/* InfoWindow Google Maps: replica il box compatto disegnato in
   php/UI/RicercaAreeSosta.html. Solo immagine e titolo sono link. */
#srpMap .gm-style .gm-style-iw-c {
	padding: 0 !important;
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .2)
}

#srpMap .gm-style .gm-style-iw-d {
	overflow: hidden !important;
	max-height: none !important;
	border-radius: 10px
}

/* Il contenitore del pulsante non deve creare una fascia bianca sopra la foto. */
#srpMap .gm-style .gm-style-iw-chr {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2
}

#srpMap .gm-style button.gm-ui-hover-effect {
	width: 28px !important;
	height: 28px !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	opacity: 1 !important
}

.co-pop {
	box-sizing: border-box;
	width: 210px;
	max-width: calc(100vw - 64px);
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	color: var(--ink)
}

.co-pop__image-link {
	display: block;
	overflow: hidden;
	background: #cfdac6;
	color: inherit;
	text-decoration: none
}

.co-pop__image-link img {
	width: 100%;
	height: 106px;
	object-fit: cover;
	display: block;
	transition: transform .35s ease
}

.co-pop__image-link:hover img {
	transform: scale(1.035)
}

.co-pop .b {
	padding: 11px 13px 13px
}

.co-pop .b h4 {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0 0 3px;
	color: var(--ink)
}

.co-pop .b h4 a {
	color: inherit;
	text-decoration: none
}

.co-pop .b h4 a:hover {
	color: var(--verde-col)
}

.co-pop__image-link:focus-visible,
.co-pop .b h4 a:focus-visible {
	outline: 3px solid rgba(0, 119, 0, .4);
	outline-offset: -3px
}

.co-pop .b .l {
	overflow: hidden;
	margin-bottom: 7px;
	color: var(--verde-col);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap
}

.co-pop .b .r {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-2);
	font-size: 12px;
	font-variant-numeric: tabular-nums
}

.co-pop .b .r .s {
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--verde-col);
	color: #fff;
	font-weight: 800
}

/* Mobile floating map/list switch */
.co-srp-fab {
	display: none;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 1040;
	align-items: center;
	gap: 9px;
	padding: 13px 16px;
	border: none;
	border-radius: 999px;
	background: var(--gold-solid);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .32)
}

.co-srp-fab svg {
	flex-shrink: 0
}

.co-srp-fab:active {
	background: #b8940c
}

body.map-open {
	overflow: hidden
}

body.map-open .co-srp-map-col {
	position: fixed;
	left: 0;
	right: 0;
	top: 60px;
	bottom: 0;
	height: auto;
	z-index: 1035;
	border-top: none
}

@media (max-width:1199px) {
	.co-srp {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:991px) {
	.co-srp {
		grid-template-columns: 1fr
	}

	.co-srp-list {
		border-right: none;
		padding-bottom: 76px
	}

	.co-srp-map-col {
		display: none;
		position: static;
		height: auto;
		border-top: none
	}

	body.map-open .co-srp-map-col {
		display: block
	}

	.co-srp-bar {
		padding: 10px 16px;
		gap: 12px
	}

	.co-srp-fab {
		display: inline-flex
	}

	#srpMapToggle {
		display: none
	}

	.co-srp-legend {
		bottom: 78px;
		padding: 9px 12px
	}

	.co-srp-legend .legend-row {
		font-size: 11px
	}
}

@media (max-width:559px) {
	.co-srp-bar {
		gap: 9px;
		padding: 9px 14px
	}

	.co-srp-frame {
		flex: 1 1 100%;
		padding: 4px;
		gap: 5px
	}

	.co-srp-frame .co-srp-field {
		flex: 1 1 120px;
		padding: 9px 10px
	}

	.co-srp-go {
		padding: 10px 14px;
		font-size: 13px
	}

	.co-srp-go span {
		display: none
	}

	.co-srp-adv {
		width: 38px
	}

	.co-srp-types {
		flex: 1 1 100%;
		gap: 12px;
		justify-content: space-between
	}

	.co-srp-types .btn-outline-success {
		font-size: 12px;
		padding: .375rem .5rem
	}

	.co-srp-types .btn-outline-success i {
		display: none
	}

	.co-srp-count {
		padding: 8px 14px 0;
		font-size: 18px
	}

	.co-srp-countrow {
		padding: 0 14px
	}

	.co-srp-countrow .co-srp-count {
		padding: 8px 0 0
	}

	/* Larghezza stretta (lista accanto alla mappa, o mobile): l'etichetta "Ordina per"
	   pesa troppo, si tiene solo l'icona e si restringe il <select> - il bottone icona
	   mobile (.co-srp-sortbtn) e' gia' compatto di suo, nessun ritocco extra. */
	.co-srp-countrow .co-srp-sort-label {
		display: none
	}

	.co-srp-countrow .co-srp-sort select {
		max-width: 120px;
		font-size: 12px
	}

	.tool {
		padding: 8px 12px;
		font-size: 12px
	}

	.co-srp-sortbtn {
		padding: 0 10px;
		font-size: 12px
	}

	.co-srp-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px 12px;
		padding: 2px 14px 20px
	}

	.co-srp-grid.rows {
		grid-template-columns: 1fr;
		padding: 0 14px 18px
	}

	.co-srp-grid.rows .co-srp-card {
		grid-template-columns: 92px 1fr
	}

	.co-srp-grid.rows .co-srp-card .shot {
		min-height: 100px
	}

	.co-srp-grid.rows .co-srp-card .titlebar {
		padding: 7px 12px
	}

	.co-srp-grid.rows .co-srp-card h3 {
		margin: 0;
		font-size: 14px
	}

	.co-srp-grid.rows .co-srp-card .body {
		padding: 10px 12px
	}

	/* Sotto i 559px la thumbnail scende a 92px e il corpo si restringe di conseguenza:
		niente spazio per il layout a due colonne (contenuto + bottone a tutta altezza)
		delle card evidenza, tornano a impilarsi come le altre. Il ribbon voto resta
		affiancato al titolo (c'e' spazio a sufficienza anche qui). */
	.co-srp-grid.rows .co-srp-card.premiumArea .body {
		display: block
	}

	.co-srp-grid.rows .co-srp-card.premiumArea .loc,
	.co-srp-grid.rows .co-srp-card.premiumArea .rowmeta {
		margin-bottom: 8px
	}

	.co-srp-grid.rows .co-srp-card.premiumArea .avail {
		display: inline-flex;
		align-self: auto;
		min-height: auto;
		padding: 8px 16px
	}

	.co-srp-grid.rows .co-srp-card.premiumArea .titlebar h3 {
		padding: 6px 10px;
		font-size: 15px
	}

	.co-srp-grid.rows .co-srp-card.premiumArea .rate-ribbon {
		padding: 0 10px 0 20px;
		font-size: 12px;
		gap: 6px;
		clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%)
	}

	.co-srp-card h3 {
		font-size: 14px;
		margin-top: 10px
	}

	.co-srp-card .loc {
		font-size: 12px;
		margin-bottom: 6px
	}

	.co-srp-card .kind {
		font-size: 8.5px;
		padding: 3px 7px;
		gap: 4px
	}

	.co-srp-card .kind svg {
		width: 11px;
		height: 11px
	}

	.co-srp-card .shots-n {
		font-size: 8.5px;
		padding: 3px 5px
	}

	/* Stessa etichetta "pillola" di .kind/.shots-n qui sopra (badge scuro/verde sulla
	   card): stesso trattamento desktop 10px/mobile 8.5px, qui pero' senza override
	   desktop gia' esistente da toccare (il valore base in ricerca-aree-sosta.css e'
	   gia' 10px). */
	.co-srp-card .avail {
		font-size: 8.5px;
		padding: 3px 5px
	}

	.co-srp-empty {
		margin: 6px 14px 24px
	}

	.co-srp-maptop {
		font-size: 11.5px;
		padding: 8px 12px
	}
}

@media (max-width:389px) {
	.co-srp-grid {
		grid-template-columns: 1fr
	}
}

@media (prefers-reduced-motion:reduce) {

	.co-srp *,
	.co-srp-fab {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important
	}
}