/* ===========================================================================
   annunci-cartomanzia.com — foglio di stile unico
   Tema chiaro: carta avorio, viola profondo e oro antico.

   Tutti i colori nascono dalle variabili qui sotto: per cambiare l'aspetto
   del sito basta modificare questo primo blocco.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Sfondi e superfici */
  --sfondo:       #faf8f4;   /* carta avorio, sfondo della pagina */
  --sfondo-2:     #ffffff;   /* campi dei moduli */
  --superficie:   #ffffff;   /* riquadri e schede */
  --superficie-2: #f5f2fb;   /* superfici leggermente colorate */

  --bordo:        #ded7ee;
  --bordo-tenue:  #ece7f6;

  /* Oro: la tinta scura serve per i testi, quella viva per bordi e sfumature */
  --oro:          #96690f;
  --oro-vivo:     #d3a12c;
  --oro-chiaro:   #f4dc9f;

  /* Viola */
  --viola:        #6d3ecf;
  --viola-chiaro: #7c4ddb;
  --viola-scuro:  #4a24a3;

  /* Testo */
  --testo:        #241b36;
  --testo-tenue:  #5c5372;
  --testo-fioco:  #877e9c;

  /* Colori di stato */
  --ok:      #0f7d57;
  --errore:  #c02744;
  --avviso:  #a86a00;
  --allerta: #c2410c;

  --raggio:    14px;
  --raggio-sm: 9px;
  --ombra:     0 10px 30px rgba(60, 40, 110, .08);
  --ombra-alta: 0 16px 38px rgba(60, 40, 110, .14);

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--sfondo);
  background-image:
    radial-gradient(1100px 520px at 10% -10%, rgba(109, 62, 207, .10), transparent 62%),
    radial-gradient(900px 460px at 94% 2%, rgba(211, 161, 44, .12), transparent 64%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 .5em;
  letter-spacing: .1px;
  color: var(--testo);
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

a { color: var(--viola); text-decoration: none; transition: color .18s; }
a:hover { color: var(--oro); }

p { margin: 0 0 1em; }

img { max-width: 100%; display: block; }

::selection { background: rgba(109, 62, 207, .18); }

.contenitore {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.sezione { padding: 56px 0; }
.sezione-stretta { max-width: 780px; margin: 0 auto; }

.centrato { text-align: center; }
.tenue { color: var(--testo-tenue); }
.piccolo { font-size: .875rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }


/* --- Testata ------------------------------------------------------------ */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}

.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--testo);
  white-space: nowrap;
}
.logo:hover { color: var(--testo); }
.logo-simbolo { color: var(--oro-vivo); font-size: 1.35rem; }
.logo-testo strong { color: var(--oro); font-weight: 600; }

.navigazione {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: .94rem;
}
.navigazione > a { color: var(--testo-tenue); }
.navigazione > a:hover { color: var(--viola); }

.nav-utente { display: inline-flex; align-items: center; gap: 8px; color: var(--testo) !important; }
.nav-admin { color: var(--oro) !important; font-weight: 600; }
.nav-esci { color: var(--testo-fioco) !important; }

.avatar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--viola-chiaro), var(--viola-scuro));
  font-size: .8rem; font-weight: 700; color: #fff;
}

.menu-tasto {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  background: none; border: 1px solid var(--bordo); border-radius: var(--raggio-sm);
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.menu-tasto span { width: 18px; height: 2px; background: var(--testo); border-radius: 2px; }


/* --- Bottoni ------------------------------------------------------------ */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--raggio-sm);
  background: linear-gradient(135deg, var(--viola-chiaro), var(--viola-scuro));
  color: #fff !important;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.bottone:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(109, 62, 207, .28);
  filter: brightness(1.05);
}
.bottone:active { transform: translateY(0); }
.bottone:focus-visible { outline: 3px solid rgba(109, 62, 207, .35); outline-offset: 2px; }

