/*
  Stile del modulo "Suggerimenti, reclami e complimenti".
  Stesso aspetto delle altre pagine del sito: carattere Manrope, verde Biosan,
  intestazione bianca, fascia grigio chiaro per il modulo, piè di pagina verde scuro.
  Usa proprietà logiche (inline-start/end): funziona anche in arabo (RTL).
*/

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; }

.pm-header, .pm-wrap, .pm-footer {
  --pm-accent: #01733a;
  --pm-accent-dark: #014d27;
  --pm-gold: #d3b334;
  --pm-title: #0d2a1b;
  --pm-text: #17211b;
  --pm-muted: #3d4a42;
  --pm-border: #b9c4bb;
  --pm-bg: #ffffff;
  --pm-bg-soft: #f4f6f1;
  --pm-error: #b3261e;
  --pm-radius: 10px;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", sans-serif;
}

.pm-in { max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* Intestazione */
.pm-header { border-bottom: 1px solid #e3e8e2; background: #fff; }
.pm-header .pm-in { padding-block: 16px; }
.pm-logo { display: inline-flex; align-items: center; }
.pm-logo img { height: 52px; width: auto; display: block; }

/* Titolo */
.pm-wrap { color: var(--pm-text); font-size: 1rem; line-height: 1.55; }
.pm-hero { padding: 56px 0 48px; }
.pm-wrap h1 {
  margin: 0 0 20px; max-width: 820px;
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; font-weight: 800;
  letter-spacing: -0.02em; color: var(--pm-title);
}
.pm-wrap h2 { margin: 0 0 .6rem; font-size: 1.6rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: var(--pm-title); }
.pm-intro { margin: 0; max-width: 760px; font-size: 1.2rem; line-height: 1.55; color: var(--pm-muted); }

/* Fascia del modulo */
.pm-band { background: var(--pm-bg-soft); padding: 72px 0 88px; }
.pm-form, .pm-ok { max-width: 760px; }

.pm-field { margin: 0 0 1.15rem; padding: 0; border: 0; min-inline-size: 0; }
.pm-field > label,
.pm-field > legend { display: block; font-size: .9rem; font-weight: 700; margin-block-end: .4rem; padding: 0; }

.pm-wrap input[type="text"],
.pm-wrap input[type="email"],
.pm-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font: inherit; font-size: 1rem;   /* 16px: evita lo zoom automatico su iPhone */
  color: inherit;
  background: var(--pm-bg);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
}
.pm-wrap textarea { resize: vertical; min-height: 9rem; }
.pm-wrap input[type="file"] { width: 100%; font: inherit; font-size: .95rem; }

.pm-wrap input:focus-visible,
.pm-wrap textarea:focus-visible,
.pm-wrap button:focus-visible,
.pm-wrap a:focus-visible,
.pm-header a:focus-visible,
.pm-footer a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pm-accent) 45%, transparent);
  outline-offset: 2px;
}
.pm-wrap [aria-invalid="true"] { border-color: var(--pm-error); }

/* Tipo di segnalazione */
.pm-radios { display: flex; flex-wrap: wrap; gap: .6rem; }
.pm-radio {
  flex: 1 1 10rem;
  display: flex; align-items: center; gap: .6rem;
  padding: 13px 14px;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-bg);
  cursor: pointer;
  font-weight: 600;
}
.pm-radio:has(input:checked) { border-color: var(--pm-accent); box-shadow: inset 0 0 0 1px var(--pm-accent); }
.pm-radio input { accent-color: var(--pm-accent); }

.pm-count { margin: .25rem 0 0; text-align: end; font-size: .85rem; color: var(--pm-muted); }
.pm-hint, .pm-note { margin: .4rem 0 0; font-size: .9rem; color: var(--pm-muted); }
.pm-note { margin: 0 0 1.25rem; }

/* Allegati scelti */
.pm-files { list-style: none; margin: .5rem 0 0; padding: 0; }
.pm-files li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .8rem; margin-block-end: .35rem;
  background: var(--pm-bg); border: 1px solid #dfe6de; border-radius: var(--pm-radius); font-size: .95rem;
}
.pm-files .pm-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-files .pm-fsize { color: var(--pm-muted); margin-inline-start: .4rem; white-space: nowrap; }
.pm-files button {
  flex: none; border: 0; background: none; color: var(--pm-accent);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: .2rem .3rem;
}

/* Consenso privacy */
.pm-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; font-weight: 400; color: var(--pm-muted); }
.pm-field > label.pm-check { font-weight: 400; font-size: .9rem; }
.pm-check input { margin-block-start: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--pm-accent); flex: none; }
.pm-check a { color: var(--pm-accent); font-weight: 700; }

/* Errori */
.pm-err { margin: .4rem 0 0; color: var(--pm-error); font-size: .95rem; }
.pm-err[hidden], .pm-ok[hidden], .pm-form[hidden] { display: none; }
.pm-stato { margin-block-start: 1rem; }

/* Pulsanti, a pillola come nel sito */
.pm-btn {
  display: inline-block;
  padding: 16px 32px;
  font: inherit; font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--pm-accent);
  border: 2px solid var(--pm-accent); border-radius: 999px;
  cursor: pointer;
}
.pm-btn:hover { background: var(--pm-accent-dark); border-color: var(--pm-accent-dark); }
.pm-btn[disabled] { opacity: .6; cursor: wait; }
.pm-btn-sec { background: transparent; color: var(--pm-accent); }
.pm-btn-sec:hover { background: #fff; color: var(--pm-accent-dark); }

/* Conferma */
.pm-ok { box-sizing: border-box; padding: 32px; border: 1px solid #dfe6de; border-radius: 16px; background: #fff; }
.pm-ok:focus { outline: none; }
.pm-ok p { margin: 0 0 1rem; color: var(--pm-muted); }
.pm-ok-rif { font-weight: 800; color: var(--pm-title) !important; }
.pm-ok-rif:empty { display: none; }

/* Campo trappola per i robot */
.pm-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
}

/* Piè di pagina */
.pm-footer { background: #0d2a1b; color: #cfdcd3; padding: 36px 0; font-size: .875rem; line-height: 1.6; }
.pm-footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.pm-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pm-footer a { color: #fff; }

@media (max-width: 40rem) {
  .pm-in { padding: 0 20px; }
  .pm-hero { padding: 36px 0 32px; }
  .pm-band { padding: 40px 0 56px; }
  .pm-intro { font-size: 1.05rem; }
  .pm-logo img { height: 44px; }
  .pm-btn { width: 100%; text-align: center; }
  .pm-ok { padding: 22px; }
}