:root {
  --mls-primary: #1a3c5e;
  --mls-accent: #c9973e;
  --mls-bg: #f7f7f5;
  --mls-card-bg: #ffffff;
  --mls-border: #e2e2df;
  --mls-text: #22262b;
  --mls-text-muted: #6b7178;
  --mls-radius: 6px;
}

.mls-search-widget * {
  box-sizing: border-box;
}

/* The [hidden] attribute alone isn't reliable once an element also has
   its own `display` rule (like .results-grid's display:grid, or
   .pagination's display:flex) — author CSS always overrides the
   browser's built-in [hidden] { display: none } default, regardless
   of selector specificity or source order. This !important rule makes
   [hidden] win unconditionally for anything in this app that uses it —
   .results-grid, .pagination, .map-view, and the listing-modal alike. */
[hidden] {
  display: none !important;
}

.mls-search-widget {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mls-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 0rem;
}

/* ---- Search form ---- */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  background: var(--mls-card-bg);
  border: 1px solid var(--mls-border);
  border-radius: var(--mls-radius);
  padding: .75rem;
  margin-bottom: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 110px;
  flex: 1 1 110px;
}

.field-wide {
  flex: 2 1 200px;
}

.field label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mls-text-muted);
  margin-bottom: 0.3rem;
}

.field input,
.field select {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--mls-border);
  border-radius: 4px;
  font-size: 0.95rem;
  background: #fff;
}

.field-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
}

.btn-search {
  background: var(--mls-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-search:hover {
  background: #142f4a;
}

.btn-clear {
  background: #fff;
  color: var(--mls-text-muted);
  border: 1px solid var(--mls-border);
  border-radius: 4px;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-clear:hover {
  background: var(--mls-bg);
  color: var(--mls-text);
}

/* ---- Results bar ---- */
.results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.results-count {
  font-size: 0.9rem;
  color: var(--mls-text-muted);
}

.results-bar-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.sort-control select {
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--mls-border);
}

.mls-disclaimer {
  font-size: 0.72rem;
  color: var(--mls-text-muted);
  line-height: 1.5;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--mls-border);
}

/* ---- Map shell: the map fills this by default; the card list and
   pagination float on top of it as an overlay panel. Sidebar on the
   left on wide screens, bottom sheet on narrow ones (see the mobile
   breakpoint below). ---- */
.map-shell {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border-radius: var(--mls-radius);
  border: 1px solid var(--mls-border);
  overflow: hidden;
}

.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-status {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  left: auto;
  transform: none;
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.78rem;
  color: var(--mls-text-muted);
  padding: 0.3rem 0.75rem;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  z-index: 5;
  max-width: calc(100% - 2rem);
  text-align: center;
}

.map-status:empty {
  display: none;
}


/* The overlay panel itself — sidebar on desktop */
.listing-overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  bottom: 0.75rem;
  width: 380px;
  max-width: calc(100% - 1.5rem);
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--mls-radius);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 4;
}

.overlay-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Rendered inside a Google Maps InfoWindow, so this stays outside the
   .mls-search-widget scope — Google mounts it in its own container. */
.map-info-window {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width: 200px;
}

.map-info-window img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 0.4rem;
}

.map-info-price {
  font-weight: 700;
  color: var(--mls-primary);
  font-size: 1rem;
}

.map-info-address {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.map-info-stats {
  font-size: 0.78rem;
  color: var(--mls-text-muted);
  margin-top: 0.15rem;
}

.map-info-office {
  /* Matches .map-info-stats' size — CBRMLS §16.3.13 requires this not
     be smaller than the median text size in the display. */
  font-size: 0.78rem;
  color: var(--mls-text-muted);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #e2e2df;
}

.map-info-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mls-primary);
  text-decoration: none;
}

.map-info-link:hover {
  text-decoration: underline;
}

/* ---- Listing cards: compact horizontal layout (photo left, details
   right) so they work equally well stacked in a sidebar (desktop) or
   lined up in a horizontally-scrolling strip (mobile). ---- */
.listing-card {
  background: var(--mls-card-bg);
  border: 1px solid var(--mls-border);
  border-radius: var(--mls-radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
}

.listing-card:hover,
.listing-card.map-highlight {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--mls-primary);
}

.listing-photo-wrap {
  position: relative;
  width: 110px;
  flex-shrink: 0;
  background: #e9e9e6;
  overflow: hidden;
}

