/*  simple-savings-calculator.css
    Purpose        Stand-alone styles for the “Simple Savings Calculator”:
                     • calculator shell, input rows & helper tool-tips
                     • dual-chart area (growth line + breakdown bar)
                     • result / summary block & savings projection table
                     • CSV download icon, affiliate-banner slot
                     • dark-mode palette plus full responsive behaviour
                       (≤ 767 px portrait  |  768–1024 px landscape)

    Load-order     After the global theme file and Chart.js styles, before any
                   component-specific overrides, e.g.:
                     <link rel="stylesheet"
                           href="css/simple-savings-calculator.css">

    Last updated   31 Jul 2025
*/


/* Savings Calculator Styles */
.savings-calculator-container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 50px auto;
  margin-top: 30px !important;
  padding: 25px;
  background: #333333;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  border: 1px solid #cccccc;
}

h1 {
  margin-bottom: 10px;
  font-size: 28px;
}

.description {
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Input fields container styling */
.input-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

/* Input group styling */
.input-group {
  text-align: left;
}

.input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 16px;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

/* Charts Wrapper */
.charts-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  margin-top: 40px;
  height: 400px; /* Both chart containers will be 400px tall */
}

.line-chart-container {
  flex: 3;  /* 75% width */
}

.breakdown-chart-container {
  flex: 1;  /* 25% width */
  display: flex;
  align-items: center;   /* Center vertically */
  justify-content: center; /* Center horizontally if needed */
}

/* Force the line chart canvas to fill its container */
.line-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* For the breakdown chart, allow natural sizing by using maintainAspectRatio */
.breakdown-chart-container canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Result and Summary styling */
.result {
  margin-bottom: 20px;
  font-size: 24px;
}

.summary {
  font-size: 16px;
  padding: 10px;
  background: #444;
  border-radius: 8px;
  border: 1px solid #cccccc;
}

/* Table styling */
#savings-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 10px;
}

#savings-table th,
#savings-table td {
  padding: 8px;
  border: 1px solid #ccc;
}

#savings-table th {
  background-color: #444;
  color: #fff;
  text-align: center;
}

#savings-table td {
  color: #fff;
  text-align: right;
}

/* Fade-In Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

/* Affiliate Banner */
.affiliate-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.affiliate-banner a {
  display: inline-block;
}
.affiliate-banner img {
  width: 728px;
  height: 110px;
  object-fit: contain;
}

/* Tooltip Styles */
.cc-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background-color: var(--cc-primary-color, #4ea1d3);
  color: #fff;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
}

.cc-tooltip:hover {
  background-color: var(--cc-hover-color, #3b86a8);
}

.cc-info-icon {
  font-size: 12px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-tooltip-text {
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  background-color: var(--cc-tooltip-bg-color, #2c3e50);
  color: var(--cc-tooltip-text-color, #fff);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  white-space: normal;
  max-width: 200px;
  min-width: 150px;
  transition: visibility 0.3s, opacity 0.3s;
  z-index: 10;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

@media (hover: hover) {
  .cc-tooltip:hover .cc-tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}

.cc-tooltip.active .cc-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.input-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.input-title label {
  transform: translateY(3px);
}

p.description {
  color: #cccccc;
}

/* Download Icon */
.download-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #4ea1d3;
  color: #fff;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
  transition: background-color 0.2s;
}

.download-icon:hover {
  background-color: #3b86a8;
}

/* Page Break */
.page-break {
  height: 0;
  page-break-before: always;
  break-before: page;
}

/* --- NEW OVERRIDES for dynamic width alignment --- */
/* Top row: 3 input groups; subtract 2 gaps (15px each) */
.input-fields .input-row:first-child .input-group {
  flex: 0 0 calc((80% - 30px) / 3) !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Bottom row: 2 input groups; subtract 1 gap (15px) */
.input-fields .input-row:last-child .input-group {
  flex: 0 0 calc((80% - 15px) / 2) !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* --- Responsive Styles for Mobile --- */
/* Mobile Portrait (up to 767px, e.g., iPhone 16 Pro Max at 430px wide) */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .savings-calculator-container {
    margin: 20px auto;
    padding: 15px;
  }

  h1 {
    font-size: 24px;
  }

  .description {
    font-size: 12px;
    margin-bottom: 15px;
  }

  .input-row {
    flex-direction: column;
    gap: 10px;
  }

  .input-row .input-group {
    flex: 0 0 100% !important;
    width: 80% !important; /* All inputs 80% of container width */
    max-width: 80% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .input-group label {
    font-size: 14px;
  }

  .input-group input,
  .input-group select {
    font-size: 14px;
    padding: 8px;
    height: 40px; /* Uniform height for all inputs and select */
  }

  .charts-wrapper {
    flex-direction: column;
    height: auto; /* Allow stacking */
    gap: 20px;
  }

  .line-chart-container,
  .breakdown-chart-container {
    flex: none;
    width: 100%;
    height: 250px; /* Reduced height for smaller screens */
  }

  .breakdown-chart-container {
    align-items: flex-start; /* Align to top in portrait */
  }

  .result {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .summary {
    font-size: 14px;
    padding: 8px;
  }

  #savings-table table {
    font-size: 12px;
    overflow-x: auto;
    display: block;
  }

  #savings-table th,
  #savings-table td {
    padding: 6px;
    min-width: 80px; /* Ensure columns don’t collapse too much */
  }

  .affiliate-banner img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .download-icon {
    padding: 6px 8px;
  }
}

/* Mobile Landscape (768px to 1024px, e.g., iPhone 16 Pro Max at 932px wide) */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .savings-calculator-container {
    margin: 30px auto;
    padding: 20px;
  }

  h1 {
    font-size: 26px;
  }

  .description {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .input-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .input-fields .input-row:first-child .input-group {
    flex: 0 0 calc((100% - 20px) / 3) !important; /* 3 items, 2 gaps */
  }

  .input-fields .input-row:last-child .input-group {
    flex: 0 0 calc((100% - 10px) / 2) !important; /* 2 items, 1 gap */
  }

  .input-group label {
    font-size: 15px;
  }

  .input-group input,
  .input-group select {
    font-size: 15px;
    padding: 9px;
    height: 42px; /* Uniform height for all inputs and select in landscape */
  }

  .charts-wrapper {
    flex-direction: row; /* Keep side-by-side */
    height: 300px; /* Slightly reduced for landscape */
    gap: 10px;
  }

  .line-chart-container {
    flex: 2; /* Adjust proportions for landscape */
  }

  .breakdown-chart-container {
    flex: 1;
  }

  .result {
    font-size: 24px !important; /* Smaller text size in landscape */
    margin-bottom: 15px;
  }

  .summary {
    font-size: 10px !important;
    padding: 9px;
  }

  #savings-table table {
    font-size: 13px;
  }

  #savings-table th,
  #savings-table td {
    padding: 7px;
  }

  .affiliate-banner img {
    width: 100%;
    max-width: 500px; /* Larger banner in landscape */
    height: auto;
  }
}

/* Ensure tooltips adjust on mobile */
@media only screen and (max-width: 767px) {
  .cc-tooltip-text {
    right: auto;
    left: 110%;
    max-width: 150px;
    min-width: 120px;
    font-size: 11px;
  }
}