/* General reset an typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}

/* Calculator container */
.calculator-container {
  background: white;
  padding: 20px;
  width: 100%; /* Makes it responsive */
  max-width: 800px; /* Limit max width for larger screens */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.calculator-container h1 {
  text-align: center; 
  font-size: 1.7em;
}

/* Calculator content */
.calculator-content {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  gap: 20px; 
  margin-top: 20px;
}

/* Headings */ 
h3, h2 {
  margin-bottom: 7px;
  font-size: 1.3em;
}

/* Sections for Calculation and Basis */
#calculation-part, #calculation-basis {
  flex: 1; /* Take equal space */
  min-width: 300px; /* Prevent collapsing on small screens */
}

#calculation-basis {
  background-color: #f9f9f9;
  padding: 10px 10px; /* Top and bottom: 20px; Left and right: 10px */
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Results Section */
#calculation-part #result p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#calculation-part #result p .right-align {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#calculation-part #result {
  text-align: left;
  flex: 1;
}

/* Result Section */
#result {
  margin-top: 20px;
  text-align: left;
}

#result h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
  text-align: left; /* Align labels to the left */
  flex: 1; /* Allows the label to take up space proportionately */
}

input[type="number"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid #ccc;
  text-align: left; 
}

button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #ff7300;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

button:hover {
  background-color: #e06600;
}

/* Layout and Alignment */
.row {
  display: flex; /* Align elements in a row */
  justify-content: space-between; /* Space between left and right sections */
  align-items: center; /* Align items vertically in the center */
}

/* Tooltip and Info Icon Styling */
.tooltip {
  position: absolute;
  background-color: #b0abab; 
  color: #3f3c3c; 
  padding: 10px; 
  border-radius: 5px; 
  font-size: 0.9em; 
  z-index: 1000; /* Ensure it appears above other elements */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  max-width: 250px; 
  white-space: normal; 
  word-wrap: break-word; /* Break long words */
  opacity: 0; /* Hidden initially */
  visibility: hidden; /* Hidden from view */
  pointer-events: none; 
  transition: opacity 0.2s ease-in-out;
  top: 100%; /* Place it directly below the icon */
  left: 50%; /* Align horizontally with the center of the icon */
  transform: translateX(-50%) translateY(5px); /* Center horizontally and add slight spacing */
}

.tooltip.show,
.info-icon:hover .tooltip,
.tooltip:hover {
  opacity: 1; /* Visible */
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0); /* Move into place */
}

.tooltip ul {
  list-style: none; /* Removes bullets */
  margin: 0;
  padding: 0;
}

.tooltip li {
  margin-bottom: 5px; /* Optional: Add spacing between lines */
}

.tooltip a {
  color: #444498; /* Desired color for unvisited links */
  text-decoration: none; /* Removes underline */
}

.tooltip a:visited {
  color: #444498; /* Keep the same color for visited links */
}

.tooltip a:hover {
  text-decoration: underline; /* Optional: underline on hover */
}

#calculation-basis #additional-costs-container {
  margin-top: 20px; /* Add spacing from the main calculation section */
  background-color: #f9f9f9; /* Slightly different background to distinguish */
}

#calculation-basis #additional-costs-container h4 {
  font-size: 0.80em; /* Adjust the header size */
  margin-bottom: 3px; /* Space below the header */
}

#calculation-basis #additional-costs-container ul {
  padding-left: 20px; /* Indent bullet points */
  margin: 0; /* Remove default spacing */
}

#calculation-basis #additional-costs-container li {
  font-size: 0.75em; /* Smaller font size for list items */
  line-height: 1.1; /* Adjust line height for readability */
  margin-bottom: 5px; /* Space between each list item */
}

#calculation-basis #additional-costs-container a {
  color: #0056B3; /* Optional: Link color */
  text-decoration: none; /* Remove underline */
}

#calculation-basis #additional-costs-container a:hover {
  color: #002C5F; /* Slightly darker hover color */
  text-decoration: underline; /* Optional: Add underline on hover */
}

/* Info icon styling */
#calculation-part #result .info-icon {
  cursor: pointer;
  color: #065091;
}

#calculation-part #result .info-icon:hover {
  color: #0d1f31;
}

#calculation-part #result .info-icon i {
  font-size: inherit; 
}

.info-icon {
  color: #065091; 
  cursor: pointer; /* Show pointer cursor for interactivity */
  font-size: 1em; 
  list-style: none;
  display: inline-block; 
  margin-left: 5px; 
}

.info-icon:hover {
  color: #0d1f31; 
}

.info-icon i {
  font-size: inherit; 
}

.tooltip.wide-tooltip {
  max-width: 500px;
}

#copyright {
  text-align: center;
  font-size: 0.8em;
  font-style: italic;
  color: #666;
  margin-top: 16px;
}

@media (max-width: 768px) {
  body {
    display: block;         /* allow normal flow */
    height: auto;           /* let body expand with content */
    padding: 10px;          /* optional: add safe padding */
    overflow-y: auto;       /* allow scrolling */
  }

  .calculator-container {
    margin: 0px auto;      /* center horizontally with spacing */
  }

  .calculator-content {
    flex-direction: column;
    gap: 20px;
  }

  #calculation-part,
  #calculation-basis {
    flex: 1 1 100%;
  }
  .tooltip.wide-tooltip {
    min-width: 350px !important;
  }

  #copyright {
    font-size: 11px !important; /* Adjust font size for smaller screens */
  }
}

@media (max-width: 480px) {
  .row .label, .row .value {
    font-size: 0.9em; /* reduce size on small screens */
  }
  .row .value {
    max-width: 90vw;
    font-size: 0.85em;
  }
  #totalCost .right-align {
    font-size: 0.95em !important; /* reduce size on small screens */
  }
  #totalCost strong,
  #savings strong {
    font-size: 0.90em !important;
  }
  h3 {
    font-size: 1.1em !important; /* Adjust heading size for smaller screens */
  }
  .calculator-content {
    margin-top: 5px !important; 
  }
  h1 {
    font-size: 1.4em !important; /* Adjust main heading size for smaller screens */
  }
  input[type="number"] {
    margin-bottom: 0px !important; /* Adjust input size for smaller screens */
  }
}