/* ==========================================================================
   FARMACIA MAGGIORE - CAA STYLE (MODALITÀ ACCESSIBILE)
   FILE DEDICATO E ISOLATO - FIX MENU MOBILE E RESPONSIVITÀ
   ========================================================================== */

/* Scorrimento fluido a "scatti" tra una sezione e l'altra (Desktop) */
html {
    scroll-behavior: smooth !important;
    scroll-snap-type: y mandatory !important;
}

/* ==========================================================================
   1. SEZIONI (Lo sfondo invisibile che prende tutto lo schermo)
   ========================================================================== */
section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;     
    width: 100% !important;
    
    height: 100vh !important;           
    min-height: 100vh !important;
    max-height: 100vh !important;
    
    padding-top: 240px !important; 
    padding-bottom: 30px !important;
    
    background-color: #f4f8fb !important;
    border-bottom: 10px solid #e0e0e0 !important; 
    box-sizing: border-box !important;
    
    overflow: hidden !important;        
    scroll-snap-align: start !important;
}

/* ECCEZIONE: LA SEZIONE OFFERTE (Contiene tanti prodotti, DEVE scorrere) */
section#offerte {
    height: auto !important; 
    max-height: none !important;
    overflow-y: auto !important; 
}

/* ==========================================================================
   2. I RIQUADRI BIANCHI CON BORDO BLU
   ========================================================================== */
section#home .content-box,
section#servizi .content-box,
section#farmaday .content-box,
section#dove-siamo .content-box {
    background: white !important; 
    border: 5px solid #0B3D5E !important; 
    border-radius: 30px !important; 
    padding: 40px 20px !important; 
    width: 90% !important;
    
    height: auto !important; 
    flex-grow: 0 !important;
    
    box-shadow: 0 15px 35px rgba(11,61,94,0.15) !important; 
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Home, Notizie e Contatti sono più compatti */
section#home .content-box,
section#farmaday .content-box,
section#dove-siamo .content-box {
    max-width: 550px !important; 
}

/* Servizi è più largo perché deve contenere i riquadri */
section#servizi .content-box {
    max-width: 1000px !important; 
    padding: 30px 15px !important;
}

/* ==========================================================================
   3. TITOLI DELLE SEZIONI
   ========================================================================== */
.caa-section-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 25px !important; 
    width: 100% !important;
    background: transparent !important;
}

.caa-section-title span.icon {
    font-size: 4.5rem !important; 
    line-height: 1 !important;
    margin-bottom: 10px !important;
    background: transparent !important; 
}

.caa-section-title span.text {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #0B3D5E !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   4. ADATTAMENTO DELLE CARTE INTERNE
   ========================================================================== */
section#farmaday .card-caa,
section#dove-siamo .card-caa {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: 100% !important;
}

section#servizi .card-caa {
    border: 3px solid #eee !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    flex: 1 1 200px !important;
    max-width: 250px !important;
}

.flyer-grid-caa { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 15px !important; 
    align-items: stretch !important; 
    justify-content: center !important; 
    width: 100% !important; 
    margin: 0 auto !important; 
}

.card-caa { 
    width: 100% !important; 
    height: auto !important; 
    background: white !important; 
    border-radius: 20px !important; 
    padding: 20px !important; 
    text-align: center !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Icone e testi dentro le carte */
.card-caa div[style*="font-size: 5rem"] { font-size: 3.5rem !important; margin-bottom: 10px !important; }
.card-caa h3, .card-caa h2 { color: var(--primary) !important; font-size: 1.1rem !important; margin: 0 0 10px 0 !important; text-transform: uppercase !important; line-height: 1.2 !important; text-align: center !important; }
.card-caa img { width: 100% !important; height: 120px !important; object-fit: contain !important; margin-bottom: 15px !important; display: block !important; }

/* Adattamento Testi Contatti */
.card-caa p[style*="font-size: 2rem"] { font-size: 1.6rem !important; margin-bottom: 5px !important; }
.card-caa p[style*="font-size: 1.5rem"] { font-size: 1.2rem !important; margin-bottom: 20px !important; }
.card-caa div[style*="display: flex; flex-direction: column"] { gap: 10px !important; }

/* Bottoni giganti WhatsApp/Telefono */
.card-caa a[style*="padding: 15px"] { 
    padding: 15px 20px !important; 
    border-radius: 15px !important; 
}
.card-caa a i[style*="font-size: 2.5rem"] { font-size: 2.2rem !important; }
.card-caa a span[style*="font-size: 1.5rem"] { font-size: 1.4rem !important; }

/* Bottoni Offerte */
.prezzo-caa { color: var(--success) !important; font-size: 1.5rem !important; font-weight: 900 !important; margin-bottom: 15px !important; }
.btn-caa { padding: 15px !important; font-size: 1.2rem !important; border-radius: 12px !important; background: var(--success) !important; color: white !important; border: none !important; width: 100% !important; font-weight: 900 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; box-shadow: 0 8px 15px rgba(40,167,69,0.3) !important; cursor: pointer !important; }

/* ==========================================================================
   5. MENU IN ALTO CAA (INGRANDITO E SUPER VISIBILE)
   ========================================================================== */
.top-bar { display: none !important; }

header {
    position: fixed !important;
    top: 42px !important;
    left: 0 !important;
    width: 100% !important;
    padding: 15px 0 !important;
    background-color: #ffffff !important; 
    box-shadow: 0 6px 25px rgba(0,0,0,0.15) !important;
    z-index: 2000 !important; 
}

.navbar-container {
    display: flex !important;
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    gap: 15px !important; 
    width: 100% !important;
    max-width: 100vw !important; /* Non sforare lo schermo */
}

.logo-box img { max-height: 55px !important; } 

/* Bottoni Menu Giganti */
.caa-menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important; 
    margin: 0 !important;
    padding: 0 20px !important;
    list-style: none !important;
    width: 100% !important;
}

