#calculator-wrap {
  font-size: 15px;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}

#frmcalc {
  width: 100%;
  padding: 0;
  margin: 0;
}

.calc-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}

.calc-input {
  flex: 0 0 auto;
  width: 100%;
  padding: 0;
  margin: 0;
}

.results-container {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;
}

#tblcalculator {
  width: 100%;
  table-layout: auto;
}

#tblresults {
  width: 100%;
  table-layout: auto;
}

/* Desktop: side-by-side */
@media screen and (min-width: 992px) {
  .calc-input {
    width: 480px;
    max-width: 520px;
  }
  .results-container {
    min-width: 400px;
  }
}

/* ═══ End layout ═══ */

.tipIcon {
  text-decoration: none !important;
  color: inherit;
}
.tipIcon :hover {
  text-decoration: none !important;
  color: inherit;
}
.tipIcon i {
  font-size: 1rem;
  color: inherit;
}

span.sm-hide {
  white-space: nowrap;
}

#tooltip {
  position: absolute;
  border: 1px solid #666666;
  background: #fff;
  padding: 12px;
  color: #333;
  min-width: 610px;
  font-family: Tahoma, Arial;
  font-size: 16px;
  display: none;
  line-height: 24px;
  border-radius: 5px;
  z-index: 999;
  max-width: 900px;
}

#tblcalculator td,
th {
  padding: 0.4rem 0.5rem !important;
  line-height: 2rem;
}

#tblresults td,
th {
  padding: 0.4rem 0.5rem !important;
  white-space: nowrap;
}

.row-label:not(.expandable) {
  text-indent: 1.6rem;
}
.row-label i {
  display: none;
}
.row-label.expandable i {
  display: inline-block;
}

.toggle-icon {
  font-size: 1rem;
  cursor: pointer;
}

#spinner div {
  z-index: 1032;
  color: #ff8602;
}

#spinner {
  background: transparent !important;
  z-index: 1031;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
}

.tax-bands .row-label {
  text-indent: 1.8rem;
  font-style: italic;
}

.row-tfa-marriage-allowance .row-label {
  text-indent: 1.8rem;
  font-style: italic;
}

.menu-icon {
  position: absolute;
  padding: 0.1rem !important;
  top: -0.1rem;
  right: 0.1rem;
  background: #fff !important;
}
.menu-icon i {
  font-size: 1.5rem;
  cursor: pointer;
  vertical-align: bottom;
}

.checkbox-parent {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#view-menu {
  position: absolute;
  right: -7rem;
  margin-top: 0.5rem;
  z-index: 200;
}

.last-th {
  padding-right: 2.4rem !important;
}

#calculator-results {
  position: relative;
}

#wageInput {
  background: #ffcc00;
}
#wageInput tr {
  background: #ffcc00;
}
#wageInput td {
  border-color: rgba(37, 41, 36, 0.13) !important;
}

#tblresults th:not(:first-child) {
  text-align: right;
}
#tblresults tbody td:not(.row-label) {
  text-align: right;
}
#tblresults tbody .row-net-wage td span {
  background: #fff;
  padding: 6px 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
#tblresults tbody tr.row-allowable-deductions td:nth-child(odd) {
	background: #b8f4be;
}
#tblresults tbody tr.row-allowable-deductions td:nth-child(even) {
	background: #92de99;
}

#tblresults tbody tr:not(tr[class*=bg-], .tax-bands, tr[class*=row-pension-]) td:nth-child(odd) {
  background: #f8f8f8;
}
#tblresults tbody tr:not(tr[class*=bg-], .tax-bands, tr[class*=row-pension-]) td:nth-child(even) {
  background: #fff0c1;
}
#tblresults tbody tr.row-pension-hmrc td:nth-child(odd),
#tblresults tbody tr.row-pension-you td:nth-child(odd) {
  background: #333333;
  color: white;
}
#tblresults tbody tr.row-pension-hmrc td:nth-child(even),
#tblresults tbody tr.row-pension-you td:nth-child(even) {
  background: #444444;
  color: white;
}
#tblresults tbody tr.row-taxable td:nth-child(odd) {
  background: #f8f8f8 !important;
}
#tblresults tbody tr.row-taxable td:nth-child(even) {
  background: #fff0c1 !important;
}
#tblresults tbody tr.tax-bands td:nth-child(odd) {
  background: #f5d0bf;
}
#tblresults tbody tr.tax-bands td:nth-child(even) {
  background: #ecb69d;
}
#tblresults tbody tr:not(tr[class*=bg-], .tax-bands, tr[class*=row-pension-]):nth-child(even) td:nth-child(odd) {
  background: #fff0c1;
}
#tblresults tbody tr:not(tr[class*=bg-], .tax-bands, tr[class*=row-pension-]):nth-child(even) td:nth-child(even) {
  background: #ffe082;
}
#tblresults tbody .row-net-wage td:nth-child(odd) {
  background: #ffcc00 !important;
}
#tblresults tbody .row-net-wage td:nth-child(even) {
  background: #ffb719 !important;
}

.bg-red td:nth-child(odd) {
  background: #e55e21 !important;
  color: white !important;
}
.bg-red td:nth-child(even) {
  background: #d54e21 !important;
  color: white !important;
}

.bg-tax-region td {
  background: #444499 !important;
  color: white !important;
}

.bg-student-loan td {
  background: #3399cc !important;
  color: white !important;
}

.bg-pension td {
  background: #333333 !important;
  color: white !important;
}

