/* ── BizHub — Clean Professional Design ─────────────────── */
:root {
  --green:       #005C38;
  --green-dark:  #003D25;
  --green-light: #E8F5EE;
  --gold:        #D4A017;
  --dark:        #111827;
  --text:        #374151;
  --muted:       #6B7280;
  --border:      #E5E7EB;
  --bg:          #F9FAFB;
  --white:       #ffffff;
  --radius:      10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);
  --bh-header-h: 140px;
  --bh-logo-h:   118px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body  { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: #fff; line-height: 1.6; font-size: 15px; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
textarea { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── HEADER ──────────────────────────────────────────────── */
.bh-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.bh-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 36px; }
.bh-logo-img { height: var(--bh-logo-h); width: auto; }
.bh-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.bh-nav-links a { font-size: 14px; font-weight: 500; color: var(--text); padding: 7px 13px; border-radius: 6px; transition: background .15s, color .15s; white-space: nowrap; }
.bh-nav-links a:hover { background: var(--green-light); color: var(--green); }
.bh-nav-links a.bh-nav-upgrade { color: var(--green); font-weight: 600; border: 1.5px solid var(--green); }
.bh-nav-links a.bh-nav-upgrade:hover { background: var(--green); color: #fff; }
.bh-nav-divider { width: 1px; height: 22px; background: var(--border); margin: 0 8px; flex-shrink: 0; }
.bh-nav-links a.bh-dash-tab { font-size: 14px; font-weight: 500; color: var(--text); padding: 7px 13px; border-radius: 6px; }
.bh-nav-links a.bh-dash-tab:hover { color: var(--green); background: var(--green-light); }
.bh-nav-links a.bh-dash-tab.active { color: var(--green); font-weight: 600; background: none; }
.bh-nav-links a.bh-dash-tab .bh-tab-badge { margin-left: 4px; }
.bh-nav-badge { display: inline-flex; align-items: center; justify-content: center; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; margin-left: 5px; vertical-align: middle; }
.bh-btn-primary  { padding: 8px 18px; background: var(--green); color: #fff; border-radius: var(--radius); font-size: 13px; font-weight: 600; transition: background .2s; white-space: nowrap; }
.bh-btn-primary:hover { background: var(--green-dark); }
.bh-btn-secondary { padding: 8px 16px; border: 1.5px solid var(--border); color: var(--text); border-radius: var(--radius); font-size: 13px; font-weight: 600; transition: all .2s; white-space: nowrap; }
.bh-btn-secondary:hover { border-color: var(--green); color: var(--green); }
.bh-btn-my-profile { padding: 8px 16px; background: var(--green-light); border: 1.5px solid var(--green); color: var(--green); border-radius: var(--radius); font-size: 13px; font-weight: 700; transition: all .2s; white-space: nowrap; }
.bh-btn-my-profile:hover { background: var(--green); color: #fff; }
.bh-btn-user { padding: 7px 13px; background: none; color: var(--text); border-radius: 6px; font-size: 14px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-btn-user:hover { background: var(--green-light); color: var(--green); }
.bh-btn-logout { font-size: 14px; font-weight: 500; color: var(--text); padding: 7px 13px; border-radius: 6px; transition: color .15s; white-space: nowrap; }
.bh-btn-logout:hover { color: #DC2626; background: var(--green-light); }
.bh-role-pill { font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: 6px; background: none; color: var(--green); white-space: nowrap; }
.bh-role-admin { background: #EDE9FE; color: #6D28D9; }
.bh-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 8px; }
.bh-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all .2s; }

/* ── HERO ─────────────────────────────────────────────────── */
.bh-hero { position: relative; padding: 88px 0 72px; background: linear-gradient(150deg, #010D07 0%, #032A18 45%, #054023 100%); overflow: hidden; }
.bh-hero-bg { position: absolute; inset: 0; background: var(--hero-bg, linear-gradient(135deg, #021B0F 0%, #063D22 100%)) center/cover no-repeat; opacity: .4; }
.bh-hero-overlay { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(0,5,3,.7) 0%, rgba(2,25,14,.3) 100%); }
.bh-hero-glow { position: absolute; width: 140%; height: 140%; top: -50%; right: -40%; background: radial-gradient(circle, rgba(30,220,120,.35) 0%, transparent 65%); filter: blur(30px); pointer-events: none; }
.bh-hero-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(120,255,170,.4) 1.5px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 8% 20%, #000 0%, transparent 70%), radial-gradient(ellipse 60% 90% at 95% 85%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 60% 90% at 8% 20%, #000 0%, transparent 70%), radial-gradient(ellipse 60% 90% at 95% 85%, #000 0%, transparent 70%); }
.bh-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.bh-hero-badge { display: inline-block; background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.3); color: #F3C84A; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; margin-bottom: 22px; letter-spacing: .3px; }
.bh-hero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 14px; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.bh-hero h1 em { color: #4ADE80; font-style: normal; }
.bh-hero-sub { font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* Search bar */
.bh-search-wrap { display: flex; gap: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.25); overflow: hidden; margin-bottom: 32px; }
.bh-search-wrap input { flex: 2; min-width: 0; padding: 14px 18px; border: none; outline: none; font-size: 15px; }
.bh-search-wrap select { flex: 1; min-width: 0; padding: 14px 14px; border: none; border-left: 1px solid var(--border); outline: none; font-size: 14px; background: #fff; cursor: pointer; color: var(--text); }
.btn-search { padding: 14px 28px; background: var(--green); color: #fff; border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn-search:hover { background: var(--green-dark); }

/* Stats */
.bh-hero-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.bh-stat { text-align: center; color: #fff; }
.bh-stat strong { display: block; font-size: 28px; font-weight: 800; color: #4ADE80; }
.bh-stat span { font-size: 13px; opacity: .7; }

/* ── POPULAR BAR ─────────────────────────────────────────── */
.bh-popular-bar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 0; overflow-x: auto; white-space: nowrap; }
.bh-popular-bar .container { display: flex; align-items: center; gap: 8px; }
.bh-popular-bar .label { font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.bh-popular-bar a { display: inline-block; font-size: 13px; font-weight: 500; padding: 5px 13px; background: #fff; border: 1px solid var(--border); border-radius: 20px; color: var(--text); transition: all .15s; flex-shrink: 0; }
.bh-popular-bar a:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section-alt { background: var(--bg); }
.sec-header { text-align: center; margin-bottom: 48px; }
.sec-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.sec-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.sec-desc { font-size: 16px; color: var(--muted); max-width: 520px; margin: 0 auto; }

/* ── CATEGORIES ──────────────────────────────────────────── */
.bh-cats-grid, .bh-cats-grid-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.bh-cat-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; display: block; transition: transform .2s, box-shadow .2s; }
.bh-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bh-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bh-cat-card:hover img { transform: scale(1.05); }
.bh-cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 60%); }
.bh-cat-count { position: absolute; top: 10px; right: 10px; background: rgba(0,135,83,.9); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.bh-cat-info { position: absolute; bottom: 12px; left: 12px; right: 12px; color: #fff; }
.bh-cat-info h3 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.bh-cat-info span { font-size: 11px; opacity: .8; }

/* ── BUSINESS CARDS ─────────────────────────────────────── */
.bh-biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.bh-biz-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; cursor: pointer; }
.bh-biz-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.13); transform: translateY(-4px); border-color: #A7D5BC; }
.bh-biz-photo { position: relative; height: 200px; overflow: hidden; background: var(--bg); }
.bh-biz-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.bh-biz-card:hover .bh-biz-photo img { transform: scale(1.06); }
.bh-biz-featured { position: absolute; top: 12px; left: 12px; background: #FDE68A; color: #78350F; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: .3px; }
.bh-biz-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.bh-biz-cat { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.bh-biz-name { font-size: 17px; font-weight: 800; color: var(--dark); margin-bottom: 5px; line-height: 1.3; }
.bh-biz-loc { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
.bh-biz-loc::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.bh-biz-desc { font-size: 13px; color: var(--muted); flex: 1; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bh-biz-actions { display: flex; gap: 8px; margin-top: auto; }
.bh-btn-call { flex: 1; padding: 10px 12px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; transition: background .15s; }
.bh-btn-call:hover { background: var(--green-dark); }
.bh-btn-wa { flex: 1; padding: 10px 12px; background: #22C55E; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; transition: background .15s; }
.bh-btn-wa:hover { background: #16A34A; }
.bh-view-all { text-align: center; margin-top: 40px; }

/* ── HOW IT WORKS ────────────────────────────────────────── */
.bh-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.bh-how-card { text-align: center; padding: 28px 20px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); position: relative; }
.bh-how-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bh-how-img { border-radius: 8px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 16/9; }
.bh-how-img img { width: 100%; height: 100%; object-fit: cover; }
.bh-how-card h3 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 7px; }
.bh-how-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── STATES ──────────────────────────────────────────────── */
.bh-states-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-state { padding: 7px 15px; background: #fff; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--text); transition: all .15s; }
.bh-state:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── CTA ─────────────────────────────────────────────────── */
.bh-cta { position: relative; padding: 80px 0; text-align: center; overflow: hidden; }
.bh-cta-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1200&q=80') center/cover; }
.bh-cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,103,64,.95), rgba(0,40,25,.97)); }
.bh-cta-content { position: relative; z-index: 1; color: #fff; }
.bh-cta-content h2 { font-size: clamp(22px, 4vw, 38px); font-weight: 800; margin-bottom: 12px; }
.bh-cta-content p { font-size: 16px; opacity: .85; margin-bottom: 28px; }
.bh-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-yellow { display: inline-block; padding: 13px 26px; background: #F3C84A; color: #1A1A1A; border-radius: var(--radius); font-size: 15px; font-weight: 700; transition: all .2s; }
.btn-yellow:hover { background: #e6b800; transform: translateY(-1px); }
.btn-white-outline { display: inline-block; padding: 13px 26px; border: 2px solid rgba(255,255,255,.6); color: #fff; border-radius: var(--radius); font-size: 15px; font-weight: 600; transition: all .2s; }
.btn-white-outline:hover { background: rgba(255,255,255,.1); }
.btn-green { display: inline-block; padding: 10px 20px; background: var(--green); color: #fff; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: background .2s; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { display: inline-block; padding: 9px 18px; border: 1.5px solid var(--border); color: var(--text); border-radius: 8px; font-size: 13px; font-weight: 500; transition: all .15s; }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-big-outline { display: inline-block; padding: 13px 28px; border: 2px solid var(--green); color: var(--green); border-radius: var(--radius); font-size: 15px; font-weight: 600; transition: all .2s; }
.btn-big-outline:hover { background: var(--green); color: #fff; }

/* ── FOOTER ──────────────────────────────────────────────── */
.bh-footer { background: #0D1117; color: rgba(255,255,255,.75); padding: 60px 0 0; }
.bh-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.bh-footer-brand .bh-footer-about { font-size: 13px; line-height: 1.7; margin-top: 14px; opacity: .6; max-width: 260px; }
.bh-footer-social { display: flex; gap: 8px; margin-top: 14px; }
.bh-footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255,255,255,.08); border-radius: 6px; font-size: 12px; font-weight: 700; transition: background .2s; }
.bh-footer-social a:hover { background: var(--green); }
.bh-footer-col h4 { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.bh-footer-col ul { list-style: none; }
.bh-footer-col ul li { margin-bottom: 8px; }
.bh-footer-col ul a { font-size: 13px; opacity: .65; transition: opacity .2s; }
.bh-footer-col ul a:hover { opacity: 1; color: #4ADE80; }
.bh-footer-col p { font-size: 13px; margin-bottom: 7px; line-height: 1.6; }
.bh-footer-col a { opacity: .75; transition: opacity .2s; }
.bh-footer-col a:hover { opacity: 1; }
.bh-footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.bh-footer-bottom p { font-size: 12px; opacity: .45; }
.bh-footer-links { display: flex; gap: 16px; }
.bh-footer-links a { font-size: 12px; opacity: .4; transition: opacity .15s; }
.bh-footer-links a:hover { opacity: .8; }

/* ── PAGE HEADER ─────────────────────────────────────────── */
.bh-page-header { background: var(--dark); padding: 44px 0; text-align: center; color: #fff; }
.bh-page-header h1 { font-size: clamp(24px, 4vw, 38px); font-weight: 800; margin-bottom: 6px; }
.bh-page-header p { font-size: 15px; opacity: .65; }

/* ── ALERTS ──────────────────────────────────────────────── */
.bh-alert { padding: 13px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.bh-alert a { font-weight: 600; text-decoration: underline; }
.bh-alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.bh-alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D; }
.bh-alert-info    { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }

/* ── FORMS ───────────────────────────────────────────────── */
.bh-form-wrap { max-width: 680px; margin: 48px auto; }
.bh-form-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 40px; box-shadow: var(--shadow); }
.bh-form-card h2 { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.form-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.form-required { color: #DC2626; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--dark); }
.form-group input,
.form-group select,
.form-group textarea { padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 14px; color: var(--text); background: #fff; transition: border .15s, box-shadow .15s; outline: none; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,135,83,.1); }
.form-group textarea { min-height: 110px; resize: vertical; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bh-login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bh-remember { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.bh-forgot-link { font-size: 13px; color: var(--green); font-weight: 500; }
.btn-form-submit { display: block; width: 100%; padding: 13px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; }
.btn-form-submit:hover { background: var(--green-dark); }
.bh-form-switch { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; }
.bh-form-switch a { color: var(--green); font-weight: 600; }

/* ── ROLE CHOOSER ────────────────────────────────────────── */
.bh-role-page { max-width: 860px; margin: 48px auto; text-align: center; }
.bh-role-intro { margin-bottom: 32px; }
.bh-role-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-bottom: 24px; }
.bh-role-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.bh-role-card:hover { border-color: var(--green); box-shadow: var(--shadow-lg); }
.bh-role-card-img { aspect-ratio: 16/9; overflow: hidden; }
.bh-role-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bh-role-card:hover .bh-role-card-img img { transform: scale(1.04); }
.bh-role-card h3 { font-size: 18px; font-weight: 800; color: var(--dark); padding: 18px 20px 8px; }
.bh-role-card p { font-size: 13px; color: var(--muted); padding: 0 20px 14px; flex: 1; line-height: 1.6; }
.role-btn { display: block; margin: 0 20px 20px; padding: 11px; background: var(--green); color: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; text-align: center; transition: background .2s; }
.role-btn:hover { background: var(--green-dark); }

/* ── DASHBOARD ───────────────────────────────────────────── */
.bh-dash-page { min-height: calc(100vh - 68px); background: var(--bg); }
.bh-user-topbar { background: #fff; border-bottom: 1px solid var(--border); padding: 14px 0; }
.bh-user-topbar-business { background: var(--green-light); }
.bh-user-topbar-admin { background: var(--dark); }
.bh-user-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bh-user-info { display: flex; align-items: center; gap: 12px; }
.bh-user-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bh-avatar-business { background: var(--gold); color: #fff; }
.bh-avatar-admin { background: #6D28D9; }
.bh-user-name { font-size: 15px; font-weight: 700; color: var(--dark); }
.bh-user-topbar-admin .bh-user-name { color: #fff; }
.bh-user-role-label { font-size: 12px; color: var(--muted); }
.bh-user-topbar-admin .bh-user-role-label { color: rgba(255,255,255,.55); }

/* Dashboard tabs */
.bh-dash-tab-nav { background: #fff; border-bottom: 1px solid var(--border); overflow-x: auto; }
.bh-dash-tab-nav-admin { background: #0D1117; }
.bh-dash-tabs { display: flex; min-width: max-content; }
.bh-dash-tab { padding: 14px 16px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; cursor: pointer; text-decoration: none; }
.bh-dash-tab:hover { color: var(--green); }
.bh-dash-tab.active { color: var(--green); border-bottom-color: var(--green); }
.bh-dash-tab-nav-admin .bh-dash-tab { color: rgba(255,255,255,.5); }
.bh-dash-tab-nav-admin .bh-dash-tab:hover,
.bh-dash-tab-nav-admin .bh-dash-tab.active { color: #fff; border-bottom-color: #4ADE80; }
.bh-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px; margin-left: 4px; vertical-align: middle; }

/* Tab panels */
.bh-tab-panel { display: none; }
.bh-tab-panel.active { display: block; }

/* Dashboard body */
.bh-dash-body { padding: 28px 0 60px; }
.bh-dash-panel-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 20px; }
.bh-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 24px; }
.bh-dash-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.bh-dash-stat-num { font-size: 26px; font-weight: 800; color: var(--green); }
.bh-dash-stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.bh-admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.bh-admin-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; border-top: 3px solid var(--green); }
.bh-admin-stat-num { font-size: 32px; font-weight: 800; color: var(--green); }
.bh-admin-stat-label { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* Cards */
.bh-dash-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.bh-dash-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
.bh-dash-card-header h3 { font-size: 14px; font-weight: 700; color: var(--dark); }
.bh-dash-empty { text-align: center; padding: 44px 20px; }
.bh-dash-empty p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.bh-listing-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.bh-listing-row:last-child { border-bottom: none; }
.bh-listing-row img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.bh-listing-row > div { flex: 1; min-width: 0; }
.bh-listing-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-listing-loc { font-size: 12px; color: var(--muted); }
.bh-upgrade-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(135deg, var(--green-light), #D1FAE5); border: 1px solid #A7F3C0; border-radius: var(--radius); padding: 18px 22px; flex-wrap: wrap; }
.bh-upgrade-banner h4 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.bh-upgrade-banner p { font-size: 13px; color: var(--muted); }

/* Status badges */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-active    { background: #D1FAE5; color: #065F46; }
.status-pending   { background: #FEF3C7; color: #92400E; }
.status-rejected  { background: #FEE2E2; color: #991B1B; }
.status-suspended { background: #F3F4F6; color: #4B5563; }

/* ── ADMIN TABLE ─────────────────────────────────────────── */
.bh-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bh-admin-table th { background: var(--bg); padding: 9px 13px; text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--border); }
.bh-admin-table td { padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bh-admin-table tr:last-child td { border-bottom: none; }
.bh-admin-table tr:hover td { background: var(--bg); }
.bh-admin-search { margin-bottom: 12px; }
.bh-admin-search input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }
.bh-admin-search input:focus { border-color: var(--green); }
.action-btn { padding: 5px 11px; border: none; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.action-approve { background: #D1FAE5; color: #065F46; } .action-approve:hover { background: #22C55E; color: #fff; }
.action-reject  { background: #FEE2E2; color: #991B1B; } .action-reject:hover  { background: #EF4444; color: #fff; }
.action-suspend { background: #FEF3C7; color: #92400E; } .action-suspend:hover { background: #F59E0B; color: #fff; }
.action-delete  { background: #FEE2E2; color: #991B1B; } .action-delete:hover  { background: #EF4444; color: #fff; }

/* ── PHOTOS ──────────────────────────────────────────────── */
.photo-upload-area { border: 2px dashed var(--border); border-radius: 10px; padding: 30px; text-align: center; transition: all .2s; cursor: pointer; }
.photo-upload-area:hover { border-color: var(--green); background: var(--green-light); }
.photo-upload-area div { font-size: 28px; margin-bottom: 8px; }
.photo-upload-area p { font-size: 13px; color: var(--muted); }

/* ── PRICING ─────────────────────────────────────────────── */
.bh-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.bh-pricing-grid-lg { max-width: 960px; }
.bh-plan { background: #fff; border: 2px solid var(--border); border-radius: 14px; padding: 30px; text-align: center; position: relative; transition: box-shadow .2s; }
.bh-plan.popular { border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,135,83,.08); }
.bh-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 14px; border-radius: 20px; white-space: nowrap; }
.bh-plan h3 { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.bh-plan-price { font-size: 34px; font-weight: 900; color: var(--green); margin-bottom: 3px; }
.bh-plan-price span { font-size: 13px; color: var(--muted); font-weight: 400; }
.bh-plan-period { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.bh-plan-features { list-style: none; text-align: left; margin-bottom: 22px; }
.bh-plan-features li { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.bh-plan-features li:last-child { border-bottom: none; }
.bh-plan-cta { display: block; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; border: none; }
.bh-plan-cta.primary  { background: var(--green); color: #fff; }
.bh-plan-cta.primary:hover { background: var(--green-dark); }
.bh-plan-cta.secondary { background: var(--bg); color: var(--text); border: 1.5px solid var(--border); }
.bh-plan-cta.secondary:hover { border-color: var(--green); color: var(--green); }
.bh-pricing-note { text-align: center; margin-top: 24px; font-size: 13px; color: var(--muted); }

/* ── FAQ ─────────────────────────────────────────────────── */
.bh-faq { max-width: 700px; margin: 0 auto; }
.bh-faq-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.bh-faq-item.open { border-color: var(--green); }
.bh-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--dark); }
.bh-faq-arrow { font-size: 11px; color: var(--muted); transition: transform .2s; flex-shrink: 0; margin-left: 12px; }
.bh-faq-item.open .bh-faq-arrow { transform: rotate(180deg); }
.bh-faq-a { display: none; padding: 0 18px 16px; }
.bh-faq-item.open .bh-faq-a { display: block; }
.bh-faq-a p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── SEARCH PAGE ─────────────────────────────────────────── */
/* Search filter bar.
   Sticky on desktop (there's room). On mobile the header is tall, so a sticky
   filter bar sat halfway down the screen and stayed there while results scrolled
   under it — eating most of a phone screen. On mobile it now scrolls away with
   the page so the business results get the full viewport. */
.bh-search-bar-wrap { background: #fff; border-bottom: 1px solid var(--border); padding: 14px 0; z-index: 100; }
@media (min-width: 901px) {
  .bh-search-bar-wrap { position: sticky; top: var(--bh-header-h); }
}
.bh-search-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-search-filters input,
.bh-search-filters select { flex: 1; min-width: 120px; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 14px; outline: none; }
.bh-search-filters input:focus,
.bh-search-filters select:focus { border-color: var(--green); }
.bh-results-header { margin-bottom: 20px; }
.bh-results-count { font-size: 14px; color: var(--muted); }
.bh-no-results { text-align: center; padding: 60px 0; }

/* ── BUSINESS PROFILE ────────────────────────────────────── */
.biz-profile-page { background: var(--bg); min-height: 60vh; }
.biz-cover { height: 260px; overflow: hidden; position: relative; }
.biz-cover img { width: 100%; height: 100%; object-fit: cover; }
.biz-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.45)); }
.biz-header-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 0; box-shadow: var(--shadow-sm); }
.biz-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.biz-header-left { display: flex; align-items: center; gap: 14px; }
.biz-initial-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--green); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,135,83,.3); }
.biz-header-info h1 { font-size: clamp(16px, 3vw, 24px); font-weight: 800; color: var(--dark); margin-bottom: 6px; line-height: 1.2; }
.biz-header-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.biz-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.biz-tag-cat { background: var(--green-light); color: var(--green); }
.biz-tag-loc { background: #EFF6FF; color: #1D4ED8; }
.biz-tag-featured { background: #FEF3C7; color: #92400E; }
.biz-header-right { display: flex; align-items: center; gap: 8px; }
.bh-save-btn, .bh-share-btn { padding: 8px 16px; background: #fff; color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.bh-save-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }
.bh-save-btn.saved { background: #FFF1F2; border-color: #FDA4AF; color: #BE123C; }
.bh-share-btn:hover { border-color: var(--border); background: var(--bg); }
.biz-content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 28px 0 60px; }
.biz-main-col {}
.biz-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.biz-card h2 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.biz-description { font-size: 14px; color: var(--text); line-height: 1.8; margin-bottom: 16px; }
.biz-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.biz-info-label { color: var(--muted); font-weight: 500; }
.biz-info-val { color: var(--dark); font-weight: 600; }
.biz-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.biz-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.biz-links-row { display: flex; flex-wrap: wrap; gap: 8px; }
.biz-link-btn { padding: 8px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-weight: 500; transition: all .15s; }
.biz-link-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.biz-sidebar-col {}
.biz-contact-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: sticky; top: calc(var(--bh-header-h) + 16px); }
.biz-contact-box h3 { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.biz-contact-detail { padding: 10px 0; border-bottom: 1px solid var(--border); }
.biz-contact-detail:last-of-type { border-bottom: none; margin-bottom: 16px; }
.biz-contact-detail-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
.biz-contact-detail-val { font-size: 14px; color: var(--dark); font-weight: 600; }
.biz-cta-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.biz-cta-call { display: block; padding: 13px; background: var(--green); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; text-align: center; transition: background .2s; }
.biz-cta-call:hover { background: var(--green-dark); }
.biz-cta-wa { display: block; padding: 13px; background: #22C55E; color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; text-align: center; transition: background .2s; }
.biz-cta-wa:hover { background: #16A34A; }
.biz-cta-email { display: block; padding: 11px; background: var(--bg); color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; transition: all .2s; }
.biz-cta-email:hover { border-color: var(--green); color: var(--green); }
.biz-owner-box { margin-top: 12px; padding: 14px; background: var(--bg); border-radius: 8px; text-align: center; border: 1px solid var(--border); }
.biz-owner-box p { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.biz-owner-box a { font-size: 13px; color: var(--green); font-weight: 600; }

/* ── ABOUT ───────────────────────────────────────────────── */
.bh-about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.bh-about-intro img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.bh-about-text h2 { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: var(--dark); }
.bh-about-text p { font-size: 14px; color: var(--text); margin-bottom: 12px; line-height: 1.7; }
.bh-about-block { max-width: 760px; margin: 56px auto 0; }
.bh-about-block h2 { font-size: 24px; font-weight: 800; margin-bottom: 14px; color: var(--dark); }
.bh-about-block p { font-size: 15px; color: var(--text); margin-bottom: 14px; line-height: 1.7; }
.bh-about-list { margin: 0 0 16px; padding-left: 22px; }
.bh-about-list li { font-size: 15px; color: var(--text); line-height: 1.9; }

/* What We Do — icon feature grid */
.bh-about-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; margin: 72px 0; }
.bh-about-eyebrow { display: block; font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--green); width: fit-content; }
.bh-about-feature-text h2 { font-size: 32px; font-weight: 800; line-height: 1.25; color: var(--dark); margin-bottom: 18px; }
.bh-about-feature-text h2 em { font-style: normal; color: var(--green); }
.bh-about-feature-text > p { font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 28px; }
.bh-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.bh-feature-item { display: flex; gap: 12px; align-items: flex-start; }
.bh-feature-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; }
.bh-feature-icon svg { width: 22px; height: 22px; }
.bh-feature-item h3 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.bh-feature-item p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.bh-mission-callout { background: var(--green-light); border-left: 4px solid var(--green); border-radius: 8px; padding: 16px 20px; font-size: 14px; color: var(--dark); line-height: 1.6; }
.bh-mission-callout strong { color: var(--green); }
.bh-about-feature-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Vision / Commitment — text over photo */
.bh-about-overlay { position: relative; border-radius: var(--radius); overflow: hidden; margin: 40px 0; min-height: 320px; display: flex; align-items: center; }
.bh-about-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-about-overlay-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,20,12,.88) 0%, rgba(3,20,12,.55) 55%, rgba(3,20,12,.25) 100%); }
.bh-about-overlay-content { position: relative; z-index: 1; max-width: 560px; padding: 44px 48px; }
.bh-about-eyebrow-light { color: #7CF0A8; border-bottom-color: #7CF0A8; }
.bh-about-overlay-content p { font-size: 18px; color: #fff; line-height: 1.6; font-weight: 500; margin: 0; }

@media (max-width: 800px) {
  .bh-about-feature { grid-template-columns: 1fr; gap: 32px; }
  .bh-feature-grid { grid-template-columns: 1fr; }
  .bh-about-overlay-content { padding: 32px 24px; max-width: 100%; }
  .bh-about-overlay-content p { font-size: 16px; }
}
.bh-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bh-stat-box { text-align: center; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.bh-stat-box strong { display: block; font-size: 30px; font-weight: 800; color: var(--green); }
.bh-stat-box span { font-size: 12px; color: var(--muted); }

/* ── CONTACT ─────────────────────────────────────────────── */
.bh-contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: start; }
.bh-contact-info h2 { font-size: 24px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }
.bh-contact-info p { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.bh-contact-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }

/* ── LEGAL ───────────────────────────────────────────────── */
.bh-legal-content { max-width: 720px; margin: 0 auto; }
.bh-legal-content h2 { font-size: 18px; font-weight: 700; color: var(--dark); margin: 28px 0 9px; }
.bh-legal-content h2:first-child { margin-top: 0; }
.bh-legal-content p { font-size: 14px; color: var(--text); line-height: 1.8; margin-bottom: 12px; }
.bh-legal-content a { color: var(--green); text-decoration: underline; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .bh-footer-grid { grid-template-columns: 1fr 1fr; }
  .biz-content-grid { grid-template-columns: 1fr; }
  .biz-contact-card { position: static; }
  .bh-about-intro { grid-template-columns: 1fr; }
  .bh-contact-layout { grid-template-columns: 1fr; }
  .bh-stats-row { grid-template-columns: 1fr 1fr; }
  .bh-admin-stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1200px) and (min-width: 701px) {
  .bh-nav-links { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .bh-nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 700px) {
  .bh-nav-links { display: none; }
  .bh-hamburger { display: flex; }
  .bh-search-wrap { flex-direction: column; border-radius: 10px; }
  .bh-search-wrap select { border-left: none; border-top: 1px solid var(--border); }
  .bh-role-choose { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .bh-hero { padding: 56px 0 44px; }
  .section { padding: 48px 0; }
  .bh-footer-grid { grid-template-columns: 1fr; }
  .bh-form-card { padding: 24px; }
  .bh-stats-row { grid-template-columns: 1fr 1fr; }
  .bh-admin-stat-grid { grid-template-columns: 1fr 1fr; }
  .biz-cover { height: 200px; }
  .biz-avatar-large { margin-top: -20px; }
  .biz-profile-actions { display: none; }
}

/* ── States grid — plain text tiles, no images ── */
.bh-states-text-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.bh-state-text-card { display: block; padding: 20px 16px; border-radius: 12px; background: #fff; border: 1px solid #E5E7EB; text-align: center; transition: all .15s; }
.bh-state-text-card:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.bh-state-text-card h3 { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.bh-state-text-card span { font-size: 12px; color: #6B7280; }
.bh-states-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 900px; margin: 0 auto; }
.bh-state { padding: 6px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 20px; font-size: 13px; font-weight: 500; color: #374151; transition: all .15s; }
.bh-state:hover { background: var(--green); color: #fff; border-color: var(--green); }

@media (max-width: 900px) { .bh-states-text-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bh-states-text-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* View Business button */
.bh-btn-view { display: block; width: 100%; padding: 9px; background: #fff; border: 1.5px solid var(--green); color: var(--green); border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; margin-top: 8px; transition: all .15s; }
.bh-btn-view:hover { background: var(--green); color: #fff; }

/* ── Dashboard styles — was a second orphaned theme CSS file (bizhub-dashboard.css), never enqueued ── */
/* ============================================
   BIZHUB - Dashboard CSS Additions
   Top-tab layout like Fiverr
   ============================================ */

/* User top bar */
.bh-user-topbar {
    background: var(--bh-primary);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.bh-user-topbar-business { background: #1A1A2E; }
.bh-user-topbar-admin    { background: #0F1A0F; }
.bh-user-topbar-inner    { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bh-user-info            { display: flex; align-items: center; gap: 12px; }
.bh-user-avatar          { width: 44px; height: 44px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #fff; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.4); }
.bh-avatar-business      { background: rgba(255,215,0,0.2); border-color: rgba(255,215,0,0.5); }
.bh-avatar-admin         { background: rgba(0,135,83,0.3); border-color: rgba(0,135,83,0.6); }
.bh-user-name            { font-size: 16px; font-weight: 800; color: #fff; }
.bh-user-role-label      { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 2px; display: flex; align-items: center; gap: 8px; }

/* Top Tab Navigation */
.bh-dash-tab-nav {
    background: #fff;
    border-bottom: 2px solid var(--bh-border);
    position: sticky;
    top: 72px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bh-dash-tab-nav-admin { border-bottom-color: #0F1A0F; }
.bh-dash-tabs {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bh-dash-tabs::-webkit-scrollbar { display: none; }
.bh-dash-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
}
.bh-dash-tab:hover {
    color: var(--bh-primary);
    background: #F8FFF9;
}
.bh-dash-tab.active {
    color: var(--bh-primary);
    border-bottom-color: var(--bh-primary);
    background: #F0FAF5;
    font-weight: 700;
}
.bh-tab-badge {
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}
.bh-tab-panel {
    display: none;
    padding: 32px 0;
    min-height: 400px;
}
.bh-tab-panel.active { display: block; }

/* Dashboard body */
.bh-dash-body { background: #F5F5F5; min-height: calc(100vh - 200px); }
.bh-dash-panel-title { font-size: 22px; font-weight: 900; color: #1A1A1A; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #EBEBEB; }

/* Stats row */
.bh-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.bh-dash-stat { background: #fff; border: 1px solid #EBEBEB; border-radius: 12px; padding: 22px; }
.bh-dash-stat-num { font-size: 30px; font-weight: 900; color: var(--bh-primary); }
.bh-dash-stat-label { font-size: 13px; color: #888; margin-top: 4px; font-weight: 600; }

/* Cards */
.bh-dash-card { background: #fff; border: 1px solid #EBEBEB; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.bh-dash-card-header { padding: 16px 20px; border-bottom: 1px solid #EBEBEB; display: flex; align-items: center; justify-content: space-between; background: #FAFAFA; }
.bh-dash-card-header h3 { font-size: 15px; font-weight: 800; color: #1A1A1A; }
.bh-listing-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #F5F5F5; }
.bh-listing-row img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.bh-listing-name { font-size: 15px; font-weight: 700; color: #1A1A1A; }
.bh-listing-loc { font-size: 12px; color: #888; margin-top: 3px; }
.bh-dash-empty { padding: 50px; text-align: center; }
.bh-dash-empty p { font-size: 15px; color: #888; margin-bottom: 16px; }

/* Admin stats */
.bh-admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.bh-admin-stat { background: #fff; border: 1px solid #EBEBEB; border-radius: 12px; padding: 22px; text-align: center; }
.bh-admin-stat-num { font-size: 32px; font-weight: 900; color: var(--bh-primary); margin-bottom: 4px; }
.bh-admin-stat-label { font-size: 13px; color: #888; font-weight: 600; }

/* Admin table */
.bh-admin-table { width: 100%; border-collapse: collapse; }
.bh-admin-table th { background: #F5F5F5; padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 800; color: #444; border-bottom: 2px solid #EBEBEB; }
.bh-admin-table td { padding: 12px 16px; font-size: 14px; color: #333; border-bottom: 1px solid #F5F5F5; vertical-align: middle; }
.bh-admin-table tr:hover td { background: #FAFAFA; }
.bh-admin-search { display: flex; gap: 10px; margin-bottom: 16px; }

/* Action buttons */
.action-btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: all 0.2s; }
.action-approve { background: #E6F7F0; color: var(--bh-primary); }
.action-approve:hover { background: var(--bh-primary); color: #fff; }
.action-reject { background: #FEF0F0; color: #e53e3e; }
.action-reject:hover { background: #e53e3e; color: #fff; }
.action-suspend { background: #FFF8E6; color: #D97706; }
.action-suspend:hover { background: #D97706; color: #fff; }
.action-delete { background: #FEF0F0; color: #e53e3e; }
.action-delete:hover { background: #e53e3e; color: #fff; }
.action-view { background: #F0F0F0; color: #444; text-decoration: none; display: inline-block; }
.action-view:hover { background: #DDD; }

/* Responsive */
@media (max-width: 768px) {
    .bh-dash-tab { padding: 12px 14px; font-size: 13px; }
    .bh-dash-stats { grid-template-columns: 1fr; }
    .bh-admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bh-listing-row { grid-template-columns: 50px 1fr auto; gap: 10px; }
    .bh-user-topbar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Custom select dropdown — always opens downward, unlike native
   <select> which the browser flips upward when short on space ── */
.bh-cs-wrap { position: relative; flex: 1; min-width: 140px; }
.bh-cs-trigger { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 14px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-cs-trigger:after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: 8px; flex-shrink: 0; }
.bh-cs-wrap.open .bh-cs-trigger { border-color: var(--green); }
.bh-cs-panel { display: none; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.14); z-index: 9999; }
.bh-cs-panel.open { display: block; }
.bh-cs-option { padding: 10px 16px; font-size: 14px; cursor: pointer; }
.bh-cs-option:hover, .bh-cs-option.active { background: var(--green-light); color: var(--green); }

/* ── PRICING TICKS (replaces emoji, which rendered differently per device) ── */
.bh-plan-features li { display: flex; align-items: center; gap: 10px; }
.bh-tick { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: inline-block; position: relative; }
.bh-plan-features li.yes .bh-tick { background: var(--green); }
.bh-plan-features li.yes .bh-tick::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bh-plan-features li.no .bh-tick { background: #E2E6EA; }
.bh-plan-features li.no .bh-tick::before,
.bh-plan-features li.no .bh-tick::after {
  content: ""; position: absolute; left: 8px; top: 4px; width: 2px; height: 10px;
  background: #97A2AC; border-radius: 1px;
}
.bh-plan-features li.no .bh-tick::before { transform: rotate(45deg); }
.bh-plan-features li.no .bh-tick::after  { transform: rotate(-45deg); }
.bh-plan-features li.no { color: var(--muted); }

.bh-plan-cta.is-current { display: block; text-align: center; background: var(--green-light); color: var(--green); cursor: default; border: 1px solid #BFE3CF; }
.bh-upgrade-form { margin: 0; }
.bh-upgrade-form .bh-plan-cta { width: 100%; border: none; cursor: pointer; font: inherit; font-weight: 700; }
.bh-pay-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 26px; }
.bh-pay-note a { color: var(--green); font-weight: 700; }

/* ── OWNER UPGRADE PANEL on their own listing ── */
.bh-upsell { background: linear-gradient(120deg, var(--green-light) 0%, #F4FBF7 100%); border: 1px solid #C9E7D6; }
.bh-upsell-tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--green); background: #fff; border: 1px solid #C9E7D6; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.bh-upsell h2 { margin-bottom: 8px; }
.bh-upsell p { color: var(--text); font-size: 14px; line-height: 1.65; margin-bottom: 16px; }

/* ── FLASH MESSAGES ── */
.bh-alert-success { background: #E8F5EE; border: 1px solid #BFE3CF; color: #14532D; }
.bh-alert-error   { background: #FDECEC; border: 1px solid #F5C2C2; color: #7F1D1D; }
.bh-alert-info    { background: #EFF6FF; border: 1px solid #C7DDF7; color: #1E3A8A; }

/* ── ANALYTICS (Premium) ── */
.bh-dash-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.bh-chart-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 20px; box-shadow: var(--shadow-sm); }
.bh-chart-card h3 { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }
.bh-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 6px; }
.bh-chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bh-chart-bar { width: 100%; background: linear-gradient(180deg, #12874F 0%, var(--green) 100%); border-radius: 3px 3px 0 0; transition: opacity .15s ease; }
.bh-chart-col:hover .bh-chart-bar { opacity: .72; }
.bh-chart-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.bh-chart-empty { color: var(--muted); font-size: 13.5px; padding: 30px 0; text-align: center; }
.bh-upsell-lock { text-align: center; background: var(--green-light); border: 1px solid #C9E7D6; border-radius: var(--radius); padding: 38px 26px; }
.bh-upsell-lock h3 { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.bh-upsell-lock p { color: var(--text); font-size: 14px; line-height: 1.65; max-width: 480px; margin: 0 auto 18px; }

/* ── reCAPTCHA ── */
.bh-recaptcha { margin: 16px 0; }
.bh-recaptcha .g-recaptcha { transform-origin: 0 0; }
@media (max-width: 400px) { .bh-recaptcha .g-recaptcha { transform: scale(.88); } }

/* ── REVIEWS ── */
.bh-rating-inline { font-size: 14px; font-weight: 700; color: var(--gold); margin-left: 6px; }
.bh-reviews { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.bh-review { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: #FCFDFC; }
.bh-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bh-stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.bh-review-title { font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.bh-review p { font-size: 14px; line-height: 1.65; color: var(--text); margin: 0 0 8px; }
.bh-review-date { font-size: 12px; color: var(--muted); }
.bh-review-form { border-top: 1px solid var(--border); padding-top: 20px; }
.bh-review-form h3 { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.bh-muted { color: var(--muted); font-size: 14px; }

/* ── VIDEO ── */
.bh-video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.bh-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── NOTIFICATIONS ── */
.bh-notif { position: relative; }
.bh-notif-btn { background: none; border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dark); position: relative; }
.bh-notif-btn:hover { background: var(--green-light); border-color: #BFE3CF; }
.bh-notif-dot { position: absolute; top: -5px; right: -5px; background: #D93025; color: #fff; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.bh-notif-panel { position: absolute; right: 0; top: 46px; width: 320px; max-height: 400px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 1000; }
.bh-notif-head { padding: 12px 16px; font-weight: 800; font-size: 13px; border-bottom: 1px solid var(--border); }
.bh-notif-empty { padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.bh-notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid #F1F5F3; text-decoration: none; }
.bh-notif-item:hover { background: #FAFCFB; }
.bh-notif-item.unread { background: var(--green-light); }
.bh-notif-item strong { display: block; font-size: 13px; color: var(--dark); margin-bottom: 2px; }
.bh-notif-item span { display: block; font-size: 12px; color: var(--text); line-height: 1.5; }
.bh-notif-item em { display: block; font-size: 11px; color: var(--muted); font-style: normal; margin-top: 4px; }

/* ── REVIEW REPLY / ACTIONS ── */
.bh-review-reply { margin-top: 10px; padding: 12px 14px; background: var(--green-light); border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; }
.bh-review-reply strong { display: block; font-size: 12.5px; color: var(--green); margin-bottom: 4px; }
.bh-review-reply p { font-size: 13.5px; margin: 0 !important; }
.bh-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bh-inline-form { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.bh-inline-form textarea { flex: 1 1 240px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.bh-mini-btn { background: var(--green); color: #fff; border: none; border-radius: 7px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bh-mini-btn.danger { background: #fff; color: #B3261E; border: 1px solid #F0C6C3; }
.bh-mini-btn.subtle { background: #fff; color: var(--muted); border: 1px solid var(--border); }
.bh-mini-btn:hover { opacity: .9; }

/* ── PAGINATION ── */
.bh-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 34px 0 10px; }
.bh-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--dark); text-decoration: none; background: #fff; }
.bh-page-link:hover { background: var(--green-light); border-color: #BFE3CF; }
.bh-page-link.active { background: var(--green); color: #fff; border-color: var(--green); }

/* ── TOASTS (replaces alert()) ── */
#bh-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.bh-toast { pointer-events: auto; padding: 13px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.22); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.bh-toast.in { opacity: 1; transform: translateY(0); }
.bh-toast.ok  { background: #0B6E42; }
.bh-toast.err { background: #B3261E; }

/* ── POPULAR CATEGORY COUNTS ── */
.bh-pop-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--green-light); color: var(--green); font-size: 10.5px; font-weight: 800; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════
   VISUAL POLISH — glow, depth, motion
   Restrained on purpose: a business directory has to read as
   trustworthy. Glow is used to draw the eye to the things people
   act on (search, CTAs, cards on hover), not sprayed everywhere.
   ════════════════════════════════════════════════════════════ */

:root {
  --glow-green:  0 0 0 1px rgba(0,92,56,.08), 0 8px 24px -6px rgba(0,92,56,.28);
  --glow-strong: 0 0 0 1px rgba(0,92,56,.12), 0 14px 38px -8px rgba(0,92,56,.42);
  --glow-gold:   0 8px 26px -6px rgba(245,158,11,.45);
}

/* Ambient green light behind the hero, so the top of the page has depth */
.bh-hero, .bh-page-header { position: relative; overflow: hidden; }
.bh-hero::before, .bh-page-header::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(18,135,79,.30) 0%, rgba(18,135,79,.10) 45%, transparent 70%);
  pointer-events: none;
  filter: blur(10px);
}
.bh-hero::after {
  content: "";
  position: absolute;
  bottom: -220px; left: -160px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(124,232,168,.22) 0%, transparent 68%);
  pointer-events: none;
}
.bh-hero > *, .bh-page-header > * { position: relative; z-index: 1; }

/* Primary actions glow, and lift on hover */
.btn-green, .bh-btn-primary, .btn-form-submit, .bh-plan-cta.primary {
  box-shadow: var(--glow-green);
  transition: transform .18s ease, box-shadow .22s ease, filter .2s ease;
}
.btn-green:hover, .bh-btn-primary:hover, .btn-form-submit:hover, .bh-plan-cta.primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-strong);
  filter: brightness(1.05);
}
.btn-green:active, .bh-btn-primary:active, .btn-form-submit:active { transform: translateY(0); }

/* Search bar: focus ring that actually feels like focus */
.bh-search-form:focus-within,
.bh-hero-search:focus-within {
  box-shadow: 0 0 0 4px rgba(18,135,79,.16), 0 12px 30px -8px rgba(0,92,56,.3);
  border-color: var(--green);
}

/* Cards lift and warm slightly. Cheap transform-only animation, so it stays
   smooth on the low-end Android phones most Nigerian users will be on. */
.bh-cat-card, .bh-biz-card, .biz-card, .bh-plan {
  transition: transform .2s ease, box-shadow .25s ease;
  will-change: transform;
}
.bh-cat-card:hover, .bh-biz-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-strong);
}
.bh-plan.popular {
  box-shadow: 0 0 0 2px var(--green), 0 18px 44px -12px rgba(0,92,56,.34);
}

/* Popular-categories strip: make it feel live */
.bh-popular-bar a {
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.bh-popular-bar a:hover {
  transform: translateY(-2px);
  background: var(--green-light);
  box-shadow: 0 6px 16px -4px rgba(0,92,56,.28);
}

/* Featured / premium listings get a warm glow instead of a shouty badge */
.bh-biz-card.featured, .biz-card.featured {
  box-shadow: var(--glow-gold);
  border-color: rgba(245,158,11,.35);
}

/* The notification bell pulses once when there is something unread */
.bh-notif-dot { animation: bhPulse 2.4s ease-in-out infinite; }
@keyframes bhPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,48,37,.55); }
  50%      { box-shadow: 0 0 0 5px rgba(217,48,37,0); }
}

/* Respect people who turn motion off — and anyone on a weak device. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .bh-cat-card:hover, .bh-biz-card:hover,
  .btn-green:hover, .bh-btn-primary:hover { transform: none; }
}

/* Field that caused a validation bounce — draw the eye straight to it */
.bh-field-error {
  background: #FEF2F2;
  border: 1px solid #F5C2C0;
  border-radius: 10px;
  padding: 12px 14px;
  animation: bhShake .32s ease;
}
.bh-field-error label { color: #B3261E; }
@keyframes bhShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

/* ════ POPULAR / TRENDING CATEGORIES ════
   Was a thin grey strip that read like a footer. It is one of the strongest
   signals of a directory being alive, so it gets real weight now. */
.bh-popular { padding: 54px 0 60px; background: linear-gradient(180deg, #F6FAF7 0%, #FFFFFF 100%); border-bottom: 1px solid var(--border); }
.bh-popular-head { text-align: center; margin-bottom: 30px; }
.bh-popular-live { display: inline-flex; align-items: center; gap: 7px; background: var(--green-light); color: var(--green); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; margin-bottom: 14px; }
.bh-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; animation: bhLive 1.8s ease-in-out infinite; }
@keyframes bhLive { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.6); } 50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); } }
.bh-popular-head h2 { font-size: clamp(23px, 3vw, 31px); font-weight: 800; color: var(--dark); margin: 0 0 8px; letter-spacing: -.5px; }
.bh-popular-head p { color: var(--muted); font-size: 14.5px; margin: 0; }

.bh-popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.bh-popular-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 22px 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease; }
.bh-popular-card:hover { transform: translateY(-5px); border-color: #BFE3CF; box-shadow: 0 14px 34px -10px rgba(0,92,56,.32); }
.bh-popular-card.top { border-color: rgba(245,158,11,.45); box-shadow: 0 10px 28px -10px rgba(245,158,11,.4); }
.bh-popular-rank { position: absolute; top: 9px; right: 10px; background: var(--gold, #F59E0B); color: #fff; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 999px; }
.bh-popular-icon { font-size: 27px; line-height: 1; }
.bh-popular-name { font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.bh-popular-meta { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.bh-popular-all { display: block; text-align: center; margin-top: 26px; color: var(--green); font-weight: 700; font-size: 14px; text-decoration: none; }
.bh-popular-all:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .bh-popular { padding: 40px 0 44px; }
  .bh-popular-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}

/* Form error/success banner — make it impossible to miss, and give it somewhere
   to breathe so it doesn't sit flush under the page header. */
#bh-form-message { scroll-margin-top: 100px; outline: none; }
#bh-form-message.bh-alert-error {
  border-left: 4px solid #B3261E;
  box-shadow: 0 8px 24px -10px rgba(179,38,30,.35);
  animation: bhAlertIn .3s ease;
}
#bh-form-message.bh-alert-success {
  border-left: 4px solid var(--green);
  box-shadow: 0 8px 24px -10px rgba(0,92,56,.3);
  animation: bhAlertIn .3s ease;
}
@keyframes bhAlertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Current plan + unavailable features on the pricing table */
.bh-plan.is-current { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bh-plan-cta.current { display:block; text-align:center; padding:12px; border-radius:10px; background:var(--green-light); color:var(--green); font-weight:800; font-size:14px; }
.bh-plan-features li.no { opacity:.42; }
.bh-plan-features li.no .bh-tick { filter: grayscale(1); }
.bh-pay-note { max-width:720px; margin:44px auto 0; padding:24px 26px; background:#FAFCFB; border:1px solid var(--border); border-radius:14px; }
.bh-pay-note h3 { font-size:16px; font-weight:800; margin:0 0 10px; color:var(--dark); }
.bh-pay-note p { font-size:14px; line-height:1.7; color:var(--text); margin:0 0 10px; }

/* ════════════════════════════════════════════════════════════════
   HEADER v2  +  MOBILE HARDENING
   ════════════════════════════════════════════════════════════════ */

/* ── 1. NOTHING may be wider than the screen ──
   The horizontal scrolling was because nothing capped the page width. One
   oversized element anywhere and the whole document scrolls sideways, which on a
   phone makes every page feel broken. This stops it at the root instead of
   chasing each offender. */
/**
 * position: sticky DIES if any ancestor has overflow-x: hidden — the browser
 * treats that ancestor as the scroll container, so the header has nothing to
 * stick to. That is exactly what happened: the fix for horizontal scrolling
 * silently broke the sticky header.
 *
 * overflow-x: clip stops the sideways scroll WITHOUT creating a scroll
 * container, so sticky keeps working. The hidden fallback is kept first for
 * ancient browsers that do not know clip; they lose sticky, not the layout.
 */
html, body { max-width: 100%; }
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
img, svg, video, iframe, table { max-width: 100%; }
/* Long emails/URLs are a classic cause of sideways scroll on narrow screens. */
p, a, li, td, h1, h2, h3, span { overflow-wrap: break-word; word-break: break-word; }

/* ── 2. DESKTOP HEADER ──
   Bigger logo, nav centred, "List Your Business" in the middle of the bar, and
   Log In moved to its own slim row underneath the menu. */
:root { --bh-logo-h: 132px; --bh-header-h: 150px; }

.bh-header-main {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--bh-header-h);
}
.bh-logo { flex-shrink: 0; margin-right: 8px; }
.bh-logo-img { height: var(--bh-logo-h); width: auto; }

.bh-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }

.bh-header-cta {
  flex-shrink: 0;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 9px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--glow-green);
  transition: transform .18s ease, box-shadow .22s ease;
}
.bh-header-cta:hover { transform: translateY(-2px); box-shadow: var(--glow-strong); }


/* ── 3. MOBILE ── */
@media (max-width: 900px) {
  :root { --bh-logo-h: 82px; --bh-header-h: 96px; }

  .bh-header-main { gap: 12px; }
  .bh-logo { order: 1; margin-right: auto; }

  /* The CTA was sitting in the bar next to the logo and hamburger, which is what
     pushed the header past the screen edge. On a phone it belongs in the menu. */

  .bh-nav-links { display: none; }
  .bh-nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--bh-header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--bh-header-h));
    overflow-y: auto;
    background: #fff;
    padding: 14px 20px 20px;
    gap: 4px;
    z-index: 999;
    box-shadow: var(--shadow-lg);
  }
  .bh-nav-links.open a { padding: 13px 14px; border-radius: 8px; font-size: 15px; }

  /* Full-width CTA at the bottom of the open menu. */
  .bh-nav-links.open::after { content: ""; display: block; height: 4px; }


  /* Content that used to overflow */
  .container { padding: 0 16px; }
  .bh-popular-grid { grid-template-columns: repeat(2, 1fr); }
  .bh-plans { grid-template-columns: 1fr; }
  .bh-search-filters { flex-direction: column; }
  .bh-search-filters select,
  .bh-search-filters input { width: 100%; min-width: 0; }
  .bh-dash-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  :root { --bh-logo-h: 66px; --bh-header-h: 82px; }
  .bh-popular-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bh-hero-title { font-size: 27px; }
}

/* CTA inside the mobile menu (hidden on desktop, where it sits in the bar). */
.bh-nav-cta { display: none; }
@media (max-width: 900px) {
  .bh-nav-links.open .bh-nav-cta {
    display: block;
    margin-top: 10px;
    background: var(--green);
    color: #fff !important;
    text-align: center;
    font-weight: 700;
    padding: 14px !important;
    border-radius: 10px;
  }
}


/* ── Header actions: Log In + List Your Business together on the right ── */
.bh-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.bh-header-actions .bh-btn-secondary,
.bh-header-actions .bh-btn-my-profile,
.bh-header-actions .bh-btn-logout {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 9px;
}
.bh-header-actions .bh-btn-secondary { border: 1.5px solid var(--border); color: var(--dark); }
.bh-header-actions .bh-btn-secondary:hover { border-color: var(--green); color: var(--green); }
.bh-header-actions .bh-btn-my-profile { background: var(--green-light); color: var(--green); }
.bh-header-actions .bh-btn-logout { color: var(--muted); }
.bh-header-actions .bh-btn-logout:hover { color: #B3261E; }

@media (max-width: 900px) {
  /* On a phone only the logo and the hamburger fit. Everything else moves into
     the menu, which is what stopped the header overflowing the screen. */
}

/* Auth + CTA inside the mobile menu (hidden on desktop, where they sit in the bar) */
.bh-nav-mobile-auth { display: none; }
@media (max-width: 900px) {
  .bh-nav-links.open .bh-nav-mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .bh-nav-login {
    display: block; text-align: center; padding: 13px !important;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-weight: 700; color: var(--dark) !important;
  }
  .bh-nav-cta {
    display: block; text-align: center; padding: 14px !important;
    background: var(--green); color: #fff !important;
    border-radius: 10px; font-weight: 700;
  }
}

/* ════ MOBILE LAYOUT — REAL FIXES ════
   The profile page never collapsed on phones because the mobile rule targeted
   .biz-body-grid, a class that does not exist. The actual grid is
   .biz-content-grid (1fr 320px), so the 320px sidebar kept its width, squeezed
   the main column to a sliver, and words wrapped one letter per line. */
@media (max-width: 900px) {
  .biz-content-grid {
    grid-template-columns: 1fr;   /* stack: main content, then contact box */
    gap: 16px;
    padding: 18px 0 44px;
  }
  .biz-sidebar-col { position: static; }
  .biz-contact-box { position: static; }

  /* Contact buttons go full width instead of running off the screen */
  .biz-cta-call, .biz-cta-wa, .biz-cta-email { width: 100%; text-align: center; }
  .biz-links-row { gap: 8px; }
  .biz-link-btn { flex: 1 1 auto; text-align: center; }

  /* Search filters: one per row, none of them wider than the screen */
  .bh-search-filters { flex-direction: column; gap: 10px; }
  .bh-search-filters input,
  .bh-search-filters select,
  .bh-search-filters button { width: 100%; min-width: 0; }
}

/* A word must never break mid-letter. overflow-wrap only breaks a word when it
   genuinely cannot fit; word-break: break-word was chopping "Website" into
   W-e-b-s-i-t-e down the page once a container got narrow. */
p, a, li, td, h1, h2, h3, span { word-break: normal; overflow-wrap: break-word; }

/* ════════════════════════════════════════════════════════════════
   HERO — dark green + halftone dots + neon glow (client's sample)
   Layers, back to front:
     1. deep green gradient          (the base colour)
     2. halftone dot field           (pure CSS radial-gradient, no image = no
                                      extra request, and it scales on any screen)
     3. neon green light bloom       (soft radial glows, top-right + bottom-left)
     4. content
   ════════════════════════════════════════════════════════════════ */
.bh-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% 15%, rgba(34,197,94,.20) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 15% 90%, rgba(16,185,129,.16) 0%, transparent 62%),
    linear-gradient(155deg, #01120A 0%, #04361E 48%, #065C31 100%);
}

/* 2. Halftone dots — denser at the edges, fading toward the middle so the
      headline stays readable. Two offset grids give it depth. */
.bh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(74,222,128,.30) 1.15px, transparent 1.15px),
    radial-gradient(rgba(74,222,128,.14) 1px, transparent 1px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, transparent 30%, #000 85%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, transparent 30%, #000 85%);
  pointer-events: none;
  filter: none;
}

/* 3. Neon bloom sweeping across the top-right */
.bh-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 130%;
  background: radial-gradient(circle, rgba(74,222,128,.22) 0%, rgba(34,197,94,.10) 40%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.bh-hero > * { position: relative; z-index: 2; }

/* Neon edge on the accent word. The heading marks it with <em> (see
   bizhub_hero_heading: "Nigeria's <em>Home</em> For Business"), NOT a span or a
   class — targeting .accent would have glowed nothing at all. */
.bh-hero-title em,
.bh-hero h1 em {
  font-style: normal;
  color: #4ADE80;
  text-shadow: 0 0 22px rgba(74,222,128,.6), 0 0 46px rgba(34,197,94,.3);
}

.bh-search-wrap {
  box-shadow: 0 0 0 1px rgba(74,222,128,.18), 0 18px 50px -12px rgba(0,0,0,.55);
}
.bh-search-wrap:focus-within {
  box-shadow: 0 0 0 2px rgba(74,222,128,.5), 0 0 34px rgba(34,197,94,.32), 0 18px 50px -12px rgba(0,0,0,.55);
}

/* Stat numbers glow softly, like the sample */
.bh-hero-stats strong,
.bh-hero-stats .num,
.bh-stat-num { text-shadow: 0 0 18px rgba(74,222,128,.5); }

/* The old flat overlay would mute all of the above. */
.bh-hero-overlay { display: none; }
.bh-hero-bg { opacity: .16; }

@media (prefers-reduced-motion: reduce) {
  .bh-hero::before, .bh-hero::after { animation: none; }
}

/* ════ SEARCH FILTER ROW ════
   Five controls were being squeezed onto one line, so the longest option text
   ("City / LGA — pick a state first") spilled outside its own box. A grid gives
   each control a real minimum width and wraps to a second row when it must. */
.bh-search-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: center;
}
.bh-search-filters input,
.bh-search-filters select {
  width: 100%;
  min-width: 0;              /* lets a grid item actually shrink */
  text-overflow: ellipsis;   /* long option text is trimmed, never spills */
}
.bh-search-filters select:disabled {
  background: #F4F6F5;
  color: var(--muted);
  cursor: not-allowed;
}
@media (max-width: 1100px) {
  .bh-search-filters { grid-template-columns: 1fr 1fr 1fr; }
  .bh-search-filters button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bh-search-filters { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   HEADER v3
   - mobile: hamburger LEFT, logo RIGHT (swapped)
   - logo more prominent, header SHORTER on desktop
   ════════════════════════════════════════════════════════════════ */

/* The header was 150px tall with a 132px logo — 18px of dead space, and too
   tall overall. Tighten the bar AND make the mark read bigger.
   The trick: transform: scale() enlarges what you SEE without changing the
   element's layout box, so the logo grows while the header actually shrinks. */
:root {
  --bh-header-h: 116px;   /* was 150px */
  --bh-logo-h:   100px;
}

.bh-logo-img {
  height: var(--bh-logo-h);
  width: auto;
  transform: scale(1.16);          /* looks ~116px, still occupies 100px */
  transform-origin: left center;   /* grows rightward, never off the left edge */
}

.bh-header-main { height: var(--bh-header-h); }

@media (max-width: 900px) {
  :root {
    --bh-header-h: 84px;
    --bh-logo-h:   62px;
  }

  /* SWAPPED: hamburger on the left, logo on the right. */
  .bh-hamburger {
    order: 1;
    margin-right: auto;
    margin-left: 0;
  }
  .bh-logo {
    order: 2;
    margin-left: auto;
    margin-right: 0;
  }

  /* Growing rightward would push the logo off-screen now that it sits on the
     right edge, so grow it leftward instead. */
  .bh-logo-img { transform: scale(1.1); transform-origin: right center; }

  /* The drawer opens under the bar, so it must follow the bar's real height. */
  .bh-nav-links.open { top: var(--bh-header-h); }
}

@media (max-width: 420px) {
  :root { --bh-header-h: 74px; --bh-logo-h: 54px; }
}

/* scale() overflows its layout box, so the enlarged logo would sit ON TOP of the
   nav links. Reserve the extra width instead of letting it collide. */
.bh-logo { margin-right: 42px; }

@media (max-width: 900px) {
  /* On mobile it grows leftward (toward the hamburger), so pad that side. */
  .bh-logo { margin-right: 0; margin-left: auto; padding-left: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   HEADER v4 — client's approved layout
   MOBILE (his spec, exactly):  [Menu]  [ List Your Business ]  [LOGO]
   DESKTOP (he agreed):         [nav links] [ List Your Business ] [auth] [LOGO]
   Sticky on both. Shrinks on scroll so a permanent header does not eat the page.
   ════════════════════════════════════════════════════════════════ */

.bh-header {
  position: sticky;            /* stays visible while scrolling */
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
.bh-header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(0,0,0,.18); }

.bh-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--bh-header-h);
  transition: height .22s ease;
}

/* The CTA is the loudest thing in the header, as asked. */
.bh-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #16A34A 0%, #0B7A3B 100%);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 6px 18px -6px rgba(11,122,59,.55);
  transition: transform .18s ease, box-shadow .22s ease, padding .22s ease, font-size .22s ease;
}
.bh-header-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(11,122,59,.7); }
.bh-cta-plus { font-size: 1.15em; font-weight: 700; line-height: 1; }

.bh-logo { flex-shrink: 0; }
.bh-logo-img {
  height: var(--bh-logo-h);
  width: auto;
  transform: none;
  transition: height .22s ease;
}

/* ── MOBILE: the client's layout, exactly ── */
@media (max-width: 900px) {
  :root { --bh-header-h: 92px; --bh-logo-h: 62px; }

  .bh-header-main { gap: 10px; padding: 0 14px; }

  /* Menu icon — LEFT, with the small "Menu" caption from his sample */
  .bh-hamburger {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 4px;
    flex-shrink: 0;
    cursor: pointer;
  }
  .bh-hamburger span { display: block; width: 26px; height: 3px; border-radius: 2px; background: #111; }
  .bh-hamburger em { font-style: normal; font-size: 11px; font-weight: 600; color: #111; }

  /* CTA — CENTRE, large and green: the most noticeable item */
  .bh-header-cta {
    display: inline-flex;   /* explicit: earlier builds hid this on mobile */
    order: 2;
    flex: 1 1 auto;
    margin: 0 4px;
    font-size: 15px;
    padding: 13px 14px;
  }

  /* Logo — RIGHT, larger */
  .bh-logo { order: 3; }

  /* Desktop-only pieces */
  .bh-nav-links { display: none; }
  .bh-header-actions { display: none; }

  .bh-nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--bh-header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--bh-header-h));
    overflow-y: auto;
    background: #fff;
    padding: 14px 20px 22px;
    gap: 4px;
    z-index: 999;
    box-shadow: var(--shadow-lg);
  }
  .bh-nav-links.open a { padding: 13px 14px; border-radius: 8px; font-size: 15px; }

  /* Shrink on scroll so the sticky bar stays out of the way */
  .bh-header.is-scrolled { --bh-header-h: 68px; --bh-logo-h: 48px; }
  .bh-header.is-scrolled .bh-header-cta { font-size: 14px; padding: 10px 12px; }
  .bh-header.is-scrolled .bh-hamburger em { display: none; }
}

@media (max-width: 380px) {
  .bh-header-cta { font-size: 13px; padding: 12px 8px; }
  .bh-cta-plus { display: none; }   /* text before decoration when space is tight */
}

/* ── DESKTOP ── */
@media (min-width: 901px) {
  :root { --bh-header-h: 104px; --bh-logo-h: 78px; }

  .bh-hamburger { display: none; }

  .bh-nav-links {
    order: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
  }
  .bh-nav-links a { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .bh-nav-mobile-auth { display: none; }

  .bh-header-cta {
    order: 2;
    font-size: 16px;
    padding: 14px 26px;
  }

  .bh-header-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    justify-content: flex-end;
  }

  .bh-logo { order: 4; margin-left: 8px; }

  /* Sticky headers cost vertical space on every page. Shrinking on scroll keeps
     the logo prominent at the top, then gets out of the way while reading. */
  .bh-header.is-scrolled { --bh-header-h: 74px; --bh-logo-h: 56px; }
  .bh-header.is-scrolled .bh-header-cta { font-size: 15px; padding: 11px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   TRENDING SECTION — same dark green + dots + neon as the hero
   ════════════════════════════════════════════════════════════════ */
.bh-popular {
  position: relative;
  overflow: hidden;
  padding: 64px 0 68px;
  background:
    radial-gradient(ellipse 70% 60% at 20% 10%, rgba(34,197,94,.18) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 85% 90%, rgba(16,185,129,.15) 0%, transparent 62%),
    linear-gradient(160deg, #01120A 0%, #04361E 50%, #065C31 100%);
}

/* Halftone dots, faded in the middle so the heading stays readable */
.bh-popular::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(74,222,128,.28) 1.15px, transparent 1.15px),
    radial-gradient(rgba(74,222,128,.13) 1px, transparent 1px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 25%, #000 85%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 25%, #000 85%);
  pointer-events: none;
}
.bh-popular > * { position: relative; z-index: 2; }

/* Text on dark */
.bh-popular-head h2 { color: #fff; text-shadow: 0 0 26px rgba(74,222,128,.25); }
.bh-popular-head p  { color: rgba(255,255,255,.72); }

.bh-popular-live {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.35);
  color: #4ADE80;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 22px rgba(74,222,128,.22);
}
.bh-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: bh-pulse 2s infinite;
}
@keyframes bh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Cards: frosted glass with a neon edge, like the CTA button */
.bh-popular-card {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(74,222,128,.22);
  border-radius: 16px;
  padding: 22px 14px 18px;
  text-align: center;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 30px -14px rgba(0,0,0,.6);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.bh-popular-card:hover {
  transform: translateY(-4px);
  background: rgba(74,222,128,.10);
  border-color: rgba(74,222,128,.6);
  box-shadow: 0 0 0 1px rgba(74,222,128,.25) inset,
              0 0 28px rgba(34,197,94,.35),
              0 18px 40px -18px rgba(0,0,0,.7);
}
.bh-popular-card .bh-popular-icon { font-size: 26px; display: block; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(74,222,128,.5)); }
.bh-popular-card .bh-popular-name  { display: block; color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.bh-popular-card .bh-popular-meta  { display: block; color: rgba(255,255,255,.62); font-size: 12px; }

/* The #1 card glows brightest */
.bh-popular-card.top {
  border-color: rgba(245,197,66,.55);
  background: rgba(245,197,66,.08);
  box-shadow: 0 0 26px rgba(245,197,66,.22), 0 14px 34px -16px rgba(0,0,0,.6);
}
.bh-popular-card.top:hover {
  border-color: rgba(245,197,66,.85);
  box-shadow: 0 0 34px rgba(245,197,66,.4), 0 18px 40px -18px rgba(0,0,0,.7);
}
.bh-popular-rank {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(180deg, #F5C542 0%, #D9A315 100%);
  color: #3A2A00;
  font-size: 11px; font-weight: 900;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(245,197,66,.6);
}

.bh-popular .bh-popular-all {
  color: #4ADE80;
  font-weight: 800;
  text-shadow: 0 0 16px rgba(74,222,128,.45);
}
.bh-popular .bh-popular-all:hover { color: #86EFAC; }

/* ── LOGO: bigger on both, per client ── */
@media (min-width: 901px) {
  :root { --bh-header-h: 120px; --bh-logo-h: 96px; }
  .bh-header.is-scrolled { --bh-header-h: 80px; --bh-logo-h: 62px; }
}
@media (max-width: 900px) {
  :root { --bh-header-h: 100px; --bh-logo-h: 74px; }
  .bh-header.is-scrolled { --bh-header-h: 72px; --bh-logo-h: 54px; }
}
/* Keep it crisp if the source file is small — never upscale a raster past its
   natural size or it goes soft. */
.bh-logo-img { image-rendering: auto; max-width: 100%; }

/* ════════════════════════════════════════════════════════════════
   ONE CONTINUOUS GREEN BAND — hero + trending, no visible seam
   ════════════════════════════════════════════════════════════════ */

/* The seam appeared because the hero ENDED light (#065C31) and trending STARTED
   dark (#01120A) — a hard edge between two unrelated gradients. Trending now
   picks up exactly where the hero leaves off, so they read as one section. */
.bh-popular {
  background:
    radial-gradient(ellipse 70% 60% at 18% 8%,  rgba(74,222,128,.20) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 88% 92%, rgba(34,197,94,.18) 0%, transparent 62%),
  background:
    radial-gradient(ellipse 70% 60% at 18% 8%,  rgba(74,222,128,.20) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 88% 92%, rgba(34,197,94,.18) 0%, transparent 62%),
    linear-gradient(180deg, #065C31 0%, #0A7A42 45%, #075A32 100%);
  margin-top: -1px;              /* kills the 1px hairline between sections */
  border-top: 0;
}

/* Client: the cards were too dark and hard to read. Lift them off the green. */
.bh-popular-card {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px -14px rgba(0,0,0,.45);
}
.bh-popular-card:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(134,239,172,.85);
  box-shadow: 0 0 26px rgba(134,239,172,.45), 0 16px 34px -16px rgba(0,0,0,.5);
}
.bh-popular-card .bh-popular-name { color: #fff; }
.bh-popular-card .bh-popular-meta { color: rgba(255,255,255,.78); }

/* ════════════════════════════════════════════════════════════════
   STATE CARDS — green, like the List Your Business button
   ════════════════════════════════════════════════════════════════ */
.bh-state-text-card {
  display: block;
  text-align: center;
  padding: 20px 12px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, #16A34A 0%, #0B7A3B 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 18px -8px rgba(11,122,59,.55);
  transition: transform .18s ease, box-shadow .24s ease, filter .24s ease;
}
.bh-state-text-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 0 24px rgba(34,197,94,.5), 0 14px 30px -12px rgba(11,122,59,.7);
}
.bh-state-text-card h3,
.bh-state-text-card strong,
.bh-state-text-card .bh-state-name {
  color: #fff;
  font-weight: 800;
  margin: 0 0 4px;
}
.bh-state-text-card span,
.bh-state-text-card small,
.bh-state-text-card .bh-state-count { color: rgba(255,255,255,.85); font-size: 12.5px; }

/* ── Category icons: the folder emoji looked cheap. Real glyphs instead. ── */
.bh-popular-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 22px;
  filter: none;
}
.bh-popular-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.9; }

/* ════════════════════════════════════════════════════════════════
   ONE BAND behind hero + trending — identical texture, no seam
   ════════════════════════════════════════════════════════════════ */
.bh-dark-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 78% 12%, rgba(34,197,94,.20) 0%, transparent 60%),
    radial-gradient(ellipse 70% 45% at 15% 88%, rgba(16,185,129,.16) 0%, transparent 62%),
    linear-gradient(165deg, #02180D 0%, #053F23 45%, #076A38 100%);
}

/* The dot texture is drawn ONCE, across the whole band. */
.bh-dark-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(74,222,128,.26) 1.15px, transparent 1.15px),
    radial-gradient(rgba(74,222,128,.12) 1px, transparent 1px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 11px;
  /* Dots stay strong at the edges and fade toward the middle, so the headline and
     the search box stay easy to read. Same effect as the client's sample. */
  -webkit-mask-image: radial-gradient(ellipse 58% 50% at 50% 40%, transparent 22%, #000 88%);
          mask-image: radial-gradient(ellipse 58% 50% at 50% 40%, transparent 22%, #000 88%);
  pointer-events: none;
  z-index: 0;
}
.bh-dark-band > * { position: relative; z-index: 1; }

/* Both sections now sit on that band and add NO background of their own —
   which is the only way the texture can be truly identical across both. */
.bh-hero,
.bh-popular {
  background: none !important;
}
.bh-hero::before,
.bh-hero::after,
.bh-popular::before { content: none !important; }

.bh-popular { padding: 20px 0 78px; margin-top: 0; }
.bh-hero    { padding: 74px 0 40px; }

/* ════════════════════════════════════════════════════════════════
   BROWSE BY STATE — was white cards on a near-white background
   ════════════════════════════════════════════════════════════════ */
.bh-states-sec {
  background: linear-gradient(180deg, #F2F8F4 0%, #E7F2EB 100%);
  padding: 62px 0 70px;
}
.bh-states-sec .sec-title  { color: var(--dark); }
.bh-states-sec .sec-eyebrow { color: var(--green); font-weight: 800; letter-spacing: .08em; }

.bh-states-text-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* Green cards, same family as the List Your Business button. */
.bh-state-text-card {
  display: block;
  text-align: center;
  padding: 20px 12px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, #16A34A 0%, #0B7A3B 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px -8px rgba(11,122,59,.5);
  transition: transform .18s ease, box-shadow .24s ease, filter .2s ease;
}
.bh-state-text-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 0 26px rgba(34,197,94,.55), 0 14px 30px -12px rgba(11,122,59,.65);
}
.bh-state-text-card h3   { color: #fff; font-weight: 800; font-size: 15px; margin: 0 0 3px; }
.bh-state-text-card span { color: rgba(255,255,255,.88); font-size: 12.5px; }

@media (max-width: 640px) {
  .bh-states-text-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bh-state-text-card  { padding: 16px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   HEADER — smooth slide away / slide back
   ════════════════════════════════════════════════════════════════ */
.bh-header {
  transform: translateY(0);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1),
              box-shadow .25s ease,
              background .25s ease;
  will-change: transform;
}

/* Scrolling down: slide the whole bar up out of view. */
.bh-header.is-hidden { transform: translateY(-100%); }

/* Compact state — logo and CTA ease down rather than snapping. */
.bh-header.is-scrolled {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 26px -12px rgba(0,0,0,.22);
}
.bh-header-main,
.bh-logo-img,
.bh-header-cta { transition: height .28s ease, font-size .28s ease, padding .28s ease; }

/* Never hide the bar while the mobile menu is open — it would take the drawer with it. */
.bh-header:has(.bh-nav-links.open) { transform: translateY(0) !important; }

/* The square logo reads bigger than the old wide one at the same height. */
@media (min-width: 901px) {
  :root { --bh-header-h: 118px; --bh-logo-h: 94px; }
  .bh-header.is-scrolled { --bh-header-h: 76px; --bh-logo-h: 58px; }
}
@media (max-width: 900px) {
  :root { --bh-header-h: 96px; --bh-logo-h: 72px; }
  .bh-header.is-scrolled { --bh-header-h: 70px; --bh-logo-h: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-header { transition: none; }
  .bh-header.is-hidden { transform: none; }   /* motion sensitivity: never slide */
}

/* ════════════════════════════════════════════════════════════════
   HEADER — always visible, BIG logo, shrinks on scroll
   ════════════════════════════════════════════════════════════════ */

/* The client wants it permanently on screen. Kill the slide-away entirely. */
.bh-header.is-hidden { transform: none !important; }
.bh-header { transform: none !important; }

/* BIG at the top of the page. The square logo takes almost the full bar height.
   It shrinks hard on scroll, so a tall header never gets in the way of reading. */
@media (min-width: 901px) {
  :root { --bh-header-h: 158px; --bh-logo-h: 140px; }
  .bh-header.is-scrolled { --bh-header-h: 78px; --bh-logo-h: 62px; }
}
@media (max-width: 900px) {
  :root { --bh-header-h: 112px; --bh-logo-h: 96px; }
  .bh-header.is-scrolled { --bh-header-h: 68px; --bh-logo-h: 54px; }
}
@media (max-width: 420px) {
  :root { --bh-header-h: 96px; --bh-logo-h: 80px; }
  .bh-header.is-scrolled { --bh-header-h: 62px; --bh-logo-h: 48px; }
}

/* The source file is 1244x1244, so it stays sharp at these sizes — no blur.
   height:auto + width:auto keeps the aspect ratio honest. */
.bh-logo-img {
  height: var(--bh-logo-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: height .28s ease;
}

/* A tall bar plus a centred CTA needs the nav to stop hogging width. */
@media (min-width: 901px) {
  .bh-nav-links a { padding: 8px 10px; font-size: 14.5px; }
  .bh-header-main { gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   PRICING — every plan shows every feature, tick or cross
   ════════════════════════════════════════════════════════════════ */
.bh-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.bh-plan {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 28px 22px 24px;
  transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
}
.bh-plan:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.22); }

/* The recommended plan should be obvious at a glance. */
.bh-plan.popular {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12), 0 20px 44px -22px rgba(11,122,59,.4);
}
.bh-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #16A34A 0%, #0B7A3B 100%);
  color: #fff; font-size: 11px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(11,122,59,.7);
}
.bh-plan.is-current { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.bh-plan h3 { font-size: 18px; font-weight: 800; margin: 4px 0 6px; color: var(--dark); }
.bh-plan-price { font-size: 34px; font-weight: 900; color: var(--dark); line-height: 1.1; }
.bh-plan-price span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bh-plan-period { font-size: 13.5px; color: var(--muted); margin: 6px 0 18px; }

/* Every feature on every plan — no "everything in X, plus…" */
.bh-plan-features { list-style: none; margin: 0 0 20px; padding: 0; }
.bh-plan-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #F1F5F3;
}
.bh-plan-features li:last-child { border-bottom: 0; }
.bh-plan-features li.no span { color: #9AA5A0; text-decoration: line-through; text-decoration-color: #D6DEDA; }

.bh-yes { color: #16A34A; font-weight: 900; font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.bh-no  { color: #C9D3CE; font-weight: 700; font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.bh-num {
  color: #0B7A3B; font-weight: 900; font-size: 13px;
  width: 20px; text-align: center; flex-shrink: 0;
}

.bh-plan-cta {
  display: block; width: 100%; text-align: center;
  padding: 13px; border-radius: 11px;
  font-weight: 800; font-size: 14.5px;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.bh-plan-cta.primary   { background: linear-gradient(180deg,#16A34A 0%,#0B7A3B 100%); color: #fff; box-shadow: 0 8px 20px -8px rgba(11,122,59,.6); }
.bh-plan-cta.primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.bh-plan-cta.secondary { background: #F2F8F4; color: #0B7A3B; border: 1.5px solid #CFE6D8; }
.bh-plan-cta.secondary:hover { border-color: var(--green); }
.bh-plan-cta.current   { background: var(--green-light); color: var(--green); }
.bh-upgrade-form { margin: 0; }

/* ── Side-by-side table ── */
.bh-compare-title { text-align: center; margin: 56px 0 20px; font-size: 24px; font-weight: 800; color: var(--dark); }
.bh-compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.bh-compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.bh-compare th, .bh-compare td { padding: 14px 12px; text-align: center; border-bottom: 1px solid #F1F5F3; }
.bh-compare thead th { background: #FAFCFB; position: sticky; top: 0; }
.bh-compare th.popular, .bh-compare td.popular { background: rgba(22,163,74,.05); }
.bh-compare-feat { text-align: left !important; font-weight: 600; color: var(--text); font-size: 14px; }
.bh-compare-name  { display: block; font-weight: 800; color: var(--dark); font-size: 15px; }
.bh-compare-price { display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
.bh-compare tbody tr:last-child td { border-bottom: 0; }
.bh-compare .bh-yes, .bh-compare .bh-no, .bh-compare .bh-num { width: auto; }

@media (max-width: 900px) {
  .bh-plans { grid-template-columns: 1fr; gap: 26px; }
  .bh-plan.popular { order: -1; }   /* recommended plan first on a phone */
  .bh-compare-title { margin-top: 40px; font-size: 20px; }
}

/* ════ LOGO — as large as the bar can carry ════ */
@media (min-width: 901px) {
  :root { --bh-header-h: 170px; --bh-logo-h: 156px; }
  .bh-header.is-scrolled { --bh-header-h: 80px; --bh-logo-h: 66px; }
}
@media (max-width: 900px) {
  :root { --bh-header-h: 120px; --bh-logo-h: 106px; }
  .bh-header.is-scrolled { --bh-header-h: 70px; --bh-logo-h: 56px; }
}
@media (max-width: 420px) {
  :root { --bh-header-h: 100px; --bh-logo-h: 86px; }
  .bh-header.is-scrolled { --bh-header-h: 64px; --bh-logo-h: 50px; }
}

/* The logo is the tallest thing in the bar, so give it room and let it breathe. */
.bh-logo { display: flex; align-items: center; flex-shrink: 0; }
.bh-logo-img {
  height: var(--bh-logo-h);
  width: auto;
  max-width: none;
  display: block;
  transition: height .26s ease;
}

/* With a 156px logo the nav needs to be tighter or the bar overflows. */
@media (min-width: 901px) and (max-width: 1300px) {
  .bh-nav-links a { padding: 7px 8px; font-size: 14px; }
  .bh-header-cta  { font-size: 15px; padding: 12px 18px; }
}

/* ════════════════════════════════════════════════════════════════
   SEARCH BOX v2 — icons in every field, black+green, professional
   ════════════════════════════════════════════════════════════════ */
.bh-search-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 10px;
  align-items: stretch;
  background: #fff;
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 24px 60px -24px rgba(0,0,0,.5);
}

/* Each field is icon + control on one rounded row. */
.bh-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #F4F7F5;
  border: 1.5px solid #E4EBE7;
  border-radius: 11px;
  padding: 0 12px;
  transition: border-color .18s ease, background .18s ease;
}
.bh-search-field:focus-within { border-color: #0B7A3B; background: #fff; }

.bh-field-ico {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: #0B7A3B; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.bh-search-field input,
.bh-search-field select {
  border: 0; background: transparent; outline: none;
  width: 100%; padding: 15px 8px; font-size: 15px; color: #12211B;
  appearance: none; -webkit-appearance: none;
}
.bh-search-field select { cursor: pointer; }

/* One clean chevron. appearance:none hides the browser's default arrow,
   so we draw exactly one ourselves. */
.bh-search-cat::after,
.bh-search-state::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid #6B7A72; border-bottom: 2px solid #6B7A72;
  transform: rotate(45deg); pointer-events: none;
}

/* Search button — black base, green on hover, with the magnifier icon */
.btn-search {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #12211B;
  color: #fff; border: 0; cursor: pointer;
  padding: 0 26px; border-radius: 11px;
  font-size: 15px; font-weight: 800; white-space: nowrap;
  transition: background .18s ease, transform .16s ease;
}
.btn-search:hover { background: #0B7A3B; transform: translateY(-1px); }
.btn-search svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .bh-search-wrap { grid-template-columns: 1fr; }
  .btn-search { padding: 15px; }
}

/* ── Stat row icons ── */
.bh-hero-stats .bh-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bh-stat-ico {
  width: 24px; height: 24px; margin-bottom: 4px;
  fill: none; stroke: #4ADE80; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(74,222,128,.5));
}


/* ════ LOGO SIZE — client said the 156px logo was too big ════
   The blue+green mark is square, so it reads large even at a modest height.
   These come LAST so they win over the earlier oversized values. */
@media (min-width: 901px) {
  :root { --bh-header-h: 104px; --bh-logo-h: 74px; }
  .bh-header.is-scrolled { --bh-header-h: 72px; --bh-logo-h: 54px; }
}
@media (max-width: 900px) {
  :root { --bh-header-h: 84px; --bh-logo-h: 60px; }
  .bh-header.is-scrolled { --bh-header-h: 64px; --bh-logo-h: 48px; }
}
@media (max-width: 420px) {
  :root { --bh-header-h: 74px; --bh-logo-h: 52px; }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD SHELL — these classes existed in the template with NO CSS,
   so the sidebar and main column were stacking instead of sitting
   side by side. Found in a full audit.
   ════════════════════════════════════════════════════════════════ */
.bh-dash-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.bh-dash-sidebar { align-self: start; position: sticky; top: calc(var(--bh-header-h) + 16px); }
.bh-dash-nav {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.2);
}

.bh-dash-user {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #0B7A3B 0%, #075A32 100%);
  color: #fff;
}
.bh-dash-user-name  { font-weight: 800; font-size: 15px; }
.bh-dash-user-email { font-size: 12px; color: rgba(255,255,255,.8); word-break: break-all; }

.bh-dash-menu { display: flex; flex-direction: column; padding: 8px; }
.bh-dash-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.bh-dash-menu a:hover      { background: #F2F8F4; color: #0B7A3B; }
.bh-dash-menu a.active     { background: var(--green-light); color: #0B7A3B; }

.bh-dash-main { min-width: 0; }   /* min-width:0 lets the column shrink instead of overflowing */

@media (max-width: 860px) {
  .bh-dash-wrap { grid-template-columns: 1fr; gap: 16px; padding: 20px 14px 44px; }
  .bh-dash-sidebar { position: static; }
  .bh-dash-menu { flex-direction: row; flex-wrap: wrap; }
  .bh-dash-menu a { flex: 1 1 auto; justify-content: center; }
}

/* Dashboard listing card */
.bh-dash-listing {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.18);
}
.bh-dash-listing-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.bh-dash-listing-header h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--dark); }

/* ════ STAT ROW — thin divider between each stat (client's request) ════ */
.bh-hero-stats { gap: 0; border: 0; }
.bh-hero-stats .bh-stat {
  padding: 0 34px;
  position: relative;
}
/* a soft vertical line before every stat except the first */
.bh-hero-stats .bh-stat + .bh-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
}
@media (max-width: 560px) {
  .bh-hero-stats .bh-stat { padding: 0 18px; }
  .bh-hero-stats .bh-stat + .bh-stat::before { height: 38px; }
}

/* ════ SMOOTH SCROLL (client asked), header stays sticky ════ */
html { scroll-behavior: smooth; }

/* ════ LOGO — client wants it MUCH bigger; blur is acceptable to him ════
   These come last, so they win over every earlier logo-size block. */
@media (min-width: 901px) {
  :root { --bh-header-h: 186px; --bh-logo-h: 168px; }   /* bigger + clearer, per client */
  .bh-header.is-scrolled { --bh-header-h: 150px; --bh-logo-h: 132px; }  /* stays big when scrolled */
}
@media (max-width: 900px) {
  :root { --bh-header-h: 128px; --bh-logo-h: 112px; }
  .bh-header.is-scrolled { --bh-header-h: 108px; --bh-logo-h: 94px; }
}
@media (max-width: 420px) {
  :root { --bh-header-h: 108px; --bh-logo-h: 92px; }
  .bh-header.is-scrolled { --bh-header-h: 92px; --bh-logo-h: 78px; }
}

/* Keep the logo crisp — never let the browser soften it when scaling down. */
.bh-logo-img { image-rendering: -webkit-optimize-contrast; background: transparent; mix-blend-mode: normal; }

/* ════════════════════════════════════════════════════════════════
   POPULAR CATEGORIES — built to the client's written spec
   White cards on light bg · green line icons · horizontal scroll
   ════════════════════════════════════════════════════════════════ */
.bh-popular-cats {
  background: #F7FAF8;
  padding: 48px 0 52px;
}

.bh-pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.bh-pc-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #1F2937;            /* spec: very dark gray */
}
.bh-pc-viewall {
  color: #138B3A;            /* spec: green */
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.bh-pc-viewall span { transition: transform .15s ease; display: inline-block; }
.bh-pc-viewall:hover span { transform: translateX(3px); }

/* Horizontally scrollable row */
.bh-pc-scroller {
  display: flex;
  gap: 14px;                 /* spec: 12-16px */
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bh-pc-scroller::-webkit-scrollbar { height: 6px; }
.bh-pc-scroller::-webkit-scrollbar-thumb { background: #D4E3DA; border-radius: 3px; }

/* Each white card */
.bh-pc-card {
  flex: 0 0 auto;
  width: 128px;
  min-height: 120px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;                 /* spec: icon-to-text 10-12px */
  padding: 18px 14px;        /* spec: ~16px */
  background: #FFFFFF;        /* spec: white */
  border-radius: 18px;       /* spec: 18px */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);   /* spec: exact shadow */
  text-decoration: none;
  transition: transform .18s ease, box-shadow .22s ease;
}
.bh-pc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

/* Green line icon */
.bh-pc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
}
.bh-pc-icon svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: #138B3A;           /* spec: primary green, consistent */
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bh-pc-icon .bh-ico-emoji { font-size: 26px; }

.bh-pc-name {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;            /* spec: dark gray, bold */
  line-height: 1.25;
}

@media (max-width: 560px) {
  .bh-pc-head h2 { font-size: 22px; }
  .bh-pc-card { width: 108px; min-height: 104px; }   /* spec: 90-110px */
}

/* ════ "Coming soon" categories ════
   Shown so visitors can see what is planned, but not clickable — clicking would
   land them on an empty results page. */
/* Muted, but still clickable — clicking opens a page naming the category and
   saying it is coming soon. */
.bh-cat-card.is-coming-soon,
.bh-pc-card.is-coming-soon {
  opacity: .68;
  filter: grayscale(45%);
}
.bh-cat-card.is-coming-soon:hover,
.bh-pc-card.is-coming-soon:hover {
  opacity: .92;
  filter: grayscale(10%);
}
.bh-cat-soon,
.bh-pc-soon {
  display: inline-block;
  background: #12211B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bh-cat-soon { position: absolute; top: 12px; right: 12px; z-index: 2; }
.bh-pc-soon  { margin-top: 6px; font-size: 10px; padding: 3px 8px; }

/* Sub-category dropdown sits alongside the others in the filter bar. */
.bh-subcat-select:disabled { opacity: .6; cursor: not-allowed; }


/* ════ "Coming soon" category page ════ */
.bh-coming-soon-panel {
  max-width: 620px;
  margin: 40px auto 56px;
  text-align: center;
  padding: 44px 28px;
  background: #F7FAF8;
  border: 1px solid #E2EDE7;
  border-radius: 20px;
}
.bh-coming-soon-panel .bh-cs-icon { display: inline-flex; width: 64px; height: 64px; }
.bh-coming-soon-panel .bh-cs-icon svg {
  width: 56px; height: 56px;
  fill: none; stroke: #138B3A; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.bh-coming-soon-panel h1 {
  margin: 14px 0 8px;
  font-size: 30px; font-weight: 700; color: #1F2937;
}
.bh-cs-tag {
  display: inline-block;
  background: #12211B; color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  margin: 0 0 16px;
}
.bh-cs-text { color: #4B5563; font-size: 16px; line-height: 1.6; margin: 0 auto 24px; max-width: 480px; }
.bh-cs-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bh-cs-actions .btn-ghost {
  background: #fff; color: #12211B;
  border: 1px solid #D4E3DA; border-radius: 10px;
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.bh-cs-actions .btn-ghost:hover { border-color: #138B3A; color: #138B3A; }

/* ════ Referral widget (business dashboard) ════ */
.bh-referral-card { border: 1px solid #D4E3DA; }
.bh-ref-count {
  background: #E8F5EE; color: #138B3A;
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.bh-ref-code-row { display: flex; gap: 10px; align-items: stretch; margin: 8px 0 16px; flex-wrap: wrap; }
.bh-ref-code {
  flex: 1 1 auto; min-width: 140px;
  background: #F7FAF8; border: 1px dashed #138B3A; border-radius: 10px;
  padding: 12px 16px;
  font-size: 20px; font-weight: 800; letter-spacing: .12em;
  color: #12211B; text-align: center; font-family: monospace;
}
.bh-ref-copy { white-space: nowrap; }
.bh-ref-copy.is-copied { background: #0B7A3B !important; }
.bh-ref-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bh-ref-social {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border-radius: 8px; color: #fff;
}
.bh-ref-wa { background: #25D366; }
.bh-ref-fb { background: #1877F2; }
.bh-ref-ig { background: #E1306C; }
.bh-ref-social:hover { opacity: .9; }
.form-optional { color: #9CA3AF; font-weight: 400; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   v7.6 — SEARCH BAR: stick to the REAL header edge + one clean row
   ════════════════════════════════════════════════════════════════ */

/* Sticky offsets now follow --bh-header-real (the header's measured, live
   height, set by JS). The old var was the header's FULL height, so once the
   header shrank on scroll, the search bar stuck ~80px below it — floating in
   the middle of the results with cards showing through the gap. */
@media (min-width: 901px) {
  .bh-search-bar-wrap {
    position: sticky;
    top: var(--bh-header-real, var(--bh-header-h));
  }
}
.biz-contact-box { top: calc(var(--bh-header-real, var(--bh-header-h)) + 16px); }
@media (max-width: 900px) {
  .bh-nav-links.open {
    top: var(--bh-header-real, var(--bh-header-h));
    max-height: calc(100vh - var(--bh-header-real, var(--bh-header-h)));
  }
}

/* Filter bar layout. The old flex-wrap stranded the Search button alone on a
   second row at an odd width. Wide screens: everything on ONE row. Narrow
   desktop: 3 columns with a full-width Search button — deliberate, not broken. */
@media (min-width: 1101px) {
  .bh-search-filters {
    display: grid;
    grid-template-columns: minmax(150px, 1.5fr) repeat(5, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: stretch;
  }
  .bh-search-filters input,
  .bh-search-filters select { min-width: 0; width: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .bh-search-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bh-search-filters input,
  .bh-search-filters select { min-width: 0; width: 100%; }
  .bh-search-filters button { grid-column: 1 / -1; }
}