/* Styles for the calculator form container */
.calculator {
  /* background-color: var(--step-background); / * Background color */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Inner spacing */
  margin-bottom: 20px; /* Spacing below the form */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Styles for each step section within the form */
.step {
  margin-bottom: 20px; /* Spacing below each step */
  padding: 15px; /* Inner spacing */
  background-color: var(--background-color); /* Background color */
  border-radius: 4px; /* Rounded corners */
}

/* Styles for fieldsets, which group related form elements */
fieldset {
  border: 1px solid #ccc; /* Border color */
  border-radius: 4px; /* Rounded corners */
  padding: 10px; /* Inner spacing */
  margin-bottom: 15px; /* Spacing below the fieldset */
}

/* Styles for legends, which provide captions for fieldsets */
legend {
  font-weight: bold; /* Bold text */
  padding: 0 5px; /* Horizontal padding */
}

/* Styles for labels associated with form inputs */
label {
  display: block; /* Ensures labels take up full width */
  margin-top: 10px; /* Spacing above labels */
  font-weight: bold; /* Bold text */
}

/* Container for input groups, arranging inputs side by side */
.input-group {
  display: flex; /* Flexbox for layout */
  justify-content: space-between; /* Even spacing between items */
  gap: 10px; /* Space between flex items */
  margin-bottom: 1px; /* Spacing below input groups */
}

/* Styles for number inputs within input groups */
.input-group input[type="number"] {
  flex: 1; /* Allows inputs to grow and fill space */
  padding: 8px; /* Inner spacing */
  font-size: 16px; /* Font size */
  border: 1px solid #ccc; /* Border color */
  border-radius: 4px; /* Rounded corners */
}

/* Styles for buttons */
button {
  background-color: var(--button-color); /* Button background color */
  color: white; /* Text color */
  border: none; /* Removes default border */
  padding: 12px 24px; /* Inner spacing */
  margin-top: 20px; /* Spacing above button */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 4px; /* Rounded corners */
  font-size: 18px; /* Font size */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Hover and focus states for buttons */
button:hover,
button:focus {
  background-color: var(
    --button-hover-color
  ); /* Darker background on hover/focus */
}

/* Styles for error messages */
.error-message {
  color: var(--error-color); /* Error text color */
  font-size: 0.9em; /* Slightly smaller font size */
  margin-top: 5px; /* Spacing above error message */
}

/* Styles for the result display area */
.calc-results {
  visibility: hidden;
  margin-top: 10px; /* Spacing above results */
  margin-bottom: 20px;
  padding: 5px 15px 25px 15px; /* Inner spacing */
  background-color: var(--step-background); /* Background color */
  border-radius: 4px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Styles for caveat text */
.caveat {
  font-style: italic; /* Italic text */
  color: #666666; /* Gray text color */
  margin-top: 20px; /* Spacing above caveat */
}

/* Styles for the explanation box */
.error-highlight {
  background-color: #ffe6e6; /**/
  border: 1px solid #b3d9ff; /* Border color */
  border-radius: 4px; /* Rounded corners */
  padding: 15px; /* Inner spacing */
  margin-bottom: 20px; /* Spacing below explanation */
  /* Removed italic style for accessibility compliance */
}

div.calc-error-msg {
  background-image: url(../../images/messages-error.png);
  display: inline-flex !important;
  margin-top: 13px;
  background-color: #ffe6e6;
  color: #300;
  font-weight: bold;
}

#calc-errors {
  visibility: hidden;
}

/* Styles for tooltips */
.tooltip {
  position: relative; /* Positioning context for tooltip text */
  display: inline-block; /* Allows tooltip to be inline with text */
  cursor: help; /* Indicates additional information is available */
  margin-left: 7px;
}

/* Styles for the tooltip text */
.tooltip .tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 300px; /* Fixed width */
  background-color: #555; /* Dark background */
  color: #fff; /* White text */
  text-align: center; /* Centered text */
  border-radius: 6px; /* Rounded corners */
  padding: 10px; /* Inner spacing */
  position: absolute; /* Absolute positioning */
  z-index: 1; /* Ensures tooltip appears above other elements */
  bottom: 125%; /* Positions tooltip above the icon */
  left: 50%; /* Centers tooltip horizontally */
  margin-left: -150px; /* Centers tooltip based on width */
  opacity: 0; /* Transparent by default */
  transition: opacity 0.3s; /* Smooth fade-in effect */
}

/* Show tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible; /* Makes tooltip visible */
  opacity: 1; /* Fully opaque */
}

/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
  .input-group {
    flex-direction: column; /* Stacks inputs vertically */
  }

  button {
    width: 100%; /* Button takes full width */
  }
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 100%;
  padding: 10px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.cal-fieldset div.fieldset-wrapper div {
  display: inline-block;
}

.form-item-amount {
  display: inline;
}

div.fieldset-wrapper div {
  display: inline-flex;
  padding-right: 25px;
  padding-bottom: 5px;
}

.description {
  position: absolute;
  margin-top: 4em;
}

/**
 * Inline items.
 */
.container-inline div,
.container-inline label {
  display: inline;
}
/* Fieldset contents always need to be rendered as block. */
.container-inline .fieldset-wrapper {
  display: block;
}

.container-inline {
  width: 100%;
}

.form-item-payments {
  padding-left: 5%;
}

.calc-italic {
  font-style: italic;
}

.calc-dollar-sign::before {
  content: '$';
  display: inline;
  padding-right: 5px;
  /*position: relative; */
}

.calc-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
}

#calc-results-wrapper {
  display: none;
  visibility: hidden;
  height: auto;
}