.bottone-oro {
  background: linear-gradient(135deg, #f3ca62, #c08f14);
  color: #2f2204 !important;
}
.bottone-oro:hover { box-shadow: 0 8px 20px rgba(192, 143, 20, .32); }

.bottone-fantasma {
  background: #fff;
  border-color: var(--bordo);
  color: var(--testo) !important;
}
.bottone-fantasma:hover {
  border-color: var(--viola-chiaro);
  background: var(--superficie-2);
  box-shadow: none;
}

.bottone-pericolo {
  background: #fff;
  border-color: rgba(192, 39, 68, .35);
  color: var(--errore) !important;
}
.bottone-pericolo:hover { background: rgba(192, 39, 68, .07); box-shadow: none; }

.bottone-piccolo { padding: 8px 15px; font-size: .85rem; }
.bottone-largo { width: 100%; }


/* --- Avvisi ------------------------------------------------------------- */

.avviso {
  margin: 18px 0;
  padding: 13px 18px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--viola);
  background: var(--superficie);
  font-size: .93rem;
  box-shadow: var(--ombra);
}
.avviso-ok     { border-left-color: var(--ok);     background: #f0faf5; }
.avviso-errore { border-left-color: var(--errore); background: #fdf2f4; }
.avviso-info   { border-left-color: var(--viola-chiaro); background: #f7f4fd; }

.elenco-errori {
  margin: 0 0 20px;
  padding: 14px 18px 14px 36px;
  border: 1px solid rgba(192, 39, 68, .25);
  border-left: 3px solid var(--errore);
  border-radius: var(--raggio-sm);
  background: #fdf2f4;
  color: #8f1d33;
  font-size: .92rem;
}
.elenco-errori li { margin: 3px 0; }


/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--bordo);
  background:
    radial-gradient(760px 340px at 50% -10%, rgba(211, 161, 44, .16), transparent 70%),
    linear-gradient(180deg, #fffdf8, var(--sfondo));
}
/* Puntini luminosi appena accennati, come polvere d'oro sulla carta */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2.4px 2.4px at 12% 22%, rgba(211, 161, 44, .55), transparent),
    radial-gradient(2px 2px at 78% 16%, rgba(109, 62, 207, .32), transparent),
    radial-gradient(2.2px 2.2px at 34% 74%, rgba(211, 161, 44, .45), transparent),
    radial-gradient(1.8px 1.8px at 62% 58%, rgba(109, 62, 207, .25), transparent),
    radial-gradient(2.4px 2.4px at 88% 68%, rgba(211, 161, 44, .40), transparent),
    radial-gradient(1.8px 1.8px at 22% 46%, rgba(109, 62, 207, .22), transparent);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-occhiello {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid rgba(211, 161, 44, .55);
  border-radius: 999px;
  background: rgba(211, 161, 44, .12);
  color: var(--oro);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--oro); }
.hero-sotto {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--testo-tenue);
  font-size: 1.06rem;
}


/* --- Barra di ricerca --------------------------------------------------- */

.ricerca {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr auto;
  gap: 10px;
  max-width: 940px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: var(--ombra-alta);
}
.ricerca input, .ricerca select { margin: 0; }

/* Interruttore dei filtri: serve solo da telefono, sul resto non si vede. */
.interruttore-filtri { position: absolute; opacity: 0; pointer-events: none; }
.filtri-tasto { display: none; }


/* --- Moduli ------------------------------------------------------------- */

.campo { margin-bottom: 18px; }

label {
  display: block;
  margin-bottom: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--testo-tenue);
}
label .obbl { color: var(--errore); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=number], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--sfondo-2);
  color: var(--testo);
  font: inherit;
  font-size: .95rem;
  transition: border-color .16s, box-shadow .16s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--viola-chiaro);
  box-shadow: 0 0 0 3px rgba(109, 62, 207, .15);
}
input::placeholder, textarea::placeholder { color: var(--testo-fioco); }

