/* ============================================================
   Mobile Sticky Footer Nav — msf-style.css
   Auto-parts e-commerce theme: bold orange + dark slate
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --msf-bg:           #1a1d24;
  --msf-border:       rgba(255,255,255,0.07);
  --msf-accent:       #f97316;      /* orange — matches site palette */
  --msf-accent-glow:  rgba(249,115,22,0.35);
  --msf-text:         #8a90a0;
  --msf-text-active:  #ffffff;
  --msf-badge-bg:     #ef4444;
  --msf-badge-text:   #ffffff;
  --msf-height:       64px;
  --msf-radius:       0px;          /* straight edge flush to screen */
  --msf-icon-size:    24px;
  --msf-font:         'Segoe UI', system-ui, sans-serif;
  --msf-transition:   0.22s cubic-bezier(0.34,1.56,0.64,1);
  --msf-safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── Spacer — prevents content from hiding behind nav ───────── */
.msf-spacer {
  display: none;
}

/* ── Show only on mobile ────────────────────────────────────── */
@media (max-width: 768px) {

  .msf-spacer {
    display: block;
    height: calc(var(--msf-height) + var(--msf-safe-bottom));
    width: 100%;
    pointer-events: none;
  }

  /* ── Nav Shell ──────────────────────────────────────────────── */
  .msf-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    height: calc(var(--msf-height) + var(--msf-safe-bottom));
    padding-bottom: var(--msf-safe-bottom);
    background: var(--msf-bg);
    border-top: 1px solid var(--msf-border);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.45);
    font-family: var(--msf-font);

    /* Frosted glass for devices that support it */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }

  /* ── List ───────────────────────────────────────────────────── */
  .msf-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    height: var(--msf-height);
    width: 100%;
  }

  /* ── Each Item ──────────────────────────────────────────────── */
  .msf-nav__item {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
  }

  /* ── Link ───────────────────────────────────────────────────── */
  .msf-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px 4px;
    color: var(--msf-text);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--msf-transition);
    will-change: color;
  }

  /* ── Active indicator — orange pill at top ──────────────────── */
  .msf-nav__item--active .msf-nav__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background: var(--msf-accent);
    border-radius: 0 0 4px 4px;
    animation: msfSlideDown 0.3s var(--msf-transition) both;
  }

  @keyframes msfSlideDown {
    from { opacity: 0; transform: translateX(-50%) scaleX(0.3); }
    to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
  }

  /* ── Active text + icon colour ──────────────────────────────── */
  .msf-nav__item--active .msf-nav__link {
    color: var(--msf-accent);
  }

  /* ── Icon wrapper ───────────────────────────────────────────── */
  .msf-nav__icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--msf-icon-size);
    height: var(--msf-icon-size);
  }

  /* ── SVG icons ──────────────────────────────────────────────── */
  .msf-nav__icon-wrap svg {
    width: var(--msf-icon-size);
    height: var(--msf-icon-size);
    transition: transform var(--msf-transition),
                filter var(--msf-transition);
  }

  .msf-nav__item--active .msf-nav__icon-wrap svg {
    transform: scale(1.15) translateY(-1px);
    filter: drop-shadow(0 0 6px var(--msf-accent-glow));
  }

  /* ── Label ──────────────────────────────────────────────────── */
  .msf-nav__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    transition: color var(--msf-transition);
    white-space: nowrap;
  }

  /* ── Cart Badge ─────────────────────────────────────────────── */
  .msf-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--msf-badge-bg);
    color: var(--msf-badge-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 9px;
    border: 2px solid var(--msf-bg);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.25s var(--msf-transition);
  }

  .msf-badge--visible {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Ripple ─────────────────────────────────────────────────── */
  .msf-nav__ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--msf-accent-glow) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  .msf-nav__link:active .msf-nav__ripple {
    transform: scale(3);
    opacity: 1;
    transition: none;
  }

  /* ── Hover for desktop-in-mobile-size scenarios ─────────────── */
  @media (hover: hover) {
    .msf-nav__link:hover {
      color: var(--msf-text-active);
    }

    .msf-nav__link:hover .msf-nav__icon-wrap svg {
      transform: translateY(-2px);
    }
  }

} /* end @media max-width:768px */

/* ── Hide nav on desktop / tablet ───────────────────────────── */
@media (min-width: 769px) {
  .msf-nav {
    display: none !important;
  }
}

/* ── WordPress admin bar offset fix ─────────────────────────── */
@media (max-width: 768px) {
  body.admin-bar .msf-nav {
    /* WP admin bar sits at top; no bottom offset needed */
  }
}

/* ── Print: hide nav ────────────────────────────────────────── */
@media print {
  .msf-nav,
  .msf-spacer {
    display: none !important;
  }
}