* {
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza e altezza */
}

.no-scroll {
    overflow: hidden;
}

.order-items .opzioni {
    display: n
    one !important;
}
body {
    color: #fff; /* Updated text color for better contrast */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none; /* Nascondi la barra di scorrimento su IE/Edge */
}

a {
    color: inherit;
    text-decoration: inherit;
}


.mainImg {
    margin-top: 2.8vh;
    width: 3vw;
    height: 3vw;
}

.sfondo {
    margin: 0;
    padding: 20px 0 0 0;
    background-color: #6D2323;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 25vh;
}

.up {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    display: flex;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.title-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Allinea a sinistra il container */
    width: 100%;
    position: relative;
}

.main-title {
    font-size: 4vw;
    font-weight: 900;
    font-family: Montserrat, sans-serif;
    text-align: center;
    width: 100%; /* Forza il titolo a occupare tutta la larghezza */
    margin: 0 auto; /* Centra il titolo */
}

.byline {
    font-size: 1.5vw;
    font-weight: 400;
    font-family: Montserrat, sans-serif;
    text-align: right;
    width: 100%;
    padding-right: 20px;
    margin-top: -8px;
}


@media (max-width: 768px) {
    .main-title {
        font-size: 32px;
    }
    .byline {
        font-size: 12px;
        padding-right: 5px;
        margin-top: -3px;
    }
}


.greeting {
    width: 95%;
    margin-left: 20px;
    padding: 5px;
    font-family: 'Montserrat', sans-serif;
}

.greeting h1 {
    font-size: 5vw;
    font-family: Montserrat, sans-serif;
}

.greeting p {
    font-size: 3.2vw;
    font-family: Montserrat, sans-serif;
}

.container {
    height: 80vh;
    width: 100%;
}

