/* ============================================================
   TripsBack — Pagina risultati ricerca (design "Executive")
   Costruita sui token --tb-* di executive.css: qui NON si ridefiniscono
   i token, si compongono solo i pezzi specifici della pagina.
   Il gate prezzi (visibile/lucchetto) è deciso lato server: la CSS
   stilizza soltanto ciò che il PHP ha già scelto di stampare.
   ============================================================ */

.page-search {
    --sr-filter-h: 61px;
    --sr-sticky-top: calc(var(--tb-header-h) + var(--sr-filter-h) + 16px);
    /* Il margine laterale della pagina. Cresce col monitor ma si ferma: oltre i
       40px non e' piu' respiro, e' spreco di colonne. */
    --sr-gutter: clamp(16px, 2.2vw, 40px);
    background: var(--tb-bg);
}

/* La pagina risultati NON sta dentro i 1200px del resto del sito.
   Su un 1920 quel cappio lasciava 360px di bianco per lato e costringeva la lista
   a una scheda per riga con la mappa in una feritoia da 440: tre informazioni per
   schermata. Qui la larghezza e' quella del monitor, e la griglia decide da sola
   quante schede ci stanno. Il cappio resta ovunque altrove (home, checkout, area
   personale): li' il contenuto e' testo, e una riga di testo lunga 1900px non si
   legge. */
.page-search .tb-header-inner,
.page-search .sr-filterbar-inner,
.page-search .sr-shell {
    max-width: none;
    padding-inline: var(--sr-gutter);
}

.sr-main {
    padding-bottom: 56px;
}

/* --- Barra filtri + ordinamento --------------------------------------- */
.sr-filterbar {
    position: sticky;
    top: var(--tb-header-h);
    z-index: 80;
    background: color-mix(in srgb, var(--tb-bg) 95%, transparent);
    -webkit-backdrop-filter: saturate(1.3) blur(8px);
    backdrop-filter: saturate(1.3) blur(8px);
    border-bottom: 1px solid var(--tb-line);
}
.sr-filterbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--sr-filter-h);
    padding-block: 11px;
}
.sr-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
}
.sr-chips::-webkit-scrollbar { height: 5px; }
.sr-chips::-webkit-scrollbar-thumb { background: var(--tb-line); border-radius: 999px; }
.sr-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    cursor: pointer;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    color: var(--tb-ink);
    font: inherit;
    font-weight: 600;
    font-size: var(--tb-fs-sm);
    padding: 9px 14px;
    border-radius: var(--tb-r-btn);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.sr-chip svg { width: 15px; height: 15px; color: var(--tb-ink-soft); }
.sr-chip:hover { border-color: #B9C2D6; background: var(--tb-panel); }
.sr-chip[aria-pressed="true"] { background: var(--tb-ink-fill); color: #fff; border-color: var(--tb-ink-fill); }
.sr-chip[aria-pressed="true"] svg { color: #fff; }
.sr-chip-locked { color: var(--tb-ink-soft); background: var(--tb-panel); }
.sr-chip-locked svg { color: var(--tb-ink-soft); }

.sr-sort {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tb-fs-sm);
    color: var(--tb-ink-soft);
    font-weight: 600;
}
.sr-sort label { white-space: nowrap; }
.sr-sort select {
    font: inherit;
    font-weight: 600;
    font-size: var(--tb-fs-sm);
    color: var(--tb-ink);
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-btn);
    padding: 9px 30px 9px 12px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566079' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.sr-sort select:hover { border-color: #B9C2D6; }
/* Il select fa submit da solo (onchange in search.js): il bottone e' solo
   fallback per no-JS. Selettore piu' specifico di .tb-btn per nasconderlo. */
.sr-sort .sr-sort-go { display: none; }

.sr-mobile-controls { display: none; }

/* --- Shell / stati vuoti ---------------------------------------------- */
.sr-shell { padding-top: 20px; }

.sr-gate { margin-bottom: 4px; }
.sr-gate-ic {
    width: 38px; height: 38px; flex: none;
    border-radius: 10px;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    display: grid; place-items: center;
}
.sr-gate-ic svg { width: 19px; height: 19px; color: var(--tb-blue-ink); }

.sr-empty {
    text-align: center;
    max-width: 46ch;
    margin: 48px auto;
    color: var(--tb-ink-soft);
}
.sr-empty h2 { color: var(--tb-ink); margin-bottom: 8px; }
.sr-empty p { font-size: var(--tb-fs-sm); }

/* --- Testata risultati ------------------------------------------------- */
.sr-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0 6px;
}
.sr-head h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; margin: 0; }
.sr-head-sub { color: var(--tb-ink-soft); font-size: var(--tb-fs-sm); margin: 5px 0 0; }
.sr-cashhint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tb-emerald-soft);
    color: var(--tb-emerald-ink);
    border: 1px solid color-mix(in srgb, var(--tb-emerald) 22%, transparent);
    border-radius: var(--tb-r-pill);
    padding: 7px 14px;
    font-size: var(--tb-fs-sm);
    font-weight: 700;
}
.sr-cashhint svg { width: 15px; height: 15px; }

