body { margin: 0; padding: 0; }
label { display: block; margin-top: 15px; font-weight: bold; }
input, select, textarea {
  width: 100%; padding: 10px; margin-top: 5px;
  border: 1px solid #ccc; border-radius: 5px; font-size: 14px;
}
/* Bottoni dei form (escluso il toggle tema nell'header) */
button:not(.theme-toggle) {
  margin-top: 20px;
  padding: 10px 20px;
  background: #5CBF74;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

button:not(.theme-toggle):hover {
  background: #469C5A;
}

button.is-loading {
  opacity: .7;
  cursor: not-allowed;
}

.success { color: green; margin-top: 20px; }
.error   { color: red;   margin-top: 20px; }
.info    { color: #1E90FF; margin-top: 20px; }
#responseMsg { display: none !important; }

/* Puntini animati accanto al bottone */
.dot-spinner { display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle; align-items:center; }
.dot-spinner .dot { width:6px; height:6px; border-radius:50%; background:#5CBF74; opacity:.2; animation: dotBlink 1s infinite ease-in-out; }
.dot-spinner .dot:nth-child(2){ animation-delay:.15s; }
.dot-spinner .dot:nth-child(3){ animation-delay:.30s; }
.dot-spinner .dot:nth-child(4){ animation-delay:.45s; }
@keyframes dotBlink { 0%,100%{opacity:.2; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);} }

.consenso-row { margin: 12px 0 8px; }
.consenso-label { display:flex; align-items:center; gap:8px; line-height:1.3; }
.consenso-label input[type="checkbox"] { width:18px; height:18px; margin:0; flex:0 0 auto; }
.consenso-label span { display:inline; white-space:normal; }

/* === [ADD] Migliorie responsive per contatta-fisio === */
:root { --gap: 12px; }

body { margin: 0; padding: 0; }

form#contactForm {
  display: grid;
  gap: var(--gap);
}

label { font-weight: 600; }

input,
select,
textarea,
button:not(.theme-toggle) {
  font-size: 16px;    /* evita zoom iOS */
  padding: 10px 12px;
}

button#submitBtn {
  padding: 12px;
  border-radius: 8px;
}

.dot-spinner { gap: 4px; }

@media (max-width: 480px) {
  .app { padding: 12px; }
  h2 { font-size: 1.25rem; }
}

/* === Contatta Fisio: contenitore centrato e fluido === */
.contact-container{
  max-width: clamp(320px, 92vw, 760px);
  margin-inline: auto;
}

/* il form mantiene solo la griglia (niente max-width qui) */
.contact-container form#contactForm{
  display: grid;
  gap: var(--gap, 12px);
  margin: 0;
}

/* tutti i campi stessa larghezza */
.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container select,
.contact-container textarea{
  width: 100%;
  box-sizing: border-box;
}

/* bottone coerente e piena larghezza */
.contact-container button#submitBtn{
  width: 100%;
  padding: 12px;
  border-radius: 8px;
}

/* titolo leggermente più compatto su telefoni piccoli */
@media (max-width: 375px){
  .contact-container h2{ font-size: clamp(18px, 6vw, 22px); }
}

/* === [FIX] Contatta-fisio: i titoli dei campi NON sono cliccabili === */
form#contactForm > label{
  pointer-events: none;
  cursor: default;
}
/* Il label del consenso resta cliccabile (testo + checkbox) */
label.consenso-label{
  pointer-events: auto;
}
/* Se mai ci fossero link dentro label, mantieni cliccabili i link */
form#contactForm > label a{
  pointer-events: auto;
}

/* === [FIX] Assistenza: i titoli dei campi NON sono cliccabili === */
form#supportForm > label{
  pointer-events: none;
  cursor: default;
}
form#supportForm > label a{
  pointer-events: auto;
}

.privacy-inline summary { cursor: pointer; color:#2b6cb0; }
.privacy-inline div { color:#222; }

/* === Tema scuro: pagine contatto pubblico === */
html.theme-dark body {
  background: #111827;
  color: #f9fafb;
}

html.theme-dark .card.contact-container {
  background: #1f2937;
  border: 1px solid #111827;
}

html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background: #111827;
  color: #f9fafb;
  border-color: #4b5563;
}

html.theme-dark .privacy-inline div {
  color: #e5e7eb;
}

/* Allinea correttamente il pulsante tema nell'header delle pagine pubbliche */
.brand-header .brand-container {
  justify-content: space-between;
  align-items: center;
}

.brand-header .theme-toggle {
  align-self: center;
}