/* I RISULTATI (proposta B) — cerca.html. Non hanno una tavola loro: sono la
home e la vetrina messe insieme. In cima la barra bianca della vetrina,
sotto la ricerca della home (campi e "Cerca" in portale.css); sul fondo di
bruma i filtri in un pannello bianco e le carte delle spiagge, coi posti e
il prezzo scritti come nelle carte "Liberi oggi". Si carica prima di
faro.css. */
/* ─── la testa: bianca, e la ricerca sotto ─── */
/* Non appiccicata: con la ricerca dentro, sul telefono era alta quasi
300px, e scorrendo restava un terzo di schermo fermo sopra le spiagge. */
body.po-ricerca .po-testa,
body.po-ricerca .po-testa.compatta {
position: relative; background: #fff; box-shadow: none;
border-bottom: 1px solid var(--f-linea-2);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
/* solo quello della testata: quello del piede sta sul blu */
body.po-ricerca .po-testa .po-logo, body.po-ricerca .po-testa .po-logo span { color: var(--f-notte); }
body.po-ricerca .po-testa-inner { padding-top: 14px; padding-bottom: 14px; }
body.po-ricerca .po-nav { gap: 8px; }
body.po-ricerca .po-nav a {
min-height: 44px; padding: 0 14px; border-radius: 10px;
background: #fff; border: 1.5px solid var(--f-linea-forte);
color: var(--f-notte); font-size: 15px; font-weight: 700;
}
body.po-ricerca .po-nav a:hover { border-color: var(--f-notte); background: #fff; }
body.po-ricerca .po-nav-qui .bi { color: var(--f-mare); }
body.po-ricerca .po-barra-cerca { padding: 4px var(--fianco) 20px; }
/* ─── il corpo ─── */
body.po-ricerca .po-corpo { padding: 24px var(--fianco) 48px; }
@media (min-width: 1000px) {
body.po-ricerca .po-griglia { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
body.po-ricerca .po-filtri { top: 16px; }
}
/* la riga sopra la lista: quanti, per che giorno, e l'ordine */
body.po-ricerca .po-barra { gap: 12px 16px; margin-bottom: 16px; }
body.po-ricerca .po-conteggio { font-size: 15px; color: var(--f-grigio); }
body.po-ricerca .po-conteggio strong {
font-family: var(--f-titoli); font-weight: 800; font-size: 22px; color: var(--f-notte);
}
body.po-ricerca .po-conteggio span { font-size: 15px; color: var(--f-grigio); }
body.po-ricerca .po-ordina { gap: 8px; font-size: 14px; font-weight: 700; color: var(--f-grigio); }
body.po-ricerca .po-ordina select {
min-height: 44px; padding: 0 12px; border: 1.5px solid var(--f-linea-forte); border-radius: 10px;
font-size: 15px; font-weight: 700; color: var(--f-inchiostro); background-color: #fff;
}
body.po-ricerca .po-ordina select:focus { outline: none; border-color: var(--f-mare); box-shadow: 0 0 0 3px rgba(31, 122, 148, .2); }
/* i servizi chiesti: pezzi notte con la x */
body.po-ricerca .po-attivi { gap: 8px; margin-bottom: 16px; }
body.po-ricerca .po-chip {
min-height: 36px; gap: 8px; padding: 0 10px 0 12px; border-radius: 8px;
background: var(--f-notte); border-color: var(--f-notte);
font-size: 14px; font-weight: 700;
}
body.po-ricerca .po-chip:hover { background: var(--f-notte-2); }
body.po-ricerca .po-chip.vuota { background: none; border-color: transparent; color: var(--f-mare); }
body.po-ricerca .po-chip.vuota:hover { background: var(--f-mare-chiaro); }
/* ─── i filtri: un pannello bianco, i gruppi divisi da una riga ─── */
body.po-ricerca .po-filtri-testa { align-items: center; margin-bottom: 0; padding: 0 0 12px; }
body.po-ricerca .po-filtri-testa h2 {
font-family: var(--f-titoli); font-size: 20px; font-weight: 700; letter-spacing: -.01em;
text-transform: none; color: var(--f-notte);
}
body.po-ricerca .po-pulisci { min-height: 36px; font-size: 14px; font-weight: 700; color: var(--f-mare); }
body.po-ricerca #po-gruppi {
gap: 0; background: #fff; border: 1px solid var(--f-linea); border-radius: 12px; overflow: hidden;
}
body.po-ricerca .po-gruppo {
padding: 14px 16px 12px; border: 0; border-radius: 0; box-shadow: none; background: none;
}
body.po-ricerca .po-gruppo + .po-gruppo { border-top: 1px solid var(--f-linea-2); }
body.po-ricerca .po-gruppo h3 {
gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 800; letter-spacing: 0;
text-transform: none; color: var(--f-inchiostro);
}
body.po-ricerca .po-gruppo h3 .bi { color: var(--f-mare); font-size: 16px; }
body.po-ricerca .po-voce { gap: 10px; min-height: 34px; padding: 0; font-size: 15px; color: var(--f-inchiostro); }
body.po-ricerca .po-voce input { width: 18px; height: 18px; accent-color: var(--f-notte); }
body.po-ricerca .po-voce:hover span { color: var(--f-notte); }
body.po-ricerca .po-n { font-size: 13px; font-weight: 700; color: var(--f-grigio-2); }
body.po-ricerca .po-altri { min-height: 32px; padding: 0; font-size: 14px; font-weight: 700; color: var(--f-mare); }
body.po-ricerca .po-niente { font-size: 14px; font-style: normal; color: var(--f-grigio); }
body.po-ricerca .po-gruppo.morto { opacity: 1; }
body.po-ricerca .po-gruppo.morto h3 { color: var(--f-grigio-2); }
body.po-ricerca .po-gruppo.morto h3 .bi { color: var(--f-grigio-2); }
/* ─── le carte delle spiagge ─── */
body.po-ricerca .po-risultati { gap: 16px; }
body.po-ricerca .po-scheda {
border: 1px solid var(--f-linea); border-radius: 12px; box-shadow: none;
}
body.po-ricerca .po-scheda:hover {
transform: none; border-color: var(--f-linea-forte); box-shadow: 0 10px 26px rgba(15, 36, 51, .1);
}
body.po-ricerca .po-scheda-corpo { gap: 12px; padding: 18px 20px 18px; }
body.po-ricerca .po-scheda-testa { padding-right: 48px; }
body.po-ricerca .po-scheda-testa h3 {
margin: 0; font-family: var(--f-titoli); font-weight: 700; font-size: 22px; line-height: 1.2;
}
body.po-ricerca .po-scheda-testa h3 a { color: var(--f-notte); }
.po-scheda-dove {
display: flex; align-items: center; gap: 5px; margin-top: 3px;
font-size: 15px; line-height: 20px; color: var(--f-grigio);
}
.po-scheda-dove .bi { color: var(--f-mare); font-size: 14px; }
body.po-ricerca .po-claim { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--f-inchiostro); }
/* il cuore: un tasto tondo bianco, in alto a destra */
body.po-ricerca .po-cuore {
width: 40px; height: 40px; border: 1px solid var(--f-linea); background: #fff;
color: var(--f-grigio); box-shadow: none; font-size: 17px;
}
body.po-ricerca .po-cuore:hover { border-color: var(--f-linea-forte); color: var(--f-rosso); }
body.po-ricerca .po-cuore.si { color: var(--f-rosso); }
/* i servizi: bruma, e quelli chiesti in verde */
body.po-ricerca .po-servizi { gap: 6px; }
body.po-ricerca .po-serv {
min-height: 30px; gap: 6px; padding: 0 9px; border-radius: 8px;
background: var(--f-bruma); color: var(--f-inchiostro); font-size: 13px; font-weight: 700;
}
body.po-ricerca .po-serv .bi { color: var(--f-mare); font-size: 14px; }
body.po-ricerca .po-serv.cercato { background: var(--f-verde-chiaro); color: var(--f-verde); box-shadow: none; }
body.po-ricerca .po-serv.cercato .bi { color: var(--f-verde); }
body.po-ricerca .po-serv.altri { background: #fff; box-shadow: inset 0 0 0 1px var(--f-linea); color: var(--f-grigio); }
/* il piede: i posti, il prezzo con la sua formula, "Prenota" */
body.po-ricerca .po-scheda-piede {
display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--f-linea-2);
}
body.po-ricerca .po-posti {
display: flex; align-items: center; gap: 7px; line-height: 20px;
font-size: 15px; color: var(--f-grigio); white-space: nowrap;
}
body.po-ricerca .po-posti strong { font-weight: 800; color: var(--f-inchiostro); }
body.po-ricerca .po-posti .f-forma { font-size: 15px; }
body.po-ricerca .po-posti.pochi .f-forma { background: var(--f-ambra); }
body.po-ricerca .po-posti.pieno strong { color: var(--f-grigio); }
body.po-ricerca .po-prezzo {
display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin-left: auto;
line-height: 1.15; text-align: right;
}
body.po-ricerca .po-prezzo strong { font-family: var(--f-titoli); font-weight: 800; font-size: 20px; color: var(--f-inchiostro); white-space: nowrap; }
body.po-ricerca .po-prezzo span { font-size: 13px; color: var(--f-grigio); }
body.po-ricerca .po-prezzo span:empty { display: none; }
body.po-ricerca .po-prezzo-no { font-size: 14px; color: var(--f-grigio); }
body.po-ricerca .po-prenota {
min-height: 44px; gap: 8px; padding: 0 18px; border-radius: 10px;
background: var(--f-arancio); color: #fff; box-shadow: none;
font-size: 15px; font-weight: 700;
}
body.po-ricerca .po-prenota:hover { background: var(--f-arancio-2); box-shadow: none; color: #fff; }
/* pieno: si guarda, non si paga — niente arancio */
body.po-ricerca .po-prenota.guarda { background: #fff; color: var(--f-notte); box-shadow: inset 0 0 0 1.5px var(--f-linea-forte); }
body.po-ricerca .po-prenota.guarda:hover { box-shadow: inset 0 0 0 1.5px var(--f-notte); color: var(--f-notte); }
/* le carte grigie mentre arrivano i risultati (cerca.js) */
body.po-ricerca .po-scheletro { pointer-events: none; }
body.po-ricerca .po-scheletro .po-foto.f-scheletro { height: 100%; min-height: 190px; border-radius: 0; }
body.po-ricerca .po-scheletro .po-scheda-corpo { gap: 12px; }
body.po-ricerca .po-sch-piede { width: 100%; height: 44px; margin-top: auto; border-radius: 10px; }
/* il vuoto */
body.po-ricerca .po-vuoto {
padding: 40px 24px; background: #fff; border: 1px solid var(--f-linea); border-radius: 12px; color: var(--f-grigio);
}
body.po-ricerca .po-vuoto .bi { color: var(--f-mare); opacity: 1; }
body.po-ricerca .po-vuoto strong { font-family: var(--f-titoli); font-size: 20px; color: var(--f-notte); }
body.po-ricerca .po-vuoto p { font-size: 15px; }
body.po-ricerca .po-vuoto-btn {
min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--f-linea-forte);
background: #fff; color: var(--f-notte); font-size: 15px; font-weight: 700;
}
body.po-ricerca .po-vuoto-btn:hover { border-color: var(--f-notte); color: var(--f-notte); }
/* ─── i filtri da telefono: il pannello ─── */
body.po-ricerca .po-filtri-apri {
min-height: 44px; gap: 8px; padding: 0 14px; margin: 0; border-radius: 10px;
border: 1.5px solid var(--f-linea-forte); background: #fff;
color: var(--f-notte); font-size: 15px; font-weight: 700;
}
body.po-ricerca .po-filtri-apri:hover { border-color: var(--f-notte); }
/* i conteggi in Faro sono sole, non arancio: l'arancio e' dei soldi */
body.po-ricerca .po-filtri-n { background: var(--f-sole); color: var(--f-notte); }
body.po-ricerca .po-filtri-chiudi {
width: 44px; height: 44px; margin-right: -10px; border-radius: 10px; color: var(--f-grigio);
}
body.po-ricerca .po-filtri-fondo .po-vai { background: var(--f-notte); min-height: 52px; }
body.po-ricerca .po-filtri-fondo .po-vai:hover { background: var(--f-notte-2); }
@media (max-width: 999.98px) {
/* nel pannello i gruppi stanno sul bianco del pannello: niente bordo */
body.po-ricerca .po-filtri { background: #fff; padding: 16px 16px 24px; }
body.po-ricerca #po-gruppi { border: 0; border-radius: 0; margin: 0 -16px; }
/* nel pannello si tocca col dito: righe da 44 */
body.po-ricerca .po-voce { min-height: 44px; }
body.po-ricerca .po-filtri-testa { position: sticky; top: -16px; z-index: 1; background: #fff; padding-top: 4px; }
body.po-ricerca .po-filtri-fondo {
position: sticky; bottom: -24px; margin: 12px -16px -24px; padding: 12px 16px 16px;
background: #fff; border-top: 1px solid var(--f-linea-2);
}
/* Filtra a sinistra, Ordina a destra, e sotto quanti sono */
body.po-ricerca .po-barra {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
grid-template-areas: "filtra ordina" "conta conta";
}
body.po-ricerca .po-filtri-apri { grid-area: filtra; }
body.po-ricerca .po-ordina { grid-area: ordina; justify-self: end; }
body.po-ricerca .po-conteggio { grid-area: conta; }
}
@media (max-width: 719.98px) {
body.po-ricerca .po-testa-inner { padding-top: 8px; padding-bottom: 8px; }
body.po-ricerca .po-nav a { padding: 0 12px; font-size: 14px; }
/* Cosa cerchi intero; Dove e Giorno affiancati; Cerca intero: 168px.
Tutti in colonna erano 219. */
body.po-ricerca .po-barra-cerca { padding: 2px var(--fianco) 14px; }
body.po-ricerca .po-cerca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
body.po-ricerca .po-campo { min-height: 52px; gap: 10px; padding: 0 12px; }
body.po-ricerca .po-campo > i { font-size: 17px; }
body.po-ricerca .po-campo-data input { font-size: 15px; }
body.po-ricerca .po-vai { grid-column: 1 / -1; min-height: 48px; }
body.po-ricerca .po-corpo { padding-top: 16px; }
body.po-ricerca .po-ordina > span { display: none; }
body.po-ricerca .po-scheda-corpo { padding: 14px 16px 16px; }
body.po-ricerca .po-scheda-testa h3 { font-size: 20px; }
body.po-ricerca .po-scheda-testa { padding-right: 0; }
body.po-ricerca .po-foto { aspect-ratio: 16 / 8; }
/* il prezzo accanto ai posti, "Prenota" sotto a tutta larghezza */
body.po-ricerca .po-prenota { flex: 1 0 100%; justify-content: center; min-height: 48px; }
}