/**
 * BBS SimplyRETS Search Enhancements
 *
 * Contains two things:
 *   1. Styles migrated out of the site's Customizer "Additional CSS"
 *      (sections 9-12 plus the SimplyRETS rules from its tablet/mobile blocks).
 *   2. The plugin's own UI: location select, advanced filter panel, back link,
 *      and the listing-card compliance reposition.
 *
 * The migrated rules keep their original !important declarations. They were
 * written to out-weigh the Kadence theme and still need to. Anything in here
 * that must override them carries !important for the same reason.
 *
 * Colours are exposed as custom properties so a client site can retheme
 * without editing this file.
 *
 * @package BBSSimplyRETSSearch
 */

.bbsrs-form,
.sr-listings {
	--bbsrs-accent: #1d4667;
	--bbsrs-accent-ink: #ffffff;
	--bbsrs-border: #d8dde2;
	--bbsrs-border-strong: #b4bec7;
	--bbsrs-ink: #1f2c37;
	--bbsrs-muted: #5f7080;
	--bbsrs-surface: #ffffff;
	--bbsrs-surface-alt: #f4f6f8;
	--bbsrs-radius: 6px;
}

/* ======================= MIGRATED FROM CUSTOMIZER ======================= */

/* ================================================
   9. SIMPLYRETS — SEARCH FORM
   ================================================ */
.sr-search {
  background:    #ffffff !important;
  border-radius: 12px !important;
  box-shadow:    0 2px 16px rgba(30, 77, 114, 0.10) !important;
  padding:       28px 32px !important;
  margin-bottom: 36px !important;
  border:        1px solid #e2eaf2 !important;
}
.sr-minmax-filters {
  display:         flex !important;
  flex-wrap:       wrap !important;
  gap:             10px !important;
  margin-bottom:   12px !important;
  /* SimplyRETS' own stylesheet sets justify-content: space-between here, which
     spreads fixed-width fields (Location, Property Type) to opposite ends of the
     row. Force left packing so they sit together. */
  justify-content: flex-start !important;
}
.sr-search-field {
  flex: 1 1 auto !important;
}
.sr-search input[type="text"],
.sr-search input[type="number"],
.sr-search select {
  width:            100% !important;
  height:           44px !important;
  border:           1.5px solid #cbd5e0 !important;
  border-radius:    6px !important;
  padding:          8px 12px !important;
  font-family:      'Lexend Deca', sans-serif !important;
  font-size:        14px !important;
  color:            #333333 !important;
  background-color: #f8fafc !important;
  transition:       border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing:       border-box !important;
}
.sr-search input[type="text"]:focus,
.sr-search input[type="number"]:focus,
.sr-search select:focus {
  outline:          none !important;
  border-color:     #1e4d72 !important;
  box-shadow:       0 0 0 3px rgba(30, 77, 114, 0.12) !important;
  background-color: #ffffff !important;
}

/* Submit button */
input.submit.button.btn {
  background-color: #1e4d72 !important;
  color:            #ffffff !important;
  font-family:      'Lexend Deca', sans-serif !important;
  font-size:        15px !important;
  font-weight:      600 !important;
  padding:          10px 28px !important;
  border:           none !important;
  border-radius:    6px !important;
  cursor:           pointer !important;
  transition:       background-color 0.2s ease, transform 0.1s ease !important;
  height:           44px !important;
  letter-spacing:   0.02em !important;
}
input.submit.button.btn:hover {
  background-color: #16395a !important;
  transform:        translateY(-1px) !important;
}

/* Sort wrapper — base (desktop) */
.sr-sort-wrapper {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         8px !important;
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   13px !important;
  color:       #555555 !important;
}
.sr-sort-wrapper select {
  height:        36px !important;
  padding:       4px 12px !important;
  font-size:     13px !important;
  border-radius: 6px !important;
  border:        1.5px solid #cbd5e0 !important;
  background:    #f8fafc !important;
}

/* Results heading */
.sr-listings-title {
  font-family:   'Lexend Deca', sans-serif !important;
  font-size:     22px !important;
  font-weight:   700 !important;
  color:         #1e4d72 !important;
  margin-bottom: 20px !important;
}

