/* ==========================================================================
   Quotes found - the reading list above the quotation cards.
   ========================================================================== */

/* While the list is on screen the sticky menu lifts away, and it slides back
   once the list has scrolled past. */
header {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

header.is-out-of-view {
  transform: translateY(-100%);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}

.quote-list {
  margin: 0 0 1.1rem;
  padding: 0.95rem 1rem 1.05rem;
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(1,57,71, 0.07);
}

.quote-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eef2f2;
}

.quote-list-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--primary-navy, #013947);
  font-size: 0.98rem;
  font-weight: 800;
}

.quote-list-head h3 i { color: #016f6d; font-size: 0.9em; }

.quote-list-head p {
  margin: 0;
  color: #5b6b62;
  font-size: 0.78rem;
}

/* Three compact cards to a row on a laptop, two on a tablet and on a phone. */
.quote-list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* Two to a row: the names, the limits and the actions each need room, and a
     third column squeezed them until the text ran past the card. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.quote-list-row {
  --quote-accent: #016f6d;
  --quote-accent-tint: rgba(1,111,109, 0.06);
  /* The quote's own details in the left column, the rule, the limits in the
     right one, and the two actions across the foot. */
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.05fr);
  grid-template-areas:
    "id rule benefits"
    "ipf ipf ipf"
    "actions actions actions";
  column-gap: 0.75rem;
  row-gap: 0.55rem;
  padding: 0.7rem 0.8rem 0.75rem;
  border: 1px solid #e8eeee;
  border-top: 3px solid var(--quote-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--quote-accent-tint), #ffffff 42%);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quote-list-row:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(1,57,71, 0.10); }

.quote-list-row.is-active {
  box-shadow: 0 0 0 2px var(--quote-accent);
  border-color: var(--quote-accent);
}

.quote-list-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.quote-list-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ecec;
}