.food-detail-container {
    margin-top: 7vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.food-detail {
    width: 70vw;
    display: flex;
    margin: 6vw;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    position: relative; /* Aggiunto per il posizionamento assoluto degli elementi interni */
}

.food-detail img {
    display: block;
    width: 100%;
    height: 35vw;
    object-fit: cover;
    border-radius: 15px;
    opacity: 0.8;
}

.food-detail span {
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 6vw;
    position: absolute; /* Permette di posizionare il testo sopra l'immagine */
    top: 50%; /* Posiziona il testo al centro verticalmente */
    left: 50%; /* Posiziona il testo al centro orizzontalmente */
    transform: translate(-50%, -50%); /* Centra il testo */
    color: white; /* Colore del testo */
    padding: 10px; /* Padding per il testo */
    border-radius: 5px; /* Arrotonda gli angoli del background */
}

@media screen and (max-width: 359px) {
    .greeting h1 {
        font-size: 4.5vw;
    }
    .greeting p {
        font-size: 2.5vw;
    }
}

@media screen and (min-width: 767px) {
    .greeting h1 {
        font-size: 4.5vw;
    }
    .greeting p {
        font-size: 2.5vw;
    }
    .sfondo {
        height: 25%;
    }
}

@media screen and (min-width: 1000px) {
    .body {
        align-items: center;
    }
    .greeting h1 {
        font-size: 3vw;
    }
    .greeting p {
        font-size: 2vw;
    }
    .sfondo {
        height: 30%;
    }
    .food-detail {
        width: 70%;
        height: 30vw;
        margin: 10vh 50vh 10vh 50vh;
    }

    .food-detail { 
        margin: 4vh;
    }

    .icon {
        width: 50px;
        height: 50px;
    }
}

/* Aggiungi questi stili in index.css */
.swal2-container.fullscreen-modal {
    padding: 0 !important;
  }
  
  .swal2-popup.custom-popup-class {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  

.swal2-html-container.custom-content {
    flex: 1 1 auto !important;
    height: auto !important;
    overflow-y: auto;
    padding: 20px 15px !important;
}


.order-status-container {
    padding: 25px !important;
}

.order-header h3 {
    color: #6D2323 !important;
    font-size: 28px !important;
    margin-bottom: 30px !important;
    padding: 10px;
    border-bottom: 2px solid #f2f0ef;
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-item {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #f2f0ef !important;
    border-radius: 15px !important;
    color: #5A4A42 !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(109, 35, 35, 0.08);
    transition: all 0.3s ease;
}

.order-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(109, 35, 35, 0.12);
}

.order-id-status {
    color: #6D2323 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.order-id-status::before {
    content: '📌';
    font-size: 1.2em;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.order-status {
    background: #F8EDE3;
    border-radius: 8px;
    padding: 8px 12px;
    display: inline-block;
    margin: 10px 0;
    font-size: 15px !important;
    color: #8B6D5B !important;
}

.order-status::before {
    content: '⏳ ';
    margin-right: 8px;
}

.order-items .item {
    padding: 12px 0;
    border-bottom: 1px dashed #E5D0AC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-items .item:last-child {
    border-bottom: none;
}

.order-items .item span:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-total {
    background: #6D2323;
    color: #F8F4F0 !important;
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 20px !important;
    font-size: 18px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.close-icon-container {
    top: 25px !important;
    left: 25px !important;
}

.close-icon {
    width: 35px !important;
    height: 35px !important;
    transition: all 0.3s ease;
}

.close-icon:hover {
    transform: rotate(90deg) scale(1.1);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Contenitore dell'icona e del badge */
.order-status-icon-container {
    position: fixed;  /* Posiziona l'elemento in modo fisso rispetto alla finestra */
    top: 5vw;        /* Distanza dal top della finestra */
    right: 5vw;      /* Distanza dalla destra della finestra */
    display: inline-block;
    z-index: 1000;    /* Assicura che l'icona e il badge siano sopra gli altri elementi */
}

/* Icona dell'ordine */
#orderStatusIcon {
    display: none;  /* Inizialmente nascosta */
}

/* Badge per mostrare il numero di ordini attivi */
#orderBadge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff5a5a; /* Colore di sfondo del badge */
    color: white; /* Colore del numero */
    font-size: 12px; /* Dimensione del testo */
    width: 20px; /* Larghezza del badge */
    height: 20px; /* Altezza del badge */
    border-radius: 50%; /* Per fare un badge rotondo */
    display: none; /* Nascondi di default */
    text-align: center; /* Allinea il testo al centro */
    line-height: 20px; /* Allinea verticalmente il numero */
}

/* Mostra il badge e l'icona quando ci sono ordini attivi */
.order-status-icon-container #orderBadge,
.order-status-icon-container #orderStatusIcon {
    display: inline-block; /* Mostra l'icona e il badge */
}

/* Stile per il contenuto del pop-up */
.swal2-popup {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

/* Stile per il testo degli ordini */
.swal2-content {
    white-space: pre-wrap; /* Per permettere al testo di andare a capo correttamente */
    word-wrap: break-word; /* Per evitare che le parole troppo lunghe escano dal pop-up */
    line-height: 1.6; /* Distanza tra le righe per migliorare la leggibilità */
}

/* Stile per ogni blocco di ordine */
.order-item {
    background-color: #6D2323;
    border-radius: 0.75em;
    cursor: pointer;
    transition: ease 0.2s;
    border: 1.5px solid #6D2323;
    padding: 20px;
    margin-bottom: 20px;
}

.item {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    color: #111;
}

/* Stile per l'ID dell'ordine e il suo stato */
.order-id-status {
    font-weight: bold;
    margin-bottom: 5px;
    color: #E5D0AC; /* Use red only for the order ID */
}

/* Stile per la lista degli articoli */
.order-items {
    color: #fff;
    margin-top: 0; /* Removed excessive margin above order items */
}

/* Colore per il titolo */
.custom-title {
    font-size: 20px;
    font-weight: bold;
    color: #E5D0AC; /* Use red only for the title */
}

/* Colore per il bottone di conferma */
.custom-button,
.swal2-confirm {
    background-color: #79211e; /* Arancione per il bottone */
    color: white; /* Colore del testo del bottone */
    border: 2px solid #79211e; /* Aggiunge il contorno arancione */
    padding: 10px 20px; /* Aggiunge un po' di spazio interno */
    font-size: 16px;
    border-radius: 5px; /* Aggiunge angoli arrotondati */
}

/* Cambia colore al bottone quando il mouse passa sopra */
.custom-button:hover,
.swal2-confirm:hover {
    background-color: #5a1916; /* Colore più scuro per l'hover */
    border-color: #4e1513; /* Cambia anche il bordo quando l'hover */
}

/* Aggiusta il contorno viola del bottone di conferma */
.swal2-confirm:focus {
    outline: none; /* Rimuove la bordatura di focus predefinita */
    box-shadow: 0 0 0 3px rgba(255, 127, 50, 0.5); /* Aggiunge un bordo arancione al focus */
}

/* Animazione quando il badge diventa visibile */
#orderBadge.animate__fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

/* Colori di base */
:root {
    --background-light: #F8EDE3; /* Updated background light color */
    --background-accent: #ff5a5a; /* Updated background accent color */
    --primary-color: #ff5a5a; /* Colore primario (rosso chiaro) */
    --secondary-color: #E5D0AC; /* Colore secondario (rosso scuro) */
}



/* ID ordine */
.order-id {
    font-size: 16px;
    font-weight: bold;
    color: #E5D0AC; /* Testo in rosso scuro */
    margin-bottom: 5px;
}

/* Stato ordine */
.order-status {
    font-size: 14px;
    color: #fff; /* Testo in colore chiaro */
    margin-bottom: 10px;
}

/* Totale ordine */
.order-total {
    font-size: 18px;
    color: #fff; /* Use red only for the total */
    font-weight: bold;
    margin-top: 15px;
}

/* Lista articoli */
.order-items ul {
    list-style-type: none;
    margin: 0; /* Ensure no margin for the list */
    padding: 0;
    margin: 0;
}

.order-items li {
    margin-bottom: 5px;
    margin-top: 0; /* Removed excessive margin above each order item */
}

/* Icona e badge */
.order-status-icon-container {
    position: fixed;
    top: 5vw;
    right: 5vw;
    display: inline-block;
    z-index: 1000;
}

#orderStatusIcon {
    display: none;
    filter: drop-shadow(0 0 2px var(--primary-color)); /* Ombra per l'icona */
}

.icon {
    width: 30px;
    height: 30px;
}

#orderBadge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff5a5a; /* Colore del badge */
    color: var(--background-light); /* Testo del badge */
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Icona personalizzata */
.swal2-icon.swal2-info.custom-icon {
    color: #A31D1D; /* Colore dell'icona (rosso scuro) */
    border-color: #A31D1D; /* Colore del bordo dell'icona */
}

/* Titolo del popup */
.swal2-title.custom-title {
    color: #6D2323; /* Colore del titolo (rosso più scuro) */
    font-size: 24px;
    font-weight: bold;
}

/* Bottone di conferma */
.swal2-confirm.custom-button {
    background-color: #A31D1D; /* Colore di sfondo del bottone (rosso scuro) */
    color: #FEF9E1; /* Colore del testo del bottone (sfondo chiaro) */
    border: 2px solid #A31D1D; /* Bordo del bottone */
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 20px; /* Aggiungi spazio sopra il bottone */
}

/* Effetto hover sul bottone */
.swal2-confirm.custom-button:hover {
    background-color: #6D2323; /* Colore di sfondo al passaggio del mouse (rosso più scuro) */
    border-color: #6D2323; /* Cambia il bordo al passaggio del mouse */
}

/* Contenitore dell'icona di chiusura */
.close-icon-container {
    position: absolute;
    top: 35px;
    left: 25px;
    cursor: pointer; /* Cambia il cursore in una mano per indicare che è cliccabile */
}

/* Icona di chiusura */
.close-icon {
    width: 24px; /* Dimensione dell'icona */
    height: 24px;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)); /* Ombra leggera */
    transition: transform 0.2s ease; /* Animazione al passaggio del mouse */
}

/* Effetto hover sull'icona di chiusura */
.close-icon:hover {
    transform: scale(1.1); /* Ingrandisce leggermente l'icona */
}

/* Animazione per il badge */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 400px) {
    .sfondo {   
        height: 25vh;
    }
}

/* New styles for order items */
.order-item {
    padding: 30px; /* Increased padding for better spacing */
    margin-bottom: 30px; /* Increased margin for better separation */
    transition: transform 0.2s; /* Added transform for hover effect */
}

.order-item:hover {
    transform: scale(1.02); /* Slightly scale up on hover */
}

.order-status, .order-items {
    font-family: 'Poppins', sans-serif; /* Change to a rounder font */
    font-size: 16px; /* Adjust font size for better readability */
}