/* TASK-BACKOFFICE-CONTACTS-001 — modale di contatto pubblica, unica e
   riutilizzabile per tutti i percorsi (contact_type). Stesso vocabolario
   di token del pannello cookie (--pub-*, --fbl-s-*): nessun nuovo design
   system introdotto, solo un secondo dialog dello stesso sito pubblico. */

/* [hidden] deve sempre vincere sulle regole sotto (es. display:flex
   sull'alert di successo), altrimenti l'attributo HTML "hidden" usato da
   contact-modal.js per aprire/chiudere/mostrare stati smette di
   funzionare non appena una regola con la stessa specificita' imposta un
   altro display sullo stesso elemento. */
#fbl-contact-modal [hidden],
#fbl-contact-modal-overlay[hidden] {
  display: none !important;
}

.fbl-contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--pub-scrim-rgb, 8, 15, 24), 0.5);
  /* Sopra il livello "toast" (es. banner cookie), non solo "modal": una
     dialog aperta intenzionalmente dall'utente deve stare sempre sopra un
     banner passivo, altrimenti quest'ultimo puo' intercettare i click sui
     controlli della modale quando entrambi sono visibili. */
  z-index: var(--fbl-s-z-tooltip);
}

.fbl-contact-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: calc(var(--fbl-s-z-tooltip) + 1);
  /* UX-POLISH-002: 760-860px su desktop (era 620px, troppo stretta e
     costringeva nome/email e organizzazione/ruolo su righe separate
     invece che affiancati). max-height/padding ridotti quel tanto che
     basta a stare in un viewport desktop standard (>=800px di altezza)
     senza scrollbar interna: vedi anche i gap piu' compatti sotto. */
  width: min(820px, calc(100% - 32px));
  max-height: min(90vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.fbl-contact-modal__panel {
  position: relative;
  background: var(--pub-bg-alt);
  color: var(--pub-text-primary);
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--fbl-s-radius-card, 12px);
  box-shadow: var(--pub-shadow-lg);
  padding: 20px 24px 16px;
  font-size: 0.94rem;
}

.fbl-contact-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pub-text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.fbl-contact-modal__close:hover { background: var(--pub-tint-blue); color: var(--pub-text-primary); }
.fbl-contact-modal__close:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); }

.fbl-contact-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fbl-public-interactive);
  font-weight: 600;
}

.fbl-contact-modal__title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  padding-right: 32px;
}

.fbl-contact-modal__guidance {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--pub-text-secondary);
}

.fbl-contact-modal__alert {
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 10px;
}
.fbl-contact-modal__alert--error {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.3);
  color: var(--pub-text-primary);
}
.fbl-contact-modal__alert--success {
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.3);
  color: var(--pub-text-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.fbl-contact-modal__alert--success p { margin: 0; }

.fbl-contact-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fbl-contact-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .fbl-contact-modal__row { grid-template-columns: 1fr; }
}

.fbl-contact-modal__field { display: flex; flex-direction: column; gap: 3px; }
.fbl-contact-modal__field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pub-text-secondary);
}
.fbl-contact-modal__field label span[aria-hidden="true"] { color: var(--fbl-p-red-600, #b91c1c); margin-left: 2px; }

.fbl-contact-modal__field input,
.fbl-contact-modal__field textarea {
  font: inherit;
  font-size: 0.86rem;
  color: var(--pub-text-primary);
  background: var(--pub-bg);
  border: 1px solid var(--pub-line);
  border-radius: 8px;
  padding: 6px 10px;
}
.fbl-contact-modal__field input:focus-visible,
.fbl-contact-modal__field textarea:focus-visible {
  outline: none;
  box-shadow: var(--fbl-s-focus-ring-light);
  border-color: var(--fbl-public-interactive);
}
/* UX-POLISH-003: altezza FISSA (non piu' resize:vertical libero) con
   scroll interno proprio -- un messaggio lungo scorre dentro la textarea
   invece di far crescere la modale, cosi' l'altezza della modale resta
   sempre prevedibile indipendentemente da quanto l'utente scrive. */
.fbl-contact-modal__field textarea {
  height: 58px;
  resize: none;
  overflow-y: auto;
}

.fbl-contact-modal__field--invalid input,
.fbl-contact-modal__field--invalid textarea {
  border-color: var(--fbl-p-red-600, #b91c1c);
}

.fbl-contact-modal__field-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--pub-text-muted);
}

/* Altezza sempre riservata (testo vuoto quando il campo e' valido), MAI
   toggled via [hidden]: un errore che compare/scompare sotto un campo
   sposterebbe il layout esattamente durante il gesto di click su
   qualunque controllo subito sotto (mousedown sul bersaglio originale,
   poi il bersaglio si sposta prima del mouseup) -- bug reale riscontrato
   durante la verifica, non solo un dettaglio estetico. */
.fbl-contact-modal__field-error {
  margin: 0;
  min-height: 0.95rem;
  font-size: 0.72rem;
  line-height: 0.95rem;
  font-weight: 600;
  color: var(--fbl-p-red-600, #b91c1c);
}

.fbl-contact-modal__honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fbl-contact-modal__consent-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 0;
}

.fbl-contact-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--pub-text-secondary);
  cursor: pointer;
}
.fbl-contact-modal__consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--fbl-public-interactive);
  flex: none;
}
.fbl-contact-modal__consent a { color: var(--fbl-public-interactive); }

.fbl-contact-modal__note {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--pub-text-muted);
}

.fbl-contact-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.fbl-contact-modal__submit-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fbl-contact-modal-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes fbl-contact-modal-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .fbl-contact-modal__panel { padding: 22px 18px 18px; }
  .fbl-contact-modal__actions { flex-direction: column-reverse; }
  .fbl-contact-modal__actions .fbl-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fbl-contact-modal__submit-spinner { animation-duration: 1.4s; }
}