/* ---- modal forms on phones ---- */
@media (max-width:640px){
  /* .modal-radio-row is a nowrap flex row; three pills ("E-Mail /
     Telefon / WhatsApp") measured 357px inside a 336px card at 360px
     wide, which made the whole modal scroll sideways. Let it wrap. */
  /* equal columns, however many options there are, so the pills always
     fit the row instead of wrapping "WhatsApp" onto a full second line
     or pushing past the edge */
  .modal-radio-row{display:grid!important;grid-auto-flow:column;
    grid-auto-columns:1fr;gap:8px!important}
  .modal-radio-row label{
    min-width:0;padding:9px 4px!important;font-size:12px!important;
    gap:5px!important;
    justify-content:center;text-align:center;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* the whole pill is the tap target, so the dot itself does not need the
     24px touch minimum - reclaiming that space is what lets "WhatsApp" fit */
  .modal-radio-row input[type=radio],.modal-radio-row input[type=checkbox]{
    min-width:15px!important;min-height:15px!important;
    width:15px!important;height:15px!important;flex:none}
  /* nothing in a modal should ever scroll horizontally */
  .modal-card{overflow-x:hidden!important}
}

/* Rows with three options (Bevorzugte Kontaktmethode) stack instead of
   sitting side by side - three pills never fit a phone row cleanly, and
   "WhatsApp" was what pushed it over. Two-option rows stay side by side.
   :has() is already relied on elsewhere in this project. */
@media (max-width:640px){
  .modal-radio-row:has(label:nth-child(3)){
    grid-auto-flow:row!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .modal-radio-row:has(label:nth-child(3)) label{
    font-size:13px!important;padding:10px 12px!important;
    justify-content:flex-start;text-align:left;
  }
}

/* Both drawers ("Suche speichern" and "Fahrzeug in Zahlung geben")
   render inline-styled flex rows
   with no classes, so they needed a hook. Three-option rows stack on
   phones, same as the modal radio rows. */
@media (max-width:640px){
  .ss-radio-row,.ti-radio-row{flex-direction:column!important;gap:8px!important}
  .ss-radio-row label,.ti-radio-row label{width:100%;box-sizing:border-box;justify-content:flex-start}
}