/* ONX Mobile Bottom Nav v2.0 */

/* ===== BASE BAR ===== */
.onx-mbn-bar {
    position: fixed;
    bottom: var(--onx-bottom, 0);
    left: var(--onx-side, 0);
    right: var(--onx-side, 0);
    height: var(--onx-h, 58px);
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    box-sizing: border-box;
    transition: transform 0.45s cubic-bezier(0.32,0.72,0,1),
                opacity 0.35s ease,
                height 0.4s cubic-bezier(0.32,0.72,0,1),
                bottom 0.4s cubic-bezier(0.32,0.72,0,1),
                left 0.4s cubic-bezier(0.32,0.72,0,1),
                right 0.4s cubic-bezier(0.32,0.72,0,1),
                border-radius 0.4s cubic-bezier(0.32,0.72,0,1);
}

/* Site font inheritance */
.onx-mbn-bar.onx-mbn-site-font .onx-mbn-label { font-family: inherit; }

/* ===== FLOATING ===== */
.onx-mbn-bar.onx-mbn-floating {
    background: var(--onx-bg, #fff);
    border-radius: var(--onx-radius, 22px);
}

/* ===== DOCKED ===== */
.onx-mbn-bar.onx-mbn-docked {
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    background: var(--onx-bg, #fff);
    border-radius: var(--onx-radius, 22px) var(--onx-radius, 22px) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ===== GLASS BLUR ===== */
.onx-mbn-bar.onx-mbn-glass {
    background: rgba(var(--onx-bg-r,255), var(--onx-bg-g,255), var(--onx-bg-b,255), var(--onx-bg-op, 0.82));
    -webkit-backdrop-filter: blur(var(--onx-blur, 28px)) saturate(190%);
    backdrop-filter: blur(var(--onx-blur, 28px)) saturate(190%);
}

/* ===== GLASS INNER BORDER (depth frame) ===== */
.onx-mbn-bar.onx-mbn-glass-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    /* Subtle inner highlight on top, shadow on bottom = depth */
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 0 rgba(0,0,0,0.04);
    border: 0.5px solid rgba(255,255,255,0.25);
}

/* ===== SHADOW ===== */
.onx-mbn-bar.onx-mbn-shadow.onx-mbn-floating {
    box-shadow: 0 6px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}
.onx-mbn-bar.onx-mbn-shadow.onx-mbn-docked {
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06), 0 -1px 6px rgba(0,0,0,0.03);
}

/* ===== SCROLL: HIDE ===== */
.onx-mbn-bar.onx-mbn-scroll-hidden {
    transform: translateY(calc(100% + 40px)) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* ===== SCROLL: SHRINK ===== */
.onx-mbn-bar.onx-mbn-scroll-shrunk {
    height: 5px !important;
    overflow: hidden;
    opacity: 0.45;
    pointer-events: none;
}
.onx-mbn-bar.onx-mbn-floating.onx-mbn-scroll-shrunk {
    left: 28% !important; right: 28% !important;
    bottom: 8px !important;
    border-radius: 3px !important;
}
.onx-mbn-bar.onx-mbn-docked.onx-mbn-scroll-shrunk {
    border-radius: 3px 3px 0 0 !important;
    left: 22% !important; right: 22% !important;
}
.onx-mbn-bar.onx-mbn-scroll-shrunk .onx-mbn-inner { opacity: 0; }
.onx-mbn-bar.onx-mbn-scroll-shrunk::before { display: none; }

/* Desktop hide — handled by JS using configurable breakpoint.
   This is a fallback for no-JS; uses highest common breakpoint. */
@media (min-width: 1025px) {
    .onx-mbn-bar:not([style*="display"]), .onx-mbn-modal { display: none !important; }
}

/* ===== Inner ===== */
.onx-mbn-inner {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    padding: 0 var(--onx-inner, 12px);
    gap: 2px;
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.onx-mbn-bar.onx-mbn-scrollable .onx-mbn-inner {
    justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.onx-mbn-bar.onx-mbn-scrollable .onx-mbn-inner::-webkit-scrollbar { display: none; }
.onx-mbn-bar.onx-mbn-scrollable .onx-mbn-item { flex: 0 0 auto; min-width: 56px; scroll-snap-align: start; }

/* ===== Items ===== */
.onx-mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
    padding: 3px 6px 2px;
    text-decoration: none !important;
    color: var(--onx-icon, #444) !important;
    position: relative;
    transition: color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    border: none; background: none; cursor: pointer;
    box-sizing: border-box;
    gap: 1px;
}
.onx-mbn-item:active { transform: scale(0.88); }

/* ===== ACTIVE STATE — iOS Glass Pill ===== */
.onx-mbn-item.onx-mbn-active {
    color: var(--onx-active, #c9a87c) !important;
    background: rgba(var(--onx-active-r,201), var(--onx-active-g,168), var(--onx-active-b,124), 0.12);
    border-radius: 14px;
    animation: onxPillIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
/* Disable indicator when toggled off */
.onx-mbn-no-indicator .onx-mbn-item.onx-mbn-active {
    background: none !important;
    animation: none !important;
}
@keyframes onxPillIn {
    from { background: rgba(var(--onx-active-r,201), var(--onx-active-g,168), var(--onx-active-b,124), 0); }
    to { background: rgba(var(--onx-active-r,201), var(--onx-active-g,168), var(--onx-active-b,124), 0.12); }
}
.onx-mbn-item.onx-mbn-active .onx-mbn-label {
    color: var(--onx-active, #c9a87c);
    font-weight: 600;
}

/* ===== Icon Wrapper ===== */
.onx-mbn-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--onx-icon-sz, 21px) + 8px);
    height: calc(var(--onx-icon-sz, 21px) + 4px);
    flex-shrink: 0;
}

/* ===== Icon ===== */
.onx-mbn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--onx-icon-sz, 21px);
    height: var(--onx-icon-sz, 21px);
}
.onx-mbn-icon svg { width: 100%; height: 100%; display: block; }

/* ===== Label ===== */
.onx-mbn-label {
    font-size: var(--onx-font, 9px);
    font-weight: 500;
    color: var(--onx-label, #888);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.01em;
}

/* ===== Cart Badge ===== */
.onx-mbn-cart-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 15px; height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--onx-active, #c9a87c);
    color: #fff;
    font-size: 9px; font-weight: 700;
    display: none;
    align-items: center; justify-content: center;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: onxBadgePop 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.onx-mbn-cart-count.has-items { display: flex; }
@keyframes onxBadgePop { 0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)} }

/* ===== Offers Badge ===== */
.onx-mbn-badge {
    position: absolute;
    top: -5px; right: -6px;
    padding: 1px 4px;
    border-radius: 5px;
    font-size: 7px; font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    white-space: nowrap;
}

/* ===== Offers Pulse — whole icon bounce ===== */
.onx-mbn-item.onx-mbn-pulse .onx-mbn-icon-wrap {
    animation: onxPulse 2s ease-in-out infinite;
}
@keyframes onxPulse {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.18); }
    30% { transform: scale(1); }
    45% { transform: scale(1.12); }
    60% { transform: scale(1); }
}

