/* ============================================================
   SmokyFans Business Directory — sfbd-style.css v2.0
   Brand: business.smokyfans.com / All Things Smokies
   Colors: #ff6600 orange, #041c44 navy, #ffffff white, #141004 near-black
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
  --sfbd-bg:           #f5f5f5;
  --sfbd-card-bg:      #ffffff;
  --sfbd-card-border:  #e8e8e8;
  --sfbd-card-hover:   #ff6600;
  --sfbd-orange:       #ff6600;
  --sfbd-orange-dark:  #e05500;
  --sfbd-navy:         #041c44;
  --sfbd-navy-light:   #0f2a5e;
  --sfbd-text:         #141004;
  --sfbd-muted:        #666666;
  --sfbd-muted-light:  #999999;
  --sfbd-radius:       12px;
  --sfbd-radius-sm:    6px;
  --sfbd-font:         'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --sfbd-shadow:       0 2px 8px rgba(0,0,0,0.08);
  --sfbd-shadow-hover: 0 6px 20px rgba(255,102,0,0.2);
  --sfbd-transition:   0.18s ease;
}

/* ---- Wrap ---- */
.sfbd-wrap {
  font-family: var(--sfbd-font);
  color:        var(--sfbd-text);
  background:   var(--sfbd-bg);
  padding:      16px;
  border-radius: var(--sfbd-radius);
  box-sizing:   border-box;
  width:        100%;
}

/* ---- Header bar ---- */
.sfbd-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  margin-bottom:   14px;
  padding-bottom:  12px;
  border-bottom:   2px solid var(--sfbd-orange);
}
.sfbd-header-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--sfbd-navy);
  flex: 1;
  margin: 0;
}
.sfbd-header-count {
  background:  var(--sfbd-orange);
  color:       #fff;
  font-size:   11px;
  font-weight: 700;
  padding:     3px 10px;
  border-radius: 30px;
  white-space:  nowrap;
}

/* ---- Filters bar ---- */
.sfbd-filters {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 12px;
}

.sfbd-search,
.sfbd-cat-filter {
  flex:          1 1 180px;
  background:    #ffffff;
  border:        1.5px solid #ddd;
  color:         var(--sfbd-text);
  padding:       8px 12px;
  border-radius: var(--sfbd-radius-sm);
  font-family:   var(--sfbd-font);
  font-size:     13px;
  outline:       none;
  transition:    border-color var(--sfbd-transition), box-shadow var(--sfbd-transition);
}
.sfbd-search:focus,
.sfbd-cat-filter:focus {
  border-color: var(--sfbd-orange);
  box-shadow:   0 0 0 3px rgba(255,102,0,0.12);
}
.sfbd-cat-filter option {
  background: #fff;
  color: var(--sfbd-text);
}

/* ---- Stats row ---- */
.sfbd-stats {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
  font-size:       12px;
  color:           var(--sfbd-muted);
}
.sfbd-stats .sfbd-showing {
  color:       var(--sfbd-orange);
  font-weight: 700;
}

/* ============================================================
   GRID — Full height, NO scroll, auto-fit wrapping
   ============================================================ */
.sfbd-grid {
  display:               grid;
  grid-template-columns: repeat(var(--sfbd-cols, 4), 1fr);
  gap:                   10px;
  /* NO max-height, NO overflow: auto — full height, no scroll */
}

/* ---- Card ---- */
.sfbd-card {
  background:    var(--sfbd-card-bg);
  border:        1.5px solid var(--sfbd-card-border);
  border-radius: var(--sfbd-radius);
  overflow:      hidden;
  box-shadow:    var(--sfbd-shadow);
  transition:    transform var(--sfbd-transition),
                 border-color var(--sfbd-transition),
                 box-shadow var(--sfbd-transition);
}
.sfbd-card:hover {
  transform:    translateY(-3px);
  border-color: var(--sfbd-orange);
  box-shadow:   var(--sfbd-shadow-hover);
}

.sfbd-card-inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
  padding:        10px;
  gap:            4px;
}

/* ---- Card top: icon + badge ---- */
.sfbd-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             6px;
  margin-bottom:   4px;
}
.sfbd-icon {
  width:           34px;
  height:          34px;
  min-width:       34px;
  border-radius:   var(--sfbd-radius-sm);
  background:      var(--sfbd-navy);
  color:           #fff;
  font-size:       16px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  letter-spacing:  0;
}
.sfbd-cat-badge {
  font-size:      9px;
  line-height:    1.2;
  color:          var(--sfbd-orange);
  text-align:     right;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight:    600;
  word-break:     break-word;
  max-width:      72%;
}

