/* Minimal theme-friendly styling. Designed to inherit Compass theme typography while
   providing a crisp, accessible UI. */
.chl-directory, .chl-mini {
  --chl-primary: #E71781;
  --chl-secondary: #231B4A;
  --chl-tertiary: #33BCBB;
  --chl-border: rgba(0,0,0,.16);
  --chl-border-strong: rgba(0,0,0,.22);
  --chl-surface: #fff;
  --chl-muted: rgba(0,0,0,.65);
}
.chl-directory, .chl-mini, .chl-footer { font: inherit; color: inherit; }
.chl-directory__layout { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media (max-width: 980px){ .chl-directory__layout { grid-template-columns: 1fr; } }

.chl-directory__top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.chl-directory__helper, .chl-mini__helper { margin:0; }
.chl-directory__toggle { display:flex; gap:8px; }
.chl-toggle { padding:10px 14px; border-radius: 10px; border: 1px solid var(--chl-border); background: var(--chl-surface); cursor:pointer; font-weight:700; }
.chl-toggle.is-active { border-color: var(--chl-secondary); }

.chl-filters { border-radius: 14px; border: 1px solid var(--chl-border); padding: 16px; background: var(--chl-surface); }
.chl-filter + .chl-filter { margin-top: 16px; }
.chl-filter__title { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.chl-filter__row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chl-input, .chl-select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--chl-border-strong); width: 100%; max-width: 180px; }
.chl-select { max-width: 100%; }
.chl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--chl-border-strong); background: var(--chl-surface); cursor:pointer; text-decoration:none; font-weight:800; line-height:1.1; }
.chl-btn:focus-visible { outline: 3px solid rgba(51,117,194,.35); outline-offset: 2px; }
.chl-btn--ghost { background: transparent; }
.chl-btn--primary{ background: var(--chl-primary); border-color: var(--chl-primary); color: #fff; }
.chl-btn--secondary{ background: var(--chl-secondary); border-color: var(--chl-secondary); color: #fff; }
.chl-btn--tertiary{ background: var(--chl-tertiary); border-color: var(--chl-tertiary); color: #231B4A; }
.chl-btn--sm { padding: 8px 12px; font-size: .95rem; }
.chl-linkbtn { background: none; border: none; padding: 0; cursor:pointer; text-decoration: underline; }

.chl-views { position: relative; }
.chl-map { width: 100%; height: 520px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(0,0,0,.12); }
.chl-mini__layout { display:grid; grid-template-columns: 340px 1fr; gap: 24px; }
@media (max-width: 980px){ .chl-mini__layout { grid-template-columns: 1fr; } .chl-map { height: 420px; } }

.chl-results-under-map { margin-top: 14px; }
.chl-results__meta { margin: 0 0 10px; font-weight: 600; }
.chl-results { display:grid; gap: 12px; }

.chl-card { border-radius: 14px; border: 1px solid rgba(0,0,0,.12); padding: 14px; background:#fff; }
.chl-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; }
.chl-card__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.chl-card__addr, .chl-card__phone { margin: 8px 0 0; }
.chl-card__dist { font-weight:700; font-size:.95rem; opacity:.8; }
.chl-card__actions { display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; }

.chl-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.chl-chip { display:inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: .9rem; }
.chl-chip--more{ background: rgba(231,23,129,.12); color: var(--chl-secondary); font-weight:800; }

.chl-acc { border-top: 1px solid rgba(0,0,0,.10); padding-top: 10px; margin-top: 10px; }
.chl-acc__btn { width:100%; display:flex; justify-content:space-between; align-items:center; padding: 12px 10px; background: var(--chl-surface); border: 1px solid var(--chl-border); border-radius: 12px; cursor:pointer; font-weight: 900; }
.chl-acc__chev{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius: 8px; border: 1px solid var(--chl-border); color: var(--chl-muted); }
.chl-acc__btn[aria-expanded='true'] .chl-acc__chev i{ transform: rotate(180deg); }
.chl-acc__chev i{ transition: transform .18s ease; }
.chl-acc__panel { padding-bottom: 10px; }
.chl-acc__list { display:grid; gap: 10px; }
.chl-check { display:flex; gap:10px; align-items:flex-start; }
.chl-check input { margin-top: 3px; }

.chl-empty { padding: 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,.12); background:#fff; }

.chl-footer__list { margin: 10px 0 14px; padding-left: 18px; }
.chl-footer__title { margin: 0 0 8px; font-weight: 800; }

.chl-location { border-radius: 14px; border: 1px solid rgba(0,0,0,.12); padding: 16px; background:#fff; }
.chl-location__title { margin: 0 0 8px; font-weight: 900; }
.chl-location__addr, .chl-location__phone { margin: 6px 0 0; }
.chl-location__actions { display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; }


/* Dropdown indicators */
.chl-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.65)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px 16px;
  border:1px solid var(--chl-border);
}

.chl-directory__toggle{
  position:relative;
  padding-right:2.25rem;
}
.chl-directory__toggle::after{
  content:'';
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.65)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:16px 16px;
}
.chl-directory__toggle[aria-expanded='true']::after{
  transform:translateY(-50%) rotate(180deg);
}


/* Proximity units */
.chl-input-with-suffix{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.chl-input-suffix{
  font-weight:700;
  color: rgba(0,0,0,.7);
  font-size:.95rem;
}


/* Leaflet popup hierarchy */
.chl-popup{
  max-width: 320px;
}
.chl-popup__title{
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .25rem 0;
}
.chl-popup__meta{
  font-size: .95rem;
  line-height: 1.35;
  margin: 0 0 .35rem 0;
}
.chl-popup__services{
  margin: .4rem 0 .6rem 0;
}
.chl-popup__actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.25rem;
}
.leaflet-popup-content{
  margin: 14px 16px;
}