.quote-list-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quote-list-logo-text {
  background: var(--quote-accent);
  border-color: var(--quote-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.quote-list-num {
  /* The quote's number, sitting as a tab on the card's top edge so the
     insurer's name has the rest of the line to itself. */
  position: absolute;
  top: -11px;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--quote-accent);
  color: var(--quote-accent);
  font-size: 0.64rem;
  font-weight: 800;
}

/* Left column: insurer, plan, members, yearly price, one under the other. */
.quote-list-id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.quote-list-insurer {
  flex: 1 1 auto;
  min-width: 0;
  color: #013947;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  /* One line, scaled down by the fit pass where it would otherwise fold; the
     ellipsis is only ever reached if a name cannot fit at any readable size. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-list-plan,
.quote-list-members {
  display: block;
  min-width: 0;
  color: #4d6055;
  font-size: 0.75rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-list-members { color: #71827a; font-size: 0.72rem; }

/* The network the plan is sold on, immediately under the plan's name: the first
   thing a client checks once they know which plan they are reading. Green where
   the plan takes the whole panel, amber where it withholds providers. */
.quote-list-panel-note {
  display: block;
  min-width: 0;
  margin-top: 0.02rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-list-panel-note.is-full { color: #016f6d; }

.quote-list-panel-note.is-limited { color: #7c2d12; }

.quote-list-price {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-top: 0.3rem;
}

.quote-list-price small {
  color: #7b8b82;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-list-price strong {
  color: var(--quote-accent);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

/* The line that parts the two halves of the card. */
.quote-list-rule {
  grid-area: rule;
  align-self: stretch;
  justify-self: center;
  width: 1px;
  background: #e4ebeb;
}

/* Right column: the five limits, label in the left cell, figure in the right,
   so the figures line up down the card. */
.quote-list-benefits {
  grid-area: benefits;
  /* How much the five limit lines are scaled down to stay on one line, set by
     the fit pass in js/quote-list.js and 1 wherever the width allows. */
  --ql-fit: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 0.45rem;
  row-gap: 0.14rem;
  min-width: 0;
}

/* The co-payment answer, directly under the five limits: red where the client
   pays one at the hospital, green where it has been taken off, grey where the
   plan carries none at all. The pill is an outline: the colour sits in the
   border and the words, never in a fill, so a card of quotes stays light. */
.quote-list-copay {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.18rem;
  padding: 0.12rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: calc(0.66rem * var(--ql-fit, 1));
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.quote-list-copay.is-applies {
  /* A co-payment is information, not a fault: brownish red rather than the
     signal red a validation message wears. */
  border-color: #d9a89e;
  color: #9b3528;
}

.quote-list-copay.is-waived {
  border-color: #86c4c7;
  color: #016f6d;
}

.quote-list-copay.is-none {
  border-color: #cbd5e1;
  color: #475569;
}

/* The cost of taking the co-payment off, directly under the answer: a plain
   line rather than a second pill, so the two read as one answer and its
   price. Green on every plan - it is the way out of the co-payment, not
   another charge - and it wraps rather than running past the card on a narrow
   phone. */
/* ===== the co-payment offer and its two answers =====
   The price of buying the co-payment off sits in a pill, with Yes and No
   beside it: the reader decides from the list, and the quotation is re-priced
   the moment they answer. */
.quote-list-copay-offer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.2rem;
}

.quote-list-copay-offer-pill {
  padding: 0.16rem 0.55rem;
  border: 1px solid #86c4c7;
  border-radius: 999px;
  background: #f4fafa;
  color: #016f6d;
  font-size: calc(0.66rem * var(--ql-fit, 1));
  font-weight: 800;
  line-height: 1.35;
  /* The pill answers the question as well as stating it: a tap turns the
     co-payment off, the next tap puts it back. */
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.quote-list-copay-offer-pill:hover {
  box-shadow: 0 2px 8px rgba(1,57,71, 0.14);
}

.quote-list-copay-offer-pill:focus-visible {
  outline: 2px solid #016f6d;
  outline-offset: 2px;
}

.quote-list-copay-offer-pill:active {
  transform: translateY(1px);
}

/* The answer colours the offer. No leaves the co-payment standing, so the pill
   wears the co-payment's own dark red; Yes buys it off, and the pill wears the
   green the waived state wears everywhere else. The chosen word follows the
   pill, so the row can be read by colour alone. */
.quote-list-copay-offer:not(.is-waived) .quote-list-copay-offer-pill {
  border-color: #d9a89e;
  background: #fbf2ef;
  color: #9b3528;
}

.quote-list-copay-offer:not(.is-waived) .quote-list-copay-radio input[value="no"] {
  accent-color: #9b3528;
}

.quote-list-copay-offer:not(.is-waived) .quote-list-copay-radio:has(input[value="no"]:checked) {
  color: #9b3528;
  font-weight: 800;
}

.quote-list-copay-offer.is-waived .quote-list-copay-radio:has(input[value="yes"]:checked) {
  color: #016f6d;
  font-weight: 800;
}

.quote-list-copay-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.quote-list-copay-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: #475569;
  font-size: calc(0.66rem * var(--ql-fit, 1));
  font-weight: 700;
  cursor: pointer;
}

.quote-list-copay-radio input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #016f6d;
  cursor: pointer;
}

.quote-list-copay-waive {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.1rem;
  color: #016f6d;
  font-size: calc(0.66rem * var(--ql-fit, 1));
  font-weight: 700;
  line-height: 1.35;
}

.quote-list-copay-waive.is-waived {
  color: #016f6d;
}

/* The network a plan is sold on, on the card: a full network reads as a
   positive answer, a withheld one as the caution it is. */
.provider-card .excluded-hospitals-main-container .excluded-hospitals-list {
  font-weight: 800;
}

.provider-card .excluded-hospitals-main-container .excluded-hospitals-list.is-full-network {
  color: #016f6d;
}

.provider-card .excluded-hospitals-main-container .excluded-hospitals-list.is-limited-network {
  color: #7c2d12;
}

.quote-list-benefit-label {
  color: var(--quote-accent);
  font-style: normal;
  font-size: calc(0.63rem * var(--ql-fit, 1));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}

.quote-list-benefit-value {
  display: flex;
  /* The figure and the way it is counted stay on one line; the fit pass shrinks
     the type rather than letting "per family" drop to a second line. */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.28rem;
  min-width: 0;
  color: #1f3031;
  font-size: calc(0.72rem * var(--ql-fit, 1));
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.quote-list-benefit-figure { flex: 0 0 auto; }

.quote-list-benefit-value.is-off { color: #b3c0b8; font-weight: 600; }

/* The narrowest phones, or a reader whose own text size is turned well up, can
   leave no room at all for "KSh 3.5M per family" on one line. There the line
   takes a second row instead of running past the card's edge. */
.quote-list-benefits.is-tight .quote-list-benefit-value { flex-wrap: wrap; }

.quote-list-benefit-scope {
  flex: 0 0 auto;
  color: #7b8b82;
  font-size: calc(0.62rem * var(--ql-fit, 1));
  font-weight: 600;
  white-space: nowrap;
}

.quote-list-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.55rem;
  border-top: 1px solid #eef2f2;
  white-space: nowrap;
}

/* ===== the instalment option =====
   A quiet line across the card that opens what the NCBA IPF financing costs on
   this quote's own premium - the interest and the total repayable. Closed, it
   costs one line. */
.quote-list-ipf {
  grid-area: ipf;
  padding-top: 0.5rem;
  border-top: 1px dashed #e2eaea;
  font-size: 0.72rem;
}

.quote-list-ipf > summary {
  display: flex;
  align-items: center;
  /* One line where the card is wide enough - the words held left, the figure
     carried to the far right - and the figure drops under the words where it
     is not: "NCBA IPF 4 Monthly Instalment:" then "KSh 19,753". */
  flex-wrap: wrap;
  gap: 0.35rem;
  color: #01545f;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: normal;
}

/* The icon and the words travel together as one item, so the figure can be
   pushed to the far right of a wide line without dragging the label with it. */
.quote-list-ipf > summary .quote-list-ipf-label,
.quote-list-ipf.is-always-open .quote-list-ipf-title .quote-list-ipf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* The instalment option is always open, so its heading is a plain line rather
   than a summary to unfold: no chevron, no pointer. */
.quote-list-ipf.is-always-open .quote-list-ipf-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #01545f;
  font-weight: 700;
}

.quote-list-ipf > summary::-webkit-details-marker { display: none; }

/* The monthly instalment beside the closed line: carried to the far right of
   the line while the card has the width for it, and dropped under the words -
   still right-aligned - where it does not. The card's own green, so the figure
   reads as part of the sentence rather than as grey fine print. */
.quote-list-ipf .quote-list-ipf-amount {
  margin-left: auto;
  padding-left: 0.75rem;
  color: #016f6d;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* NCBA's mark on the instalment line, kept to the size of the small type it
   sits beside. */
.quote-list-ipf > summary .pay-method-mark {
  --pay-mark-h: 18px;
  padding: 2px 5px;
  border-radius: 6px;
}

.quote-list-ipf > summary .pay-bank-logo { max-width: 40px; }

.quote-list-ipf > summary::after {
  content: "\25BE";
  font-size: 0.62rem;
  line-height: 1;
  transition: transform 0.16s ease;
}

.quote-list-ipf[open] > summary::after { transform: rotate(180deg); }

/* The two instalment figures, listed plainly: one row each under the opened
   summary, label on the left and figure on the right, with no pill around
   them. */
/* A closed row shows its line and nothing else: a display rule on the body
   would otherwise beat the [open] attribute's own hiding. */
.quote-list-ipf:not([open]) .quote-list-ipf-lines {
  display: none;
}

.quote-list-ipf-lines {
  display: grid;
  gap: 0.15rem;
  margin: 0.5rem 0 0;
}

.quote-list-ipf-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.quote-list-ipf-lines dt {
  color: #016f6d;
  font-weight: 600;
}

.quote-list-ipf-lines dd {
  margin: 0;
  color: #016f6d;
  font-weight: 800;
  white-space: nowrap;
}

/* The four payments lead in green; the interest and the total are the small
   print beside the offer, in the list's muted grey. */
.quote-list-ipf-lines > div:not(:first-child) dt,
.quote-list-ipf-lines > div:not(:first-child) dd {
  color: #64748b;
}

.quote-list-apply {
  flex: 1 1 auto;
  padding: 0.44rem 0.7rem;
  border: 1px solid var(--quote-accent);
  border-radius: 999px;
  background: var(--quote-accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.quote-list-apply:hover { filter: brightness(0.9); transform: translateY(-1px); }

.quote-list-details {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.44rem 0.6rem;
  border: 1px solid #cfdbdc;
  border-radius: 999px;
  background: #fff;
  color: var(--quote-accent);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.quote-list-details:hover { background: var(--quote-accent-tint); border-color: var(--quote-accent); }

@media (max-width: 1199px) {
  .quote-list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .quote-list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body[data-mobile="true"] .quote-list { padding: 0.8rem 0.75rem 0.9rem; border-radius: 14px; }
body[data-mobile="true"] .quote-list-head { flex-direction: column; gap: 0.25rem; }
body[data-mobile="true"] .quote-list-head p { font-size: 0.72rem; }
body[data-mobile="true"] .quote-list-row {
  padding: 0.6rem 0.65rem 0.7rem;
  /* A phone has little width to spare, so the limits take slightly more of it
     than the quote's own details and the gap between them narrows. */
  grid-template-columns: minmax(0, 0.95fr) 1px minmax(0, 1.05fr);
  column-gap: 0.5rem;
}
body[data-mobile="true"] .quote-list-benefits { column-gap: 0.35rem; }
/* A smaller mark on a phone gives the insurer's name more of the line, so it
   holds at one line far longer. */
body[data-mobile="true"] .quote-list-logo { width: 26px; height: 26px; border-radius: 7px; }
body[data-mobile="true"] .quote-list-top { gap: 0.4rem; }
body[data-mobile="true"] .quote-list-apply,
body[data-mobile="true"] .quote-list-details { padding: 0.42rem 0.6rem; font-size: 0.72rem; }

/* ===== two quotes to a row on a phone =====
   Half a phone's width is not enough for the side-by-side card — the limits
   column would be squeezed to a few characters — so each card turns into a
   column of its own: whose quote it is, then the limits, then the buttons. The
   vertical rule that parted the two halves belongs to the side-by-side layout
   and goes, with a hairline under the quote's own block doing the parting. */
@media (max-width: 1024px) {
  .quote-list-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .quote-list-row,
  body[data-mobile="true"] .quote-list-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "id"
      "benefits"
      "ipf"
      "actions";
    column-gap: 0;
    row-gap: 0.45rem;
    padding: 0.6rem 0.6rem 0.65rem;
  }
  .quote-list-rule { display: none; }
  .quote-list-id {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eef2f2;
  }
  .quote-list-benefits { column-gap: 0.35rem; }
  .quote-list-actions { flex-wrap: wrap; gap: 0.35rem; }
  body[data-mobile="true"] .quote-list { padding: 0.7rem 0.6rem 0.8rem; }
}