/* Member rates page — page-only styles. Classes prefixed mmp-member-rates-, tokens only.
   The example Minder ID card beside the booking steps: the code must never wrap, so the
   plan chip drops below it on narrow phones instead. */

.mmp-member-rates-idcard .mm-idcard__id { white-space: nowrap; }

/* Keep each mobile service card in three aligned, self-contained plan rows.
   The public price and member price/status share a line; notes occupy their own
   line inside the value column. Wrapping on small phones never floats over a label. */
@media (max-width: 700px) {
  #ladder .mm-table tbody { gap: 20px; }
  #ladder .mm-table tbody tr { padding: 18px; }
  #ladder .mm-table tbody th { padding-bottom: 16px; }
  #ladder .mm-table tbody th small { font-size: 15px; line-height: 1.45; }
  #ladder .mm-table td { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 12px; padding-block: 15px; }
  #ladder .mm-table td:last-child { padding-bottom: 0; }
  #ladder .mm-table td::before { padding-top: 7px; font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; }
  #ladder .mm-table .mm-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
  #ladder .mm-table .mm-cell s { display: inline; margin: 0; font-size: 15px; line-height: 1.4; white-space: nowrap; }
  #ladder .mm-table .mm-price { font-size: 22px; line-height: 1.45; white-space: nowrap; }
  #ladder .mm-table .mm-inc { min-height: 34px; gap: 5px; padding: 5px 10px 5px 6px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
  #ladder .mm-table .mm-note { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .mmp-member-rates-idcard .mm-idcard__top { flex-wrap: wrap; }
}