/*
 * Note: Styles applied to 'body' are still excluded as they can conflict with the theme.
 * All calculator-specific styles are now highly targeted using '.fleet-calculator-container .fleet-calculator'.
 */

/* Apply box-sizing to all elements within the calculator for consistent layout */
.fleet-calculator-container * {
  box-sizing: border-box;
}

/* Styles for the main calculator wrapper - no width/margin here to allow theme to control overall space */
.fleet-calculator-container {
  /* This container can be used for any overall margin/padding/alignment
     that respects the theme's content area. For example: */
  /* padding: 15px; */
  /* margin-bottom: 20px; */
}

/* Styles for the actual calculator content box */
.fleet-calculator-container .fleet-calculator {
  max-width: 700px; /* Adjust this width based on your preference, or remove it entirely if you want it to fill available space */
  margin: 0 auto;   /* This centers the calculator within its parent container */
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif; /* Moved font-family here to scope it to the calculator */
}

.fleet-calculator-container .fleet-calculator h2 {
    /* Style for the heading inside the calculator, if needed.
       Themes often style H2 globally, so target it specifically. */
    font-size: 1.2em; /* Example: ensure your desired heading size */
    margin-top: 0;
    margin-bottom: 15px; /* Adjust spacing below heading */
}

.fleet-calculator-container .fleet-calculator .columns {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
}
.fleet-calculator-container .fleet-calculator .spacer { /* Adjust this if needed, or consider removing if flex handles spacing */
  width: 50px;
  min-height: 1px;
}

.fleet-calculator-container .fleet-calculator .column {
  flex: 1; /* Allows columns to grow and shrink */
  min-width: 250px; /* Ensures columns don't get too small before wrapping */
  margin: 10px;
}
.fleet-calculator-container .fleet-calculator label {
  display: block; /* Make labels take full width for better stacking */
  margin-bottom: 2px; /* Tighter spacing */
  font-weight: bold;
  font-size: 0.65em; /* Ensure font size for labels if theme overrides */
}
.fleet-calculator-container .fleet-calculator input,
.fleet-calculator-container .fleet-calculator select,
.fleet-calculator-container .fleet-calculator input[type=range] {
  width: 100%; /* Make inputs fill their parent column */
  max-width: 200px; /* Keep a max-width for inputs if desired */
  padding: 6px;
  margin-bottom: 10px; /* Tighter spacing */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px; /* Ensure font size for inputs if theme overrides */
}

/* Selector (Dropdown) specific styling */
.fleet-calculator-container .fleet-calculator select {
  background-color: #fba014; /* Orange background */
  color: white; /* White text */
  /* Ensure consistent height/padding if needed after color change */
}

/* Slider specific styling */
.fleet-calculator-container .fleet-calculator input[type=range] {
  background-color: #062f67; /* theme blue #062f67 background for the track */
  /* Note: Styling the slider thumb requires vendor-specific pseudo-elements (e.g., -webkit-slider-thumb, -moz-range-thumb)
           which are not included here for simplicity, but can be added if needed for specific browser control. */
}

.fleet-calculator-container .fleet-calculator #improvementDisplay {
  font-size: 0.9em;
  margin-bottom: 10px;
}
.fleet-calculator-container .fleet-calculator button {
  width: 50%;
  max-width: 300px; /* Add max-width for button for better control */
  padding: 10px;
  margin-top: 15px;
  border: none;
  border-radius: 5px;
  background-color: darkgreen; /* Dark green background */
  color: white; /* White text */
  font-weight: bold;
  cursor: pointer;
  font-size: 0.8em; /* Ensure button font size */
}
.fleet-calculator-container .fleet-calculator .results {
  margin-top: 20px;
  padding: 15px;
  background: #e2e2e2;
  border-radius: 5px;
}
.fleet-calculator-container .fleet-calculator .results-heading {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
}
.fleet-calculator-container .fleet-calculator .results-columns {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap; /* Allow result columns to wrap */
}
.fleet-calculator-container .fleet-calculator .results-columns > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1; /* Make result columns flexible */
  min-width: 280px; /* Ensure result columns don't get too small */
}

/* Specific style for the link within the insight block, if needed */
.fleet-calculator-container .fleet-calculator #efficiencyInsight a {
  color: #0073e6; /* Example: ensure links within calculator have consistent color */
  text-decoration: underline;
}