{"id":1832,"date":"2026-03-02T05:26:32","date_gmt":"2026-03-02T05:26:32","guid":{"rendered":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/?page_id=1832"},"modified":"2026-03-14T05:09:18","modified_gmt":"2026-03-14T05:09:18","slug":"loyalty","status":"publish","type":"page","link":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/loyalty\/","title":{"rendered":"Loyalty"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1832\" class=\"elementor elementor-1832\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7823c2 e-con-full e-flex e-con e-parent\" data-id=\"c7823c2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-322a0a9 elementor-widget elementor-widget-hapi_biz_loyalty_hero\" data-id=\"322a0a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"hapi_biz_loyalty_hero.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"hapi-biz hapi-loyalty-hero-widget\">\r\n            <div class=\"biz-lhero-sec\" >\r\n                <div class=\"biz-lhero-overlay\"><\/div>\r\n                <div class=\"biz-lhero-inner\">\r\n                    <h1 class=\"biz-lhero-heading\">Loyalty<\/h1>\r\n                                            <p class=\"biz-lhero-subtitle\">Earn points and turn them into rewards<\/p>\r\n                                                                <a href=\"#\" id=\"trigger-login-btn\" class=\"biz-lhero-btn\">Become a Member<\/a>\r\n                                    <\/div>\r\n            <\/div>\r\n                            <div class=\"biz-lhero-email\">\r\n                    To request Point Balance, email us at                    <a href=\"mailto:info@hapiphotography.com\">info@hapiphotography.com<\/a>\r\n                <\/div>\r\n                    <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ab8552 elementor-widget elementor-widget-hapi_biz_loyalty\" data-id=\"6ab8552\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"hapi_biz_loyalty.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"hapi-biz hapi-loyalty-system-wrap\" id=\"hapi-loyalty-6ab8552\">\n\n    <!-- PUBLIC VIEW (cards 01 + 02, specials) -->\n    <div class=\"hapi-loyalty-public\" data-hapi-loyalty-public>\n        <div class=\"hapi-loyalty-grid\">\n            <div class=\"hapi-loyalty-card\">\n                <div class=\"hapi-step-number\">01<\/div>\n                <h2>Sign Up<\/h2>\n                <p>Sign up as a member to start enjoying the loyalty program.<\/p>\n            <\/div>\n            <div class=\"hapi-loyalty-card\">\n                <div class=\"hapi-step-number\">02<\/div>\n                <h2>Loyalty Discounts<\/h2>\n                <ul class=\"hapi-rewards-list\">\n                                            <li>\n                            <strong>10 Orders<\/strong>\n                            <span>5% Off All Future Orders<\/span>\n                        <\/li>\n                                            <li>\n                            <strong>30 Orders<\/strong>\n                            <span>10% Off All Future Orders<\/span>\n                        <\/li>\n                                            <li>\n                            <strong>50 Orders<\/strong>\n                            <span>15% Off All Future Orders<\/span>\n                        <\/li>\n                                    <\/ul>\n                                    <div class=\"hapi-military-note\">Ask about our Military Discount!<\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"hapi-special-section\">\n            <h2>Loyalty Clients Special<\/h2>\n            <p>Pre-purchase credits and save big on your media needs.<\/p>\n            <div class=\"hapi-special-grid\">\n                                    <div class=\"hapi-special-card\">\n                        <h3>Buy $3,000 Credits<\/h3>\n                        <div class=\"hapi-price\">For $2,699<\/div>\n                        <div class=\"hapi-save\">Save $301<\/div>\n                    <\/div>\n                                    <div class=\"hapi-special-card\">\n                        <h3>Buy $10,000 Credits<\/h3>\n                        <div class=\"hapi-price\">For $8,599<\/div>\n                        <div class=\"hapi-save\">Save $1,401<\/div>\n                    <\/div>\n                                    <div class=\"hapi-special-card\">\n                        <h3>Buy $20,000 Credits<\/h3>\n                        <div class=\"hapi-price\">For $16,499<\/div>\n                        <div class=\"hapi-save\">Save $3,501<\/div>\n                    <\/div>\n                            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- AUTH MODAL -->\n    <div class=\"hapi-auth-modal\" data-hapi-auth-modal>\n        <div class=\"hapi-auth-box\">\n            <button type=\"button\" class=\"hapi-close-modal\" data-hapi-close-auth>&times;<\/button>\n            <h2>Log In<\/h2>\n            <p>Access your HAPI Loyalty Account.<\/p>\n            <button type=\"button\" class=\"hapi-social-btn btn-google\" data-hapi-google-login>\n                <svg style=\"width:18px;height:18px;margin-right:10px;flex-shrink:0;\" viewBox=\"0 0 24 24\">\n                    <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/>\n                    <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/>\n                    <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\/>\n                    <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/>\n                <\/svg>\n                <span data-hapi-google-btn-text>Log in with Google<\/span>\n            <\/button>\n            <p class=\"hapi-auth-error\" data-hapi-auth-error><\/p>\n        <\/div>\n    <\/div>\n\n    <!-- DASHBOARD (CSS already hides this via display:none \u2014 JS shows with explicit display='block') -->\n    <div class=\"hapi-dashboard-view\" data-hapi-dashboard-view>\n        <div class=\"hapi-dashboard-container\">\n\n            <div class=\"hapi-sidebar\">\n                <div class=\"hapi-user-card\">\n                    <div class=\"hapi-user-menu-dots\">&#8942;<\/div>\n                    <div class=\"hapi-avatar\" data-hapi-avatar>?<\/div>\n                    <h3 data-hapi-name>Member<\/h3>\n                <\/div>\n                <ul class=\"hapi-nav\" data-hapi-nav>\n                    <li><button type=\"button\" data-target=\"panel-profile\">Profile<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-addresses\">My Addresses<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-wallet\">My Wallet<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-comments\">Blog Comments<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-likes\">Blog Likes<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-subs\">My Subscriptions<\/button><\/li>\n                    <li class=\"active\"><button type=\"button\" data-target=\"panel-rewards\">My Rewards<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-account\">My Account<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-notifications\">Notifications<\/button><\/li>\n                    <li><button type=\"button\" data-target=\"panel-settings\">Settings<\/button><\/li>\n                    <li><button type=\"button\" data-hapi-logout style=\"color:#e06060;\">Log Out<\/button><\/li>\n                <\/ul>\n            <\/div>\n\n            <div class=\"hapi-content-area\">\n\n                <!-- PROFILE -->\n                <div id=\"panel-profile\" class=\"hapi-panel\" data-panel=\"profile\">\n                    <div class=\"hapi-panel-header\"><h2>Profile<\/h2><p>Your member information.<\/p><\/div>\n                    <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin-bottom:14px;\">Display info<\/h3>\n                    <div class=\"hapi-row\">\n                        <div class=\"hapi-input-group\"><label>Display name *<\/label><input type=\"text\" data-hapi-field=\"displayName\" placeholder=\"Display name\"><\/div>\n                        <div class=\"hapi-input-group\"><label>Title<\/label><input type=\"text\" data-hapi-field=\"title\" placeholder=\"Add a title\"><\/div>\n                    <\/div>\n                    <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin:24px 0 14px;\">Personal info<\/h3>\n                    <div class=\"hapi-row\">\n                        <div class=\"hapi-input-group\"><label>First name<\/label><input type=\"text\" data-hapi-field=\"firstName\" placeholder=\"First name\"><\/div>\n                        <div class=\"hapi-input-group\"><label>Last name<\/label><input type=\"text\" data-hapi-field=\"lastName\" placeholder=\"Last name\"><\/div>\n                    <\/div>\n                    <div class=\"hapi-input-group\"><label>Phone (optional)<\/label><input type=\"tel\" data-hapi-field=\"phone\" placeholder=\"Phone number\"><\/div>\n                    <div style=\"text-align:right;margin-top:10px;\">\n                        <button type=\"button\" class=\"hapi-btn-primary\" data-hapi-save-profile>Update Info<\/button>\n                        <span data-hapi-profile-msg style=\"font-size:0.85rem;font-weight:600;margin-left:10px;\"><\/span>\n                    <\/div>\n                    <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin:24px 0 14px;\">Login info<\/h3>\n                    <p style=\"color:var(--hapi-loyalty-muted);font-size:0.9rem;\">Login email:<br><strong style=\"color:#fff;\" data-hapi-profile-email>...<\/strong><\/p>\n                    <p style=\"color:var(--hapi-loyalty-muted);font-size:0.9rem;margin-top:8px;\">Member since:<br><strong style=\"color:#fff;\" data-hapi-profile-since>...<\/strong><\/p>\n                <\/div>\n\n                <!-- MY ADDRESSES -->\n                <div id=\"panel-addresses\" class=\"hapi-panel\" data-panel=\"addresses\">\n                    <div class=\"hapi-panel-header\"><h2>My Addresses<\/h2><p>Manage your saved addresses.<\/p><\/div>\n                    <div class=\"hapi-empty-state\" data-hapi-addr-empty><h3>No saved addresses<\/h3><p>Add an address to speed up checkout.<\/p><\/div>\n                    <div data-hapi-addr-list><\/div>\n                    <button type=\"button\" class=\"hapi-btn-primary\" style=\"margin-top:16px;\" data-hapi-toggle-addr-form>+ Add Address<\/button>\n                    <div data-hapi-addr-form style=\"display:none;margin-top:16px;\">\n                        <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin-bottom:14px;\">New Address<\/h3>\n                        <div class=\"hapi-input-group\"><label>Street<\/label><input type=\"text\" data-hapi-addr-street placeholder=\"123 Main St\"><\/div>\n                        <div class=\"hapi-row\">\n                            <div class=\"hapi-input-group\"><label>City<\/label><input type=\"text\" data-hapi-addr-city placeholder=\"City\"><\/div>\n                            <div class=\"hapi-input-group\"><label>State<\/label><input type=\"text\" data-hapi-addr-state placeholder=\"State\"><\/div>\n                        <\/div>\n                        <div class=\"hapi-input-group\"><label>ZIP<\/label><input type=\"text\" data-hapi-addr-zip placeholder=\"ZIP\"><\/div>\n                        <div style=\"text-align:right;margin-top:10px;\">\n                            <button type=\"button\" class=\"hapi-btn-primary\" data-hapi-save-addr>Save Address<\/button>\n                            <span data-hapi-addr-msg style=\"font-size:0.85rem;font-weight:600;margin-left:10px;\"><\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- MY WALLET -->\n                <div id=\"panel-wallet\" class=\"hapi-panel\" data-panel=\"wallet\">\n                    <div class=\"hapi-panel-header\"><h2>Wallet<\/h2><p>Save your payment details for faster checkout.<\/p><\/div>\n                    <div class=\"hapi-empty-state\">\n                        <svg style=\"width:60px;fill:rgba(78,155,233,0.25);margin-bottom:20px;\" viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z\"\/><\/svg>\n                        <h3>You haven't saved any payment methods yet<\/h3>\n                        <p>Contact us: <a href=\"mailto:info@hapiphotography.com\" style=\"color:var(--hapi-loyalty-primary);\">info@hapiphotography.com<\/a><\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- BLOG COMMENTS -->\n                <div id=\"panel-comments\" class=\"hapi-panel\" data-panel=\"comments\">\n                    <div class=\"hapi-panel-header\"><h2>Blog Comments<\/h2><p>View your recent comments.<\/p><\/div>\n                    <div class=\"hapi-empty-state\"><h3>No comments yet<\/h3><\/div>\n                <\/div>\n\n                <!-- BLOG LIKES -->\n                <div id=\"panel-likes\" class=\"hapi-panel\" data-panel=\"likes\">\n                    <div class=\"hapi-panel-header\"><h2>Blog Likes<\/h2><p>Posts you have liked.<\/p><\/div>\n                    <div class=\"hapi-empty-state\"><h3>No liked posts<\/h3><\/div>\n                <\/div>\n\n                <!-- SUBSCRIPTIONS -->\n                <div id=\"panel-subs\" class=\"hapi-panel\" data-panel=\"subs\">\n                    <div class=\"hapi-panel-header\"><h2>Subscriptions<\/h2><p>View and manage the subscriptions you've purchased.<\/p><\/div>\n                    <div class=\"hapi-empty-state\"><h3>No purchased subscriptions<\/h3><a href=\"mailto:info@hapiphotography.com\" style=\"color:var(--hapi-loyalty-primary);\">View Plans &amp; Pricing<\/a><\/div>\n                <\/div>\n\n                <!-- MY REWARDS -->\n                <div id=\"panel-rewards\" class=\"hapi-panel active\" data-panel=\"rewards\">\n                    <div class=\"hapi-panel-header\"><h2>Rewards<\/h2><p>Check out all of the rewards that are available to you.<\/p><\/div>\n                    <div class=\"hapi-points-box\">\n                        <h1 data-hapi-points>...<\/h1>\n                        <p style=\"color:#fff;margin-top:5px;text-transform:uppercase;letter-spacing:1px;\">Total Points Earned<\/p>\n                    <\/div>\n                                        <div class=\"hapi-tier\">\n                        <div class=\"hapi-tier-title\"><strong>10 Orders<\/strong><\/div>\n                        <div class=\"hapi-tier-desc\">5% Off All Future Orders<\/div>\n                    <\/div>\n                                        <div class=\"hapi-tier\">\n                        <div class=\"hapi-tier-title\"><strong>30 Orders<\/strong><\/div>\n                        <div class=\"hapi-tier-desc\">10% Off All Future Orders<\/div>\n                    <\/div>\n                                        <div class=\"hapi-tier\">\n                        <div class=\"hapi-tier-title\"><strong>50 Orders<\/strong><\/div>\n                        <div class=\"hapi-tier-desc\">15% Off All Future Orders<\/div>\n                    <\/div>\n                                        <div style=\"margin-top:30px;padding:20px;border:1px solid var(--hapi-loyalty-primary);background:rgba(78,155,233,0.05);\">\n                        <h3 style=\"color:var(--hapi-loyalty-primary);margin:0 0 5px 0;\">Military Discount<\/h3>\n                        <p style=\"margin:0;color:#d4e6f8;\">Please contact us directly to ask about our Military Discount program.<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- MY ACCOUNT -->\n                <div id=\"panel-account\" class=\"hapi-panel\" data-panel=\"account\">\n                    <div class=\"hapi-panel-header\"><h2>My Account<\/h2><p>Manage your account details.<\/p><\/div>\n                    <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin-bottom:14px;\">Account Status<\/h3>\n                    <div class=\"hapi-acct-rows\">\n                        <div class=\"hapi-acct-row\"><span>Email<\/span><strong data-hapi-acct-email>&#8212;<\/strong><\/div>\n                        <div class=\"hapi-acct-row\"><span>Login Method<\/span><strong>Google Account<\/strong><\/div>\n                        <div class=\"hapi-acct-row\"><span>Member Since<\/span><strong data-hapi-acct-since>&#8212;<\/strong><\/div>\n                        <div class=\"hapi-acct-row\"><span>Points Balance<\/span><strong data-hapi-acct-points>&#8212;<\/strong><\/div>\n                    <\/div>\n                    <div style=\"margin-top:24px;\">\n                        <h3 style=\"color:#fff;font-size:1rem;font-weight:600;border-bottom:1px solid var(--hapi-loyalty-border);padding-bottom:8px;margin-bottom:14px;\">Change Display Name<\/h3>\n                        <div class=\"hapi-input-group\"><label>New Display Name<\/label><input type=\"text\" data-hapi-acct-name-input placeholder=\"Enter new name\"><\/div>\n                        <div style=\"text-align:right;margin-top:8px;\">\n                            <button type=\"button\" class=\"hapi-btn-primary\" data-hapi-save-acct-name>Update Name<\/button>\n                            <span data-hapi-acct-msg style=\"font-size:0.85rem;font-weight:600;margin-left:10px;\"><\/span>\n                        <\/div>\n                    <\/div>\n                    <div style=\"margin-top:28px;\">\n                        <h3 style=\"color:#e06060;font-size:1rem;font-weight:600;border-bottom:1px solid rgba(224,96,96,0.3);padding-bottom:8px;margin-bottom:14px;\">Danger Zone<\/h3>\n                        <p style=\"color:var(--hapi-loyalty-muted);font-size:0.9rem;margin-bottom:12px;\">Permanently delete your loyalty account. This cannot be undone.<\/p>\n                        <button type=\"button\" class=\"hapi-acct-btn-danger\" data-hapi-delete-account>Delete My Account<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- NOTIFICATIONS -->\n                <div id=\"panel-notifications\" class=\"hapi-panel\" data-panel=\"notifications\">\n                    <div class=\"hapi-panel-header\"><h2>Notifications<\/h2><p>Your recent alerts.<\/p><\/div>\n                    <div class=\"hapi-notif-item\">\n                        <span style=\"font-size:1.5rem;flex-shrink:0;\">&#127881;<\/span>\n                        <div>\n                            <strong style=\"color:#fff;display:block;margin-bottom:4px;\">Welcome to HAPI Loyalty!<\/strong>\n                            <p style=\"color:var(--hapi-loyalty-muted);font-size:0.88rem;margin:0;line-height:1.5;\">You have earned 100 bonus points for signing up.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- SETTINGS -->\n                <div id=\"panel-settings\" class=\"hapi-panel\" data-panel=\"settings\">\n                    <div class=\"hapi-panel-header\"><h2>Settings<\/h2><p>Account preferences.<\/p><\/div>\n                    <div style=\"background:rgba(255,255,255,0.02);padding:24px;border:1px solid var(--hapi-loyalty-border);\">\n                        <h3 style=\"color:var(--hapi-loyalty-primary);font-size:0.95rem;font-weight:700;margin:0 0 10px;\">General<\/h3>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Updates and reminders<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"updates\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\n\n                        <h3 style=\"color:var(--hapi-loyalty-primary);font-size:0.95rem;font-weight:700;margin:18px 0 10px;\">Loyalty Program<\/h3>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>General loyalty program updates<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"loyaltyUpdates\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Points earned notifications<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"pointsNotifs\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\n\n                        <h3 style=\"color:var(--hapi-loyalty-primary);font-size:0.95rem;font-weight:700;margin:18px 0 10px;\">Inbox<\/h3>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>New messages<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"newMessages\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\n\n                        <h3 style=\"color:var(--hapi-loyalty-primary);font-size:0.95rem;font-weight:700;margin:18px 0 10px;\">Blog<\/h3>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Posts or comments are liked<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"postsLiked\"><span class=\"hapi-slider\"><\/span><\/label><\/div>\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Comments on posts<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" data-hapi-setting=\"commentsOnPosts\"><span class=\"hapi-slider\"><\/span><\/label><\/div>\n                    <\/div>\n                    <div style=\"text-align:right;margin-top:14px;\">\n                        <button type=\"button\" class=\"hapi-btn-primary\" data-hapi-save-settings>Save Settings<\/button>\n                        <span data-hapi-settings-msg style=\"font-size:0.85rem;font-weight:600;margin-left:10px;\"><\/span>\n                    <\/div>\n                <\/div>\n\n            <\/div><!-- \/content-area -->\n        <\/div><!-- \/dashboard-container -->\n    <\/div><!-- \/dashboard-view -->\n\n<\/div><!-- \/wrap -->\n\n<script type=\"module\">\n(async () => {\n    const ROOT = document.getElementById('hapi-loyalty-6ab8552');\n    if (!ROOT) return;\n\n    const cfg = {\"apiKey\":\"AIzaSyBMaTqFtFqO6_bV18F4cLVruZRZaRvBltQ\",\"authDomain\":\"absolute-rankers-crm.firebaseapp.com\",\"projectId\":\"absolute-rankers-crm\",\"storageBucket\":\"absolute-rankers-crm.firebasestorage.app\",\"messagingSenderId\":\"814588792051\",\"appId\":\"1:814588792051:web:8f16712c02f6fea95abb86\",\"measurementId\":\"G-W0ZQ4V2FH5\"};\n    if (!cfg.apiKey || !cfg.authDomain || !cfg.projectId || !cfg.appId) return;\n\n    \/* Helpers *\/\n    const QA   = a  => ROOT.querySelector('[' + a + ']');\n    const QID  = id => ROOT.querySelector('#' + id);\n    const fval = a  => { const el = QA(a); return el ? (el.value || '').trim() : ''; };\n    const sval = (a, v) => { const el = QA(a); if (el) el.value = v || ''; };\n    const stxt = (a, v) => { const el = QA(a); if (el) el.textContent = v || '\\u2014'; };\n    const esc  = s  => String(s || '').replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;');\n\n    function feedback(attr, msg, ok) {\n        const el = QA(attr); if (!el) return;\n        el.textContent = msg;\n        el.style.color = ok !== false ? 'var(--hapi-loyalty-primary)' : '#e06060';\n        setTimeout(() => { el.textContent = ''; }, 3500);\n    }\n\n    \/* Views *\/\n    const publicView  = QA('data-hapi-loyalty-public');\n    const dashView    = QA('data-hapi-dashboard-view');\n    const authModal   = QA('data-hapi-auth-modal');\n    const errorEl     = QA('data-hapi-auth-error');\n    const heroEls     = document.querySelectorAll('.hapi-loyalty-hero-widget');\n\n    function openModal()  { if (authModal) authModal.classList.add('is-open'); if (errorEl) errorEl.textContent = ''; }\n    function closeModal() { if (authModal) authModal.classList.remove('is-open'); }\n    function setErr(m)    { if (errorEl) errorEl.textContent = m || ''; }\n\n    \/* KEY FIX: always use explicit 'block'\/'none' \u2014 never '' which lets CSS display:none win *\/\n    function showLoggedOut() {\n        if (publicView) publicView.style.display  = 'block';\n        if (dashView)   dashView.style.display    = 'none';\n        heroEls.forEach(el => { el.style.display = ''; });\n    }\n    function showLoggedIn() {\n        if (publicView) publicView.style.display  = 'none';\n        if (dashView)   dashView.style.display    = 'block'; \/* explicit block overrides CSS display:none *\/\n        heroEls.forEach(el => { el.style.display = 'none'; });\n        closeModal();\n    }\n\n    \/* Hero \"Become a Member\" trigger *\/\n    document.addEventListener('click', e => {\n        if (e.target && (e.target.id === 'trigger-login-btn' || e.target.closest('#trigger-login-btn'))) { e.preventDefault(); openModal(); }\n        if (e.target && e.target.closest('[data-hapi-close-auth]')) closeModal();\n        if (e.target === authModal) closeModal();\n    });\n\n    \/* Tab navigation *\/\n    const navEl  = QA('data-hapi-nav');\n    const panels = ROOT.querySelectorAll('.hapi-panel');\n    if (navEl) {\n        navEl.querySelectorAll('button[data-target]').forEach(btn => {\n            btn.addEventListener('click', () => {\n                navEl.querySelectorAll('li').forEach(li => li.classList.remove('active'));\n                panels.forEach(p => p.classList.remove('active'));\n                const li = btn.closest('li'); if (li) li.classList.add('active');\n                const panel = QID(btn.getAttribute('data-target')); if (panel) panel.classList.add('active');\n            });\n        });\n    }\n\n    \/* Firebase SDK *\/\n    const V = '10.12.2';\n    const { initializeApp } = await import(`https:\/\/www.gstatic.com\/firebasejs\/${V}\/firebase-app.js`);\n    const { getAuth, signInWithPopup, signInWithRedirect, getRedirectResult,\n            GoogleAuthProvider, onAuthStateChanged, signOut, setPersistence, browserLocalPersistence, deleteUser }\n        = await import(`https:\/\/www.gstatic.com\/firebasejs\/${V}\/firebase-auth.js`);\n    const { getFirestore, doc, getDoc, setDoc, updateDoc, arrayUnion, serverTimestamp }\n        = await import(`https:\/\/www.gstatic.com\/firebasejs\/${V}\/firebase-firestore.js`);\n\n    const fbApp = initializeApp(cfg, 'hapi-hapi-loyalty-6ab8552');\n    const auth  = getAuth(fbApp);\n    const db    = getFirestore(fbApp);\n    const prov  = new GoogleAuthProvider();\n    prov.setCustomParameters({ prompt: 'select_account' });\n\n    try { await setPersistence(auth, browserLocalPersistence); } catch(_) {}\n    try { await getRedirectResult(auth); } catch(e) { if (e.code) setErr('Redirect: ' + e.code); }\n\n    \/* Login *\/\n    const loginBtn  = QA('data-hapi-google-login');\n    const loginText = QA('data-hapi-google-btn-text');\n    if (loginBtn) {\n        loginBtn.addEventListener('click', async () => {\n            setErr(''); if (loginText) loginText.textContent = 'Signing in\\u2026'; loginBtn.disabled = true;\n            try {\n                await signInWithPopup(auth, prov);\n            } catch(err) {\n                const c = err.code || '';\n                if (c === 'auth\/popup-blocked' || c === 'auth\/cancelled-popup-request' || c === 'auth\/operation-not-supported-in-this-environment') {\n                    if (loginText) loginText.textContent = 'Redirecting\\u2026';\n                    await signInWithRedirect(auth, prov); return;\n                }\n                if (c !== 'auth\/popup-closed-by-user') setErr(c === 'auth\/unauthorized-domain' ? '\\u26a0\\ufe0f Add this domain to Firebase \\u2192 Authentication \\u2192 Authorized Domains.' : 'Login failed: ' + c);\n                if (loginText) loginText.textContent = 'Log in with Google';\n                loginBtn.disabled = false;\n            }\n        });\n    }\n\n    \/* Logout *\/\n    const logoutBtn = QA('data-hapi-logout');\n    if (logoutBtn) logoutBtn.addEventListener('click', async () => { try { await signOut(auth); } catch(_){} showLoggedOut(); });\n\n    \/* Auth state observer *\/\n    onAuthStateChanged(auth, async user => {\n        if (!user) { showLoggedOut(); return; }\n        showLoggedIn();\n        await loadDashboard(user);\n    });\n\n    async function loadDashboard(user) {\n        const uid   = user.uid;\n        const ref   = doc(db, 'loyalty_users', uid);\n        const dName = user.displayName || 'Member';\n        const parts = dName.split(' ');\n\n        stxt('data-hapi-name', dName);\n        const av = QA('data-hapi-avatar'); if (av) av.textContent = dName.charAt(0).toUpperCase();\n\n        let data = {};\n        try {\n            const snap = await getDoc(ref);\n            if (snap.exists()) {\n                data = snap.data();\n            } else {\n                data = { displayName:dName, email:user.email, firstName:parts[0]||'', lastName:parts.slice(1).join(' ')||'',\n                         title:'', phone:'', points:100, orders:0, joinedAt:serverTimestamp(), addresses:[],\n                         settings:{ updates:true, loyaltyUpdates:true, pointsNotifs:true, newMessages:true, postsLiked:false, commentsOnPosts:false } };\n                await setDoc(ref, data);\n            }\n        } catch(e) {\n            data = { displayName:dName, email:user.email, points:100 };\n            console.warn('[HAPI Loyalty] Firestore blocked \\u2014 check Firebase Rules for loyalty_users.', e.message);\n        }\n\n        const pts  = data.points ?? 100;\n        const sinceStr = data.joinedAt?.toDate ? data.joinedAt.toDate().toLocaleDateString('en-US',{year:'numeric',month:'long',day:'numeric'}) : '\\u2014';\n\n        stxt('data-hapi-points',   String(pts));\n        stxt('data-hapi-profile-email', user.email||'\\u2014');\n        stxt('data-hapi-profile-since', sinceStr);\n        stxt('data-hapi-acct-email',    user.email||'\\u2014');\n        stxt('data-hapi-acct-since',    sinceStr);\n        stxt('data-hapi-acct-points',   pts + ' pts');\n\n        sval('data-hapi-field=\"displayName\"', data.displayName || dName);\n        sval('data-hapi-field=\"title\"',       data.title       || '');\n        sval('data-hapi-field=\"firstName\"',   data.firstName   || parts[0] || '');\n        sval('data-hapi-field=\"lastName\"',    data.lastName    || parts.slice(1).join(' ') || '');\n        sval('data-hapi-field=\"phone\"',       data.phone       || '');\n        sval('data-hapi-acct-name-input',     data.displayName || dName);\n\n        renderAddresses(data.addresses || []);\n\n        const cfg2 = data.settings || {};\n        ROOT.querySelectorAll('[data-hapi-setting]').forEach(inp => { const k = inp.getAttribute('data-hapi-setting'); if (k in cfg2) inp.checked = !!cfg2[k]; });\n\n        bind('data-hapi-save-profile', async () => {\n            try {\n                const up = { displayName:fval('data-hapi-field=\"displayName\"'), title:fval('data-hapi-field=\"title\"'), firstName:fval('data-hapi-field=\"firstName\"'), lastName:fval('data-hapi-field=\"lastName\"'), phone:fval('data-hapi-field=\"phone\"') };\n                await updateDoc(ref, up);\n                stxt('data-hapi-name', up.displayName);\n                const av2 = QA('data-hapi-avatar'); if (av2 && up.displayName) av2.textContent = up.displayName.charAt(0).toUpperCase();\n                feedback('data-hapi-profile-msg', '\\u2713 Profile updated!');\n            } catch(e) { feedback('data-hapi-profile-msg', '\\u2717 ' + e.message, false); }\n        });\n\n        bind('data-hapi-save-acct-name', async () => {\n            const n = fval('data-hapi-acct-name-input'); if (!n) { feedback('data-hapi-acct-msg', '\\u2717 Name cannot be empty.', false); return; }\n            try { await updateDoc(ref, { displayName:n }); stxt('data-hapi-name', n); sval('data-hapi-field=\"displayName\"', n); feedback('data-hapi-acct-msg', '\\u2713 Name updated!'); }\n            catch(e) { feedback('data-hapi-acct-msg', '\\u2717 ' + e.message, false); }\n        });\n\n        bind('data-hapi-toggle-addr-form', () => {\n            const f = QA('data-hapi-addr-form'); if (!f) return;\n            f.style.display = (f.style.display === 'none' || !f.style.display) ? 'block' : 'none';\n        });\n\n        bind('data-hapi-save-addr', async () => {\n            const street = fval('data-hapi-addr-street'), city = fval('data-hapi-addr-city');\n            if (!street || !city) { feedback('data-hapi-addr-msg', '\\u2717 Street and city required.', false); return; }\n            const addr = { id:Date.now(), street, city, state:fval('data-hapi-addr-state'), zip:fval('data-hapi-addr-zip') };\n            try {\n                await updateDoc(ref, { addresses:arrayUnion(addr) });\n                const s2 = await getDoc(ref); renderAddresses(s2.data()?.addresses || []);\n                ['data-hapi-addr-street','data-hapi-addr-city','data-hapi-addr-state','data-hapi-addr-zip'].forEach(a => sval(a,''));\n                const f = QA('data-hapi-addr-form'); if (f) f.style.display = 'none';\n                feedback('data-hapi-addr-msg', '\\u2713 Address saved!');\n            } catch(e) { feedback('data-hapi-addr-msg', '\\u2717 ' + e.message, false); }\n        });\n\n        bind('data-hapi-save-settings', async () => {\n            const settings = {};\n            ROOT.querySelectorAll('[data-hapi-setting]').forEach(inp => { settings[inp.getAttribute('data-hapi-setting')] = inp.checked; });\n            try { await updateDoc(ref, { settings }); feedback('data-hapi-settings-msg', '\\u2713 Settings saved!'); }\n            catch(e) { feedback('data-hapi-settings-msg', '\\u2717 ' + e.message, false); }\n        });\n\n        bind('data-hapi-delete-account', async () => {\n            if (!confirm('This permanently deletes your loyalty account and all your points. Cannot be undone. Continue?')) return;\n            try { await updateDoc(ref, { deleted:true, deletedAt:serverTimestamp() }); await deleteUser(user); }\n            catch(e) { alert('Could not delete account: ' + e.message + '\\nYou may need to sign in again first.'); }\n        });\n    }\n\n    function bind(attr, handler) { const el = QA(attr); if (!el || el._hb) return; el._hb = true; el.addEventListener('click', handler); }\n\n    function renderAddresses(addrs) {\n        const list  = QA('data-hapi-addr-list');\n        const empty = QA('data-hapi-addr-empty');\n        if (!list) return;\n        if (!addrs.length) { if (empty) empty.style.display = 'block'; list.innerHTML = ''; return; }\n        if (empty) empty.style.display = 'none';\n        list.innerHTML = addrs.map((a, i) => '<div class=\"hapi-addr-card\"><span class=\"hapi-addr-num\">'+(i+1)+'<\/span><div><strong style=\"color:#fff;display:block;\">'+esc(a.street)+'<\/strong><span style=\"color:var(--hapi-loyalty-muted);font-size:0.85rem;\">'+esc(a.city)+(a.state?', '+esc(a.state):'')+(a.zip?' '+esc(a.zip):'')+' <\/span><\/div><\/div>').join('');\n    }\n})();\n<\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-95f32d1 e-con-full e-flex e-con e-parent\" data-id=\"95f32d1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c14016 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"6c14016\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* =========================================\r\n       CORE VARIABLES & RESET\r\n       ========================================= *\/\r\n    :root {\r\n        --hapi-dark: #12100e;\r\n        --hapi-panel: #1a1612;\r\n        --hapi-copper: #bd8a5e;\r\n        --hapi-copper-hover: #a6754b;\r\n        --hapi-text: #e0e0e0;\r\n        --hapi-muted: #8c8c8c;\r\n        --hapi-border: rgba(189, 138, 94, 0.2);\r\n        --font-family: 'Montserrat', 'Segoe UI', sans-serif;\r\n    }\r\n\r\n    #hapi-loyalty-system * { box-sizing: border-box; }\r\n    \r\n    #hapi-loyalty-system {\r\n        font-family: var(--font-family);\r\n        background-color: var(--hapi-dark);\r\n        color: var(--hapi-text);\r\n        position: relative;\r\n        min-height: 800px;\r\n        overflow: hidden;\r\n        border-top: 5px solid var(--hapi-copper);\r\n    }\r\n\r\n    \/* =========================================\r\n       VIEW 1: PRE-LOGIN (THE STEPS & SPECIALS)\r\n       ========================================= *\/\r\n    #hapi-pre-login-view {\r\n        display: block; \/* Visible by default *\/\r\n        padding: 0 0 60px 0;\r\n        transition: opacity 0.5s ease;\r\n        background-color: #f9f9f9; \/* Light background for the public page *\/\r\n        color: #333;\r\n    }\r\n\r\n    .hapi-loyalty-hero {\r\n        background-color: var(--hapi-dark);\r\n        background-image: linear-gradient(rgba(26, 22, 18, 0.85), rgba(26, 22, 18, 0.85)), url('https:\/\/images.unsplash.com\/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');\r\n        background-size: cover; background-position: center;\r\n        text-align: center; padding: 80px 20px;\r\n        border-bottom: 5px solid var(--hapi-copper);\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .hapi-loyalty-hero h1 { color: #ffffff; font-size: 3.5rem; margin: 0 0 10px 0; font-weight: 700; letter-spacing: 1px; }\r\n    .hapi-loyalty-hero p { color: #e0e0e0; font-size: 1.2rem; margin: 0 0 30px 0; }\r\n\r\n    .hapi-btn-primary {\r\n        background-color: var(--hapi-copper); color: #ffffff !important;\r\n        padding: 15px 40px; font-size: 1.1rem; font-weight: 600; text-decoration: none;\r\n        display: inline-block; border-radius: 3px; transition: 0.3s; border: none; cursor: pointer;\r\n    }\r\n    .hapi-btn-primary:hover { background-color: var(--hapi-copper-hover); }\r\n\r\n    .hapi-email-contact { text-align: center; padding: 0 20px 40px; font-size: 1.2rem; font-weight: 500; color: #2a2015; }\r\n    .hapi-email-contact a { color: var(--hapi-copper); text-decoration: none; font-weight: 700; }\r\n\r\n    .hapi-loyalty-grid { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 30px; padding: 0 20px;}\r\n    .hapi-loyalty-card {\r\n        flex: 1; min-width: 300px; background-color: #ffffff; padding: 40px 30px;\r\n        border: 1px solid #eaeaea; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n        text-align: center; border-top: 4px solid var(--hapi-copper);\r\n    }\r\n    \r\n    .hapi-step-number { font-size: 3rem; font-weight: 800; color: #f2e8df; line-height: 1; margin-bottom: 10px; }\r\n    .hapi-loyalty-card h2 { color: #2a2015; font-size: 1.6rem; margin: 0 0 20px 0; font-weight: 700; }\r\n    .hapi-earn-item { margin-bottom: 25px; }\r\n    .hapi-earn-item h3 { color: var(--hapi-copper); font-size: 1.1rem; margin: 0 0 5px 0; }\r\n    \r\n    \/* Updated Rewards List Styling *\/\r\n    .hapi-rewards-list { list-style: none; padding: 0; margin: 0; text-align: left; }\r\n    .hapi-rewards-list li { padding: 15px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.95rem; color: #444; }\r\n    .hapi-rewards-list li:last-child { border-bottom: none; }\r\n    .hapi-rewards-list strong { display: block; color: var(--hapi-copper); font-size: 1.1rem; margin-bottom: 3px; }\r\n    \r\n    .hapi-military-note {\r\n        margin-top: 20px; padding: 15px; background: #fdfaf7; border-left: 4px solid var(--hapi-copper);\r\n        color: #2a2015; font-weight: 600; text-align: left; font-size: 0.95rem;\r\n    }\r\n\r\n    \/* Loyalty Clients Special Section *\/\r\n    .hapi-special-section {\r\n        max-width: 1200px; margin: 60px auto 0; padding: 0 20px; text-align: center;\r\n    }\r\n    .hapi-special-section h2 { color: #2a2015; font-size: 2rem; font-weight: 700; margin-bottom: 10px; }\r\n    .hapi-special-section p { color: #555; margin-bottom: 30px; font-size: 1.1rem; }\r\n    \r\n    .hapi-special-grid {\r\n        display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;\r\n    }\r\n    .hapi-special-card {\r\n        background: #1a1612; color: #fff; padding: 30px; border: 1px solid var(--hapi-copper);\r\n        min-width: 280px; flex: 1; max-width: 350px; text-align: center;\r\n    }\r\n    .hapi-special-card h3 { color: var(--hapi-copper); font-size: 1.5rem; margin: 0 0 10px; font-weight: 800;}\r\n    .hapi-special-card .hapi-price { font-size: 2rem; font-weight: 700; margin: 15px 0; }\r\n    .hapi-special-card .hapi-save { color: #8c8c8c; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;}\r\n\r\n\r\n    \/* =========================================\r\n       VIEW 2: AUTH MODAL (POPUP)\r\n       ========================================= *\/\r\n    #hapi-auth-modal {\r\n        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n        background: rgba(18, 16, 14, 0.85); backdrop-filter: blur(5px);\r\n        z-index: 9999; justify-content: center; align-items: center;\r\n        opacity: 0; transition: opacity 0.3s;\r\n    }\r\n    .hapi-auth-box {\r\n        background: var(--hapi-panel); border: 2px solid var(--hapi-copper);\r\n        padding: 50px 40px; width: 90%; max-width: 400px; text-align: center; position: relative;\r\n    }\r\n    .hapi-close-modal {\r\n        position: absolute; top: 15px; right: 20px; color: var(--hapi-muted);\r\n        font-size: 1.5rem; cursor: pointer; background: none; border: none;\r\n    }\r\n    .hapi-auth-box h2 { color: #fff; font-size: 2.2rem; margin: 0 0 10px 0; font-weight: 800; text-transform: uppercase; }\r\n    .hapi-auth-box p { color: var(--hapi-muted); margin-bottom: 30px; font-size: 0.9rem; }\r\n    .hapi-social-btn {\r\n        display: flex; align-items: center; justify-content: center;\r\n        width: 100%; padding: 12px; margin-bottom: 15px; font-weight: 600; font-size: 1rem;\r\n        cursor: pointer; transition: 0.3s; border: none; font-family: var(--font-family);\r\n    }\r\n    .btn-google { background: #fff; color: #333; }\r\n    .btn-google:hover { background: #eee; }\r\n\r\n    \/* =========================================\r\n       VIEW 3: THE DASHBOARD (LOGGED IN)\r\n       ========================================= *\/\r\n    #hapi-dashboard-view {\r\n        display: none; padding: 60px 20px; min-height: 800px;\r\n    }\r\n    .hapi-dashboard-container { display: flex; max-width: 1200px; margin: 0 auto; gap: 30px; }\r\n\r\n    \/* SIDEBAR *\/\r\n    .hapi-sidebar { width: 280px; flex-shrink: 0; }\r\n    .hapi-user-card {\r\n        background: var(--hapi-panel); border: 1px solid var(--hapi-border);\r\n        padding: 30px 20px; text-align: center; margin-bottom: 15px;\r\n        border-top: 4px solid var(--hapi-copper); position: relative;\r\n    }\r\n    .hapi-avatar {\r\n        width: 80px; height: 80px; background: var(--hapi-copper); color: var(--hapi-dark);\r\n        border-radius: 0; display: flex; align-items: center; justify-content: center;\r\n        font-size: 2.5rem; font-weight: 800; margin: 0 auto 15px;\r\n    }\r\n    .hapi-user-card h3 { margin: 0; color: #fff; font-size: 1.1rem; }\r\n    .hapi-user-menu-dots { position: absolute; top: 15px; right: 15px; color: var(--hapi-muted); cursor: pointer; }\r\n\r\n    .hapi-nav { background: var(--hapi-panel); border: 1px solid var(--hapi-border); list-style: none; padding: 0; margin: 0; }\r\n    .hapi-nav li { border-bottom: 1px solid var(--hapi-border); }\r\n    .hapi-nav li:last-child { border-bottom: none; }\r\n    .hapi-nav button {\r\n        width: 100%; text-align: left; background: transparent; border: none;\r\n        padding: 15px 20px; color: var(--hapi-muted); font-size: 0.95rem; font-family: inherit;\r\n        cursor: pointer; transition: all 0.3s; border-left: 3px solid transparent;\r\n    }\r\n    .hapi-nav button:hover { color: #fff; background: rgba(255,255,255,0.02); }\r\n    .hapi-nav li.active button { color: var(--hapi-copper); font-weight: 700; border-left-color: var(--hapi-copper); background: rgba(189, 138, 94, 0.05); }\r\n\r\n    \/* CONTENT PANELS *\/\r\n    .hapi-content-area { flex: 1; background: var(--hapi-panel); border: 1px solid var(--hapi-border); padding: 40px; min-height: 600px; }\r\n    .hapi-panel { display: none; animation: slideUp 0.4s ease forwards; }\r\n    .hapi-panel.active { display: block; }\r\n    @keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n    .hapi-panel-header { margin-bottom: 30px; border-bottom: 1px solid var(--hapi-border); padding-bottom: 15px; }\r\n    .hapi-panel-header h2 { font-size: 2rem; color: #fff; margin: 0 0 5px 0; text-transform: uppercase; }\r\n    .hapi-panel-header p { margin: 0; color: var(--hapi-muted); }\r\n\r\n    \/* UI ELEMENTS *\/\r\n    .hapi-empty-state { text-align: center; padding: 60px 20px; color: var(--hapi-muted); }\r\n    .hapi-empty-state h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }\r\n    .hapi-empty-state a { color: var(--hapi-copper); text-decoration: underline; }\r\n\r\n    \/* Inputs & Forms *\/\r\n    .hapi-input-group { margin-bottom: 20px; text-align: left; }\r\n    .hapi-input-group label { display: block; color: var(--hapi-muted); font-size: 0.85rem; margin-bottom: 5px; }\r\n    .hapi-input-group input { \r\n        width: 100%; background: transparent; border: 1px solid var(--hapi-border); \r\n        color: #fff; padding: 12px 15px; font-family: var(--font-family); font-size: 1rem; outline: none;\r\n    }\r\n    .hapi-input-group input:focus { border-color: var(--hapi-copper); }\r\n    \r\n    .hapi-row { display: flex; gap: 20px; }\r\n    .hapi-row .hapi-input-group { flex: 1; }\r\n\r\n    \/* Toggles *\/\r\n    .hapi-setting-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }\r\n    .hapi-setting-row:last-child { border-bottom: none; }\r\n    .hapi-setting-info h4 { margin: 0 0 5px 0; color: #e0e0e0; font-size: 1rem; font-weight: normal; }\r\n    \r\n    .hapi-toggle { position: relative; width: 44px; height: 24px; display: inline-block; }\r\n    .hapi-toggle input { opacity: 0; width: 0; height: 0; }\r\n    .hapi-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px;}\r\n    .hapi-slider:before { position: absolute; content: \"\"; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: var(--hapi-muted); transition: .4s; border-radius: 50%;}\r\n    .hapi-toggle input:checked + .hapi-slider { background-color: var(--hapi-copper); }\r\n    .hapi-toggle input:checked + .hapi-slider:before { transform: translateX(20px); background-color: #fff; }\r\n\r\n    \/* Rewards Display inside Dashboard *\/\r\n    .hapi-points-box { background: rgba(189, 138, 94, 0.1); border: 1px solid var(--hapi-copper); padding: 40px; text-align: center; margin-bottom: 40px; }\r\n    .hapi-points-box h1 { font-size: 4rem; color: var(--hapi-copper); margin: 0; line-height: 1; font-weight: 800; }\r\n    \r\n    \/* Modified for Orders logic *\/\r\n    .hapi-tier { padding: 20px 0; border-bottom: 1px solid var(--hapi-border); }\r\n    .hapi-tier-title { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center;}\r\n    .hapi-tier-title strong { color: #fff; font-size: 1.1rem; }\r\n    .hapi-tier-desc { color: var(--hapi-muted); font-size: 0.95rem; margin-bottom: 15px; }\r\n\r\n    @media (max-width: 900px) {\r\n        .hapi-dashboard-container { flex-direction: column; }\r\n        .hapi-sidebar { width: 100%; }\r\n        .hapi-nav { display: flex; overflow-x: auto; white-space: nowrap; border-bottom: 2px solid var(--hapi-copper); }\r\n        .hapi-nav li { border-bottom: none; border-right: 1px solid var(--hapi-border); }\r\n        .hapi-nav button { border-left: none; border-bottom: 3px solid transparent; padding: 15px; }\r\n        .hapi-nav li.active button { border-left: none; border-bottom-color: var(--hapi-copper); }\r\n        .hapi-content-area { padding: 25px 20px; }\r\n        .hapi-row { flex-direction: column; gap: 0; }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"hapi-loyalty-system\">\r\n\r\n    <div id=\"hapi-pre-login-view\">\r\n        <div class=\"hapi-loyalty-hero\">\r\n            <h1>Loyalty<\/h1>\r\n            <p>Earn points and turn them into rewards<\/p>\r\n            <button class=\"hapi-btn-primary\" id=\"trigger-login-btn\">Become a Member<\/button>\r\n        <\/div>\r\n        <div class=\"hapi-email-contact\">\r\n            To request Point Balance, email us at <a href=\"mailto:info@hapiphotography.com\">info@hapiphotography.com<\/a>\r\n        <\/div>\r\n        \r\n        <div class=\"hapi-loyalty-grid\">\r\n            <div class=\"hapi-loyalty-card\">\r\n                <div class=\"hapi-step-number\">01<\/div><h2>Sign Up<\/h2><p style=\"color:#555;\">Sign up as a member to start enjoying the loyalty program.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"hapi-loyalty-card\">\r\n                <div class=\"hapi-step-number\">02<\/div><h2>Earn Points<\/h2>\r\n                <div class=\"hapi-earn-item\"><h3>Purchase a product<\/h3><p style=\"color:#555; margin:0;\">Get 1 point for every $1 spent<\/p><\/div>\r\n                <div class=\"hapi-earn-item\"><h3>Sign up to the site<\/h3><p style=\"color:#555; margin:0;\">Get 100 points<\/p><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"hapi-loyalty-card\">\r\n                <div class=\"hapi-step-number\">03<\/div><h2>Loyalty Discounts<\/h2>\r\n                <ul class=\"hapi-rewards-list\">\r\n                    <li><strong>10 Orders<\/strong> <span style=\"color:#222;\">10% Off All Future Orders<\/span><\/li>\r\n                    <li><strong>30 Orders<\/strong> <span style=\"color:#222;\">15% Off All Future Orders<\/span><\/li>\r\n                <\/ul>\r\n                <div class=\"hapi-military-note\">\r\n                    Ask about our Military Discount!\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hapi-special-section\">\r\n            <h2>Loyalty Clients Special<\/h2>\r\n            <p>Pre-purchase credits and save big on your media needs.<\/p>\r\n            <div class=\"hapi-special-grid\">\r\n                <div class=\"hapi-special-card\">\r\n                    <h3>Buy $3,000 Credits<\/h3>\r\n                    <div class=\"hapi-price\">For $2,499<\/div>\r\n                    <div class=\"hapi-save\">Save $501<\/div>\r\n                <\/div>\r\n                <div class=\"hapi-special-card\">\r\n                    <h3>Buy $10,000 Credits<\/h3>\r\n                    <div class=\"hapi-price\">For $8,499<\/div>\r\n                    <div class=\"hapi-save\">Save $1,501<\/div>\r\n                <\/div>\r\n                <div class=\"hapi-special-card\">\r\n                    <h3>Buy $20,000 Credits<\/h3>\r\n                    <div class=\"hapi-price\">For $15,999<\/div>\r\n                    <div class=\"hapi-save\">Save $4,001<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div id=\"hapi-auth-modal\">\r\n        <div class=\"hapi-auth-box\">\r\n            <button class=\"hapi-close-modal\" id=\"close-modal-btn\">&times;<\/button>\r\n            <h2>Log In<\/h2>\r\n            <p>Access your HAPI Loyalty Account.<\/p>\r\n            <button class=\"hapi-social-btn btn-google\" id=\"google-login-action\">\r\n                <svg style=\"width:18px;height:18px;margin-right:10px;\" viewBox=\"0 0 24 24\"><path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/><path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/><path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\/><path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/><\/svg>\r\n                Log in with Google\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"hapi-dashboard-view\">\r\n        <div class=\"hapi-dashboard-container\">\r\n            \r\n            <div class=\"hapi-sidebar\">\r\n                <div class=\"hapi-user-card\">\r\n                    <div class=\"hapi-user-menu-dots\">\u22ee<\/div>\r\n                    <div class=\"hapi-avatar\" id=\"ui-avatar\">?<\/div>\r\n                    <h3 id=\"ui-name\">Loading...<\/h3>\r\n                <\/div>\r\n                <ul class=\"hapi-nav\" id=\"hapi-nav-tabs\">\r\n                    <li><button data-target=\"panel-profile\">Profile<\/button><\/li>\r\n                    <li><button data-target=\"panel-addresses\">My Addresses<\/button><\/li>\r\n                    <li><button data-target=\"panel-wallet\">My Wallet<\/button><\/li>\r\n                    <li><button data-target=\"panel-comments\">Blog Comments<\/button><\/li>\r\n                    <li><button data-target=\"panel-likes\">Blog Likes<\/button><\/li>\r\n                    <li><button data-target=\"panel-subs\">My Subscriptions<\/button><\/li>\r\n                    <li class=\"active\"><button data-target=\"panel-rewards\">My Rewards<\/button><\/li>\r\n                    <li><button data-target=\"panel-account\">My Account<\/button><\/li>\r\n                    <li><button data-target=\"panel-notifications\">Notifications<\/button><\/li>\r\n                    <li><button data-target=\"panel-settings\">Settings<\/button><\/li>\r\n                    <li><button id=\"logout-btn\" style=\"color:#ff4444;\">Log Out<\/button><\/li>\r\n                <\/ul>\r\n            <\/div>\r\n\r\n            <div class=\"hapi-content-area\">\r\n                \r\n                <div id=\"panel-profile\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Profile<\/h2><p>Your member information.<\/p><\/div>\r\n                    \r\n                    <h3 style=\"color:#fff; font-size:1.1rem; border-bottom:1px solid var(--hapi-border); padding-bottom:10px; margin-bottom:20px;\">Display info<\/h3>\r\n                    <div class=\"hapi-row\">\r\n                        <div class=\"hapi-input-group\">\r\n                            <label>Display name *<\/label>\r\n                            <input type=\"text\" id=\"ui-profile-display-name\">\r\n                        <\/div>\r\n                        <div class=\"hapi-input-group\">\r\n                            <label>Title<\/label>\r\n                            <input type=\"text\" placeholder=\"Add a title\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <h3 style=\"color:#fff; font-size:1.1rem; border-bottom:1px solid var(--hapi-border); padding-bottom:10px; margin:bottom:20px; margin-top:30px;\">Personal info<\/h3>\r\n                    <div class=\"hapi-row\">\r\n                        <div class=\"hapi-input-group\">\r\n                            <label>First name<\/label>\r\n                            <input type=\"text\" id=\"ui-profile-first-name\">\r\n                        <\/div>\r\n                        <div class=\"hapi-input-group\">\r\n                            <label>Last name<\/label>\r\n                            <input type=\"text\" id=\"ui-profile-last-name\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div style=\"text-align: right; margin-top: 10px;\">\r\n                        <button class=\"hapi-btn-primary\">Update Info<\/button>\r\n                    <\/div>\r\n\r\n                    <h3 style=\"color:#fff; font-size:1.1rem; border-bottom:1px solid var(--hapi-border); padding-bottom:10px; margin:bottom:20px; margin-top:30px;\">Login info<\/h3>\r\n                    <p style=\"color:var(--hapi-muted); font-size:0.9rem;\">Login email:<br><strong style=\"color:#fff;\" id=\"ui-profile-email-text\">...<\/strong><\/p>\r\n                <\/div>\r\n\r\n                <div id=\"panel-addresses\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>My Addresses<\/h2><p>Manage your saved addresses.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>No saved addresses<\/h3><p>Add an address to speed up checkout.<\/p><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-wallet\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Wallet<\/h2><p>Save your payment details for faster checkout.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\">\r\n                        <svg style=\"width:60px; fill:var(--hapi-border); margin-bottom:20px;\" viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z\"\/><\/svg>\r\n                        <h3>You haven't saved any payment methods yet<\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-comments\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Blog Comments<\/h2><p>View your recent comments.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>No comments yet<\/h3><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-likes\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Blog Likes<\/h2><p>Posts you have liked.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>No liked posts<\/h3><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-subs\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Subscriptions<\/h2><p>View and manage the subscriptions you've purchased.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>No purchased subscriptions<\/h3><a href=\"#\">View Plans & Pricing<\/a><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-rewards\" class=\"hapi-panel active\">\r\n                    <div class=\"hapi-panel-header\"><h2>Rewards<\/h2><p>Check out all of the rewards that are available to you.<\/p><\/div>\r\n                    \r\n                    <div class=\"hapi-points-box\">\r\n                        <h1 id=\"ui-points\">...<\/h1>\r\n                        <p style=\"color:#fff; margin-top:5px; text-transform:uppercase; letter-spacing:1px;\">Total Points Earned<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"hapi-tier\">\r\n                        <div class=\"hapi-tier-title\"><strong>30 Orders<\/strong> <\/div>\r\n                        <div class=\"hapi-tier-desc\">15% Off All Future Orders<\/div>\r\n                    <\/div>\r\n                    <div class=\"hapi-tier\">\r\n                        <div class=\"hapi-tier-title\"><strong>10 Orders<\/strong><\/div>\r\n                        <div class=\"hapi-tier-desc\">10% Off All Future Orders<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div style=\"margin-top: 30px; padding: 20px; border: 1px solid var(--hapi-copper); background: rgba(189, 138, 94, 0.05);\">\r\n                         <h3 style=\"color:var(--hapi-copper); margin: 0 0 5px 0;\">Military Discount<\/h3>\r\n                         <p style=\"margin:0; color:#e0e0e0;\">Please contact us directly to ask about our Military Discount program.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-account\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>My Account<\/h2><p>Manage your account details.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>Account settings are up to date<\/h3><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-notifications\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Notifications<\/h2><p>Your recent alerts.<\/p><\/div>\r\n                    <div class=\"hapi-empty-state\"><h3>No new notifications<\/h3><\/div>\r\n                <\/div>\r\n\r\n                <div id=\"panel-settings\" class=\"hapi-panel\">\r\n                    <div class=\"hapi-panel-header\"><h2>Settings<\/h2><p>Account preferences.<\/p><\/div>\r\n                    \r\n                    <div style=\"background: rgba(255,255,255,0.02); padding: 30px; border: 1px solid var(--hapi-border);\">\r\n                        <h3 style=\"color:var(--hapi-copper); font-size:1.1rem; margin-bottom:15px;\">General<\/h3>\r\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Updates and reminders<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\r\n                        \r\n                        <h3 style=\"color:var(--hapi-copper); font-size:1.1rem; margin:25px 0 15px;\">Wix Loyalty Program<\/h3>\r\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>General loyalty program updates<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\r\n                        \r\n                        <h3 style=\"color:var(--hapi-copper); font-size:1.1rem; margin:25px 0 15px;\">Inbox<\/h3>\r\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>New messages<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\" checked><span class=\"hapi-slider\"><\/span><\/label><\/div>\r\n\r\n                        <h3 style=\"color:var(--hapi-copper); font-size:1.1rem; margin:25px 0 15px;\">Blog<\/h3>\r\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Posts or comments are liked<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\"><span class=\"hapi-slider\"><\/span><\/label><\/div>\r\n                        <div class=\"hapi-setting-row\"><div class=\"hapi-setting-info\"><h4>Comments on posts<\/h4><\/div><label class=\"hapi-toggle\"><input type=\"checkbox\"><span class=\"hapi-slider\"><\/span><\/label><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script type=\"module\">\r\n    import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/12.10.0\/firebase-app.js\";\r\n    import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signOut } from \"https:\/\/www.gstatic.com\/firebasejs\/12.10.0\/firebase-auth.js\";\r\n    import { getFirestore, doc, setDoc, getDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/12.10.0\/firebase-firestore.js\";\r\n\r\n    \/\/ 1. Firebase Config\r\n    const firebaseConfig = {\r\n        apiKey: \"AIzaSyBMaTqFtFqO6_bV18F4cLVruZRZaRvBltQ\",\r\n        authDomain: \"absolute-rankers-crm.firebaseapp.com\",\r\n        projectId: \"absolute-rankers-crm\",\r\n        storageBucket: \"absolute-rankers-crm.firebasestorage.app\",\r\n        messagingSenderId: \"814588792051\",\r\n        appId: \"1:814588792051:web:8f16712c02f6fea95abb86\",\r\n        measurementId: \"G-W0ZQ4V2FH5\"\r\n    };\r\n\r\n    const app = initializeApp(firebaseConfig);\r\n    const auth = getAuth(app);\r\n    const db = getFirestore(app);\r\n    const provider = new GoogleAuthProvider();\r\n\r\n    \/\/ 2. DOM Elements\r\n    const viewPreLogin = document.getElementById('hapi-pre-login-view');\r\n    const viewDashboard = document.getElementById('hapi-dashboard-view');\r\n    const modalAuth = document.getElementById('hapi-auth-modal');\r\n    \r\n    \/\/ 3. UI Flow Logic\r\n    document.getElementById('trigger-login-btn').addEventListener('click', () => {\r\n        modalAuth.style.display = 'flex';\r\n        setTimeout(() => modalAuth.style.opacity = '1', 10);\r\n    });\r\n\r\n    document.getElementById('close-modal-btn').addEventListener('click', () => {\r\n        modalAuth.style.opacity = '0';\r\n        setTimeout(() => modalAuth.style.display = 'none', 300);\r\n    });\r\n\r\n    \/\/ 4. Tab Logic\r\n    const tabs = document.querySelectorAll('#hapi-nav-tabs li');\r\n    const panels = document.querySelectorAll('.hapi-panel');\r\n    tabs.forEach(tab => {\r\n        tab.addEventListener('click', () => {\r\n            if(tab.querySelector('button').innerText === 'Log Out') return;\r\n            tabs.forEach(t => t.classList.remove('active'));\r\n            panels.forEach(p => p.classList.remove('active'));\r\n            tab.classList.add('active');\r\n            const targetId = tab.querySelector('button').getAttribute('data-target');\r\n            document.getElementById(targetId).classList.add('active');\r\n        });\r\n    });\r\n\r\n    \/\/ 5. Auth State Observer\r\n    onAuthStateChanged(auth, async (user) => {\r\n        if (user) {\r\n            \/\/ Hide Pre-login and Modal, Show Dashboard\r\n            viewPreLogin.style.display = 'none';\r\n            modalAuth.style.display = 'none';\r\n            viewDashboard.style.display = 'block';\r\n\r\n            \/\/ Populate UI with User Data\r\n            const dName = user.displayName || \"Member\";\r\n            const fName = dName.split(' ')[0] || '';\r\n            const lName = dName.split(' ')[1] || '';\r\n            \r\n            document.getElementById('ui-name').innerText = dName;\r\n            document.getElementById('ui-avatar').innerText = dName.charAt(0).toUpperCase();\r\n            \r\n            \/\/ Populate Profile Form fields\r\n            document.getElementById('ui-profile-display-name').value = dName;\r\n            document.getElementById('ui-profile-first-name').value = fName;\r\n            document.getElementById('ui-profile-last-name').value = lName;\r\n            document.getElementById('ui-profile-email-text').innerText = user.email;\r\n\r\n            \/\/ Fetch Points with Fallback\r\n            const userRef = doc(db, \"loyalty_users\", user.uid);\r\n            try {\r\n                const docSnap = await getDoc(userRef);\r\n                let pts = 0;\r\n                if (docSnap.exists()) {\r\n                    pts = docSnap.data().points || 0;\r\n                } else {\r\n                    pts = 100; \/\/ Sign up bonus\r\n                    await setDoc(userRef, { email: user.email, name: dName, points: pts, joinedAt: new Date() });\r\n                }\r\n                document.getElementById('ui-points').innerText = pts;\r\n            } catch(e) {\r\n                console.warn(\"Firestore Rules blocked access. Defaulting to 100 points for UI display. Fix this in Firebase Console -> Firestore -> Rules.\");\r\n                document.getElementById('ui-points').innerText = 100;\r\n            }\r\n        } else {\r\n            \/\/ Logged out: Show Pre-login, hide dashboard\r\n            viewPreLogin.style.display = 'block';\r\n            viewDashboard.style.display = 'none';\r\n        }\r\n    });\r\n\r\n    \/\/ 6. Login \/ Logout Actions\r\n    document.getElementById('google-login-action').addEventListener('click', () => {\r\n        signInWithPopup(auth, provider).catch(err => alert(\"Login failed or closed.\"));\r\n    });\r\n\r\n    document.getElementById('logout-btn').addEventListener('click', () => {\r\n        signOut(auth);\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loyalty Earn points and turn them into rewards Become a Member To request Point Balance, email us at info@hapiphotography.com 01 Sign Up Sign up as a member to start enjoying the loyalty program. 02 Loyalty Discounts 10 Orders 5% Off All Future Orders 30 Orders 10% Off All Future Orders 50 Orders 15% Off All [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1832","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/pages\/1832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/comments?post=1832"}],"version-history":[{"count":79,"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/pages\/1832\/revisions"}],"predecessor-version":[{"id":2760,"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/pages\/1832\/revisions\/2760"}],"wp:attachment":[{"href":"https:\/\/absoluterankersmail.com\/webdesigns\/hansenaerialphotography\/wp-json\/wp\/v2\/media?parent=1832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}