:root {
  --form-control-height: 52px;
  --form-control-radius: 16px;
  --form-control-border-width: 1px;
  --form-control-border: var(--line, #d8cfbf);
  --form-control-border-focus: var(--brass-ink, #7b592f);
  --form-control-bg: rgba(255, 255, 255, .96);
  --form-control-text: var(--text, #18201c);
  --form-control-placeholder: var(--text-mute, #586159);
  --form-control-padding-inline: 1rem;
  --form-control-font-size: 1rem;
  --form-label-gap: .45rem;
  --form-focus-ring: 0 0 0 3px rgba(164, 119, 73, .16);
  --form-error: var(--danger, #8c3b2e);
}

body.mr-forms :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--form-control-height);
  border: var(--form-control-border-width) solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  background: var(--form-control-bg);
  color: var(--form-control-text);
  padding: .75rem var(--form-control-padding-inline);
  font: inherit;
  font-size: var(--form-control-font-size);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-overflow: clip;
  transition: border-color var(--dur-1, 180ms), box-shadow var(--dur-1, 180ms), background-color var(--dur-1, 180ms);
}

body.mr-forms select {
  padding-right: 2.5rem;
  cursor: pointer;
}

body.mr-forms textarea {
  height: auto !important;
  min-height: 112px !important;
  resize: vertical;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

body.mr-forms :where(input, textarea)::placeholder {
  color: var(--form-control-placeholder);
  opacity: .72;
}

body.mr-forms :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline: 0;
  border-color: var(--form-control-border-focus);
  box-shadow: var(--form-focus-ring);
}

body.mr-forms :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):disabled {
  cursor: not-allowed;
  background: rgba(88, 97, 89, .09);
  color: rgba(24, 32, 28, .58);
  opacity: 1;
}

body.mr-forms :where(input, select, textarea)[aria-invalid="true"],
body.mr-forms .is-invalid :where(input, select, textarea) {
  border-color: var(--form-error);
  box-shadow: 0 0 0 3px rgba(140, 59, 46, .12);
}

body.mr-forms :is(.field, .mr-field, .stack > label) {
  min-width: 0;
}

body.mr-forms :is(.reservation-content, .booking-flow, .booking-step, .booking-step__summary, .reservation-guest-form, .field-grid) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.mr-forms :is(.booking-flow, .booking-step__summary, .reservation-guest-form, .field-grid) {
  grid-template-columns: minmax(0, 1fr);
}

body.mr-forms .booking-step__header > * {
  min-width: 0;
}

body.mr-forms :is(.reservation-guest-form .field, .property-toolbar .field) {
  display: grid;
  justify-content: initial;
  gap: var(--form-label-gap);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.mr-forms :is(.field__label, .mr-field__label, .stack > label) {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--text-mute, #586159);
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mr-forms :is(.field__error, .form-error, [data-error-for]) {
  display: block;
  min-height: 1.25rem;
  color: var(--form-error);
  font-size: .875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.mr-forms .availability-searchbar__control {
  min-height: var(--form-control-height);
  border: var(--form-control-border-width) solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  background: var(--form-control-bg);
  padding: .7rem var(--form-control-padding-inline);
}

body.mr-forms .availability-searchbar__control > :is(input, select) {
  height: auto;
  min-height: 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 1.8rem 0 0;
  box-shadow: none;
}

body.mr-forms .availability-searchbar__icon {
  width: 20px;
  flex: 0 0 20px;
}

body.mr-forms .guests__trigger {
  min-height: var(--form-control-height);
  border: var(--form-control-border-width) solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  background: var(--form-control-bg);
  padding: .55rem var(--form-control-padding-inline);
}

body.mr-forms .guests__trigger:focus-visible {
  outline: 0;
  border-color: var(--form-control-border-focus);
  box-shadow: var(--form-focus-ring);
}

body.mr-forms :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ink, #12211c);
}

@media (max-width: 760px) {
  :root {
    --form-control-height: 54px;
    --form-control-padding-inline: .9rem;
  }

  body.mr-forms :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 1rem;
  }
}