.reservation-steps-container {
  background-color: #fafafa;
  margin-bottom: 40px;
}

.reservation-steps {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  list-style: none;
  text-align: center;
  counter-reset: progress;
  width: 100%;
  color: #001b54;
  padding: 12px 0;
}

.reservation-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #a1bcca;
  z-index: 0;
}

.reservation-steps li {
  position: relative;
  text-decoration: underline;
  background: #fafafa;
  padding: 8px 15px;
  border: 1px solid transparent;
  z-index: 1;
}

.reservation-steps li.active {
  text-decoration: none;
  border-color: #a1bcca;
}

.reservation-steps li.active ~ li {
  text-decoration: none;
}

.reservation-steps li::before {
  content: counter(progress) '.';
  counter-increment: progress;
}

.reservation-steps li a:hover {
  text-decoration: none;
}

.reservation-steps li.active a,
.reservation-steps li.active ~ li a {
  pointer-events: none;
}

.btn-secondary {
  display: inline-block;
  background: #e6c392;
  text-decoration: none;
  color: #000;
  padding: 8px 15px;
  transition: all 0.2s ease-in-out;
}

.btn-secondary:hover {
  text-decoration: none;
  background: #d6a461;
  color: #000;
}

.btn-secondary:active {
  background: #e6c392;
}

.btn-link {
  display: inline-block;
  text-decoration: none;
  color: #001b54;
  padding: 8px 15px;
  border: 1px solid transparent;
}

.btn-link:hover {
  text-decoration: underline;
  color: #001b54;
}

.btn-link:active {
  text-decoration: none;
  border-color: #a6bbc8;
}

.reservation-nav {
  position: relative;
  text-align: right;
  border-top: 1px solid #a6bbc8;
  padding: 30px 0;
}

.reservation-summary__container {
  padding-left: 60px;
}

.reservation-summary {
  border: 1px solid #a6bbc8;
  padding: 20px;
}

.reservation-summary__row > div:first-of-type {
  min-width: 125px;
  padding-right: 10px;
}

.form-input {
  max-width: 350px;
}

.reservation-people {
  counter-reset: progress;
}

.reservation-people li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  list-style: none;
  width: 100%;
  margin-bottom: 20px;
  padding-left: 30px;
}

.reservation-people li::before {
  content: counter(progress) '.';
  counter-increment: progress;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.reservation-people .form-group {
  margin-bottom: 0;
  width: calc(33% - 7px);
}

.reservation-people .reservation-people__placeholder {
  display: none;
}