/* Dezelfde leesvolgorde op productpagina en algemene reserveringspagina. */
@media (max-width: 767px) {
  html body .jdv-booking-form .jdv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    column-gap: 10px !important;
  }
  html body .jdv-booking-form .jdv-grid > * { min-width: 0; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-product,
  html body .jdv-booking-form .jdv-grid > ..jdv-selected-product { grid-area: 1 / 1 / 2 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-quantity { grid-area: 2 / 1 / 3 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-start { grid-area: 3 / 1 / 4 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-end { grid-area: 3 / 2 / 4 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-availability { grid-area: 4 / 1 / 5 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-name { grid-area: 5 / 1 / 6 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-pair-surname { grid-area: 5 / 2 / 6 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-postal { grid-area: 6 / 1 / 7 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-house { grid-area: 6 / 2 / 7 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-phone { grid-area: 7 / 1 / 8 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-email { grid-area: 8 / 1 / 9 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-address-status { grid-area: 9 / 1 / 10 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-message { grid-area: 10 / 1 / 11 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > label > input:not([type="checkbox"]),
  html body .jdv-booking-form .jdv-grid > label > select,
  html body .jdv-booking-form .jdv-grid > label > textarea {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (min-width: 768px) {
  html body .jdv-booking-form .jdv-grid > .jdv-f-product,
  html body .jdv-booking-form .jdv-grid > ..jdv-selected-product { grid-area: 1 / 1 / 2 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-quantity { grid-area: 2 / 1 / 3 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-start { grid-area: 3 / 1 / 4 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-end { grid-area: 3 / 2 / 4 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-availability { grid-area: 4 / 1 / 5 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-name { grid-area: 5 / 1 / 6 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-pair-surname { grid-area: 5 / 2 / 6 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-postal { grid-area: 6 / 1 / 7 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-house { grid-area: 6 / 2 / 7 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-phone { grid-area: 7 / 1 / 8 / 2 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-email { grid-area: 7 / 2 / 8 / 3 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-address-status { grid-area: 8 / 1 / 9 / -1 !important; }
  html body .jdv-booking-form .jdv-grid > .jdv-f-message { grid-area: 9 / 1 / 10 / -1 !important; }
}

/* De kalenderknop stond door een oude mobiele order-regel boven de kop. */
@media (max-width: 650px) {
  html body .jdv-calendar > .jdv-calendar-heading,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-heading { order: 10 !important; }

  html body .jdv-calendar.jdv-mobile-generated > .jdv-mobile-calendar-product { order: 20 !important; }

  html body .jdv-calendar > .jdv-calendar-grid,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-grid { order: 30 !important; }

  html body .jdv-calendar > .jdv-calendar-action,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-action { order: 40 !important; }

  html body .jdv-calendar > .jdv-calendar-period,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-period { order: 50 !important; }

  html body .jdv-calendar > .jdv-calendar-result,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-result { order: 60 !important; }

  html body .jdv-calendar > .jdv-calendar-legend,
  html body .jdv-calendar.jdv-mobile-generated > .jdv-calendar-legend { order: 70 !important; }
}