/*
 * 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);
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased
}

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
}

.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, che la
		eredita da align-self:stretch sulla riga .co-srp-frame): senza un min-height
		esplicito qui, .co-srp-go resta centrato alla propria altezza intrinseca e
		puo' risultare piu' basso del bottone filtri quando quest'ultimo si stira
		su una riga piu' alta (es. .co-srp-field che va a capo). */
	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
	}

	.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: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 11.5px;
	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: 10px;
	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: 9.5px;
	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: 11.5px;
	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
}

/* .co-pop (sotto) e' il contenuto dell'InfoWindow di Google Maps (renderMarkers() in
   mappa.php) - l'involucro dell'InfoWindow stesso e' quello di default dell'API,
   nessuno stile scoped qui (era diverso quando la mappa era Leaflet: vedi git log per
   .leaflet-popup-content-wrapper/.leaflet-popup-content, rimossi con Leaflet). I
   marker "classici" (google.maps.Marker) non hanno piu' un elemento DOM
   interrogabile via CSS come il vecchio .co-pin-marker/.co-pin di Leaflet: l'hover
   (highlight() in mappa.php) ricalcola direttamente l'icona invece di alternare una
   classe CSS. */
.co-pop {
	display: block;
	color: inherit;
	text-decoration: none;
	/* Larghezza fissa (non solo l'immagine): senza, l'InfoWindow di Google Maps si
	   dimensiona sul contenuto - un titolo lungo o l'immagine stessa (item.immaginePopup,
	   320px) potevano renderlo piu' grande del thumb di una card in lista e diverso da
	   popup a popup. ~= la larghezza minima di una card in .co-srp-grid
	   (minmax(224px, 1fr)), cosi' il popup non supera mai quella dimensione. */
	width: 220px
}

.co-pop img {
	width: 100%;
	/* Stesso aspect-ratio di .co-srp-card .shot: "immagine" e' lo stesso thumb 800x600
	   (galleryTimThumb() in ricercaMappaSerializzaRisultato()/renderCardHtml(), gia'
	   4:3) usato dalla card - un'altezza fissa scollegata da quella proporzione
	   ritagliava il thumb in modo incoerente con com'e' stato generato. */
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	border-radius: 10px 10px 0 0
}

.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 .l {
	font-size: 12px;
	color: var(--verde-col);
	font-weight: 600;
	margin-bottom: 7px
}

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

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

.co-pop .b .p {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 800;
	color: var(--ink)
}

/* 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: 11px;
		padding: 3px 7px
	}

	.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
	}
}