/* =============================================
   Modern Mobile Bottom Menu v2.1 – Frontend CSS
   ============================================= */

/* ─────────────────────────────────────────────
   1. FIXED WRAPPER  — always glued to the bottom,
      never moves with scroll, never collapses.
───────────────────────────────────────────── */
.mbm-menu-wrapper {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* No side padding — bar goes edge to edge and sits flush at the bottom */
    padding: 0;
    pointer-events: none;

    transform: none !important;
    will-change: auto;
}

.mbm-menu-wrapper.mbm-position-top {
    bottom: auto;
    top: 0;
    align-items: flex-start;
    padding-bottom: 0;
    padding-top: max(10px, env(safe-area-inset-top, 10px));
}

/* ─────────────────────────────────────────────
   2. CONTAINER  — the visual pill/card
───────────────────────────────────────────── */
.mbm-menu-container {
    position: relative;
    width: 100%;
    max-width: 100%;            /* full width — bar touches both sides */
    pointer-events: all;        /* re-enable clicks on the actual bar */

    /* Slide-in on load (JS adds .mbm-visible) */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.4,.64,1);
}
.mbm-menu-container.mbm-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Toggle hide (e.g. via shortcode toggle button) */
.mbm-menu-container.mbm-hidden {
    opacity: 0 !important;
    transform: translateY(100%) !important;
    pointer-events: none;
}
.mbm-position-top .mbm-menu-container.mbm-hidden {
    transform: translateY(-100%) !important;
}

/* ─────────────────────────────────────────────
   3. THE ARCH — sits ABOVE the bar, same colour
      Uses a proper SVG-free pure-CSS arch shape.
───────────────────────────────────────────── */
.mbm-arch-wrap {
    /* Sits at the top of the container, centred */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 30px;              /* how far the arch pokes above the bar */
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* The arch itself — a rectangle that matches bar bg + curved top */
.mbm-arch-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mbm-bg, #0d1b3e);
    /* 
       Clip to a half-ellipse at the top:
       The rectangle fills the bottom, the rounded top forms the dome.
    */
    border-radius: 50px 50px 0 0;
}

/* Tiny anti-seam covers — hides the pixel gap at bar edges */
.mbm-arch-fill::before,
.mbm-arch-fill::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 18px;
    background: transparent;
}
.mbm-arch-fill::before {
    left: -16px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 18px;
    box-shadow: 8px 0 0 0 var(--mbm-bg, #0d1b3e);
}
.mbm-arch-fill::after {
    right: -16px;
    border-top-left-radius: 18px;
    box-shadow: -8px 0 0 0 var(--mbm-bg, #0d1b3e);
}

/* ─────────────────────────────────────────────
   4. THE BAR
───────────────────────────────────────────── */
.mbm-menu-bar {
    position: relative;
    display: flex;
    align-items: stretch;       /* all children same height */
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));  /* flush to bottom, respects notch */
    border-radius: var(--mbm-radius, 28px) var(--mbm-radius, 28px) 0 0;  /* only round the TOP corners */
    background: var(--mbm-bg, #0d1b3e);
    box-shadow: var(--mbm-shadow, 0 10px 40px rgba(0,0,0,.3));
    transition: background .3s, box-shadow .3s;
    z-index: 2;
    overflow: visible;          /* allow FAB to protrude upward */
}

/* ─────────────────────────────────────────────
   5. MENU ITEMS — perfectly even distribution
   
   KEY FIX: every nav item AND the center slot
   share  flex: 1  so they all take equal width.
   The center slot just renders differently (no
   link text, shows FAB instead).
───────────────────────────────────────────── */
.mbm-menu-item {
    flex: 1 1 0;                /* equal width for every item */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 6px;
    text-decoration: none;
    color: var(--mbm-text, #8899bb);
    transition: color .22s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
}

.mbm-menu-item .mbm-icon {
    font-size: 20px;
    line-height: 1;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), color .22s;
}
.mbm-menu-item .mbm-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .22s;
}

/* Active / hover */
.mbm-menu-item.mbm-active,
.mbm-menu-item:hover {
    color: var(--mbm-active, #ffffff);
}
.mbm-menu-item.mbm-active .mbm-icon,
.mbm-menu-item:hover .mbm-icon {
    transform: translateY(-4px) scale(1.18);
}

/* Active dot indicator */
.mbm-menu-item.mbm-active::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mbm-active, #ffffff);
}

/* Hide labels when option off */
.mbm-labels-off .mbm-label { display: none; }

/* ─────────────────────────────────────────────
   6. CENTER SLOT  — same flex weight as one item,
      but holds the FAB that floats above the bar.
───────────────────────────────────────────── */
.mbm-center-slot {
    flex: 1 1 0;                /* SAME as .mbm-menu-item — equal width */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Enough height for the bar; FAB protrudes via absolute positioning */
    padding: 8px 2px 6px;
}

