/*
Theme Name:   Neve Child per WL Delivery
Description:  Tema Child personalizzato per il sistema di delivery WL Delivery, basato su Neve.
Author:       WL Delivery Developer
Template:     neve
Version:      1.0.0
Text Domain:  neve-child
*/
/* ==========================================================================
   OTTIMIZZAZIONE WEBAPP MOBILE - WL DELIVERY (BARRA ORIZZONTALE)
   ========================================================================== */

/* Nascondi la barra sui computer */
.wld-mobile-nav {
    display: none !important;
}

/* Regole applicate SOLO su Smartphone e Tablet */
@media (max-width: 767px) {

    /* Mostriamo la nuova testata in stile App */
    .wld-mobile-header {
        display: flex !important;
    }

    /* 1. Nascondiamo l'Header e il Footer standard di Neve */
    header.header,
    footer.footer,
    .nv-sidebar-wrap {
        display: none !important;
    }

    /* 2. Diamo spazio sia in alto che in fondo alla pagina per non coprire il testo */
    body {
        padding-top: calc(65px + env(safe-area-inset-top)) !important; /* Spazio per la testata in alto */
        padding-bottom: 80px !important; /* Spazio per la barra di navigazione in basso */
        background-color: #f8f9fa !important;
    }

    /* 3. Forza la Barra di Navigazione ad essere ORiZZONTALE e fissa in basso */
    .wld-mobile-nav {
        display: flex !important;
        flex-direction: row !important; /* Forza la riga */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important; /* Leggermente più alta per facilitare il tocco */
        background-color: #ffffff !important;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.1) !important;
        z-index: 999999 !important;
        justify-content: space-around !important;
        align-items: center !important;
        border-top: 1px solid #eeeeee !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        height: calc(70px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    /* 4. Il singolo pulsante (Item): massimizziamo l'area cliccabile */
    .wld-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #8e8e93 !important;
        text-decoration: none !important;
        font-size: 12px !important; /* Testo leggermente più grande e leggibile */
        font-weight: 600 !important;
        width: 33.33% !important; /* Ognuno occupa esattamente un terzo dello schermo */
        height: 100% !important;   /* Occupa tutta l'altezza della barra per il tap */
        transition: background-color 0.2s ease, color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent; /* Rimuove il fastidioso flash blu sui browser mobile */
    }

    /* Feedback al tocco (effetto App) */
    .wld-nav-item:active {
        background-color: #f2f2f7 !important; /* Diventa leggermente grigio quando viene toccato */
    }

    .wld-nav-item i {
        font-size: 22px !important; /* Icone più grandi e facili da vedere */
        margin-bottom: 5px !important;
    }

    /* 5. Stato Attivo */
    .wld-nav-item.active {
        color: #ff5a1e !important; /* Colore arancione acceso */
    }

    /* 6. Il badge del carrello */
    .cart-icon-container {
        position: relative !important;
        display: inline-block !important;
    }

    .wld-cart-badge {
        position: absolute !important;
        top: -8px !important;
        right: -15px !important;
        background-color: #ff3b30 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: bold !important;
        border-radius: 50% !important;
        padding: 1px 6px !important;
        min-width: 16px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
    }
}