/* Scoped form extension: shared art, navigation and other pages stay intact. */
.page--housing .content { z-index: 1; }
html.housing-modal-open { overflow: hidden; }
.housing-title { margin: 36px 0 24px; color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.3; }
.housing-form {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin-top: 0;
  color: var(--navy);
}
.housing-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.housing-field label { font-size: 16px; line-height: 1.4; font-weight: 600; }
.housing-field input,
.housing-combobox {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 17px;
  color: var(--navy);
  background: var(--white);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.housing-field input::placeholder { color: var(--navy); opacity: .7; }
.housing-field [aria-invalid="true"] { border: 2px solid var(--red); padding: 11px; }
.housing-field input:focus-visible,
.housing-combobox:focus-visible,
.housing-submit:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.housing-help,
.housing-error,
.housing-notice,
.housing-status,
.housing-no-script { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.housing-error { font-weight: 600; }
.housing-error:empty,
.housing-status:empty { display: none; }
.housing-actions { display: grid; gap: 14px; }
.housing-submit {
  appearance: none;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--blue);
  border-radius: 17px;
  color: var(--white);
  background: var(--blue);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
}
.housing-submit:disabled,
.housing-field input:disabled,
.housing-combobox:disabled {
  color: var(--navy);
  background: color-mix(in srgb, var(--blue) 4%, var(--cream));
  border-color: var(--border);
  cursor: not-allowed;
  opacity: .65;
}
.housing-picker { position: relative; min-width: 0; max-width: 100%; }
.housing-combobox { appearance: none; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; touch-action: manipulation; }
.housing-combobox > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.housing-chevron { flex: 0 0 8px; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.housing-combobox[aria-expanded="true"] .housing-chevron { transform: rotate(225deg); }
.housing-options {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-width: 100%;
  max-height: var(--picker-space, 320px);
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--cream);
  color: var(--navy);
  box-shadow: var(--shadow);
}
.housing-picker[data-placement="above"] .housing-options { top: auto; bottom: calc(100% + 8px); }
.housing-options[hidden] { display: none; }
.housing-options [role="option"] { -webkit-tap-highlight-color: transparent; min-height: 48px; padding: 12px; border-radius: 12px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
.housing-options [aria-selected="true"] { background: color-mix(in srgb, var(--blue) 10%, var(--cream)); font-weight: 600; }
.housing-options [role="option"]:hover,
.housing-options .is-active { color: var(--white); background: var(--blue); }
.housing-field input,
.housing-combobox { scroll-margin-top: 76px; }
.housing-dialog {
  width: min(calc(100% - 32px), 400px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 28px 24px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--navy);
  background: var(--cream);
  box-shadow: 0 16px 48px rgb(6 38 83 / 24%);
  text-align: center;
}
.housing-dialog::backdrop { background: rgb(6 38 83 / 65%); }
.housing-dialog-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; color: var(--white); background: var(--red); font-size: 26px; font-weight: 700; }
.housing-dialog h2 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; }
.housing-dialog p { margin: 0 0 24px; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) {
  .page--housing .content { display: block; }
  .page--housing .footer { margin-top: 36px; }
  .housing-title { font-size: 24px; }
  .housing-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .housing-field { grid-column: 1 / -1; }
  .housing-field--name { grid-column: auto; }
  .housing-actions { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .page--housing {
    align-items: start;
    padding-top: calc(80px + env(safe-area-inset-top, 0px));
  }

  .page--housing .content > .slogan--v2 {
    height: 0;
    overflow: hidden;
  }

  .page--housing .content > :is(.housing-title, .ia-machala-title) {
    margin-top: 0;
  }

  .page--housing.page--ia-machala .housing-form {
    align-items: start;
  }
}