/* =========================================================
   GLIFO EDIZIONI — newsletter.css
   Veste il form "embedded" di Mailchimp incollato come HTML
   personalizzato nella posizione "newsletter" — markup generato
   da Mailchimp, non nostro: ci agganciamo alle sue classi/ID
   nativi (mc_embed_signup, mc-field-group, mc-embedded-subscribe...)
   SENZA toccare l'HTML, stesso approccio "chirurgico" usato per
   HikaShop in tutto il resto del template.

   IMPORTANTE: Mailchimp incolla anche un proprio <link> al suo CSS
   di base (classic-*.css) DENTRO il modulo — quindi nel corpo della
   pagina, DOPO il nostro newsletter.css che invece sta nell'head.
   A parità di specificità (stesso ID), il foglio che arriva DOPO
   vince: per questo le regole con un solo ID (#mc_embed_shell,
   #mc_embed_signup_scroll...) hanno bisogno di !important per
   avere sempre la meglio, indipendentemente dall'ordine di
   caricamento — stesso trattamento già riservato al CSS nativo di
   HikaShop nel resto del template.

   Caricato solo dove il modulo "newsletter" è effettivamente
   presente (vedi index.php), non è legato a una pagina specifica.
   ========================================================= */

#mc_embed_shell {
  background: var(--g-card-bg) !important;
  border: 0.5px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  padding: 40px 32px !important;
  max-width: 680px !important;
  margin: 24px 0 !important;
}

#mc_embed_signup {
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}

#mc_embed_signup form { margin: 0; }

#mc_embed_signup h2 {
  font-size: var(--g-fs-h2) !important;
  font-weight: 700 !important;
  color: var(--g-ink) !important;
  text-align: center !important;
  margin: 0 0 8px !important;
}

#mc_embed_signup .indicates-required {
  text-align: center;
  font-size: var(--g-fs-caption);
  color: var(--g-text-muted);
  margin: 0 0 24px;
}
#mc_embed_signup .asterisk {
  color: var(--g-rust);
}

/* --- Griglia campi: Nome/Cognome affiancati, Email e Città a piena
   larghezza (campi "grandi", meritano una riga tutta loro) --- */
#mc_embed_signup_scroll {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 20px !important;
}
#mc_embed_signup h2,
#mc_embed_signup .indicates-required,
#mc_embed_signup .mc-field-group:has(#mce-EMAIL),
#mc_embed_signup .mc-field-group:has(#mce-MMERGE5),
#mc_embed_signup .input-group,
#mc_embed_signup #mce-responses,
#mc_embed_signup .optionalParent {
  grid-column: 1 / -1 !important;
}

#mc_embed_signup .mc-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: auto !important;
}
#mc_embed_signup .mc-field-group label {
  font-size: var(--g-fs-small);
  font-weight: 600;
  color: var(--g-mid);
}
#mc_embed_signup .mc-field-group input[type="text"],
#mc_embed_signup .mc-field-group input[type="email"] {
  border: 0.5px solid var(--g-border) !important;
  border-radius: var(--g-radius-sm) !important;
  padding: 10px 12px !important;
  font-size: var(--g-fs-body) !important;
  font-family: inherit !important;
  color: var(--g-ink) !important;
  width: 100% !important;
  background: var(--g-bg) !important;
}
#mc_embed_signup .mc-field-group input:focus {
  outline: none;
  border-color: var(--g-rust) !important;
}

/* --- Gruppi radio (Attività / Interesse) --- */
#mc_embed_signup .input-group strong {
  display: block;
  font-size: var(--g-fs-body);
  font-weight: 600;
  color: var(--g-mid);
  margin-bottom: 10px;
}
#mc_embed_signup .input-group ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 24px !important;
}
#mc_embed_signup .input-group li {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
}
#mc_embed_signup .input-group input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--g-rust);
  cursor: pointer;
  flex-shrink: 0;
}
#mc_embed_signup .input-group label {
  font-size: var(--g-fs-body);
  color: var(--g-ink);
  cursor: pointer;
}

/* --- Messaggi di risposta (mostrati via JS di Mailchimp, se presente) --- */
#mc_embed_signup #mce-responses {
  margin-top: 4px;
}
#mc_embed_signup #mce-error-response {
  color: var(--g-rust);
  font-size: var(--g-fs-small);
  font-weight: 600;
}
#mc_embed_signup #mce-success-response {
  color: var(--g-blu-dark);
  font-size: var(--g-fs-small);
  font-weight: 600;
}

/* --- Bottone iscriviti + badge Mailchimp --- */
#mc_embed_signup .optionalParent .clear.foot {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}
#mc_embed_signup #mc-embedded-subscribe {
  background: var(--g-rust) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--g-radius-md) !important;
  padding: 12px 40px !important;
  font-size: var(--g-fs-body) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  cursor: pointer;
}
#mc_embed_signup #mc-embedded-subscribe:hover {
  background: var(--g-rust-dark) !important;
}
/* badge "Intuit Mailchimp" — richiesto dai piani gratuiti, lasciato
   ma reso discreto invece che in evidenza */
#mc_embed_signup .refferal_badge {
  opacity: 0.55;
}

@media (max-width: 650px) {
  #mc_embed_shell { padding: 28px 20px !important; }
  #mc_embed_signup_scroll { grid-template-columns: 1fr !important; }
  #mc_embed_signup .input-group ul { gap: 12px 20px !important; }
  #mc_embed_signup .optionalParent .clear.foot { width: 100%; }
  #mc_embed_signup #mc-embedded-subscribe { width: 100% !important; }
}