/* Final layout fixes for the contract builder details step. */

body[data-page="builder"] #pretrialRuleField {
  grid-column: 1 / span 4 !important;
}

body[data-page="builder"] #pretrialDaysField {
  grid-column: 5 / span 3 !important;
}

body[data-page="builder"] #courtModeField {
  grid-column: 8 / span 3 !important;
}

body[data-page="builder"] #copiesCountField {
  grid-column: 1 / span 4 !important;
  grid-row: auto !important;
  max-width: min(100%, 220px);
}

body[data-page="builder"] #courtNameField {
  grid-column: 1 / -1 !important;
}

body[data-page="builder"] .field-cluster__section--contacts {
  grid-template-columns: minmax(168px, 1fr) minmax(176px, 1.05fr) minmax(158px, max-content) !important;
  align-items: end !important;
  gap: 14px 16px !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordPhoneField,
body[data-page="builder"] .field-cluster__section--contacts #tenantPhoneField {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  min-width: 168px;
  width: 100% !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordPhoneField input,
body[data-page="builder"] .field-cluster__section--contacts #tenantPhoneField input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  font-variant-numeric: tabular-nums;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordEmailField,
body[data-page="builder"] .field-cluster__section--contacts #tenantEmailField {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  justify-self: stretch !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordBankToggleField,
body[data-page="builder"] .field-cluster__section--contacts #tenantBankToggleField {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  align-self: end !important;
  justify-self: end !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordBankToggleField span,
body[data-page="builder"] .field-cluster__section--contacts #tenantBankToggleField span {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordInnField:not(.is-hidden),
body[data-page="builder"] .field-cluster__section--contacts #tenantInnField:not(.is-hidden) {
  grid-column: 1 / 2 !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordPostalAddressToggleField,
body[data-page="builder"] .field-cluster__section--contacts #tenantPostalAddressToggleField {
  grid-column: 2 / 3 !important;
  justify-self: start !important;
  width: max-content !important;
}

body[data-page="builder"] .field-cluster__section--contacts #landlordAddressField,
body[data-page="builder"] .field-cluster__section--contacts #tenantAddressField,
body[data-page="builder"] .field-cluster__section--contacts #landlordBankFields,
body[data-page="builder"] .field-cluster__section--contacts #tenantBankFields {
  grid-column: 1 / -1 !important;
}

body[data-page="builder"] .field-cluster__section--passport {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: end !important;
}

body[data-page="builder"] .field-cluster__section--passport .field-cluster__subhead {
  grid-column: 1 / -1 !important;
  order: 0;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportSeriesField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportSeriesField {
  grid-column: 1 / span 3 !important;
  grid-row: auto !important;
  order: 1;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportNumberField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportNumberField {
  grid-column: 4 / span 4 !important;
  grid-row: auto !important;
  order: 2;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportIssuedAtField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportIssuedAtField {
  grid-column: 8 / span 5 !important;
  grid-row: auto !important;
  order: 3;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportIssuedAtField input[type="date"],
body[data-page="builder"] .field-cluster__section--passport #tenantPassportIssuedAtField input[type="date"] {
  width: calc(12ch + 76px) !important;
  min-width: calc(12ch + 76px) !important;
  max-width: calc(12ch + 76px) !important;
  padding-right: 50px !important;
  font-variant-numeric: tabular-nums;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportIssuedByField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportIssuedByField {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 4;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportDepartmentCodeField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportDepartmentCodeField {
  grid-column: 1 / span 4 !important;
  grid-row: auto !important;
  order: 5;
}

body[data-page="builder"] .field-cluster__section--passport #landlordPassportBirthPlaceField,
body[data-page="builder"] .field-cluster__section--passport #tenantPassportBirthPlaceField {
  grid-column: 5 / -1 !important;
  grid-row: auto !important;
  order: 6;
}

body[data-page="builder"] .field-cluster__section--passport #landlordRegisteredAddressField,
body[data-page="builder"] .field-cluster__section--passport #tenantRegisteredAddressField {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 7;
}

@media (max-width: 720px) {
  body[data-page="builder"] .field-cluster__section--contacts,
  body[data-page="builder"] .field-cluster__section--passport {
    grid-template-columns: 1fr !important;
  }

  body[data-page="builder"] .field-cluster__section--contacts #landlordPhoneField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantPhoneField,
  body[data-page="builder"] .field-cluster__section--contacts #landlordEmailField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantEmailField,
  body[data-page="builder"] .field-cluster__section--contacts #landlordBankToggleField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantBankToggleField,
  body[data-page="builder"] .field-cluster__section--contacts #landlordInnField:not(.is-hidden),
  body[data-page="builder"] .field-cluster__section--contacts #tenantInnField:not(.is-hidden),
  body[data-page="builder"] .field-cluster__section--contacts #landlordPostalAddressToggleField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantPostalAddressToggleField,
  body[data-page="builder"] .field-cluster__section--contacts #landlordAddressField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantAddressField,
  body[data-page="builder"] .field-cluster__section--contacts #landlordBankFields,
  body[data-page="builder"] .field-cluster__section--contacts #tenantBankFields,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportSeriesField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportSeriesField,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportNumberField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportNumberField,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportDepartmentCodeField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportDepartmentCodeField,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportIssuedAtField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportIssuedAtField,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportIssuedByField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportIssuedByField,
  body[data-page="builder"] .field-cluster__section--passport #landlordPassportBirthPlaceField,
  body[data-page="builder"] .field-cluster__section--passport #tenantPassportBirthPlaceField,
  body[data-page="builder"] .field-cluster__section--passport #landlordRegisteredAddressField,
  body[data-page="builder"] .field-cluster__section--passport #tenantRegisteredAddressField {
    grid-column: 1 / -1 !important;
  }

  body[data-page="builder"] .field-cluster__section--contacts #landlordBankToggleField,
  body[data-page="builder"] .field-cluster__section--contacts #tenantBankToggleField {
    justify-self: start !important;
  }
}