/* =========================================================================
   CARATTERI — solo Fraunces sul nostro server
   =========================================================================
   Fino al 01/09/2026 c'era @import di fonts.googleapis.com: quel singolo rigo
   mandava l'indirizzo IP di OGNI visitatore a Google, su OGNI pagina, PRIMA
   che avesse toccato il banner. E' il caso su cui esiste giurisprudenza
   europea (Monaco, gennaio 2022). Quindi va tolto, e resta tolto.

   Ma servivano OTTO file da scaricare a mano, ed e' troppo per quello che
   danno. Il carattere che fa l'identita' del sito e' UNO: Fraunces, nei
   titoli. Inter e JetBrains Mono facevano un lavoro che i caratteri di
   sistema fanno altrettanto bene e senza scaricare niente.

   Quindi: TRE file per Fraunces, e per il resto le pile di sistema qui sotto.
   Se anche quei tre mancassero, Georgia li sostituisce e il sito resta
   dignitoso — non e' una scusa per non caricarli, ma non si rompe niente. */

/* INTERVALLI di peso, non valori singoli. Il sito usa Fraunces in corsivo in
   una decina di punti senza dichiarare il peso, quindi eredita quello del
   contesto (400 nel corpo, 600 nei titoli...). Con un @font-face dichiarato
   solo su 500, tutti gli altri pesi non troverebbero una faccia e
   ricadrebbero su Georgia: il marchio in cima alla pagina sarebbe di un
   carattere e il titolo sotto di un altro.
   Con gli intervalli, i tre file coprono ogni combinazione che il sito chiede. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 500; font-display: swap;
             src: url('fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 900; font-display: swap;
             src: url('fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 900; font-display: swap;
             src: url('fonts/fraunces-500-italic.woff2') format('woff2'); }

/* Pile di sistema: nessun file, nessuna richiesta, resa immediata.
   Non toccare i nomi senza motivo: coprono Android, iOS, Windows e Linux. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

:root {
  --paper: #F2ECDF;
  --paper-dark: #E7DCC0;
  --ink: #2B2420;
  --ink-soft: #5C5346;
  --green: #1F3A2E;
  --green-dark: #152A21;
  --leather: #6B4226;
  --brass: #B8935A;
  --brass-dark: #8F6E3F;
  --rust: #A13D2B;
  --line: #CBB98F;
  --ig: #C13584;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.serif { font-family: 'Fraunces', Georgia, serif; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
.sponsor-strip { background: var(--brass); }
.sponsor-strip .wrap { display: flex; align-items: center; justify-content: space-between; height: 36px; font-size: 12px; color: var(--green-dark); }
.sponsor-strip a { display: flex; align-items: center; gap: 8px; }
.sponsor-strip img { width: 18px; height: 18px; }

.main-nav { background: var(--green); position: relative; z-index: 200; }
.main-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--paper); font-size: 20px; display: flex; align-items: baseline; gap: 2px; }
.brand .dotcom { font-style: normal; font-family: var(--mono); color: var(--brass); font-size: 13px; }
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
/* Le voci non devono spezzarsi su due righe né schiacciare il logo. */
.nav-links a { white-space: nowrap; }
.main-nav .wrap { gap: 20px; }
.main-nav .brand { flex: 0 0 auto; }
.nav-links a, .nav-links button.linklike { color: var(--paper); opacity: 0.85; font-size: 13.5px; background: none; border: none; cursor: pointer; font-family: inherit; }
.nav-links a:hover { opacity: 1; }
/* 44px: e' il comando principale di navigazione su telefono, e con padding 4px
   veniva alto 33px — sotto la soglia in cui un dito lo centra al primo colpo. */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