/* --- Layout split ------------------------------------------------------ */
.sr-layout {
    display: grid;
    /* La mappa e' una FRAZIONE dello schermo, non 440px fissi: su un 1920 quei
       440 erano il 23%, e una mappa cosi' stretta mostra due quartieri.
       42% e non 34%: la lista deve restare larga abbastanza per DUE schede da
       ~490px, non tre da 370. Con la mappa piu' stretta le due schede
       diventavano larghe 570 e la foto un manifesto. */
    /* Il tetto e' 1400 e non 900. Il 42% E' l'intenzione; il tetto serve solo a
       non fare una mappa assurda. Ma a 900 il rapporto si rompeva presto — da
       2143px in su la mappa restava ferma e TUTTO il resto dello schermo finiva
       nella lista, che su un 4K arrivava a 2850px per due schede. A 1400 il 42%
       vale fino a un 3333, e sopra la mappa e' comunque un terzo abbondante. */
    grid-template-columns: minmax(0, 1fr) clamp(380px, 42vw, 1400px);
    gap: 24px;
    align-items: start;
    padding: 16px 0 8px;
}
/* Mappa allargata (bottone sulla mappa): la lista si stringe a una colonna sola e
   resta leggibile, invece di sparire come farebbe una mappa a tutto schermo. */
.sr-layout.is-map-wide {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}

/* DUE schede per riga, dichiarate — non `auto-fill` con una larghezza minima.
   Con auto-fill il numero di colonne dipendeva dalla larghezza della finestra:
   su un 1920 venivano tre schede da 370px, dense ma piccole, e la stessa regola
   che ne faceva tre qui ne faceva due la' senza che nessuno l'avesse deciso.
   Due e' una scelta di prodotto: la fotografia della camera e' l'unica cosa che
   distingue un albergo dall'altro a colpo d'occhio, e a 370px non la si guarda.
   La larghezza della scheda la fa lo schermo (1fr), il numero no. */
.sr-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
    align-content: start;
    min-width: 0;
}
/* Con la mappa allargata la colonna lista sta sotto i 400px: due schede li'
   dentro sarebbero due francobolli. */
.sr-layout.is-map-wide .sr-list { grid-template-columns: minmax(0, 1fr); }

/* --- E TRE, E QUATTRO. Gli schermi molto grandi. ------------------------
   Due schede restano la scelta giusta finche' una scheda ci sta in una misura
   che si guarda. Non lo sono piu' quando lo schermo e' un 4K: li' due schede
   erano larghe 1400px l'una — una fotografia grande come un manifesto, e mezza
   pagina per due alberghi.

   Il numero resta DICHIARATO, non dedotto da un auto-fill: e' la stessa ragione
   scritta qui sopra, e vale ancora. Cambia solo che adesso i gradini sono tre
   invece di uno, e le soglie sono state scelte MISURANDO la larghezza che
   ciascuna scheda assume di la' e di qua dal salto.

   La banda tenuta e' 360-580px. Piu' stretta non si puo': saltare da N a N+1
   colonne taglia la scheda di un terzo, quindi fra due gradini ci deve stare
   almeno un fattore 1,5 o la scheda rimpicciolirebbe sotto il minimo appena
   passato il salto. Misurate: 2 colonne 362 -> 575, 3 colonne 376 -> 569,
   4 colonne 421 -> 567.

   Sono query sul VIEWPORT e non sul contenitore perche' qui si puo': la colonna
   della lista e' una funzione nota della finestra (viewport - margini - gap -
   mappa) e la mappa e' l'unico altro pezzo. Lo stato "mappa allargata" ha la sua
   regola, piu' specifica, e continua a vincere su queste. */
