/* FBN Hub / Activity / Account — extends the floating-nav design language */
.fbn-hub, .fbn-activity, .fbn-account, .fbn-provider-dash, .fbn-form {
  --fbn-hub-radius: var(--fbn-radius, 18px);
  --fbn-hub-item-radius: var(--fbn-item-radius, 12px);
  --fbn-hub-gap: 12px;
  color: inherit;
  font-family: inherit;
}
.fbn-hub, .fbn-activity, .fbn-account { max-width: 1100px; margin: 0 auto; padding: 8px 12px 96px; }

.fbn-hub-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 8px 0 16px; }
.fbn-hub-title { margin:0; font-size:1.4rem; font-weight:700; }
.fbn-section-title { margin:20px 0 10px; font-size:1.05rem; font-weight:600; }

.fbn-hub-search { position:sticky; top:0; z-index:5; padding:8px 0; background:inherit; }
.fbn-search-row { display:flex; gap:8px; }
.fbn-search-input, .fbn-search-district {
  flex:1; padding:12px 14px; border-radius:var(--fbn-hub-item-radius);
  border:1px solid rgba(0,0,0,.08); background:#fff; font:inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow var(--fbn-dur,220ms) var(--fbn-ease,ease), border-color var(--fbn-dur,220ms) var(--fbn-ease,ease);
}
.fbn-search-district { flex:0 0 auto; max-width:200px; }
.fbn-search-input:focus, .fbn-search-district:focus { outline:none; border-color: var(--fbn-active,#f5a623); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }

.fbn-cat-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: var(--fbn-hub-gap);
}
.fbn-cat-card {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  gap:8px; padding:14px; border-radius:var(--fbn-hub-item-radius);
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  cursor:pointer; text-align:left; font:inherit; color:inherit; min-height:78px;
  transition: transform var(--fbn-dur,220ms) var(--fbn-ease,ease), box-shadow var(--fbn-dur,220ms) var(--fbn-ease,ease);
}
.fbn-cat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.fbn-cat-card.is-active { outline: 2px solid var(--fbn-active,#f5a623); }
.fbn-cat-name { font-weight:600; font-size:.95rem; }
.fbn-cat-count { font-size:.8rem; opacity:.6; }

.fbn-listing-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--fbn-hub-gap); margin-top:12px;
}
.fbn-card {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius: var(--fbn-hub-radius); overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  transition: transform var(--fbn-dur,220ms) var(--fbn-ease,ease), box-shadow var(--fbn-dur,220ms) var(--fbn-ease,ease);
}
.fbn-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.fbn-card.is-featured { outline: 2px solid var(--fbn-active,#f5a623); }
.fbn-card-media { position:relative; display:block; aspect-ratio: 16/10; overflow:hidden; background:#f4f4f4; }
.fbn-card-media img.fbn-card-img, .fbn-card-media .fbn-card-placeholder { width:100%; height:100%; object-fit:cover; display:block; }
.fbn-card-placeholder { background: linear-gradient(135deg,#eee,#f7f7f7); }
.fbn-badge { position:absolute; top:8px; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; }
.fbn-badge-featured { left:8px; background: var(--fbn-active,#f5a623); color:#fff; }
.fbn-badge-verified { right:8px; background:#22c55e; color:#fff; }
.fbn-card-body { padding:12px; display:flex; flex-direction:column; gap:6px; }
.fbn-card-title { margin:0; font-size:1rem; font-weight:600; }
.fbn-card-title a { color:inherit; text-decoration:none; }
.fbn-card-cat, .fbn-card-provider { margin:0; font-size:.82rem; opacity:.7; }
.fbn-card-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

.fbn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:8px 12px; border-radius: var(--fbn-hub-item-radius);
  border:1px solid rgba(0,0,0,.08); background:#fff; color:inherit;
  font:inherit; font-size:.85rem; font-weight:500; cursor:pointer; text-decoration:none;
  transition: transform var(--fbn-dur,220ms) var(--fbn-ease,ease), background var(--fbn-dur,220ms) var(--fbn-ease,ease), color var(--fbn-dur,220ms) var(--fbn-ease,ease);
}
.fbn-btn:hover { transform: translateY(-1px); }
.fbn-btn-primary { background: var(--fbn-bg-solid,#6b1a32); color:#fff; border-color: transparent; }
.fbn-btn-primary:hover { color:#fff; background: var(--fbn-active,#f5a623); }
.fbn-btn-small { padding:5px 10px; font-size:.78rem; }
.fbn-btn-danger { border-color: #ef4444; color:#ef4444; }
.fbn-btn-call { border-color:#22c55e; color:#16a34a; }
.fbn-btn-wa { border-color:#25D366; color:#128C7E; }
.fbn-btn-save.is-saved { background: var(--fbn-active,#f5a623); color:#fff; border-color:transparent; }

.fbn-empty { padding:24px; text-align:center; opacity:.7; }
.fbn-notice { padding:12px 14px; border-radius: var(--fbn-hub-item-radius); background:#fff3cd; color:#7a5b00; }

/* Forms */
.fbn-form { display:flex; flex-direction:column; gap:12px; margin:16px 0; padding:16px; background:#fff; border-radius:var(--fbn-hub-radius); border:1px solid rgba(0,0,0,.06); }
.fbn-form label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:500; }
.fbn-form input[type=text], .fbn-form input[type=email], .fbn-form input[type=tel], .fbn-form input[type=url], .fbn-form input[type=password], .fbn-form input[type=search], .fbn-form select, .fbn-form textarea {
  padding:10px 12px; border-radius: var(--fbn-hub-item-radius);
  border:1px solid rgba(0,0,0,.1); font:inherit; background:#fff;
}
.fbn-form input:focus, .fbn-form select:focus, .fbn-form textarea:focus { outline:none; border-color: var(--fbn-active,#f5a623); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }
.fbn-grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fbn-full { grid-column: 1 / -1; }
.fbn-form-msg { margin:0; font-size:.85rem; min-height:1.2em; }
.fbn-form-msg.is-error { color:#ef4444; }
.fbn-form-msg.is-success { color:#16a34a; }

/* Tabs */
.fbn-tabbar, .fbn-account-tabs { display:flex; gap:6px; overflow-x:auto; margin:12px 0; padding:4px; background: rgba(0,0,0,.03); border-radius: 999px; }
.fbn-tab-btn {
  padding:8px 14px; border-radius:999px; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.85rem; font-weight:500; white-space:nowrap;
  transition: background var(--fbn-dur,220ms) var(--fbn-ease,ease), color var(--fbn-dur,220ms) var(--fbn-ease,ease);
}
.fbn-tab-btn.is-active { background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); color: var(--fbn-bg-solid,#6b1a32); }
.fbn-tab-panel { display:none; }
.fbn-tab-panel.is-active { display:block; animation: fbn-in-fade .3s ease both; }

.fbn-pill { background: var(--fbn-active,#f5a623); color:#fff; border-radius:999px; padding: 1px 8px; font-size:.7rem; }
.fbn-chip-list { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.fbn-chip { display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.05); font-size:.8rem; }

.fbn-notif-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.fbn-notif { padding:12px; border-radius: var(--fbn-hub-item-radius); background:#fff; border:1px solid rgba(0,0,0,.06); }
.fbn-notif.is-unread { border-left: 3px solid var(--fbn-active,#f5a623); }
.fbn-notif-body { margin:4px 0; opacity:.8; font-size:.9rem; }
.fbn-notif time { display:block; margin-top:4px; font-size:.75rem; opacity:.6; }

/* Provider dashboard */
.fbn-dash-table { width:100%; border-collapse: collapse; margin-top:10px; }
.fbn-dash-table th, .fbn-dash-table td { padding:10px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; font-size:.9rem; }

/* Account head */
.fbn-account-head { display:flex; align-items:center; gap:12px; padding:16px; background:#fff; border-radius: var(--fbn-hub-radius); border:1px solid rgba(0,0,0,.06); margin-bottom:12px; }
.fbn-avatar img { border-radius:50%; }
.fbn-account-head h3 { margin:0; }
.fbn-muted { margin:2px 0 0; opacity:.7; font-size:.85rem; }

@media (max-width:640px) {
  .fbn-hub, .fbn-activity, .fbn-account { padding: 8px 10px 120px; }
  .fbn-listing-grid { grid-template-columns: 1fr 1fr; }
  .fbn-search-row { flex-direction:column; }
  .fbn-search-district { max-width:none; }
}
@media (max-width:420px) {
  .fbn-listing-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fbn-hub *, .fbn-activity *, .fbn-account * { animation:none!important; transition:none!important; }
}