/* =========================================
   GRUPPO PULSANTI DOPPIO (Info)
   ========================================= */

/* Contenitore dei pulsanti */
.gruppo-pulsanti {
	display: flex;
	flex-direction: row; 
	justify-content: center;
	align-items: stretch; 
	position: relative;
	width: 100%;
	max-width: 850px; 
	margin: 0 auto;
	gap: 5px; 
	background-color: #ffffff; 
	border-radius: 10px; 
}

/* Stile base dei pulsanti */
.btn-suite {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none !important;
	padding: 18px 20px; 
	transition: all 0.3s ease; 
}

/* Prima riga (Titolo principale) */
.btn-suite h4 {
	margin: 0 0 6px 0;
	font-size: 22px; 
	font-weight: bold;
	letter-spacing: 1px;
	font-family: "Courier New", Courier, serif;
}

/* Seconda riga (Sottotitolo) */
.btn-suite .sottotitolo {
	margin: 0 0 5px 0;
	font-size: 16px;
	font-weight: bold;	
	text-transform: uppercase;
}

/* Terza riga (Nuova descrizione) */
.btn-suite .descrizione {
	font-size: 14px;
	font-weight: bold;		
}

/* =========================================
   Pulsante Sinistro (Parte Blu Scuro)
   ========================================= */
.btn-blu, 
.btn-blu:visited, 
.btn-blu:active, 
.btn-blu:focus {
	background-color: #005FA5; 
	color: #ffffff !important; 
	border-radius: 10px 0 0 10px; 
}

.btn-blu:hover {
	background-color: #4c8fc0; 
	color: #C85A28 !important;            
}

/* =========================================
   Pulsante Destro (Parte Arancione Scuro)
   ========================================= */
.btn-arancione, 
.btn-arancione:visited, 
.btn-arancione:active, 
.btn-arancione:focus {
	background-color: #C85A28; 
	color: #ffffff !important; 
	border-radius: 0 10px 10px 0; 
}

.btn-arancione:hover {
	background-color: #f99200; 
	color: #005FA5 !important;            
}

/* Icona Centrale */
.icona-centrale {
	position: absolute;
	background-color: #ffffff;
	width: 42px; 
	height: 42px; 
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.icona-centrale i {
	color: #838383;
	font-size: 20px;
}

/* =========================================
   DISPOSITIVI MOBILI E SCHERMI PICCOLI
   ========================================= */
@media (max-width: 860px) {
	.gruppo-pulsanti {
		flex-direction: column; 
		max-width: 450px; 
	}
	
	.btn-blu {
		border-radius: 10px 10px 0 0; 
		padding: 18px 20px 45px 20px; 
	}
	
	.btn-arancione {
		border-radius: 0 0 10px 10px; 
		padding: 45px 20px 18px 20px; 
	}
}