/* The quotation comparison table's last working row: each insurer's own
   payment details as a card in that insurer's colours, behind a thick border,
   so the column a client picks is the column they can pay from. The
   co-payment row above it answers "applies" or "waived" as a flag rather than
   a paragraph. */

#quoteComparisonTable .comparison-payment-row > th {
  vertical-align: top;
}

/* The row's own background wins over the table's zebra striping. */
#quoteComparisonTable tbody tr.comparison-payment-row > td.comparison-pay-cell {
  /* Eight columns share the table, so each payment card is as narrow as its
     lines need rather than as wide as the card in the earlier four-column
     sheet. */
  min-width: 168px;
  background: #fff !important;
  vertical-align: top;
}

.comparison-pay-card {
  --pay-accent: #016f6d;
  --pay-tint: #f0f7f7;
  --pay-soft: #e3eeef;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.55rem 0.6rem;
  border: 3px solid var(--pay-accent);
  border-radius: 12px;
  background: var(--pay-tint);
  font-size: 0.68rem;
  line-height: 1.35;
  color: #334155;
}

.comparison-pay-head {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--pay-accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-pay-card .pay-card-line {
  display: block;
  word-break: break-word;
}

.comparison-pay-card .pay-card-tag {
  display: inline-block;
  min-width: 52px;
  margin-right: 0.32rem;
  color: var(--pay-accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.comparison-pay-card strong {
  color: #0f172a;
  font-weight: 800;
}

.comparison-pay-card .pay-card-more {
  margin-top: 0.1rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--pay-soft);
  color: var(--pay-accent);
  font-weight: 700;
}

/* The co-payment answer: written as ordinary text rather than in a pill, so the
   row reads like every other row of the table. The colour carries the meaning -
   brownish red where the client pays a co-payment, a cost rather than a fault,
   green where there is nothing to pay at the hospital. */
#quoteComparisonTable .copay-row td {
  white-space: normal;
}

#quoteComparisonTable .copay-flag {
  /* A block rather than a flex row: the co-payment scale writes each tier on its
     own line, and a flex container would set them side by side instead. No
     padding, border or radius - there is no pill to sit in. */
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.68rem;
  /* The scale is read for its amounts rather than for emphasis, so it is set in
     the table's ordinary weight; the colour each line wears says what it means. */
  font-weight: 400;
  letter-spacing: 0.01em;
  /* A published scale names every amount and tier, so the flag wraps rather
     than running out of the column. */
  white-space: normal;
  line-height: 1.4;
  text-align: left;
}

#quoteComparisonTable .copay-flag.is-applies {
  /* A co-payment says what the plan costs at the hospital, it is not a warning. */
  color: #9b3528;
}

#quoteComparisonTable .copay-flag.is-waived {
  color: #016f6d;
}

/* "Copay: None" says the same thing as a waived co-payment - the client pays
   nothing at the hospital - so it reads in the same green rather than as a grey
   footnote. */
#quoteComparisonTable .copay-flag.is-none {
  color: #016f6d;
}

/* The offer to buy the co-payment off: green on every column, whatever the
   tiers above it cost. It is the way out of the co-payment, so it reads as the
   same good news wherever it appears. It is set in the same weight as the tiers
   above it - the green is what marks it out. */
#quoteComparisonTable .copay-flag .copay-offer {
  color: #016f6d;
  font-weight: 400;
}

/* The note that releases the rest of the panel - "Other Hospitals No Copay" -
   names an absence rather than a charge, so it prints in plain ink against the
   red the tier figures above it wear. */
#quoteComparisonTable .copay-flag .copay-rest {
  color: #111827;
}

/* A major benefit's whole row is bold - the feature name and every figure
   beside it - so the row reads as one block rather than a label with values. */
#quoteComparisonTable tr.excluded-row > th,
/* The network a plan is sold on: whether it takes the whole of the insurer's
   panel or withholds providers, with the panel a tap away. The row itself reads
   in the sheet's own colour and at the weight a limitation deserves; the answer
   inside it carries the meaning. */
