/* BODY E FONT MODERNO */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #333;
    padding-top: 60px;
    overflow-x: hidden;
    /* spazio per bottoni lingua fissi */
}

/* LOGO */
.logo {
    text-align: center;
    padding: 25px 15px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.logo img {
    max-width: 80%;
    height: auto;
    border-radius: 15px;
    transition: transform 0.3s;
}

.logo img:active {
    transform: scale(0.9);
}

/* NAVIGAZIONE */
nav {
    background-color: #5A2D82;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    padding: 1px 0;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 5px;
}

nav ul li a {
    display: block;
    padding: 12px 25px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1.05em;
    border-radius: 15px;
    text-align: center;
    transition: all 0.2s ease;
}

nav ul li a:active {
    transform: scale(0.95);
    background-color: rgba(255, 102, 0, 0.5);
}

nav ul li a.active {
    background-color: #FF6600;
    color: white;
}

/* SWITCH LINGUA FISSO */
.lang-switch-fixed {
    position: fixed;
    top: 10px;
    right: 15px;
    z-index: 1000;
}

.lang-switch-fixed button {
    border: 2px solid #5A2D82;
    background: #FFFFFF;
    color: #5A2D82;
    padding: 6px 12px;
    margin-left: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.lang-switch-fixed button:hover {
    background: rgba(255, 127, 80, 0.2);
    transform: scale(1.05);
}

.lang-switch-fixed button.active {
    background-color: #D8BFFD;
    /* viola chiaro */
    color: #5A2D82;
    /* puoi mantenere il colore testo viola scuro */
    border-color: #5A2D82;
}

/* CONTENUTO */
.content, main {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
    max-width: 100%;
    box-sizing: border-box; /* include padding e border nella larghezza */
}

.page {
    display: none;
    width: 100%;
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

.page.active {
    display: block;
}

h2 {
    margin-top: 0;
    color: #5A2D82;
}

h3 {
    margin-top: 0;
    color: #5A2D82;
}

p {
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    nav ul li a {
        font-size: 1em;
        padding: 10px 15px;
    }

    .logo img {
        max-width: 90%;
    }

    .content {
        padding: 10px;
    }

    .page {
        padding: 10px;
    }
    body, main {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ----------*/

/* --- SEZIONI LINGUA --- */
.lang-section {
    display: none;
    padding: 0 15px;
}

.lang-section.active {
    display: block;
}

/* --- CONTENUTO SEZIONI --- */
section h2 {
    color: #5A2D82;
    margin-top: 20px;
}

section h3 {
    color: #333;
    margin-top: 15px;
}

section ul {
    margin-left: 20px;
}

section ul li {
    margin-bottom: 5px;
}

section p {
    line-height: 1.6;
    margin-bottom: 10px;
}

/* --- LINK EMAIL --- */
a[href^="mailto:"] {
    color: #FF7F50;
    text-decoration: underline;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 480px) {
    .lang-switch a {
        font-size: 1em;
        margin: 0 5px;
    }

    section h2 {
        font-size: 1.4em;
    }

    section h3 {
        font-size: 1.1em;
    }
}

.app-buttons {
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-wrap: wrap;        /* fa andare su più righe se lo spazio è stretto */
    gap: 15px;              /* spazio tra i bottoni */
    justify-content: center; /* centra i bottoni */
    padding: 0 10px;        /* margine dai bordi dello schermo */
}

.app-buttons a {
    flex: 1 1 auto; 
}

.app-buttons a img {
    height: 50px;           /* altezza più adatta per mobile */
    transition: transform 0.2s;
    max-width: 80%;        /* non esce dai bordi del container */
}

.app-buttons a img:hover {
    transform: scale(1.05);
}

/* ulteriore responsive per schermi molto piccoli */
@media (max-width: 400px) {
    .app-buttons a img {
        height: 45px;
    }
}

#satispay-logo {
    width: 70px;       /* larghezza uniforme */
    object-fit: contain; /* mantiene le proporzioni senza distorcere */
    margin-right: 8px; /* spazio tra icona e testo */
    vertical-align: middle; /* allinea icona al centro del testo */
}

#paypal-logo {
    width: 40px;       /* larghezza uniforme */
    object-fit: contain; /* mantiene le proporzioni senza distorcere */
    margin-right: 8px; /* spazio tra icona e testo */
    vertical-align: middle; /* allinea icona al centro del testo */
}

#email-logo {
    width: 40px;       /* larghezza uniforme */
    object-fit: contain; /* mantiene le proporzioni senza distorcere */
    margin-right: 3px; /* spazio tra icona e testo */
    vertical-align: middle; /* allinea icona al centro del testo */
}

#instagram-logo {
    width: 30px;       /* larghezza uniforme */
    object-fit: contain; /* mantiene le proporzioni senza distorcere */
    margin-right: 8px; /* spazio tra icona e testo */
    margin-left: 4px;
    vertical-align: middle; /* allinea icona al centro del testo */
}

#donate-it ul,
#donate-en ul  {
    list-style-type: none; /* toglie i pallini */
    padding: 0;            /* rimuove l'indentazione */
    margin: 0;             /* opzionale */
}

#donate-it li,
#donate-en li  {
    list-style-type: none; /* toglie i pallini */
    padding: 0;            /* rimuove l'indentazione */
    margin-bottom: 10px;   /* opzionale */
    margin-left: 20px;
}