/*
 * Gizcu Website Mobile Bottom Navigation
 * Dedicated file so browser cache from website-clean.css cannot leave SVGs unstyled.
 */

.wc-mobile-bottom{
    display:none !important;
}

@media (max-width:650px){
    body.website-clean{
        padding-bottom:82px !important;
    }

    body.website-clean .wc-mobile-bottom{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        z-index:999 !important;

        width:100% !important;
        height:72px !important;
        margin:0 !important;
        padding:7px 7px 6px !important;

        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        align-items:end !important;

        background:rgba(255,255,255,.98) !important;
        border:0 !important;
        border-top:1px solid #e5eae7 !important;
        box-shadow:0 -10px 24px rgba(45,62,54,.07) !important;
        backdrop-filter:blur(14px);
        overflow:visible !important;
    }

    body.website-clean .wc-mobile-bottom > a{
        position:relative !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:56px !important;
        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:3px !important;

        color:#7a8580 !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;

        font-size:10px !important;
        line-height:1.1 !important;
        font-weight:800 !important;
        text-align:center !important;
        overflow:visible !important;
    }

    body.website-clean .wc-mobile-bottom > a > span:last-child{
        display:block !important;
        color:inherit !important;
        font-size:10px !important;
        line-height:11px !important;
        white-space:nowrap !important;
    }

    body.website-clean .wc-mobile-icon{
        position:relative !important;
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        min-height:30px !important;
        max-width:30px !important;
        max-height:30px !important;

        display:grid !important;
        place-items:center !important;

        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:10px !important;
        background:transparent !important;
        color:#77827d !important;
        overflow:hidden !important;
    }

    /* Critical fix: prevent old/global SVG rules from creating giant black shapes */
    body.website-clean .wc-mobile-bottom svg,
    body.website-clean .wc-mobile-bottom .wc-mobile-icon svg,
    body.website-clean .wc-mobile-bottom .wc-app-fab svg{
        display:block !important;
        width:17px !important;
        height:17px !important;
        min-width:17px !important;
        min-height:17px !important;
        max-width:17px !important;
        max-height:17px !important;

        margin:0 !important;
        padding:0 !important;

        fill:none !important;
        stroke:currentColor !important;
        stroke-width:2 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;

        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        transform:none !important;
    }

    body.website-clean .wc-mobile-bottom svg path,
    body.website-clean .wc-mobile-bottom svg circle,
    body.website-clean .wc-mobile-bottom svg rect,
    body.website-clean .wc-mobile-bottom svg line,
    body.website-clean .wc-mobile-bottom svg polyline{
        fill:none !important;
        stroke:currentColor !important;
    }

    body.website-clean .wc-mobile-bottom > a.active{
        color:#8b2f55 !important;
    }

    body.website-clean .wc-mobile-bottom > a.active .wc-mobile-icon{
        color:#8b2f55 !important;
        background:#f8eaf0 !important;
    }

    body.website-clean .wc-mobile-bottom .wc-app-center{
        color:#8b2f55 !important;
        overflow:visible !important;
    }

    body.website-clean .wc-app-fab{
        position:absolute !important;
        left:50% !important;
        top:-25px !important;
        transform:translateX(-50%) !important;

        width:54px !important;
        height:54px !important;
        min-width:54px !important;
        min-height:54px !important;
        max-width:54px !important;
        max-height:54px !important;

        display:grid !important;
        place-items:center !important;

        margin:0 !important;
        padding:0 !important;

        border:5px solid #fff !important;
        border-radius:50% !important;
        background:linear-gradient(135deg,#8b2f55,#ad3d69) !important;
        color:#fff !important;
        box-shadow:0 10px 24px rgba(139,47,85,.25) !important;
        overflow:visible !important;
    }

    body.website-clean .wc-app-fab svg{
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        min-height:20px !important;
        max-width:20px !important;
        max-height:20px !important;
    }

    body.website-clean .wc-whatsapp{
        bottom:88px !important;
        right:14px !important;
    }
}

@media (min-width:651px){
    body.website-clean .wc-mobile-bottom{
        display:none !important;
    }
}