/* ==========================================================================
   buttons.css - stesse DIMENSIONI e stessi ANGOLI per tutti i pulsanti
   Non cambia colori, bordi, ombre o stati: ogni pulsante resta riconoscibile.
   Va caricato DOPO bootstrap e custom.css (stessa specificità: vince l'ordine).

     angoli      4px (come lo shop)
     altezza     normale 36px     compatta (.btn-sm) 30px
     telefono    normale 44px     compatta 36px
   ========================================================================== */

.btn,
.btn-modal-dialog,
.btn-modal-dialog-toggle,
.btn-custom,
.btn-del{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
}

/* compatta */
.btn-sm,
.btn-group-sm > .btn,
.btn-custom,
.btn-del{
	min-height: 30px;
	padding: 0 10px;
	font-size: 13px;
}

/* le vecchie regole composte (es. .btn-modal-dialog.confirm) impostavano da sole
   spazi e carattere: le riportiamo alla misura comune (i colori restano loro) */
.btn-modal-dialog.save,
.btn-modal-dialog.cancel,
.btn-modal-dialog.delete,
.btn-modal-dialog.closeroom,
.btn-modal-dialog.confirm{
	padding: 0 14px;
	font-size: 14px;
}
.btn-custom.add,
.btn-custom.del{
	margin: 0;
	padding: 0 10px;
	font-size: 13px;
}

/* pulsante con solo l'icona: quadrato (aggiungere la classe .btn-icon dove serve).
   .btn-del è già un pulsante di sola icona: lo stesso trattamento, senza cambiare le classi */
.btn-icon,
.btn-del{
	width: 36px;
	min-width: 36px;
	padding: 0;
}
.btn-icon.btn-sm,
.btn-del{
	width: 30px;
	min-width: 30px;
}

/* link in forma di testo: restano com'erano */
.btn-link{
	min-height: 0;
	padding: 0 4px;
	border-radius: 0;
}

/* telefono e tablet: area di tocco più grande */
@media screen and (max-width: 800px){
	.btn,
	.btn-modal-dialog,
	.btn-modal-dialog-toggle{
		min-height: 44px;
	}
	.btn-sm,
	.btn-group-sm > .btn,
	.btn-custom,
	.btn-del{
		min-height: 36px;
	}
	.btn-icon{
		width: 44px;
		min-width: 44px;
	}
	.btn-icon.btn-sm,
	.btn-del{
		width: 36px;
		min-width: 36px;
	}
}