@charset "utf-8";

/* =========================================================

   ?? STILE DETTAGLIATO MENŲ DIGITALE (GUIDA PER NEOFITI)

========================================================= */



/* Corpo della pagina */    

body { 

    background-color: #f1f1f1; /* sfondo grigio chiaro */

    color: #2c2c2c; /* colore del testo principale */

    font-family: 'Arial', sans-serif; /* tipo di carattere */   

    padding: 20px; /* spazio interno alla pagina */ 

}



/* Titolo principale del menų */

h1#pageTitle {

    font-size: 2.5rem; /* dimensione grande del carattere */ 

    text-align: center; /* titolo centrato */

    margin-bottom: 20px; /* margine inferiore */

    color: #444; /* colore testo titolo */

    text-transform: uppercase; /* lettere maiuscole */

    letter-spacing: 1px; /* spazio tra lettere */

}



/* Menų tendina selezione lingua */

#languageSelector button {

    background-color: #ffffff; /* sfondo bianco */

    border: none; /* senza bordo */

    padding: 5px; /* padding interno */

}



#languageSelector img {

    width: 20px; /* larghezza icone bandiere */

    margin-right: 5px; /* margine a destra */

}



.dropdown-menu {

    border-radius: 8px; /* angoli arrotondati del menų */

    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* effetto ombra */

}



.dropdown-item img {

    width: 20px; /* larghezza immagini bandiere */

    margin-right: 8px; /* spazio a destra */

}



/* Categoria menų (titoli delle sezioni) */

.categoria {

    background-color: #4a4a4a; /* sfondo scuro */

    color: #ffffff; /* testo bianco */

    padding: 10px; /* spazio interno */

    border-radius: 8px; /* angoli arrotondati */

    cursor: pointer; /* puntatore mano al passaggio */

    text-transform: uppercase; /* testo maiuscolo */

    font-weight: bold; /* testo in grassetto */

    text-align: center; /* testo centrato */

    margin-bottom: 5px; /* margine inferiore */

    transition: background-color 0.3s ease; /* transizione fluida */

}



.categoria:hover {

    background-color: #333; /* cambio colore al passaggio mouse */

}



/* Scheda prodotto */

.card {

    border-radius: 10px; /* angoli arrotondati */

    margin-bottom: 15px; /* margine inferiore */

    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* ombra leggera */

    transition: box-shadow 0.3s ease; /* transizione ombra */
    background-color: #f7f7f7;
}



.card:hover {

    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* ombra pių marcata al passaggio mouse */

}



.card-img-container img {

    width: 100%; /* immagine larga tutta la scheda */

    height: 180px; /* altezza fissa */

    object-fit: cover; /* immagine che copre tutta l'area */

    cursor: pointer; /* puntatore al passaggio */
    
}



.card-body {

    padding: 15px; /* spazio interno scheda */
    
}



.card-title {

    font-weight: bold; /* titolo prodotto grassetto */

    font-size: 1.25rem; /* dimensione carattere titolo prodotto */

}



.card-text {

    color: #555; /* colore descrizione prodotto */

}



.prezzoscheda {

    color: #555; /* colore prezzo prodotto */

    font-weight: bold; /* prezzo in grassetto */

}



/* Bottoni (ingredienti, allergeni e aggiungi carrello) */

.btn {

    border-radius: 8px; /* angoli arrotondati */

    padding: 6px 12px; /* spazio interno */

    font-size: 0.9rem; /* dimensione carattere */
	
	transition: all 0.3s ease; /* transizione fluida */
    
	background-color: #282827; /* sfondo */
	
}




.btn-sm {

    padding: 4px 8px; /* dimensioni ridotte per bottoni piccoli */

    font-size: 0.8rem;
    outline-border: black;
}



.btn-outline-primary {

    border-color: #070707; /* bordo blu */

    color: #ffffff; /* testo blu */
	
	outline-border: black;

}



.btn-outline-primary:hover {

    background-color: #c4c4c4; /* sfondo blu al passaggio */

    color: black; /* testo bianco al passaggio */

	outline-border: black;
}



.btn-outline-danger {

    border-color: #ffffff; /* bordo rosso */

    color: #ffffff; /* testo rosso */

}



.btn-outline-danger:hover {

    background-color: #8d1212; /* sfondo rosso al passaggio */

    color: #ffd200; /* testo bianco al passaggio */

}




/* Carrello */

.cart-container {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 300px;

    background-color: #ffffff;

    border-radius: 10px 10px 0 0;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);

    padding: 10px;

    max-height: 70vh;

    overflow-y: auto;

    display: none;

}



.cart-header {

    font-weight: bold;

    text-align: center;

    background-color: #f8f8f8;

    padding: 10px;

    border-radius: 8px;

    cursor: pointer;

}



.cart-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 5px;

    border-bottom: 1px solid #ddd;

}



.cart-total {

    text-align: right;

    font-weight: bold;

    padding-top: 10px;

}



.cart-toggle-btn, #close-all-btn {

    position: fixed;

    bottom: 20px;

    width: 50px;

    height: 50px;

    background-color: #070707;

    color: #ffffff;

    border-radius: 50%;

    display: flex;

    align-items: center; 

    justify-content: center;

    cursor: pointer;

    font-size: 22px;

}



.cart-toggle-btn {

    left: 20px;

}



#close-all-btn {

    right: 20px;

    background-color: #333;

}



#close-all-btn:hover {

    transform: scale(1.1);

    background-color: #222;

}



/* Modale immagini */

.modal-content {

    border-radius: 10px;

}



.modal-body img {

    max-width: 100%;

    border-radius: 8px;

}



/* Schede prodotti inizialmente chiuse */

.prodotti {

  display: none;

}
.btn:hover {
border-color: black; !important
border: 1px !important
}

.btn-check:active
border-color: red; !important
border: 1px; !important
color: yellow; !important
}