/* mobile_fix.css
   Single responsibility: control spacing & layout on the first search form
   for small screens, without touching anything else.
*/

@media (max-width: 768px) {

  /* Make the row a simple vertical stack */
  .booking-wrapper .search-form .form-row {
    display: block !important;
    margin: 0 !important;
    padding: 12px 12px 14px 12px !important; /* card inner padding */
  }

  /* Each field block (Property, Check-in, etc.) */
  .booking-wrapper .search-form .form-group,
  .booking-wrapper .search-form .form-group-submit {
    display: block !important;
    margin: 12px 0 0 0 !important; /* space BEFORE the label of each field */
    padding: 0 !important;
    min-height: auto !important;
  }

  /* First field: slightly smaller top margin */
  .booking-wrapper .search-form .form-group:first-child {
    margin-top: 6px !important;
  }

  /* Label: closer to input */
  .booking-wrapper .search-form .form-group label {
    display: block !important;
    margin: 0 0 4px 0 !important;   /* tiny gap above input */
    line-height: 1.2;
  }

  /* Inputs: normal height, no extra min-height from other CSS */
  .booking-wrapper .search-form input,
  .booking-wrapper .search-form select {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 6px 10px !important;
    font-size: 15px !important;
  }
}