#quoteComparisonTable tr.excluded-row > td {
  color: #013947 !important;
  font-weight: 800 !important;
}

#quoteComparisonTable .excluded-hospitals-cell {
  display: block;
  white-space: normal;
}
/* The Provider Network row is the tallest single-answer row on the sheet: every
   column carries the panel button under its answer, so the row stands about
   four times as tall as the one-line label beside it. Read from the top of the
   cell that label floated above the row it belongs to - the answers it names
   sat well below it - so this row centres instead, and the label reads across
   from the answers rather than as a heading for the benefit row above. */
#quoteComparisonTable tbody tr.excluded-row > th,
#quoteComparisonTable tbody tr.excluded-row > td {
  vertical-align: middle !important;
}

#quoteComparisonTable .excluded-hospitals-cell.is-full-network {
  color: #016f6d !important;
}

#quoteComparisonTable .excluded-hospitals-cell.is-limited-network {
  color: #7c2d12 !important;
}

#quoteComparisonTable .comparison-network-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding: 0.16rem 0.55rem;
  border: 1.5px solid #013947;
  border-radius: 999px;
  background: #fff;
  color: #013947;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

#quoteComparisonTable .comparison-network-btn:hover {
  background: #f0f7f7;
}

#quoteComparisonTable tr.major-row > th,
#quoteComparisonTable tr.major-row > td {
  font-weight: 800 !important;
  color: #013330 !important;
}

/* The NCBA instalment row: bold, so the monthly figure reads as its own line
   rather than another benefit. Each column's figure is written in that
   insurer's own colour - the cell carries it inline, the way the annual
   premium does - so the row is read in the hand of the insurer that quoted it. */
#quoteComparisonTable tbody th {
  /* A row label that names its own second line keeps that break. */
  white-space: pre-line;
}

/* The members row is written one member to a line, so the cell keeps them. */
#quoteComparisonTable tbody tr.composition-row > td {
  white-space: pre-line;
}

/* The headcount under the "Members / Age" label: the row's own note, on its
   own line and a step smaller than the label, so the columns below carry the
   members and the count is stated once. */
#quoteComparisonTable th .comparison-feature-note {
  display: block;
  margin-top: 0.15rem;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The payment row's note is a list rather than a count - what to send with the
   premium - so it wraps inside the first column instead of running across the
   table. The breaks between its lines are written into the note itself. */
#quoteComparisonTable tr.comparison-payment-row th .comparison-feature-note {
  white-space: normal;
  line-height: 1.35;
}

#quoteComparisonTable tbody tr.instalment-row > th,
#quoteComparisonTable tbody tr.instalment-row > td {
  /* The house's own dark green, the ink the benefit rows are set in; the wash
     under it is what tells the row apart. */
  color: #013330 !important;
  font-weight: 800 !important;
  background: #fdf7ec !important;
}

/* The line that says how many further quotes are on the cards above. */
#quoteComparisonTable tr.comparison-more-row > th,
#quoteComparisonTable tr.comparison-more-row > td {
  padding: 0.7rem 0.75rem;
  background: #f8fafc !important;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
}

@media (max-width: 1024px) {
  #quoteComparisonTable tbody tr.comparison-payment-row > td.comparison-pay-cell {
    min-width: 200px;
  }

  .comparison-pay-card {
    font-size: 0.66rem;
    padding: 0.5rem 0.52rem;
  }
}

/* The agency's own line under the comparison: who prepared the quote and how
   to reach them. */
.quote-table-comparison .comparison-basis-legend {
  margin: 0.7rem 0 0;
  text-align: center;
  color: #475569;
  font-size: 0.7rem;
  line-height: 1.5;
}

.quote-table-comparison .comparison-basis-legend strong {
  color: #013947;
  font-weight: 800;
}

.quote-table-comparison .comparison-contact-footer {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
}

.quote-table-comparison .comparison-contact-footer a {
  color: #016f6d;
  font-weight: 700;
  text-decoration: none;
}

.quote-table-comparison .comparison-contact-footer a:hover {
  text-decoration: underline;
}

