/*
 * Mashin Irani — Mobile Bottom Navigation (CR-001).
 * Mobile-only (<= 768px). Desktop/tablet are completely untouched (every rule is inside the
 * max-width:768px media query). Uses the global --mi-* design tokens (tokens.css) with hex
 * fallbacks so it renders correctly even where mi.css is not enqueued.
 */

:root{
  --mi-bnav-h: 58px;
  --mi-bnav-safe: env(safe-area-inset-bottom, 0px);
}

/* Hidden by default => desktop + tablet see nothing new. */
.mi-bnav{ display:none; }

@media (max-width: 768px){
  .mi-bnav{
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1090; /* below buybar(1100), chat(1150), modal-overlay(1300); above content */
    display: flex;
    align-items: stretch;
    height: calc(var(--mi-bnav-h) + var(--mi-bnav-safe));
    padding-bottom: var(--mi-bnav-safe);
    background: rgba(245,240,233,.82);
    background: color-mix(in srgb, var(--mi-color-bg-base, #f5f0e9) 82%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    border-top: 1px solid var(--mi-color-border, #d9cbc2);
    box-shadow: 0 -4px 24px rgba(16,33,52,.10);
    font-family: var(--mi-font-sans, "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif);
    transform: translateY(0);
    transition: transform 300ms cubic-bezier(.2,0,0,1);
    will-change: transform;
  }
  /* Smooth auto-hide when the on-screen keyboard opens. */
  body.mi-bnav-hidden .mi-bnav{ transform: translateY(130%); }

  .mi-bnav__item{
    flex: 1 1 0;
    min-width: 48px;               /* touch target >= 48px */
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 0;
    text-decoration: none;
    color: var(--mi-color-text-tertiary, #6e6a66);
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms cubic-bezier(.2,0,0,1);
  }
  .mi-bnav__icwrap{
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 30px;
    border-radius: var(--mi-radius-pill, 999px);
    transition: background 200ms cubic-bezier(.2,0,0,1), transform 200ms cubic-bezier(.2,0,0,1);
  }
  .mi-bnav__ic{ width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mi-bnav__label{ font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0; }

  /* Active item: gold-tinted pill behind the icon + navy label. */
  .mi-bnav__item.is-active{ color: var(--mi-color-text-primary, #102134); }
  .mi-bnav__item.is-active .mi-bnav__icwrap{
    background: rgba(224,197,143,.42);
    background: color-mix(in srgb, var(--mi-color-gold-300, #e0c58f) 46%, transparent);
  }
  .mi-bnav__item.is-active .mi-bnav__label{ font-weight: 700; }

  /* Keyboard focus + press feedback. */
  .mi-bnav__item:focus-visible{ outline: 2px solid var(--mi-color-link, #3c507d); outline-offset: -4px; border-radius: var(--mi-radius-md, 8px); }
  .mi-bnav__item:active .mi-bnav__icwrap{ transform: scale(.88); }

  /* Badge (cart / account notifications). */
  .mi-bnav__badge{
    position: absolute; top: -4px; inset-inline-end: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mi-color-clay-error, #b4402e); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    border-radius: 999px; border: 2px solid var(--mi-color-bg-base, #f5f0e9);
    box-sizing: border-box;
  }
  .mi-bnav__badge[hidden]{ display: none; }

  /* Reserve space so page content + footer never hide behind the nav. */
  body{ padding-bottom: calc(var(--mi-bnav-h) + var(--mi-bnav-safe)) !important; }

  /* --- Conflict resolution with existing bottom-fixed elements (mobile only) --- */
  /* Product buy bar + checkout action bar stack directly above the nav. */
  .buybar, .co-buybar{ bottom: calc(var(--mi-bnav-h) + var(--mi-bnav-safe)) !important; }
  /* Floating chat lifts above the nav; lifts further where an action bar can appear. */
  .gaftino{ bottom: calc(var(--mi-bnav-h) + var(--mi-bnav-safe) + 12px) !important; }
  body.single-product .gaftino,
  body.woocommerce-checkout .gaftino{ bottom: calc(var(--mi-bnav-h) + var(--mi-bnav-safe) + 80px) !important; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  .mi-bnav, .mi-bnav__item, .mi-bnav__icwrap{ transition: none; }
}