@media (min-width: 2200px) {
    .sr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 3200px) {
    .sr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Card hotel --------------------------------------------------------
   Verticale: foto sopra, testo sotto. La card non ha piu' cornice ne' fondo —
   la foto E' la card, e il bordo attorno a tre schede per riga faceva una
   gabbia. Lo stato "selezionata" non puo' piu' essere il bordo: e' un anello
   sulla foto (vedi .is-active). */
.sr-card {
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    transition: transform .16s ease-out;
}
.sr-card:hover, .sr-card:focus-visible { outline: none; }
.sr-card:hover .sr-media, .sr-card:focus-visible .sr-media { box-shadow: var(--tb-shadow); }
.sr-card:hover .sr-media img { transform: scale(1.04); }
.sr-card.is-active .sr-media { box-shadow: 0 0 0 3px var(--tb-blue); }

.sr-media {
    position: relative;
    /* 4:3 e non 16:9: una camera d'albergo e' alta, e in panoramica si vede il
       soffitto e meta' letto. */
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-radius: var(--tb-r-card);
    overflow: hidden;
    background: var(--tb-panel);
    transition: box-shadow .16s ease-out;
}
.sr-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s var(--tb-ease);
}
.sr-cash {
    position: absolute;
    left: 10px; bottom: 10px; z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* emerald-fill: bianco su --tb-emerald sta a 3.42:1, sotto 4.5:1. Qui 5.07:1.
       Sul tema scuro la pillola si accende e il testo sopra diventa scuro: la
       coppia viaggia insieme in due token, o uno dei due temi la rompe. */
    background: var(--tb-emerald-fill);
    color: var(--tb-emerald-fill-ink);
    font-weight: 700;
    font-size: var(--tb-fs-xs);
    padding: 5px 10px;
    border-radius: var(--tb-r-pill);
    box-shadow: 0 4px 12px rgb(14 158 110 / 35%);
}
.sr-cash svg { width: 13px; height: 13px; }

