/* ========================================
   MyCoupon - Mobile Bottom Navigation
======================================== */

.mc-mobile-nav {
    display: none;
}

@media (max-width: 768px) {

    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body .mc-mobile-nav {
        position: fixed !important;

        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0 !important;

        height: calc(70px + env(safe-area-inset-bottom, 0px));
        min-height: calc(70px + env(safe-area-inset-bottom, 0px));

        margin: 0 !important;
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)) !important;

        background: var(--white-98);
        border-top: 1px solid var(--line-soft);
        box-shadow: 0 -5px 20px var(--shadow-07);

        direction: rtl;
        z-index: 99999;
    }

    body .mc-mobile-nav .mc-mobile-nav__item {
        position: relative;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0;
        height: 60px;

        gap: 4px;

        margin: 0 !important;
        padding: 5px 2px !important;

        box-sizing: border-box !important;

        border: 0;
        border-radius: 0;

        background: transparent !important;

        /* Near-black default icon + label */
        color: var(--ink-strong);

        text-align: center !important;
        text-decoration: none !important;

        font-family: inherit;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.2;

        transition:
            color .18s ease,
            transform .12s ease;

        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        -webkit-touch-callout: none;
    }

    /* Keep the whole item as one reliable tap target on mobile. */
    body .mc-mobile-nav .mc-mobile-nav__item > svg,
    body .mc-mobile-nav .mc-mobile-nav__item > span {
        pointer-events: none !important;
    }

    /* Larger, thin outline icons */
    body .mc-mobile-nav .mc-mobile-nav__item > svg {
        display: block !important;

        width: 29px !important;
        height: 29px !important;

        min-width: 29px !important;
        min-height: 29px !important;

        max-width: 29px !important;
        max-height: 29px !important;

        flex: 0 0 29px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        position: static !important;
        inset: auto !important;

        fill: none !important;
        stroke: currentColor !important;

        stroke-width: 1.45 !important;
        stroke-linecap: round;
        stroke-linejoin: round;

        transform: none !important;
    }

    body .mc-mobile-nav .mc-mobile-nav__item > span {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit !important;
        text-align: center !important;
        white-space: nowrap;
    }

    /* Active = red icon and label only */
    body .mc-mobile-nav .mc-mobile-nav__item.is-active {
        color: var(--brand-alt) !important;
        background: transparent !important;
        font-weight: 500;
    }

    body .mc-mobile-nav .mc-mobile-nav__item.is-active::before,
    body .mc-mobile-nav .mc-mobile-nav__item.is-active::after {
        display: none !important;
        content: none !important;
    }

    @media (hover: hover) {
        body .mc-mobile-nav .mc-mobile-nav__item:hover {
            color: var(--brand-alt) !important;
            background: transparent !important;
        }
    }

    body .mc-mobile-nav .mc-mobile-nav__item:active {
        color: var(--brand-alt) !important;
        background: transparent !important;
        transform: scale(.95);
    }

    body .mc-mobile-nav .mc-mobile-nav__item:focus-visible {
        outline: 2px solid var(--brand-alt);
        outline-offset: -2px;
    }

}


/* Mobile nav lighter glass treatment */
@media (max-width:768px){
  body .mc-mobile-nav{
    background:color-mix(in srgb,var(--white) 78%,transparent) !important;
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
  }
  body .mc-mobile-nav .mc-mobile-nav__item{color:var(--muted) !important}
  body .mc-mobile-nav .mc-mobile-nav__item.is-active{color:var(--brand-alt) !important}
}

@supports not (height: 100dvh) {
  @media (max-width: 768px) {
    body .mc-mobile-nav {
      top: auto !important;
      bottom: 0 !important;
    }
  }
}




/* Center Deals item: simple red circle, slightly raised above the nav. */
@media (max-width:768px){
  body .mc-mobile-nav{
    overflow:visible !important;
  }

  body .mc-mobile-nav .mc-mobile-nav__item--deals{
    overflow:visible !important;
    z-index:2;
  }

  body .mc-mobile-nav .mc-mobile-nav__item--deals > svg{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    flex-basis:48px !important;

    padding:9px !important;
    box-sizing:border-box !important;

    border:0 !important;
    border-radius:50% !important;

    background:var(--brand-alt) !important;
    color:var(--white) !important;
    stroke:currentColor !important;
    stroke-width:2.1 !important;

    box-shadow:0 7px 18px color-mix(in srgb,var(--brand-alt) 22%,transparent) !important;
    transform:translateY(-16px) !important;
  }

  body .mc-mobile-nav .mc-mobile-nav__item--deals > span{
    margin-top:-14px !important;
    color:var(--muted) !important;
    font-weight:400 !important;
  }
}