<div style="height:72px"></div>

<nav class="wfm-bottom-nav">
  <a href="home.php" class="wfm-nav-item" data-page="home">
    <span class="wfm-nav-icon">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
    </span>
    <span class="wfm-nav-label">Home</span>
  </a>

  <a href="plans.php" class="wfm-nav-item" data-page="plans">
    <span class="wfm-nav-icon">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z"/></svg>
    </span>
    <span class="wfm-nav-label">Plans</span>
  </a>

  <a href="task.php" class="wfm-nav-item wfm-nav-center" data-page="task">
    <span class="wfm-nav-icon-center">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>
    </span>
    <span class="wfm-nav-label">Job</span>
  </a>

  <a href="team.php" class="wfm-nav-item" data-page="team">
    <span class="wfm-nav-icon">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
    </span>
    <span class="wfm-nav-label">Team</span>
  </a>

  <a href="account.php" class="wfm-nav-item" data-page="account">
    <span class="wfm-nav-icon">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.7 0 5-2.3 5-5S14.7 2 12 2 7 4.3 7 7s2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/></svg>
    </span>
    <span class="wfm-nav-label">Account</span>
  </a>
</nav>

<script>
(function(){
  var page = window.location.pathname.split('/').pop();
  var map = {
    'home.php'   : 'home',
    'index.php'  : 'home',
    'plans.php'  : 'plans',
    'job.php'    : 'plans',
    'task.php'   : 'task',
    'team.php'   : 'team',
    'account.php': 'account',
    'profile.php': 'account'
  };
  var active = map[page] || '';
  if (active) {
    var el = document.querySelector('.wfm-nav-item[data-page="' + active + '"]');
    if (el) el.classList.add('wfm-active');
  }
})();
</script>

<style>
/* ── Bottom Nav Shell ── */
.wfm-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.12);
  z-index: 9999;
  border-top: 1px solid #eef0f3;
}

/* ── Regular Nav Item ── */
.wfm-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #b0b8c8;
  font-size: 10px;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 500;
  gap: 3px;
  transition: color .2s, transform .15s;
  position: relative;
  padding-bottom: 4px;
}
.wfm-nav-item:active { transform: scale(0.92); }

/* ── Icon ── */
.wfm-nav-icon {
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .2s;
}
.wfm-nav-icon svg {
  width: 23px; height: 23px;
  transition: fill .2s;
}
.wfm-nav-label {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.2px;
  transition: color .2s;
}

/* ── ACTIVE STATE — Gold ── */
.wfm-nav-item.wfm-active {
  color: #C8960C;
}
.wfm-nav-item.wfm-active .wfm-nav-icon svg {
  fill: #C8960C;
  filter: drop-shadow(0 0 5px rgba(200,150,12,0.55));
}
.wfm-nav-item.wfm-active .wfm-nav-label {
  color: #C8960C;
  font-weight: 700;
}
/* Gold dot indicator */
.wfm-nav-item.wfm-active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 5px; height: 5px;
  background: linear-gradient(135deg,#FFD700,#C8960C);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(200,150,12,0.7);
}

/* ── CENTER (Job/Task) Button ── */
.wfm-nav-center {
  position: relative;
  top: -14px;
  flex: 0 0 64px;
}
.wfm-nav-icon-center {
  width: 56px; height: 56px;
  background: linear-gradient(135deg,#3ecf8e,#2c7be5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(44,123,229,0.45);
  margin-bottom: 2px;
  transition: box-shadow .2s, transform .15s;
}
.wfm-nav-icon-center svg {
  width: 28px; height: 28px;
  fill: #fff;
}
.wfm-nav-center .wfm-nav-label {
  color: #2c7be5;
  font-weight: 600;
}
/* Active center — gold ring */
.wfm-nav-center.wfm-active .wfm-nav-icon-center {
  background: linear-gradient(135deg,#FFD700,#C8960C);
  box-shadow: 0 6px 22px rgba(200,150,12,0.6);
}
.wfm-nav-center.wfm-active .wfm-nav-label {
  color: #C8960C;
  font-weight: 700;
}
.wfm-nav-center::after { display: none !important; }
.wfm-nav-center:active .wfm-nav-icon-center { transform: scale(0.93); }
</style>