/* ================================================================
   TDR Showcase IDX Geo Styles — v2.2.0
   Styles for distance badges and direction buttons injected into
   Showcase IDX listing cards and detail pages.
   Card-level badges reuse .tdr-dist-badge / .tdr-dir-btn from
   tdr-geo.css so only SIDX-specific layouts are defined here.
================================================================ */

/* ── Geo row injected into grid cards ───────────────────────── */
.tdr-sidx-geo-row {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         6px 10px 8px;
  flex-wrap:       wrap;
}

/* Reuse badge styles from tdr-geo.css (.tdr-dist-badge already covers these);
   this just ensures the badge is visible when the geo row is the injection point */
.tdr-sidx-geo-row .tdr-dist-badge {
  font-size:  11px;
  padding:    3px 8px;
}

.tdr-sidx-geo-row .tdr-dir-btn {
  font-size:    11px;
  padding:      3px 10px;
  margin-left:  auto;
}

/* ── Detail page geo bar ────────────────────────────────────── */
.tdr-sidx-detail-bar {
  display:          flex;
  align-items:      center;
  gap:              14px;
  flex-wrap:        wrap;
  background:       #fff8f0;
  border:           1px solid #f0c080;
  border-radius:    8px;
  padding:          10px 16px;
  margin:           12px 0 18px;
  font-family:      inherit;
}

.tdr-sidx-dist {
  font-size:    14px;
  font-weight:  600;
  color:        #c8620a;
}

.tdr-sidx-dir-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              5px;
  background:       #c8620a;
  color:            #fff !important;
  text-decoration:  none !important;
  font-size:        13px;
  font-weight:      600;
  padding:          7px 16px;
  border-radius:    6px;
  white-space:      nowrap;
  transition:       background 0.2s;
  margin-left:      auto;
}
.tdr-sidx-dir-btn:hover {
  background: #a8500a;
}

/* ── "Closest to me" button — same design as the Places grid ── */
/* (tdr-places.css covers .tdr-closest-btn globally; these rules
   handle the case where tdr-places.css is not loaded on IDX pages) */
#tdr-sidx-closest-btn.tdr-closest-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  background:   #fff;
  border:       1.5px solid #c8620a;
  color:        #c8620a;
  font-size:    13px;
  font-weight:  600;
  padding:      7px 16px;
  border-radius: 20px;
  cursor:       pointer;
  margin:       0 0 14px;
  transition:   background 0.2s, color 0.2s;
}
#tdr-sidx-closest-btn.tdr-closest-btn:hover,
#tdr-sidx-closest-btn.tdr-closest-active {
  background: #c8620a;
  color:      #fff;
}