* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

body {
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #2c2a35;
  padding: 2px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#form-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/1hrbg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  transition: all 0.3s ease;
}
.form-header img {
  width: 100%;
  max-width: 300px; /* Set a max width for the logo */
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto; /* Center the logo */
}

@media (max-width: 768px) {
  .form-header img {
    max-width: 200px; /* Adjust max width for tablets */
  }
}

@media (max-width: 480px) {
  .form-header img {
    max-width: 150px; /* Adjust max width for mobile devices */
  }
}
/* Container for the multi-step form */
.form-container {
  background: rgba(75, 71, 71, 0.801); /* Semi-transparent background for glassmorphism */
  backdrop-filter: blur(10px); /* Glass effect with blur */
  padding: 20px;
  border-radius: 15px;
  width: 50%; /* Default width */
  height: 50%; /* Default height */

  @media (max-width: 768px) {
    width: 70%; /* Adjust width for tablets */
    height: auto; /* Adjust height for tablets */
  }

  @media (max-width: 480px) {
    width: 90%; /* Adjust width for mobile devices */
    height: auto; /* Adjust height for mobile devices */
  }
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3); /* Soft border for glassmorphism effect */
}

/* Title of the form */
h2 {
  text-align: center;
  color: #fff; /* White text to contrast with the background */
}

/* Step indicators: circular elements for each form step */
.steps-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step {
  text-align: center;
}

.step-number {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background for inactive steps */
  border-radius: 50%;
  display: inline-block;
  line-height: 30px;
  color: white;
  font-weight: bold;
  transition: background-color 0.4s ease-in-out; /* Smooth transition when a step becomes active */
}

.active-step .step-number {
  background-color: #74c69d; /* Green color for the active step */
}

/* Each step of the form, hidden by default */
.form-step {
  display: none;
}

/* Active step: shown with fade-in animation */
.form-step-active {
  display: block;
  opacity: 0;
  animation: fadeIn 0.4s forwards; /* Fade-in effect */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Styling for the input fields */
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #fff; /* White text for contrast */
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent input field background */
  color: #fff;
}

/* Error messages for form validation */
.error-message {
  color: #ff4b5c; /* Red for error messages */
  font-size: 0.8em;
}

/* Buttons: "Next", "Previous", and "Submit" */
.btn-next, .btn-prev, .btn-submit, .vin-button {
  background-color: #ff4b5c; /* Green button background */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-next:hover, .btn-prev:hover, .btn-submit:hover {
  background-color: #ea2a3d; /* Darker green on hover */
}

.btn-prev {
  margin-right: 10px; /* Small margin to separate from the next button */
}

/* Footer for image attribution */
footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9em;
  color: #ffffff;
}

footer a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

footer a:hover {
  color: #74c69d; /* Matching green for links on hover */
  border-bottom: 1px solid #ea2a3d;
}



/* Styling for the dropdown select element */
.input-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
  color: #fff;
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none; /* Remove default arrow for Safari */
  -moz-appearance: none; /* Remove default arrow for Firefox */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23fff" d="M2 0L0 2h4z"/></svg>'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

/* Styling for the dropdown options */
.input-group select option {
  background-color: #2c2a35; /* Background color for options */
  color: #fff; /* Text color for options */
}


/* Styling for the question heading */
.question-heading {
  margin-bottom: 20px; /* Add space below the question */
}

/* Styling for radio buttons */
.radio-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.radio-group input[type="radio"] {
  display: none; /* Hide the default radio button */
}

.radio-group label.radio-label {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  padding-left: 35px; /* Add space for the custom radio button */
}

.radio-group label.radio-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px; /* Make it rectangular */
  background-color: #fff;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.radio-group input[type="radio"]:checked + .radio-label::after {
  content: '✔'; /* Check mark */
  display: inline-block;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ea2a3d; /* Green color for the check mark */
}

.radio-group input[type="radio"]:checked + .radio-label::before {
  border-color: #ea2a3d; /* Green border for selected radio button */
}

.radio-group label.radio-label:hover {
  background-color: #ea2a3d; /* Darker green on hover */
}

/* Styling for the mileage input */
.mileage-input-wrapper {
  display: flex;
  align-items: center;
}

.mileage-input-wrapper input[type="number"] {
  flex: 1;
  padding-right: 50px; /* Add space for the static placeholder */
}

.mileage-placeholder {
  position: absolute;
  right: 30px;
  pointer-events: none;
  color: #ffffff;
}

/* Styling for the review items */
.review-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Reduced margin */
  padding: 5px; /* Reduced padding */
  border-bottom: 1px solid #ff4b5c;
}

.review-item strong {
  width: 100px; /* Adjust the width to be smaller */
  display: inline-block;
  color: #ea2a3d;
  font-size: 0.9em; /* Smaller text size */
}

.review-item span {
  margin-left: 5px;
  color: #ffffff;
  font-size: 0.9em; /* Smaller text size */
  display: inline-block;
  vertical-align: middle; /* Align text vertically in the middle */
}

.form-step h3 {
  margin-bottom: 10px; /* Reduced margin */
  color: #ffffff;
  font-size: 1em; /* Smaller text size */
}

@media (max-width: 600px) {
  .review-item strong {
    width: 80px; /* Adjust width for smaller screens */
    font-size: 0.8em; /* Smaller text size */
  }

  .review-item span {
    font-size: 0.8em; /* Smaller text size */
  }

  .form-step h3 {
    margin-bottom: 5px; /* Further reduced margin for smaller screens */
    font-size: 0.9em; /* Smaller text size */
  }
}

/* Styling for the side-by-side input fields */
.input-group.side-by-side {
  display: flex;
  justify-content: space-between;
}

.input-half {
  flex: 1;
  margin-right: 10px;
}

.input-half:last-child {
  margin-right: 0;
}

/* validate each steps */
.input-error {
  border: none !important;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-left: 10px; /* Position error message to the right of the input field */
  display: inline-block;
}

.radio-group.input-error {
  border: none;
  padding: 10px;
  border-radius: 4px;
}

/* Hide elements for url parameters and pictures upload*/
.hidden {
  display: none;
}

/* Styling for the loading icon */
.loading-icon {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

/* Responsive styling for the loading icon */
.loading-icon img {
  width: 50px; /* Default size */
  height: 50px; /* Default size */
}

@media (max-width: 768px) {
  .loading-icon img {
    width: 40px; /* Smaller size for tablets */
    height: 40px; /* Smaller size for tablets */
  }
}

@media (max-width: 480px) {
  .loading-icon img {
    width: 30px; /* Smaller size for mobile devices */
    height: 30px; /* Smaller size for mobile devices */
  }
}