/*-----------------------------------*\
  #RESERVATION
\*-----------------------------------*/

.reservation-form { margin-block-start: -270px; }

.form-text { margin-block-end: 40px; }

.form-text .link {
  display: inline;
  color: var(--gold-crayola);
}

.form-right .headline-1 { margin-block-end: 40px; }

.form-right .contact-label { margin-block-end: 5px; }

.form-right .separator { margin: 20px auto; }

.form-right .body-4 {
  color: var(--quick-silver);
  line-height: var(--lineHeight-3);
}

.form-right .body-4:not(:last-child) { margin-block-end: 25px; }

.form-left,
.form-right { padding: 40px 20px 30px; }

.input-field[type="date"] {
  text-transform: uppercase;
  padding-inline-end: 10px;
}

.input-field[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }

textarea.input-field {
  resize: none;
  height: 140px;
  padding-block: 20px;
  line-height: var(--lineHeight-1);
}

.form-left .btn {
  max-width: 100%;
  width: 100%;
}

.form-right {
  background-repeat: repeat;
  background-position: top left;
}

/*-----------------------------------*\
  #FORM LAYOUT IMPROVEMENTS
\*-----------------------------------*/

/* Ensure equal width for phone and person dropdown fields */
.input-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
}

.input-wrapper .input-field[type="tel"] {
  flex: 1;
}

.input-wrapper .icon-wrapper {
  flex: 1;
}

/*-----------------------------------*\
  #PHONE NUMBER VALIDATION
\*-----------------------------------*/

.input-field[type="tel"] {
  position: relative;
}

.input-field[type="tel"]:invalid {
  border-color: var(--red-orange-color-wheel);
}

.input-field[type="email"]:invalid {
  border-color: var(--red-orange-color-wheel);
}

/*-----------------------------------*\
  #RESPONSIVE LAYOUT
\*-----------------------------------*/

@media (max-width: 768px) {
  .input-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .person-counter-wrapper {
    width: 100%;
  }

  .quantity-selector {
    max-width: 120px;
  }

  .quantity-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .quantity-input {
    width: 50px;
    height: 36px;
    font-size: 14px;
  }
}