/* ===== group family-size legend and grid =====
   The legend is a small neutral pill above the selector grid; each selector
   is a two-part pill with the size name on a teal segment. */
#quote-form #groupComposition .group-plain-heading{
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-bottom:9px !important;
}

/* The live family badge moves into the quote heading, leaving no heading line
   behind to hold the pill down. */
#quote-form #groupComposition .group-plain-heading:empty{
  display:none !important;
}

#quote-form #groupComposition .family-size-pill-label{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin:0 auto 8px;
  padding:5px 12px;
  border:1px solid rgba(1,122,120,.18);
  border-radius:999px;
  background:#f6fbfb;
  color:#013b46;
  text-align:center;
}

#quote-form #groupComposition .family-size-pill-title{
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
}

#quote-form #groupComposition .family-size-pill-note{
  padding-left:7px;
  border-left:1px solid rgba(1,122,120,.18);
  font-size:.64rem;
  font-weight:600;
  line-height:1.2;
  color:#5b6f70;
}

#quote-form #groupComposition .family-size-pill-label.is-counter{
  gap:0;
  padding:0;
  overflow:hidden;
  border-color:#017a78;
  background:#fff;
  box-shadow:0 2px 8px rgba(1,57,71,.06);
}

#quote-form #groupComposition .family-size-pill-label.is-counter .family-size-pill-title{
  padding:5px 12px;
  background:#017a78;
  color:#fff;
}

#quote-form #groupComposition .family-size-pill-label.is-counter .family-size-pill-note{
  padding:5px 12px;
  border-left:1px solid rgba(1,122,120,.18);
  color:#013b46;
  font-size:.72rem;
  font-weight:800;
}

#quote-form #groupComposition .group-composition-grid{
  margin:0 !important;
  padding:0 !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px 12px !important;
}

#quote-form #groupComposition .group-composition-grid .group-composition-item{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  min-width:0 !important;
  height:38px !important;
  overflow:hidden !important;
  border:1.5px solid #cfdedd !important;
  border-radius:9px !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(1,57,71,.04) !important;
}

#quote-form #groupComposition .group-composition-grid .group-composition-item label{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:42px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 8px !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.24) !important;
  background:#017a78 !important;
  color:#ffffff !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  text-align:center !important;
  cursor:pointer !important;
}

#quote-form #groupComposition .group-composition-grid .group-composition-item input{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 4px !important;
  text-align:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#013b46 !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

#quote-form #groupComposition .group-composition-grid .group-composition-item input:focus{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
}

#quote-form #groupComposition .group-composition-grid .group-composition-item:focus-within{
  border-color:#017a78 !important;
  box-shadow:0 0 0 2px rgba(1,122,120,.14) !important;
}

@media (max-width:599px){
  #quote-form #groupComposition .family-size-pill-label{
    gap:5px;
    padding:5px 10px;
  }

  #quote-form #groupComposition .family-size-pill-title{
    font-size:.7rem;
  }

  #quote-form #groupComposition .family-size-pill-note{
    font-size:.56rem;
  }

  #quote-form #groupComposition .family-size-pill-label.is-counter .family-size-pill-title,
  #quote-form #groupComposition .family-size-pill-label.is-counter .family-size-pill-note{
    padding:4px 9px;
  }

  #quote-form#quote-form #groupComposition .group-composition-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px 6px !important;
  }

  #quote-form #groupComposition .group-composition-grid .group-composition-item{
    height:34px !important;
  }

  #quote-form #groupComposition .group-composition-grid .group-composition-item label{
    min-width:36px !important;
    padding:0 6px !important;
    font-size:.62rem !important;
  }

  #quote-form #groupComposition .group-composition-grid .group-composition-item input{
    padding:0 2px !important;
    font-size:.76rem !important;
  }
}

/* ===== group average age segmented pill =====
   The label and the four ages read as one divided pill instead of a caption
   above a row of separate pills. */
#quote-form#quote-form #groupComposition .group-average-age-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  width:100% !important;
  padding:0 !important;
  margin:9px 0 0 !important;
  border:1px solid rgba(1,122,120,.22) !important;
  border-radius:999px !important;
  background:#f6fbfb !important;
  box-shadow:0 3px 10px rgba(1,57,71,.05) !important;
  overflow:hidden !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-average-copy{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  background:#eef7f6 !important;
  border-right:1px solid rgba(1,122,120,.16) !important;
  text-align:left !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-average-label,
#quote-form#quote-form #groupComposition .group-average-age-row .group-average-copy .group-average-label{
  flex:0 0 auto !important;
  width:auto !important;
  display:flex !important;
  align-items:center !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#013b46 !important;
  font-size:.74rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options{
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:0 !important;
  width:auto !important;
  margin:0 !important;
  align-items:stretch !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label{
  position:relative !important;
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label input[type="radio"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label span{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  border:0 !important;
  border-left:1px solid rgba(1,122,120,.14) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#365253 !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label:first-child span{
  border-left:0 !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label:hover span{
  background:rgba(1,122,120,.08) !important;
}

#quote-form#quote-form #groupComposition .group-average-age-row .group-age-options input:checked + span{
  background:#017a78 !important;
  color:#ffffff !important;
  border-left-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}

@media (max-width:599px){
  #quote-form#quote-form #groupComposition .group-average-age-row .group-average-copy{
    padding:0 11px !important;
  }

  #quote-form#quote-form #groupComposition .group-average-age-row .group-average-label,
  #quote-form#quote-form #groupComposition .group-average-age-row .group-average-copy .group-average-label{
    font-size:.66rem !important;
  }

  #quote-form#quote-form #groupComposition .group-average-age-row .group-age-options label span{
    height:38px !important;
    min-height:38px !important;
    font-size:.72rem !important;
  }
}