/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 20 2025 | 09:42:21 */
/* Base Form Styling */
.ride-booking-form {
  max-width: 1152px;
  padding: 40px 32px;
  border-radius: 0 0 20px 20px;
  font-family: 'Manrope', sans-serif;
  background-color: #ffffff;
}

#rideBookingForm,
.service-fields {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
}

.form-row input,
.form-row select {
  height: 68px;
}

.form-row input,
.form-row select,
.form-row textarea {
  flex: 1 1 100%;
  padding: 22px 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border: 1px solid #f2f2f2;
  outline: none;
  border-radius: 0;
  background: #f2f2f2;
  transition: border-color 0.3s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: #FFD233;
}

/* Group two inputs side by side for desktop */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="datetime-local"] {
  flex: 1 1 calc(50% - 7.5px);
  /* 2 inputs in one row */
}

/* Button styling */
.form-row button {
  width: max-content;
  padding: 16px 47px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #000;
  background: #FFD233;
  border: 1px solid #ffd233;
  border-radius: 0 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.custom-select {
  position: relative;
  appearance: none;
  background: #f2f2f2 url(https://chandigarhcab.services/wp-content/uploads/2025/04/Chevron-Down-1.svg) no-repeat right 22px center !important;
  background-size: 20px !important;
}

.form-row button:hover {
  background: #FFFAE8;
}

/* Success/Error Message Styling */
#formMessage {
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}

/*----------------------------------------------------------------Tablet-------------------------------------------------------------*/
@media(min-width:768px) and (max-width:1024px) {
  .ride-booking-form {
    padding: 24px 16px;
    border-radius: 0 0 16px 16px;
  }

  #rideBookingForm,
  .service-fields {
    gap: 24px
  }

  .form-row {
    gap: 16px;
  }

  .form-row input,
  .form-row select,
  .form-row textarea,
  .form-row button {
    font-size: 14px;
    line-break: 22px;
  }

  .form-row input,
  .form-row select,
  .form-row textarea {
    padding: 17px 12px;
  }

  .form-row input,
  .form-row select {
    height: 56px;
  }

  .custom-select {
    background-position: right 15px center !important;
    background-size: 16px !important;
  }

  .form-row button {
    padding: 13px 36px;
  }

  #formMessage {
    font-size: 12px;
    line-height: 20px;
  }
}

/*----------------------------------------------------------------Mobile-------------------------------------------------------------*/
@media (max-width: 767px) {
  .ride-booking-form {
    padding: 24px 8px 12px;
    border-radius: 0 0 12px 12px;
  }

  #rideBookingForm,
  .form-row,
  .service-fields {
    gap: 12px
  }

  .form-row input,
  .form-row select,
  .form-row textarea,
  .form-row button {
    font-size: 12px;
    line-break: 22px;
  }

  .form-row input,
  .form-row select,
  .form-row textarea {
    padding: 10px 8px;
  }

  .form-row input,
  .form-row select {
    height: 40px;
  }

  .custom-select {
    background-position: right 12px center !important;
    background-size: 12px !important;
  }

  .form-row button {
    padding: 10px 40px;
  }

  #formMessage {
    font-size: 10px;
    line-height: 18px;
  }
}