/*
 * Ported from the original widget's JS-injected <style> block. Selectors are
 * scoped to the stable ".bdw-widget" class rather than a per-instance element
 * ID, since PHP renders a fresh instance ID for every [business_directory]
 * placement on a page.
 */
/* Horizontal filter bar above the results grid — deliberately not a .card, just a light strip. */
.bdw-widget .bdw-filters { background:#f8f9fa; border:1px solid rgba(0,0,0,.06); border-radius:.5rem; padding:1rem; }

/* Force the keyword/category/badge inputs and the search/reset buttons to a
   uniform height. Deliberately NOT switching their `display` (Bootstrap's
   .form-control/.form-select rely on display:block + width:100% to fill
   their container — overriding display here would break that), just fixing
   height + line-height, the classic way to vertically center single-line
   text in a block-level element without touching layout/width behavior. */
.bdw-widget .bdw-filters .form-control,
.bdw-widget .bdw-filters .form-select,
.bdw-widget .bdw-filters .btn {
  height: 42px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.bdw-widget .dw-ico { display:inline-flex; align-items:center; justify-content:center; width:1.1rem; height:1.1rem; margin-right:.35rem; vertical-align:-2px; color:#6c757d; font-size:1rem; }
.bdw-widget .dw-ico i { line-height:1; }
.bdw-widget .dw-horizontal { display:flex; gap:1rem; padding:1rem; border:1px solid rgba(0,0,0,.08); border-radius:.5rem; background:#fff; height:100%; }
.bdw-widget .dw-thumb { width:120px; min-width:120px; height:120px; object-fit:cover; border-radius:.5rem; background:#f8f9fa; }
.bdw-widget .dw-badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.bdw-widget .dw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.bdw-widget .dw-card-footer { background:transparent; border-top:0; }

/* Logo overlay at the bottom of the hero image */
.bdw-widget .dw-logo-overlay {
  position: absolute;
  bottom: -24px;
  left: 16px;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  overflow: hidden;
  top: auto;
}
.bdw-widget .dw-logo-overlay img { width:80%; height:80%; object-fit:contain; }
.bdw-widget .dw-card-body { position: relative; margin-top: 32px; }

/* Hero area with placeholder */
.bdw-widget .bdw-hero { position: relative; }
.bdw-widget .bdw-hero-img { width: 100%; height: 100%; object-fit: cover; }
.bdw-widget .bdw-hero-placeholder { width: 100%; height: 100%; background: #f1f3f5; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: .9rem; }

/* Skeleton loading cards — greyed-out blocks with a shimmer sweeping across,
   shown in the same card/grid shape as real results while they load. */
.bdw-widget .bdw-skeleton-card { pointer-events: none; }
.bdw-widget .bdw-skeleton {
  background: linear-gradient(90deg, #e9ecef 25%, #f3f4f6 37%, #e9ecef 63%);
  background-size: 400% 100%;
  animation: bdw-shimmer 1.4s ease infinite;
}
.bdw-widget .bdw-skeleton-line { height: 14px; border-radius: 4px; }
.bdw-widget .bdw-skeleton-title { height: 18px; width: 70%; }
.bdw-widget .bdw-skeleton-line-sm { width: 50%; }
@keyframes bdw-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .bdw-widget .bdw-skeleton { animation: none; background-position: 50% 50%; }
}

/* Hover animation */
.bdw-widget .card { transition: transform .2s ease, box-shadow .2s ease; }
.bdw-widget .card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }
.bdw-widget .dw-horizontal { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bdw-widget .dw-horizontal:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); }
.bdw-widget .bdw-clickable { cursor: pointer; }
.bdw-widget .bdw-clickable:focus { outline: 2px solid rgba(13,110,253,.5); outline-offset: 2px; }

/* Vanilla modal visibility + backdrop */
.bdw-widget .modal { position: fixed; inset: 0; z-index: 1050; display: none; padding: 1rem; overflow-y: auto; background: transparent; }
.bdw-widget .modal.show { display: block; }
.bdw-widget .modal-dialog { margin: 1.5rem auto; max-width: 600px; pointer-events: none; }
.bdw-widget .modal-dialog.modal-lg { max-width: 900px; }
.bdw-widget .modal-dialog.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3rem); }
.bdw-widget .modal-dialog.modal-dialog-scrollable { max-height: calc(100% - 3rem); }
.bdw-widget .modal-content { pointer-events: auto; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.15); border: 0; }
.bdw-widget .modal-header,
.bdw-widget .modal-footer { display:flex; align-items:center; gap:.5rem; padding: 1rem 1.25rem; border:0; }
.bdw-widget .modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
.bdw-widget .modal-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.bdw-widget .btn-close { border:0; background: transparent; width: 1rem; height: 1rem; opacity: .6; cursor: pointer; }
.bdw-widget .btn-close::before { content: '\00d7'; display: block; font-size: 1.25rem; line-height: 1; }
.bdw-widget .btn-close:hover { opacity: 1; }
.bdw-widget .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3rem); }
.bdw-widget .modal-dialog-scrollable .modal-body { overflow-y: auto; }
/* Bootstrap's own default .modal-backdrop is #000 at 50% opacity — match it. */
.bdw-backdrop { position: fixed; inset: 0; background-color: #000; z-index: 1040; opacity: 0.5; }
body.bdw-modal-open { overflow: hidden; }

/* Details modal: info grid + summary card */
.bdw-widget .bdw-info-grid { display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px){ .bdw-widget .bdw-info-grid { grid-template-columns: repeat(2, 1fr); } }
.bdw-widget .bdw-info-item { display:flex; align-items:flex-start; gap:.5rem; padding:.5rem 0; }
.bdw-widget .bdw-ic { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef2ff; font-size:16px; color:#0b5ed7; }
.bdw-widget .bdw-chip { font-size:.75rem; padding:.2rem .5rem; border-radius:999px; background:#e7f1ff; color:#0b5ed7; }
.bdw-widget .bdw-summary-box { background:#f5f7fb; border-radius:12px; padding:1rem; border:1px solid #edf1f7; }