/* The button beside "Detailed Quotes": folds the quote cards away so the
   comparison table is the next thing on the screen, and brings them back. */
.quote-detail-heading h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quote-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.38rem 0.85rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #013947;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.quote-detail-toggle:hover {
  border-color: #013947;
  background: #f0f7f7;
  box-shadow: 0 4px 12px rgba(1,57,71, 0.12);
}

.quote-detail-toggle:focus-visible {
  outline: 3px solid rgba(1,57,71, 0.28);
  outline-offset: 2px;
}

.quote-detail-heading.is-collapsed p {
  color: #94a3b8;
}

/* The table keeps clear of the sticky header when the button scrolls to it. */
#quoteTableComparison {
  scroll-margin-top: 96px;
}

/* A phone reads the comparison table too, and reads it straight after the
   at-a-glance list: the table the engine fills decides when it appears. */
@media (max-width: 1024px) {
  #resultsContainer.visible #quoteTableComparison {
    display: block !important;
    margin-top: 1rem;
  }

  /* One detailed quote to a view on a phone, so the arrows step through them
     one at a time rather than two at once. */
  #cardsContainer.quote-carousel-track > .provider-card {
    flex: 0 0 100% !important;
    scroll-snap-align: start;
  }
}

/* ===== the comparison's own controls =====
   Beside the heading on every screen: the sheet one tap away, then the fold that
   puts the detailed quotes next. The heading is a row, so the buttons hold their
   place while the wording wraps around them. */
.quote-table-comparison .quote-table-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.quote-table-comparison .quote-table-heading > div {
  min-width: 0;
}

.quote-table-comparison .quote-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.quote-table-comparison .quote-table-download,
.quote-table-comparison .quote-table-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid #013947;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.quote-table-comparison .quote-table-download {
  background: #013947;
  color: #fff;
}

.quote-table-comparison .quote-table-download:hover {
  background: #1b484a;
}

.quote-table-comparison .quote-table-toggle {
  background: #fff;
  color: #013947;
}

.quote-table-comparison .quote-table-toggle:hover {
  background: #f0f7f7;
}

/* Folded away: the sheet, its legend and the agency's line all go, leaving the
   heading - and with it the button that brings them back. */
#quoteTableComparison.is-table-folded .quote-table-scroll,
#quoteTableComparison.is-table-folded .comparison-basis-legend,
#quoteTableComparison.is-table-folded .comparison-contact-footer {
  display: none !important;
}

@media (max-width: 1024px) {
  .quote-detail-toggle {
    margin-left: 0;
    padding: 0.34rem 0.7rem;
    font-size: 0.7rem;
  }

  #quoteTableComparison {
    scroll-margin-top: 72px;
  }
}

/* ===== The comparison sheet's feature column =====
   The column that names each feature carries a light wash of the agency green,
   about a tenth of the brand colour, so the reader has a column to run down
   while the quotes themselves stay on white. Where the sheet already carried
   green - the premium band, the zebra stripe, the header cell - the wash
   deepens a step, so the tint reads as one column rather than as patches. */

#quoteComparisonTable tbody th,
#quoteComparisonTable tbody tr.comparison-more-row > th {
  background: #e7f1f1 !important;
}

/* The stripe the even rows wear would leave the label column unstriped; here it
   deepens the same wash instead. */
#quoteComparisonTable tbody tr:nth-child(even) th {
  background: #dfeced !important;
}

/* A row the pointer is over lights up whole; the label column stays a step
   greener than the quote cells beside it. */
#quoteComparisonTable tbody tr:hover th {
  background: #d5e7e8 !important;
}

/* The premium band is the sheet's greenest row, so its label cell is the
   greenest cell in the feature column. */
#quoteComparisonTable tbody tr.premium-row > th {
  background: #cde2e3 !important;
}

/* The annual premium is the figure a client looks for first, so it is set bold
   in every column - and each column wears its own insurer's colour, put on the
   cell itself by the engine. */
#quoteComparisonTable tbody tr.premium-row > td {
  font-weight: 800 !important;
}

/* The major benefit rows and the two rows read with them go a shade deeper than
   the plain labels. */
