/* Protech mobile form polish — task #8
   Keeps controls touch-friendly while reducing unnecessary vertical length. */
@media (max-width: 640px){
  /* Form cards: less empty space on narrow screens. */
  .panel{
    padding:22px 18px;
  }

  /* Rows already stack on mobile; remove the desktop grid gap so it does not
     compound with each field's own bottom margin. */
  .field-row{
    gap:0;
  }

  .field{
    margin-bottom:12px;
  }

  .field label{
    margin-bottom:5px;
    font-size:.8rem;
    line-height:1.35;
  }

  /* Keep a >=44px tap target, but trim the oversized desktop padding. */
  .field input,
  .field select{
    min-height:44px;
    padding:10px 13px;
    border-radius:11px;
    font-size:.92rem;
  }

  .field select{
    background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
  }

  .field textarea{
    min-height:88px;
    padding:11px 13px;
    border-radius:11px;
    font-size:.92rem;
    line-height:1.45;
  }

  /* Compact form intros and status/help copy. */
  .panel > h3{
    margin-bottom:5px !important;
  }

  .panel > .lede{
    margin-bottom:16px !important;
  }

  .form-note,
  .form-status{
    margin-top:10px;
    line-height:1.5;
  }

  /* Full-width submit remains prominent without being unnecessarily tall. */
  form .btn[style*="width:100%"],
  form .btn[style*="width: 100%"]{
    min-height:46px;
    padding:12px 20px;
  }

  /* Rental/maintenance choice chips are useful, but can be tighter. */
  form .wiz-chips{
    gap:7px;
    margin-top:6px !important;
  }

  form .wiz-chip{
    padding:8px 11px;
    line-height:1.25;
  }

  /* Reduce empty space before the main request forms. */
  #aanvraag .contact-grid{
    margin-top:22px !important;
  }

  #inquiry.contact-grid{
    margin-top:34px !important;
  }
}

@media (max-width: 380px){
  .panel{
    padding:20px 15px;
  }
}