.caa-nav-item {
    padding: 12px 20px !important; 
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    min-width: 105px !important;
    border-width: 3px !important; 
    border-style: solid !important;
    transition: 0.2s ease !important;
}

.caa-nav-item span.icon { 
    font-size: 2.2rem !important; 
    margin-bottom: 6px !important; 
}

.caa-nav-item span.text { 
    font-size: 0.85rem !important; 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;
}

.caa-home { background: #f4f8fb !important; border-color: #ddd !important; color: var(--primary) !important; }
.caa-spesa { background: #e8f5e9 !important; border-color: #c8e6c9 !important; color: var(--success) !important; }
.caa-servizi { background: #f3e5f5 !important; border-color: #ce93d8 !important; color: #8e24aa !important; }
.caa-notizie { background: #e8f4f8 !important; border-color: #b3e5fc !important; color: #0288d1 !important; }
.caa-contatti { background: #e0f2f1 !important; border-color: #80cbc4 !important; color: #00695c !important; }
.caa-profilo { background: #fff3e0 !important; border-color: #ffe0b2 !important; color: #e65100 !important; }

.caa-nav-item:hover { transform: scale(1.05) !important; box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important; }

/* ==========================================================================
   6. NASCONDI ELEMENTI STANDARD
   ========================================================================== */
.filters-wrapper, .flyer-vertical-nav, #voice-nav-btn { display: none !important; pointer-events: none !important; }

/* ==========================================================================
   7. ADATTAMENTO SCHERMI PICCOLI (MOBILE) - FIX SCORRIMENTO E SPAZI
   ========================================================================== */
@media (max-width: 850px) {
    /* Disabilitiamo lo scroll snap su mobile, per permettere una lettura fluida verso il basso */
    html { scroll-snap-type: none !important; } 
    
    section { 
        height: auto !important; 
        min-height: 100vh !important; 
        max-height: none !important; 
        
        /* Modificato da 300 a 160 per evitare lo spazio bianco vuoto! */
        padding-top: 160px !important; 
        padding-bottom: 40px !important;
        overflow-y: visible !important; 
    }
    
    header {
        padding: 10px 0 !important;
    }

    .logo-box img { max-height: 40px !important; }

    /* MENU MOBILE: DIVENTA SCORREVOLE IN ORIZZONTALE */
    .caa-menu-list {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Scorrimento morbido su iOS */
        scroll-snap-type: x mandatory !important;
        padding-bottom: 10px !important; /* Spazio per la scrollbar, se visibile */
        gap: 10px !important;
    }
    
    /* Nascondi la barra di scorrimento (estetica) */
    .caa-menu-list::-webkit-scrollbar { display: none; }
    .caa-menu-list { -ms-overflow-style: none; scrollbar-width: none; }

    /* Ridimensionamento bottoni per la riga unica scorrevole */
    .caa-nav-item { 
        padding: 8px 12px !important; 
        min-width: 85px !important; 
        border-width: 2px !important; 
        flex-shrink: 0 !important; /* Impedisce che si schiaccino */
        scroll-snap-align: start !important;
    }
    
    .caa-nav-item span.icon { font-size: 1.5rem !important; margin-bottom: 4px !important; }
    .caa-nav-item span.text { font-size: 0.7rem !important; }
    
    /* Adattamento Titoli e Riquadri interni su mobile */
    .caa-section-title span.icon { font-size: 3rem !important; }
    .caa-section-title span.text { font-size: 1.5rem !important; }
    
    section#home .content-box,
    section#servizi .content-box,
    section#farmaday .content-box,
    section#dove-siamo .content-box {
        padding: 20px 15px !important; 
        border-radius: 20px !important;
        border-width: 3px !important;
    }
}