/* Applica gli stili solo all'interno del contenitore del plugin */
.qmd-plugin-container {
    /* Colori di sfondo e generali */
    color: #000000 !important;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* Forza il colore di sfondo nero per il body nelle pagine del plugin */
body.qmd-plugin-page {
    background-color: #000000;
    color: #FFFFFF; /* Imposta il colore del testo a bianco per contrasto */
}

/* Assicurati che il contenitore del plugin non abbia uno sfondo che sovrascriva il nero */
.qmd-plugin-container .qmd-container {
    background-color: transparent;
}

/* Nascondi i titoli delle pagine */
.qmd-plugin-container .entry-title,
.qmd-plugin-container .page-title,
.qmd-plugin-container h1.entry-title,
.qmd-plugin-container h1.page-title {
    display: none;
}

/* Titoli centrati */
.qmd-plugin-container .qmd-container h1.qmd-category-title {
    text-align: center;
    margin-bottom: 40px;
}

/* Titoli delle pagine */
.qmd-plugin-container .qmd-container h1,
.qmd-plugin-container .qmd-container h2,
.qmd-plugin-container .qmd-container h3,
.qmd-plugin-container .qmd-container h4 {
    color: #FFA500;
}

/* Stili generali */
.qmd-plugin-container .qmd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: transparent;
    position: relative; /* Necessario per posizionare l'icona di ritorno */
}

.qmd-back-icon {
    display: none 
}

/* Regolazioni di spaziatura su desktop */
@media (min-width: 769px) {
    .qmd-plugin-container .qmd-container {
        padding: 60px 20px;
    }

    .qmd-plugin-container .qmd-macrocategorie,
    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        margin-bottom: 60px;
    }

    .qmd-plugin-container .qmd-categorie-buttons {
        margin-bottom: 60px;
    }
}

/* Elementi Macrocategoria e Categoria */
.qmd-plugin-container .qmd-macrocategoria-item,
.qmd-plugin-container .qmd-categoria-item {
    background-color: #000000; /* Sfondo delle card */
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(255, 165, 0, 0.5); /* Ombra arancione */
    width: 300px; /* Larghezza consistente */
    text-align: center;
}

.qmd-plugin-container .qmd-macrocategoria-item:hover,
.qmd-plugin-container .qmd-categoria-item:hover {
    transform: translateY(-10px);
}

/* Rimuovi sottolineatura dai link nelle card */
.qmd-plugin-container .qmd-macrocategoria-item a,
.qmd-plugin-container .qmd-categoria-item a {
    text-decoration: none;
    color: inherit; /* Colore del testo ereditato */
}

/* Immagini */
.qmd-plugin-container .qmd-macrocategoria-item img,
.qmd-plugin-container .qmd-categoria-item img {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
}

/* Area di testo */
.qmd-plugin-container .qmd-macrocategoria-item h3,
.qmd-plugin-container .qmd-categoria-item h3 {
    background-color: #000000; /* Sfondo dell'area di testo delle card */
    margin: 0;
    padding: 10px 15px;
    font-size: 1.2em;
    color: #FFA500; /* Testo arancione */
    text-align: center;
}

/* Aumenta lo spazio tra le card */
.qmd-plugin-container .qmd-macrocategorie,
.qmd-plugin-container .qmd-categorie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Spaziatura aumentata tra le card */
    margin-bottom: 30px;
}

/* Regola le dimensioni */
.qmd-plugin-container .qmd-macrocategorie-large .qmd-macrocategoria-item,
.qmd-plugin-container .qmd-categorie .qmd-categoria-item {
    width: 300px;
    height: auto;
}