/* ===== Back Button — compact chevron ===== */
.onx-mbn-back { display: none !important; }
.onx-mbn-back.onx-mbn-show {
    display: flex !important;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 48px;
    padding: 3px 4px 2px;
    animation: onxBackIn 0.25s ease;
}
.onx-mbn-back .onx-mbn-icon-wrap {
    width: calc(var(--onx-icon-sz, 21px) + 2px);
    height: calc(var(--onx-icon-sz, 21px) + 2px);
}
.onx-mbn-back .onx-mbn-icon {
    width: calc(var(--onx-icon-sz, 21px) - 2px);
    height: calc(var(--onx-icon-sz, 21px) - 2px);
}
@keyframes onxBackIn { from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)} }
[dir="rtl"] .onx-mbn-back .onx-mbn-icon { transform: scaleX(-1); }
[dir="rtl"] .onx-mbn-back.onx-mbn-show { animation-name: onxBackInRtl; }
@keyframes onxBackInRtl { from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)} }


/* =============================================
   OFFERS MODAL — Bottom Sheet, no close button
   ============================================= */
.onx-mbn-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.onx-mbn-modal.onx-mbn-modal-open { display: flex; }

.onx-mbn-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: onxFade 0.25s ease;
}
@keyframes onxFade { from{opacity:0}to{opacity:1} }

.onx-mbn-modal-sheet {
    position: relative;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 12px 28px 36px;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0));
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: onxSheetUp 0.45s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.12);
}
@keyframes onxSheetUp { from{transform:translateY(100%)}to{transform:translateY(0)} }

