body {
    background-color: #121212;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

html,
body {
    height: 100%;
    margin: 0;
}


header {
    background-color: #000000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('./font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo a {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
}

.logo span {
    margin-left: 0.5rem;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    overflow: hidden;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
    z-index: 10;
}

.nav-links a:hover {
    color: #833d91;
}

p{
    font-family: "Montserrat";
}

/* Stile Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    cursor: pointer;
    position: relative;
    z-index: 1100;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 5px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger attivo (freccia verso il basso) */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, -8px); 
    width: 18px;
    background: #833d91;
}

.hamburger.active span:nth-child(2) {
    transform: rotate(90deg);
    background: #833d91; 
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(13px, -15px); /*translate(0, 7px);*/
    width: 18px;
    background: #833d91; 
}

.no-scroll {
    overflow: hidden;
    height: 100vh; /* Evita qualsiasi scrolling verticale */
}
.scorrimentoZampa{
    display: none;
    position: fixed;
}

/* Responsivo */
@media screen and (max-width: 768px) {
    .nav-links {
        z-index: 998;
        display: flex; /* Mantieni flex per la disposizione degli item */
        flex-direction: column;
        background-color: #000000;
        position: fixed; /* Usa fixed per mantenere il menu sopra la pagina */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Occupa tutta l'altezza della finestra */
        justify-content: center;
        align-items: center;
        gap: 3rem;
        margin: 0;
        padding: unset;
        transform: translateY(-100%); /* Spinge il menu sopra la finestra */
        transition: transform 1s ease-in-out; /* Anima il movimento verticale */
    }
    
    .nav-links.active {
        transform: translateY(0); /* Porta il menu in vista */
    }
    
    /* Link del menu */
    .nav-links a {
        text-decoration: none;
        color: #fff;
        font-size: 6vw;
        font-weight: 600;
        transition: color 0.3s ease;
        z-index: 10;
    }
    .scorrimentoZampa{
        z-index: 999;
        display: block;
        position: fixed;
        top:-30%;
        left:-5vh;
        transition: transform 1s ease-in-out;
    }

    .scorrimentoZampa.active {
        transform: translateY(95vh);
    }
    .hamburger {
        display: flex;
    }
}

main {
    padding-left: 10vw;
    padding-right: 10vw;
}

a {
    color: #8d50b8;
    font-family: "Montserrat-Bold";
}

.container {
    background-color: #121212;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        max-height: 100dvh;
        height: 100dvh;
    }

    main {
        padding: 20px;
    }

    h1 {
        font-size: 22px;
    }

    h1::before {
        content: "";
        position: absolute;
        left: 7%;
        bottom: 16px;
        width: 150px;
        height: 14px;
        transform: skew(-12deg) translateX(-50%);
        background: rgba(238,111,87,0.5);
        z-index: -1;
      }

    input,
    select,
    button {
        font-size: 14px;
        padding: 10px;
    }

    .result {
        font-size: 16px;
        padding: 12px;
    }

    .pasti {
        font-size: 16px;
        padding: 12px;
    }

    .additionalInfo {
        font-size: 16px;
        padding: 12px;
    }

    .sources {
        font-size: 12px;
    }
}

span {
    display: inline-block;
}

h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: #b57fdb;
    font-family: "Montserrat-Bold";
}

label {
    /* font-size: 16px; */
    font-weight: bold;
    display: block;
    color: #ffffff;
}

.myText {
    font-size: 14px;
    font-weight: normal;
    display: block;
    color: #ffffff;
}

input,
label {
    width: 50%;
    font-family: "Montserrat";
}

.input {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.211);
    outline: none;
    font-size: 16px;
    border-radius: 9999px;
    box-shadow: inset 2px 5px 10px rgba(78, 0, 127, 0.181);
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 20px;
    font-family: "Montserrat";
}

.input option {
    background-color: #0c0c0c;
    color: #ffffff;
    padding: 5px;
    font-family: "Montserrat";
}

.input:hover {
    border-color: #b57fdb;
}

.input:focus {
    border-color: #b57fdb;
    box-shadow: 0 0 5px rgba(181, 127, 219, 0.5);
}

input,
select,
button {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #555;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

input:focus,
select:focus {
    border-color: #b57fdb;
    outline: none;
}

.sources {
    margin-top: 20px;
    font-size: 14px;
    color: #888;
    display: none;
}

.sources a {
    color: #b57fdb;
    text-decoration: none;
}

.sources a:hover {
    text-decoration: underline;
}

.info-section {
    margin-bottom: 50px;
    padding: 15px;
    background-color: #1d1d1d;
    border: 1px solid violet;
    border-radius: 8px;
    color: #ffffff;
    display: none;
    transition: all 0.3s ease;
}

.info-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.info-section ul li {
    padding: 0;
    margin: 0;
}

.result {
    background-color: #1d1d1d;
    border: 1px solid violet;
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    display: none;
    margin-top: 20px;
}

.pasti {
    background-color: #1d1d1d;
    border: 1px solid violet;
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    display: none;
    margin-top: 20px;
}

.additionalInfo {
    background-color: #1d1d1d;
    border: 1px solid violet;
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    display: none;
    margin-top: 20px;
}

.info-btn {
    width: 100%;
}

.info-header {
    text-align: left;
    font-weight: bold;
    background-color: #b57fdb;
    color: white;
    padding: 5px;
}

#container2 {
    display: flex;
    gap: 10px;
    align-items: center;
}

