/* #region Template Reusable */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.modal-box {
  position: relative;
  padding: 20px;
  background: var(--table-bg);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: clamp(260px, 205.71px + 16.964vw, 450px);
  margin: 20px;
  z-index: 1;
  overflow: hidden;

  /* transform: translateY(-100px);
  transition: transform 0.2s ease; */
}
/* 
.modal.active .modal-box {
  transform: translateY(0);
} */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(16px, 14.29px + 0.536vw, 22px);
  margin-bottom: clamp(10px, 7.14px + 0.893vw, 20px);
}

.modal-close-btn {
  all: unset;
  cursor: pointer;
  color: var(--light-gray);
  display: flex;
}

.modal-close-svg {
  width: clamp(24px, 21.71px + 0.714vw, 32px);
  height: clamp(24px, 21.71px + 0.714vw, 32px);
  flex-shrink: 0;
}

.modal-body {
  display: flex;
  flex-direction: column;
  position: relative;
  scrollbar-width: none;
}

.modal-body::-webkit-scrollbar {
  display: none;
}

.modal-body input {
  transition: border 0.2s ease;
}

.modal-body input:focus {
  /* if an input is an ID add focus to it directly, it ignores him */
  border: 2px solid var(--orange);
  outline: none;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: end;
}

.modal-complete-btn {
  all: unset;
  cursor: pointer;
  background: var(--light-blue);
  color: black;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: clamp(8px, 6.86px + 0.357vw, 12px);
  border-radius: clamp(8px, 7.43px + 0.179vw, 10px);
  font-size: clamp(16px, 14.29px + 0.536vw, 22px);
  transition: transform 0.2s ease;
}

.modal-complete-btn:active {
  transform: scale(0.95);
}

/* #endregion */

/* #region ADD FOOD | Custom Toggle */

.custom-toggle {
  all: unset;
  display: flex;
  cursor: pointer;
  background-color: transparent;
  transition: transform 0.2s ease;
  background-color: var(--dark-blue);
  padding: 5px;
  border-radius: clamp(6px, 5.43px + 0.179vw, 8px);
}

.custom-toggle:active {
  transform: scale(0.95);
}

.custom-svg {
  width: clamp(18px, 12.86px + 1.607vw, 36px);
  height: clamp(18px, 12.86px + 1.607vw, 36px);
  color: var(--light-blue);
}

/* #endregion */

/* #region ADD FOOD | Search & Servings */

.modal-body.add-food input {
  border-radius: clamp(6px, 5.43px + 0.179vw, 8px);
  font-family: "Cal Sans";
  font-size: clamp(14px, 12.86px + 0.357vw, 18px);
  width: 100%;
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#autocomplete-list {
  position: fixed;
  background-color: var(--dark-blue);
  color: white;
  max-height: 200px;
  border-radius: 10px;
  padding: 5px;
  width: max-content;
  overflow-y: auto;
  z-index: 9999;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

#autocomplete-list:empty {
  display: none;
}

#autocomplete-list li {
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--text);
}

.add-food-servings {
  display: flex;
  align-items: center;
  gap: clamp(6px, 4.86px + 0.357vw, 10px);
}

.food-search-wrap {
  display: flex;
  margin-bottom: 10px;
  gap: 5px;
  align-items: center;
}

#food-search {
  padding: clamp(5px, 3.57px + 0.446vw, 10px) clamp(8px, 6.29px + 0.536vw, 14px);
  color: var(--white);
  background: var(--dark-blue);
  border: 2px solid var(--dark-blue);
}

#food-search:focus {
  border: 2px solid var(--orange);
  outline: none;
}

#food-search::placeholder {
  color: var(--light-blue);
}

#servings {
  width: clamp(80px, 74.29px + 1.786vw, 100px) !important;
  padding: clamp(5px, 3.57px + 0.446vw, 10px) clamp(8px, 6.29px + 0.536vw, 14px);
  color: var(--white);
  background: var(--dark-blue);
  border: 2px solid var(--dark-blue);
}

#servings:focus {
  border: 2px solid var(--orange);
  outline: none;
}

#servings::placeholder {
  color: var(--light-blue);
}

#servings.custom {
  text-align: center;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.1);
}

#servings.custom::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#serving-size-label {
  font-size: clamp(12px, 10.29px + 0.536vw, 18px);
  color: white;
}

/* #endregion */

/* #region ADD FOOD | Macro Preview & Edit */

.macro-edit {
  padding: clamp(5px, 3.57px + 0.446vw, 10px) clamp(8px, 6.29px + 0.536vw, 14px);
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
}

.macro-edit::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.macro-edit.custom {
  border: 2px solid var(--dark-blue);
  background-color: var(--dark-blue);
  color: var(--white);
}

.macro-edit.custom::placeholder {
  color: var(--light-blue);
}

#macros-preview {
  display: flex;
  gap: clamp(8px, 6.86px + 0.357vw, 12px);
  margin: 20px 0;
}

.macro-item {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 1.43px + 0.179vw, 4px);
}

.macro-label {
  font-size: var(--text);
  color: rgba(255, 255, 255, 0.5);
}

.macro-label.custom {
  color: var(--light-blue);
}

/* #endregion */

/* #region ADD FOOD | Meal Type */

.modal-meal-types {
  display: flex;
  gap: clamp(4px, 2.86px + 0.357vw, 8px);
  flex-wrap: wrap;
}

.meal-btn {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  padding: clamp(5px, 3.57px + 0.446vw, 10px) clamp(8px, 6.29px + 0.536vw, 14px);
  border-radius: clamp(6px, 4.86px + 0.357vw, 10px);
  font-size: clamp(14px, 12.86px + 0.357vw, 18px);
  color: var(--light-blue);
  background-color: var(--dark-blue);
  transition: background-color 0.2s ease;
}

.meal-btn.active {
  background-color: var(--orange);
  color: var(--white);
}

/* #endregion */