/*span123.css ==>> All <button> elements*/

    /*overflow: hidden;!!!!!!!!!!!!!!!
        impedisce che elementi
        contenuti vadano fuori
        dai contenitori aumentando
        lo zoom: questo effetto viene
        realizzato rendendo invisibile
        appunto "l'overflow"*/

/*_______left side buttons________*/
/*Scheme: 
 <span class="extLeft" id="extLeft1">
            <button id="btnLeft_1" class="btnLeft">Ordina<br>e<br>ritira</button>
 </span>
*/

/*Left side <span> container for <button> elements*/        
.extLeft {
    display: flex; 
    flex-direction: column;
    
    position: fixed;  
    left: 1.1%;
    margin-right: 0;  

    width: 8.9%;

    background-color: black; 
    color: white; 
    text-align: center;
    opacity: 0.8;
    border-style:solid; 
    border-color:white;
    border-width: 5%;
    border-radius: 40% 0% 0% 40%;
    box-shadow: -5px 5px 5px darkgrey;
    overflow: hidden;
    z-index: 1;
}

/*...specific settings*/
#extLeft1 { 
    height: 14%;
    top:30%;
}

#extLeft2 { 
    height: 14%;
    top:48%;
}

/*Left-side buttons inner <button> elements*/
.btnLeft {
    position: relative;  
    height: 100%; 

    color: white;
    background-color: rgb(139, 0, 0); 
    font-size: 0.8em; 
    font-weight: 900;

    border-radius: 40% 0% 0% 40%;

    overflow: hidden; 
}

.btnLeft:hover {
    opacity: 0.5; 
    box-shadow: -5px 5px 5px white;
    transform: translateY(5px);
}

/*________right side <button> elements______*/

/*  SCHEME: 

<span class="extRight" id="extRight1">
    <button id="btnRight_1" class="btnRight">Glovo</button>
</span>
*/

/*all right <span> btn container elements*/
.extRight {
    display: flex; 
    flex-direction: column; 

    position: fixed; 
    width: 8.2%; 
    height: 11%;
     
    left: 90%;

    background-color: black; 
    color: white; 
    text-align: center;
    opacity: 0.8;
    border-style:solid; 
    border-color:white;
    border-width: 5%;
    border-radius: 0% 100% 100% 0%;
    box-shadow: -5px 5px 5px darkgrey;
    z-index: 1;
}

/*Specific <span> container elements*/
#extRight1 {
    top:30%;
}

#extRight2 {
    top: 42%;
}

#extRight3 {
    top:54%;
}

#extRight4 {
    top:72%;
}


/*btns settings on inner element <button>*/
.btnRight {
    overflow: hidden; /*!!!*/

    position: relative;  
    top: 0%; 
    margin: 0; 
    height: 100%;

    color: white;
    background-color: darkred;
    font-size: 0.8em;
    font-weight: 900;

    border-radius: 0% 100% 100% 0%;

    }

    .btnRight:hover {
    opacity: 0.5; 
    box-shadow: -5px 5px 5px white;
    transform: translateY(5px);
}

#btnRight_4 {
    background-color: rgba(170, 71, 0, 0.901);
}

/* (touchscreen && touchdown)? buttons darker && bigger : nothing */
.btnLeft:active, .btnRight:active {
    background-color: #ff0000; /* Un rosso più acceso o un feedback visivo */
    transform: scale(0.95);    /* Effetto pressione */
}

/* Questa scelta ci consente di mantenere l'evento 'click' al 
posto dei pointer events - che hanno altri 
inconvenienti: Eliminiamo il ritardo dei 300ms nel caso
di applicazioni touch sul click; ciò 
mantiene la possibilità comunque di scorrere la
pagina e zoomare con due dita */

button, a {
    touch-action: manipulation; 
}
/*______________MEDIA__________________________________________
_______________________________________________________________
_______________________________________________________________*/

/*Right/Left side buttons_____________________________________ */
@media all and (max-width: 1000px) {
    /*Decrease font-size*/
    .btnLeft {
        font-size: 0.7em; 
    }
    .btnRight {
        font-size: 0.7em; 
    }
}

@media all and (max-width: 850px) {
    /*Decrease font-size*/
    .btnLeft {
        font-size: 0.6em;
    }
    
    .btnRight {
        font-size: 0.6em; 
    }
}

@media all and (max-width: 750px) {
    /*Increase button width*/
    .extRight {
        width: 9.2%; 
    }
    .extLeft {
        width: 9.2%; 
    }
}

@media all and (max-width: 660px) {
    .extRight {
        width: 9.9%; 
    }
    .extLeft {
        width: 9.9%; 
    }
}

/*Buttons layout change___________________________________ */

@media all and (max-width: 660px) {
    /* buttons display: none (and body changes)*/
    .extLeft, .extRight {
        display: none; 
    }
}

/* Media for POINTERS (fine vs coarse)...........................
.................................................................
.................................................................*/

/*1)Touchscreen (pointer: coarse)............................... */

@media all and (pointer:coarse) {
    
    /*dx && sx buttons ==> min-width for bigFinger */
    .extLeft, .extRight {
        min-width: 48px; 
    }

    /* "Immediate feedback" (no sticky!) when touch R/L-buttons 
    and navBar */
    .btnLeft:active, .btnRight:active {
        background-color: rgba(246, 105, 11, 0.841);
        transform: scale(0.95); 
    }
}

/* 2)Mouse (pointer:fine)..................................... */