/* recensioni-mobile.css */
/* Attivo SOLO su schermi <= 768px (grazie al media nel link) */

:root{
  --verde-acqua: #00C9A7;
  --rosso-mela: #E63946;
  --bianco: #ffffff;
  --grigio: #f5f5f5;
  --bianco-panna: #F7F3EE;

  --page-text: #111827;
  --page-muted: #4B5563;
  --page-muted2: #6B7280;

  --surface: rgba(255,255,255,0.92);
  --surface-2: rgba(255,255,255,0.78);
  --border: rgba(17,24,39,0.14);

  --shadow: 0 16px 40px rgba(0,0,0,0.12);
  --radius: 18px;
  --radius2: 14px;
}

/* Layout generale mobile */
body{
  background: linear-gradient(180deg, var(--bianco-panna), var(--grigio));
  color: var(--page-text);
}

/* Sfondo: meno blur e più leggibile su mobile */
.bg{
  filter: blur(3px) saturate(1.03);
  opacity: 0.92;
  background-position: top center; /* più naturale su telefono */
}

/* Header: meno altezza, più “headline” */
.header{
  min-height: auto;
  padding: 18px 12px 10px;
}

.header-inner{
  padding: 10px 8px;
}

.header h1{
  font-size: 26px;
  line-height: 1.1;
  text-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.header p{
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 10px;
  color: var(--page-muted);
}

/* Container: più padding laterale */
.container{
  width: calc(100% - 24px);
}

/* Card: più compatte e leggibili */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Titoli sezioni più piccoli */
.card-header{
  padding: 14px 14px 0;
}

.card-header h2{
  font-size: 17px;
  line-height: 1.2;
}

.card-header p{
  font-size: 13px;
  color: var(--page-muted2);
}

/* Form: spaziatura touch-friendly */
form{
  padding: 14px;
}

.grid{
  gap: 12px;
}

.field label{
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
}

/* Input e textarea: 16px evita zoom iOS */
.field input[type="text"],
.field textarea{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 12px 12px;
  font-size: 16px; /* importantissimo su iPhone */
  color: var(--page-text);
}

.field textarea{
  min-height: 120px;
}

/* Rating: layout più stretto su telefono */
.rating{
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 10px;
  background: var(--surface-2);
}

.star{
  font-size: 26px;
}

.rating-hint{
  width: 100%;
  margin-left: 0;
  margin-top: 4px;
  font-size: 13px;
  color: var(--page-muted2);
}

/* Checkbox: box più leggibile */
.checkbox{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 12px 12px;
  font-size: 14px;
  color: var(--page-muted);
}

.checkbox input{
  width: 18px;
  height: 18px;
  accent-color: var(--verde-acqua);
}

/* Bottone: più grande, più “tap” */
.btn{
  padding: 14px 14px;
  font-size: 16px;
  border-radius: 999px;
}

/* Micro testo */
.micro{
  font-size: 12.5px;
  line-height: 1.4;
}

/* Se in futuro aggiungi la lista recensioni */
.reviews{
  padding: 0 14px 14px;
  gap: 10px;
}

.review-item{
  padding: 12px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--border);
}

.review-top{
  align-items: flex-start;
}

.review-stars{
  font-size: 13px;
}

.review-text{
  font-size: 14px;
  line-height: 1.5;
  color: var(--page-muted);
}

/* Riduce ombre troppo marcate su mobile */
p, label, .review-text, .micro{
  text-shadow: none;
}