@media (max-width: 780px) {
  .mobile-menu-btn { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--green);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 22px;
    box-shadow: 0 8px 16px rgba(0,0,0,.15);
    z-index: 300;
  }
  .nav-links.open { display: flex; }
  .nav-links .lang-switch { align-self: flex-start; }
  .nav-links .user-chip { border-left: none; padding-left: 0; margin-left: 0; }
  .main-nav .wrap { position: relative; }
  .sponsor-handle { display: none; }
  .sponsor-strip .wrap { justify-content: center; }
}
.lang-switch { display: flex; border: 1px solid var(--brass); border-radius: 999px; overflow: hidden; font-size: 11px; font-weight: 600; }
.lang-switch a { padding: 4px 10px; color: var(--paper); }
.lang-switch a.active { background: var(--brass); color: var(--green-dark); }
.user-chip { display: flex; align-items: center; gap: 8px; padding-left: 16px; margin-left: 4px; border-left: 1px solid rgba(242,236,223,.25); }
.user-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--brass); color: var(--green-dark); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 3px; font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--green); color: var(--paper); }
.btn-brass { background: var(--brass); color: var(--green-dark); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.btn-danger { background: transparent; border-color: var(--rust); color: var(--rust); }
/* Pulsante su fondo scuro (hero). NON usare .btn-primary li': ha lo stesso
   verde dello sfondo della hero e diventa invisibile. */
.btn-on-dark { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn-on-dark:hover { background: var(--paper); color: var(--green-dark); }

/* ---------- hero ---------- */
.hero { background: var(--green); padding: 70px 0 96px; overflow: hidden; }
.hero .eyebrow { color: var(--brass); font-size: 12px; letter-spacing: .2em; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.hero h1 { color: var(--paper); font-size: 44px; max-width: 620px; line-height: 1.08; margin: 0 0 20px; }
.hero p.sub { color: var(--paper); opacity: .8; max-width: 460px; font-size: 15px; margin-bottom: 32px; }
/* .hero-illustration rimossa il 01/09/2026: era una foto di repertorio
   caricata da un server esterno, e le due strade riempiono meglio lo spazio. */
@media (max-width: 900px) { .hero-illustration { display: none; } }
/* ---------- ricerca a vuoto: il momento in cui chiedere ---------- */
.search-empty { background: var(--paper-dark); border: 1px solid var(--brass); margin-bottom: 22px; }
.search-empty-t { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.search-empty-s { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; line-height: 1.5; }

/* ---------- admin: cosa cerca la gente ---------- */
.tally-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tally-row span {
  font-size: 13px; color: var(--ink-soft);
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
}
.tally-row strong { color: var(--ink); font-family: var(--mono); }

.search-table { display: flex; flex-direction: column; gap: 6px; }
.search-row {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px; font-size: 13px;
}
.search-row > * { min-width: 0; }
.search-row.zero { border-left: 3px solid var(--rust); }
.search-q { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.search-f { display: flex; flex-wrap: wrap; gap: 5px; }
.search-n { font-family: var(--mono); color: var(--brass-dark); font-weight: 500; white-space: nowrap; }
.search-d { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.filtro-chip {
  font-size: 11px; color: var(--ink-soft);
  background: var(--paper-dark); border-radius: 2px; padding: 2px 6px;
}
.filtro-chip strong { color: var(--ink); font-weight: 600; }

@media (max-width: 700px) {
  .search-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .search-f { grid-column: 1 / -1; }
  .search-d { grid-column: 2; text-align: right; }
}

/* Riquadro che sostituisce la mappa finche' non la si chiede. Ha la stessa
   forma e la stessa altezza della mappa, cosi' la pagina non salta quando
   compare quella vera. */
/* Alto quanto basta, NON quanto la mappa: prima ereditava .map-container
   (560px) e diventava un rettangolo beige vuoto che sembrava una pagina
   rotta. Prima il pulsante, poi la spiegazione in piccolo: l'azione e'
   quella che interessa, la nota serve a chi vuole sapere perche'. */
.map-ask {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 26px 22px; text-align: center;
  background: var(--paper-dark); border: 1px solid var(--line); border-radius: 4px;
}
.map-ask-err { margin: 0; font-size: 12.5px; color: var(--rust); font-weight: 600; max-width: 46ch; }
.map-ask [hidden] { display: none !important; }   /* regola 13: hidden va confermato dal CSS */
.map-ask-txt { margin: 0; max-width: 46ch; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.map-ask-btn { min-height: 44px; }
.map-ask-btn[disabled] { opacity: .6; cursor: progress; }

/* Le due strade della home: chi cerca e chi vende, dichiarate subito.
   Su desktop affiancate, su mobile una sopra l'altra — chi cerca per primo,
   perche' e' il pubblico che al sito manca (le richieste dei compratori sono
   il dato che serve). */
.hero-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin-top: 34px; }
.hero-path {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: 5px;
  background: rgba(242,236,223,.07);
  border: 1px solid rgba(242,236,223,.18);
}
.hero-path-label {
  font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600;
  color: var(--paper); line-height: 1.15;
}
.hero-path-note { color: var(--paper); opacity: .78; font-size: 13.5px; margin: 0; line-height: 1.45; }
/* La ricerca vive DENTRO il percorso di chi cerca: cosi' non compete con la
   scelta fra le due strade, ne fa parte. */
.hero-path .hero-search { margin-top: auto; max-width: none; }
.hero-path-alt { color: var(--brass); font-size: 13px; text-decoration: underline; padding: 4px 0; }
.hero-path-alt:hover { color: var(--paper); }

@media (max-width: 760px) {
  .hero-paths { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .hero-path { padding: 17px; }
}

.hero-search { display: flex; gap: 10px; max-width: 560px; flex-wrap: wrap; }
.hero-search input { flex: 1; min-width: 200px; min-height: 44px; padding: 13px 16px; border-radius: 3px; border: none; font-size: 14px; }
/* 44px anche sul pulsante: e' il comando principale del percorso di chi cerca. */
.hero-search button { min-height: 44px; }

/* Seconda strada nella hero: chi arriva per VENDERE, non per comprare.
   La ricerca sopra serve ai compratori; questa riga serve ai venditori,
   che sono il lato scarso del mercato. Separata da una riga sottile per
   non farla leggere come un pulsante secondario della ricerca. */
.hero-sell {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 560px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(242,236,223,.18);
}
.hero-sell-text { color: var(--paper); opacity: .8; font-size: 14px; }

/* ---------- consignment banner ---------- */
.banner { background: var(--paper-dark); border: 1.5px dashed var(--brass); border-radius: 4px; padding: 26px 30px; display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 26px 0; }
.banner .tag { color: var(--brass-dark); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; }
.banner h3 { margin: 4px 0 6px; font-size: 19px; }
.banner p { margin: 0; color: var(--ink-soft); font-size: 13.5px; max-width: 520px; }

/* ---------- cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } }

/* Header dashboard admin: responsive.
   I comandi vanno A CAPO SEMPRE, non solo sotto i 680px. Prima erano su una
   riga sola con flex-shrink:0: finche' erano cinque ci stavano, ma ogni
   pulsante aggiunto li stringeva contro il titolo e li spingeva fuori dal
   contenitore. Un contenitore che si rompe aggiungendo una voce non e'
   responsive: e' fortunato. Ora vanno a capo su una riga propria, allineati a
   sinistra sotto il titolo, e aggiungerne altri non cambia niente. */
.admin-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.admin-dash-head > h1, .admin-dash-head > .admin-dash-title { min-width: 0; }
.admin-dash-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; }
@media (max-width: 680px) {
  .admin-dash-head { flex-direction: column; align-items: stretch; }
  .admin-dash-actions .btn { flex: 1 1 auto; text-align: center; }
}
/* Le due colonne in fondo alla dashboard. Prima erano `1fr 1fr` scritto in
   linea nel markup: non collassavano MAI, quindi a 320px diventavano due
   colonne da 130px e l'email di un utente spingeva la pagina fuori schermo.
   Stessa categoria della regola 17 — figli di griglia senza `min-width: 0`. */
.admin-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-dash-cols > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .admin-dash-cols { grid-template-columns: 1fr; } }

.admin-dash-notif { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 560px) {
  .admin-dash-notif { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.card { display: block; background: var(--paper); border: 1px dashed var(--line); border-radius: 4px; overflow: hidden; transition: transform .15s; }
.card.is-sold { opacity: .68; }
.card:hover { transform: translateY(-2px); }
.card .photo { position: relative; height: 160px; background: var(--paper-dark); }
.card .photo img, .card .photo .glyph { width: 100%; height: 100%; object-fit: cover; display: block; }
.stamps { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stamp { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.stamp-verified { background: var(--green); color: var(--paper); }
.stamp-consigned { background: var(--brass); color: var(--green-dark); }
.stamp-trattativa { background: var(--brass-dark); color: var(--paper); }
.stamp-venduto { background: var(--ink); color: var(--paper); }
.stamp-sano { background: #EAF0EA; color: var(--green); }
.stamp-sano_risolto { background: #E4EDE4; color: var(--green); }
.stamp-lieve { background: #F4E9DD; color: var(--brass-dark); }
.stamp-convalescenza { background: #F3E1DC; color: var(--rust); }

.card .body { padding: 16px; }
.card .top-row { display: flex; justify-content: space-between; align-items: baseline; }
.card h3 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 20px; margin: 0; }
.card .price { font-family: var(--mono); color: var(--brass-dark); font-size: 15px; font-weight: 500; }
.card .specs { font-family: var(--mono); color: var(--ink-soft); font-size: 12.5px; margin: 4px 0 0; }
.card .foot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.card .sponsor-row, .card .ig-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px; letter-spacing: .08em; color: var(--ink-soft); opacity: .7; }
.card .sponsor-row img { width: 13px; height: 13px; }

/* ---------- filters / browse ---------- */
.browse-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
@media (max-width: 800px) { .browse-layout { grid-template-columns: 1fr; } }
/* ---------- filtri a scomparsa ----------
   Il pannello e' un <details>: su desktop resta sempre aperto e la linguetta
   non si vede, su mobile si apre e si chiude. Senza JavaScript resta aperto
   come prima — il degrado va verso il comportamento vecchio, mai verso filtri
   irraggiungibili. */
.filters-box > summary { display: none; }

@media (max-width: 800px) {
  .filters-box {
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--paper); margin-bottom: 22px;
  }
  .filters-box > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 16px;
    cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; color: var(--ink);
  }
  /* Il triangolino predefinito di Safari e Chrome, che non si toglie con
     list-style da solo. */
  .filters-box > summary::-webkit-details-marker { display: none; }
  .filters-box > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
  .filters-box .filters-lab { flex: 1; }
  .filters-box .filters-count {
    background: var(--brass); color: var(--green-dark);
    border-radius: 999px; padding: 1px 8px;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .filters-box .filters-chev { color: var(--leather); transition: transform .15s ease; }
  .filters-box[open] .filters-chev { transform: rotate(180deg); }
  .filters-box > form { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .filters-box .filters-chev { transition: none; }
}

.filter-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.filter-group .title { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--leather); margin-bottom: 8px; text-transform: uppercase; }
.filter-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); padding: 3px 0; cursor: pointer; }
.filter-group input[type=number] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; border-radius: 3px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-family: inherit;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.panel { border: 1px dashed var(--line); border-radius: 4px; padding: 20px; margin-bottom: 26px; }
.panel .section-title { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--leather); margin-bottom: 14px; text-transform: uppercase; }
.panel-highlight { border: 1.5px dashed var(--brass); background: var(--paper-dark); }
.panel-ig { border: 1.5px dashed var(--ig); background: var(--paper-dark); }

/* Nota informativa a comparsa: click ovunque, anche solo al passaggio del
   mouse su desktop. Usata per le spiegazioni brevi che non serve tenere
   sempre visibili (es. quando scegliere la fascia di prezzo). */
.info { position: relative; display: inline-flex; align-items: center; }
.info-btn {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
  color: var(--leather); font-size: 12.5px; font-weight: 600; padding: 2px 0; font-family: inherit;
}
.info-btn .info-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 999px; border: 1.4px solid var(--leather); font-size: 10px; font-weight: 700; line-height: 1;
}
.info-panel {
  display: none; position: absolute; left: 0; top: 100%; margin-top: 8px; z-index: 30;
  width: 280px; max-width: min(280px, 86vw); padding: 12px 14px; font-size: 12.5px; font-weight: 400;
  line-height: 1.55; color: var(--ink); text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.info.open .info-panel { display: block; }
@media (hover: hover) and (pointer: fine) {
  .info:hover .info-panel, .info:focus-within .info-panel { display: block; }
}

/* Coppia di opzioni Sì/No (es. visibilità email/telefono). Lo stato attivo
   segue :has(input:checked) in puro CSS — a differenza di .health-option,
   NON ha un gestore click condiviso con altri componenti della pagina, quindi
   non risente di (e non rompe) selezioni fatte altrove nello stesso form. */
.yn-options { display: flex; gap: 10px; flex-wrap: wrap; }
.yn-option {
  flex: 1; min-width: 140px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.yn-option input[type="radio"] { accent-color: var(--brass); margin: 0; flex-shrink: 0; }
.yn-option.yn-yes:has(input:checked) { border-color: var(--green); background: #EAF0EA; color: var(--green); }
.yn-option.yn-no:has(input:checked) { border-color: var(--ink-soft); background: var(--paper-dark); color: var(--ink); }
@media (max-width: 480px) {
  .yn-options { flex-direction: column; }
  .yn-option { min-width: 0; }
}
.health-options { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.health-option { flex: 1; min-width: 150px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--line); font-size: 12.5px; text-align: left; cursor: pointer; background: transparent; color: var(--ink-soft); }
@media (max-width: 480px) {
  .health-options { flex-direction: column; }
  .health-option { min-width: 0; }
}
.health-option.active.sano { border-color: var(--green); background: #EAF0EA; color: var(--green); }
.health-option.active.sano_risolto { border-color: var(--green); background: #E4EDE4; color: var(--green); }
.health-option.active.lieve { border-color: var(--brass-dark); background: #F4E9DD; color: var(--brass-dark); }
.health-option.active.convalescenza { border-color: var(--rust); background: #F3E1DC; color: var(--rust); }

/* Toggle prezzo esatto / fascia. Prima riusava .health-option: un click su
   QUALSIASI .health-option della pagina (incluso lo stato di salute) faceva
   scattare il listener globale di .health-option qui sotto, che toglie
   active/sano/... da TUTTI gli elementi con quella classe e poi legge
   this.querySelector('input').value — questi bottoni non hanno un <input>
   dentro, quindi quella riga lanciava un TypeError e lo stato "selezionato"
   del prezzo spariva visivamente ad ogni click sullo stato di salute (e
   viceversa). Classe dedicata = zero interferenza, stesso identico aspetto. */
.price-type-option { flex: 1; min-width: 150px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--line); font-size: 12.5px; text-align: left; cursor: pointer; background: transparent; color: var(--ink-soft); }
.price-type-option.active { border-color: var(--green); background: #EAF0EA; color: var(--green); }
@media (max-width: 480px) {
  .price-type-option { min-width: 0; }
}
/* Elenco delle regioni nella richiesta del compratore: sono venti voci, in
   colonna unica diventerebbero una lista interminabile su cui nessuno ha
   voglia di scorrere. */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 14px; }
.region-grid .checkbox-row { font-size: 13px; }
.region-grid.is-off { opacity: .4; }

.dropzone { border: 1.5px dashed var(--line); background: var(--paper-dark); border-radius: 3px; padding: 30px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* Conferma per mostrare il libretto. Resta discreta finche' non si allega
   nulla, poi si accende: e' il momento in cui il venditore deve rendersi
   conto che sta per pubblicare un documento con dati personali. */
.doc-consent { padding: 14px 16px; border-radius: 3px; border: 1px solid var(--line); background: var(--paper-dark); }
.doc-consent-warning { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.5; }

/* Il caricamento del libretto compare solo dopo la conferma.
   La visibilita' NON e' governata dal CSS ma dall'attributo "hidden" nel
   markup, gestito dal JavaScript: cosi' se questo foglio di stile arriva
   in versione vecchia dalla cache, il campo resta comunque nascosto invece
   di comparire senza consenso. Il CSS qui sotto e' solo un rinforzo. */
.doc-upload-wrap { margin-top: 14px; }
.doc-upload-wrap[hidden] { display: none !important; }
.doc-block:has(.doc-consent-input:checked) .doc-consent { border-color: var(--brass); background: #F6EEE1; }
.doc-block:has(.doc-consent-input:checked) .doc-consent-warning { color: var(--ink); }

/* Galleria del libretto sulla scheda annuncio: miniature piu' grandi delle
   thumb della galleria foto, perche' un documento va letto, non sbirciato. */
.doc-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.doc-gallery img { width: 116px; height: 116px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line-strong, var(--line)); cursor: zoom-in; background: var(--paper-dark); }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
/* ---------------------------------------------------------------------
   SCELTE IN RIGA DENTRO UN CAMPO — leggere prima di aggiungerne altre.

   Dentro un .field due regole generiche del sito rompono qualsiasi
   etichetta che debba stare su una riga sola:

     .field label { display: block }              (0,1,1) batte .checkbox-row (0,1,0)
     .field input { width: 100% }                 stira anche caselle e pulsanti radio

   Risultato: il controllo finisce sopra il testo invece che accanto, e
   viene allargato a tutta la riga. E' successo due volte — prima con le
   caselle delle regioni, poi con i pulsanti Si'/No della visibilita'
   contatti — perche' la prima volta ho corretto solo la classe che avevo
   davanti invece della categoria.

   QUALSIASI nuova classe di scelta in riga va aggiunta a questi due
   elenchi, altrimenti si ripresenta.
   --------------------------------------------------------------------- */
.field .checkbox-row,
.field .yn-option {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0; font-weight: 400;
}
.field .checkbox-row { font-size: 13.5px; color: var(--ink); }

.field .checkbox-row input[type="checkbox"],
.field .checkbox-row input[type="radio"],
.field .yn-option input[type="checkbox"],
.field .yn-option input[type="radio"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }

.vizi-options { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.vizi-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px;
  font-size: 13.5px; color: var(--ink); background: transparent; cursor: pointer;
}
.vizi-option:hover { background: var(--paper-dark); }
.vizi-option input[type=checkbox] { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; }
.vizi-option span { flex: 1; }
@media (max-width: 480px) {
  .vizi-option { font-size: 13px; padding: 11px 12px; }
}

.map-container { width: 100%; height: 560px; border-radius: 4px; border: 1px solid var(--line); }
.map-container-mini { height: 260px; }
@media (max-width: 700px) { .map-container { height: 420px; } .map-container-mini { height: 200px; } }
.hf-map-tooltip { display: flex; flex-direction: column; gap: 4px; align-items: center; font-family: inherit; }
.hf-map-tooltip.hf-map-multi { align-items: stretch; }
.hf-map-tooltip strong { font-size: 13px; color: var(--ink); }
.leaflet-tooltip.hf-map-tooltip,
.leaflet-tooltip { border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 10px 13px; white-space: nowrap; }
.leaflet-tooltip.hf-map-multi { min-width: 170px; }

.hf-lightbox {
  display: none; position: fixed; inset: 0; background: rgba(20,20,15,.92);
  z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out;
}
.hf-lightbox.open { display: flex; }
.hf-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.hf-lightbox-close {
  position: absolute; top: 18px; right: 26px; color: var(--paper); font-size: 34px;
  line-height: 1; cursor: pointer; font-family: sans-serif; opacity: .8;
}
.hf-lightbox-close:hover { opacity: 1; }

/* ---------- detail page ---------- */
/* Scheda annuncio: tre blocchi (foto+titolo, corpo, colonna prezzo).
   Su desktop foto e corpo restano incolonnati a sinistra e la colonna
   prezzo occupa la destra su entrambe le righe: aspetto identico a prima.
   row-gap 0 perche' foto e corpo prima erano nello stesso contenitore e
   la spaziatura la danno gia' i margini interni. */
/* min-width:0 sui blocchi della griglia. Senza, un elemento di griglia non
   scende MAI sotto la larghezza minima del suo contenuto: bastava un indirizzo
   email lungo nel riquadro venditore e l'intera scheda usciva dallo schermo su
   telefoni stretti, facendo scorrere la pagina di lato. Il difetto peggiorava
   quanto piu' l'email era lunga, quindi non si vedeva con i dati di prova. */
.detail-layout { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 40px; row-gap: 0; align-items: start; }
.detail-layout > * { min-width: 0; }
.dl-head { grid-column: 1; grid-row: 1; }
.dl-body { grid-column: 1; grid-row: 2; }
.dl-side { grid-column: 2; grid-row: 1 / span 2; }

/* Su mobile il prezzo risale subito sotto la foto. Prima la colonna destra
   finiva in fondo alla pagina: il prezzo compariva dopo descrizione e
   messaggistica, alla quarta schermata. */
@media (max-width: 850px) {
  .detail-layout { grid-template-columns: 1fr; row-gap: 26px; }
  .dl-head { grid-column: 1; grid-row: 1; }
  .dl-side { grid-column: 1; grid-row: 2; }
  .dl-body { grid-column: 1; grid-row: 3; }
  /* Sticky inutile a colonna singola: si porterebbe dietro tutta la scheda. */
  .sidebar-box { position: static; }
}
.detail-photo { position: relative; height: 320px; border-radius: 4px; overflow: hidden; background: var(--paper-dark); }
.detail-photo img, .detail-photo .glyph { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.detail-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; opacity: .7; }
.detail-thumb:hover { opacity: 1; }
.detail-thumb.active { border-color: var(--brass); opacity: 1; }
@media (max-width: 480px) { .detail-photo { height: 240px; } .detail-thumb { width: 56px; height: 56px; } }
.passport-box { border: 1px dashed var(--line); border-radius: 4px; padding: 20px; margin: 20px 0; }
.passport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.passport-grid .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.passport-grid .v { font-family: var(--mono); font-size: 14px; }
.note-box { border-radius: 4px; padding: 18px; margin-bottom: 20px; display: flex; gap: 12px; align-items: flex-start; }
.health-box .icon { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
/* Contatti del venditore: righe toccabili, non link di testo.
   44px e' l'altezza minima raccomandata per un bersaglio tattile. */
.seller-contacts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.contact-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  font-size: 14px; color: var(--ink); text-decoration: none;
  word-break: break-all;
}
/* Stessa trappola dentro la riga: word-break sopra non basta finche' il figlio
   flex conserva min-width:auto e si rifiuta di restringersi. */
.contact-row > * { min-width: 0; overflow-wrap: anywhere; }
.contact-row:hover { border-color: var(--brass); }
.contact-ico { flex-shrink: 0; }

.sidebar-box { position: sticky; top: 90px; background: var(--paper-dark); border: 1px solid var(--line); border-radius: 4px; padding: 24px; }
/* Il margine inferiore sta qui e non piu' sulla riga di testo sotto il
   prezzo, che e' stata rimossa: senza, il prezzo si attaccherebbe a
   "VENDITORE" negli annunci a prezzo esatto. */
.sidebar-box .amount { font-family: var(--mono); font-size: 28px; color: var(--brass-dark); margin-bottom: 18px; }

/* ---------- messages ---------- */
/* ---------- conversazione ----------
   DELIBERATAMENTE DIVERSA dai .panel del resto della scheda.
   Ogni altro riquadro dell'annuncio (dati, salute, libretto) ha il bordo
   TRATTEGGIATO: in questo sito e' il segnale di "scheda di informazioni".
   Prima anche i messaggi lo usavano, e il risultato era che la parte in cui
   si parla con una persona si leggeva come l'ennesimo elenco di dati.
   Qui il bordo e' pieno, c'e' un'intestazione con il nome di chi legge, e il
   campo di scrittura ha la forma di un campo di scrittura — prima era un
   input di sistema senza uno stile, con la sola regola flex:1. */
.msg-panel { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 26px; background: var(--paper); overflow: hidden; }

.msg-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--green); color: var(--paper); }
.msg-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brass); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: 0 0 auto; text-transform: uppercase; }
.msg-head-txt { display: flex; flex-direction: column; min-width: 0; }
.msg-head-txt strong { font-size: 15px; font-weight: 600; line-height: 1.25; }
.msg-head-txt span { font-size: 12px; opacity: .78; line-height: 1.35; }
.msg-body { padding: 15px 16px 16px; }

.msg-thread { max-height: 260px; overflow-y: auto; margin-bottom: 13px; display: flex; flex-direction: column; gap: 8px; background: var(--paper-dark); border-radius: 3px; padding: 12px; }
.msg-thread.empty { background: transparent; padding: 0 0 4px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.bubble .who { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; opacity: .7; margin-bottom: 2px; }
.bubble.me { align-self: flex-end; background: var(--green); color: var(--paper); border-bottom-right-radius: 4px; }
.bubble.them { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble .chat-horse-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bubble.them .chat-horse-link { color: var(--green); text-decoration-color: var(--brass); }
.bubble.me .chat-horse-link { color: #F4DDA9; text-decoration-color: var(--brass); }

.msg-compose { display: flex; gap: 8px; align-items: stretch; }
/* Stile esplicito: questo input NON sta dentro un .field, quindi non eredita
   nulla dalle regole dei moduli. Senza queste righe torna un campo di sistema. */
.msg-compose input[type="text"] {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 11px 16px; font-size: 14px; font-family: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
}
.msg-compose input[type="text"]::placeholder { color: var(--ink-soft); opacity: .75; }
.msg-compose input[type="text"]:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,147,90,.22); }
.msg-compose button { min-height: 44px; border-radius: 22px; padding: 0 20px; white-space: nowrap; flex: 0 0 auto; }

.msg-note { font-size: 11.5px; color: var(--ink-soft); margin: 9px 2px 0; line-height: 1.45; }

/* L'altro canale resta a un clic, ma non e' piu' una scelta da fare PRIMA di
   poter scrivere: chi arriva su un annuncio quasi sempre vuole il privato. */
.msg-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; color: var(--leather); text-decoration: none; }
.msg-switch:hover { text-decoration: underline; }
.msg-count { background: var(--brass); color: var(--green-dark); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- riquadro messaggi fisso (includes/footer.php) ----------
   Fisso in basso a destra su ogni pagina, per chi ha un account. Sta sopra
   il banner cookie (z-index piu' alto non serve: il banner sparisce dopo il
   consenso) ma sotto eventuali finestre modali.
   Su telefono occupa quasi tutta la larghezza: un pannello da 340px su uno
   schermo da 360 lascerebbe una striscia inutile e il testo illeggibile. */
.hf-chat { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-size: 14px; }

/* NECESSARIA, non difensiva. L'attributo `hidden` vale display:none solo per
   il foglio di stile del browser: QUALSIASI regola d'autore che imposti
   display lo batte. Senza questa riga, .hf-chat-panel{display:flex} teneva il
   pannello della chat APERTO su ogni pagina per ogni utente loggato, e il
   modulo di scrittura visibile anche sull'elenco.
   E' la stessa collisione della regola 13 (il campo libretto che compariva
   senza consenso): quando si nasconde qualcosa con `hidden`, il CSS deve
   confermarlo, non contraddirlo. */
.hf-chat [hidden] { display: none !important; }

.hf-chat-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--green); color: var(--paper);
  box-shadow: 0 4px 14px rgba(21,42,33,.35);
  display: flex; align-items: center; justify-content: center;
}
.hf-chat-btn:hover { background: var(--green-dark); }
.hf-chat-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.hf-chat-icon { font-size: 23px; line-height: 1; }
.hf-chat-badge {
  position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px;
  padding: 0 6px; border-radius: 999px; background: var(--rust); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 21px; text-align: center;
  border: 2px solid var(--paper); font-variant-numeric: tabular-nums;
}

.hf-chat-panel {
  position: absolute; right: 0; bottom: 68px; width: 340px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 10px 34px rgba(21,42,33,.28);
}
.hf-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--green); color: var(--paper); flex: 0 0 auto;
}
.hf-chat-head strong { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-chat-back, .hf-chat-close {
  background: none; border: none; color: var(--paper); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px; border-radius: 3px; flex: 0 0 auto;
}
.hf-chat-back:hover, .hf-chat-close:hover { background: rgba(255,255,255,.15); }
.hf-chat-all { color: var(--paper); opacity: .85; font-size: 12px; text-decoration: underline; flex: 0 0 auto; }

.hf-chat-body { flex: 1 1 auto; overflow-y: auto; min-height: 120px; }
.hf-chat-vuoto { padding: 22px 16px; color: var(--ink-soft); font-size: 13px; text-align: center; margin: 0; }

.hf-conv {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  width: 100%; padding: 10px 12px; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit;
}
.hf-conv > * { min-width: 0; }
.hf-conv:hover { background: var(--paper-dark); }
.hf-conv.unread { background: #FBF6EA; }
.hf-conv.unread .hf-conv-ultimo, .hf-conv.unread strong { font-weight: 700; color: var(--ink); }
.hf-conv img, .hf-conv-noimg {
  width: 40px; height: 40px; border-radius: 3px; object-fit: cover;
  background: var(--paper-dark); display: flex; align-items: center; justify-content: center;
}
.hf-conv-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hf-conv-top { display: flex; align-items: baseline; gap: 8px; }
.hf-conv-top strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-conv-quando { margin-left: auto; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.hf-conv-cavallo { font-size: 11.5px; color: var(--leather); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-conv-ultimo { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hf-chat-thread { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: var(--paper-dark); }
.hf-chat-thread .bubble { max-width: 84%; font-size: 13px; }
/* In attesa di risposta dal server: il messaggio c'e' gia' ma si vede che non
   e' ancora confermato. Se l'invio fallisce diventa rosso e il testo torna nel
   campo, invece di sparire senza spiegazione. */
.hf-chat-thread .bubble.pending { opacity: .55; }
.hf-chat-thread .bubble.failed { background: var(--rust); color: #fff; opacity: 1; }

.hf-chat-form { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--line); flex: 0 0 auto; }
.hf-chat-form input[type="text"] {
  flex: 1; min-width: 0; min-height: 40px; padding: 9px 13px; font: inherit;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px;
}
.hf-chat-form input[type="text"]:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,147,90,.22); }
.hf-chat-form button { min-height: 40px; border-radius: 20px; padding: 0 15px; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 420px) {
  .hf-chat { right: 12px; bottom: 12px; left: 12px; }
  .hf-chat-btn { margin-left: auto; }
  .hf-chat-panel { width: auto; left: 0; right: 0; max-height: 76vh; }
}

/* ---------- sezione messaggi nel profilo (my-listings.php) ---------- */
.profile-messages {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
  padding: 14px 16px; min-height: 44px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  text-decoration: none; color: var(--ink);
}
.profile-messages > * { min-width: 0; }
.profile-messages:hover { border-color: var(--brass); }
.profile-messages.unread { border-left: 3px solid var(--brass); background: #FBF6EA; }
.pm-icon { font-size: 19px; color: var(--leather); flex: 0 0 auto; }
.pm-txt { display: flex; flex-direction: column; gap: 1px; }
.pm-txt strong { font-size: 14.5px; font-weight: 600; }
.pm-txt span { font-size: 12.5px; color: var(--ink-soft); }
.pm-arrow { margin-left: auto; color: var(--leather); flex: 0 0 auto; }

/* ---------- elenco delle conversazioni (messaggi.php) ---------- */
.thread-list { display: flex; flex-direction: column; gap: 8px; }
.thread-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; min-height: 44px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  text-decoration: none; color: var(--ink);
}
.thread-row > * { min-width: 0; }   /* vedi regola 16: senza, un testo lungo sfonda */
.thread-row:hover { border-color: var(--brass); }
/* Il non letto si vede dal peso del testo e da una barra a sinistra, non solo
   dal numero: il numero e' piccolo e su un elenco lungo si perde. */
.thread-row.unread { border-left: 3px solid var(--brass); background: #FBF6EA; }
.thread-row.unread .thread-last, .thread-row.unread .thread-top strong { font-weight: 700; color: var(--ink); }

.thread-photo { width: 52px; height: 52px; border-radius: 3px; overflow: hidden; background: var(--paper-dark); display: flex; align-items: center; justify-content: center; }
.thread-photo img { width: 100%; height: 100%; object-fit: cover; }
.thread-photo-empty { font-size: 22px; opacity: .5; }

.thread-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thread-top { display: flex; align-items: baseline; gap: 10px; }
.thread-top strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-when { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.thread-horse { font-size: 12px; color: var(--leather); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-last { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-you { color: var(--ink-soft); opacity: .8; }

@media (max-width: 420px) {
  .thread-row { grid-template-columns: 44px 1fr auto; }
  .thread-photo { width: 44px; height: 44px; }
}

.thread-picker { margin-bottom: 11px; font-size: 12.5px; color: var(--ink-soft); }
.thread-picker select { padding: 7px 9px; border-radius: 3px; border: 1px solid var(--line); background: var(--paper); font-family: inherit; font-size: 13px; margin-left: 6px; }

/* Sotto i 360px il campo diventerebbe troppo stretto per scrivere: solo li'
   il pulsante va a capo. A 390px (iPhone base) restano affiancati. */
@media (max-width: 359px) {
  .msg-compose { flex-wrap: wrap; }
  .msg-compose input[type="text"] { flex: 1 1 100%; }
  .msg-compose button { flex: 1 1 100%; }
}

/* ---------- auth ---------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--green); padding: 20px; }
.auth-box { width: 100%; max-width: 380px; background: var(--paper); border-radius: 4px; padding: 34px; position: relative; }
.auth-box h1 { text-align: center; font-size: 26px; margin: 6px 0 8px; }
.auth-box p.tagline { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 20px; }
.sponsor-pill { display: flex; justify-content: center; margin-bottom: 20px; }
.sponsor-pill .inner { background: var(--paper-dark); border-radius: 999px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; }
.auth-footnote { font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 18px; line-height: 1.5; }
.auth-lang { position: absolute; top: 16px; right: 16px; }

/* ---------- auth hero (vetrina login/registrazione) ---------- */
.auth-split { display: flex; width: 100%; max-width: 940px; min-height: 580px; background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-hero-side {
  flex: 1 1 46%;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(21,42,33,.25), rgba(21,42,33,.72)), url('auth-hero.jpg');
  background-size: cover;
  background-position: center 55%;
  color: #fff;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.auth-hero-side .hero-brand { position: absolute; top: 30px; left: 34px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 22px; color: #fff; display: flex; align-items: center; gap: 7px; }
.auth-hero-side .hero-brand .dot { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--brass); }
.auth-hero-side h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; line-height: 1.2; margin: 0 0 14px; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.auth-hero-side p.hero-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0 0 22px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.auth-hero-side ul.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-hero-side ul.hero-points li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.95); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.auth-hero-side ul.hero-points li svg { flex-shrink: 0; }
.auth-form-side { flex: 1 1 54%; padding: 40px 40px; overflow-y: auto; position: relative; display: flex; flex-direction: column; justify-content: center; }
.auth-form-side .auth-box { max-width: 360px; margin: 0 auto; padding: 0; width: 100%; }

@media (max-width: 800px) {
  .auth-split { flex-direction: column; min-height: 0; max-width: 420px; }
  .auth-hero-side {
    flex: none;
    min-height: 300px;
    padding: 26px;
    justify-content: flex-start;
  }
  .auth-hero-side .hero-brand { position: static; margin-bottom: 24px; }
  .auth-hero-side h2 { font-size: 23px; margin-top: 0; }
  .auth-hero-side p.hero-sub { margin-bottom: 0; }
  .auth-hero-side ul.hero-points { display: none; }
  .auth-form-side { padding: 26px; }
  .auth-form-side .auth-lang { position: static; margin-bottom: 8px; }
}

/* switch lingua: compatto, spinto a destra, leggibile sul fondo chiaro */
.auth-form-side .auth-lang.lang-switch { margin-left: auto; width: -moz-fit-content; width: fit-content; }
.auth-form-side .lang-switch a { color: var(--ink-soft); }
.auth-form-side .lang-switch a.active { background: var(--brass); color: #fff; }

/* ---------- footer ---------- */
/* Il pulsante del banner cookie e' il primo comando che tocca CHIUNQUE arrivi
   sul sito, da qualsiasi dispositivo, e con .btn-sm veniva alto 30px. Qui e'
   portato a 44px senza toccare .btn-sm, che e' usato in decine di altri punti
   dove l'altezza attuale va bene. */
#cookie-banner .btn { min-height: 44px; padding: 0 20px; }

footer.site-footer { background: var(--green-dark); border-top: 1px solid var(--line); margin-top: 50px; }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 22px; }
footer.site-footer .demo-note { color: var(--paper); opacity: .6; font-size: 11.5px; }
/* I sei link stavano in un display:flex SENZA flex-wrap, scritto in linea nel
   markup. Sotto i ~380px non andavano a capo: sforavano, e trascinavano OGNI
   pagina del sito in scorrimento orizzontale — la pagina scivolava di lato al
   primo swipe. Erano anche alti 18px, meta' di un bersaglio tattile decente. */
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-links a { color: var(--paper); opacity: .7; font-size: 12px; padding: 7px 0; line-height: 1.2; }
.footer-links a:hover { opacity: 1; }
@media (max-width: 560px) {
  footer.site-footer .wrap { flex-direction: column; align-items: flex-start; text-align: left; }
}
.footer-sponsor { background: rgba(242,236,223,.08); border-radius: 999px; padding: 8px 16px; }
.footer-sponsor a, .footer-sponsor span { color: var(--paper); }

/* ---------- flash / alerts ---------- */
.flash { background: var(--green); color: var(--paper); padding: 12px 18px; border-radius: 3px; margin: 16px 0; font-size: 13.5px; }
.flash-error { background: var(--rust); }
.ig-preview { max-width: 280px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 14px; background: var(--paper); }
.ig-preview .head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 500; }
.ig-preview .square { aspect-ratio: 1/1; }
.ig-preview .caption { padding: 10px 12px; font-size: 12px; line-height: 1.5; }

.section-pad { padding: 50px 0; }
.how-it-works { background: var(--paper-dark); border-top: 1px solid var(--line); }
.how-it-works .grid-3 { padding: 50px 0; }
.step-n { font-family: var(--mono); color: var(--brass-dark); font-size: 13px; }
.step-title { font-family: 'Fraunces', Georgia, serif; font-size: 17px; margin: 8px 0; }
.step-body { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

.empty-state { text-align: center; padding: 70px 0; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   Pagina Riepilogo settimanale (admin-riepilogo.php)
   -------------------------------------------------------------------------
   Due colonne su schermo largo: a sinistra COSA partira' (coda e anteprima),
   a destra COSA FARE (prova e invio vero). Su desktop una colonna sola
   lasciava mezzo schermo vuoto e costringeva a scorrere per arrivare ai
   comandi.
   I bordi seguono il linguaggio gia' in uso nel sito: TRATTEGGIATO per i
   riquadri da leggere (.panel), PIENO per quelli con cui si interagisce
   (.riep-form) — la stessa distinzione di .sidebar-box e .contact-row. */
.riep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .riep-grid { grid-template-columns: 1fr; } }
.riep-grid > * { min-width: 0; }   /* regola 17: senza, un'email lunga sfonda */

.riep-form { border: 1px solid var(--line); border-radius: 4px; padding: 20px; margin-bottom: 22px; background: #fff; }
.riep-form h2 { font-size: 16px; margin: 0 0 8px; }
.riep-form.riep-vero { background: var(--paper-dark); }

/* L'elenco dei destinatari: su schermo largo due colonne, cosi' cinquanta
   utenti restano visibili senza diventare una striscia altissima. */
.riep-utenti { border: 1px solid var(--line); border-radius: 4px; padding: 10px; max-height: 320px; overflow-y: auto; }
.riep-utenti label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; font-size: 14px; }
.riep-utenti label > span { min-width: 0; overflow-wrap: anywhere; }
.riep-utenti input { margin-top: 3px; flex-shrink: 0; }
@media (min-width: 1000px) { .riep-utenti { columns: 2; column-gap: 18px; }
  .riep-utenti label { break-inside: avoid; } }

.riep-nota { font-size: 13px; color: var(--ink-soft); }
.riep-warn { font-size: 12px; color: #a33; }
/* Tetto d'altezza: con otto cavalli l'anteprima e' lunga quanto la pagina e
   schiaccia tutto il resto. E' un testo da controllare, non da leggere. */
.riep-pre { white-space: pre-wrap; font-size: 13px; line-height: 1.6; background: var(--paper-dark); padding: 14px; border-radius: 4px; overflow: auto; max-height: 420px; margin: 0; }
.riep-coda { font-size: 14px; margin: 0 0 14px; padding-left: 18px; line-height: 1.7; }

/* Ritorno alla console di amministrazione. Bersaglio tattile pieno (44px di
   altezza di riga) e riga propria sopra il titolo: prima era un link da 13px
   accanto al titolo, che su telefono andava a capo e si staccava. */
.admin-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--leather); font-size: 14px; text-decoration: none; }
.admin-back:hover { text-decoration: underline; }

/* ---------- richieste compratori: proposte e chat ---------- */
.request-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.request-stats .panel { text-align:center; padding:16px; }
.request-stats strong { display:block; font-family:var(--mono); font-size:27px; color:var(--green); }
.request-stats strong.rust { color:var(--rust); }
.request-stats span { display:block; margin-top:4px; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.request-admin-card { margin-bottom:18px; scroll-margin-top:20px; }
.request-admin-card.request-focus { box-shadow:0 0 0 3px rgba(184,147,90,.24); }
.request-admin-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.request-admin-head > div > strong { font-size:16px; }
.request-meta { margin-top:3px; color:var(--ink-soft); font:11px/1.4 var(--mono); overflow-wrap:anywhere; }
.request-stage-form select { min-width:150px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); }
.request-summary { margin:12px 0 8px; font-size:13.5px; }
.request-notes { margin:0 0 12px; color:var(--ink-soft); font-size:13px; font-style:italic; }
.request-consents { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 15px; }
.request-consents span { border-radius:999px; padding:5px 9px; font-size:11.5px; font-weight:600; }
.request-consents .ok { color:var(--green); background:#E1ECE4; }
.request-consents .off { color:var(--rust); background:#F8E6DF; }
.request-suggested { margin:0 0 16px; padding:11px 13px; background:#F7F1E3; border-left:3px solid var(--brass); font-size:12.5px; }
.request-subtitle { margin:20px 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.request-empty { margin:0; color:var(--ink-soft); font-size:12.5px; font-style:italic; }
.request-match-list { border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.request-match-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); }
.request-match-row:last-child { border-bottom:0; }
.request-match-row > div { min-width:0; }
.request-match-row a { color:var(--green); }
.request-match-row div span { display:block; color:var(--ink-soft); font-size:11.5px; overflow-wrap:anywhere; }
.match-score { min-width:42px; text-align:center; border-radius:999px; background:#E1ECE4; color:var(--green); padding:4px 7px; font:700 11px/1 var(--mono); }
.request-manual { margin-top:11px; padding:10px 12px; border:1px dashed var(--line); border-radius:4px; }
.request-manual summary { cursor:pointer; color:var(--leather); font-size:12.5px; font-weight:600; }
.request-manual form { margin-top:12px; }
.wanted-suggestions { margin:0 0 24px; padding:22px; background:var(--green-dark); border-radius:6px; color:var(--paper); scroll-margin-top:20px; }
.wanted-section-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.wanted-section-head span { display:block; margin-bottom:4px; color:#D9B879; font-size:10px; font-weight:700; letter-spacing:.12em; }
.wanted-section-head h2 { margin:0; color:var(--paper); font-size:24px; }
.wanted-section-head small { display:flex; align-items:center; justify-content:center; min-width:28px; height:28px; border:1px solid var(--brass); border-radius:999px; }
.wanted-card-list { display:flex; flex-direction:column; gap:12px; }
.wanted-horse-card { display:grid; grid-template-columns:150px minmax(0,1fr); overflow:hidden; background:var(--paper); border:1px solid #D8CCAE; border-radius:5px; color:var(--ink); text-decoration:none; }
.wanted-horse-card:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(0,0,0,.14); }
.wanted-horse-photo { display:flex; align-items:center; justify-content:center; min-height:130px; background:#E7DCC0; font-size:34px; }
.wanted-horse-photo img { width:100%; height:100%; min-height:130px; object-fit:cover; }
.wanted-horse-copy { display:flex; flex-direction:column; justify-content:center; padding:15px 17px; min-width:0; }
.wanted-horse-copy strong { color:var(--green); font-size:18px; }
.wanted-horse-copy span { color:var(--ink-soft); font-size:12px; line-height:1.5; }
.wanted-horse-copy b { margin-top:5px; color:var(--leather); font-family:var(--mono); font-size:15px; }
.wanted-horse-copy em { align-self:flex-start; margin-top:8px; padding:4px 8px; border-radius:999px; background:#E1ECE4; color:var(--green); font-size:10.5px; font-style:normal; font-weight:700; }
.wanted-chat { scroll-margin-top:20px; }
@media (max-width:620px) {
  .request-admin-head { flex-direction:column; }
  .request-stage-form, .request-stage-form select { width:100%; }
  .request-match-row { grid-template-columns:minmax(0,1fr) auto; }
  .request-match-row form { grid-column:1 / -1; }
  .request-match-row form .btn { width:100%; }
  .wanted-suggestions { padding:16px; }
  .wanted-horse-card { grid-template-columns:1fr; }
  .wanted-horse-photo, .wanted-horse-photo img { min-height:180px; max-height:240px; }
}