/* ─────────────────────────────────────────────
   7. THE FAB  — floats above center, perfectly centred
───────────────────────────────────────────── */
.mbm-center-btn {
    position: absolute;
    /* 
       Center horizontally within the slot.
       Vertically: push it up so it sits in the arch.
       The bar has ~52px content height; arch is 30px above.
       FAB is 58px tall, so centre it at bar-top - 29px.
    */
    bottom: calc(100% - 14px);  /* 14px = half the bar's top padding area */
    left: 50%;
    transform: translateX(-50%);

    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(247,53,122,.55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}
.mbm-center-btn:hover,
.mbm-center-btn:focus {
    transform: translateX(-50%) scale(1.1) translateY(-3px);
    box-shadow: 0 10px 30px rgba(247,53,122,.65);
    color: #fff;
    outline: none;
}
.mbm-center-btn:active {
    transform: translateX(-50%) scale(.93);
}

/* ─────────────────────────────────────────────
   8. PRESETS
───────────────────────────────────────────── */

/* — Curved Dark — */
.mbm-preset-curved-dark {
    --mbm-bg:     #0d1b3e;
    --mbm-text:   #5c6f99;
    --mbm-active: #ffffff;
    --mbm-radius: 28px;
    --mbm-shadow: 0 10px 40px rgba(0,0,0,.4);
}

/* — Curved Light — */
.mbm-preset-curved-light {
    --mbm-bg:     #ffffff;
    --mbm-text:   #a0aec0;
    --mbm-active: #6366f1;
    --mbm-radius: 28px;
    --mbm-shadow: 0 -2px 24px rgba(0,0,0,.10), 0 4px 24px rgba(0,0,0,.08);
}
.mbm-preset-curved-light .mbm-arch-fill,
.mbm-preset-curved-light .mbm-arch-fill::before,
.mbm-preset-curved-light .mbm-arch-fill::after {
    background: #ffffff;
}
.mbm-preset-curved-light .mbm-arch-fill::before { box-shadow: 8px 0 0 0 #ffffff; }
.mbm-preset-curved-light .mbm-arch-fill::after  { box-shadow: -8px 0 0 0 #ffffff; }
.mbm-preset-curved-light .mbm-menu-item.mbm-active::after { background: #6366f1; }

/* — Floating Glass — */
.mbm-preset-floating-glass {
    --mbm-bg:     rgba(12,16,36,.72);
    --mbm-text:   rgba(255,255,255,.52);
    --mbm-active: #ffffff;
    --mbm-radius: 32px;
    --mbm-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.mbm-preset-floating-glass .mbm-menu-bar {
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.13);
}
.mbm-preset-floating-glass .mbm-arch-fill {
    background: rgba(12,16,36,.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.mbm-preset-floating-glass .mbm-arch-fill::before { box-shadow: 8px 0 0 0 rgba(12,16,36,.72); }
.mbm-preset-floating-glass .mbm-arch-fill::after  { box-shadow: -8px 0 0 0 rgba(12,16,36,.72); }

/* — Minimal Flat — */
.mbm-preset-minimal-flat {
    --mbm-bg:     #f8faff;
    --mbm-text:   #94a3b8;
    --mbm-active: #3b82f6;
    --mbm-radius: 0px;
    --mbm-shadow: 0 -1px 0 rgba(0,0,0,.08);
}
.mbm-menu-wrapper.mbm-preset-minimal-flat,
.mbm-preset-minimal-flat ~ * .mbm-menu-wrapper { padding: 0; }
.mbm-preset-minimal-flat .mbm-menu-bar { border-radius: 0; }
.mbm-preset-minimal-flat .mbm-arch-wrap { display: none; }
.mbm-preset-minimal-flat .mbm-center-btn {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    width: 42px; height: 42px;
    font-size: 18px;
}
.mbm-preset-minimal-flat .mbm-center-btn:hover {
    transform: scale(1.08);
}
.mbm-preset-minimal-flat .mbm-center-btn:active {
    transform: scale(.94);
}
.mbm-preset-minimal-flat .mbm-menu-item.mbm-active::after { background: #3b82f6; }

/* — Bold Gradient — */
.mbm-preset-bold-gradient {
    --mbm-bg-mid: #2a1270;
    --mbm-text:   rgba(255,255,255,.6);
    --mbm-active: #ffffff;
    --mbm-radius: 24px;
    --mbm-shadow: 0 8px 32px rgba(80,20,220,.5);
}
.mbm-preset-bold-gradient .mbm-menu-bar {
    background: linear-gradient(135deg, #1a0533 0%, #3b1fa8 50%, #6938ef 100%);
}
.mbm-preset-bold-gradient .mbm-arch-fill { background: var(--mbm-bg-mid, #2a1270); }
.mbm-preset-bold-gradient .mbm-arch-fill::before { box-shadow: 8px 0 0 0 var(--mbm-bg-mid, #2a1270); }
.mbm-preset-bold-gradient .mbm-arch-fill::after  { box-shadow: -8px 0 0 0 var(--mbm-bg-mid, #2a1270); }

/* — Custom (colors injected by PHP inline style) — */
/* .mbm-preset-custom { } */

/* ─────────────────────────────────────────────
   9. DESKTOP HIDE
   CORRECT direction: visible by default, hidden
   only on wide screens when the option is on.
───────────────────────────────────────────── */
@media (min-width: 1024px) {
    .mbm-menu-wrapper.mbm-hide-desktop {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────
   10. MISC
───────────────────────────────────────────── */
@media print {
    .mbm-menu-wrapper { display: none !important; }
}

/* Pulse animation for FAB tap */
@keyframes mbm-fab-pop {
    0%   { transform: translateX(-50%) scale(1); }
    40%  { transform: translateX(-50%) scale(1.18); }
    100% { transform: translateX(-50%) scale(1); }
}
.mbm-center-btn.mbm-popping {
    animation: mbm-fab-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}