/* Modal overlay: nascosto di default */
.modal {
  position: fixed;
  inset: 0;
  display: none;           /* <--- fondamentale */
  z-index: 1000;
}

/* Mostra quando il JS aggiunge .is-open */
.modal.is-open {
  display: block;
}

/* Resto della pagina diventa questo sfondo scuro cliccabile per chiudere */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5); /* Scurezza sfondo*/
}

/* Finestra */
.modal__dialog {
  position: relative;
  z-index: 1001;
  margin: 10vh auto 0;
  background: var(--color-containers);
  width: min(92vw, 480px);

  border-radius: var(--border-radius-r);
  padding: 1.25rem;
  box-shadow: var(--box-shadow-containers);

  font-size: var(--font-size-r);
  font-weight: var(--font-weight-r);
}

/* Pulsante chiusura */
.modal__close {
  position: absolute; right: .5rem; top: .5rem;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 1.25rem; line-height: 2rem;
}

.modal__footer {
  margin-top: 1rem;
}



/*tasti di conferma/annullamento */
.modal-btn {
  padding: .55rem .9rem;
  border-radius: var(--border-radius-r);
  border: 2px solid var(--color-primary);
  background-color: var(--color-text);
  color: var(--color-background);
  cursor: pointer;

  font-family: var(--font-family-primary);
  font-size: var(--font-size-r);
}

.modal-btn-cancel {
  border: 2px solid var(--color-text);
  background-color: transparent;
  color: var(--color-text);
  padding: .55rem .9rem;
  border-radius: var(--border-radius-r);
  cursor: pointer;

  font-family: var(--font-family-primary);
  font-size: var(--font-size-r);
}

/* Bottone Conferma nel Modal */
.modal-btn-danger {
  padding: .55rem .9rem;
  border-radius: var(--border-radius-r);
  border: 2px solid #e53935;
  background-color: #e53935;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-r);
  font-weight: var(--font-weight-semi);
  transition: all 0.2s;
}

.modal-btn-danger:hover:not(:disabled) {
  background-color: #c62828;
  border-color: #c62828;
}

/* Stato disabilitato (quando la checkbox non è spuntata) */
.modal-btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #e53935; /* Mantiene il rosso ma sbiadito */
}