input[type=file] {
  width: 100%;
  padding: 11px 14px;
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--superficie-2);
  font-size: .9rem;
  color: var(--testo-tenue);
}

textarea { min-height: 190px; resize: vertical; line-height: 1.6; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23877e9c' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  padding-right: 36px;
}

.aiuto { margin: 6px 0 0; font-size: .8rem; color: var(--testo-fioco); }

.riga-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem; color: var(--testo-tenue); font-weight: 400;
}
.checkbox input { width: auto; margin-top: 3px; accent-color: var(--viola); }


/* --- Pannelli ----------------------------------------------------------- */

.pannello {
  padding: 28px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.pannello-stretto { max-width: 460px; margin: 48px auto; }
.pannello + .pannello { margin-top: 22px; }

.pannello-titolo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.pannello-titolo h2, .pannello-titolo h3 { margin: 0; }


/* --- Elenco degli annunci ----------------------------------------------
   Impaginazione orizzontale: foto piccola a sinistra, testo a destra, uno
   sotto l'altro. Serve a far entrare 4-5 annunci in una schermata, anche
   da telefono, invece di uno solo come con le schede alte.
   ---------------------------------------------------------------------- */

.griglia {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 176px 1fr;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(60, 40, 110, .05);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--viola-chiaro);
  box-shadow: var(--ombra);
}

.card-evidenza {
  border-color: rgba(211, 161, 44, .6);
  background: linear-gradient(90deg, #fdf6e4, var(--superficie) 38%);
}

.card-top {
  border-color: var(--oro-vivo);
  background: linear-gradient(90deg, #fbeecb, var(--superficie) 42%);
  box-shadow: 0 0 0 1px rgba(211, 161, 44, .3), 0 6px 20px rgba(192, 143, 20, .14);
}
.card-top:hover {
  border-color: #b8891a;
  box-shadow: 0 0 0 1px rgba(211, 161, 44, .5), 0 10px 26px rgba(192, 143, 20, .2);
}

/* --- Foto ---------------------------------------------------------- */

.card-foto {
  position: relative;
  display: block;
  background: linear-gradient(135deg, var(--superficie-2), #ece6f8);
  overflow: hidden;
}
.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.card:hover .card-foto img { transform: scale(1.04); }
.card-foto-vuota {
  display: grid; place-items: center; height: 100%;
  font-size: 1.9rem; color: rgba(211, 161, 44, .55);
}

.badge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .9px;
  white-space: nowrap;
}
.badge-top {
  background: linear-gradient(135deg, #f3ca62, #c08f14);
  color: #2f2204;
  box-shadow: 0 2px 8px rgba(192, 143, 20, .4);
}
.badge-evidenza {
  background: #fff;
  border: 1px solid rgba(211, 161, 44, .65);
  color: var(--oro);
}

/* --- Testo --------------------------------------------------------- */

.card-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;              /* senza questo i testi lunghi sfondano la griglia */
  padding: 13px 16px;
}

.card-titolo {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.3;
}
.card-titolo a { color: var(--testo); }
.card-titolo a:hover { color: var(--viola); }

/* Tutta la riga è cliccabile: comodo soprattutto col dito. */
.card-titolo a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .74rem;
}
.tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(109, 62, 207, .10);
  border: 1px solid rgba(109, 62, 207, .22);
  color: var(--viola);
  font-weight: 600;
  white-space: nowrap;
}
.card-luogo { color: var(--testo-fioco); }

.card-testo {
  margin: 0;
  font-size: .85rem;
  color: var(--testo-tenue);
  /* Una riga sola: l'annuncio completo si legge aprendolo. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-azioni {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 2px;
  font-size: .78rem;
}
.card-info { color: var(--testo-tenue); min-width: 0; }
.card-data { color: var(--testo-fioco); }
.card-tariffa { color: var(--oro); font-weight: 700; white-space: nowrap; }
.card-azioni .bottone {
  position: relative;
  z-index: 2;                /* sopra il collegamento che copre la riga */
  margin-left: auto;
}


