/* ==========================================================================
   The Menu Mobile Navigation — Frontend Stylesheet (assets/css/frontend.css)

   FILE PURPOSE:
   Styles the mobile bottom navigation bar on the public-facing site.
   CSS custom properties (--tmmn-*) are set via inline CSS from PHP,
   so this file only defines structure, variants, and animations.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── Defaults (overridden by PHP inline CSS) ── */
:root {
    --tmmn-bg:            #ffffff;
    --tmmn-color:         #555555;
    --tmmn-active:        #6c63ff;
    --tmmn-label-size:    10px;
    --tmmn-height:        60px;
    --tmmn-z:             99999;
    --tmmn-border-radius: 15px;
    --tmmn-box-shadow:    0 4px 16px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.1);
    --tmmn-padding-y:     5px;
    --tmmn-padding-x:     10px;
    --tmmn-font-family:   system-ui, -apple-system, sans-serif;
    --tmmn-font-weight:   normal;
}

/* ── Bar ── */
#tmmn-bar, .tmmn-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--tmmn-z);
    display: flex; align-items: stretch; justify-content: space-around;
    height: var(--tmmn-height);
    background: var(--tmmn-bg);
    box-shadow: var(--tmmn-box-shadow);
    border-radius: var(--tmmn-border-radius) var(--tmmn-border-radius) 0 0;
    padding: var(--tmmn-padding-y) var(--tmmn-padding-x) calc(var(--tmmn-padding-y) + env(safe-area-inset-bottom, 0px));
    transition: transform .28s cubic-bezier(.25,.46,.45,.94), opacity .2s, background .2s, border-radius .2s, box-shadow .2s;
    overflow: hidden;
    /* PWA: promote bar to its own GPU compositing layer for smooth swipe animations */
    will-change: transform;
    contain: layout style; /* prevent bar layout from affecting page reflow */
    -webkit-overflow-scrolling: touch;
}

/* Style variants (superseded if user sets border-radius directly, kept for fallback) */
.tmmn-bar--rounded { border-radius: 20px 20px 0 0; }
.tmmn-bar--flat    { border-radius: 0; box-shadow: 0 -1px 0 rgba(0,0,0,.08); }
.tmmn-bar--pill    { 
    border-radius: 99px; 
    margin: 0 10px 10px; 
    box-shadow: var(--tmmn-box-shadow); 
}

/* Transparent on scroll */
.tmmn-bar--transparent {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}

/* ── Items ── */
.tmmn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; gap: 2px; text-decoration: none;
    color: var(--tmmn-color);
    font-family: var(--tmmn-font-family); 
    font-size: var(--tmmn-label-size); 
    font-weight: var(--tmmn-font-weight);
    transition: color .2s, transform .15s;
    position: relative; -webkit-tap-highlight-color: transparent; padding: 6px 0;
    /* PWA: eliminates 300ms tap delay on mobile browsers */
    touch-action: manipulation;
    /* PWA: GPU compositing hint for icon scale animation */
    will-change: color;
}
.tmmn-item:hover, .tmmn-item--active { color: var(--tmmn-active); }
.tmmn-item:active { transform: scale(.92); }

/* ── Icon area ── */
.tmmn-item__icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.tmmn-item__icon { display: block; font-size: 22px; width: 24px; height: 24px; line-height: 1; transition: transform .2s; }
.tmmn-item--active .tmmn-item__icon { transform: scale(1.1); }
.tmmn-item__icon--svg svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.tmmn-item__icon--img { width: 24px; height: 24px; object-fit: contain; opacity: .7; transition: opacity .2s; }
.tmmn-item--active .tmmn-item__icon--img { opacity: 1; }

/* Pill style active highlight */
.tmmn-bar--pill .tmmn-item--active .tmmn-item__icon-wrap {
    background: color-mix(in srgb, var(--tmmn-active) 15%, transparent);
    border-radius: 999px; padding: 4px 16px;
}

