{"id":2043,"date":"2026-06-23T05:34:37","date_gmt":"2026-06-23T04:34:37","guid":{"rendered":"https:\/\/beekeys.com\/nigeria\/?page_id=2043"},"modified":"2026-07-18T18:40:28","modified_gmt":"2026-07-18T17:40:28","slug":"location-network-demo","status":"publish","type":"page","link":"https:\/\/beekeys.com\/nigeria\/location-network-demo\/","title":{"rendered":"Demo – Enterprise Presence Experience"},"content":{"rendered":"\n
\n\n\n\n\n\nDemo Bank \u2014 Location Network \u00b7 Beekeys<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Raleway:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\"\/>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.js\"><\/script>\n<style>\n:root{\n --ink:#14181F;--ink-2:#3A3F4A;--paper:#F2F4F1;--paper-2:#E6E9E4;\n --surface:#FFFFFF;--surface-2:#F7F8F6;\n --amber:#D98E2B;--amber-bg:#FDF3E0;--amber-dk:#B87320;\n --navy:#1B2A4A;--navy-2:#0F1A30;\n --muted:#6B7280;--green:#1A7A4C;--red:#A23B2E;\n --line:#E0E3DC;--line-2:#CDD0C8;\n --shadow-sm:0 1px 3px rgba(0,0,0,.06);\n --shadow:0 4px 12px rgba(0,0,0,.08);\n --shadow-lg:0 16px 40px rgba(0,0,0,.12);\n --r:10px;--t:180ms ease;\n color-scheme:light;\n}\n[data-theme=\"dark\"]{\n --ink:#E4E8E3;--ink-2:#B0B8AE;--paper:#0E1218;--paper-2:#151C24;\n --surface:#1A2230;--surface-2:#19202C;\n --amber:#E0A030;--amber-bg:#261E0C;--amber-dk:#F0B84A;\n --navy:#08101E;--navy-2:#050C18;\n --muted:#7A8490;--green:#2AAF68;--red:#D96055;\n --line:#202A38;--line-2:#2A3648;\n --shadow-sm:0 1px 3px rgba(0,0,0,.2);\n --shadow:0 4px 12px rgba(0,0,0,.3);\n --shadow-lg:0 16px 40px rgba(0,0,0,.4);\n color-scheme:dark;\n}\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\nhtml{font-size:15px;-webkit-text-size-adjust:100%;}\nbody{font-family:'Raleway',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background var(--t),color var(--t);overscroll-behavior-y:none;}\nh1,h2,h3,h4,.sf{font-family:'Space Grotesk',sans-serif;}\n.mono{font-family:'IBM Plex Mono',monospace;}\na{color:inherit;text-decoration:none;}\nbutton{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}\n:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;}\n\n\/* NAV *\/\n.nav{position:sticky;top:0;z-index:40;background:var(--navy-2);height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;transition:background var(--t);}\n.nav-left{display:flex;align-items:center;gap:10px;}\n.bk-badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:var(--amber);border:1px solid rgba(217,142,43,.35);border-radius:5px;padding:3px 7px;}\n.bank-logo{height:24px;background:rgba(255,255,255,.08);border-radius:5px;padding:3px 8px;display:flex;align-items:center;}\n.bank-logo img{height:16px;}\n.nav-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);display:none;}\n.nav-right{display:flex;align-items:center;gap:3px;}\n.tb{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:15px;transition:background var(--t),color var(--t);}\n.tb:hover{background:rgba(255,255,255,.1);color:#fff;}\n@media(min-width:720px){.nav-label{display:inline;}}\n\n\/* BRAND CONFIG MODAL *\/\n.bc-overlay{position:fixed;inset:0;background:rgba(8,12,20,.65);z-index:50;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);}\n.bc-overlay.open{display:flex;}\n@media(min-width:600px){.bc-overlay{align-items:center;}}\n.bc-modal{\n background:var(--surface);\n border-radius:18px 18px 0 0;\n width:100%;max-width:520px;\n padding:20px 20px calc(24px + env(safe-area-inset-bottom));\n max-height:92vh;overflow-y:auto;\n box-shadow:0 -8px 40px rgba(0,0,0,.25);\n transition:background var(--t);\n animation:bcSlide 220ms cubic-bezier(.25,.46,.45,.94);\n}\n@media(min-width:600px){.bc-modal{border-radius:18px;animation:bcFade 180ms ease;}}\n@keyframes bcSlide{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}\n@keyframes bcFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}\n.bc-handle{width:36px;height:4px;background:var(--line-2);border-radius:4px;margin:0 auto 18px;}\n@media(min-width:600px){.bc-handle{display:none;}}\n.bc-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;}\n.bc-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;}\n.bc-sub{font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.5;}\n.bc-close{width:28px;height:28px;border-radius:50%;background:var(--paper-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;transition:background var(--t);}\n.bc-close:hover{background:var(--line-2);}\n\n\/* PREVIEW STRIP *\/\n.bc-preview{\n background:var(--navy-2);\n border-radius:10px;\n padding:12px 14px;\n display:flex;align-items:center;justify-content:space-between;\n margin-bottom:18px;\n gap:10px;\n transition:background var(--t);\n}\n.bc-preview-left{display:flex;align-items:center;gap:10px;}\n.bc-preview-logo{height:22px;background:rgba(255,255,255,.1);border-radius:5px;padding:3px 8px;display:flex;align-items:center;}\n.bc-preview-logo img{height:14px;}\n.bc-preview-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:2px 6px;color:#fff;transition:color var(--t),border-color var(--t);}\n.bc-preview-swatch{display:flex;gap:5px;}\n.bc-swatch-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);}\n\n\/* PALETTE SECTION *\/\n.bc-section-label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px;}\n.bc-palettes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}\n.bc-palette{\n border:2px solid var(--line);\n border-radius:10px;padding:12px;\n cursor:pointer;\n transition:border-color var(--t),background var(--t),box-shadow var(--t);\n position:relative;\n}\n.bc-palette:hover{border-color:var(--line-2);box-shadow:var(--shadow);}\n.bc-palette.active{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg);}\n.bc-palette-dots{display:flex;gap:5px;margin-bottom:8px;}\n.bc-dot{width:20px;height:20px;border-radius:50%;}\n.bc-palette-name{font-size:12.5px;font-weight:600;margin-bottom:2px;}\n.bc-palette-desc{font-size:11px;color:var(--muted);}\n.bc-check{\n position:absolute;top:9px;right:9px;\n width:18px;height:18px;border-radius:50%;\n background:var(--amber);\n display:none;align-items:center;justify-content:center;\n}\n.bc-palette.active .bc-check{display:flex;}\n.bc-check svg{width:10px;height:10px;color:#fff;}\n\n\/* MODE ROW *\/\n.bc-mode-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);margin-top:4px;font-size:13.5px;}\n\n\/* APPLY BUTTON *\/\n.bc-apply{\n width:100%;margin-top:16px;\n background:var(--amber);color:var(--navy-2);\n border-radius:10px;padding:13px;\n font-size:14px;font-weight:700;\n transition:opacity var(--t);\n}\n.bc-apply:hover{opacity:.88;}\n.bc-note{margin-top:10px;text-align:center;font-size:11px;color:var(--muted);}\n\n\/* NAV config button *\/\n.tb-config{position:relative;}\n.tb-config::after{content:'';position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--amber);display:none;}\n.tb-config.customised::after{display:block;}\n\n\/* SEARCH BAR *\/\n.search-wrap{background:var(--navy);padding:9px 14px 12px;display:none;transition:background var(--t);}\n.search-wrap.open{display:flex;gap:8px;}\n.s-input{flex:1;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:9px 12px;font-size:14px;font-family:'Raleway';background:rgba(255,255,255,.07);color:#fff;}\n.s-input::placeholder{color:rgba(255,255,255,.38);}\n.s-input:focus{outline:2px solid var(--amber);border-color:transparent;}\n.s-go{background:var(--amber);color:var(--navy-2);border-radius:var(--r);padding:9px 15px;font-size:13px;font-weight:700;}\n\n\/* CATEGORY PILLS *\/\n.catbar{background:var(--surface);border-bottom:1px solid var(--line);padding:8px 12px;display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;transition:background var(--t),border-color var(--t);}\n.catbar::-webkit-scrollbar{display:none;}\n.pill{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid var(--line-2);font-size:12.5px;background:var(--surface);color:var(--ink);white-space:nowrap;transition:background var(--t),color var(--t),border-color var(--t);}\n.pill .ct{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;background:var(--paper-2);color:var(--muted);border-radius:10px;padding:1px 5px;transition:background var(--t),color var(--t);}\n.pill.active{background:var(--ink);border-color:var(--ink);color:var(--surface);}\n.pill.active .ct{background:var(--amber);color:var(--navy-2);}\n\n\/* LAYOUT *\/\n.layout{display:flex;flex-direction:column;min-height:calc(100dvh - 52px);}\n@media(min-width:860px){\n .layout{flex-direction:row;height:calc(100dvh - 52px);}\n .map-zone{flex:1.4;height:100%;overflow:hidden;}\n .right-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;}\n .right-scroll{flex:1;overflow-y:auto;}\n}\n\n\/* MAP *\/\n.map-zone{position:relative;height:min(44vmax,400px);overflow:hidden;}\n#map{width:100%;height:100%;position:relative;z-index:1;}\n[data-theme=\"dark\"] #map{filter:invert(.9) hue-rotate(180deg) brightness(.88) contrast(.92);}\n[data-theme=\"dark\"] .leaflet-marker-icon,[data-theme=\"dark\"] .leaflet-popup{filter:invert(1) hue-rotate(180deg);}\n.map-fab{position:absolute;z-index:6;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:22px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow);transition:background var(--t),color var(--t),opacity var(--t);}\n.fab-filter{bottom:14px;left:14px;background:var(--ink);color:var(--surface);}\n.fab-near{bottom:14px;right:14px;background:var(--surface);color:var(--navy);}\n[data-theme=\"dark\"] .fab-near{color:var(--ink);}\n.fab-near.busy{opacity:.6;pointer-events:none;}\n.geo-alert{position:absolute;top:10px;left:10px;right:10px;z-index:6;background:var(--surface);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--muted);box-shadow:var(--shadow);display:none;}\n\n\/* RESULTS HEADER *\/\n.r-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;flex-wrap:wrap;gap:8px;}\n.r-count{font-size:12px;color:var(--muted);}\n.sort-tabs{display:flex;gap:3px;background:var(--paper-2);border-radius:8px;padding:3px;transition:background var(--t);}\n.s-tab{font-size:11.5px;padding:5px 9px;border-radius:6px;color:var(--muted);transition:background var(--t),color var(--t),box-shadow var(--t);}\n.s-tab.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm);}\n.toggle-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 14px 8px;font-size:12px;color:var(--muted);}\n.sw{width:34px;height:19px;border-radius:19px;background:var(--line-2);position:relative;transition:background var(--t);flex:0 0 auto;}\n.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--t);}\n.sw.on{background:var(--green);}\n.sw.on::after{transform:translateX(15px);}\n\n\/* CARDS *\/\n.list-zone{padding:0 12px 16px;}\n.bk-card{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:border-color var(--t),background var(--t),box-shadow var(--t);animation:riseIn 280ms ease backwards;}\n.bk-card:hover{box-shadow:var(--shadow);border-color:var(--line-2);}\n.bk-card.hi{border-color:var(--amber);background:var(--amber-bg);}\n@keyframes riseIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}\n.cb{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:#fff;}\n[data-theme=\"dark\"] .cb{border-color:var(--line-2);}\n.cb.open{background:var(--green);}\n.cb.closed{background:var(--muted);}\n.cb.hq{background:var(--amber);border-color:var(--navy-2);}\n.card-body{flex:1;min-width:0;}\n.card-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}\n.card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--muted);}\n\/* Sort code on card *\/\n.sort-chip{\n display:inline-flex;align-items:center;gap:4px;\n font-family:'IBM Plex Mono',monospace;\n font-size:10px;font-weight:600;\n color:var(--navy);background:var(--paper-2);\n border:1px solid var(--line-2);\n border-radius:4px;padding:1px 6px;\n letter-spacing:.04em;\n transition:background var(--t),color var(--t),border-color var(--t);\n}\n[data-theme=\"dark\"] .sort-chip{color:var(--ink-2);background:var(--paper-2);}\n\/* Sort code in detail sheet *\/\n.sort-block{\n display:flex;align-items:center;justify-content:space-between;\n background:var(--navy);\n border-radius:8px;padding:11px 13px;\n margin:12px 0;\n}\n.sort-block-left{}\n.sort-block-lbl{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:3px;font-weight:600;}\n.sort-block-val{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:700;color:#fff;letter-spacing:.1em;}\n.sort-copy{\n display:flex;align-items:center;gap:5px;\n font-size:11px;font-weight:600;\n background:var(--amber);color:var(--navy-2);\n border-radius:6px;padding:6px 11px;\n transition:opacity var(--t);\n white-space:nowrap;\n}\n.sort-copy:hover{opacity:.88;}\n.sort-copy svg{width:12px;height:12px;}\n.dist{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:var(--amber);}\n.tag-open{color:var(--green);font-weight:600;font-size:11px;}\n.tag-closed{color:var(--red);font-size:11px;}\n.tag-hq{color:var(--amber);font-weight:600;font-size:11px;}\n.vbadge{font-size:9.5px;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--muted);}\n\n\/* SERVICE ICONS on card *\/\n.svc-icons{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;}\n.svc-dot{display:flex;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);background:var(--paper-2);border-radius:5px;padding:2px 6px;transition:background var(--t),color var(--t);}\n.svc-dot svg{width:11px;height:11px;flex:0 0 auto;}\n.svc-dot.amber{color:var(--amber);background:var(--amber-bg);}\n.svc-dot.green{color:var(--green);}\n\n\/* CARD ACTIONS *\/\n.card-actions{display:flex;gap:5px;flex:0 0 auto;padding-top:1px;}\n.ca{width:32px;height:32px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:background var(--t),color var(--t),transform 100ms ease;}\n.ca:hover{background:var(--amber-bg);color:var(--amber);}\n.ca:active{transform:scale(.9);}\n.ca.fav.saved{color:var(--amber);}\n.ca.fav.saved svg{fill:var(--amber);}\n.ca svg{width:15px;height:15px;}\n.empty-msg{text-align:center;padding:40px 16px;color:var(--muted);font-size:13.5px;line-height:1.6;}\n\n\/* FILTER SHEET *\/\n.overlay{position:fixed;inset:0;background:rgba(8,12,20,.55);z-index:30;display:none;backdrop-filter:blur(2px);}\n.overlay.open{display:block;}\n.bsheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;z-index:31;padding:16px 18px calc(24px + env(safe-area-inset-bottom));max-height:84vh;overflow-y:auto;transform:translateY(105%);transition:transform 220ms cubic-bezier(.25,.46,.45,.94),background var(--t);}\n.bsheet.open{transform:translateY(0);}\n.sh-handle{width:36px;height:4px;background:var(--line-2);border-radius:4px;margin:0 auto 18px;}\n.sh-sec{margin-bottom:18px;}\n.sh-lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-weight:600;}\n.sh-pills{display:flex;flex-wrap:wrap;gap:7px;}\n.sh-pill{padding:6px 12px;border-radius:20px;border:1px solid var(--line-2);font-size:12.5px;background:var(--surface);color:var(--ink);transition:background var(--t),color var(--t),border-color var(--t);}\n.sh-pill.active{background:var(--ink);color:var(--surface);border-color:var(--ink);}\n.sh-pill:disabled{opacity:.4;pointer-events:none;}\n.sh-tog{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;}\n.sh-tog:last-child{border-bottom:none;}\n.state-sel{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:8px;font-size:13.5px;font-family:'Raleway';background:var(--surface);color:var(--ink);transition:background var(--t),color var(--t),border-color var(--t);}\n.apply-btn{width:100%;margin-top:20px;background:var(--ink);color:var(--surface);border-radius:10px;padding:13px;font-size:14px;font-weight:700;transition:background var(--t),color var(--t);}\n\n\/* DETAIL SHEET *\/\n.d-overlay{position:fixed;inset:0;z-index:32;display:none;}\n.d-overlay.open{display:block;}\n.dsheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;z-index:33;padding:18px 18px calc(22px + env(safe-area-inset-bottom));max-height:78vh;overflow-y:auto;transform:translateY(105%);transition:transform 220ms cubic-bezier(.25,.46,.45,.94),background var(--t);}\n.dsheet.open{transform:translateY(0);}\n@media(min-width:860px){\n .dsheet{left:auto;right:22px;bottom:22px;width:380px;border-radius:14px;max-height:80vh;box-shadow:var(--shadow-lg);}\n}\n.d-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:var(--paper-2);font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);}\n.d-code{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}\n.d-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin:5px 32px 14px 0;line-height:1.25;}\n.d-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;}\n.d-row:last-of-type{border-bottom:none;}\n.d-ico{flex:0 0 16px;margin-top:2px;color:var(--amber);}\n.d-ico svg{width:16px;height:16px;}\n\n\/* FINANCE FIELDS *\/\n.finance-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;}\n.fin-card{background:var(--paper-2);border-radius:8px;padding:10px 11px;transition:background var(--t);}\n.fin-label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:600;}\n.fin-val{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;}\n.fin-val svg{width:13px;height:13px;}\n.fin-val.yes{color:var(--green);}\n.fin-val.no{color:var(--muted);}\n\n.d-ctas{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}\n.d-cta{flex:1 1 100px;text-align:center;padding:11px;border-radius:9px;font-size:13px;font-weight:700;transition:opacity var(--t);}\n.d-cta:hover{opacity:.85;}\n.d-cta.primary{background:var(--amber);color:var(--navy-2);}\n.d-cta.secondary{background:var(--paper-2);color:var(--ink);}\n\n\/* CTA FOOTER *\/\n.cta-foot{background:var(--navy-2);color:#fff;padding:24px 18px calc(24px + env(safe-area-inset-bottom));transition:background var(--t);}\n.cta-foot h4{font-size:15px;font-weight:600;margin-bottom:5px;}\n.cta-foot p{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:14px;line-height:1.6;}\n.cta-links{display:flex;gap:9px;flex-wrap:wrap;}\n.cta-links a{padding:9px 15px;border-radius:8px;font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.2);transition:border-color var(--t);}\n.cta-links a.amber{background:var(--amber);border-color:var(--amber);color:var(--navy-2);}\n.bk-foot{text-align:center;padding:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}\n\n\/* LOADING *\/\n.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;gap:12px;color:var(--muted);font-size:13px;}\n.spinner{width:28px;height:28px;border:2.5px solid var(--line-2);border-top-color:var(--amber);border-radius:50%;animation:spin 700ms linear infinite;}\n@keyframes spin{to{transform:rotate(360deg);}}\n\n\/* TOAST *\/\n.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--surface);font-size:12.5px;padding:9px 18px;border-radius:22px;white-space:nowrap;opacity:0;pointer-events:none;z-index:60;transition:opacity 160ms ease,transform 160ms ease;box-shadow:var(--shadow-lg);}\n.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}\n\n\/* API STATUS *\/\n.api-bar{background:var(--amber-bg);border-bottom:1px solid rgba(217,142,43,.25);padding:6px 14px;font-size:11.5px;color:var(--amber-dk);display:none;align-items:center;gap:8px;}\n[data-theme=\"dark\"] .api-bar{color:var(--amber);}\n.api-bar.show{display:flex;}\n.api-bar svg{width:13px;height:13px;flex:0 0 auto;}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"nav\">\n <div class=\"nav-left\">\n <span class=\"bk-badge\">@beekeys<\/span>\n <div class=\"bank-logo\">\n <img decoding=\"async\" src=\"https:\/\/beekeys.com\/nigeria\/wp-content\/uploads\/sites\/2\/2026\/06\/demobank-logo5-4.png\" alt=\"Demo Bank\" onerror=\"this.style.display='none'\">\n <\/div>\n <span class=\"nav-label\">Location Network<\/span>\n <\/div>\n <div class=\"nav-right\">\n <button class=\"tb tb-config\" id=\"configBtn\" title=\"Brand configuration\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M16.24 7.76a6 6 0 0 1 0 8.49M4.93 4.93a10 10 0 0 0 0 14.14M7.76 7.76a6 6 0 0 0 0 8.49\"\/><\/svg>\n <\/button>\n <button class=\"tb\" id=\"themeBtn\">\ud83c\udf19<\/button>\n <button class=\"tb\" id=\"searchBtn\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n <\/button>\n <\/div>\n<\/header>\n\n<div class=\"api-bar\" id=\"apiBar\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n <span id=\"apiMsg\">Using local data \u2014 live API not yet connected<\/span>\n<\/div>\n\n<div class=\"search-wrap\" id=\"searchWrap\">\n <input class=\"s-input\" id=\"searchInput\" type=\"text\" placeholder=\"Search branch, city, or state\u2026\" autocomplete=\"off\">\n <button class=\"s-go\" id=\"searchGo\">Go<\/button>\n<\/div>\n\n<nav class=\"catbar\" id=\"catbar\">\n <button class=\"pill active\" data-cat=\"all\">All <span class=\"ct\" id=\"ctAll\">\u2014<\/span><\/button>\n <button class=\"pill\" data-cat=\"Branch\">Branches <span class=\"ct\" id=\"ctBranch\">\u2014<\/span><\/button>\n <button class=\"pill\" data-cat=\"ATM\">ATMs <span class=\"ct\" id=\"ctATM\">\u2014<\/span><\/button>\n <button class=\"pill\" data-cat=\"Service\">Service <span class=\"ct\" id=\"ctService\">\u2014<\/span><\/button>\n <button class=\"pill\" data-cat=\"Partner\">Partners <span class=\"ct\" id=\"ctPartner\">\u2014<\/span><\/button>\n <button class=\"pill\" data-cat=\"__saved\">\u2605 Saved <span class=\"ct\" id=\"ctSaved\">0<\/span><\/button>\n<\/nav>\n\n<div class=\"layout\">\n <div class=\"map-zone\">\n <div id=\"map\"><\/div>\n <div class=\"geo-alert\" id=\"geoAlert\"><\/div>\n <button class=\"map-fab fab-filter\" id=\"filterBtn\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><line x1=\"11\" y1=\"18\" x2=\"13\" y2=\"18\"\/><\/svg>\n Filters\n <\/button>\n <button class=\"map-fab fab-near\" id=\"nearBtn\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg>\n Near me\n <\/button>\n <\/div>\n\n <div class=\"right-panel\">\n <div class=\"right-scroll\">\n <div class=\"r-header\">\n <span class=\"r-count\" id=\"rCount\">Loading\u2026<\/span>\n <div class=\"sort-tabs\">\n <button class=\"s-tab active\" data-sort=\"default\">Default<\/button>\n <button class=\"s-tab\" data-sort=\"nearest\">Nearest<\/button>\n <button class=\"s-tab\" data-sort=\"open\">Open now<\/button>\n <\/div>\n <\/div>\n <div class=\"toggle-row\">\n <span>Open now only<\/span>\n <button class=\"sw\" id=\"openSw\"><\/button>\n <\/div>\n <div class=\"list-zone\" id=\"listZone\">\n <div class=\"loading-state\"><div class=\"spinner\"><\/div><span>Loading branches\u2026<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<section class=\"cta-foot\">\n <h4>This is a live Beekeys Location Network instance.<\/h4>\n <p>Your real branches, verified and discoverable. Usually live within two weeks.<\/p>\n <div class=\"cta-links\">\n <a href=\"https:\/\/wa.me\/2348117746879\" target=\"_blank\" rel=\"noopener\">WhatsApp us<\/a>\n <a class=\"amber\" href=\"https:\/\/calendly.com\/digitalriglimited\/30min\" target=\"_blank\" rel=\"noopener\">Book a call<\/a>\n <\/div>\n<\/section>\n<div class=\"bk-foot\">Powered by Beekeys \u00b7 Location Network<\/div>\n\n<!-- FILTER SHEET -->\n<div class=\"overlay\" id=\"filterOverlay\"><\/div>\n<div class=\"bsheet\" id=\"filterSheet\">\n <div class=\"sh-handle\"><\/div>\n <div class=\"sh-sec\">\n <div class=\"sh-lbl\">Distance from you<\/div>\n <div class=\"sh-pills\" id=\"distPills\">\n <button class=\"sh-pill\" data-dist=\"2\" disabled>2 km<\/button>\n <button class=\"sh-pill\" data-dist=\"5\" disabled>5 km<\/button>\n <button class=\"sh-pill\" data-dist=\"10\" disabled>10 km<\/button>\n <button class=\"sh-pill\" data-dist=\"25\" disabled>25 km<\/button>\n <\/div>\n <p style=\"font-size:11px;color:var(--muted);margin-top:8px\">Tap “Near me” first to unlock distance filters.<\/p>\n <\/div>\n <div class=\"sh-sec\">\n <div class=\"sh-lbl\">Open on day<\/div>\n <div class=\"sh-pills\" id=\"dayPills\">\n <button class=\"sh-pill\" data-day=\"Mon\">Mon<\/button>\n <button class=\"sh-pill\" data-day=\"Tue\">Tue<\/button>\n <button class=\"sh-pill\" data-day=\"Wed\">Wed<\/button>\n <button class=\"sh-pill\" data-day=\"Thu\">Thu<\/button>\n <button class=\"sh-pill\" data-day=\"Fri\">Fri<\/button>\n <button class=\"sh-pill\" data-day=\"Sat\">Sat<\/button>\n <button class=\"sh-pill\" data-day=\"Sun\">Sun<\/button>\n <\/div>\n <\/div>\n <div class=\"sh-sec\">\n <div class=\"sh-lbl\">Services available<\/div>\n <div class=\"sh-pills\" id=\"svcPills\">\n <button class=\"sh-pill\" data-svc=\"card_vending_machine\">Card Vending ATM<\/button>\n <button class=\"sh-pill\" data-svc=\"fx_desk\">FX Desk<\/button>\n <button class=\"sh-pill\" data-svc=\"financial_service_host\">POS \/ Agent<\/button>\n <button class=\"sh-pill\" data-svc=\"disability_friendly\">Disability Access<\/button>\n <\/div>\n <\/div>\n <div class=\"sh-sec\">\n <div class=\"sh-lbl\">State<\/div>\n <select class=\"state-sel\" id=\"stateSel\"><option value=\"all\">All states<\/option><\/select>\n <\/div>\n <div class=\"sh-sec\">\n <div class=\"sh-tog\"><span>Verified listings only<\/span><button class=\"sw\" id=\"verSw\"><\/button><\/div>\n <\/div>\n <button class=\"apply-btn\" id=\"applyBtn\">Apply filters<\/button>\n<\/div>\n\n<!-- DETAIL SHEET -->\n<div class=\"d-overlay\" id=\"dOverlay\"><\/div>\n<div class=\"dsheet\" id=\"dSheet\"><\/div>\n\n<!-- BRAND CONFIGURATION PANEL -->\n<div class=\"bc-overlay\" id=\"bcOverlay\">\n <div class=\"bc-modal\" id=\"bcModal\">\n <div class=\"bc-handle\"><\/div>\n <div class=\"bc-head\">\n <div>\n <div class=\"bc-title\">Brand Configuration<\/div>\n <\/div>\n <button class=\"bc-close\" id=\"bcClose\">\u2715<\/button>\n <\/div>\n <p class=\"bc-sub\">Each Location Network instance is configured to match your brand. This is a live preview of how this page adapts to different colour profiles.<\/p>\n\n <!-- LIVE PREVIEW STRIP -->\n <div class=\"bc-preview\" id=\"bcPreview\">\n <div class=\"bc-preview-left\">\n <div class=\"bc-preview-logo\">\n <img decoding=\"async\" src=\"https:\/\/beekeys.com\/nigeria\/wp-content\/uploads\/sites\/2\/2026\/06\/demobank-logo5-4.png\" alt=\"Demo Bank\" onerror=\"this.style.display='none'\">\n <\/div>\n <span class=\"bc-preview-badge\" id=\"bcPreviewBadge\">@beekeys<\/span>\n <\/div>\n <div class=\"bc-preview-swatch\">\n <div class=\"bc-swatch-dot\" id=\"swPrimary\"><\/div>\n <div class=\"bc-swatch-dot\" id=\"swAccent\"><\/div>\n <div class=\"bc-swatch-dot\" id=\"swSurface\" style=\"border-color:rgba(255,255,255,.35)\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"bc-section-label\">Colour Profile<\/div>\n <div class=\"bc-palettes\" id=\"bcPalettes\"><\/div>\n\n <div class=\"bc-mode-row\">\n <span>Dark mode<\/span>\n <button class=\"sw\" id=\"bcDarkSw\"><\/button>\n <\/div>\n\n <button class=\"bc-apply\" id=\"bcApply\">Apply to this page<\/button>\n <p class=\"bc-note\">On your live Location Network page, this is set once during onboarding.<\/p>\n <\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n\/* \u2500\u2500\u2500 API CONFIG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst API_BASE = 'https:\/\/beekeys.com\/nigeria\/wp-json\/geodir\/v2\/places';\nconst API_FIELDS = 'id,slug,title,street,city,region,latitude,longitude,phone,business_hours,post_category,full_business_name,card_vending_machine,fx_desk,financial_service_host,disability_friendly,cac_registered,indusrty,franchise';\nconst USE_LIVE_API = true; \/\/ flip to false to force mock data\n\n\/* \u2500\u2500\u2500 MOCK DATA (mirrors expected API shape) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst MOCK = [\n {id:1, sort_code:'999001', title:{rendered:'Demo Bank \u2014 Head Office'}, full_business_name:'demobank', street:'Marina Road', city:'Lagos', region:'Lagos', latitude:6.4540, longitude:3.3950, phone:'+23412345001', business_hours:'Mon-Fri 8am-5pm', post_category:'Branch', card_vending_machine:'No', fx_desk:1, financial_service_host:0, disability_friendly:1, cac_registered:'Yes', indusrty:'Finance', franchise:'HQ', _open:true, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:2, sort_code:'999002', title:{rendered:'Demo Bank Calabar'}, full_business_name:'demobank', street:'Marian Road', city:'Calabar', region:'Cross River', latitude:4.9520, longitude:8.3220, phone:'+23412345002', business_hours:'Mon-Fri 8am-4pm', post_category:'Branch', card_vending_machine:'Yes', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:false, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:3, sort_code:'999003', title:{rendered:'Demo Bank Makurdi'}, full_business_name:'demobank', street:'High Level', city:'Makurdi', region:'Benue', latitude:7.7321, longitude:8.5391, phone:'+23412345003', business_hours:'Mon-Fri 8am-4pm', post_category:'Branch', card_vending_machine:'No', fx_desk:0, financial_service_host:1, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:false, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:4, sort_code:'999004', title:{rendered:'Demo Bank Maiduguri'}, full_business_name:'demobank', street:'Kashim Ibrahim Way', city:'Maiduguri', region:'Borno', latitude:11.8311, longitude:13.1510, phone:'+23412345004', business_hours:'Mon-Fri 8am-4pm', post_category:'Branch', card_vending_machine:'No', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:false, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:5, sort_code:'999005', title:{rendered:'Demo Bank Enugu'}, full_business_name:'demobank', street:'Independence Ave', city:'Enugu', region:'Enugu', latitude:6.4483, longitude:7.5139, phone:'+23412345005', business_hours:'Mon-Fri 8am-4pm', post_category:'Branch', card_vending_machine:'Yes', fx_desk:1, financial_service_host:0, disability_friendly:1, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:true, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:6, sort_code:'999006', title:{rendered:'Demo Bank Sokoto'}, full_business_name:'demobank', street:'Sokoto Express Way', city:'Sokoto', region:'Sokoto', latitude:13.0059, longitude:5.2475, phone:'+23412345006', business_hours:'Mon-Fri 8am-4pm', post_category:'Branch', card_vending_machine:'No', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:false, _days:['Mon','Tue','Wed','Thu','Fri']},\n {id:7, title:{rendered:'Demo Bank ATM \u2014 Kano'}, full_business_name:'demobank', street:'Ahmadu Bello Way', city:'Kano', region:'Kano', latitude:12.0022, longitude:8.5919, phone:'+23412345007', business_hours:'24 hours', post_category:'ATM', card_vending_machine:'Yes', fx_desk:0, financial_service_host:0, disability_friendly:1, cac_registered:'Yes', indusrty:'Finance', franchise:'ATM', _open:true, _days:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},\n {id:8, title:{rendered:'Demo Bank ATM \u2014 Enugu'}, full_business_name:'demobank', street:'Ogui Road', city:'Enugu', region:'Enugu', latitude:6.4413, longitude:7.4988, phone:'+23412345008', business_hours:'24 hours', post_category:'ATM', card_vending_machine:'Yes', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'ATM', _open:true, _days:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},\n {id:9, title:{rendered:'Demo Bank Service Centre \u2014 PHC'},full_business_name:'demobank', street:'Aba Road', city:'Port Harcourt', region:'Rivers', latitude:4.8242, longitude:7.0336, phone:'+23412345009', business_hours:'Mon-Fri 9am-5pm', post_category:'Service', card_vending_machine:'No', fx_desk:0, financial_service_host:1, disability_friendly:1, cac_registered:'Yes', indusrty:'Finance', franchise:'Service',_open:true,_days:['Mon','Tue','Wed','Thu','Fri']},\n {id:10, title:{rendered:'Demo Bank Service Centre \u2014 SKT'},full_business_name:'demobank', street:'Kano Road', city:'Sokoto', region:'Sokoto', latitude:13.0610, longitude:5.2470, phone:'+23412345010', business_hours:'Mon-Fri 9am-5pm', post_category:'Service', card_vending_machine:'No', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'No', indusrty:'Finance', franchise:'Service',_open:false,_days:['Mon','Tue','Wed','Thu','Fri']},\n {id:11, title:{rendered:'Demo Bank Agent \u2014 Ibadan'}, full_business_name:'demobank', street:'Ring Road', city:'Ibadan', region:'Oyo', latitude:7.3964, longitude:3.9167, phone:'+23412345011', business_hours:'Mon-Sat 9am-6pm', post_category:'Partner', card_vending_machine:'No', fx_desk:0, financial_service_host:1, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Partner',_open:true,_days:['Mon','Tue','Wed','Thu','Fri','Sat']},\n {id:12, sort_code:'999012', title:{rendered:'Demo Bank Dutse'}, full_business_name:'demobank', street:'Independence Way', city:'Dutse', region:'Jigawa', latitude:11.7160, longitude:9.3557, phone:'+23412345012', business_hours:'Sat 11am-2pm', post_category:'Branch', card_vending_machine:'No', fx_desk:0, financial_service_host:0, disability_friendly:0, cac_registered:'Yes', indusrty:'Finance', franchise:'Branch',_open:false, _days:['Sat']},\n];\n\n\/* \u2500\u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet branches = [];\nlet filters = {cat:'all',openOnly:false,day:null,dist:null,state:'all',verified:false,svc:new Set(),sort:'default',q:''};\nlet userPos = null;\nlet saved = new Set();\nlet markers = {};\nlet usingLive = false;\n\n\/* \u2500\u2500\u2500 THEME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n(function(){\n const d = window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';\n document.documentElement.setAttribute('data-theme', d);\n document.getElementById('themeBtn').textContent = d==='dark'?'\u2600\ufe0f':'\ud83c\udf19';\n})();\ndocument.getElementById('themeBtn').addEventListener('click',()=>{\n const n = document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';\n document.documentElement.setAttribute('data-theme',n);\n document.getElementById('themeBtn').textContent = n==='dark'?'\u2600\ufe0f':'\ud83c\udf19';\n map.invalidateSize();\n});\n\n\/* \u2500\u2500\u2500 TOAST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet _tt;\nfunction toast(m){\n const el=document.getElementById('toast');\n el.textContent=m; el.classList.add('show');\n clearTimeout(_tt); _tt=setTimeout(()=>el.classList.remove('show'),2000);\n}\n\n\/* \u2500\u2500\u2500 DISTANCE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction haversine(la1,lo1,la2,lo2){\n const R=6371,dL=(la2-la1)*Math.PI\/180,dl=(lo2-lo1)*Math.PI\/180;\n const a=Math.sin(dL\/2)**2+Math.cos(la1*Math.PI\/180)*Math.cos(la2*Math.PI\/180)*Math.sin(dl\/2)**2;\n return R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));\n}\n\n\/* \u2500\u2500\u2500 MAP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst map=L.map('map',{zoomControl:false}).setView([9.082,8.675],6);\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{attribution:'\u00a9 OpenStreetMap',maxZoom:19}).addTo(map);\nL.control.zoom({position:'topleft'}).addTo(map);\n\nfunction mkPin(b){\n const isHQ = b.franchise==='HQ'||b._hq;\n const open = b._open!==undefined ? b._open : (b.business_hours&&b.business_hours.toLowerCase().includes('24'));\n const bg = isHQ?'#D98E2B':(open?'#1A7A4C':'#6B7280');\n const bdr = isHQ?'#0F1A30':'#1B2A4A';\n const sz = isHQ?32:28;\n const lbl = isHQ?'HQ':(b.post_category||'B')[0];\n const s=[\n `width:${sz}px`,`height:${sz}px`,`border-radius:50%`,\n `background:${bg}`,`border:2.5px solid ${bdr}`,\n `display:flex`,`align-items:center`,`justify-content:center`,\n `font-family:'IBM Plex Mono',monospace`,\n `font-size:${isHQ?'9px':'10px'}`,`font-weight:700`,`color:#fff`,\n `box-shadow:0 2px 6px rgba(0,0,0,.28)`,\n `position:relative`,`top:${-sz\/2}px`,`left:${-sz\/2}px`,\n ].join(';');\n return L.divIcon({html:`<div style=\"${s}\">${lbl}<\/div>`,className:'',iconSize:[0,0]});\n}\n\nfunction addMarker(b){\n const m=L.marker([parseFloat(b.latitude),parseFloat(b.longitude)],{icon:mkPin(b)}).addTo(map);\n const name=b.title?.rendered||b.title||b.name||'Branch';\n m.bindPopup(`<b style=\"font-family:'Space Grotesk'\">${name}<\/b><br>${b.street||''}, ${b.city||''}<br><span style=\"font-size:12px;color:${b._open?'#1A7A4C':'#6B7280'}\">${b.business_hours||''}<\/span>`);\n m.on('click',()=>{ hiCard(b.id); showDetail(b); });\n markers[b.id]=m;\n}\n\n\/* \u2500\u2500\u2500 DATA LOAD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nasync function loadData(){\n if(USE_LIVE_API){\n try{\n const url=`${API_BASE}?per_page=100&_fields=${API_FIELDS}`;\n const r=await fetch(url,{headers:{'Accept':'application\/json'}});\n if(!r.ok) throw new Error('API '+r.status);\n const data=await r.json();\n if(data&&data.length>0){\n branches=data;\n usingLive=true;\n document.getElementById('apiBar').classList.remove('show');\n initAfterLoad();\n return;\n }\n } catch(e){\n console.warn('GD API unavailable, using mock data:',e.message);\n }\n }\n \/\/ Fallback\n branches=MOCK;\n usingLive=false;\n const bar=document.getElementById('apiBar');\n bar.classList.add('show');\n document.getElementById('apiMsg').textContent='Preview mode \u2014 connect live API for real branch data';\n initAfterLoad();\n}\n\nfunction normaliseBranch(b){\n \/\/ Normalise API response to consistent internal shape\n b._name = b.title?.rendered || b.title || b.name || 'Branch';\n b._cat = normCat(b.post_category);\n b._open = b._open !== undefined ? b._open : isOpenNow(b.business_hours);\n b._days = b._days || daysFromHours(b.business_hours);\n b._lat = parseFloat(b.latitude) || 0;\n b._lng = parseFloat(b.longitude) || 0;\n b._hq = b.franchise==='HQ';\n b._atm = b.card_vending_machine==='Yes'||b.card_vending_machine===1;\n b._fx = b.fx_desk===1||b.fx_desk==='1'||b.fx_desk===true;\n b._pos = b.financial_service_host===1||b.financial_service_host==='1'||b.financial_service_host===true;\n b._acc = b.disability_friendly===1||b.disability_friendly==='Yes'||b.disability_friendly===true;\n b._cac = b.cac_registered==='Yes'||b.cac_registered===1;\n b._state = b.region||'';\n b._city = b.city||'';\n return b;\n}\n\nfunction normCat(raw){\n if(!raw) return 'Branch';\n const r=raw.toLowerCase();\n if(r.includes('atm')) return 'ATM';\n if(r.includes('service')) return 'Service';\n if(r.includes('partner')||r.includes('agent')) return 'Partner';\n return 'Branch';\n}\nfunction isOpenNow(hours){\n if(!hours) return false;\n if(hours.toLowerCase().includes('24')) return true;\n return false; \/\/ would need real-time logic for actual hours\n}\nfunction daysFromHours(hours){\n if(!hours) return [];\n const days=['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];\n return days.filter(d=>hours.includes(d));\n}\n\nfunction initAfterLoad(){\n branches=branches.map(normaliseBranch);\n populateStates();\n branches.forEach(addMarker);\n updateCounts();\n render();\n}\n\n\/* \u2500\u2500\u2500 COUNTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction updateCounts(){\n const counts={Branch:0,ATM:0,Service:0,Partner:0};\n branches.forEach(b=>{ if(counts[b._cat]!==undefined) counts[b._cat]++; });\n document.getElementById('ctAll').textContent = branches.length;\n document.getElementById('ctBranch').textContent = counts.Branch;\n document.getElementById('ctATM').textContent = counts.ATM;\n document.getElementById('ctService').textContent= counts.Service;\n document.getElementById('ctPartner').textContent= counts.Partner;\n document.getElementById('ctSaved').textContent = saved.size;\n}\n\n\/* \u2500\u2500\u2500 FILTER + RENDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction getFiltered(){\n return branches.filter(b=>{\n if(filters.cat==='__saved' && !saved.has(b.id)) return false;\n if(filters.cat!=='all'&&filters.cat!=='__saved'&&b._cat!==filters.cat) return false;\n if(filters.openOnly&&!b._open) return false;\n if(filters.day&&!b._days.includes(filters.day)) return false;\n if(filters.verified&&!b._cac) return false;\n if(filters.state!=='all'&&b._state!==filters.state) return false;\n if(filters.svc.size>0){\n if(filters.svc.has('card_vending_machine')&&!b._atm) return false;\n if(filters.svc.has('fx_desk')&&!b._fx) return false;\n if(filters.svc.has('financial_service_host')&&!b._pos) return false;\n if(filters.svc.has('disability_friendly')&&!b._acc) return false;\n }\n if(userPos){ b._dist=haversine(userPos.lat,userPos.lng,b._lat,b._lng); }\n else { delete b._dist; }\n if(filters.dist&&userPos&&b._dist>filters.dist) return false;\n if(filters.q){\n const q=filters.q.toLowerCase();\n if(![b._name,b.street,b._city,b._state,b.full_business_name].some(v=>v&&v.toLowerCase().includes(q))) return false;\n }\n return true;\n });\n}\n\nconst IC={\n phone:'<path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.11 12 19.79 19.79 0 0 1 1.04 3.41 2 2 0 0 1 3 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.9.7 2.81a2 2 0 0 1-.45 2.11L7 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.34 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/>',\n pin:'<path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/>',\n star:'<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>',\n share:'<circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"\/>',\n clock:'<circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>',\n check:'<polyline points=\"20 6 9 17 4 12\"\/>',\n x:'<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>',\n atm:'<rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/>',\n fx:'<line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>',\n pos:'<rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/>',\n acc:'<circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/>',\n};\nfunction svg(path,size=15){return `<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">${path}<\/svg>`;}\n\nfunction render(){\n let list=getFiltered();\n if(filters.sort==='nearest'&&userPos) list.sort((a,b)=>a._dist-b._dist);\n else if(filters.sort==='open') list.sort((a,b)=>(b._open===a._open)?0:(b._open?1:-1));\n else if(userPos) list.sort((a,b)=>(a._dist||999)-(b._dist||999));\n\n document.getElementById('rCount').textContent=\n list.length===branches.length?`Showing all ${list.length} locations`:`${list.length} of ${branches.length} locations`;\n\n Object.entries(markers).forEach(([id,m])=>m.setOpacity(list.some(b=>b.id==id)?1:.15));\n\n const zone=document.getElementById('listZone');\n zone.innerHTML='';\n if(!list.length){\n zone.innerHTML=`<div class=\"empty-msg\">No locations match those filters.<br>Try clearing one or two.<\/div>`;\n return;\n }\n list.forEach((b,i)=>{\n const div=document.createElement('div');\n div.className='bk-card';\n div.dataset.id=b.id;\n div.style.animationDelay=(i*20)+'ms';\n const cls=b._hq?'hq':(b._open?'open':'closed');\n const lbl=b._hq?'HQ':b._cat[0];\n const stat=b._hq?`<span class=\"tag-hq\">Head Office<\/span>`:(b._open?`<span class=\"tag-open\">Open<\/span>`:`<span class=\"tag-closed\">Closed<\/span>`);\n const distHtml=b._dist!==undefined?`<span class=\"dist\">${b._dist.toFixed(1)} km<\/span>`:'';\n const bsb=b.full_business_name?`<span class=\"mono\" style=\"font-size:10px;color:var(--amber)\">${b.full_business_name}<\/span>`:'';\n const isSaved=saved.has(b.id);\n\n \/\/ Service icons on card \u2014 only show active ones\n let svcHtml='';\n const svcs=[];\n if(b._atm) svcs.push(`<span class=\"svc-dot amber\">${svg(IC.atm,11)} ATM<\/span>`);\n if(b._fx) svcs.push(`<span class=\"svc-dot\">${svg(IC.fx,11)} FX<\/span>`);\n if(b._pos) svcs.push(`<span class=\"svc-dot\">${svg(IC.pos,11)} POS<\/span>`);\n if(b._acc) svcs.push(`<span class=\"svc-dot green\">${svg(IC.acc,11)} Access<\/span>`);\n if(svcs.length) svcHtml=`<div class=\"svc-icons\">${svcs.join('')}<\/div>`;\n\n div.innerHTML=`\n <div class=\"cb ${cls}\">${lbl}<\/div>\n <div class=\"card-body\">\n <div class=\"card-name\">${b._name}<\/div>\n <div class=\"card-meta\">${distHtml}${stat}${bsb}${b.sort_code?`<span class=\"sort-chip\">${b.sort_code}<\/span>`:''}<span>${b._city||''}, ${b._state||''}<\/span><\/div>\n ${svcHtml}\n <\/div>\n <div class=\"card-actions\">\n <button class=\"ca fav ${isSaved?'saved':''}\" data-action=\"fav\" aria-label=\"Save\">${svg(IC.star)}<\/button>\n <a class=\"ca\" href=\"tel:${b.phone||''}\" aria-label=\"Call\">${svg(IC.phone)}<\/a>\n <a class=\"ca\" href=\"https:\/\/maps.google.com\/?daddr=${b._lat},${b._lng}\" target=\"_blank\" rel=\"noopener\" aria-label=\"Directions\">${svg(IC.pin)}<\/a>\n <\/div>`;\n\n div.addEventListener('click',e=>{\n if(e.target.closest('[data-action=\"fav\"]')){ toggleSave(b.id); return; }\n if(e.target.closest('.ca')) return;\n map.flyTo([b._lat,b._lng],14,{duration:.6});\n markers[b.id]?.openPopup();\n hiCard(b.id); showDetail(b);\n });\n zone.appendChild(div);\n });\n updateCounts();\n}\n\nfunction hiCard(id){\n document.querySelectorAll('.bk-card').forEach(c=>c.classList.remove('hi'));\n const el=document.querySelector(`.bk-card[data-id=\"${id}\"]`);\n if(el){el.classList.add('hi');el.scrollIntoView({behavior:'smooth',block:'nearest'});}\n}\n\n\/* \u2500\u2500\u2500 DETAIL SHEET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction showDetail(b){\n const s=document.getElementById('dSheet');\n const isSaved=saved.has(b.id);\n\n \/\/ Finance field rows\n function finCard(label,val,isYes){\n const cls=isYes?'yes':'no';\n const ico=isYes?svg(IC.check,13):svg(IC.x,13);\n return `<div class=\"fin-card\"><div class=\"fin-label\">${label}<\/div><div class=\"fin-val ${cls}\">${ico} ${isYes?'Available':'Not available'}<\/div><\/div>`;\n }\n\n s.innerHTML=`\n <button class=\"d-close\" id=\"dClose\">\u2715<\/button>\n <div class=\"d-code mono\">${b.full_business_name||''}<\/div>\n <div class=\"d-name\">${b._name}<\/div>\n ${b.sort_code?`<div class=\"sort-block\">\n <div class=\"sort-block-left\">\n <div class=\"sort-block-lbl\">Branch Sort Code<\/div>\n <div class=\"sort-block-val\">${b.sort_code}<\/div>\n <\/div>\n <button class=\"sort-copy\" onclick=\"navigator.clipboard&&navigator.clipboard.writeText('${b.sort_code}').then(()=>{const t=document.getElementById('toast');t.textContent='Sort code copied';t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1800)})\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\n Copy\n <\/button>\n <\/div>`:''}\n\n <div class=\"d-row\"><span class=\"d-ico\">${svg(IC.pin)}<\/span><span>${b.street||''}, ${b._city||''}, ${b._state||''} State<\/span><\/div>\n <div class=\"d-row\"><span class=\"d-ico\">${svg(IC.clock)}<\/span><span>${b.business_hours||'Hours not listed'}<\/span><\/div>\n <div class=\"d-row\"><span class=\"d-ico\">${svg(IC.phone)}<\/span><a href=\"tel:${b.phone||''}\">${b.phone||'Not listed'}<\/a><\/div>\n <div class=\"finance-grid\">\n ${finCard('Card Vending ATM', b._atm, b._atm)}\n ${finCard('FX Desk', b._fx, b._fx)}\n ${finCard('POS \/ Agent Services', b._pos, b._pos)}\n ${finCard('Disability Access', b._acc, b._acc)}\n <\/div>\n <div class=\"d-ctas\">\n <a class=\"d-cta primary\" href=\"https:\/\/maps.google.com\/?daddr=${b._lat},${b._lng}\" target=\"_blank\" rel=\"noopener\">Take me there<\/a>\n <button class=\"d-cta secondary\" id=\"dSave\">${isSaved?'\u2605 Saved':'\u2606 Save'}<\/button>\n <button class=\"d-cta secondary\" id=\"dShare\">Share<\/button>\n <\/div>`;\n\n s.classList.add('open');\n document.getElementById('dOverlay').classList.add('open');\n document.getElementById('dClose').addEventListener('click',closeDetail);\n document.getElementById('dSave').addEventListener('click',()=>{toggleSave(b.id);showDetail(b);});\n document.getElementById('dShare').addEventListener('click',()=>shareBranch(b));\n}\nfunction closeDetail(){\n document.getElementById('dSheet').classList.remove('open');\n document.getElementById('dOverlay').classList.remove('open');\n}\ndocument.getElementById('dOverlay').addEventListener('click',closeDetail);\n\n\/* \u2500\u2500\u2500 SAVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction toggleSave(id){\n if(saved.has(id)) saved.delete(id); else saved.add(id);\n toast(saved.has(id)?'Branch saved':'Removed from saved');\n render();\n}\n\n\/* \u2500\u2500\u2500 SHARE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction shareBranch(b){\n const text=`${b._name}\\n${b.street||''}, ${b._city||''}, ${b._state||''}\\nhttps:\/\/maps.google.com\/?daddr=${b._lat},${b._lng}\\n\\nVia Beekeys Location Network`;\n if(navigator.share) navigator.share({title:b._name,text}).catch(()=>{});\n else if(navigator.clipboard) navigator.clipboard.writeText(text).then(()=>toast('Copied to clipboard'));\n else toast('Share not available here');\n}\n\n\/* \u2500\u2500\u2500 FILTER SHEET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst fOverlay=document.getElementById('filterOverlay');\nconst fSheet=document.getElementById('filterSheet');\ndocument.getElementById('filterBtn').addEventListener('click',()=>{fSheet.classList.add('open');fOverlay.classList.add('open');});\nfOverlay.addEventListener('click',()=>{fSheet.classList.remove('open');fOverlay.classList.remove('open');});\ndocument.getElementById('applyBtn').addEventListener('click',()=>{fSheet.classList.remove('open');fOverlay.classList.remove('open');render();});\n\ndocument.getElementById('dayPills').addEventListener('click',e=>{\n const p=e.target.closest('.sh-pill');if(!p)return;\n const active=p.classList.contains('active');\n document.querySelectorAll('#dayPills .sh-pill').forEach(x=>x.classList.remove('active'));\n if(!active){p.classList.add('active');filters.day=p.dataset.day;}else{filters.day=null;}\n});\ndocument.getElementById('distPills').addEventListener('click',e=>{\n const p=e.target.closest('.sh-pill');if(!p||p.disabled)return;\n const active=p.classList.contains('active');\n document.querySelectorAll('#distPills .sh-pill').forEach(x=>x.classList.remove('active'));\n if(!active){p.classList.add('active');filters.dist=Number(p.dataset.dist);}else{filters.dist=null;}\n});\ndocument.getElementById('svcPills').addEventListener('click',e=>{\n const p=e.target.closest('.sh-pill');if(!p)return;\n p.classList.toggle('active');\n const s=p.dataset.svc;\n if(filters.svc.has(s)) filters.svc.delete(s); else filters.svc.add(s);\n});\nfunction bindSw(id,key){\n const el=document.getElementById(id);\n el.addEventListener('click',()=>{filters[key]=!filters[key];el.classList.toggle('on',filters[key]);});\n}\nbindSw('verSw','verified');\nbindSw('openSw','openOnly');\n\nfunction populateStates(){\n const sel=document.getElementById('stateSel');\n [...new Set(branches.map(b=>b._state).filter(Boolean))].sort().forEach(s=>{\n const o=document.createElement('option');o.value=s;o.textContent=s;sel.appendChild(o);\n });\n sel.addEventListener('change',e=>{filters.state=e.target.value;});\n}\n\n\/* \u2500\u2500\u2500 SORT \/ CATEGORY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\ndocument.querySelectorAll('.s-tab').forEach(t=>{\n t.addEventListener('click',()=>{\n document.querySelectorAll('.s-tab').forEach(x=>x.classList.remove('active'));\n t.classList.add('active'); filters.sort=t.dataset.sort;\n if(filters.sort==='nearest'&&!userPos) toast('Tap \"Near me\" to sort by distance');\n render();\n });\n});\ndocument.getElementById('catbar').addEventListener('click',e=>{\n const p=e.target.closest('.pill');if(!p)return;\n document.querySelectorAll('#catbar .pill').forEach(x=>x.classList.remove('active'));\n p.classList.add('active'); filters.cat=p.dataset.cat; render();\n});\n\n\/* \u2500\u2500\u2500 SEARCH \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\ndocument.getElementById('searchBtn').addEventListener('click',()=>{\n const w=document.getElementById('searchWrap');\n w.classList.toggle('open');\n if(w.classList.contains('open')) document.getElementById('searchInput').focus();\n});\nfunction runSearch(){filters.q=document.getElementById('searchInput').value.trim();render();}\ndocument.getElementById('searchGo').addEventListener('click',runSearch);\ndocument.getElementById('searchInput').addEventListener('keydown',e=>{if(e.key==='Enter')runSearch();});\n\n\/* \u2500\u2500\u2500 GEOLOCATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\ndocument.getElementById('nearBtn').addEventListener('click',()=>{\n const btn=document.getElementById('nearBtn');\n if(!navigator.geolocation){\n const a=document.getElementById('geoAlert');a.style.display='block';\n a.textContent='Location not supported \u2014 pick a state in Filters instead.';return;\n }\n btn.classList.add('busy');\n btn.innerHTML=`<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg> Locating\u2026`;\n navigator.geolocation.getCurrentPosition(pos=>{\n userPos={lat:pos.coords.latitude,lng:pos.coords.longitude};\n btn.classList.remove('busy');\n btn.innerHTML=`<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg> Near me \u2713`;\n document.getElementById('geoAlert').style.display='none';\n document.querySelectorAll('#distPills .sh-pill').forEach(p=>p.disabled=false);\n map.setView([userPos.lat,userPos.lng],11);render();\n },()=>{\n btn.classList.remove('busy');\n btn.innerHTML=`<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg> Near me`;\n const a=document.getElementById('geoAlert');a.style.display='block';\n a.textContent='Location blocked \u2014 open in a browser tab or pick a state in Filters.';\n setTimeout(()=>a.style.display='none',4000);\n });\n});\n\n\/* \u2500\u2500\u2500 BRAND CONFIGURATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Named palettes \u2014 not a raw colour picker.\n Each palette is a complete token set. Applying one rewrites\n CSS custom properties on :root in real time.\n The \"customised\" dot on the nav button signals divergence\n from the default, giving a clear visual cue that this is\n a configurable system, not a fixed template.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst PALETTES = [\n {\n id:'default',\n name:'Navy & Amber',\n desc:'Default \u00b7 Finance',\n primary:'#1B2A4A', accent:'#D98E2B', accentBg:'#FDF3E0',\n navy:'#1B2A4A', navy2:'#0F1A30',\n tokens:{\n '--amber':'#D98E2B','--amber-bg':'#FDF3E0','--amber-dk':'#B87320',\n '--navy':'#1B2A4A','--navy-2':'#0F1A30',\n }\n },\n {\n id:'forest',\n name:'Forest & Gold',\n desc:'Retail \u00b7 Agriculture',\n primary:'#1A4A2E', accent:'#C8A227', accentBg:'#FBF5E0',\n navy:'#1A4A2E', navy2:'#0F2D1A',\n tokens:{\n '--amber':'#C8A227','--amber-bg':'#FBF5E0','--amber-dk':'#A07A10',\n '--navy':'#1A4A2E','--navy-2':'#0F2D1A',\n }\n },\n {\n id:'slate',\n name:'Slate & Coral',\n desc:'Tech \u00b7 Services',\n primary:'#2D3A4A', accent:'#E05A3A', accentBg:'#FDEEE9',\n navy:'#2D3A4A', navy2:'#1A2530',\n tokens:{\n '--amber':'#E05A3A','--amber-bg':'#FDEEE9','--amber-dk':'#B83C20',\n '--navy':'#2D3A4A','--navy-2':'#1A2530',\n }\n },\n {\n id:'purple',\n name:'Deep Violet',\n desc:'Healthcare \u00b7 NGOs',\n primary:'#2D1B4A', accent:'#7C4DCC', accentBg:'#F0EAFB',\n navy:'#2D1B4A', navy2:'#1A0E30',\n tokens:{\n '--amber':'#7C4DCC','--amber-bg':'#F0EAFB','--amber-dk':'#5A30AA',\n '--navy':'#2D1B4A','--navy-2':'#1A0E30',\n }\n },\n {\n id:'teal',\n name:'Teal & Sand',\n desc:'Hospitality \u00b7 Tourism',\n primary:'#1A3D4A', accent:'#CC8C3A', accentBg:'#FDF4E7',\n navy:'#1A3D4A', navy2:'#0E2530',\n tokens:{\n '--amber':'#CC8C3A','--amber-bg':'#FDF4E7','--amber-dk':'#A86C1A',\n '--navy':'#1A3D4A','--navy-2':'#0E2530',\n }\n },\n {\n id:'crimson',\n name:'Crimson & Ink',\n desc:'Insurance \u00b7 Legal',\n primary:'#4A1B1B', accent:'#C43030', accentBg:'#FDEAEA',\n navy:'#4A1B1B', navy2:'#2E0E0E',\n tokens:{\n '--amber':'#C43030','--amber-bg':'#FDEAEA','--amber-dk':'#9A1E1E',\n '--navy':'#4A1B1B','--navy-2':'#2E0E0E',\n }\n },\n];\n\nlet activePaletteId = 'default';\nlet pendingPaletteId = 'default';\n\nfunction renderPalettes(){\n const grid = document.getElementById('bcPalettes');\n grid.innerHTML = '';\n PALETTES.forEach(p => {\n const btn = document.createElement('button');\n btn.className = 'bc-palette' + (p.id === activePaletteId ? ' active' : '');\n btn.dataset.id = p.id;\n btn.innerHTML = `\n <div class=\"bc-palette-dots\">\n <div class=\"bc-dot\" style=\"background:${p.navy}\"><\/div>\n <div class=\"bc-dot\" style=\"background:${p.accent}\"><\/div>\n <div class=\"bc-dot\" style=\"background:${p.accentBg};border:1.5px solid #ddd\"><\/div>\n <\/div>\n <div class=\"bc-palette-name\">${p.name}<\/div>\n <div class=\"bc-palette-desc\">${p.desc}<\/div>\n <div class=\"bc-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>`;\n btn.addEventListener('click', () => selectPalette(p.id));\n grid.appendChild(btn);\n });\n}\n\nfunction selectPalette(id){\n pendingPaletteId = id;\n const p = PALETTES.find(x => x.id === id);\n \/\/ Update palette grid active state\n document.querySelectorAll('.bc-palette').forEach(el => {\n el.classList.toggle('active', el.dataset.id === id);\n });\n \/\/ Update preview strip in real time\n document.getElementById('swPrimary').style.background = p.navy;\n document.getElementById('swAccent').style.background = p.accent;\n document.getElementById('swSurface').style.background = p.accentBg;\n document.getElementById('bcPreview').style.background = p.navy2;\n document.getElementById('bcPreviewBadge').style.color = p.accent;\n document.getElementById('bcPreviewBadge').style.borderColor = p.accent + '66';\n}\n\nfunction applyPalette(id){\n const p = PALETTES.find(x => x.id === id);\n if(!p) return;\n const root = document.documentElement;\n Object.entries(p.tokens).forEach(([k,v]) => root.style.setProperty(k, v));\n activePaletteId = id;\n \/\/ Mark nav button as customised if not default\n document.getElementById('configBtn').classList.toggle('customised', id !== 'default');\n toast('Brand profile applied \u2014 ' + p.name);\n}\n\n\/\/ Open\/close\nconst bcOverlay = document.getElementById('bcOverlay');\ndocument.getElementById('configBtn').addEventListener('click', () => {\n pendingPaletteId = activePaletteId;\n renderPalettes();\n \/\/ Sync dark mode switch\n const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n document.getElementById('bcDarkSw').classList.toggle('on', isDark);\n \/\/ Set preview strip to current palette\n selectPalette(activePaletteId);\n bcOverlay.classList.add('open');\n});\ndocument.getElementById('bcClose').addEventListener('click', () => bcOverlay.classList.remove('open'));\nbcOverlay.addEventListener('click', e => { if(e.target === bcOverlay) bcOverlay.classList.remove('open'); });\ndocument.addEventListener('keydown', e => { if(e.key === 'Escape') bcOverlay.classList.remove('open'); });\n\n\/\/ Dark mode toggle inside config panel\ndocument.getElementById('bcDarkSw').addEventListener('click', e => {\n const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';\n document.documentElement.setAttribute('data-theme', next);\n document.getElementById('themeBtn').textContent = next === 'dark' ? '\u2600\ufe0f' : '\ud83c\udf19';\n e.target.classList.toggle('on', next === 'dark');\n map.invalidateSize();\n});\n\n\/\/ Apply button\ndocument.getElementById('bcApply').addEventListener('click', () => {\n applyPalette(pendingPaletteId);\n bcOverlay.classList.remove('open');\n});\n\n\/* \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nloadData();\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"standard-page","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-2043","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/pages\/2043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/comments?post=2043"}],"version-history":[{"count":0,"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/pages\/2043\/revisions"}],"wp:attachment":[{"href":"https:\/\/beekeys.com\/nigeria\/wp-json\/wp\/v2\/media?parent=2043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}