/* --- Stato vuoto -------------------------------------------------------- */

.vuoto {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie-2);
}
.vuoto-simbolo { font-size: 2.6rem; color: rgba(211, 161, 44, .6); margin-bottom: 10px; }


/* --- Paginazione -------------------------------------------------------- */

.paginazione {
  display: flex; justify-content: center; align-items: center;
  gap: 7px; flex-wrap: wrap;
  margin-top: 40px;
}
.paginazione a, .paginazione span {
  min-width: 40px;
  padding: 9px 13px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: #fff;
  color: var(--testo-tenue);
  font-size: .9rem;
  text-align: center;
}
.paginazione a:hover { border-color: var(--viola-chiaro); color: var(--viola); }
.paginazione .attiva {
  background: linear-gradient(135deg, var(--viola-chiaro), var(--viola-scuro));
  border-color: transparent; color: #fff; font-weight: 700;
}
.paginazione .puntini { border: none; background: none; }


/* --- Dettaglio annuncio ------------------------------------------------- */

.dettaglio { display: grid; grid-template-columns: 1fr 350px; gap: 30px; align-items: start; }

.briciole { margin: 22px 0 16px; font-size: .84rem; color: var(--testo-fioco); }
.briciole a { color: var(--testo-tenue); }
.briciole a:hover { color: var(--viola); }
.briciole span { margin: 0 7px; }

.galleria {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--ombra);
}
.galleria-grande {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--superficie-2), #ece6f8);
}
.galleria-grande img { width: 100%; height: 100%; object-fit: cover; }
.galleria-vuota {
  display: grid; place-items: center; height: 100%;
  font-size: 3.4rem; color: rgba(211, 161, 44, .55);
}
.galleria-mini { display: flex; gap: 9px; padding: 10px; overflow-x: auto; }
.galleria-mini button {
  flex: 0 0 82px; height: 62px;
  padding: 0; border: 2px solid var(--bordo-tenue); border-radius: 7px;
  background: none; cursor: pointer; overflow: hidden;
}
.galleria-mini button.attiva { border-color: var(--oro-vivo); }
.galleria-mini img { width: 100%; height: 100%; object-fit: cover; }

.intestazione-annuncio {
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--bordo-tenue);
}
.intestazione-annuncio h1 { margin-bottom: 12px; }

.attributi { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .88rem; color: var(--testo-tenue); }
.attributi strong { color: var(--testo); font-weight: 600; }

.descrizione { font-size: 1.02rem; line-height: 1.78; white-space: pre-line; }

.riquadro-contatti { position: sticky; top: 92px; }

