/* =====================================================================
   MOBILE-ONLY FIXES — loaded only by index-mobile.html (after everything else)
   The desktop page never sees this file, so nothing here can affect it.
   ===================================================================== */

/* Members row on phones: the desktop layout indents this block by ~30% of the
   card width to line it up under the "Members" label. On a narrow screen that
   indent pushes the age selects past the right edge, so it is dropped here and
   the row uses the full width of the card. */
@media (max-width: 700px) {
  #quote-form #individualFamilyDetails .family-overview,
  #quote-form #individualFamilyDetails .family-overview.sub-container,
  #quote-form #individualFamilyDetails .family-row.family-overview {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #quote-form #individualFamilyDetails .family-overview:not(.children-only-layout) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #quote-form #individualFamilyDetails .family-overview .family-item,
  #quote-form #individualFamilyDetails .family-overview .children-count-item {
    min-width: 0 !important;
    width: 100% !important;
  }

  #quote-form #individualFamilyDetails .family-overview .family-item > select,
  #quote-form #individualFamilyDetails .family-overview .children-count-item > select {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Very small phones (iPhone SE and similar): one field per row. */
@media (max-width: 380px) {
  #quote-form #individualFamilyDetails .family-overview:not(.children-only-layout) {
    grid-template-columns: 1fr !important;
  }
}