/* The tour request and "Ask About This Home" forms (listing-requests.js) on a
   page without home-search.css: Mila Match. They look exactly as on Search
   Homes. The first part gives the forms what Search Homes' page gives them
   (its colours, hidden parts staying hidden, focus rings, the page holding
   still behind an open form) and Mila's answer buttons that open them. The
   rest is copied rule for rule from home-search.css, which stays the source:
   tests/listing-requests-tests.js fails if the two drift apart. */
.listing-inquiry-dialog { --search-teal: #063d45; --search-ink: #17383e; --search-line: #dce3e1; }
.listing-inquiry-dialog [hidden] { display: none !important; }
.listing-inquiry-dialog :is(input, textarea, select, button, a, summary):focus-visible { outline: 3px solid #b1842d; outline-offset: 3px; }
html:has(.listing-inquiry-dialog[open]) { overflow: hidden; }
/* Ask Mila's "Schedule a tour" and "Ask Ekin about this home" are buttons that look like its links. */
button.mm-answer-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- Copied from home-search.css ---- */
.listing-close { position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 2; width: 44px; height: 44px; border: 1px solid #d7d9d3; border-radius: 50%; font-size: 28px; line-height: 1; background: white; }
.listing-inquiry-dialog::backdrop { background: #062b35b8; }
.listing-inquiry-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(92dvh, 900px); border: 0; padding: 0; border-radius: 12px; color: var(--search-ink); background: #fff; box-shadow: 0 24px 70px #061f2880; overscroll-behavior: contain; }
.listing-inquiry-dialog > .listing-close { position: absolute; z-index: 2; top: 14px; right: 14px; float: none; margin: 0; background: #fff; border: 1px solid #cfd9d6; }
.listing-inquiry-body { max-height: min(92dvh, 900px); padding: 28px 30px 24px; overflow-y: auto; overscroll-behavior: contain; }
.listing-inquiry-body h2 { font-family: Georgia, serif; font-size: 30px; font-weight: 400; margin: 0 48px 4px 0; }
.listing-inquiry-lede { max-width: 440px; font-size: 14px; line-height: 1.45; color: #40575b; margin: 0 0 14px; }
.listing-inquiry-property { display: flex; gap: 16px; align-items: center; min-height: 78px; background: #f4f6f5; border-radius: 9px; padding: 10px 12px; margin-bottom: 18px; }
.listing-inquiry-property img { width: 142px; height: 74px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.listing-inquiry-address { font-weight: 750; margin: 0; font-size: 15px; }
.listing-inquiry-location, .listing-inquiry-mls { margin: 3px 0 0; font-size: 13px; color: #5c6b6e; }
#listing-inquiry-form > label, .listing-inquiry-contact-row label { display: block; font-size: 12px; font-weight: 700; margin: 12px 0 5px; }
#listing-inquiry-form label > span[aria-hidden='true'], .listing-inquiry-group legend > span { color: #b3261e; }
#listing-inquiry-form :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { width: 100%; border: 1px solid #cbd5d3; border-radius: 7px; padding: 11px 13px; min-height: 44px; font: inherit; font-size: 14px; background: #fff; color: var(--search-ink); }
#listing-inquiry-form textarea { min-height: 86px; resize: vertical; line-height: 1.5; }
#listing-inquiry-form :is(input, select, textarea):focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#listing-inquiry-form [aria-invalid='true'] { border-color: #b3261e !important; }
.listing-inquiry-group { min-width: 0; border: 0; padding: 0; margin: 0 0 14px; }
.listing-inquiry-group legend { padding: 0; margin: 0 0 9px; font-size: 14px; font-weight: 750; }
.listing-inquiry-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.listing-inquiry-pills label { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.listing-inquiry-pills input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.listing-inquiry-pills label > span { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #cbd5d3; border-radius: 999px; padding: 7px 11px; color: #183b42; background: #fff; font-size: 12px; font-weight: 600; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.listing-inquiry-pills input:checked + span { border-color: #20845f; background: #edf8f2; box-shadow: inset 0 0 0 1px #20845f; }
.listing-inquiry-pills input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.listing-inquiry-pills input[type='checkbox']:checked + span::before { content: '✓'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; color: #fff; background: #20845f; font-size: 10px; }
.listing-inquiry-question-wrap { margin-bottom: 8px; }
.listing-inquiry-question-help { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; color: #6b797b; font-size: 10px; line-height: 1.4; }
.listing-inquiry-question-help span:last-child { flex: none; }
.listing-inquiry-contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.listing-inquiry-field-error { min-height: 15px; margin: 3px 0 0; color: #9b2419; font-size: 10px; line-height: 1.35; }
.listing-inquiry-contact-method { margin-top: 5px; }
.listing-inquiry-pills--single label > span { min-height: 44px; font-size: 13px; gap: 6px; }
.listing-inquiry-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; top: -9999px; }
.listing-inquiry-submit { width: 100%; min-height: 52px; font-size: 13px; margin-top: 18px; }
.listing-inquiry-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #5c6b6e; margin: 12px 0 0; }
.listing-inquiry-error { background: #fdecea; color: #7a271a; border: 1px solid #f3b8ab; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin: 0 0 16px; }
.listing-inquiry-sms { display: none; margin-top: 20px; border: 1px solid #5bb78e; border-radius: 14px; padding: 18px; background: linear-gradient(135deg, #f3fbf7, #fff); }
.listing-inquiry-sms-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: #16845d; color: #fff; }
.listing-inquiry-sms h3 { margin: 0 0 5px; font: 400 23px/1.2 Georgia, serif; }
.listing-inquiry-sms > p { color: #506467; font-size: 12px; line-height: 1.45; }
.listing-inquiry-sms .button { width: 100%; margin: 8px 0 12px; background: #075640; color: #fff; }
.listing-inquiry-sms .listing-inquiry-sms-label { margin: 0 0 5px; font-size: 10px; }
.listing-inquiry-sms .listing-inquiry-sms-preview { margin: 0 0 12px; border: 1px solid #d5dfdc; border-radius: 7px; padding: 10px; background: #fff; color: #344b50; }
.listing-inquiry-sms small { color: #607174; font-size: 10px; }
.listing-inquiry-success { text-align: center; padding: 12px 4px 4px; }
.listing-inquiry-success-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%; color: #fff; background: #218862; font-size: 34px; box-shadow: 0 8px 18px #21886233; }
.listing-inquiry-success-title { font: 400 28px/1.2 Georgia, serif; margin: 0 0 8px; }
.listing-inquiry-success-message { margin: 0 0 7px; font-size: 14px; font-weight: 650; }
.listing-inquiry-success-note { font-size: 12px; color: #5c6b6e; margin: 0 auto 18px; max-width: 360px; }
.listing-inquiry-success-property { max-width: 480px; margin: 0 auto 20px; text-align: left; }
.listing-inquiry-success .button { width: 100%; min-height: 48px; }
.listing-inquiry-done { background: #075640; color: #fff; }
.listing-tour-dialog { width: min(720px, calc(100vw - 32px)); }
#listing-tour-form > label, #listing-tour-form .listing-inquiry-contact-row label, .listing-tour-choice-row label, #listing-tour-note + * { display: block; font-size: 12px; font-weight: 700; }
#listing-tour-form label > span[aria-hidden='true'] { color: #b3261e; }
#listing-tour-form :is(input:not([type='radio']), select, textarea) { width: 100%; border: 1px solid #cbd5d3; border-radius: 7px; padding: 11px 13px; min-height: 44px; font: inherit; font-size: 14px; background: #fff; color: var(--search-ink); }
#listing-tour-form textarea { min-height: 86px; resize: vertical; line-height: 1.5; }
#listing-tour-form :is(input, select, textarea):focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#listing-tour-form [aria-invalid='true'] { border-color: #b3261e !important; }
.listing-tour-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listing-tour-type-options label > span { min-height: 52px; font-size: 14px; gap: 8px; }
.listing-tour-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.listing-tour-choice-row label { margin: 0 0 5px; }
.listing-tour-second-toggle { width: 100%; margin: 2px 0 14px; padding: 12px 0; border: 0; border-top: 1px solid #dce3e1; border-bottom: 1px solid #dce3e1; background: transparent; color: var(--search-ink); text-align: left; font: 700 13px/1.4 inherit; }
.listing-tour-second { margin-bottom: 14px; }
.listing-tour-section-title { margin: 6px 0 0; font-size: 16px; }
.listing-tour-optional { color: #657477; font-weight: 400; }
.listing-tour-ask { margin-top: 9px; background: #fff; color: #075640; border: 1px solid #075640; }
@media (max-width: 520px) {
  .listing-inquiry-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 8px auto; border-radius: 14px; }
  /* Firefox for iPhone keeps a floating address bar over the bottom of the page
     (not counted in dvh), which covered the send button. The extra room lets
     the button always scroll up above it. */
  .listing-inquiry-body { max-height: calc(100dvh - 16px); padding: 24px 16px calc(96px + env(safe-area-inset-bottom)); }
  .listing-inquiry-body h2 { font-size: 24px; margin-right: 40px; }
  .listing-inquiry-lede { font-size: 12px; margin-bottom: 12px; }
  .listing-inquiry-property { min-height: 64px; gap: 10px; margin-bottom: 15px; }
  .listing-inquiry-property img { width: 96px; height: 58px; }
  .listing-inquiry-address { font-size: 12px; }
  .listing-inquiry-location, .listing-inquiry-mls { font-size: 10px; }
  .listing-inquiry-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .listing-inquiry-pills label > span { min-height: 40px; padding: 7px 8px; font-size: 11px; }
  .listing-inquiry-contact-row { grid-template-columns: 1fr; gap: 0; }
  .listing-inquiry-pills--single { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-inquiry-pills--single label > span { min-height: 44px; }
  .listing-inquiry-question-help span:first-child { max-width: 78%; }
  .listing-inquiry-sms { display: block; }
  .listing-tour-choice-row, .listing-inquiry-contact-row { grid-template-columns: 1fr; gap: 0; }
  .listing-tour-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.listing-tour-openhouse select { width: 100%; }
[dir="rtl"] .listing-tour-second-toggle, [dir="rtl"] .listing-inquiry-success-property { text-align: right; }
[dir="rtl"] .listing-close { float: left; margin: 12px 0 -56px 12px; }
[dir="rtl"] .listing-inquiry-dialog > .listing-close { left: 14px; right: auto; }
[dir="rtl"] .listing-inquiry-body h2 { margin: 0 0 4px 48px; }
@media (max-width: 520px) { [dir="rtl"] .listing-inquiry-body h2 { margin-right: 0; margin-left: 40px; } }
[dir="rtl"] .listing-inquiry-pills input[type='checkbox']:checked + span::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .listing-inquiry-hp { left: auto; right: -10000px; }