/* Map */
#sr-map-canvas {
  border-radius: 10px !important;
  overflow:      hidden !important;
  margin-bottom: 28px !important;
  border:        1px solid #e2eaf2 !important;
}



/* ================================================
   10. SIMPLYRETS — LISTING CARDS
   ================================================ */
.sr-listing {
  background:    #ffffff !important;
  border:        1px solid #e2eaf2 !important;
  border-radius: 10px !important;
  box-shadow:    0 2px 10px rgba(30, 77, 114, 0.07) !important;
  overflow:      hidden !important;
  margin-bottom: 20px !important;
  display:       flex !important;
  flex-direction: row !important;
  transition:    box-shadow 0.2s ease, transform 0.2s ease !important;
}
.sr-listing:hover {
  box-shadow: 0 6px 24px rgba(30, 77, 114, 0.15) !important;
  transform:  translateY(-2px) !important;
}
.sr-photo {
  width:              280px !important;
  min-width:          280px !important;
  height:             220px !important;
  overflow:           hidden !important;
  position:           relative !important;
  flex-shrink:        0 !important;
  background-size:    cover !important;
  background-position: center !important;
}
.sr-photo img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
}
.sr-listing-status-banner {
  border-radius: 0 0 6px 0 !important;
  font-family:   'Lexend Deca', sans-serif !important;
  font-size:     11px !important;
  font-weight:   600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.sr-listing-status-banner-active  { background-color: rgba(30, 77, 114, 0.85) !important; }
.sr-listing-status-banner-pending { background-color: rgba(180, 120, 0, 0.85) !important; }

.sr-listing-data-wrapper {
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: space-between !important;
  padding:         18px 22px !important;
  flex:            1 !important;
  width:           auto !important;
}
.sr-primary-data {
  background:    transparent !important;
  padding:       0 0 12px 0 !important;
  border-bottom: 1px solid #e8eff6 !important;
  margin-bottom: 12px !important;
}
.sr-primary-data h4 {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   16px !important;
  font-weight: 600 !important;
  color:       #1e4d72 !important;
  margin:      0 0 6px 0 !important;
  line-height: 1.4 !important;
}
.sr-primary-data h4 a        { color: #1e4d72 !important; text-decoration: none !important; }
.sr-primary-data h4 a:hover  { color: #2E6DA4 !important; text-decoration: underline !important; }

.sr-price {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   20px !important;
  font-weight: 700 !important;
  color:       #1e4d72 !important;
  display:     block !important;
  margin-top:  6px !important;
}
.sr-secondary-data {
  padding:   0 !important;
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       0 32px !important;
}
.sr-data-column {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}
.sr-data-column-item {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   13px !important;
  color:       #555555 !important;
  line-height: 1.8 !important;
  list-style:  none !important;
}
.sr-data-column-item::before {
  content:     "·  " !important;
  color:       #1e4d72 !important;
  font-weight: 700 !important;
}

.more-details-link a {
  font-family:      'Lexend Deca', sans-serif !important;
  font-size:        13px !important;
  font-weight:      600 !important;
  color:            #ffffff !important;
  background-color: #1e4d72 !important;
  padding:          7px 18px !important;
  border-radius:    6px !important;
  text-decoration:  none !important;
  transition:       background-color 0.2s ease !important;
  display:          inline-block !important;
}
.more-details-link a:hover { background-color: #16395a !important; color: #ffffff !important; }

.result-compliance-markup {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   11px !important;
  color:       #aaaaaa !important;
  font-style:  italic !important;
}
.sr-pagination-wrapper {
  text-align:    center !important;
  margin:        32px 0 16px !important;
}
.sr-pagination {
  display:         inline-flex !important;
  gap:             6px !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
}
.sr-pagination a,
.sr-pagination span {
  font-family:     'Lexend Deca', sans-serif !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  color:           #1e4d72 !important;
  background:      #ffffff !important;
  border:          1.5px solid #c5d5e4 !important;
  border-radius:   6px !important;
  padding:         6px 14px !important;
  text-decoration: none !important;
  transition:      background 0.15s, color 0.15s !important;
  display:         inline-block !important;
}
.sr-pagination a:hover,
.sr-pagination .current {
  background:   #1e4d72 !important;
  color:        #ffffff !important;
  border-color: #1e4d72 !important;
}
.sr-disclaimer-text {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size:   11px !important;
  color:       #aaaaaa !important;
  text-align:  center !important;
  margin-top:  20px !important;
  padding-top: 16px !important;
  border-top:  1px solid #eeeeee !important;
}



/* ================================================
   11. SIMPLYRETS — LISTING DETAIL PAGE
   ================================================ */
.sr-details-links { margin-bottom: 22px !important; }
.sr-details-links a {
  font-family:     'Lexend Deca', sans-serif !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  color:           #1e4d72 !important;
  text-decoration: none !important;
  display:         inline-flex !important;
  align-items:     center !important;
  padding:         7px 16px !important;
  border:          1.5px solid #1e4d72 !important;
  border-radius:   6px !important;
  margin-right:    8px !important;
  background:      #ffffff !important;
  transition:      background 0.2s, color 0.2s !important;
}
.sr-details-links a:hover { background: #1e4d72 !important; color: #ffffff !important; }

.sr-gallery {
  border-radius: 14px !important;
  overflow:      hidden !important;
  box-shadow:    0 6px 28px rgba(30, 77, 114, 0.14) !important;
  margin-bottom: 28px !important;
}
.sr-primary-details {
  display:       flex !important;
  gap:           14px !important;
  flex-wrap:     wrap !important;
  margin-bottom: 28px !important;
  padding:       0 !important;
}
.sr-detail {
  flex:          1 !important;
  min-width:     110px !important;
  background:    #f0f5fa !important;
  border:        1.5px solid #c5d5e4 !important;
  border-radius: 10px !important;
  padding:       16px 18px !important;
  text-align:    center !important;
  box-shadow:    0 1px 4px rgba(30, 77, 114, 0.07) !important;
}
.sr-detail h3 { font-family: 'Lexend Deca', sans-serif !important; margin: 0 !important; }
.sr-detail h3 .stat-num {
  display:       block !important;
  font-size:     28px !important;
  font-weight:   700 !important;
  color:         #1e4d72 !important;
  line-height:   1.1 !important;
  margin-bottom: 4px !important;
}
.sr-detail h3 .stat-label {
  display:        block !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  color:          #7a9ab8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Status pill: last stat box = Active */
.sr-detail:last-child { background: #1e4d72 !important; border-color: #1e4d72 !important; }
.sr-detail:last-child h3 .stat-num   { color: #ffffff !important; }
.sr-detail:last-child h3 .stat-label { color: rgba(255, 255, 255, 0.65) !important; }

.sr-remarks-details {
  background:    #f8fafc !important;
  border-left:   4px solid #1e4d72 !important;
  border-radius: 0 10px 10px 0 !important;
  padding:       20px 24px !important;
  margin-bottom: 32px !important;
  font-family:   'Lexend Deca', sans-serif !important;
  font-size:     15px !important;
  color:         #444444 !important;
  line-height:   1.75 !important;
}

/* Detail tables */
.sr-details table {
  width:           100% !important;
  border-collapse: collapse !important;
  border-radius:   10px !important;
  overflow:        hidden !important;
  box-shadow:      0 1px 8px rgba(30, 77, 114, 0.08) !important;
  margin-bottom:   32px !important;
}
.sr-details table th {
  background:      #e8f0f7 !important;
  color:           #1e4d72 !important;
  font-family:     'Lexend Deca', sans-serif !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  text-transform:  uppercase !important;
  letter-spacing:  0.08em !important;
  padding:         11px 18px !important;
  text-align:      left !important;
}
.sr-details table td {
  font-family:    'Lexend Deca', sans-serif !important;
  font-size:      14px !important;
  padding:        10px 18px !important;
  border-bottom:  1px solid #e8eff6 !important;
  vertical-align: top !important;
  color:          #333333 !important;
}
.sr-details table td:first-child {
  font-weight: 600 !important;
  color:       #1e4d72 !important;
  width:       35% !important;
  background:  #fafcff !important;
}
.sr-details table tr:nth-child(even) td            { background: #f5f9fc !important; }
.sr-details table tr:nth-child(even) td:first-child { background: #eef4f9 !important; }
.sr-details table tr:last-child td                  { border-bottom: none !important; }

/* Contact form on detail page */
.sr-details .wpcf7 {
  background:    #f8fafc !important;
  border:        1px solid #e2eaf2 !important;
  border-radius: 12px !important;
  padding:       28px 32px !important;
  margin-top:    16px !important;
}
.sr-details .wpcf7 input[type=text],
.sr-details .wpcf7 input[type=email],
.sr-details .wpcf7 textarea {
  border:        1.5px solid #cbd5e0 !important;
  border-radius: 6px !important;
  font-family:   'Lexend Deca', sans-serif !important;
  font-size:     14px !important;
  padding:       10px 14px !important;
  width:         100% !important;
  background:    #ffffff !important;
  box-sizing:    border-box !important;
  transition:    border-color 0.2s, box-shadow 0.2s !important;
}
.sr-details .wpcf7 input[type=text]:focus,
.sr-details .wpcf7 input[type=email]:focus,
.sr-details .wpcf7 textarea:focus {
  outline:      none !important;
  border-color: #1e4d72 !important;
  box-shadow:   0 0 0 3px rgba(30, 77, 114, 0.12) !important;
}
.sr-details .wpcf7 input[type=submit] {
  background:    #1e4d72 !important;
  color:         #ffffff !important;
  font-family:   'Lexend Deca', sans-serif !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  padding:       10px 28px !important;
  border:        none !important;
  border-radius: 6px !important;
  cursor:        pointer !important;
  transition:    background 0.2s !important;
}
.sr-details .wpcf7 input[type=submit]:hover { background: #16395a !important; }



/* ================================================
   12. SEARCH FORM ENHANCEMENTS — price slider + chips
   ================================================ */

/* Price range slider */
.rt-price-slider-group {
  background:    #f8fafc;
  border:        1.5px solid #e2eaf2;
  border-radius: 8px;
  padding:       16px 20px;
  margin-bottom: 14px;
}
.rt-slider-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   14px;
}
.rt-slider-label {
  font-family:    'Lexend Deca', sans-serif;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          #7a9ab8;
}
.rt-price-display {
  font-family: 'Lexend Deca', sans-serif;
  font-size:   14px;
  font-weight: 700;
  color:       #1e4d72;
}
.rt-dual-slider {
  position:  relative;
  height:    28px;
  --min-pct: 0%;
  --max-pct: 100%;
}
.rt-dual-slider::before {
  content:   '';
  position:  absolute;
  top: 50%; transform: translateY(-50%);
  left: 0; right: 0;
  height:    4px;
  background: #dde7f0;
  border-radius: 2px;
  z-index:   0;
}
.rt-dual-slider::after {
  content:   '';
  position:  absolute;
  top: 50%; transform: translateY(-50%);
  left:  var(--min-pct);
  right: calc(100% - var(--max-pct));
  height:        4px;
  background:    #1e4d72;
  border-radius: 2px;
  z-index:       1;
  pointer-events: none;
}
.rt-dual-slider input[type=range] {
  position:   absolute;
  width:      100%;
  height:     100%;
  top: 0; left: 0;
  -webkit-appearance: none;
  appearance:    none;
  background:    transparent;
  pointer-events: none;
  z-index:       2;
  margin:        0;
  padding:       0;
}
.rt-dual-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    #1e4d72;
  border:        2.5px solid #fff;
  box-shadow:    0 1px 6px rgba(30, 77, 114, 0.35);
  cursor:        pointer;
  pointer-events: all;
}
.rt-dual-slider input[type=range]::-moz-range-thumb {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    #1e4d72;
  border:        2.5px solid #fff;
  box-shadow:    0 1px 6px rgba(30, 77, 114, 0.35);
  cursor:        pointer;
  pointer-events: all;
}

/* Bed/bath chips */
.rt-chips-container { margin-bottom: 14px; }
.rt-chip-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 10px;
}
.rt-chip-label {
  font-family:    'Lexend Deca', sans-serif;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          #7a9ab8;
  min-width:      88px;
}
.rt-chips {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}
.rt-chip {
  font-family:   'Lexend Deca', sans-serif;
  font-size:     13px;
  font-weight:   500;
  color:         #1e4d72;
  background:    #ffffff;
  border:        1.5px solid #c5d5e4;
  border-radius: 20px;
  padding:       5px 14px;
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.rt-chip:hover        { background: #e8f0f7; border-color: #1e4d72; }
.rt-chip.rt-chip-active { background: #1e4d72; color: #ffffff; border-color: #1e4d72; }


/* ================================================
   13. SORT WRAPPER FIX — ≤1024px
   (float: right overflows narrower viewports)
   ================================================ */
@media (max-width: 1024px) {
  .sr-sort-wrapper {
    float:       none !important;
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    margin-top:  10px !important;
    width:       100% !important;
    box-sizing:  border-box !important;
  }
  .sr-sort-wrapper select.select {
    flex:      1 !important;
    min-width: 0 !important;
    height:    44px !important;
  }
  .sr-sort-wrapper label {
    white-space: nowrap !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size:   14px !important;
    color:       #333333 !important;
  }
}



/* ---- from section 14 (tablet) ---- */
@media (max-width: 1024px) and (min-width: 768px) {

  /* Listing cards: stack photo above content */
  .sr-listing       { flex-direction: column !important; }
  .sr-photo         { width: 100% !important; min-width: 100% !important; height: 220px !important; }
  .sr-listing-data-wrapper { width: 100% !important; box-sizing: border-box !important; }
}


/* ---- from section 15 (mobile) ---- */
@media (max-width: 767px) {

  /* ── Listing cards: stack vertically ────────── */
  .sr-listing         { flex-direction: column !important; }
  .sr-photo           { width: 100% !important; min-width: 100% !important; height: 200px !important; flex-shrink: unset !important; }
  .sr-listing-data-wrapper { padding: 14px 16px !important; width: 100% !important; box-sizing: border-box !important; }
  .sr-primary-data h4 { font-size: 15px !important; }
  .sr-price           { font-size: 17px !important; }
  .sr-secondary-data  { gap: 0 !important; flex-direction: column !important; }


  /* ── Search form ─────────────────────────────── */
  .sr-search          { padding: 18px 16px !important; margin-bottom: 24px !important; }
  .sr-minmax-filters  { margin-bottom: 6px !important; gap: 8px !important; }

  /* Hide second filter row once JS hides its inputs */
  .sr-minmax-filters:not(:first-child):empty,
  .sr-minmax-filters:not(:first-child):has(> [style*="display: none"]:only-child) {
    display: none !important;
    margin:  0 !important;
  }

  /* ── Sort wrapper ────────────────────────────── */
  .sr-sort-wrapper            { flex-direction: row !important; flex-wrap: wrap !important; }
  .sr-sort-wrapper select     { flex: 1 !important; }

  /* ── Price slider ────────────────────────────── */
  .rt-price-slider-group { padding: 14px !important; }
  .sr-search .rt-price-slider-group,
  .sr-search .rt-chips-container { margin-top: 0 !important; }

  /* ── Bed/bath chips ──────────────────────────── */
  .rt-chip-row  { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .rt-chip-label { min-width: unset !important; }
  .rt-chips     { gap: 6px !important; }
  .rt-chip      { font-size: 13px !important; padding: 5px 12px !important; }

  /* ── Detail page stat boxes: 2-up grid ─────── */
  .sr-primary-details {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   10px !important;
  }
  .sr-detail              { flex: unset !important; }
  .sr-detail h3 .stat-num { font-size: 22px !important; }

  /* ── Detail page description ─────────────────── */
  .sr-remarks-details { padding: 16px 18px !important; font-size: 14px !important; }

  /* ── Detail page tables: scroll + smaller text ─ */
  .sr-details table            { display: block !important; overflow-x: auto !important; }
  .sr-details table td         { font-size: 13px !important; padding: 8px 12px !important; }
  .sr-details table td:first-child { width: 42% !important; }

  /* ── Detail page contact form ────────────────── */
  .sr-details .wpcf7 { padding: 20px 18px !important; }
}



/* ========================= PLUGIN UI ========================= */

/* ---------------------------------------------------------------- fields - */

.bbsrs-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.bbsrs-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbsrs-muted);
	line-height: 1.2;
}

.bbsrs-input {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--bbsrs-border);
	border-radius: var(--bbsrs-radius);
	background: var(--bbsrs-surface);
	color: var(--bbsrs-ink);
	font-size: 15px;
	line-height: 1.35;
	box-shadow: none;
}

.bbsrs-input:focus {
	outline: 2px solid var(--bbsrs-accent);
	outline-offset: 1px;
	border-color: var(--bbsrs-accent);
}

select.bbsrs-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 32px;
	background-image: linear-gradient( 45deg, transparent 50%, var(--bbsrs-muted) 50% ), linear-gradient( 135deg, var(--bbsrs-muted) 50%, transparent 50% );
	background-position: right 15px top 50%, right 10px top 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.bbsrs-field-location {
	flex: 1 1 210px;
	max-width: 260px;
	margin-bottom: 10px;
}

/* Location and Property Type share the top row. The MLS-number lookup moves
   into the advanced panel (.bbsrs-field-keywords, styled with the panel rules
   further down); it only stays in this row when the panel is disabled. */

.bbsrs-form .sr-search-field.bbsrs-ptype-field {
	flex: 1 1 210px !important;
	max-width: 260px !important;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bbsrs-form .sr-search-field.bbsrs-keywords-field:not(.bbsrs-field-keywords) {
	flex: 1 1 100% !important;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 10px;
}

.bbsrs-form .bbsrs-keywords-field:not(.bbsrs-field-keywords) input[name="sr_keywords"] {
	max-width: 300px;
	height: 38px !important;
	font-size: 13px !important;
	background-color: var(--bbsrs-surface-alt) !important;
}

@media ( max-width: 600px ) {
	.bbsrs-form .sr-search-field.bbsrs-ptype-field {
		max-width: none !important;
	}

	.bbsrs-form .bbsrs-keywords-field:not(.bbsrs-field-keywords) input[name="sr_keywords"] {
		max-width: none;
	}
}

/* --------------------------------------------------------------- toggle - */

.bbsrs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	padding: 10px 16px;
	border: 1px solid var(--bbsrs-accent);
	border-radius: var(--bbsrs-radius);
	background: transparent;
	color: var(--bbsrs-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bbsrs-toggle:hover,
.bbsrs-toggle:focus-visible {
	background: var(--bbsrs-accent);
	color: var(--bbsrs-accent-ink);
}

.bbsrs-toggle:focus-visible {
	outline: 2px solid var(--bbsrs-accent);
	outline-offset: 2px;
}

.bbsrs-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--bbsrs-accent);
	color: var(--bbsrs-accent-ink);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bbsrs-toggle:hover .bbsrs-badge,
.bbsrs-toggle:focus-visible .bbsrs-badge {
	background: var(--bbsrs-accent-ink);
	color: var(--bbsrs-accent);
}

/* ---------------------------------------------------------------- panel - */

.bbsrs-panel {
	width: 100%;
	margin: 16px 0 4px;
	padding: 18px;
	border: 1px solid var(--bbsrs-border);
	border-radius: var(--bbsrs-radius);
	background: var(--bbsrs-surface-alt);
}

.bbsrs-panel[hidden] {
	display: none;
}

.bbsrs-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 16px;
	align-items: end;
}

/* Multi-select filters (Property style, Lot size, Lot features, Must have) run
   full width so their checkboxes wrap on one line each. */

.bbsrs-field-group {
	grid-column: 1 / -1;
}

.bbsrs-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 2px;
}

.bbsrs-check-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--bbsrs-ink);
	cursor: pointer;
}

/* The MLS-number lookup, relocated into the panel: full width, set off with a
   rule above it, drawn quieter than the filters. */

.bbsrs-field-keywords {
	grid-column: 1 / -1;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--bbsrs-border);
}

.bbsrs-field-keywords input[name="sr_keywords"] {
	max-width: 340px;
	height: 42px !important;
	font-size: 14px !important;
}

.bbsrs-field-check {
	flex-direction: row;
	align-items: center;
	gap: 9px;
	min-height: 42px;
}

.bbsrs-check {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: none;
	accent-color: var(--bbsrs-accent);
}

.bbsrs-check-label {
	font-size: 15px;
	color: var(--bbsrs-ink);
	line-height: 1.3;
	cursor: pointer;
}

/* -------------------------------------- listing card: photo + footer bar - */

/*
 * SimplyRETS wraps the card photo in a bare <a>. As a flex item that anchor is
 * only as wide as its content, so the moment the card stacks (<=1024px) the
 * photo's background-image box collapses to the width of the status banner.
 * Forcing the anchor to fill the row restores it.
 */

.sr-listing > a {
	display: block;
}

@media ( max-width: 1024px ) {
	.sr-listing > a {
		flex: 0 0 auto;
		width: 100%;
	}
}

/*
 * SimplyRETS nests the IDX attribution beside the "More details" button, where
 * it reserves the full right-hand column and leaves the button stranded in the
 * middle of the card. Turning the wrapper into a full-width footer bar gives the
 * button a home (right) and the attribution the rest of the line (left), and
 * returns the reclaimed column width to the listing data.
 *
 * !important is required here, not stylistic: the migrated card rules above are
 * all !important and an !important declaration beats any specificity. These
 * overrides must match its weight.
 *
 * The attribution stays visible and legible at 12px, displayed with the
 * listing: IDX rules require that, so it must not be hidden or shrunk further.
 */

.sr-listing {
	flex-wrap: wrap !important;
	align-items: flex-start !important;
}

.sr-listing > .more-details-wrapper {
	order: 99;
	flex: 0 0 100% !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-top: 12px !important;
	padding-top: 10px !important;
	border-top: 1px solid var(--bbsrs-border) !important;
}

.sr-listing .result-compliance-markup {
	order: 1;
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 0 !important;
	text-align: left !important;
}

.sr-listing .more-details-link {
	order: 2;
	flex: 0 0 auto;
}

.sr-listing .sr-listing-summary-compliance {
	font-size: 12px;
	line-height: 1.4;
}

@media ( max-width: 600px ) {
	.sr-listing > .more-details-wrapper {
		flex-direction: column;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.sr-listing .more-details-link a {
		display: block;
		text-align: center;
	}
}

/* ------------------------------------------------------------ back link - */

.bbsrs-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 9px 15px 9px 12px;
	border: 1px solid var(--bbsrs-border-strong);
	border-radius: var(--bbsrs-radius);
	background: var(--bbsrs-surface);
	color: var(--bbsrs-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bbsrs-back:hover,
.bbsrs-back:focus-visible {
	background: var(--bbsrs-surface-alt);
	border-color: var(--bbsrs-accent);
	text-decoration: none;
}

.bbsrs-back:focus-visible {
	outline: 2px solid var(--bbsrs-accent);
	outline-offset: 2px;
}

.bbsrs-back-arrow {
	font-size: 16px;
	line-height: 1;
}

/* --------------------------------------------------------------- mobile - */

@media ( max-width: 600px ) {
	.bbsrs-field-location {
		max-width: none;
		flex-basis: 100%;
	}

	.bbsrs-toggle {
		width: 100%;
		justify-content: center;
		margin: 10px 0 0;
	}

	.bbsrs-panel {
		padding: 14px;
	}

	.bbsrs-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bbsrs-toggle,
	.bbsrs-back {
		transition: none;
	}
}