/* Hide on Desktop by default */
#smf-mobile-footer {
    display: none;
}

/* Show on Mobile (Screens smaller than 768px) */
@media (max-width: 768px) {
    body {
        /* Add padding to body so the footer doesn't cover content at the bottom */
        padding-bottom: 70px !important;
    }
    
    #smf-mobile-footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /* Colors are mapped to the CSS Variables printed in wp_head */
        background-color: var(--smf-bg-color, #ffffff);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
        z-index: 99999;
        justify-content: space-around;
        align-items: center;
        padding: 8px 0;
        /* Support for iPhone safe area (the home indicator line) */
        padding-bottom: env(safe-area-inset-bottom, 8px); 
        transition: all 0.3s ease;
    }
    
    .smf-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--smf-icon-color, #333333);
        flex: 1;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }
    
    .smf-item:hover, .smf-item:active {
        color: var(--smf-icon-color, #333333);
        opacity: 0.7;
    }
    
    .smf-item .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
    
    .smf-item .smf-title {
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
    }
}

/* Show the footer in the Customizer preview even on desktop so users can see their edits */
body.wp-customizer #smf-mobile-footer {
    display: flex !important;
}