/* --- AIOFP Mobile Menu: Dark Hole Theme --- */

/* Hide on desktop */
.aiofp-mobile-menu-container {
    display: none;
}

@media (max-width: 768px) {
    /* 1. The Container */
    .aiofp-mobile-menu-container {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        /* Container is transparent to let the 'hole' show through to page content */
        background: transparent; 
        pointer-events: none; /* Allows clicking through the empty corners if needed */
    }

    /* 2. The Navigation Bar (The Shape) */
    .aiofp-mobile-nav {
        position: relative;
        width: 100%;
        height: 70px; /* Fixed height */
        
        /* Dark Grey Background matching screenshot */
        background-color: transparent;
        
        /* THE MAGIC HOLE: Creates a transparent circle at the top center */
        background-image: radial-gradient(circle at 50% 40%, transparent 32px, #fff 17px);
        
        /* Shadow that follows the shape of the bar (including the hole) */
        filter: drop-shadow(0px -5px 5px rgba(0,0,0,0.1));
        
        pointer-events: auto; /* Re-enable clicking on the bar */
        padding-bottom: env(safe-area-inset-bottom); /* iPhone X+ support */
    }

    /* 3. The Menu Items List */
    .aiofp-mobile-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .aiofp-mobile-items li {
        flex: 1;
        text-align: center;
        z-index: 10;
        padding-top: 10px; /* Push icons down slightly */
    }

    /* 4. Menu Links & Icons */
    .aiofp-mobile-items li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #777; /* Inactive Icon Color (Grey) */
        font-size: 10px;
        font-weight: 500;
        transition: color 0.3s;
    }

    .aiofp-mobile-items li.current-menu-item a,
    .aiofp-mobile-items li a:hover {
        color: #2196F3; /* Active Icon Color (Blue) */
    }

    .aiofp-icon-wrap i, 
    .aiofp-icon-wrap span.dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        display: block;
    }

    /* 5. THE FLOATING CENTER BUTTON */
    .aiofp-mobile-items li.aiofp-center {
        position: absolute;
        top: 0px; /* Moves the button up into the hole */
        left: 50%;
        transform: translateX(-47%); /* Perfectly centers it */
        width: 60px;
        height: 60px;
        flex: none; /* Don't stretch */
        padding: 0;
    }

    .aiofp-mobile-items li.aiofp-center a {
        background: #2196F3; /* Bright Blue Button */
        color: #fff !important; /* Always white icon */
        width: 56px;
        height: 56px;
        border-radius: 50%;
        /* Shadow for depth */
        box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4);
        
        /* OPTIONAL: Border to separate button from the bar slightly */
        /* border: 4px solid #f0f0f1; Use page background color here if desired */
        
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Scale effect on click/touch */
    .aiofp-mobile-items li.aiofp-center a:active {
        transform: scale(0.95);
    }

    /* Hide text label for the center button to keep it clean */
    .aiofp-mobile-items li.aiofp-center a span:not(.aiofp-icon-wrap) {
        display: none;
    }

    /* Center Icon Styling */
    .aiofp-mobile-items li.aiofp-center .aiofp-icon-wrap i,
    .aiofp-mobile-items li.aiofp-center .aiofp-icon-wrap span.dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
        margin: 0;
    }
}