/* ---- Name ---- */
.sfbd-name {
  margin:      0;
  font-size:   12px;
  font-weight: 700;
  color:       var(--sfbd-navy);
  line-height: 1.3;
  word-break:  break-word;
}

/* ---- Tagline ---- */
.sfbd-tagline {
  margin:       0;
  font-size:    10px;
  color:        var(--sfbd-muted);
  line-height:  1.4;
  flex-grow:    1;
  display:           -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:          hidden;
}

/* ---- URL ---- */
.sfbd-url {
  margin:        0;
  font-size:     9px;
  color:         var(--sfbd-orange);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  font-weight:   500;
}

/* ---- Footer buttons ---- */
.sfbd-card-footer {
  display:   flex;
  gap:       5px;
  margin-top: 7px;
}

/* Visit Website — solid orange */
.sfbd-btn-visit {
  flex:            1;
  text-align:      center;
  padding:         6px 4px;
  background:      var(--sfbd-orange);
  color:           #fff !important;
  border-radius:   var(--sfbd-radius-sm);
  font-size:       9px;
  font-weight:     700;
  text-decoration: none;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  transition:      background var(--sfbd-transition), transform var(--sfbd-transition);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1.2;
  white-space:     nowrap;
}
.sfbd-btn-visit:hover {
  background:      var(--sfbd-orange-dark);
  transform:       scale(1.02);
  color:           #fff !important;
  text-decoration: none;
}
.sfbd-btn-visit.sfbd-btn-disabled {
  background: #e8e8e8;
  color:      var(--sfbd-muted-light) !important;
  cursor:     default;
}
.sfbd-btn-visit.sfbd-btn-disabled:hover {
  background: #e8e8e8;
  transform:  none;
}

/* Claim Business — navy outline */
.sfbd-btn-claim {
  flex:            1;
  text-align:      center;
  padding:         6px 4px;
  background:      transparent;
  color:           var(--sfbd-navy) !important;
  border:          1.5px solid var(--sfbd-navy);
  border-radius:   var(--sfbd-radius-sm);
  font-size:       9px;
  font-weight:     700;
  text-decoration: none;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  transition:      background var(--sfbd-transition), color var(--sfbd-transition), transform var(--sfbd-transition);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1.2;
  white-space:     nowrap;
}
.sfbd-btn-claim:hover {
  background:      var(--sfbd-navy);
  color:           #fff !important;
  transform:       scale(1.02);
  text-decoration: none;
}

/* ---- No results ---- */
.sfbd-no-results {
  text-align:  center;
  padding:     40px 20px;
  color:       var(--sfbd-muted);
  font-size:   14px;
  grid-column: 1 / -1;
}
.sfbd-no-results::before {
  content:   '🔍';
  display:   block;
  font-size: 28px;
  margin-bottom: 8px;
}

/* ---- Powered by ---- */
.sfbd-powered {
  margin-top:  16px;
  text-align:  center;
  font-size:   11px;
  color:       var(--sfbd-muted-light);
  padding-top: 10px;
  border-top:  1px solid #e8e8e8;
}
.sfbd-powered a {
  color:           var(--sfbd-orange);
  text-decoration: none;
  font-weight:     600;
}
.sfbd-powered a:hover {
  text-decoration: underline;
}

/* ============================================================
   AUTO-REFRESH INDICATOR
   ============================================================ */
.sfbd-refresh-bar {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       11px;
  color:           var(--sfbd-muted);
  margin-bottom:   8px;
}
.sfbd-refresh-dot {
  width:            8px;
  height:           8px;
  border-radius:    50%;
  background:       #22c55e;
  animation:        sfbd-pulse 2s ease-in-out infinite;
}
@keyframes sfbd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}
.sfbd-last-updated {
  color:       var(--sfbd-muted-light);
  font-size:   10px;
  margin-left: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
  .sfbd-grid {
    grid-template-columns: repeat(min(var(--sfbd-cols, 4), 4), 1fr);
  }
}
@media (max-width: 1100px) {
  .sfbd-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 780px) {
  .sfbd-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
@media (max-width: 540px) {
  .sfbd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
  .sfbd-filters {
    flex-direction: column;
  }
  .sfbd-search,
  .sfbd-cat-filter {
    width: 100%;
    flex: unset;
  }
  .sfbd-btn-visit,
  .sfbd-btn-claim {
    font-size: 8px;
    padding: 5px 3px;
  }
}