html {
    scroll-behavior: smooth;
    /* Rimosso overflow-x da qui per permettere lo zoom */
}

/* --- RESET E BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #fdfdfd;
    color: #333;
    width: 100%;
    position: relative;
    overflow-x: hidden; /* Lasciamo l'overflow solo qui per bloccare l'oscillazione */
    -webkit-text-size-adjust: 100%; /* Evita che il browser cambi dimensione ai testi da solo */
}
/* --- HEADER --- */
.main-header { background: #fff; border-bottom: 1px solid #eee; padding: 15px 5%; }
.header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: auto; }
/* Sostituisci o aggiungi queste righe nel tuo CSS */

.logo {
    display: flex;
    align-items: center;
    font-family: 'Arial Black', sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -1px; /* Stringe tutte le lettere della parola */
    color: #1a1a1a;
    text-transform: uppercase;
}

.logo span {
    color: #e74c3c;
    font-weight: 900; /* Stesso peso per sembrare un'unica parola */
    margin-left: -3px; /* Avvicina la I alla Y perfettamente */
    display: inline-block;
}

.logo-img {
    height: 40px; /* Leggermente ridotta per allinearla meglio al testo */
    width: auto;
    margin-right: 12px; /* Spazio uniforme tra immagine e testo */
}

/* --- HEADER: TAGLINE --- */
.tagline {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* Allineamento a destra nell'header */
.header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Spinge tutto a destra */
    gap: 20px; /* Spazio tra i blocchi */
}

.icon-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.icon-link:hover {
    transform: scale(1.05);
}

/* --- HEADER ICONS UNIFORMITY --- */
.icon-item {
    display: flex;
    align-items: center; /* Allinea verticalmente icona e testo */
    gap: 10px;
    height: 45px; /* Forza un'altezza fissa per uniformità */
}

/* Forza tutte le icone (immagini ed emoji) ad avere la stessa dimensione */
.header-icon-img,
.icon-item .icon {
    width: 32px;
    height: 32px;
    font-size: 28px; /* Dimensione per le emoji */
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    flex-shrink: 0; /* Impedisce che l'icona si schiacci */
}

.icon-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.icon-text span {
    font-size: 14px;
    font-weight: 800;
}

.icon-text small {
    font-size: 10px;
    color: #888;
    font-weight: normal;
}

/* Evidenzia il tasto iscrizione per farlo notare */
.icon-link.highlight .icon-text span {
    color: #e74c3c;
}

@media (max-width: 768px) {
    /* Blocca ogni slittamento laterale senza bloccare lo zoom */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
        /* IMPORTANTE: manipulation permette lo zoom, pan-y lo bloccava */
        touch-action: manipulation;
    }

    /* --- CAROSELLO MOBILE TOUCH-READY --- */
    .hero-carousel {
        padding: 10px 0;
        width: 100%; /* Cambiato da 100vw a 100% per evitare bug di larghezza */
        margin: 0;
        cursor: grab;
        overflow: hidden;
    }

        .hero-carousel:active {
            cursor: grabbing;
        }

        .carousel-container {
            width: 100%;
            margin: 0;
            border-radius: 0;
            padding: 0;
            overflow: hidden;
        }

        .carousel-slide {
            display: flex;
            width: 100%;
            gap: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            /* La transizione è gestita dallo script per il drag */
            will-change: transform;
        }

        /* Esplode i gruppi per rendere ogni foto una slide singola */
        .carousel-group {
            display: contents !important;
        }

        .img-box {
            width: 100vw !important;
            flex: 0 0 100vw !important;
            height: 320px; /* Altezza leggermente aumentata per visibilità */
            margin: 0 !important;
            padding: 0 15px !important; /* Spazio interno per non far toccare i bordi */
            border: none !important;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none; /* Impedisce la selezione durante il trascinamento */
        }

        .img-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none; /* Impedisce al browser di "prendere" l'immagine */
        }

        /* --- WORKFLOW AGGRAZIATO (Griglia 2x2) --- */
        .workflow { padding: 30px 10px; }
        .workflow h3 { font-size: 24px; margin-bottom: 20px; text-align: center; }

        .flow-steps {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 10px;
        }

        .f-step {
            background: #fff;
            padding: 15px 10px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid #eee;
            max-width: 100%;
            margin: 0;
            text-align: center;
        }

        .f-step span {
            font-size: 30px !important;
            line-height: 1 !important;
            margin-bottom: 10px !important;
            display: block;
        }

        .f-step p {
            font-size: 13px !important;
            font-weight: 700;
            margin: 5px 0;
        }

        .f-step small {
            font-size: 11px !important;
            display: block;
            color: #888;
        }

        .f-line { display: none; }
        }




    @media (max-width: 768px) {
        /* Layout Header Mobile centrato e compatto */
        .header-content {
            flex-direction: column;
            gap: 15px;
            padding: 10px 0;
        }

        .header-icons {
            width: 100%;
            justify-content: space-around; /* Distribuisce le icone equamente */
            gap: 10px;
        }

        .icon-item {
            gap: 5px;
            flex-direction: column; /* Icona sopra, testo sotto per risparmiare spazio */
            height: auto;
            text-align: center;
        }

        .header-icon-img,
        .icon-item .icon {
            width: 28px;
            height: 28px;
            font-size: 24px;
        }

        .icon-text span {
            font-size: 11px; /* Testo più piccolo su mobile */
        }

        .icon-text small {
            display: none; /* Nasconde il testo piccolo su mobile per pulizia */
        }

        .logo {
            font-size: 22px;
        }
    }