.sr-body {
    /* Niente padding laterale: il testo si allinea al bordo della foto, come in
       ogni griglia di schede senza cornice. */
    padding: 12px 2px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.sr-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.sr-name { min-width: 0; }
.sr-name h2 { font-size: var(--tb-fs-md); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.sr-zone { font-size: var(--tb-fs-sm); color: var(--tb-ink-soft); margin-top: 2px; }
/* Il perche' del colore sta su --tb-star (executive.css). Qui basta sapere che e'
   l'unico posto in cui si legge la categoria: la pillola sulla foto dice
   "Comfort", non "3 stelle". */
.sr-stars { color: var(--tb-star); font-weight: 700; margin-left: 6px; letter-spacing: 1px; }
/* Sulla foto, in alto a destra: nella card verticale accanto al nome rubava
   meta' riga al titolo dell'hotel. Il fondo scuro semitrasparente regge sia una
   camera bianca sia una notturna, che un fondo pieno non farebbe. */
.sr-class {
    position: absolute;
    top: 10px; right: 10px; z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 10px;
    background: rgb(14 26 51 / 78%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    border-radius: var(--tb-r-pill);
    font-size: var(--tb-fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.sr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.sr-tags .tb-tag {
    border: 1px solid var(--tb-line);
    font-weight: 600;
}

/* Impilato, non affiancato: la card e' larga ~280px, e "Cancellazione flessibile"
   accanto a prezzo + bottone non ci sta in nessuna delle due lingue. E' la stessa
   forma che il telefono aveva gia': adesso e' la forma di base, e la media query
   stretta non deve piu' rigirarla. */
.sr-foot {
    margin-top: auto;
    padding-top: 11px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}
.sr-policy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tb-fs-xs);
    font-weight: 600;
    color: var(--tb-emerald-ink);
}
.sr-policy.is-strict { color: var(--tb-ink-soft); }
.sr-policy svg { width: 14px; height: 14px; flex: none; }
.sr-policy span { white-space: nowrap; }

/* Prezzo a sinistra, azione a destra, sulla stessa riga. `align-items: center`
   allinea la base del numero al centro del bottone: allineati in fondo, il
   "a notte" sotto il prezzo spingeva il bottone piu' in basso della riga e la
   scheda cresceva di dieci pixel per niente. */
.sr-priceblock {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    text-align: left;
}
/* Blocco, non flex-wrap. La riga verde del cashback deve stare SOPRA il prezzo,
   e la si otteneva con `flex-basis: 100%` su un figlio: una percentuale dentro
   un contenitore di larghezza indefinita, che Chrome risolveva gonfiando
   .sr-price a 240px contro 145px di testo. Con 240 + il bottone non ci si
   stava piu', e "Vedi disponibilita'" andava a capo da solo in ogni scheda.
   Un <div> dentro un blocco fa la stessa cosa senza chiedere niente a nessuno:
   va a capo perche' e' un blocco, e la larghezza resta quella del testo. */
.sr-price { display: block; min-width: 0; }
.sr-price .tb-price { line-height: 1.1; }
/* Il margine non e' decorativo: in flex lo spazio fra prezzo e "a notte" lo
   dava il `gap`, in flusso inline lo darebbe il ritorno a capo del sorgente —
   e basta un partial riformattato per ritrovarsi "€ 118a notte". */
.sr-price .tb-price + small,
.sr-price small { font-size: var(--tb-fs-xs); color: var(--tb-ink-soft); font-weight: 500; margin-left: 5px; }
.sr-cta { flex: none; padding: 10px 14px; }

/* Prezzo bloccato (anonimo): cifre finte a sinistra, "Accedi per vedere" sotto.
   Le cifre mostrate sono un segnaposto inerte ("000"), mai il prezzo reale:
   la sfocatura di executive.css le rende una forma di prezzo, non un numero.

   Riga intera, e il bottone sotto a tutta larghezza: "Accedi per vedere il
   prezzo" e' lungo quanto una riga da solo, e affiancato al "Vedi
   disponibilita'" in una scheda da 300px i due testi si sovrapponevano —
   letteralmente uno sopra l'altro, con il bottone che copriva il link. Il
   `+` fa il lavoro senza `:has()`: il bottone e' il fratello subito dopo. */
.sr-price.tb-price-locked { flex: 1 0 100%; flex-direction: row; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
/* A capo si', a tutta larghezza no: una barra piena da bordo a bordo, moltiplicata
   per le schede a schermo, faceva piu' rumore delle fotografie. */
.sr-price.tb-price-locked + .sr-cta { flex: 0 0 auto; margin-left: auto; }
.sr-price.tb-price-locked .tb-price-blur { font-size: var(--tb-fs-lg); flex-wrap: nowrap; }
.sr-price.tb-price-locked .tb-price-blur .tb-blur { white-space: nowrap; }
.sr-price.tb-price-locked .tb-price-blur small { letter-spacing: normal; margin-left: 4px; white-space: nowrap; }
.sr-price.tb-price-locked .tb-price-cta { white-space: nowrap; flex-basis: 100%; }
.sr-price.tb-price-locked .tb-price-cta { display: inline-flex; align-items: center; gap: 5px; }
.sr-price.tb-price-locked .tb-lock { width: 13px; height: 13px; }

/* Il bottone della scheda si accende solo quando lo si punta. Fermo e' un
   bottone chiaro come tutti gli altri: in griglia sono dieci per schermata, e
   dieci rettangoli blu pieni sono un fondale, non dieci richiami. */
.sr-cta:hover, .sr-cta:focus-visible {
    background: var(--tb-blue);
    border-color: var(--tb-blue);
    color: #fff;
}
/* La scheda intera e' un bersaglio: passandoci sopra il bottone si fa vedere,
   senza aspettare che il cursore lo trovi. */
.sr-card:hover .sr-cta { border-color: #B9C2D6; }

/* --- Colonna mappa ----------------------------------------------------- */
.sr-map-col {
    /* IN RIGA 1, E PER TUTTE LE RIGHE. Senza queste due righe la mappa spariva
       da meta' agosto: .sr-more ha grid-column 1, quindi apre una riga 2, e il
       cursore dell'auto-placement resta li' dentro. La colonna mappa, che non
       chiedeva ne' riga ne' colonna, veniva piazzata nella PRIMA cella libera
       dopo il cursore — riga 2, colonna 2 — cioe' accanto al bottone "mostra
       altri", 6.300px sotto l'inizio della lista. Era in pagina, con le sue
       tile e i suoi pin, semplicemente in fondo: nessun errore in console.
       Lo span fino a -1 non e' cosmetico: e' il contenitore entro cui lo
       sticky puo' scorrere, e senza arriverebbe solo a fine lista. */
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: var(--sr-sticky-top);
    height: calc(100vh - var(--sr-sticky-top) - 16px);
    min-height: 480px;
    border-radius: var(--tb-r-card);
    overflow: hidden;
    border: 1px solid var(--tb-line);
    box-shadow: var(--tb-shadow);
}
.sr-map { width: 100%; height: 100%; background: var(--tb-panel); }

/* I controlli di Leaflet sono grigi anni Duemila: qui prendono il linguaggio
   della pagina (stessi raggi, stessa ombra, stesso inchiostro). */
.sr-map .leaflet-control-zoom {
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-btn);
    overflow: hidden;
    box-shadow: var(--tb-shadow);
}
.sr-map .leaflet-control-zoom a {
    width: 34px; height: 34px; line-height: 32px;
    background: var(--tb-bg);
    color: var(--tb-ink);
    border-bottom-color: var(--tb-line);
    font-weight: 600;
}
.sr-map .leaflet-control-zoom a:hover { background: var(--tb-panel); color: var(--tb-ink); }
.sr-map .leaflet-bar a.leaflet-disabled { background: var(--tb-panel); color: var(--tb-ink-soft); }
/* Va detta, non gridata: e' un obbligo di licenza, non un contenuto. */
.sr-map .leaflet-control-attribution {
    background: color-mix(in srgb, var(--tb-bg) 82%, transparent);
    color: var(--tb-ink-soft);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 6px 0 0 0;
}
.sr-map .leaflet-control-attribution a { color: var(--tb-ink-soft); }

/* Allarga/riduce la mappa. In alto a SINISTRA: gli zoom stanno a destra, e in
   basso il bottone sarebbe fuori schermo finche' non si scorre — la colonna e'
   alta quanto la finestra ma comincia sotto la testata, quindi il suo fondo
   all'apertura della pagina non si vede. */
.sr-map-expand {
    position: absolute;
    z-index: 500;
    left: 12px; top: 12px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-btn);
    box-shadow: var(--tb-shadow);
    color: var(--tb-ink);
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s;
}
.sr-map-expand:hover { background: var(--tb-panel); border-color: #B9C2D6; }
.sr-map-expand svg { width: 17px; height: 17px; grid-area: 1 / 1; }

/* --- Ricerca sulla zona inquadrata -------------------------------------
   In alto al CENTRO: gli angoli sono gia' presi (allarga a sinistra, zoom a
   destra), e questi due comandi parlano della mappa intera, non di un angolo. */
.sr-map-tools {
    position: absolute;
    z-index: 500;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: calc(100% - 130px);   /* non arriva sotto i bottoni degli angoli */
    pointer-events: none;            /* il vuoto fra i due comandi resta mappa */
}
.sr-map-tools > * { pointer-events: auto; }

.sr-area-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tb-ink-fill);
    color: #fff;
    border: 0;
    border-radius: var(--tb-r-pill);
    padding: 10px 17px;
    font: inherit;
    font-weight: 700;
    font-size: var(--tb-fs-sm);
    cursor: pointer;
    box-shadow: 0 6px 18px rgb(14 26 51 / 32%);
    white-space: nowrap;
    animation: sr-area-in 200ms var(--tb-ease) both;
}
.sr-area-btn:hover { background: #0B1730; }
.sr-area-btn svg { width: 15px; height: 15px; }
@keyframes sr-area-in { from { opacity: 0; transform: translateY(-6px); } }

.sr-area-auto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-pill);
    padding: 7px 13px 7px 11px;
    font-size: var(--tb-fs-xs);
    font-weight: 600;
    color: var(--tb-ink);
    cursor: pointer;
    box-shadow: var(--tb-shadow);
    white-space: nowrap;
    /* Il testo puo' essere lungo ("Cerca mentre muovo la mappa"): su mappa
       stretta si accorcia con i puntini invece di allargare la pillola oltre
       il bordo. */
    max-width: 100%;
    overflow: hidden;
}
.sr-area-auto span { overflow: hidden; text-overflow: ellipsis; }
.sr-area-auto input { accent-color: var(--tb-blue); width: 15px; height: 15px; flex: none; cursor: pointer; }

/* Zona senza hotel: il messaggio sta nella LISTA, non al posto della pagina.
   Lo stato pieno-schermo nasconde anche la mappa, e senza mappa non c'e' piu'
   il comando con cui spostarsi in una zona che gli hotel ce li ha. */
.sr-zona-vuota { grid-column: 1 / -1; margin: 24px 0; }
@media (prefers-reduced-motion: reduce) {
    .sr-area-btn { animation: none; }
}
.sr-map-expand .sr-ic-shrink,
.sr-map-expand[aria-pressed="true"] .sr-ic-expand { display: none; }
.sr-map-expand[aria-pressed="true"] .sr-ic-shrink { display: block; }
.sr-map-fallback {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; text-align: center; padding: 24px;
    color: var(--tb-ink-soft);
}
.leaflet-container .sr-map-fallback { display: none; }
.sr-map-close { display: none; }

/* --- Pin mappa (composti sui token) ----------------------------------- */
/* L'AREA SENSIBILE E' LA PILLOLA, NON IL PUNTO.
   Leaflet crea il divIcon con iconSize [1,1]: il contenitore e' un quadratino di
   UN PIXEL, e la pillola che si vede e' il figlio, che ne esce fuori con un
   translate(-50%,-50%). Con `pointer-events: none` su tutti i figli l'unica cosa
   cliccabile restava quel pixel: il cursore doveva centrare il punto esatto
   dell'hotel per accendere il segnaposto, e passare sopra l'etichetta col prezzo
   — cioe' sopra l'unica cosa visibile — non faceva niente.
   Invertito: il contenitore non intercetta (e' un pixel, non deve), la pillola
   si'. Gli eventi risalgono comunque al contenitore, dove Leaflet li ascolta,
   perche' `pointer-events: none` impedisce di essere il bersaglio, non il
   passaggio di un evento partito da un discendente. */
.sr-marker { background: transparent; border: 0; pointer-events: none; }
.leaflet-marker-icon.sr-marker .sr-pin,
.leaflet-marker-icon.sr-marker .sr-cluster { pointer-events: auto; }
/* L'<svg> del lucchetto invece resta trasparente ai clic: e' dentro la pillola,
   e un bersaglio dentro il bersaglio serve solo a far rimbalzare mouseout. */
.leaflet-marker-icon.sr-marker svg { pointer-events: none; }
/* Chiari di default, accesi solo dove serve.
   Con quaranta pillole blu piene la mappa diventava un cartellone: il colore
   piu' forte dello schermo ripetuto quaranta volte non indica piu' niente, e
   il pin che l'utente sta guardando non si distingueva dagli altri trentanove.
   Adesso la gerarchia e': bianco (c'e' un hotel) -> inchiostro (ci passo sopra)
   -> blu (e' quello selezionato). Il fondo chiaro regge anche sopra i parchi
   verdi e l'acqua, dove il blu spariva.
   L'ordine delle tre regole conta: .is-lock ha la stessa specificita' di
   .is-active, quindi deve stare PRIMA o un pin col lucchetto non si
   accenderebbe mai quando lo selezioni. */
.sr-pin {
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-bg);
    color: var(--tb-ink);
    font-weight: 700;
    font-size: var(--tb-fs-xs);
    padding: 6px 11px;
    border-radius: var(--tb-r-pill);
    border: 1px solid rgb(15 40 70 / 20%);
    box-shadow: 0 2px 8px rgb(14 26 51 / 22%);
    white-space: nowrap;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: transform .15s ease-out, background .15s ease-out, color .15s ease-out;
}
.sr-pin.is-lock { padding: 7px 9px; }
.sr-pin:hover, .sr-pin.is-hover {
    background: var(--tb-ink-fill); color: #fff; border-color: var(--tb-ink-fill);
    transform: translate(-50%, -50%) scale(1.08); z-index: 2;
}
.sr-pin.is-active {
    background: var(--tb-blue); color: #fff; border-color: #fff;
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow: 0 0 0 2px var(--tb-blue), 0 6px 16px rgb(36 85 255 / 45%);
    z-index: 3;
}
/* flex:none obbligatorio: il wrapper Leaflet del divIcon è largo 1px, quindi
   un <svg> senza width intrinseca (min-width:auto -> 0) verrebbe schiacciato.
   currentColor e non #fff: il lucchetto deve seguire i tre stati del pin. */
