:root {
  --color-primary: #2a5929;
  --color-secondary: #4a0203;
  --color-background: #fbfbfb;
  --color-text: #212121;
  --color-text-secondary: #5f5f5f;
  --color-border: #dddddd;
  --color-primary-hover: #1e441f;
  --color-secondary-hover: #360001;
}

.button-primary {
  background-color: var(--color-primary);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-primary-hover);
  color: white;
}

.button-secondary {
  background-color: var(--color-secondary);
  color: white;
}

.button-secondary:hover {
  background-color: var(--color-secondary-hover);
  color: white;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
}

/* menu bottom */
#MAIN_menuBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
  padding: 10px;
  z-index: 1000;
  /* scroll horizontal jika tidak muat */
  overflow-x: auto;
  flex-wrap: nowrap;
}

#MAIN_menuBottom .btn {
  width: 200px;
  flex: 0 0 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-icon-wrapper {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.btn.active .menu-icon-wrapper {
  background-color: var(--color-primary);
  /* Warna latar belakang saat aktif */
}

#MAIN_menuBottom .btn svg {
  stroke: black;
  transition: stroke 0.3s ease;
}

#MAIN_menuBottom .btn.active svg {
  stroke: white;
}

#MAIN_menuBottom .btn:focus {
  outline: none;
  box-shadow: none;
}

.MAIN_activeTab i,
.MAIN_activeTab small {
  color: white;
}

.MAIN_activeTab svg {
  stroke: white;
}

@media (max-width: 576px) {
  #MAIN_menuBottom small {
    font-size: 10px;
  }

  #MAIN_menuBottom i {
    font-size: 1rem;
  }
}

/* end menu bottom */

/* page */
.MAIN_page {
  display: none;
}

.MAIN_page.MAIN_pageActive {
  display: block;
}

/* end page */