/* Roam v1.7.9
   Payment modal field alignment fix.
*/

.modal,
.modal * {
  box-sizing: border-box;
}

.modal {
  overflow-x: hidden !important;
}

.modal .grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
}

.modal .field,
.modal .field input,
.modal .field select {
  min-width: 0;
  max-width: 100%;
}

.modal .field input,
.modal .field select {
  width: 100%;
  height: 58px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

/* Date inputs can have aggressive intrinsic sizing in iOS/Safari.
   Force them to respect their grid column. */
.modal input[type="date"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  text-align: left;
  padding-right: 12px;
}

/* Keep text from visually spilling out of narrow half-width fields. */
.modal select,
.modal input {
  font-size: 18px;
}

@media (max-width: 390px) {
  .modal .grid2 {
    grid-template-columns: 1fr;
  }
}