/* Universal Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  font-family: 'Arial', sans-serif;
  padding: 20px;
  text-align: center;
  background-color: #f4f8fb; /* Light background */
  color: #333; /* Dark text for contrast */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* Page Header Styling */
h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  background: linear-gradient(145deg, #00aaff, #0088cc); /* Blue gradient background */
  background-clip: text; /* Make the gradient apply to the text */
  -webkit-background-clip: text;
  color: transparent; /* Hide original text color to show gradient */
  text-shadow: 1px 1px 5px rgba(0, 170, 255, 0.5); /* Soft glow effect */
  padding: 20px 0;
  margin-top: 10px; /* Reduced space between header and page */
  margin-bottom: 20px; /* Reduced space between header and car image */
}

/* Car image container */
#carImageContainer {
  width: 100%;
  max-width: 450px; /* Increased width */
  height: 280px; /* Increased height */
  background-color: #e2e8f0; /* Soft background for the image */
  border-radius: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

#carImageContainer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

/* Input Styling */
input[type="text"] {
  width: 100%;
  max-width: 350px;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  color: #555;
  display: block;
  margin: 0 auto 15px; /* Same margin between all inputs */
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Focused input styling */
input[type="text"]:focus {
  border-color: #00aaff;
  box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
  outline: none;
}

/* Ensure all input containers do not alter the input width */
#variantInputContainer,
#genInputContainer {
  display: block;
  margin-bottom: 0; /* No margin here, just rely on the input's margin */
  width: 100%; /* Ensure the container doesn't constrain the width */
}

/* Ensure the inputs inside containers have the same width */
#variantInputContainer input[type="text"],
#genInputContainer input[type="text"] {
  width: 100%; /* Full width */
  max-width: 350px; /* Same max-width as other inputs */
  margin: 0 auto 15px; /* Same margin as other inputs */
}

/* Result Message Styling (Initially hidden) */
#resultMessage {
  font-size: 18px;
  color: #fff;
  background-color: #00aaff; /* Blue background */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 170, 255, 0.2); /* Soft shadow */
  margin-top: 20px;
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: none; /* Hide initially */
}

/* Button Styling */
#submitButton {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(145deg, #00aaff, #0088cc);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 170, 255, 0.2); /* Subtle shadow */
  transition: background-color 0.3s, box-shadow 0.3s;
  margin-top: 20px;
  min-width: 150px;
  position: relative; /* Ensure the button remains in its original position */
  z-index: 1; /* Keep the button above the result message */
}

#submitButton:hover {
  background-color: #0077bb;
  box-shadow: 0 8px 16px rgba(0, 170, 255, 0.3); /* Hover effect */
}


/* Score Styling */
#score {
  font-size: 16px;
  color: #888;
  margin: 10px;
}

/* Small Screen Adjustments (Responsive) */
@media (max-width: 480px) {
  #carImageContainer {
    height: 240px; /* Slightly reduced size on smaller screens */
    max-width: 100%;
  }

  input[type="text"] {
    max-width: 90%; /* Ensure inputs are not too wide */
  }

  #submitButton {
    padding: 10px 20px;
    min-width: 130px;
  }

  #resultMessage {
    font-size: 16px; /* Slightly smaller text on mobile */
    padding: 12px;
  }
}