/* Step 1 Styles */
      #rac-forum-step1 { padding: 20px; margin: 20px; background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);font-size: 14px; font-weight: bold;}
      .rac-form-row { display: flex; gap: 10px; align-items: flex-start; }
      .rac-form-field { flex: 1; display: flex; flex-direction: column; min-width: 150px; }
      .field-label { margin-bottom: 5px; }
      .uniform-input { padding: 10px; font-size: 14px; height: 40px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }
      .uniform-input::placeholder { color: #000; font-size: 14px; }
      
      #rac-forum-step1 button[type=submit],
#rac-forum-step1 input[type=submit] {
  background: #00077D;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}
#rac-forum-step1 button[type=submit]:hover,
#rac-forum-step1 input[type=submit]:hover {
  background: #000790;
}

input:read-write:not([type=search]), select, textarea {
    background: white !important;
}
      
      .required { color: #B30000; }
      .min-booking-msg { font-size: 12px; color: #B30000; margin-top: 5px; }
      .checkbox-container { margin-top: 5px; display: flex; align-items: center; width: max-content; }
      .small-text { margin-left:5px; font-size: 14px; color: #000000; cursor: pointer; }
      @media screen and (max-width: 1000px) {
        .rac-form-row { flex-direction: column; }
        .rac-form-field { width: 100%; margin-bottom: 10px; }
      }


      /* Two Column Layout Styles for Step 2 & 3 */
      
      input:read-write:not([type=search]), select, textarea {
    background: white !important;
}
      
      
      #rac-forum-step2 button[type=submit],
#rac-forum-step2 input[type=submit] {
  background: #00077D;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 12px 25px;
  font-size: 16px;
  cursor: pointer;
}
#rac-forum-step2 button[type=submit]:hover,
#rac-forum-step2 input[type=submit]:hover {
  background: #000790;
}

      
      button#save-reservation-details{
          background-color: #00077D;
      }
      button#save-reservation-details:hover{
      background-color: #000790;
          
      }
      
      button#save-vehicle-details{
          background-color: #00077D;
      }
      button#save-vehicle-details:hover{
          background-color: #000790;
      }
      .two-column-container {
          display: flex;
          gap: 20px;
          margin-bottom: 20px;
      }
      .two-column-container .left-column {
          width: 30%;
          padding: 10px;
      }
      .two-column-container .right-column {
          width: 70%;
          padding-right:  10px;
          padding-left:  10px;
      }
      @media screen and (max-width: 768px) {
          .two-column-container {
              flex-direction: column;
          }
          .two-column-container .left-column,
          .two-column-container .right-column {
              width: 100%;
          }
      }
      
      /* Common Styles for Step 2 & 3 */
      #rac-forum-step2 { margin: 20px auto; padding: 20px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 10px; font-family: Arial, sans-serif; }
      .step2-heading { text-align: left; font-size: 28px; font-weight: bold; margin-bottom: 20px; color: #333; }
      .rac-form-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
      .rac-form-field { flex: 1; display: flex; flex-direction: column; min-width: 150px; }
      .field-label { margin-bottom: 5px; }
      .uniform-input { padding: 10px; font-size: 14px; height: 40px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }
      .min-booking-msg { font-size: 12px; color: #B30000; margin-top: 5px; }
      .checkbox-container { margin-top: 5px; display: flex; align-items: center; }
      .small-text { font-size: 12px; color: #000000; cursor: pointer; white-space: nowrap; }
      .step2-divider { margin: 40px 0; border: 0; border-top: 2px solid #ddd; }
      .progress-container { margin-bottom: 20px; }
      .progress-bar { width: 80%; height: 2px; background: #e0e0e0; border-radius: 3px; margin: 0 auto; }
      .progress-steps {
          display: flex;
          justify-content: space-around;
          width: 80%;
          margin: 10px auto 0;
      }
      .progress-step { text-align: center; cursor: pointer; }
      .progress-circle {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          font-size: 16px;
          line-height: 32px;
          text-align: center;
          margin: 0 auto;
          align-content: center;
      }
      .progress-circle.completed {
          background: #00077D;
          border: 2px solid #00077D;
          color: #fff;
      }
      .progress-circle.active {
          background: #fff;
          border: 2px solid #00077D;
          color: #000;
      }
      .progress-circle:not(.completed):not(.active) {
          background: #ccc;
          border: 2px solid #ccc;
          color: #000;
      }
      .progress-label {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-top: 5px;
      }
      .vehicle-selection { margin-top: 20px; }
      .section-heading { text-align: left; font-size: 24px; font-weight: bold; margin-bottom: 15px; margin-top:0px;}
      .section-heading-step3-headings {font-size:16px; font-weight: bold;}
      .vehicle-row { display: flex; gap: 10px; }
      .vehicle-option { flex: 1 1 calc(20% - 10px); max-width: calc(20% - 10px); border: 1px solid #ccc; border-radius: 5px; padding: 5px; text-align: center; cursor: pointer; }
      .vehicle-option img { width: 100%; height: auto; display: block; margin-bottom: 5px; }
      .vehicle-title { display: block; font-size: 14px; margin-bottom: 5px; }
      .vehicle-desc { display: block; font-size: 12px; color: #555; margin-bottom: 5px; }
      .select-btn { width: 100%; padding: 10px; font-size: 14px; background-color: #000000; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
      .select-btn:hover { background-color: #2d2d2d; }
      .vehicle-option.selected { border-color: #000000; background-color: #ECECEC; }
      .vehicle-option.selected .select-btn { background-color: #fff; color: #000000; border: 1px solid #000000; }
      .next-step-container { margin-top: 20px; }
      .next-step-btn { width: 100%; padding: 15px; font-size: 16px; background-color: #00077D; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;}
      .next-step-btn:hover { background-color: #000790; }
      .action-buttons { display: flex; gap: 10px; margin-top: 20px; }
      .action-buttons button { width: 100%; padding: 15px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; }
      .back-btn { background-color: #ccc; color: #333; }
      .submit-btn { background-color: #00077D; color: white; font-weight: bold;}
      .submit-btn:hover { background-color: #000790; }
      .extra-options { padding: 15px; border-top: 1px solid #ddd; }
      .extra-option-row { display: flex; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }
      .extra-option-row .option-col { flex: 1; padding: 5px; font-size: 14px; }
      .plus-minus { display: flex; align-items: center; }
      .plus-minus button { width: 35px; height: 35px; font-size: 18px; background-color: black; color: #fff; border: none; border-radius: 50%; cursor: pointer; }
      .plus-minus button:hover { background-color: #00077d; }
      .plus-minus span { margin: 0 10px; width: 35px; text-align: center; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
      .driver-details { margin-top: 20px; }
      .driver-details .form-row { margin-bottom: 10px; }
      .driver-details label { font-size: 16px; margin-bottom: 5px; }
      .driver-details input, .driver-details textarea { width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;font-family: sans-serif; }
      @media screen and (max-width: 1000px) {
          .rac-form-row { flex-direction: column; }
          .rac-form-field { width: 100%; margin-bottom: 10px; }
          .vehicle-row { flex-wrap: wrap; }
          .vehicle-option { flex: 1 1 calc(40% - 10px); max-width: calc(50% - 10px); }
          .extra-option-row { flex-direction: column; }
          .action-buttons { flex-direction: column; gap: 10px; }
          .action-buttons button { width: 100%; }
      }
      @media only screen and (max-width: 700px) {
            .progress-label {display: none;}
            .progress-steps {margin: 0px auto 0;}

      }
      .reservation-summary {
          background: #f1f1f1;
          padding: 15px;
          border: 1px solid #ddd;
          border-radius: 5px;
          margin-bottom: 20px;
      }
      .reservation-summary h3 {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
      }
      .reservation-summary ul {
          list-style: none;
          padding: 0;
      }
      .reservation-summary li {
          margin-bottom: 8px;
          font-size: 14px;
      }
      /* New styles for inline edit forms and selected vehicle details */
      .edit-details-btn {
          display: inline-block;
          margin-top: 10px;
          padding: 8px 12px;
          background: #00077D;
          color: #fff;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }
      .edit-details-btn:hover {
          background: #000790;
      }
      #edit-reservation-details-form .form-row,
      #edit-vehicle-form .form-row {
          margin-bottom: 10px;
      }
      #edit-reservation-details-form label,
      #edit-vehicle-form label {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 5px;
          display: block;
      }
      #edit-reservation-details-form .uniform-input,
      #edit-vehicle-form .uniform-input {
          height: 40px;
      }
      .selected-vehicle {
          display: flex;
          align-items: center;
          margin-top: 15px;
          border-top: 1px solid #ddd;
          padding-top: 10px;
      }
      .selected-vehicle img {
          max-width: 80px;
          height: auto;
          margin-right: 10px;
      }
      .selected-vehicle .vehicle-text h4 {
          margin: 0;
          font-size: 16px;
          font-weight: bold;
      }
      .selected-vehicle .vehicle-text p {
          margin: 2px 0 0;
          font-size: 14px;
          color: #555;
      }
/* 1. Default select text = black once a real option is chosen */
#step3-container select.uniform-input {
  color: #000000;
}

/* 2. Until they pick one (value=""), mark the field invalid → show grey placeholder */
#step3-container select.uniform-input:invalid {
  color: #808080;
}

/* 3. Make that empty-option text itself grey in the dropdown list */
#step3-container select.uniform-input option[value=""] {
  color: #808080;
}
/* Bold the labels in the Step 2 “Your inquiry” list */
#rac-forum-step2 .reservation-summary ul#reservation-summary-list li strong {
  font-weight: bold;
}

      .progress-container {
          position: relative;
          height: 80px;
          margin-bottom: 20px;
      }
      .progress-bar {
          position: absolute;
          top: 50%;
          left: 10%;
          width: 80%;
          height: 2px;
          background: #e0e0e0;
          border-radius: 3px;
          transform: translateY(-50%);
      }
      .progress-steps {
          position: absolute;
          top: 60%;
          left: 10%;
          width: 80%;
          display: flex;
          justify-content: space-around;
          transform: translateY(-50%);
      }
      .progress-step {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
      }
      .progress-circle.completed {
          background: #00077D;
          border: 2px solid #00077D;
          color: #fff;
      }
      .progress-circle.active {
          background: #fff;
          border: 2px solid #00077D;
          color: #000;
      }
      .progress-label {
          margin-top: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #333;
      }