.listing-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-status-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: var(--mls-primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

.listing-body {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.listing-price {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mls-primary);
}

.listing-address {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-city {
  font-size: 0.76rem;
  color: var(--mls-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--mls-text-muted);
  margin-top: 0.15rem;
  flex-wrap: wrap;
}

.listing-office {
  /* CBRMLS §16.3.13 requires this text be no smaller than the median
     text size used elsewhere on the card (price 1.02rem, address
     0.82rem, city/stats 0.76rem) — matching .listing-city/.listing-stats
     rather than the smaller size this previously used. */
  font-size: 0.76rem;
  color: var(--mls-text-muted);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-status {
  text-align: center;
  padding: 1.5rem 0.75rem;
  color: var(--mls-text-muted);
  font-size: 0.85rem;
}

/* ---- Pagination: pinned footer of the overlay panel ---- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem;
  border-top: 1px solid var(--mls-border);
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 0 0 auto;
}

.pagination button {
  border: 1px solid var(--mls-border);
  background: #fff;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}

.pagination button[aria-current="true"] {
  background: var(--mls-primary);
  color: #fff;
  border-color: var(--mls-primary);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Modal ---- */
.listing-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.listing-modal[hidden] {
  display: none;
}

.listing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 25, 0.6);
}

.listing-modal-content {
  position: relative;
  background: #fff;
  border-radius: var(--mls-radius);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mls-text);
}

.listing-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.modal-loading,
.modal-error {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--mls-text-muted);
}

.modal-carousel {
  background: #fff;
  border-bottom: 1px solid var(--mls-border);
}

.carousel-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-main-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.carousel-main-embed {
  width: 100%;
  height: 100%;
}

.carousel-main-embed iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

.carousel-pdf-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--mls-bg);
  padding: 1.5rem;
  text-align: center;
}

.carousel-pdf-icon {
  width: 56px;
  height: 68px;
  background: var(--mls-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-pdf-caption {
  font-size: 0.9rem;
  color: var(--mls-text);
  font-weight: 600;
  max-width: 80%;
  word-break: break-word;
}

.carousel-pdf-link {
  display: inline-block;
  background: var(--mls-primary);
  color: #fff !important;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 4px;
}

.carousel-pdf-link:hover {
  background: #142f4a;
  color: #cacaca !important;
}

.carousel-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
  left: 0.75rem;
}

.carousel-next {
  right: 0.75rem;
}

.carousel-counter {
  position: absolute;
  bottom: 0.6rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
}

.carousel-thumbs {
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  overflow-x: auto;
  background: var(--mls-bg);
  border-top: 1px solid var(--mls-border);
}

.carousel-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.carousel-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  pointer-events: none;
}

.carousel-thumb-doc-placeholder {
  width: 100%;
  height: 100%;
  background: var(--mls-bg);
  color: var(--mls-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-thumb:hover {
  opacity: 1;
}

.carousel-thumb.active {
  opacity: 1;
  border-color: var(--mls-accent);
}

.modal-main {
  padding: 1rem 1.5rem 1.5rem;
}

.modal-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mls-primary);
  margin-bottom: .5rem;
}

.modal-address {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.modal-city {
  color: var(--mls-text-muted);
  margin-bottom: 0.75rem;
}

.modal-stats {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
  font-size: 0.9rem;
}

.modal-stats strong {
  display: block;
  font-size: 1.05rem;
  color: var(--mls-text);
}

.modal-remarks {
  line-height: 1.55;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.modal-agent {
  border-top: 1px solid var(--mls-border);
  padding-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--mls-text-muted);
}

.modal-compliance {
  font-size: 0.72rem;
  color: var(--mls-text-muted);
  border-top: 1px solid var(--mls-border);
  margin-top: 1rem;
  padding-top: 0.75rem;
}

/* ---- Contact form (in the listing detail modal) ---- */
.contact-form-section {
  border-top: 1px solid var(--mls-border);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
}

.contact-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mls-text);
  margin: 0 0 0.75rem;
  border-bottom: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mls-text-muted);
}

.contact-optional {
  font-weight: 400;
  text-transform: none;
}

.contact-field input,
.contact-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--mls-border);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

/* Invisible to real visitors — zero-sized and clipped rather than
   display:none (some simple bots skip display:none fields but still
   fill in ones that are merely invisible). Avoids position:absolute
   with a large offset, which could cause horizontal overflow inside
   the modal (.listing-modal-content only clips vertical overflow). */
.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-recaptcha {
  margin-top: 0.2rem;
}

.contact-submit {
  align-self: flex-start;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-status {
  font-size: 0.85rem;
  min-height: 1.2em;
}

.contact-status-success {
  color: #1a7a3c;
}

.contact-status-error {
  color: #b3261e;
}

@media (max-width: 640px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  .field, .field-wide {
    flex: 1 1 auto;
  }
  .field-actions {
    flex-direction: column;
  }
  .btn-search,
  .btn-clear {
    width: 100%;
  }

  /* Map shell: sidebar becomes a bottom sheet, cards scroll
     horizontally instead of stacking vertically. */
  .map-shell {
    height: 75vh;
    min-height: 480px;
  }

  .listing-overlay {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 200px;
    border-radius: var(--mls-radius) var(--mls-radius) 0 0;
  }

  .overlay-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.6rem;
    gap: 0.6rem;
  }

  .listing-card {
    flex: 0 0 240px;
    width: 240px;
    flex-direction: column;
  }

  .listing-photo-wrap {
    width: 100%;
    height: 90px;
  }

  .results-status {
    padding: 1rem 0.75rem;
  }

  .pagination {
    padding: 0.4rem 0.6rem;
  }
}