#containerCampi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#containerCampi > label {
    /* font-size: 14px; */
    color: #ffffff;
    width: 45%;
    text-align: end;
}

#containerCampi input {
    font-size: 14px;
    color: #ffffff;
    width: 50%;
}

#containerCampi select {
    font-size: 14px;
    color: #ffffff;
    width: 50%;
}

/* #containerCampi button {
    font-size: 14px;
    color: #ffffff;
    width: 45%;
} */

.bn30 {
    border: 5px;
    cursor: pointer;
    outline: none;
    font-size: 16px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(45deg, #4568dc, #b06ab3);
    /* padding: 0; */
    border-radius: 65px;
    box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    color: white;
    font-family: "Montserrat";
}

.bn30 .text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #4568dc, #b06ab3);
}

.bn30:after {
    content: "";
    border-radius: 18px;
    position: absolute;
    margin: 2px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: #0e0e10;
}

.bn30:hover {
    background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
}

.bn30:hover .text {
    background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), radial-gradient(circle, #7d2ae8 20%, transparent 20%), radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), radial-gradient(circle, #7d2ae8 20%, transparent 20%), radial-gradient(circle, #7d2ae8 20%, transparent 20%), radial-gradient(circle, #7d2ae8 20%, transparent 20%), radial-gradient(circle, #7d2ae8 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}


/* QUALITà CROCCHETTE */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 50px 0;
    font-family: "Montserrat";
    border-radius: 12px;
    /* font-size: 1rem; */
    overflow: hidden;
}

table td:first-child {
    font-weight: bold;
    /* font-size: 1rem; */
}

table td:last-child {
    font-weight: normal;
    /* font-size: 1rem; */
    text-align: left;
}


table th,
table td {
    border: 1px solid #47474769;
    padding: 8px;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* table td:nth-child(1){
    border-right:1px solid #121212 !important;
} */
.dettagliMangime td, th{
    border:1px solid #f8f9fa;
}

table th {
    background-color: #b57fdb;
    color: rgb(0, 0, 0);
}

#MangimiAnalizzati td:last-child {
    text-align: center;
}

.note-importanti p {
    margin: 15px 0;
}

.parametri-valutazione h2,
.note-importanti h2 {
    color: #b57fdb;
    margin-top: 30px;
}


.valutazione {
    font-size: 0.2rem;
    white-space: nowrap; /* Evita il wrapping del contenuto */
}

@media (max-width: 768px) {

    table th,
    table td {
        font-size: 0.85rem;
        padding: 6px;
    }

    #MangimiAnalizzati th,
    #MangimiAnalizzati td {
        font-size: 0.65rem;
    }



    #MangimiAnalizzati td:last-child {
        text-align: center;
    }

    .parametri-valutazione h2,
    .note-importanti h2 {
        font-size: 18px;
    }

}


.forcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.forcheck {
    display: flex;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    justify-self: center;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 100%;
}

/* Create a custom checkbox */
.checkmark {
    --clr: #711e92;
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background-color: #ccc;
    border-radius: 50%;
    transition: 300ms;
}

/* When the checkbox is checked, add a blue background */
.forcheck input:checked~.checkmark {
    background-color: var(--clr);
    border-radius: .5rem;
    animation: pulse 500ms ease-in-out;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.forcheck input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.forcheck .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 0.25em;
    height: 0.5em;
    border: solid #ffffff;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 #570f9e90;
        rotate: 20deg;
    }

    50% {
        rotate: -20deg;
    }

    75% {
        box-shadow: 0 0 0 10px #570f9e66;
    }

    100% {
        box-shadow: 0 0 0 13px #570f9e37;
        rotate: 0;
    }
}

.enfasibad {
    color: white;
    text-decoration: underline;
    text-decoration-color: DARKRED;
}

.enfasigood {
    color: white;
    text-decoration: underline;
    text-decoration-color: lightgreen;
}

.enfasi {
    color: white;
    text-decoration: underline;
    text-decoration-color: #b57fdb;
}



.eccellente { background-color: #64249b; color: white; }
.molto-buono { background-color: #90EE90; color: black; }
.buono { background-color: #D3FFBD; color: black; }
.discreto { background-color: #FFFF99; color: black; }
.sufficiente { background-color: #FFFF00; color: black; }
.mediocre { background-color: #FFA500; color: black; }
.insufficiente { background-color: #FF7F3F; color: black; }
.scarso { background-color: #FF4C4C; color: white; }
.molto-scarso { background-color: #FF0000; color: white; }
.blank { background-color: #ffffff; color: black; }

.risultati{
    font-size: 0.7rem;
}

th {
    cursor: pointer;
    /* position: relative; */
}

.sort-indicator {
    font-size: 1em;
    /* margin-left: 5px; */
    color: #000000;
}

/* Stile generale per i dettagli */
#MangimiAnalizzati tr[id^="details-row-"] {
    background-color: #f8f9fa;
    color: #000; /* Testo nero */
    font-size: 0.9em;
}

/* Colore verde per valori positivi */
#MangimiAnalizzati .positivo {
    color: green;
    font-weight: bold;
}

/* Colore rosso per valori negativi */
#MangimiAnalizzati .negativo {
    color: red;
    font-weight: bold;
}

/* Parametro in grassetto */
#MangimiAnalizzati ul li b {
    color: #000;
    font-weight: bold;
}