/* ===== Children Only: keep the members row inside the quote card =====
   The children-only row kept a full-width box while also carrying the left
   indent used by the other member rows, so it ran past the right edge of the
   quote card (and pushed the page sideways). Letting the width shrink into the
   remaining space keeps the row - and its selector - inside the engine's
   boundaries, with no horizontal overflow. */
#quote-form #individualFamilyDetails .family-overview.children-only-layout{
  width:auto!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#quote-form #individualFamilyDetails .family-overview.children-only-layout .family-item,
#quote-form #individualFamilyDetails .family-overview.children-only-layout .children-count-item,
#quote-form #individualFamilyDetails .family-overview.children-only-layout #childAgesContainer{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#quote-form #individualFamilyDetails .family-overview.children-only-layout select{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* ===== Members counter: always visible in the quote heading — rests as a soft
   "Add Members" invitation, then becomes a green chip once members are counted ===== */
#quote-form .quote-header-badge-host{
  display:inline-flex;
  align-items:center;
}
#quote-form .quote-header-badge-host:not(.is-counting){
  margin-top:0!important;
}
#quote-form .group-families-live-total{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0.16rem 0.6rem!important;
  border:1px solid rgba(27,94,32,.22)!important;
  border-radius:999px!important;
  background:#f3f9f4!important;
  color:#1b5e20!important;
  font-size:.7rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
#quote-form .group-families-live-total.is-counting{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0.16rem 0.6rem!important;
  border:1px solid rgba(27,94,32,.26)!important;
  border-radius:999px!important;
  background:#e8f5e9!important;
  color:#1b5e20!important;
  font-size:.7rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}

/* ===== cover-type-selected-green =====
   Cover Type selection reads as deep green with a soft light-green fade
   toward the right edge, instead of the flat navy fill. */
#quote-form .cover-type-toggle label:has(input:checked){
  background:linear-gradient(90deg,#0b3b27 0%,#145c3a 58%,#1a7048 100%)!important;
  border-color:#0b3b27!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(11,59,39,.20)!important;
}
#quote-form .cover-type-toggle label:hover{
  border-color:rgba(11,59,39,.35)!important;
}

/* Group "Average Age" choices share the exact same selected treatment so every
   chosen chip in the engine reads as one green language. */
#quote-form #groupComposition .group-age-options input:checked + span{
  background:linear-gradient(90deg,#0b3b27 0%,#145c3a 58%,#1a7048 100%)!important;
  border-color:#0b3b27!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* ===== reset-quiet-outline =====
   "Reset Selections" steps back to a light outlined button on desktop/tablet so
   the gold "Get My Quotes" action is the only solid, high-emphasis button. The
   joined mobile action pill keeps its own treatment below 700px. */
@media (min-width:701px){
  #quote-form .actions-quote #resetBtn,
  #quote-form #resetBtn,
  button#resetBtn{
    background:#fff!important;
    border:1.5px solid rgba(27,94,32,.45)!important;
    color:#1b5e20!important;
    box-shadow:none!important;
  }
  #quote-form .actions-quote #resetBtn:hover,
  #quote-form #resetBtn:hover,
  button#resetBtn:hover{
    background:#eef7f0!important;
    border-color:#1b5e20!important;
    color:#14532d!important;
  }
}

/* ===== optional-locked-grey-fill =====
   Optional covers stay visibly greyed while the member step is still open
   (e.g. Children Only before children are chosen). Inpatient keeps its own
   white treatment. */
#quote-form #outpatientLimit.optional-benefit-disabled:disabled,
#quote-form #dentalLimit.optional-benefit-disabled:disabled,
#quote-form #opticalLimit.optional-benefit-disabled:disabled,
#quote-form #maternityLimit.optional-benefit-disabled:disabled,
#quote-form #outpatientScopeSelect.optional-benefit-disabled:disabled{
  background:#f1f3f5!important;
  color:#9aa3ad!important;
  border-color:#d6dbe1!important;
  box-shadow:none!important;
}

/* The Inpatient Limit and both scope selectors grey out too while they are
   waiting on the previous step. */
#quote-form #inpatientLimit:disabled,
#quote-form .inpatient-card #inpatientLimit:disabled,
#quote-form .inpatient-card.inpatient-limit-pending #inpatientLimit:disabled,
#quote-form #inpatientScopeSelect:disabled,
#quote-form #inpatientScopeGroup > .scope-select:disabled,
#quote-form #outpatientScopeSelect:disabled,
#quote-form #outpatientScopeGroup > .scope-select:disabled{
  background:#f1f3f5!important;
  color:#9aa3ad!important;
  border-color:#d6dbe1!important;
  box-shadow:none!important;
}

/* While the Inpatient Limit is still waiting, its scope selector follows the
   same grey so the pair reads as one locked step. */
#quote-form .inpatient-card:has(#inpatientLimit:disabled) #inpatientScopeSelect{
  background:#f1f3f5!important;
  color:#9aa3ad!important;
  border-color:#d6dbe1!important;
  box-shadow:none!important;
}

/* ===== quote-journey-strip =====
   The line under the quote buttons shows the whole journey: quote, compare,
   apply, pay. The first beat is tinted green because it is the step the
   customer is on. */
.quote-cta-note.quote-journey{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.3rem .5rem;
  margin-top:.6rem;
  font-style:normal;
  font-size:.73rem;
  line-height:1.3;
  color:#64748b;
}
.quote-cta-note.quote-journey .quote-journey-step{
  white-space:nowrap;
  font-weight:500;
  letter-spacing:.005em;
}
.quote-cta-note.quote-journey .quote-journey-label{
  white-space:nowrap;
  color:#1b5e20;
  font-weight:700;
  letter-spacing:.005em;
}
.quote-cta-note.quote-journey .quote-journey-step.is-current{
  color:#1b5e20;
  font-weight:700;
}
.quote-cta-note.quote-journey .quote-journey-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.5rem;
  line-height:1;
  color:#b9c6c0;
}
.quote-cta-note.quote-journey .quote-journey-caveat{
  flex-basis:100%;
  width:100%;
  margin-top:.1rem;
  color:#94a3b8;
  font-size:.9em;
  font-weight:500;
  letter-spacing:.005em;
}
.quote-cta-note.quote-journey .quote-journey-amp{
  white-space:nowrap;
  color:#b9c6c0;
  font-weight:600;
  letter-spacing:.005em;
}
@media (max-width:520px){
  .quote-cta-note.quote-journey{
    font-size:.68rem;
    gap:.26rem .42rem;
  }
}

/* ===== Optional covers grey while waiting on Inpatient Scope =====
   These selects are locked by class rather than the disabled attribute, so the
   earlier ":disabled" grey rules never matched them and they kept the white
   "enabled" treatment. Grey them on the class alone, and they go back to white
   as soon as the class is removed. */
#quote-form select.optional-benefit-disabled,
#quote-form #outpatientLimit.optional-benefit-disabled,
#quote-form #dentalLimit.optional-benefit-disabled,
#quote-form #opticalLimit.optional-benefit-disabled,
#quote-form #maternityLimit.optional-benefit-disabled,
#quote-form #outpatientScopeSelect.optional-benefit-disabled{
  background:#f1f3f5!important;
  color:#9aa3ad!important;
  border-color:#d6dbe1!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
/* Belt and braces: a locked optional cover must not open even if some other
   script briefly clears its disabled attribute. */
#quote-form select.optional-benefit-disabled{
  pointer-events:none!important;
}