/* Scoped form corrections. No changes to navigation, data or conditional visibility. */
@media screen {
  /* A multiline field must keep its own height and vertical padding. */
  body.ts2 #contactModal.contacts-modal textarea {
    box-sizing: border-box;
    height: auto !important;
    min-height: 108px !important;
    padding: 12px 14px !important;
    line-height: 1.5 !important;
    resize: vertical;
  }

  /* Keep long confirmations inside the viewport, including a short window. */
  body.ts2 #appModal.app-modal-backdrop {
    box-sizing: border-box;
    padding: 16px !important;
  }
  body.ts2 #appModal .app-modal-card {
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The shared date picker already positions itself 12px from the edges. */
  body.ts2 .reservation-calendar {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media screen and (max-width: 767px) {
  /* Match the neighbouring fields in the commercial form. */
  body.ts2 #reservationsSection.ts-module #commercialLedgerModal .reservation-date-trigger {
    height: 44px !important;
    min-height: 44px !important;
  }
  body.ts2 #contactModal.contacts-modal textarea {
    font-size: 16px !important;
  }
}