/* --- Layout Proportions --- */
/* Register: Visual più stretta, Contenuto più largo per il form lungo */
.auth__visual {
  flex: 1;
  /* Sticky behavior per mantenere il logo visibile durante lo scroll */
  position: sticky;
  top: var(--layout-navbar-height);
  height: calc(100vh - var(--layout-navbar-height));
  z-index: 10;
}

.auth__content {
  flex: 1.5;
  align-items: center; /* Allinea in alto per permettere lo scroll */
}

/* --- Elementi Specifici --- */
.auth__logo-large {
  width: 60%;
  max-width: 350px; /* Logo leggermente più piccolo qui */
}

.auth__card {
  max-width: 600px; /* Card più larga */
}

/* Textarea specifica per indirizzi */
.form__group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Split Row (Telefono / Ragione Sociale) */
.form__row--split {
  display: flex;
  gap: 1.5rem;
}

.form__row--split .form__group {
  flex: 1;
}

/* Hint sotto i campi */
.field-hint {
  font-size: var(--font-size-sm); /*CAMBIA GRANDEZZA AUMENTA*/
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* Bottone con Spinner */
.btn--primary {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn__spinner.hidden {
  display: none;
}

/* Avviso Ragione Sociale (Desktop) */
.company-hint {
  margin-top: -10px;
  margin-bottom: 1.5rem;
  display: block;
  text-align: right; /* A destra su desktop */
}

/* --- Mobile Override --- */
@media (max-width: 992px) {
  
  .auth__content {
    /* Il form è lungo: riduciamo il padding per farlo entrare meglio nello schermo */
    padding: 1.5rem 1rem; 
  }

  /* Impila i campi splittati in verticale */
  .form__row--split {
    flex-direction: column;
    gap: 1.25rem; /* IMPORTANTE: Mettiamo un gap, altrimenti i campi si toccano! */
  }

  /* Riadattamento dell'avviso per mobile */
  .company-hint {
    text-align: center; /* Centrato su mobile come richiesto */
    margin-top: 0; /* Rimuoviamo il margine negativo perché ora i campi sono in colonna */
  }
}