#quoteComparisonTable tbody tr.major-row > th {
  background: #d9e9ea !important;
}

#quoteComparisonTable tbody tr.excluded-row > th,
#quoteComparisonTable tbody tr.composition-row > th {
  background: #dbe9ea !important;
}

/* The NCBA instalment row keeps its own wash: the row is a payment note, and
   the tint says so without colouring the figures. */
#quoteComparisonTable tbody tr.instalment-row > th {
  background: #fdf7ec !important;
}

/* Green the sheet already carried deepens: the zebra stripe, and the premium
   band's own cells, which are the one row filled green across every column. */
#quoteComparisonTable tbody tr:nth-child(even) td {
  background: #f1f8f8 !important;
}

/* The instalment row's own wash, which the stripe must not paint over: a breath
   of the brand gold across the quotes - from the first column's Q1 to the last
   quote - so the row reads as a note about money. */
#quoteComparisonTable tbody tr.instalment-row > td {
  background: #fdfbf5 !important;
}

#quoteComparisonTable tbody tr.premium-row td,
#quoteComparisonTable tbody tr.premium-row:nth-child(even) td {
  background: linear-gradient(90deg, #d5e8e9 0%, #e9f5f4 100%) !important;
}

/* The header cell over the feature column is the deepest green on the sheet. */
#quoteComparisonTable thead th.comparison-feature-col {
  background: linear-gradient(180deg, #174649 0%, #0e3436 100%) !important;
}

/* ===== marking the cover the client wants =====
   One radio to a column, in the row above the actions. The pill fills green once
   the column is chosen, and the column itself is tinted top to bottom, so the
   screen says which quote the download belongs to. */
.comparison-choice-cell{ text-align:center!important; }
.comparison-choice{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .55rem;
  border:1.5px solid #cfdfe0;
  border-radius:999px;
  background:#fff;
  color:#4b5563;
  font-size:.72rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  cursor:pointer;
}
.comparison-choice input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:#016f6d;
  cursor:pointer;
}
.comparison-choice .comparison-choice-on{ display:none; }
.comparison-choice:has(input:checked){
  border-color:#0b393b;
  background:#0b393b;
  color:#fff;
}
.comparison-choice:has(input:checked) .comparison-choice-off{ display:none; }
.comparison-choice:has(input:checked) .comparison-choice-on{ display:inline; }
.comparison-choice:has(input:checked) input{ accent-color:#fff; }
.comparison-preferred-column{ background-color:#e7f3f4!important; }

/* ===== the insurer's own mark on the column head =====
   Each column opens with the insurer's logo over its name, so a table of six
   quotes is told apart at a glance rather than by reading six names. The mark
   sits on a white plate - several of them are supplied on a pale square - and
   the plan's name runs under the pair. */
#quoteComparisonTable thead th .comparison-head{
  display:flex;
  align-items:center;
  gap:0.35rem;
  min-width:0;
}
#quoteComparisonTable thead th .comparison-head-logo{
  flex:0 0 auto;
  height:20px;
  width:auto;
  max-width:64px;
  object-fit:contain;
  padding:2px 4px;
  border-radius:5px;
  background:#fff;
}
#quoteComparisonTable thead th .comparison-head-name{
  min-width:0;
}
#quoteComparisonTable thead th .comparison-head-plan{
  display:block;
  margin-top:0.15rem;
  font-weight:600;
  opacity:0.92;
}

/* =====================================================================
   The note under a label in the first column

   It was held on one line, which made the column as wide as the longest
   sentence in the table - the NCBA instalment sentence stretched it to 625px
   and squeezed the quotes beside it. The notes wrap inside their column
   instead, the way they do on the sheet, and the rows keep their own
   top-to-bottom reading: every cell starts at the same line as its label.
   ===================================================================== */
#quoteComparisonTable .comparison-feature-note {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The column the notes stand in is given room for them: at the table's own
   145px the instalment sentence wrapped onto seven lines and set the height of
   the whole row, where 200px takes it in three. */
#quoteComparisonTable tbody th:has(.comparison-feature-note) {
  min-width: 240px;
}