body {
  font-family: "Open Sans", sans-serif;
  background-color: #4b3f72;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#formContainer {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #525252;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin: 0 20px;
}

h1,
h4 {
  color: #53389e;
  text-align: center;
}

h4 {
  margin-bottom: 20px;
  color: #525252;
}

.passenger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.passenger input,
.custom-select select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex: 1;
  font-size: 16px;
  background-color: white;
  color: black;
  line-height: normal;
  position: relative;
}

.custom-select {
  position: relative;
  flex: 1;
}

/* Base styling for the select input */
.custom-select select {
  appearance: none; /* Remove default styles */
  -webkit-appearance: none; /* Remove default styles for Safari */
  -moz-appearance: none; /* Remove default styles for Firefox */
  width: 100%;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}

/* Down arrow icon */
.custom-select::after {
  content: "▼"; /* Unicode arrow character */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Allow clicks through the icon */
  font-size: 12px;
  color: #666;
}

.removeBtn {
  cursor: pointer;
  color: #fdb45c;
  font-size: 18px;
  border: none;
  background: none;
  outline: none;
}

.control-buttons {
  text-align: center;
}

button[type="button"],
button[type="submit"] {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #fdb45c;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  font-weight: 600;
  font-size: 16px;
}

button[type="submit"]:disabled {
  background-color: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

@media (max-width: 575px) {
  .passenger {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .removeBtn {
    align-self: flex-end;
    margin-bottom: -6px;
    order: -1;
  }
}

@media (max-width: 359px) {
  button[type="button"],
  button[type="submit"] {
    width: 100%;
  }
}