/*breakpoints*/
.reservation-box {
  --gap: 2.5rem;
  --font-clr: var(--white);
  background-color: var(--clr-primary);
  padding: 25px 30px;
  border-radius: var(--border-radius-xl);
  color: var(--font-clr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
@media screen and (max-width: 1199.98px) {
  .reservation-box {
    padding: 25px;
  }
}
@media screen and (max-width: 991.98px) {
  .reservation-box {
    flex-wrap: wrap;
    gap: 24px;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box {
    flex-wrap: wrap;
    padding: 25px 20px;
  }
}
.reservation-box > div {
  flex-basis: calc(50% - var(--gap));
}
@media screen and (max-width: 991.98px) {
  .reservation-box > div {
    flex-basis: unset;
  }
}
.reservation-box .reservation__date--area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.reservation-box .reservation__details--area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media screen and (max-width: 991.98px) {
  .reservation-box .reservation__details--area {
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box .reservation__details--area {
    flex-wrap: wrap;
    gap: 20px 12px;
    width: unset;
    justify-content: center;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box .reservation__details--area .btn {
    width: 100%;
  }
}
.reservation-box .date-group, .reservation-box .guest-group, .reservation-box .room-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reservation-box .date-group .label, .reservation-box .guest-group .label, .reservation-box .room-group .label {
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
  color: var(--font-clr);
}
.reservation-box .date-group .date, .reservation-box .date-group .separator, .reservation-box .date-group .count, .reservation-box .guest-group .date, .reservation-box .guest-group .separator, .reservation-box .guest-group .count, .reservation-box .room-group .date, .reservation-box .room-group .separator, .reservation-box .room-group .count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--font-clr);
}
@media screen and (max-width: 1399.98px) {
  .reservation-box .date-group .date, .reservation-box .date-group .separator, .reservation-box .date-group .count, .reservation-box .guest-group .date, .reservation-box .guest-group .separator, .reservation-box .guest-group .count, .reservation-box .room-group .date, .reservation-box .room-group .separator, .reservation-box .room-group .count {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 1199.98px) {
  .reservation-box .date-group .date, .reservation-box .date-group .separator, .reservation-box .date-group .count, .reservation-box .guest-group .date, .reservation-box .guest-group .separator, .reservation-box .guest-group .count, .reservation-box .room-group .date, .reservation-box .room-group .separator, .reservation-box .room-group .count {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 991.98px) {
  .reservation-box .date-group .date, .reservation-box .date-group .separator, .reservation-box .date-group .count, .reservation-box .guest-group .date, .reservation-box .guest-group .separator, .reservation-box .guest-group .count, .reservation-box .room-group .date, .reservation-box .room-group .separator, .reservation-box .room-group .count {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box .date-group .date, .reservation-box .date-group .separator, .reservation-box .date-group .count, .reservation-box .guest-group .date, .reservation-box .guest-group .separator, .reservation-box .guest-group .count, .reservation-box .room-group .date, .reservation-box .room-group .separator, .reservation-box .room-group .count {
    font-size: 1.2rem;
  }
}
.reservation-box .date-group input.date, .reservation-box .guest-group input.date, .reservation-box .room-group input.date {
  background-color: transparent;
  border: 1px solid var(--clr-primary);
  padding: 0;
  color: var(--white);
  font-weight: 300;
  width: 100%;
  text-align: center;
  flex-grow: 1;
}
.reservation-box .separator {
  font-size: 4rem;
}
@media screen and (max-width: 1399.98px) {
  .reservation-box .separator {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 1199.98px) {
  .reservation-box .separator {
    font-size: 2rem;
  }
}
@media screen and (max-width: 991.98px) {
  .reservation-box .separator {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box .separator {
    font-size: 2rem;
  }
}
.reservation-box .counter {
  display: flex;
  align-items: center;
}
.reservation-box .counter .btn {
  background-color: var(--clr-primary);
  color: var(--font-clr);
  border: none;
  border-radius: 50%;
  width: 2.1875rem;
  height: 2.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.reservation-box .counter .btn i {
  font-size: 2rem;
}
.reservation-box .counter .count {
  margin-inline: 2rem;
}
.reservation-box .calendar-icon i {
  font-size: 1.75rem;
  color: var(--font-clr);
  cursor: pointer;
}
@media screen and (max-width: 1199.98px) {
  .reservation-box .calendar-icon i {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 991.98px) {
  .reservation-box .calendar-icon i {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767.98px) {
  .reservation-box .calendar-icon i {
    font-size: 1.2rem;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22%2Fthemes%2Fbadems%2Fscss%2Fcomponents%2F_reservationform.scss%22%2C%22%2Fthemes%2Fbadems%2Fscss%2Fcomponents%2F..%2Fsettings%2Fbreakpoints.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAEA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACiBI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADiBF%3BAAAA%3BAAAA%3BACbE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADqBF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAC5BE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAD0DF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACzDA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADuFA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYF%3BAAAA%3BAAAA%3BACvFE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADmHF%3BAAAA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAaE%3BAAAA%3BAAAA%3BAAMF%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACvIE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAJA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */