/* Homepage background art supplied by the client. */

body {
  background-color: #eef6f4 !important;
  background-image:
    linear-gradient(rgba(246, 250, 249, 0.84), rgba(239, 247, 245, 0.90)),
    url("../assets/backgrounds/page-family-blue.jpg") !important;
  background-position: center top, center 38% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}

#payment.payment-section {
  background-image:
    linear-gradient(rgba(249, 251, 247, 0.78), rgba(245, 250, 248, 0.88)),
    url("../assets/backgrounds/how-it-works-family-yellow.jpg") !important;
  background-position: center, center 45% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

#partners {
  background-image:
    linear-gradient(rgba(251, 247, 240, 0.78), rgba(244, 238, 228, 0.88)),
    url("../assets/backgrounds/partners-nairobi-skyline.jpg") !important;
  background-position: center, center 52% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Keep the quote actions close to the final benefit row. */
#quote-form .mobile-quote-actions-shell .actions-quote {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Every limit + scope pair shares one equal-width row. */
@media (min-width: 1025px) {
  body #quote-form#quote-form#quote-form .inpatient-card {
    display: grid !important;
    flex: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14.4px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body #quote-form#quote-form#quote-form .inpatient-card > .inpatient-control {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body #quote-form#quote-form#quote-form .inpatient-card > .scope-group {
    display: contents !important;
  }

  body #quote-form#quote-form#quote-form .inpatient-card #inpatientScopeSelect {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #quote-form .optional-benefit-row:has(#outpatientLimit) > .form-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14.4px !important;
  }

  #quote-form .optional-benefit-row:has(#outpatientLimit) .limit-scope-wrapper {
    display: contents !important;
  }

  #quote-form #outpatientLimit {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #quote-form #outpatientScopeSelect {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1025px) {
  body {
    background-attachment: fixed, fixed !important;
  }
}

/* Group cover: remove the panel frame and wrap the family sizes four per row. */
#quote-form #groupQuoteStep {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#quote-form #groupQuoteStep .group-composition-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 12.8px !important;
  width: 100% !important;
}

#quote-form #groupQuoteStep .group-composition-item {
  min-width: 0 !important;
}