/* Elementor-friendly variables */
:root{
  --hblaa-accent:#2563eb;
  --hblaa-bg:#f6f7fb;
  --hblaa-radius:18px;
  --hblaa-font:inherit;
}

/* Search shortcode styling */
.hbl-search__form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:end; max-width:1100px;
}
.hbl-search__field{ display:flex; flex-direction:column; gap:6px; min-width:180px; }
.hbl-search__field label{ font-size:13px; opacity:.8; }
.hbl-search__field input, .hbl-search__field select{
  height:40px; padding:6px 10px; border:1px solid rgba(15,23,42,.12); border-radius:12px;
}
.hbl-search__btn{
  height:40px; 
  padding:0 14px; 
  border:1px solid rgba(15,23,42,.18);
  border-radius:12px;
  background:#fff; 
  cursor:pointer;
  color:black !important;
}


@media (max-width:700px){
  .hbl-search__field{ min-width:100%; }
  .hbl-search__btn{ width:100%; }
}

.hbl-note{ margin-top:12px; opacity:.85; }
.hbl-note--error{ color:#b00; opacity:1; }

.hbl-results{ margin-top:16px; }
.hbl-results__list{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }

.hbl-card{
  display:flex; gap:14px; align-items:stretch;
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:12px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.hbl-card__media{ width:230px; min-width:230px; height:160px; border-radius:16px; overflow:hidden; background:#f1f5ff; border:1px solid rgba(15,23,42,.08); }
.hbl-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hbl-card__ph{ width:100%; height:100%; }
.hbl-card__body{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:10px; }
.hbl-card__title{ margin:0; font-weight:900; font-size:18px; }
.hbl-card__desc{ margin:0; opacity:.8; font-size:13px; line-height:1.5; max-width:80ch; }
.hbl-card__bottom{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.hbl-card__price{ opacity:.85; font-size:13px; }

.hbl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--hblaa-accent) 35%, transparent);
  color: var(--hblaa-accent);
  background: color-mix(in srgb, var(--hblaa-accent) 12%, transparent);
  text-decoration:none; font-weight:800; font-size:13px;
}
@media (max-width:900px){
  .hbl-card{ flex-direction:column; }
  .hbl-card__media{ width:100%; min-width:100%; height:210px; }
}