.contatto {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 10px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--superficie-2);
  color: var(--testo) !important;
  font-weight: 600;
  transition: border-color .16s, background .16s;
}
.contatto:hover { border-color: var(--oro-vivo); background: #fdf8ec; }
.contatto-icona { font-size: 1.2rem; color: var(--viola); }
.contatto small { display: block; font-size: .74rem; font-weight: 400; color: var(--testo-fioco); }

.nastro-promo {
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid rgba(211, 161, 44, .55); border-radius: var(--raggio-sm);
  background: linear-gradient(135deg, #fdf3dc, #fdfaf1);
  font-size: .88rem;
}

/* Il contatto principale: il modulo di messaggio, evidenziato */
.contatto-primario {
  background: linear-gradient(135deg, #f3ca62, #e0af35);
  border-color: #c08f14;
  color: #2f2204 !important;
}
.contatto-primario:hover { background: linear-gradient(135deg, #f6d78a, #d8a52c); }
.contatto-primario .contatto-icona { color: #6b4d05; }
.contatto-primario small { color: #6b4d05; }

/* Numero ancora coperto: si scopre con un clic */
.contatto-nascosto {
  width: 100%;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  letter-spacing: .5px;
}
.contatto-nascosto:hover { border-color: var(--viola-chiaro); background: #f7f4fd; }
.contatto-nascosto small { letter-spacing: 0; color: var(--viola); font-weight: 600; }

/* Campo trappola per i programmi automatici: fuori dallo schermo, non
   display:none, perché alcuni bot ignorano gli elementi nascosti così. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Collegamento discreto per segnalare un annuncio */
.segnala-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: .82rem;
  color: var(--testo-fioco) !important;
}
.segnala-link:hover { color: var(--allerta) !important; text-decoration: underline; }


/* --- Cruscotto / area personale ----------------------------------------- */

.statistiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.statistica {
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
  text-align: center;
}
.statistica-numero {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--oro);
  line-height: 1.1;
}
.statistica-nome {
  font-size: .78rem; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .8px;
}
/* Riquadro che chiede attenzione, es. segnalazioni da verificare */
.statistica-allerta {
  border-color: rgba(194, 65, 12, .45);
  background: #fff6f1;
}
.statistica-allerta .statistica-numero { color: var(--allerta); }

.riga-annuncio {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordo-tenue);
}
.riga-annuncio:last-child { border-bottom: none; }
.riga-annuncio-foto {
  width: 96px; height: 72px;
  border-radius: var(--raggio-sm);
  background: var(--superficie-2);
  overflow: hidden;
  display: grid; place-items: center;
  color: rgba(211, 161, 44, .6);
}
.riga-annuncio-foto img { width: 100%; height: 100%; object-fit: cover; }
.riga-annuncio h3 { margin: 0 0 5px; font-size: 1.02rem; }
.riga-annuncio h3 a { color: var(--testo); }
.riga-annuncio h3 a:hover { color: var(--viola); }
.riga-info { font-size: .8rem; color: var(--testo-fioco); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.riga-azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pillola {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
}
.pillola-attivo    { background: #e6f6ef; color: var(--ok); }
.pillola-in_attesa { background: #fdf3e0; color: var(--avviso); }
.pillola-sospeso   { background: #fdecef; color: var(--errore); }
.pillola-pagato    { background: #e6f6ef; color: var(--ok); }
.pillola-annullato { background: #efedf4; color: var(--testo-tenue); }
.pillola-fallito   { background: #fdecef; color: var(--errore); }
.pillola-oro       { background: #fbf0d3; color: var(--oro); }
.pillola-allerta   { background: #ffece1; color: var(--allerta) !important; }


/* --- Pacchetti di promozione -------------------------------------------- */

.pacchetti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 18px;
  margin: 28px 0;
}
.pacchetto {
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
  transition: transform .18s, border-color .18s;
}
.pacchetto:hover { transform: translateY(-4px); border-color: var(--viola-chiaro); }
.pacchetto-top {
  border-color: var(--oro-vivo);
  background: linear-gradient(180deg, #fdf6e4, var(--superficie) 50%);
}
.pacchetto-consigliato { position: relative; }
.pacchetto-consigliato::after {
  content: 'PIÙ SCELTO';
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 3px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #f3ca62, #c08f14);
  color: #2f2204; font-size: .66rem; font-weight: 800; letter-spacing: 1px;
}
.pacchetto h3 { margin-bottom: 4px; }
.pacchetto-prezzo {
  font-family: var(--serif);
  font-size: 2.15rem;
  color: var(--oro);
  line-height: 1.2;
  margin-bottom: 4px;
}
.pacchetto-durata { font-size: .82rem; color: var(--testo-fioco); margin-bottom: 16px; }
.pacchetto ul { flex: 1; list-style: none; margin: 0 0 20px; padding: 0; font-size: .87rem; }
.pacchetto li { padding-left: 22px; margin-bottom: 8px; position: relative; color: var(--testo-tenue); }
.pacchetto li::before { content: '✦'; position: absolute; left: 0; color: var(--oro-vivo); }

.riepilogo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--bordo-tenue);
  font-size: .93rem;
}
.riepilogo:last-of-type { border-bottom: none; }
.riepilogo-totale { font-size: 1.25rem; font-weight: 700; color: var(--oro); }


/* --- Tabelle ------------------------------------------------------------ */

.tabella-scroll { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabella th, table.tabella td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--bordo-tenue);
  white-space: nowrap;
}
table.tabella th {
  color: var(--testo-fioco); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .7px;
}
table.tabella tbody tr:hover { background: var(--superficie-2); }

/* Colonna "azioni": i pulsanti restano affiancati e non vengono troncati */
.celle-azioni { display: flex; gap: 6px; align-items: center; }
.celle-azioni form { margin: 0; }

/* Colonna "promo" dell'amministrazione: stato + comandi per regalare o togliere */
td.cella-promo { white-space: normal; min-width: 208px; }
.promo-stato { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.promo-scadenza { font-size: .72rem; color: var(--testo-fioco); }
.promo-form { display: flex; gap: 5px; align-items: center; margin: 0 0 6px; }
.promo-form select,
.promo-form input[type=number] {
  padding: 5px 7px;
  font-size: .78rem;
  border-radius: 6px;
}
.promo-form select { width: auto; padding-right: 24px; background-position: right 6px center; }
.promo-form input[type=number] { width: 60px; }
.promo-form .bottone { padding: 6px 11px; font-size: .78rem; }


/* --- Segnalazioni (pannello admin) -------------------------------------- */

.contatore-allerta {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--allerta);
  color: #fff;
  font-size: .7rem; font-weight: 800;
}
.bottone-fantasma .contatore-allerta { background: var(--allerta); color: #fff; }

.segnalazione {
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie-2);
}
.segnalazione:last-child { margin-bottom: 0; }
.segnalazione-aperta {
  border-left: 4px solid var(--allerta);
  background: #fffaf7;
}

.segnalazione-testata {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}

.segnalazione-annuncio { margin: 0 0 10px; font-size: .9rem; }

.segnalazione-testo {
  margin: 0 0 10px;
  padding: 12px 16px;
  border-left: 3px solid var(--bordo);
  background: #fff;
  border-radius: 0 var(--raggio-sm) var(--raggio-sm) 0;
  font-size: .93rem;
  line-height: 1.6;
  white-space: pre-line;
}

.segnalazione-nota {
  margin: 0 0 10px;
  font-size: .86rem;
  color: var(--testo-tenue);
}

.segnalazione-azioni {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--bordo-tenue);
}
.segnalazione-azioni form { margin: 0; }
.segnalazione-chiudi { display: flex; gap: 6px; align-items: center; flex: 1 1 320px; }
.segnalazione-chiudi input[type=text] { flex: 1; padding: 8px 11px; font-size: .84rem; }


/* --- Messaggi ricevuti (area personale) --------------------------------- */

.messaggio {
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie-2);
}
.messaggio:last-child { margin-bottom: 0; }
.messaggio-testata {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  margin-bottom: 8px; font-size: .88rem;
}
.messaggio-testo {
  margin: 0 0 8px;
  padding: 11px 14px;
  background: #fff;
  border-radius: var(--raggio-sm);
  font-size: .93rem;
  white-space: pre-line;
}


/* --- Diagnostica (pannello admin) --------------------------------------- */

.controllo {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordo-tenue);
}
.controllo:last-child { border-bottom: none; }
.controllo p { color: var(--testo-tenue); margin-top: 3px; }
.controllo-segno {
  flex: 0 0 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .8rem; font-weight: 800;
}
.controllo-ok .controllo-segno         { background: #e6f6ef; color: var(--ok); }
.controllo-attenzione .controllo-segno { background: #fdf3e0; color: var(--avviso); }
.controllo-errore .controllo-segno     { background: #ffece1; color: var(--allerta); }
.controllo-errore strong               { color: var(--allerta); }

.registro {
  margin: 10px 0 0;
  padding: 14px 16px;
  border-radius: var(--raggio-sm);
  background: #241b36;
  color: #ece8f8;
  font-size: .78rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--superficie-2);
  font-size: .85em;
  color: var(--viola-scuro);
}


/* --- Categorie ---------------------------------------------------------- */

.griglia-categorie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
}
.tessera-categoria {
  display: block;
  padding: 22px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
  color: var(--testo) !important;
  transition: transform .18s, border-color .18s;
}
.tessera-categoria:hover { transform: translateY(-3px); border-color: var(--oro-vivo); }
.tessera-categoria .simbolo { font-size: 1.7rem; color: var(--oro-vivo); }
.tessera-categoria h3 { margin: 8px 0 3px; font-size: 1.02rem; }
.tessera-categoria p { margin: 0; font-size: .82rem; color: var(--testo-fioco); }


/* --- Passi "come funziona" ---------------------------------------------- */

.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.passo { text-align: center; padding: 24px; }
.passo-numero {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(211, 161, 44, .55);
  background: #fdf6e4;
  font-family: var(--serif); font-size: 1.3rem; color: var(--oro);
}


/* --- Piè di pagina ------------------------------------------------------ */

.pie {
  margin-top: 72px;
  padding: 52px 0 26px;
  border-top: 1px solid var(--bordo);
  background: #fffdfa;
}
.pie-griglia {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 34px;
}
.logo-pie { margin-bottom: 12px; }
.pie-testo { font-size: .87rem; color: var(--testo-tenue); max-width: 330px; }
.pie h4 {
  font-family: var(--sans); font-size: .78rem; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--oro); margin-bottom: 12px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie li a { font-size: .87rem; color: var(--testo-tenue); }
.pie li a:hover { color: var(--viola); }

.pie-basso { padding-top: 24px; border-top: 1px solid var(--bordo-tenue); }
.disclaimer { font-size: .76rem; color: var(--testo-fioco); line-height: 1.6; max-width: 860px; }
.disclaimer strong { color: var(--testo-tenue); }
.copyright { font-size: .8rem; color: var(--testo-fioco); margin: 12px 0 0; }


/* --- Testi legali ------------------------------------------------------- */

.testo-legale h2 {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 1.12rem;
}
.testo-legale h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.testo-legale ul { padding-left: 20px; }
.testo-legale li { margin-bottom: 7px; }

/* Segnaposto ancora da compilare: devono dare fastidio finché ci sono. */
.da-compilare {
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff2c2;
  color: #7a5800;
  font-weight: 700;
}


/* --- Informativa cookie -------------------------------------------------
   Barra in fondo, non a schermo intero: il sito resta leggibile e usabile
   anche senza rispondere, come richiede il Garante (niente "cookie wall").
   ---------------------------------------------------------------------- */

.cookie-avviso {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: 0 12px 40px rgba(60, 40, 110, .22);
}
.cookie-testo { flex: 1; min-width: 0; }
.cookie-testo strong { display: block; margin-bottom: 3px; font-size: .95rem; }
.cookie-testo p { margin: 0; font-size: .84rem; color: var(--testo-tenue); line-height: 1.55; }

/* I due pulsanti sono IDENTICI: stesso colore, stessa dimensione, stesso
   risalto. Rendere "Accetta" più invitante di "Rifiuta" è il classico
   inganno grafico che il Garante contesta: il consenso non sarebbe libero. */
.cookie-tasti { display: flex; gap: 9px; flex-shrink: 0; }
.cookie-scelta {
  min-width: 118px;
  background: #fff;
  border-color: var(--bordo);
  color: var(--testo) !important;
  font-weight: 600;
}
.cookie-scelta:hover {
  background: var(--superficie-2);
  border-color: var(--viola-chiaro);
  box-shadow: none;
  transform: none;
}


/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .card { grid-template-columns: 148px 1fr; }
  .dettaglio { grid-template-columns: 1fr; }
  .riquadro-contatti { position: static; }
  .pie-griglia { grid-template-columns: 1fr 1fr; }
  .ricerca { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .menu-tasto { display: flex; }
  .navigazione {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 20px 20px;
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-alta);
  }
  .navigazione.aperta { display: flex; }
  .navigazione > a { padding: 12px 0; border-bottom: 1px solid var(--bordo-tenue); }
  .navigazione .bottone { margin-top: 14px; }

  .ricerca { grid-template-columns: 1fr; }
  .riga-campi { grid-template-columns: 1fr; }

  /* Annunci da telefono: righe basse, così ne entrano cinque o sei
     nella stessa schermata invece di una sola. */
  .griglia { gap: 9px; }

  .card {
    grid-template-columns: 104px 1fr;
    min-height: 92px;
    border-radius: 11px;
  }
  .card:hover { transform: none; }

  .card-corpo { padding: 10px 12px; gap: 3px; }

  .card-titolo {
    font-size: .95rem;
    line-height: 1.25;
    /* Al massimo due righe: il titolo lungo viene troncato con i puntini. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* L'estratto e il pulsante non servono: la riga è tutta cliccabile. */
  .card-testo { display: none; }
  .card-azioni .bottone { display: none; }

  .card-meta { font-size: .7rem; gap: 6px; }

  /* Su una riga sola: andando a capo la scheda cresceva di 30px, e con
     dieci annunci si perdeva quasi una schermata intera. */
  .card-azioni {
    font-size: .73rem;
    gap: 8px;
    margin-top: 0;
    flex-wrap: nowrap;
  }
  .card-info {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-tariffa { flex: 0 0 auto; }

  /* Intestazione della home ridotta: com'era occupava tutta la prima
     schermata e gli annunci si vedevano solo dopo aver scorso. */
  .hero { padding: 26px 0 22px; }
  .hero-occhiello { display: none; }
  .hero h1 { font-size: 1.6rem; margin-bottom: .3em; }
  .hero-sotto { font-size: .9rem; margin-bottom: 18px; }
  .ricerca { padding: 9px; gap: 7px; }
  .ricerca input, .ricerca select, .ricerca .bottone { padding: 10px 12px; }

  /* Nelle pagine di risultati il modulo di ricerca resta chiuso: prima
     occupava mezza schermata prima del primo annuncio. */
  .filtri-tasto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-sm);
    background: #fff;
    box-shadow: var(--ombra);
    font-size: .9rem;
    font-weight: 600;
    color: var(--testo);
    cursor: pointer;
  }
  .filtri-freccia { color: var(--viola); transition: transform .18s; }
  .interruttore-filtri:not(:checked) ~ .ricerca { display: none; }
  .interruttore-filtri:checked ~ .filtri-tasto { border-color: var(--viola-chiaro); }
  .interruttore-filtri:checked ~ .filtri-tasto .filtri-freccia { transform: rotate(180deg); }

  /* Titoli di pagina più contenuti, per lasciare spazio ai contenuti. */
  .sezione h1 { font-size: 1.5rem; }

  .cookie-avviso {
    left: 8px; right: 8px; bottom: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .cookie-tasti .bottone { flex: 1; min-width: 0; }

  .badge { top: 6px; left: 6px; padding: 2px 7px; font-size: .56rem; letter-spacing: .6px; }
  .riga-annuncio { grid-template-columns: 72px 1fr; }
  .riga-annuncio-foto { width: 72px; height: 60px; }
  .riga-azioni { grid-column: 1 / -1; justify-content: flex-start; }
  .pie-griglia { grid-template-columns: 1fr; gap: 26px; }
  .sezione { padding: 40px 0; }
  .pannello { padding: 22px 18px; }
  .segnalazione-chiudi { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}