/* Grab handle instead of close button */
.onx-mbn-modal-handle {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    margin: 0 auto 20px;
}

.onx-mbn-offers-gift {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center; justify-content: center;
    animation: onxGiftBounce 0.5s cubic-bezier(0.175,0.885,0.32,1.275) 0.1s both;
}
.onx-mbn-offers-gift svg { width: 26px; height: 26px; color: #fff; stroke: #fff; }
@keyframes onxGiftBounce { from{transform:scale(0) rotate(-10deg)}to{transform:scale(1) rotate(0)} }

.onx-mbn-offers-title {
    font-size: 19px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.onx-mbn-offers-desc {
    font-size: 13px; color: #777; margin: 0 0 20px; line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.onx-mbn-coupon-box {
    display: flex;
    align-items: stretch;
    background: #faf8f5;
    border: 2px dashed var(--onx-active, #c9a87c);
    border-radius: 14px;
    overflow: hidden;
}
.onx-mbn-coupon-code {
    flex: 1;
    padding: 14px 16px;
    font-size: 18px; font-weight: 700;
    letter-spacing: 2px; color: #1a1a1a;
    font-family: 'Courier New', monospace;
    text-align: center;
    display: flex; align-items: center; justify-content: center;
}
.onx-mbn-coupon-copy {
    padding: 14px 20px;
    background: var(--onx-active, #c9a87c);
    color: #fff;
    border: none;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
}
.onx-mbn-coupon-copy:active { filter: brightness(0.9); }

.onx-mbn-coupon-feedback {
    color: #4caf50;
    font-size: 13px; font-weight: 600;
    margin-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: none;
}
.onx-mbn-coupon-feedback.show { display: block; animation: onxFade 0.2s ease; }

/* App install section */
.onx-mbn-app-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.onx-mbn-app-text {
    font-size: 13px; color: #555; margin: 0 0 12px; line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.onx-mbn-app-buttons {
    display: flex; gap: 8px; justify-content: center;
}
.onx-mbn-app-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    font-size: 13px; font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: transform 0.15s ease, filter 0.15s ease;
    flex: 1; justify-content: center;
}
.onx-mbn-app-btn:active { transform: scale(0.95); }
.onx-mbn-app-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.onx-mbn-app-ios {
    background: #000; color: #fff !important;
}
.onx-mbn-app-ios svg { fill: #fff; }
.onx-mbn-app-android {
    background: #01875f; color: #fff !important;
}
.onx-mbn-app-android svg { fill: #fff; }


/* ===== Z-INDEX FIX: Everything WoodMart opens must be above our bar ===== */
/* Side panels (cart, menu, filters, my account, etc.) */
.wd-side-panel,
.cart-widget-side,
.wd-sidebar,
.mobile-nav,
.wd-menu-sidebar,
.wd-header-mobile-nav .wd-side-panel,
/* When any panel is opened */
.wd-opened .wd-side-panel,
.wd-opened .cart-widget-side,
.wd-opened .wd-sidebar,
.wd-opened .mobile-nav,
.wd-opened .wd-menu-sidebar,
body.wd-opened-cart .cart-widget-side,
body.wd-opened-menu .wd-side-panel,
body.wd-opened-menu .mobile-nav,
/* Search overlay */
.wd-search-opened .wd-search-full-screen,
.wd-search-full-screen,
/* Popups, lightboxes */
.wd-popup,
.mfp-wrap,
.mfp-bg {
    z-index: 99999 !important;
}
/* WoodMart dark overlay that covers the page */
.wd-close-side,
.wd-side-overlay,
.wd-panel-overlay {
    z-index: 99998 !important;
}
/* WoodMart uses body::after as overlay — only override when panel is open */
body.wd-opened::after,
body.wd-opened-cart::after,
body.wd-opened-menu::after {
    z-index: 99998 !important;
}

/* ===== Body scroll lock ===== */
body.onx-mbn-no-scroll {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    top: 0;
}

/* ===== Body padding ===== */
body.onx-mbn-has-bar { padding-bottom: calc(var(--onx-h, 58px) + var(--onx-bottom, 0px) + 14px) !important; }
body.onx-mbn-has-bar-docked { padding-bottom: calc(var(--onx-h, 58px) + env(safe-area-inset-bottom, 0px) + 8px) !important; }