/* --- NAVIGAZIONE --- */
.market-nav { background: #fff; border-bottom: 1px solid #eee; }
.market-nav ul { display: flex; list-style: none; justify-content: center; max-width: 1200px; margin: auto; }
.market-nav li a { display: block; padding: 12px 25px; text-decoration: none; color: #444; font-size: 13px; font-weight: 500; transition: 0.3s; }
.market-nav li a:hover { background-color: #e74c3c; color: white; }
/* Aggiungi o modifica nel menu */
.market-nav li a[href="tariffe.html"] {
    color: #e74c3c; /* Rosso per farlo risaltare */
    font-weight: 800;
}
/* --- CAROSELLO PC --- */
.hero-carousel { padding: 30px 5%; max-width: 1200px; margin: auto; }
.carousel-container { border-radius: 20px; overflow: hidden; }
.carousel-slide { display: flex; width: 500%; transition: transform 0.8s ease-in-out; }
.carousel-group { display: flex; width: 20%; gap: 20px; padding: 10px; box-sizing: border-box; }
.img-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffffff; overflow: hidden; height: 450px; border: 1px solid #eee; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.img-box a { display: block; width: 100%; height: 100%; }
.img-box img { width: 100%; height: 100%; object-fit: contain; background-color: #ffffff; transition: transform 0.3s ease; }
.img-box img:hover { transform: scale(1.02); }
.carousel-dots { text-align: center; margin-top: 20px; }
.dot { height: 8px; width: 40px; background: #ddd; display: inline-block; margin: 0 5px; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
.dot.active { background: #e74c3c; }

/* --- QUICK LINKS --- */
.quick-links {
    display: grid;
    /* Cambiato da 4 a 3 colonne */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 5%;
    max-width: 900px; /* Ridotto leggermente per bilanciare 3 tasti */
    margin: 0 auto;  /* Centra il contenitore nello schermo */
}

.link-btn {
    padding: 18px;
    text-align: center;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s; /* Un piccolo tocco per renderlo più moderno */
}

.link-btn:hover {
    transform: scale(1.02); /* Effetto al passaggio del mouse */
}

/* --- QUICK LINKS AGGIORNATI --- */
.vinted {
    background: #ff4b4b; /* Rosso acceso per attirare l'occhio */
    border: 2px solid #d43f3f; /* Un bordo leggermente più scuro per farlo "staccare" */
    transform: scale(1.05); /* Lo rendiamo leggermente più grande degli altri */
}

.wallapop { background: #13c1ac; } /* Torna al suo colore originale o un verde acqua */

.ebay { background: #0064d2; }

/* Effetto speciale per Vinted quando ci passano sopra col mouse */
.vinted:hover {
    background: #ff0000;
    transform: scale(1.10);
}

/* --- WORKFLOW (CORRETTO PER PC) --- */
.workflow { padding: 60px 5%; text-align: center; }
.workflow h3 {
    font-size: 42px; /* Titolo principale più grande */
    margin-bottom: 10px;
}

.workflow p {
    font-size: 20px; /* Il sottotitolo "Come funziona..." */
    color: #888;
}
.flow-steps {
    display: flex;
    justify-content: center;
    align-items: center; /* Allinea icone e linee al centro */
    gap: 30px; /* Riduciamo il gap se le icone sono giganti per non farle uscire dallo schermo */
    max-width: 1400px; /* Permettiamo alla sezione di allargarsi di più sul PC */
    margin: 60px auto 0;
}

.f-step {
    flex: 1;
    max-width: 280px; /* <--- AUMENTA IL MAX-WIDTH (da 200px a 280px) */
}
.f-step span {
    display: inline-block; /* Cambiato da block a inline-block */
    font-size: 55px !important; /* Forza la dimensione a 120px */
    line-height: 100px !important; /* Altezza riga uguale al font */
    min-width: 120px; /* Impedisce che si rimpicciolisca */
    margin-bottom: 25px;
    text-align: center;
}
.f-step p {
    font-size: 24px; /* Ingrandito da 18px */
    font-weight: 800; /* Più grassetto */
    color: #222;
    line-height: 1.2;
}

.f-step small {
    display: block;
    font-size: 15px; /* Ingrandito da 12px */
    color: #666; /* Un po' più scuro per leggere meglio */
    font-weight: 500;
    margin-top: 8px;
}

/* Allunghiamo la linea tra i passaggi per distanziarli meglio */
.f-line {
    height: 4px;
    width: 80px;
    background: #e74c3c;
    margin-top: -60px; /* Valore negativo per portarla verso l'alto rispetto al testo, ma centrata con le icone */
    opacity: 0.3;
    flex-shrink: 0; /* Impedisce alla linea di rimpicciolirsi */
}

/* --- STILE LINK WORKFLOW --- */
.f-step-link {
    text-decoration: none !important; /* Rimuove sottolineatura blu */
    color: inherit; /* Mantiene il colore del testo */
    flex: 1;
    display: block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.f-step-link:hover {
    transform: translateY(-10px); /* Si alza sensibilmente */
}

.f-step-link:hover .f-step p {
    color: #e74c3c; /* Il titolo diventa rosso al passaggio */
}

.f-step-link:hover span {
    filter: drop-shadow(0 10px 15px rgba(231, 76, 60, 0.3)); /* Bagliore sotto l'emoji */
}

/* Evita che la linea rossa si sposti durante l'hover */
.f-line {
    pointer-events: none;
}


/* --- FEATURES (CORRETTO PER PC) --- */
.features { padding: 70px 5%; text-align: center; background: #fff; border-top: 1px solid #eee; }
.features h2 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.features > p { font-size: 16px; color: #666; margin-bottom: 50px; }
.features-grid { display: flex; justify-content: center; gap: 50px; max-width: 1200px; margin: auto; }
.feature-item { flex: 1; padding: 20px; }
.feature-item h4 { color: #e74c3c; margin: 20px 0 10px; font-size: 22px; font-weight: 800; }
.feature-item p { font-size: 16px; color: #555; line-height: 1.6; }
.flag-container img { width: 35px; margin: 0 3px; border-radius: 3px; }
.icon-circle { font-size: 50px; }

/* --- PULSANTE SINGOLO (Tariffe) --- */
.single-action-container {
    text-align: center;
    margin: 40px auto;
    padding: 0 5%;
}

.single-action-container p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Applichiamo lo stile del btn-box ma centrato e con larghezza auto */
.single-action-container .btn-box {
    display: inline-block;
    width: auto;
    min-width: 280px; /* Larghezza minima per farlo sembrare importante */
    padding: 16px 40px;
    background: #e74c3c;
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.single-action-container .btn-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.2);
    filter: brightness(1.1);
}

@media (max-width: 600px) {
    .single-action-container .btn-box {
        width: 100%; /* Su mobile occupa tutta la larghezza per essere cliccabile */
        min-width: unset;
        font-size: 16px;
    }
}

/* --- BOTTONI FINALI (Guida e Contatti) --- */
.footer-actions {
    display: flex;
    justify-content: center;
    gap: 12px; /* Molto più vicini */
    max-width: 800px;
    margin: 20px auto 50px; /* Ridotto margine sopra per avvicinarli al tasto tariffe */
    padding: 0 15px;
}

.footer-actions .btn-box {
    flex: 1;
    padding: 15px 10px; /* Altezza ridotta, più eleganti */
    border-radius: 6px; /* Angoli meno arrotondati, più seri */
    color: white !important;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px; /* Scritta principale leggibile */
    line-height: 1.2;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 65px;
}

/* Sottotitoli piccoli sotto il giapponese */
.footer-actions .btn-box span {
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 4px;
}

/* Colori Business (Verde più sobrio e Rosso ProxyITA) */
.footer-actions .green { background: #2ecc71; }
.footer-actions .red { background: #e74c3c; }

.footer-actions .btn-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    filter: brightness(1.1);
}

/* Ottimizzazione Mobile */
@media (max-width: 600px) {
    .footer-actions {
        gap: 8px;
        margin-top: 10px;
    }
    .footer-actions .btn-box {
        font-size: 13px; /* Leggermente più piccoli su smartphone */
        min-height: 60px;
    }
}

/* --- FOOTER & SOCIAL --- */
.main-footer { background: #222; color: white; padding: 50px 5%; text-align: center; }
.social-icons { display: flex; justify-content: center; align-items: center; gap: 25px; margin-bottom: 30px; }
.social-icons img { width: 35px; height: 35px; object-fit: contain; transition: transform 0.3s; }
.social-icons a:hover img { transform: scale(1.1); }
.main-footer p { font-size: 13px; opacity: 0.6; }



    /* Sistemazione testi per evitare che rompano il layout */
    .flow-steps {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 80px; /* <--- RADDOPPIA IL GAP (da 40px a 80px) */
        margin-top: 60px;
    }
    .f-line { display: none; }
    .f-step {
    flex: 1;
    max-width: 280px; /* <--- AUMENTA IL MAX-WIDTH (da 200px a 280px) */
}
    .f-step p { font-size: 14px; }
    .f-step span { font-size: 24px; }

    .features-grid { flex-direction: column; gap: 30px; align-items: center; }
    .feature-item { padding: 0; }

    .footer-actions { flex-direction: column; gap: 10px; }
    .btn-box { font-size: 18px; padding: 20px; width: 100%; }
}



.main-footer {
    background: #222;
    color: white;
    padding: 25px 5%; /* Ridotto da 40/50px a 25px per renderlo più sottile */
    text-align: center;
}

.footer-links {
    margin-bottom: 15px; /* Spazio ridotto tra link e disclaimer */
    font-size: 13px;
}

.disclaimer-text {
    font-size: 11px;
    line-height: 1.4;
    color: #888;
    max-width: 700px; /* Stringiamo un po' il testo per farlo stare su meno righe */
    margin: 0 auto 15px auto; /* Centrato con margine ridotto sotto */
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    margin: 0 5px;
}

.footer-links a:hover {
    color: #e74c3c;
}

.footer-links .separator {
    color: #444;
}

.copyright {
    font-size: 12px;
    opacity: 0.6;
}



/* --- MINI GALLERY GUIDA (PULITA) --- */
.mini-gallery {
    padding: 30px 0;
    background: #fdfdfd;
    overflow: hidden;
    text-align: center;
    cursor: grab;
}

.mini-gallery:active {
    cursor: grabbing;
}

.gallery-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.gallery-track {
    display: flex;
    gap: 15px;
    width: max-content;
    will-change: transform;
}

.gallery-track a {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    -webkit-user-drag: none;
}

.gallery-track img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    pointer-events: none; /* Fondamentale per il drag */
}

/* Riattiva i click sul link ma permette il drag */
.gallery-track a {
    pointer-events: auto;
}

.gallery-text {
    font-size: 14px;
    color: #444;
    margin-top: 15px;
    font-weight: bold;
}

.gallery-text span {
    font-size: 11px;
    color: #999;
    display: block;
}

.gallery-track a {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    /* Impedisce al browser di trascinare il link come oggetto */
    -webkit-user-drag: none;
    user-drag: none;
}

.gallery-track img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    pointer-events: none;
    /* Impedisce di "prendere" l'immagine col mouse */
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 768px) {
    .gallery-track img {
        width: 140px;
        height: 140px;
    }
}

/* --- LAYOUT GUIDA --- */
.guide-container {
    max-width: 1100px;
    margin: auto;
    padding: 50px 5%;
    text-align: center;
}

.guide-container h1 { font-size: 34px; font-weight: 800; color: #333; }
.guide-subtitle { color: #888; margin-bottom: 40px; font-size: 16px; }

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.guide-card {
    background: white;
    padding: 40px 25px;
    border-radius: 20px;
    border: 1px solid #eee;
    text-align: left;
    position: relative;
    transition: transform 0.3s ease;
}

.guide-card:hover { transform: translateY(-5px); }

.step-badge {
    position: absolute;
    top: -15px;
    left: 25px;
    background: #e74c3c;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 18px;
}

.card-icon { font-size: 35px; margin-bottom: 10px; display: block; }

.guide-card h4 { font-size: 19px; color: #222; margin-top: 5px; margin-bottom: 15px; line-height: 1.2; }
.guide-card h4 span { font-size: 12px; font-weight: normal; color: #888; }
.guide-card p { font-size: 14px; color: #666; line-height: 1.6; }

.guide-card.special { border: 2px solid #8cc63f; background: #f9fff0; }
.guide-card.special .step-badge { background: #8cc63f; }

.returns-policy-box {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    padding: 30px;
    border-radius: 15px;
    text-align: left;
    scroll-margin-top: 100px;
}

.returns-policy-box h3 { color: #c53030; font-size: 18px; margin-bottom: 10px; }

/* --- OTTIMIZZAZIONE MOBILE GENERALE (MAX 768px) --- */
@media (max-width: 768px) {

    /* 1. HEADER: Layout a colonna centrato */
    .header-content {
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
        text-align: center;
    }

    .logo {
        justify-content: center;
        font-size: 22px;
    }

    .logo-img {
        height: 30px;
    }

    .tagline {
        font-size: 11px !important;
        margin-top: 2px;
        display: block;
    }

    /* 2. ICONE: Sotto la tagline e ben distanziate */
    .header-icons {
        width: 100%;
        justify-content: center;
        gap: 50px; /* Spazio aumentato per il touch */
        margin-top: 5px;
    }

    .icon-item {
        flex-direction: column;
        gap: 4px;
    }

    /* 3. CAROSELLO: FIX DEFINITIVO SLITTAMENTO */
    .carousel-container {
        width: 100vw;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .carousel-slide {
        display: flex;
        width: max-content; /* Necessario per JS */
        gap: 0 !important; /* Rimuove lo spazio che causa il decentramento */
        margin: 0 !important;
    }

    .img-box {
        /* Ogni foto occupa esattamente lo schermo, eliminando slittamenti */
        width: 100vw !important;
        flex: 0 0 100vw !important;
        height: 400px;
        padding: 0 10px; /* Spazio interno per estetica */
        box-sizing: border-box;
    }

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 4. WORKFLOW & GRID: In colonna */
    .flow-steps {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .f-step {
        min-width: 80%; /* Più largo su mobile per leggibilità */
        margin-bottom: 10px;
    }

    .f-line {
        display: none; /* Rimuove le linee tra i cerchi */
    }

    .features-grid,
    .footer-actions,
    .guide-grid {
        flex-direction: column;
        gap: 20px;
        padding: 0 5%;
    }

    .btn-box {
        width: 100%;
        font-size: 18px;
        padding: 20px;
    }

    /* 5. MINI GALLERY (PAGINA GUIDA) */
    .gallery-track img {
        width: 140px;
        height: 140px;
    }

    /* 6. FOOTER LINKS */
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-links .separator {
        display: none;
    }
}

/* --- MINI GALLERY GUIDA (INFINITA E INTERATTIVA) --- */
.mini-gallery {
    padding: 30px 0;
    overflow: hidden;
    background: #fff;
    cursor: grab; /* Indica che si può trascinare */
}

.mini-gallery:active { cursor: grabbing; }

.gallery-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-track {
    display: flex;
    gap: 15px;
    width: max-content;
    /* L'animazione sarà gestita via JS per permettere lo stop al passaggio del mouse */
}

.gallery-track img {
    width: 220px;
    height: 220px;
    /* object-fit: contain fa vedere tutta la foto, senza tagliarla */
    object-fit: contain;
    /* Aggiungiamo uno sfondo neutro per coprire eventuali spazi vuoti se la foto è stretta */
    background-color: #fff;
    border-radius: 10px;
    pointer-events: auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

/* Effetto al passaggio del mouse per rendere la gallery viva */
.gallery-track img:hover {
    transform: scale(1.05);
}

.gallery-track a {
    display: block;
    flex-shrink: 0;
    border: 1px solid #eee; /* Un bordino leggero che delimita lo spazio della foto */
    border-radius: 12px;
    background: #fff;
}
.gallery-track img {
    pointer-events: auto !important; /* Permette il click */
}

/* --- MEDIA QUERY MOBILE GUIDA --- */
  @media (max-width: 768px) {
  .gallery-track img {
      width: 160px;
      height: 160px;
      object-fit: contain; /* Confermiamo l'integrità anche qui */
  }
}

/* --- PAGINA TARIFFE --- */
.fees-container { max-width: 900px; margin: auto; padding: 50px 5%; text-align: center; }
.fees-subtitle { color: #888; margin-bottom: 40px; }

.fee-main-card {
    background: #fff;
    border: 2px solid #e74c3c;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.1);
}
.fee-badge { background: #e74c3c; color: #fff; display: inline-block; padding: 5px 15px; border-radius: 50px; margin-bottom: 20px; font-weight: bold; }
.fee-price { font-size: 48px; font-weight: 900; color: #222; margin-bottom: 10px; }

.shipping-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.shipping-table th { background: #f8f8f8; padding: 15px; color: #666; font-size: 14px; }
.shipping-table td { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; }

.free-grid {
    display: flex;
    flex-direction: column; /* In colonna sono più grandi e leggibili */
    gap: 15px;
    margin-top: 30px;
}

.free-item {
    background: #f9fff0;
    border: 2px solid #8cc63f;
    padding: 25px; /* Più spazio interno */
    border-radius: 15px;
    font-weight: 800;
    color: #2d5a27;
    font-size: 20px; /* Testo più grande */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.free-item small {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Su PC li mettiamo di nuovo affiancati ma più larghi */
@media (min-width: 769px) {
    .free-grid {
        flex-direction: row;
    }
    .free-item {
        flex: 1;
        flex-direction: column; /* Icona sopra, testo sotto */
        text-align: center;
    }
}
.example-box { background: #222; color: #fff; padding: 30px; border-radius: 20px; margin-top: 50px; text-align: left; }
.example-calc { margin-top: 20px; }
.calc-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
.calc-row.total { font-size: 24px; color: #8cc63f; margin-top: 15px; font-weight: 900; }
.customs-note {
    background: #fff5f5;
    border: 1px dashed #e74c3c;
    padding: 25px;
    border-radius: 15px;
    margin-top: 30px;
    text-align: left;
    font-size: 14px;
}
@media (max-width: 768px) {
    .free-grid { grid-template-columns: 1fr; }
    .fee-price { font-size: 32px; }
}

/* --- PAGINA CONTATTI --- */
.contact-page { max-width: 1100px; margin: auto; padding: 50px 5%; }

/* --- STILE STORIA PREMIUM --- */
.about-me {
    background: linear-gradient(to right, #ffffff, #fdfdfd);
    border-radius: 15px;
    padding: 50px; /* Aumentato lo spazio interno */
    margin-bottom: 30px; /* <--- DISTANZA MAGGIORE DAI CONTATTI */
    border: 1px solid #eee;
    border-left: 6px solid #e74c3c; /* Barra rossa per richiamare il logo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
}

/* Aggiungiamo un'icona di "virgolette" o un titolo più forte */
.my-text h1 {
    font-size: 36px;
    color: #222;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: inline-block;
}

.my-text p {
    font-size: 17px; /* Leggermente più grande per leggibilità */
    line-height: 2; /* Più spazio tra le righe, tipico dei siti JP eleganti */
    color: #444;
    margin-bottom: 15px;
}

.my-text small {
    display: block;
    margin-top: 20px;
    font-style: italic;
    color: #888;
    border-top: 1px solid #f5f5f5;
    padding-top: 15px;
}
/* --- STILI DESKTOP --- */
.about-content { display: flex; align-items: center; gap: 40px; }
.my-photo img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; border: 5px solid #f9f9f9; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.my-text h1 { font-size: 32px; margin-bottom: 15px; }
.my-text p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 10px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; }
.contact-card { text-decoration: none; padding: 30px; border-radius: 15px; text-align: center; transition: 0.3s; color: white; }
.whatsapp { background: #25d366; }
.email-direct { background: #34495e; }
.contact-card:hover { transform: translateY(-5px); opacity: 0.9; }
.c-icon { font-size: 40px; display: block; margin-bottom: 10px; }

.email-form-box { background: #f8f9fa; padding: 40px; border-radius: 20px; text-align: left; }
.email-form-box input, .email-form-box textarea {
    width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; /* Importante per non far uscire i campi dai bordi */
}
.contact-methods {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 50px;
}

/* --- MEDIA QUERY PER CELLULARE --- */
@media (max-width: 768px) {
    /* Fondamentale: allarghiamo il contenitore esterno della pagina */
    .contact-page {
        width: 100% !important;
        padding: 10px !important; /* Minimo distacco dai bordi dello schermo */
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Il rettangolo grigio ora occupa tutto lo spazio disponibile */
    .email-form-box {
        padding: 30px 15px !important; /* Padding interno ridotto */
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px; /* Arrotondamento leggermente ridotto per mobile */
        box-sizing: border-box;
    }

    /* Le caselle di testo (Input e Textarea) diventano lunghe quanto il rettangolo */
    .email-form-box input,
    .email-form-box textarea {
        width: 100% !important;
        display: block;
        box-sizing: border-box !important; /* Obbligatorio per la larghezza piena */
        font-size: 16px !important;
        padding: 15px !important;
    }

    /* Aggiustamenti per la parte alta (Foto e Bio) */
    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 0 10px;
    }

    .my-photo img { width: 150px; height: 150px; }
    .my-text h1 { font-size: 24px; }

    /* Le schede WhatsApp ed Email una sotto l'altra e larghe */
    .contact-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
}


.registration-page { padding: 40px 20px; background: #f9f9f9; }

.reg-form-container {
    max-width: 700px; margin: 0 auto 50px;
    background: #fff; padding: 40px; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.reg-header { text-align: center; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; }
.form-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }

.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-row .form-group { flex: 1; margin-bottom: 0; }

/* Sezione Fiducia */
.trust-section { max-width: 1000px; margin: 0 auto; text-align: center; padding: 40px 0; }
.trust-grid { display: flex; gap: 20px; margin-top: 30px; }
.trust-item { flex: 1; background: #fff; padding: 15px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.trust-item p { margin-top: 10px; font-weight: bold; font-size: 14px; }


/* Stile Tasto WhatsApp Fluttuante */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}

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

/* Su cellulare mostriamo solo l'icona se lo spazio è poco, o lo teniamo così */
@media (max-width: 768px) {
    .whatsapp-text {
        display: none; /* Nasconde il testo e lascia solo l'icona tonda su mobile */
    }
    .whatsapp-float {
        padding: 12px;
        bottom: 15px;
        right: 15px;
    }
}

/* --- PAGINA GRAZIE / SEZIONE OFFERTE (Versione High-Impact) --- */
.offer-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px 20px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.eng-sub {
    color: #888;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Gift Box - Design con bordo tratteggiato rosso */
.gift-box {
    border: 2px dashed #e74c3c;
    padding: 40px 20px;
    border-radius: 20px;
    margin-bottom: 40px;
    background: #fffafa;
    position: relative; /* Necessario per posizionare il badge sopra */
}

/* Badge - Rosso, posizionato a cavallo del bordo superiore */
.badge {
    background: #e74c3c;
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: -18px; /* Lo sposta verso l'alto */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

.gift-img {
    width: 180px;
    height: 180px;
    background: #f8f8f8;
    border-radius: 50%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #eee;
}

/* Coupon Box - Sfondo scuro elegante (come piaceva a te) */
.coupon-box {
    background: #2c3e50;
    color: #fff;
    padding: 30px 20px;
    border-radius: 15px;
    margin-top: 20px;
}

.coupon-box h3 {
    color: #fff;
    margin-top: 0;
}

/* Codice Coupon - Giallo su fondo scuro */
.coupon-code {
    font-size: 28px;
    font-weight: bold;
    color: #f1c40f;
    letter-spacing: 2px;
    margin: 15px 0;
    padding: 10px 30px;
    border: 2px dashed #f1c40f;
    display: inline-block;
}

.fee-highlight {
    color: #f1c40f; /* Giallo per risaltare sul fondo scuro */
    font-weight: bold;
}

.disclaimer {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 1.5;
}

/* Ottimizzazione Mobile */
@media (max-width: 768px) {
    .offer-container {
        margin: 20px 15px;
        padding: 25px 15px;
    }
    .coupon-code {
        font-size: 22px;
        padding: 8px 15px;
    }
    .badge {
        font-size: 12px;
        width: 85%; /* Evita che il testo vada fuori nei telefoni piccoli */
    }
}

/* --- LAYOUT GENERALE --- */
.tariffe-section {
    padding: 20px 0;
}

/* --- STILE COMUNE BOX (Esempio e Foto) --- */
.example-box, .vinted-proof-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    border: 1px solid #333;
    max-width: 650px; /* Belli grandi su PC */
    margin: 40px auto; /* Uno sopra l'altro e centrati */
    color: #fff;
}

/* Titoli */
.example-title, .proof-title {
    font-weight: 700;
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.proof-title { color: #f1c40f; }

/* Tabella Calcoli */
.calc-table { display: flex; flex-direction: column; gap: 8px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.calc-row .label { color: #ccc; font-size: 15px; flex: 1; }
.calc-row .label small { color: #777; font-size: 12px; margin-left: 8px; }
.calc-row .value { font-family: 'Consolas', monospace; font-weight: 600; font-size: 17px; text-align: right; min-width: 100px; }

.highlight-row { background: rgba(231, 76, 60, 0.15); border-radius: 6px; padding: 10px 15px !important; margin: 4px -5px; }
.total-divider { height: 1px; background: #444; margin: 15px 0; }
.total-row .label { font-size: 18px; font-weight: 800; }
.total-row .value { font-size: 24px; border-bottom: 3px solid #e74c3c; }

/* Note */
.transparency-note { font-size: 12px; color: #999; line-height: 1.6; margin: 20px 0; }
.yen-estimate { text-align: right; background: #222; padding: 15px; border-radius: 8px; border: 1px dashed #555; }
.yen-estimate span { font-size: 26px; font-weight: 800; color: #e74c3c; }
.paypal-notice { font-size: 11px; color: #666; text-align: center; margin-top: 15px; }

/* --- STILE FOTO VINTED --- */
.clickable-img {
    cursor: zoom-in;
    width: 100%;
    height: auto;
    border-radius: 8px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
}
.clickable-img:hover { transform: scale(1.02); filter: brightness(1.1); }
.proof-footer { font-size: 12px; color: #888; margin-top: 15px; text-align: left; }

/* --- OVERLAY FULLSCREEN (Schermo Intero) --- */
.fullscreen-overlay {
    display: none; /* Nascosto di base */
    position: fixed;
    z-index: 99999; /* Sopra a tutto */
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); /* Sfondo nero quasi opaco */
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}
.fullscreen-overlay img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

/* --- MEDIA QUERY MOBILE --- */
@media (max-width: 650px) {
    .example-box, .vinted-proof-section {
        margin: 20px 15px;
        padding: 15px 20px;
        max-width: calc(100% - 30px);
    }
    .calc-row { flex-wrap: wrap; }
    .calc-row .label small { display: block; margin-left: 0; margin-top: 2px; }
    .yen-estimate { text-align: center; }
}

/* --- BOX MESSAGGIO (Versione Allargata) --- */
.email-form-box {
    max-width: 850px; /* Allargato da 600px a 850px */
    width: 100%;
    margin: 40px auto;
    padding: 35px; /* Più spazio interno */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.email-form-box h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    font-size: 22px;
}

/* Campi di input e Textarea */
.email-form-box input,
.email-form-box textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

.email-form-box input:focus,
.email-form-box textarea:focus {
    border-color: #e74c3c; /* Rosso ProxyITA al clic */
    outline: none;
    background-color: #fff;
}

/* Pulsante Rosso */
.submit-btn-red {
    width: 100%;
    background-color: #e74c3c;
    color: white;
    padding: 18px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.submit-btn-red:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

/* --- MEDIA QUERY PER CELLULARE --- */
@media (max-width: 768px) {
    .email-form-box {
        margin: 20px 15px;
        padding: 20px;
        max-width: calc(100% - 30px);
    }

    .email-form-box h3 {
        font-size: 18px;
    }

    .submit-btn-red {
        font-size: 17px;
        padding: 15px;
    }
}



/* Centra il reCAPTCHA e lo riduce leggermente per armonizzarlo con i campi */
.g-recaptcha {
    margin: 15px auto;
    display: flex;
    justify-content: center;
    transform: scale(0.9); /* Ridotto globalmente al 90% */
    -webkit-transform: scale(0.9);
    color: #000000; /* Testo nero */
}

/* Modifica il colore delle scritte (se presenti nel contenitore) in nero */
.g-recaptcha + label,
.g-recaptcha + .form-group small {
    color: #000000 !important;
}

@media screen and (max-width: 360px) {
    /* Ridotto ulteriormente per renderlo più stretto e centrato */
    .g-recaptcha {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform-origin: center center;
        display: flex;
        justify-content: center;
        margin: 10px auto; /* Riduce anche lo spazio sopra e sotto */
        width: 100%; /* Occupa lo spazio necessario ma resta centrato */
    }
}


/* --- SEZIONE RACCOMANDATI (STILE BUYEE) --- */
.recommended-section {
    padding: 60px 5%;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

.recommended-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #333;
}

.recommended-title span {
    font-size: 14px;
    color: #888;
    font-weight: 400;
}

.products-grid {
    display: grid;
    /* 5 colonne su PC */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #e74c3c;
}

.product-img {
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img img {
    transform: scale(1.1);
}

.product-info h4 {
    font-size: 16px;
    margin: 5px 0;
    color: #222;
}

.product-desc {
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
}

.product-price {
    font-size: 18px;
    font-weight: 800;
    color: #e74c3c;
    margin-top: auto;
}

/* --- RESPONSIVE MOBILE (Sotto 768px) --- */
@media (max-width: 768px) {
    .products-grid {
        /* 2 colonne fisse */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* Spazio tra le card */
        padding: 0 10px;
        /* Eliminiamo il margine eccessivo tra i diversi blocchi div */
        margin-bottom: 15px !important;
    }

    /* Questo assicura che se l'ultimo elemento di un blocco è solo,
       non lasci troppo spazio bianco prima del blocco successivo */
    .recommended-section {
        padding: 40px 2%;
    }

    .recommended-title {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .product-img {
        height: 150px; /* Un po' più grande per riempire meglio il box */
    }

    .product-info h4 {
        font-size: 14px;
        min-height: 40px; /* Allinea i titoli anche se hanno lunghezze diverse */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .products-grid {
        display: flex; /* Cambiamo da grid a flex per il mobile */
        flex-wrap: wrap;
        justify-content: center; /* Centra l'eventuale ultima foto rimasta sola */
        gap: 10px;
    }
    .product-card {
        width: calc(50% - 10px); /* Forza la grandezza al 50% meno lo spazio */
    }
}


/* --- HEADER ICONS & MENU TRIGGER --- */
/* --- HEADER ICONS & MENU TRIGGER --- */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-trigger {
    cursor: pointer;
    border-right: 1px solid #eee;
    padding-right: 15px;
    transition: 0.2s;
}

.menu-trigger:hover { color: #e74c3c; }

.icon-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.icon-text span { font-size: 13px; font-weight: 800; }
.icon-text small { font-size: 10px; color: #888; }

/* --- SIDEBAR MODERNA --- */
.side-menu {
    position: fixed;
    top: 0; left: -320px;
    width: 300px; height: 100%;
    background: #ffffff;
    z-index: 4000;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 30px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

.side-menu.active { left: 0; }

.menu-header-logo {
    font-weight: 900;
    font-size: 22px;
    margin-bottom: 30px;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px;
}

.menu-close {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 28px; cursor: pointer; color: #ccc;
}

.side-menu ul { list-style: none; }

.side-menu ul li {
    margin-bottom: 5px;
}

.side-menu ul li a {
    text-decoration: none;
    color: #444;
    font-weight: 600;
    font-size: 15px;
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    transition: 0.2s;
}

.side-menu ul li a:hover {
    background: #fff5f5;
    color: #e74c3c;
    padding-left: 20px;
}

.menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px); /* Effetto sfocato moderno */
    display: none; z-index: 3500;
}

.menu-overlay.active { display: block; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .header-content { flex-direction: column; gap: 15px; }

    .menu-trigger {
        border-right: none;
        padding-right: 0;
    }

    .header-icons {
        width: 100%;
        justify-content: space-between;
        padding: 5px 0;
    }

    .icon-item {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }

    .icon-text small {
        display: block !important;
        font-size: 9px;
    }
}


/* --- Sezione Pulsante Calcolatore Animato --- */
.calc-btn-container {
    text-align: center;
    margin: 40px auto;
    padding: 0 20px;
}

.animated-calc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 35px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    transition: all 0.3s ease;
    animation: pulse-red 2s infinite;
}

.animated-calc-btn .icon {
    font-size: 24px;
    margin-right: 15px;
}

.animated-calc-btn .text {
    line-height: 1.2;
    text-align: left;
}

.animated-calc-btn small {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    font-weight: normal;
}

/* Effetto Hover (Desktop) */
.animated-calc-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
}

/* --- Media Query per Cellulari --- */
@media (max-width: 768px) {
    .animated-calc-btn {
        width: 100%; /* Occupa tutta la larghezza disponibile */
        max-width: 320px;
        padding: 15px 20px;
        font-size: 16px;
    }

    .animated-calc-btn .icon {
        font-size: 20px;
        margin-right: 10px;
    }

    .calc-btn-container {
        margin: 30px 0;
    }
}

/* --- Animazione Pulse --- */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(231, 76, 60, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* Pulsante Prova di Pagamento con effetto bagliore */
.btn-screenshot {
    padding: 15px;
    border-radius: 50px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #3498db; /* Blu base */
    color: white;
    width: 100%;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-screenshot:hover {
    transform: scale(1.05);
    background-color: #2980b9 !important;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.6) !important;
}

/* Media Query per Mobile */
@media (max-width: 600px) {
    .btn-screenshot {
        font-size: 13px; /* Testo leggermente più piccolo per non andare a capo */
        padding: 18px 10px; /* Più alto per facilitare il tocco */
        letter-spacing: -0.5px; /* Stringe leggermente le lettere */
    }
}


/* Stile per le schede corrieri */
/* Container per le 3 schede */
.shipping-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne su PC */
    gap: 20px;
    margin-top: 20px;
}

.courier-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border-top: 4px solid #eee;
    display: flex;
    flex-direction: column;
}

.courier-card.poste { border-top-color: #2980b9; }
.courier-card.fedex { border-top-color: #e74c3c; }
.courier-card.ups { border-top-color: #ffb100; }

.courier-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.courier-header img { width: 45px; height: auto; }
.courier-header h4 { margin: 0; font-size: 17px; }

.courier-info p { margin: 4px 0; font-size: 13px; color: #555; line-height: 1.4; }

.courier-price {
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
    margin-top: auto; /* Spinge il prezzo sempre in basso */
    padding-top: 15px;
}

/* Media Query per Cellulare */
@media (max-width: 900px) {
    .shipping-grid {
        grid-template-columns: 1fr; /* Una sola colonna su mobile */
    }
    .courier-card {
        padding: 15px;
    }
}

/* Modifica questo blocco per il colore e lo spazio */
.btn-estimate-jump {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #e74c3c; /* Rosso Proxy */
    color: white;
    padding: 15px 40px; /* Ridotto leggermente il padding */
    border-radius: 60px;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid #c0392b; /* Rosso scuro per il bordo */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 15px rgba(231, 76, 60, 0.2);
    cursor: pointer;
}

.btn-estimate-jump:hover {
    background: #ff4d4d; /* Rosso più chiaro al passaggio */
    border-color: #e74c3c;
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 12px 25px rgba(231, 76, 60, 0.4);
}

/* Riduciamo lo spazio del contenitore del pulsante */
.shipping-section div[style*="margin: 50px auto"] {
    margin: 20px auto !important; /* Ridotto da 50px a 20px */
}



.btn-estimate-jump .jp-text {
    font-size: 20px;
    margin-bottom: 2px;
}

.btn-estimate-jump .it-text {
    font-size: 15px;
    font-weight: normal;
    opacity: 0.9;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 4px;
    margin-top: 4px;
}

/* Animazione pulsazione */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(44, 62, 80, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(44, 62, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(44, 62, 80, 0); }
}

/* Adattamento Mobile */
@media (max-width: 600px) {
    .btn-estimate-jump {
        padding: 15px 25px;
        width: 90%;
    }
    .btn-estimate-jump .jp-text { font-size: 17px; }
    .btn-estimate-jump .it-text { font-size: 13px; }
}

/* Stile per i piccoli testi in italiano affianco al giapponese */
.calc-row span small,
.example-title small,
.proof-title small,
.paypal-notice small {
    display: inline-block;
    color: #888;
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 5px;
}

/* Riduciamo lo spazio tra il pulsante rosso e questa sezione */
.tariffe-section {
    padding-top: 0 !important;
}

.example-box {
    margin-top: 0 !important;
    border: 2px solid #eee;
    transition: 0.3s;
}

/* Stile per il link preventivo dentro l'esempio */
.preventivo-link {
    display: inline-block;
    color: #f8f9fa; /* Colore base grigio */
    text-decoration: underline;
    text-decoration-color: rgba(231, 76, 60, 0.4);
    font-weight: bold;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1.5;
}

.preventivo-link:hover {
    color: #e74c3c; /* Cambia in Rosso Proxy */
    text-decoration-color: #e74c3c;
    transform: translateY(-2px); /* Piccolo salto verso l'alto */
    text-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

.preventivo-link small {
    display: block;
    font-weight: normal;
    font-size: 12px;
    opacity: 0.8;
}

.example-box:hover {
    border-color: #e74c3c;
    transform: translateY(-3px);
}

/* --- MEDIA QUERY PER MOBILE --- */
@media (max-width: 600px) {
    /* Sposta il testo italiano sotto quello giapponese per evitare sovrapposizioni */
    .calc-row span small,
    .example-title small,
    .proof-title small {
        display: block; /* Va a capo */
        margin-left: 0;
        margin-top: 2px;
        font-size: 0.8em;
    }

    .example-box {
        padding: 15px; /* Box leggermente più stretto */
    }

    .calc-row {
        flex-direction: column; /* La riga si divide: nome sopra, prezzo sotto */
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 12px;
    }

    .calc-row .value {
        align-self: flex-end; /* Allinea il prezzo a destra */
        font-weight: bold;
    }

    .total-row {
        flex-direction: row; /* Il totale lo lasciamo su una riga sola perché è importante */
        justify-content: space-between;
    }
    }


    /* --- PULSANTE "FAI PREVENTIVO" DELICATO --- */
    .inline-link-btn {
        display: inline-block; /* Non occupa più tutta la larghezza, più discreto */
        margin-top: 15px;
        padding: 8px 20px;
        background: #fff; /* Sfondo pulito */
        border: 1.5px solid #e74c3c; /* Bordo sottile rosso */
        color: #e74c3c !important; /* Testo rosso */
        text-align: center;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px; /* Leggermente più piccolo */
        border-radius: 6px; /* Angoli meno tondi, più professionali */
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* Ombra quasi invisibile */
    }

    /* Effetto Hover: si colora con delicatezza */
    .inline-link-btn:hover {
        background: #fff5f5; /* Sfondo appena rosato */
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
        border-color: #c0392b;
        color: #c0392b !important;
    }

    .inline-link-btn small {
        font-size: 10px;
        display: block;
        font-weight: 400;
        opacity: 0.7;
        margin-top: 2px;
    }
    /* --- PULSANTE STIMA SPEDIZIONE (DELICATO) --- */
    .inline-link-btn-secondary {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 18px;
        background: #ffffff;
        border: 1.5px solid #2c3e50; /* Un grigio scuro/blu elegante invece del rosso */
        color: #2c3e50 !important;
        text-align: center;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .inline-link-btn-secondary:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        border-color: #34495e;
    }

    .inline-link-btn-secondary small {
        font-size: 10px;
        display: block;
        font-weight: 400;
        opacity: 0.7;
        margin-top: 2px;
    }

    /* Contenitore per dare spazio */
    .main-action-container {
        text-align: center;
        margin: 40px 0;
    }

    /* Pulsante CTA Premium */
    .btn-cta-premium {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 18px 60px;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); /* Gradiente professionale */
        color: white !important;
        text-decoration: none;
        border-radius: 12px;
        font-weight: bold;
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Movimento elastico */
        border: none;
        cursor: pointer;
    }

    /* Effetto al passaggio del mouse */
    .btn-cta-premium:hover {
        transform: translateY(-4px) scale(1.03); /* Si alza e si ingrandisce appena */
        box-shadow: 0 10px 25px rgba(231, 76, 60, 0.4);
        filter: brightness(1.1);
    }

    /* Effetto al click */
    .btn-cta-premium:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
    }

    /* Gestione dei testi interno al pulsante */
    .btn-cta-premium .jp-text {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .btn-cta-premium .it-text {
        font-size: 13px;
        font-weight: normal;
        opacity: 0.9;
        margin-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 4px;
        width: 100%;
    }

    /* Ottimizzazione per Mobile */
    @media (max-width: 600px) {
        .btn-cta-premium {
            width: 90%; /* Quasi tutta la larghezza su smartphone */
            padding: 15px 20px;
        }
        .btn-cta-premium .jp-text { font-size: 18px; }
    }