.sr-pin.is-lock svg { width: 14px; height: 14px; color: currentColor; display: block; flex: none; }

.sr-cluster {
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--tb-r-pill);
    border: 1px solid rgb(15 40 70 / 45%);
    background: var(--tb-bg);
    color: var(--tb-ink);
    font-size: var(--tb-fs-xs);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--tb-shadow);
}
.sr-cluster svg { width: 13px; height: 13px; color: var(--tb-ink-soft); flex: none; }

.leaflet-tooltip.sr-tip {
    background: var(--tb-ink-fill);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: var(--tb-fs-xs);
    padding: 5px 9px;
    border-radius: 7px;
    box-shadow: var(--tb-shadow);
}
.leaflet-tooltip.sr-tip::before { border-top-color: var(--tb-ink); }

/* --- Popup mappa ------------------------------------------------------- */
.leaflet-popup.sr-popup .leaflet-popup-content-wrapper {
    padding: 0; border-radius: var(--tb-r-card); overflow: hidden;
    border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow);
}
.leaflet-popup.sr-popup .leaflet-popup-content { margin: 0; width: 260px !important; }
.sr-pop { background: var(--tb-bg); }
.sr-pop-media { height: 108px; background: var(--tb-panel); }
.sr-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-pop-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sr-pop-title { margin: 0; font-size: var(--tb-fs-md); font-weight: 700; color: var(--tb-ink); }
.sr-pop-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.sr-pop-price { font-size: var(--tb-fs-lg); font-weight: 800; color: var(--tb-ink); }
.sr-pop-price small { font-size: var(--tb-fs-xs); font-weight: 500; color: var(--tb-ink-soft); }
/* Da anonimo l'etichetta e' una frase ("Accedi per vedere il prezzo"), non un
   numero: in 260px accanto al bottone andava a capo e spingeva il bottone fuori
   dal fumetto, mezzo tagliato dal bordo. Riga sua, bottone sotto a tutta
   larghezza — come nella scheda, per la stessa ragione. */
