/* ?=========== General Style ===========*/
:root {
  --main-color: #495464;
  --orange-color: #ff6900;
  --hover-color: #f54900;
}

.main-color {
  color: var(--main-color);
}

.orange-color {
  color: var(--orange-color);
}

.bg-orange {
  background-color: var(--orange-color);
}

.bg-green {
  background-color: #dafbe6;
  color: #008236;
}

.bg-blue {
  background-color: #c4d1e3;
  color: #125ad8;
}

.bg-red {
  background-color: #ffe2e2;
  color: #e7000b;
}

.bg-yallow {
  background-color: #fef9c2;
  color: #d08700;
}

.light-orange {
  background-color: #ffedd4;
  color: #f54900;
}

.bg-pink {
  background-color: #fce7f3;
  color: #ea278b;
}

.bg-check {
  background-color: #e17100;
  color: white;
}
/* ============================================ */
body {
  background-color: #fffbea;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ?=========== Navbar Section ===========*/
#navbar {
  .nav-brand {
    .logo-container {
      i {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fe4921;
      }
    }

    .brand-text {
      p {
        font-size: 14px;
      }
    }
  }

  button.navbar-toggler:hover i {
    color: var(--hover-color);
  }

  .navbar-nav {
    border-top: 1px solid #ffedd4;
    padding-top: 10px;
  }

  .nav-item {
    img {
      width: 45px;
      height: 45px;
      border: 3px solid #ffb86a;
    }

    a.active {
      color: var(--main-color);
    }

    a:hover,
    a.active:hover {
      color: var(--hover-color);
    }
  }
}

/* ?=========== Main Section ===========*/
.meal-sides {
  border: 1px solid #ffdbd2;
}

/* left side */
#visual {
  span {
    font-size: 12px;
  }

  figure {
    height: 400px;
  }

  img {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
}

/* right side */
.action-buttons {
  margin-top: -30px;
  margin-right: -25px;

  button:hover {
    background-color: #fdc8a4;
  }
}

.nav-tabs {
  .nav-link {
    font-size: 12px;
    margin-left: -10px;
    border: none;
    color: #6a7281;

    &.active {
      color: var(--hover-color);
      border-bottom: 2px solid #f54900;
    }

    .nav-tab:hover {
      color: #6a7281;
    }
  }
}

/* ?=========== Scroll ===========*/
.tab-content {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #ff7f5080 transparent;
}
.tags {
  font-size: 12px;
}

.alert-box {
  background-color: #fff5f5;
  border: none;
  border-left: 5px solid #fb2c36;

  i {
    color: #fb2c36;
    font-size: 18px;
  }

  h5 {
    color: #a3101a;
    font-size: 0.9rem;
  }

  p {
    color: red;
    font-size: 0.7rem;
  }
}

.ingredients-list {
  background-color: #fff9ec;
  li span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
}

.instructions-list {
  margin-left: -20px;
  color: #4d5666;
  li {
    font-size: 15px;
    span {
      width: 40px;
      height: 40px;
    }
  }
}

.chefTip-list {
  .chef-tip-item {
    background-color: #fffbeb;
    border-left: 3px solid #f39c12;

    .tip-icon {
      width: 20px;
      height: 20px;

      i {
        font-size: 12px;
      }
    }

    p {
      font-size: 15px;
      margin-bottom: 0;
    }
  }
}

button.recipe {
  background: linear-gradient(to right, #ff6b00, #ff3d3d);
  font-size: 13px;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }
}