/* ============================================================
   Mobile Nav Bar – Frontend Styles
   Only visible on mobile (< breakpoint injected via JS class)
   ============================================================ */

:root {
    --mnb-bar-bg:     #ffffff;
    --mnb-active:     #1e3a8a;
    --mnb-inactive:   #9ca3af;
    --mnb-border-top: #e5e7eb;
    --mnb-height:     64px;
    --mnb-safe-area:  env(safe-area-inset-bottom, 0px); /* iPhone notch */
}

/* ── Bar ────────────────────────────────────────────────────── */
.mnb-bar {
    display:         none; /* shown only on mobile via media query */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99998;
    height:          calc(var(--mnb-height) + var(--mnb-safe-area));
    padding-bottom:  var(--mnb-safe-area);
    background:      var(--mnb-bar-bg);
    border-top:      1px solid var(--mnb-border-top);
    box-shadow:      0 -2px 16px rgba(0,0,0,.07);
    /* 4 equal columns */
    display:         none;
    flex-direction:  row;
    align-items:     stretch;
    justify-content: space-around;
}

/* ── Each item ──────────────────────────────────────────────── */
.mnb-item {
    flex:            1 1 0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    padding:         8px 4px 6px;
    color:           var(--mnb-inactive);
    text-decoration: none;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    font-family:     inherit;
    font-size:       inherit;
    -webkit-tap-highlight-color: transparent;
    transition:      color .18s;
    position:        relative;
    outline:         none;
}

.mnb-item:focus-visible {
    outline: 2px solid var(--mnb-active);
    outline-offset: -2px;
    border-radius: 8px;
}

.mnb-item--active,
.mnb-item:active {
    color: var(--mnb-active);
}

/* Active dot indicator */
.mnb-item--active::after {
    content:      '';
    position:     absolute;
    top:          6px;
    width:        4px;
    height:       4px;
    border-radius: 50%;
    background:   var(--mnb-active);
}

/* ── Icon ───────────────────────────────────────────────────── */
.mnb-icon {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       24px;
    height:      24px;
    flex-shrink: 0;
    position:    relative; /* allows badge to position against this */
}

.mnb-icon svg {
    width:  22px;
    height: 22px;
    display: block;
}

.mnb-item--active .mnb-icon svg,
.mnb-item:active .mnb-icon svg {
    stroke-width: 2.5;
}

/* ── Label ──────────────────────────────────────────────────── */
.mnb-label {
    font-size:   10.5px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    line-height: 1;
}

/* ── Body padding so content isn't hidden behind bar ─────────── */
body.mnb-active {
    padding-bottom: calc(var(--mnb-height) + var(--mnb-safe-area)) !important;
}

/* ── Header hiding ──────────────────────────────────────────── */
body.mnb-active.mnb-hide-header .site-header,
body.mnb-active.mnb-hide-header header.site-header {
    display: none !important;
}

/* Allow override with custom selector — injected dynamically */

/* ── Search Modal ────────────────────────────────────────────── */
.mnb-search-modal {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mnb-search-modal[hidden] {
    display: none;
}

/* Backdrop */
.mnb-search-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation:  mnbFadeIn .2s ease;
}

@keyframes mnbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal sheet */
.mnb-search-modal__inner {
    position:     relative;
    z-index:      1;
    background:   #fff;
    border-radius: 20px 20px 0 0;
    padding:      20px 16px calc(16px + var(--mnb-safe-area));
    animation:    mnbSlideUp .25s cubic-bezier(.32,1,.23,1);
}

@keyframes mnbSlideUp {
    from { transform: translateY(100%); opacity: .5; }
    to   { transform: translateY(0);    opacity: 1;  }
}

/* Drag handle visual */
.mnb-search-modal__inner::before {
    content:       '';
    display:       block;
    width:         40px;
    height:        4px;
    border-radius: 999px;
    background:    #d1d5db;
    margin:        0 auto 16px;
}

.mnb-search-modal__header {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mnb-search-modal__title {
    font-size:   17px;
    font-weight: 700;
    color:       #111827;
}

.mnb-search-modal__close {
    width:        36px;
    height:       36px;
    border-radius: 50%;
    border:       none;
    background:   #f3f4f6;
    color:        #6b7280;
    display:      flex;
    align-items:  center;
    justify-content: center;
    cursor:       pointer;
    flex-shrink:  0;
    -webkit-tap-highlight-color: transparent;
    transition:   background .15s;
}

.mnb-search-modal__close:active {
    background: #e5e7eb;
}

.mnb-search-modal__close svg {
    width:  18px;
    height: 18px;
    display: block;
}

/* Search bar inside modal */
.mnb-search-bar-wrap {
    position: relative;
}

/* Inherit Smart Search plugin styles for .ss-wrap inside modal */
.mnb-ss-wrap {
    max-width: 100% !important;
}

/* Dropdown inside modal */
.mnb-ss-dropdown {
    position:   static !important;  /* flow inside modal, not absolute */
    margin-top: 8px;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
}

/* ── Only show bar + behaviour on mobile ─────────────────────── */
/* Breakpoint driven by a class added by JS so the PHP setting is respected */
body.mnb-active .mnb-bar {
    display: flex;
}

/* Fallback media query for default 768px breakpoint */
@media (max-width: 767px) {
    body:not(.mnb-breakpoint-set) .mnb-bar {
        display: flex;
    }
}

/* ── Cart badge ──────────────────────────────────────────────── */
.mnb-cart-icon-wrap {
    display:   flex;
    align-items: center;
    justify-content: center;
}

.mnb-cart-badge {
    position:       absolute;
    top:            -6px;
    right:          -6px;
    width:          16px;
    height:         16px;
    aspect-ratio:   1;
    border-radius:  50%;
    background:     navy;
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    display:        flex;
    align-items:    center;
    justify-content: center;
    pointer-events: none;
    line-height:    1;
    transition:     transform .2s cubic-bezier(.34,1.56,.64,1), opacity .15s;
    transform-origin: center;
    z-index:        1;
}

.mnb-cart-badge--hidden {
    transform: scale(0);
    opacity:   0;
}


.mnb-item--search.mnb-item--on,
.mnb-item--menu.mnb-item--on {
    color: var(--mnb-active);
}