i[disabled] {
  opacity: 0.4;
  cursor: initial;
}

@media screen and (max-width: 420px) {
  .sm-hide {
    display: none !important;
  }

  /* .wk {
    display: none !important;
  } */

  .row-label:not(.expandable) {
    text-indent: 0 !important;
  }
}

/* ── Mobile table: sticky first 2 columns, scrollable rest ──────────────── */

/* Arrow buttons hidden on desktop */
.tbl-scroll-arrow { display: none; }

@media screen and (max-width: 768px) {
  /* Prevent page from overflowing horizontally */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Clamp the results container to viewport */
  .results-container {
    min-width: 0 !important;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }

  /* Scrollable wrapper around the table */
  .table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Hide native scrollbar for cleaner look */
  .table-scroll-wrapper::-webkit-scrollbar { display: none; }
  .table-scroll-wrapper { scrollbar-width: none; }

  #tblresults {
    table-layout: auto;
  }

  /* Tighter row-label on mobile */
  #tblresults td.row-label,
  #tblresults th:first-child {
    min-width: 160px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Title row lifted out of scroll table — never scrolls */
  .tbl-title-row {
    background: #343a40;
    color: #fff;
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    line-height: 2rem;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Sticky first 2 columns (row-label + pct) ─────────────────────────── */

  /* Title row "Your Payslip Wage Summary" — spans full table, keep it pinned */
  #tblresults thead tr:first-child th[colspan] {
    position: sticky;
    left: 0;
    z-index: 3;
  }

  /* Column 1: row-label */
  #tblresults th:first-child,
  #tblresults td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  /* Column 2: pct */
  #tblresults th:nth-child(2),
  #tblresults td:nth-child(2) {
    position: sticky;
    left: 160px;
    width: 56px;
    min-width: 56px;
    z-index: 2;
  }

  /* Sticky column backgrounds — default */
  #tblresults tbody tr td:first-child { background: #f8f8f8; }
  #tblresults tbody tr:nth-child(even) td:first-child { background: #fff0c1; }
  #tblresults tbody tr td:nth-child(2) { background: #f0f0f0; }
  #tblresults tbody tr:nth-child(even) td:nth-child(2) { background: #ffe9a0; }
  #tblresults thead th:first-child { background: #343a40; z-index: 3; }
  #tblresults thead th:nth-child(2) { background: #343a40; z-index: 3; }

  /* Row-specific sticky backgrounds */
  #tblresults tbody .row-net-wage td:nth-child(1) { background: #ffcc00 !important; }
  #tblresults tbody .row-net-wage td:nth-child(2) { background: #f5b800 !important; }
  #tblresults tbody tr.bg-red td:nth-child(1) { background: #e55e21 !important; color: #fff !important; }
  #tblresults tbody tr.bg-red td:nth-child(2) { background: #d54e21 !important; color: #fff !important; }
  #tblresults tbody tr.bg-success td:nth-child(1) { background: #28a745 !important; color: #fff !important; }
  #tblresults tbody tr.bg-success td:nth-child(2) { background: #218838 !important; color: #fff !important; }
  #tblresults tbody tr.bg-tax-region td:nth-child(1) { background: #444499 !important; color: #fff !important; }
  #tblresults tbody tr.bg-tax-region td:nth-child(2) { background: #3a3a88 !important; color: #fff !important; }
  #tblresults tbody tr.bg-student-loan td:nth-child(1) { background: #3399cc !important; color: #fff !important; }
  #tblresults tbody tr.bg-student-loan td:nth-child(2) { background: #2d87b5 !important; color: #fff !important; }
  #tblresults tbody tr.bg-pension td:nth-child(1) { background: #333 !important; color: #fff !important; }
  #tblresults tbody tr.bg-pension td:nth-child(2) { background: #2a2a2a !important; color: #fff !important; }
  #tblresults tbody tr.row-pension-you td:nth-child(1) { background: #333 !important; color: #fff !important; }
  #tblresults tbody tr.row-pension-you td:nth-child(2) { background: #2a2a2a !important; color: #fff !important; }
  #tblresults tbody tr.row-pension-hmrc td:nth-child(1) { background: #333 !important; color: #fff !important; }
  #tblresults tbody tr.row-pension-hmrc td:nth-child(2) { background: #2a2a2a !important; color: #fff !important; }
  #tblresults tbody tr.tax-bands td:nth-child(1) { background: #f5d0bf !important; }
  #tblresults tbody tr.tax-bands td:nth-child(2) { background: #edc0ab !important; }
  #tblresults tbody tr.row-allowable-deductions td:nth-child(1) { background: #b8f4be !important; }
  #tblresults tbody tr.row-allowable-deductions td:nth-child(2) { background: #a0e8a8 !important; }

  /* ── Scroll arrow buttons ─────────────────────────────────────────────── */

  /* Two arrow buttons, absolutely on the results-container top-right */
  .tbl-scroll-arrows {
    display: flex;
    flex-direction: row;
    gap: 4px;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    pointer-events: none;
  }

  .tbl-scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #d2165c;
    font-size: 14px;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background 0.15s, border-color 0.15s;
    margin-left: 4px;
  }
  .tbl-scroll-arrow:hover {
    border-color: #d2165c;
    background: #fff5f8;
  }
  .tbl-scroll-arrow:active {
    background: #ffe0eb;
  }
  .tbl-scroll-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .charts-grid { grid-template-columns: 1fr; }
  .fun-facts-strip { grid-template-columns: 1fr; }
  .chart-wrap-donut { height: 260px; }
}