/* Icone Macrocategoria piccole nelle pagine dei piatti */
.qmd-plugin-container .qmd-macrocategorie-small {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0;
    gap: 10px;
    justify-content: center;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item {
    width: 80px;
    height: auto;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item img {
    padding: 5px;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item h3 {
    font-size: 0.8em;
    padding: 5px;
}

/* Rimuovi sottolineatura dai link nelle icone macrocategoria piccole */
.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item a {
    text-decoration: none;
    color: inherit;
}

/* Pulsanti della pagina Categoria */
.qmd-plugin-container .qmd-categorie-buttons {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding: 10px 0;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: flex-start;
}

.qmd-plugin-container .qmd-categoria-button {
    padding: 10px 20px;
    background-color: #FFA500;
    color: #000000;
    text-decoration: none; /* Rimuovi sottolineatura del testo */
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
    white-space: nowrap; /* Impedisce l'andata a capo del testo */
}

.qmd-plugin-container .qmd-categoria-button:hover {
    background-color: #FF8C00;
    color: #FFFFFF;
}

/* Lista dei piatti */
.qmd-plugin-container .qmd-piatti {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spaziatura aumentata tra le card */
    justify-content: center;
}

.qmd-plugin-container .qmd-piatto-item {
    background-color: #000000;
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(255, 165, 0, 0.5); /* Ombra arancione */
}

.qmd-plugin-container .qmd-piatto-item:hover {
    transform: translateY(-10px);
}

/* Rimuovi sottolineatura dai link nelle card dei piatti */
.qmd-plugin-container .qmd-piatto-item a {
    text-decoration: none;
    color: inherit;
}

.qmd-plugin-container .qmd-piatto-img {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
}

.qmd-plugin-container .qmd-piatto-item h4,
.qmd-plugin-container .qmd-prezzo {
    background-color: #000000;
    margin: 0;
    padding: 10px 15px;
}

.qmd-plugin-container .qmd-piatto-item h4 {
    font-size: 1em; /* Ridotto da 1.5em a 1.2em */
    color: #FFA500;
}

.qmd-plugin-container .qmd-prezzo {
    font-size: 1.2em;
    color: #FFA500;
}

/* Popup dei dettagli del piatto */
.qmd-plugin-container #qmd-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.qmd-plugin-container .qmd-popup-content {
    background-color: #FFA500; /* Sfondo arancione */
    margin: auto;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 600px;
    position: relative;
    color: #000000; /* Testo nero */
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5); /* Ombra bianca aumentata */
}

.qmd-plugin-container .qmd-popup-close {
    color: #000000; /* Bottone di chiusura nero */
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.qmd-plugin-container .qmd-popup-close:hover,
.qmd-plugin-container .qmd-popup-close:focus {
    color: #333333;
}

.qmd-plugin-container .qmd-popup-content img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}

.qmd-plugin-container .qmd-popup-content h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #000000;
}

.qmd-plugin-container .qmd-popup-content p {
    font-size: 1.2em;
    color: #000000;
    margin-bottom: 20px;
}

/* Icona di ritorno */
.qmd-plugin-container .qmd-back-icon {
    position: absolute;
    top: 20px;
    left: 20px;
}

.qmd-plugin-container .qmd-back-icon img {
    width: 50px; /* Regola la dimensione se necessario */
    height: auto;
}

/* Responsivo per mobile */
@media (max-width: 767px) {
    /* Regola le icone macrocategoria per mobile */
    .qmd-plugin-container .qmd-macrocategorie {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; /* Riduci il gap da 40px a 20px */
    }

    .qmd-plugin-container .qmd-macrocategoria-item {
        width: 80%;
        height: auto;
    }

    .qmd-plugin-container .qmd-macrocategoria-item img {
        height: auto;
    }

    /* Regola categorie e piatti */
    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        /* Rimuovi flex-direction: column; */
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch; /* Mantieni allineamento uniforme */
        gap: 20px; /* Riduci il gap da 40px a 20px */
    }

    /* Imposta le card a 48% per due per fila */
    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 48%;
        max-width: 48%;
    }

    /* Specifica larghezza per le piatto-item */
    .qmd-plugin-container .qmd-piatto-item {
        width: 48%; /* Permette due per fila */
    }

    /* Regola la spaziatura su mobile */
    .qmd-plugin-container .qmd-container h1.qmd-category-title {
        margin-bottom: 20px;
    }

    .qmd-plugin-container .qmd-macrocategorie,
    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        margin-bottom: 20px;
    }

    .qmd-plugin-container .qmd-categorie-buttons {
        margin-bottom: 20px;
    }
}

/* Ulteriore media query per garantire due card per fila su smartphone */
@media (max-width: 599px) {
    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .qmd-plugin-container .qmd-piatto-item,
    .qmd-plugin-container .qmd-categoria-item {
        width: 48%; /* Due per fila */
    }
}

/* Visualizzazione su tablet: due card per riga nelle pagine delle categorie e dei piatti */
@media (min-width: 600px) and (max-width: 1024px) {
    /* Solo per le pagine delle categorie e dei piatti */
    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 45%;
        max-width: 45%;
    }
}