/* 
   Fascia grafica morbida.
   Di base resta azzurra.
*/
.groupbuttonArea {
    position: relative;

    margin: 16px auto 20px auto;
    padding: 38px 12px 42px 12px;

    text-align: center;
    overflow: hidden;

    background-color: #eaf5fb;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* 
   Variante con immagine di sfondo.
   Usa questa classe insieme a groupbuttonArea.
*/
.groupbuttonArea-img {
    background-image: url("images/cop01.jpg");
}


/* Onda decorativa superiore */
.groupbuttonArea::before {
    content: "";
    position: absolute;

    left: -2%;
    right: -2%;
    top: -1px;

    height: 54px;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: 104% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,44 C180,88 360,6 540,34 C720,62 900,106 1080,72 C1260,38 1350,26 1440,38 L1440,0 L0,0 Z'/%3E%3C/svg%3E");

    pointer-events: none;
    z-index: 0;
}


/* Onda decorativa inferiore */
.groupbuttonArea::after {
    content: "";
    position: absolute;

    left: -2%;
    right: -2%;
    bottom: -1px;

    height: 54px;

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 104% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,74 C180,120 360,26 540,52 C720,78 900,122 1080,92 C1260,62 1350,44 1440,56 L1440,120 L0,120 Z'/%3E%3C/svg%3E");

    pointer-events: none;
    z-index: 0;
}


/* 
   Porta il contenuto sopra le onde.
   Utile se dentro hai bottoni, testi, div ecc.
*/
.groupbuttonArea > * {
    position: relative;
    z-index: 1;
}

/* I pulsanti restano quelli esistenti, solo leggermente più curati */
.groupbuttonArea .groupbutton {
	position: relative;
	z-index: 1;
	margin: 10px 7px 12px 7px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	box-shadow: 0 5px 16px rgba(0,0,0,0.16);
	transition: transform .18s ease, box-shadow .18s ease;
}

.groupbuttonArea .groupbutton:hover {
	transform: translateY(-2px);
	box-shadow: 0 9px 22px rgba(0,0,0,0.20);
}