.sr-pop-lock { display: inline-flex; align-items: center; gap: 5px; font-size: var(--tb-fs-xs); font-weight: 700; color: var(--tb-blue-ink); flex: 1 0 100%; }
.sr-pop-lock svg { width: 13px; height: 13px; flex: none; }
.sr-pop-lock + .sr-pop-cta { flex: 1 0 100%; justify-content: center; }
/* `.leaflet-container a` e non `.sr-pop-cta`: il foglio di Leaflet colora OGNI
   link dentro la mappa di #0078A8, e con due classi batteva la nostra singola.
   Risultato: il bottone del fumetto aveva scritte azzurre su fondo blu — 1,6:1,
   cioe' illeggibile, sull'unica azione che il fumetto offre. */
.sr-pop-cta,
.leaflet-container a.sr-pop-cta {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 13px; border-radius: var(--tb-r-btn);
    background: var(--tb-blue); color: #fff;
    font-size: var(--tb-fs-xs); font-weight: 600; text-decoration: none;
}
.leaflet-container a.sr-pop-cta:hover { background: var(--tb-blue-deep); color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
/* Sotto i 1000px la mappa affiancata non ha piu' senso: due schede da 250px
   accanto a una mappa da 380 non sono due viste, sono due cose strette. Da qui
   in giu' la lista prende tutta la larghezza e la mappa diventa un pannello a
   tutto schermo, aperto dal bottone. La soglia era 820: fra 820 e 1000 restava
   una fascia in cui la pagina era gia' stretta ma faceva ancora finta di no. */
@media (max-width: 1000px) {
    /* header cresce (barra ricerca su riga propria): sticky non affidabile.
       Il top della mappa si ridefinisce QUI e non con un `top:` a parte, perche'
       l'altezza della colonna e' calcolata sulla stessa variabile: cambiarne solo
       una lasciava la mappa alta come se la barra filtri fosse ancora appiccicata. */
    .page-search { --sr-sticky-top: 12px; }
    .sr-filterbar { position: static; }

    .sr-layout,
    .sr-layout.is-map-wide { grid-template-columns: 1fr; }
    .sr-layout.is-map-wide .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sr-map-col {
        /* Qui la griglia ha una colonna sola: il posto in riga 1 / colonna 2
           non va chiesto, o si aprirebbe una colonna che non esiste. */
        grid-column: auto; grid-row: auto;
        position: fixed; inset: 0; top: 0; z-index: 2000;
        height: 100%; border-radius: 0; border: none; box-shadow: none; display: none;
    }
    /* A tutto schermo non c'e' niente da allargare: il bottone farebbe una
       promessa che la pagina non puo' mantenere. */
    .sr-map-expand { display: none; }
    body.sr-map-open { overflow: hidden; }
    body.sr-map-open .sr-map-col { display: block; }
    .sr-map-close {
        display: inline-flex; align-items: center; gap: 7px;
        position: absolute; z-index: 2100; top: 14px; right: 14px;
        background: var(--tb-bg); border: 1px solid var(--tb-line);
        border-radius: var(--tb-r-btn); padding: 10px 15px;
        font: inherit; font-weight: 700; font-size: var(--tb-fs-sm); cursor: pointer;
        box-shadow: var(--tb-shadow); color: var(--tb-ink);
    }
    .sr-map-close svg { width: 16px; height: 16px; }

    /* Serve il bottone che apre la mappa. Il bottone "Filtri" no: fin qui i chip
       e l'ordinamento ci stanno ancora in barra, e due modi di aprire la stessa
       cosa nella stessa schermata sono uno di troppo. */
    .sr-mobile-controls { display: flex; align-items: center; gap: 10px; }
    .sr-mobile-controls .js-filters-toggle { display: none; }
}

@media (max-width: 820px) {
    .sr-chips, .sr-sort { display: none; }
    .sr-mobile-controls { width: 100%; }
    .sr-mobile-controls .js-filters-toggle { display: inline-flex; }
    .sr-mobile-controls .tb-btn { flex: 1; }
    /* Filtri rivelabili su mobile via bottone (contenitore visibile) */
    .sr-filterbar.filters-open .sr-chips {
        display: flex; flex-wrap: wrap; width: 100%; order: 3; padding-top: 10px;
    }
    .sr-filterbar.filters-open .sr-sort {
        display: flex; order: 4; padding-top: 6px;
        /* A CAPO, e larga tutta. In una riga sola la barra misurava 538px dentro
           un telefono da 390: sfondava di 164, e siccome body ha overflow-x
           hidden non si sarebbe visto — si perdeva in silenzio. Se n'e' accorto
           solo il righello. La causa e' la select stilizzata, che ha un minimo di
           232px per non mandare a capo "Cashback: dal piu' alto": un minimo
           giusto su uno schermo largo e impossibile qui. */
        flex-wrap: wrap; width: 100%;
    }
    .sr-sort .select2-container { width: 100% !important; min-width: 0; }
    .sr-sort label[for="srSort"] { flex: none; }
    .sr-filterbar-inner { flex-wrap: wrap; }
}

/* --- La lista sul telefono: densa, perche' si sta sbrigando ----------------
   Ventiquattro schede da 494px facevano 12.601px di pagina: quindici schermate
   per scorrere un elenco. Il PRODUCT.md dice chi c'e' dall'altra parte —
   "non stanno esplorando, stanno sbrigando" — quindi qui la densita' vale piu'
   della fotografia grande.

   Card da 494 a ~330px. Dove sono finiti i 164:
   - la foto passa da 190 a 150: resta il colpo d'occhio sulla stanza, e il
     bollino del cashback ci sta sopra uguale;
   - il blocco prezzo era una colonna (costo reale / prezzo / "a notte" / CTA)
     alta 117px: adesso il prezzo sta su una riga e il bottone gli sta accanto,
     48px in tutto. E' lo stesso contenuto girato di 90 gradi.

   Niente e' stato tolto: nessuna informazione della scheda sparisce sul
   telefono. Un elenco piu' corto perche' nasconde le cose non e' piu' corto,
   e' incompleto. */
@media (max-width: 560px) {
    /* La scheda e' gia' verticale ovunque: qui resta da rimettere la DENSITA'.
       Una foto 4:3 su un telefono da 360 e' alta 268px, e ventiquattro schede
       cosi' rifarebbero le quindici schermate di scorrimento che erano gia'
       state tolte una volta. 21:9 riporta la foto ai ~150px che il telefono
       aveva prima — stessa altezza, ma proporzionale invece che fissa, cosi'
       non si allunga su un tablet stretto. Il bollino del cashback ci sta
       sopra uguale, ed e' il motivo per cui non si scende oltre. */
    .sr-media { aspect-ratio: 21 / 9; }
    .sr-cta { min-height: var(--tb-touch); }
    /* Una sola colonna: sotto i 560 due schede fanno 260px l'una, e a quella
       larghezza il nome di un albergo va a capo tre volte. */
    .sr-list,
    .sr-layout.is-map-wide .sr-list { grid-template-columns: minmax(0, 1fr); gap: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-card, .sr-pin { transition: none !important; }
}

/* ============================================================
   Stati della ricerca: scheletro, attesa, errore, destinazione mancante.
   La chiamata al fornitore puo' durare fino a 30 secondi. Prima la pagina
   intera aspettava dietro un velo grigio; adesso il guscio c'e' subito e
   l'attesa e' coperta da uno scheletro, che dice DOVE arrivera' la roba.
   ============================================================ */

/* Lo scheletro riusa .sr-card, quindi eredita la colonna della griglia e il
   rapporto 4:3 della foto: quando le card vere lo sostituiscono la pagina non
   salta, perche' l'ingombro e' lo stesso. */
.sr-card-skeleton {
    cursor: default;
    pointer-events: none;
    /* Non deve sollevarsi in hover: non c'e' niente sotto da guardare. */
    transition: none;
}
.sr-card-skeleton:hover .sr-media { box-shadow: none; }
.sr-card-skeleton:hover .sr-media img { transform: none; }
.sr-card-skeleton .sr-media .tb-skeleton { position: absolute; inset: 0; border-radius: 0; }
.sr-card-skeleton .sr-body { gap: 9px; }
.sr-skeleton-row  { display: flex; gap: 8px; }
.sr-skeleton-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.sr-skeleton-foot:first-of-type { margin-top: auto; }

.sr-head-skeleton { align-items: flex-start; }
.sr-skeleton-hint { width: 176px; height: 32px; border-radius: var(--tb-r-pill); }

/* Nessuna destinazione: la pagina fa la domanda invece di sceglierne una da se'.
   Prima il server ripiegava su "Paris" e il JavaScript su "Milan" — due default
   diversi, e nessuno dei due detto a chi stava cercando. */
.sr-ask { margin: 48px 0; }
.sr-ask h1 { font: var(--tb-t-page-title); letter-spacing: var(--tb-tr-tight); }

.sr-nojs { margin-bottom: 16px; }
.sr-nojs a { color: var(--tb-blue-ink); font-weight: 600; }

/* Le card entrano a scaglioni: 45ms l'una, e il ritardo si ferma alla sesta.
   Oltre, l'ultima card arriverebbe dopo che l'utente ha gia' letto la prima —
   e uno scaglionamento che si fa aspettare non e' ritmo, e' attrito. */
@media (prefers-reduced-motion: no-preference) {
    .sr-list .sr-card {
        animation: sr-card-in 320ms var(--tb-ease) both;
        animation-delay: calc(min(var(--i, 0), 5) * 45ms);
    }
}
@keyframes sr-card-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* --- "Mostra altri" ----------------------------------------------------
   Sta in fondo alla lista e occupa tutta la larghezza della colonna: e' la
   fine del contenuto, non un'azione di contorno. Il conteggio sotto ("24 di
   249") esiste perche' il bottone da solo non dice quanto manca, e senza quel
   numero non si sa se premere una volta o dieci. */
.sr-more {
    /* Colonna 1, cioe' sotto la LISTA e non sotto la mappa: .sr-layout e' una
       griglia a due colonne e senza questa riga il bottone finirebbe dove
       capita. A schermo stretto la griglia diventa a una colonna sola e la
       regola smette semplicemente di contare. */
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
}
.sr-more .tb-btn { min-width: 220px; justify-content: center; }
.sr-more-count {
    margin: 0;
    font-size: var(--tb-fs-xs);
    color: var(--tb-ink-soft);
    font-variant-numeric: tabular-nums;
}