/* Active dot (rounded + flat) */
.tmmn-bar--rounded .tmmn-item--active::after,
.tmmn-bar--flat    .tmmn-item--active::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--tmmn-active);
    animation: tmmn-dot .25s ease forwards;
}
@keyframes tmmn-dot { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }

/* ── Label ── */
.tmmn-item__label { display: block; line-height: 1.1; letter-spacing: .3px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cart badge ── */
.tmmn-cart-badge {
    display: none; position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 3px;
    background: var(--tmmn-active); color: #fff;
    font-size: 9px; font-weight: 700; border-radius: 99px; line-height: 16px; text-align: center;
    animation: tmmn-badge .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
.tmmn-cart-badge--visible { display: block; }
@keyframes tmmn-badge { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Entry Animations ── */
.tmmn-bar--anim-slide_up { animation: tmmn-slide-up .4s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes tmmn-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.tmmn-bar--anim-bounce { animation: tmmn-bounce .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tmmn-bounce { from { transform: translateY(100%); } 60% { transform: translateY(-8px); } 80% { transform: translateY(4px); } to { transform: translateY(0); } }

.tmmn-bar--anim-fade { animation: tmmn-fade .4s ease both; }
@keyframes tmmn-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ── Item stagger ── */
.tmmn-item { animation: tmmn-item-in .35s ease both; }
.tmmn-item:nth-child(1) { animation-delay: .05s; }
.tmmn-item:nth-child(2) { animation-delay: .10s; }
.tmmn-item:nth-child(3) { animation-delay: .15s; }
.tmmn-item:nth-child(4) { animation-delay: .20s; }
.tmmn-item:nth-child(5) { animation-delay: .25s; }
@keyframes tmmn-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   FAB — Floating Action Button (center expandable add-on menu)
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper sits in the bar's flex flow at the center position */
.tmmn-fab-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 64px;  /* fixed width so it doesn't crowd nav items */
    z-index: 1;      /* raised so FAB button clips above the bar */
}

/* Full-screen overlay — invisible, eats taps to close the menu */
.tmmn-fab-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
    animation: tmmn-overlay-in .2s ease forwards;
}
.tmmn-fab-wrap.is-open .tmmn-fab-overlay { display: block; }
@keyframes tmmn-overlay-in { from { opacity:0 } to { opacity:1 } }

/* Main circular FAB button */
.tmmn-fab {
    position: relative; z-index: 2;
    width: 52px; height: 52px; border-radius: 50%;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
    /* color/background set via inline style from PHP */
}
.tmmn-fab:active { transform: scale(.9); }
.tmmn-fab-wrap.is-open .tmmn-fab { transform: rotate(45deg); box-shadow: 0 6px 24px rgba(0,0,0,.28); }

.tmmn-fab__icon { font-size: 24px !important; width: 24px !important; height: 24px !important; transition: transform .25s; }

/* Sub-items container */
.tmmn-fab-items {
    position: absolute;
    bottom: calc(100% + 14px); /* float above the FAB button */
    left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    pointer-events: none; z-index: 2;
}
.tmmn-fab-wrap.is-open .tmmn-fab-items { pointer-events: auto; }

/* Individual sub-item */
.tmmn-fab-item {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: #fff;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, transform .2s;
}
.tmmn-fab-wrap.is-open .tmmn-fab-item { opacity: 1; pointer-events: auto; }

/* Circular icon bubble */
.tmmn-fab-item__bubble {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--tmmn-active); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
    flex-shrink: 0;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.tmmn-fab-item:active .tmmn-fab-item__bubble { transform: scale(.88); }
.tmmn-fab-item__bubble .dashicons { font-size: 18px; width: 18px; height: 18px; }
.tmmn-fab-item__bubble img { width: 22px; height: 22px; object-fit: contain; }

/* Floating label pill */
.tmmn-fab-item__label {
    background: rgba(0,0,0,.72); color: #fff;
    font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif;
    padding: 4px 10px; border-radius: 99px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ── ANIMATION: stagger (items rise one-by-one) ── */
[data-animation="stagger"] .tmmn-fab-item {
    transform: translateY(20px) scale(.8);
}
[data-animation="stagger"].is-open .tmmn-fab-item {
    transform: translateY(0) scale(1);
}
[data-animation="stagger"].is-open .tmmn-fab-item[data-index="0"] { transition-delay: 0s; }
[data-animation="stagger"].is-open .tmmn-fab-item[data-index="1"] { transition-delay: .05s; }
[data-animation="stagger"].is-open .tmmn-fab-item[data-index="2"] { transition-delay: .10s; }
[data-animation="stagger"].is-open .tmmn-fab-item[data-index="3"] { transition-delay: .15s; }
[data-animation="stagger"].is-open .tmmn-fab-item[data-index="4"] { transition-delay: .20s; }

/* ── ANIMATION: fan (items arc left/right) ── */
[data-animation="fan"] .tmmn-fab-items { flex-direction: row; bottom: calc(100% + 8px); gap: 8px; }
[data-animation="fan"] .tmmn-fab-item { transform: scale(.4) rotate(90deg); flex-direction: column; }
[data-animation="fan"].is-open .tmmn-fab-item { transform: scale(1) rotate(0deg); }
[data-animation="fan"] .tmmn-fab-item__label { display: none; }
[data-animation="fan"].is-open .tmmn-fab-item[data-index="0"] { transition-delay: 0s; }
[data-animation="fan"].is-open .tmmn-fab-item[data-index="1"] { transition-delay: .06s; }
[data-animation="fan"].is-open .tmmn-fab-item[data-index="2"] { transition-delay: .12s; }
[data-animation="fan"].is-open .tmmn-fab-item[data-index="3"] { transition-delay: .18s; }
[data-animation="fan"].is-open .tmmn-fab-item[data-index="4"] { transition-delay: .24s; }

/* ── ANIMATION: slide (items slide up as a column) ── */
[data-animation="slide"] .tmmn-fab-item { transform: translateY(40px); }
[data-animation="slide"].is-open .tmmn-fab-item { transform: translateY(0); }
[data-animation="slide"].is-open .tmmn-fab-item[data-index="0"] { transition: opacity .2s .0s, transform .25s .0s; }
[data-animation="slide"].is-open .tmmn-fab-item[data-index="1"] { transition: opacity .2s .04s, transform .25s .04s; }
[data-animation="slide"].is-open .tmmn-fab-item[data-index="2"] { transition: opacity .2s .08s, transform .25s .08s; }
[data-animation="slide"].is-open .tmmn-fab-item[data-index="3"] { transition: opacity .2s .12s, transform .25s .12s; }
[data-animation="slide"].is-open .tmmn-fab-item[data-index="4"] { transition: opacity .2s .16s, transform .25s .16s; }

/* ═══════════════════════════════════════════════════════════════
   PWA / ACCESSIBILITY — prefers-reduced-motion
   Strips all animations for users who have "Reduce Motion" on.
   WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #tmmn-bar, .tmmn-bar,
    .tmmn-item,
    .tmmn-fab,
    .tmmn-fab-item,
    .tmmn-fab-item__bubble,
    .tmmn-fab-overlay {
        animation: none !important;
        transition: none !important;
        animation-delay: 0s !important;
    }

    /* Keep opacity changes (functional) but remove transforms */
    .tmmn-fab-wrap.is-open .tmmn-fab { transform: none !important; }
    .tmmn-fab-wrap.is-open .tmmn-fab-item { transform: none !important; }
    [data-animation="stagger"] .tmmn-fab-item { transform: none !important; }
    [data-animation="fan"]     .tmmn-fab-item { transform: none !important; }
    [data-animation="slide"]   .tmmn-fab-item { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PWA — Bar visible even in offline / service-worker contexts
   The menu uses only CSS custom properties set inline by PHP,
   so it renders correctly from cache with no network requests.
   ═══════════════════════════════════════════════════════════════ */
/* No extra CSS needed — the bar has zero external network deps. */
#tmmn-bar .tmmn-item__label { font-family: var(--tmmn-font-family); }