/* ── WordPress isolation reset ── */ #bpd-root, #bpd-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #bpd-root a { text-decoration: none; color: inherit; } #bpd-root img { max-width: none; height: auto; } #bpd-root button { cursor: pointer; } #bpd-root input, #bpd-root select, #bpd-root textarea { font-family: ‘DM Sans’, sans-serif; -webkit-appearance: none; appearance: none; } #bpd-root .bpd-page { min-height: 100vh; } * { margin:0; padding:0; box-sizing:border-box; } #bpd-root { font-family:’DM Sans’,sans-serif; background:#f8f8fc; color:#1a1a3a; min-height:100vh; } #bpd-root .bpd-page { display:none; min-height:100vh; flex-direction:column; } #bpd-root .bpd-page.bpd-active { display:flex; } #bpd-root .bpd-page-fade { animation:fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } /* PAGE 1 */ #bpd-root #page1 { background:#ffffff; } #bpd-root .bpd-p1-header { display:flex; align-items:center; justify-content:space-between; padding:24px 56px; border-bottom:1.5px solid #e2e2ee; background:#fff; } #bpd-root .bpd-p1-logos { display:flex; align-items:center; gap:24px; } #bpd-root .bpd-p1-logos img { height:36px; object-fit:contain; } #bpd-root .bpd-p1-logos .bpd-divider { width:1px; height:28px; background:#e2e2ee; } #bpd-root .bpd-p1-hilton img { height:44px; object-fit:contain; } #bpd-root .bpd-p1-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:72px 32px 56px; } #bpd-root .bpd-p1-eyebrow { display:inline-flex; align-items:center; gap:8px; background:#f0f0f8; border:1px solid #e2e2ee; border-radius:100px; padding:6px 18px; margin-bottom:28px; color:#444460; font-size:13px; font-weight:500; letter-spacing:0.03em; } #bpd-root .bpd-p1-eyebrow::before { content:’✦’; color:#002f61; } #bpd-root .bpd-p1-title { font-family:’Playfair Display’,serif; font-size:clamp(38px,5vw,64px); font-weight:700; color:#1a1a3a; line-height:1.15; margin-bottom:16px; } #bpd-root .bpd-p1-title span { color:#002f61; } #bpd-root .bpd-p1-sub { font-size:17px; color:#444460; max-width:480px; line-height:1.65; margin-bottom:52px; } #bpd-root .bpd-p1-features { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:44px; } #bpd-root .bpd-p1-feat { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e2e2ee; border-radius:12px; padding:14px 20px; font-size:14px; font-weight:600; color:#1a1a3a; box-shadow:0 4px 24px rgba(0,47,97,0.10); } #bpd-root .bpd-p1-feat .bpd-icon { font-size:20px; } #bpd-root .bpd-p1-feat:hover { border-color:#002f61; background:#eeeeff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,47,97,0.14); } #bpd-root .bpd-btn-primary { background:#002f61; color:#fff; border:none; border-radius:100px; padding:17px 52px; font-size:16px; font-weight:700; cursor:pointer; font-family:’DM Sans’,sans-serif; box-shadow:0 6px 24px rgba(0,47,97,0.25); transition:all 0.2s ease; } #bpd-root .bpd-btn-primary:hover { background:#003f82; transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,47,97,0.32); } #bpd-root .bpd-btn-primary:active { transform:translateY(0); } #bpd-root .bpd-p1-footer { padding:16px 56px; border-top:1px solid #e2e2ee; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#9090b8; font-size:11px; background:#fff; } #bpd-root .bpd-p1-footer img { height:20px; object-fit:contain; opacity:0.6; } #bpd-root .bpd-p1-footer .bpd-footer-top { display:flex; align-items:center; gap:6px; font-size:12px; } #bpd-root .bpd-p1-footer .bpd-footer-bottom { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } #bpd-root .bpd-p1-footer .bpd-footer-bottom .bpd-sep { color:#e2e2ee; } /* SHARED HEADER */ #bpd-root .bpd-site-header { background:#fff; border-bottom:1.5px solid #e2e2ee; padding:0 48px; height:64px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 12px rgba(0,47,97,0.06); } #bpd-root .bpd-sh-logos { display:flex; align-items:center; gap:18px; } #bpd-root .bpd-sh-logos img { height:26px; object-fit:contain; } #bpd-root .bpd-sh-logos .bpd-divider { width:1px; height:18px; background:#e2e2ee; } #bpd-root .bpd-staff-pill { display:flex; align-items:center; gap:10px; background:#f0f0f8; border:1px solid #e2e2ee; border-radius:100px; padding:5px 14px 5px 7px; } #bpd-root .bpd-staff-avatar { width:30px; height:30px; border-radius:50%; background:#002f61; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; } #bpd-root .bpd-staff-name { font-size:13px; font-weight:600; color:#1a1a3a; } #bpd-root .bpd-staff-role { font-size:11px; color:#9090b8; } #bpd-root .bpd-staff-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; margin-left:4px; } #bpd-root .bpd-home-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:100px; border:1.5px solid #e2e2ee; background:transparent; font-size:13px; font-weight:600; color:#444460; cursor:pointer; font-family:’DM Sans’,sans-serif; transition:all 0.2s; } #bpd-root .bpd-home-btn:hover { background:#f0f0f8; border-color:#9090b8; color:#1a1a3a; } /* PAGE 2 */ #bpd-root #page2 { background:#f8f8fc; } #bpd-root .bpd-p2-main { flex:1; padding:36px 48px; } #bpd-root .bpd-p2-context { display:flex; align-items:center; gap:16px; margin-bottom:28px; padding:16px 20px; background:#fff; border:1px solid #e2e2ee; border-radius:12px; box-shadow:0 4px 24px rgba(0,47,97,0.10); } #bpd-root .bpd-p2-context img { height:34px; object-fit:contain; } #bpd-root .bpd-p2-context-sep { width:1px; height:30px; background:#e2e2ee; } #bpd-root .bpd-p2-context-text h2 { font-size:17px; font-weight:700; color:#1a1a3a; } #bpd-root .bpd-p2-context-text p { font-size:13px; color:#9090b8; margin-top:2px; } #bpd-root .bpd-form-card { background:#fff; border:1px solid #e2e2ee; border-radius:16px; box-shadow:0 4px 24px rgba(0,47,97,0.10); overflow:hidden; } #bpd-root .bpd-form-card-header { background:#002f61; padding:16px 28px; display:flex; align-items:center; gap:10px; } #bpd-root .bpd-form-card-header h3 { color:#fff; font-size:15px; font-weight:600; } #bpd-root .bpd-form-body { padding:28px; } #bpd-root .bpd-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } #bpd-root .bpd-form-group { display:flex; flex-direction:column; gap:6px; } #bpd-root .bpd-form-group.bpd-full { grid-column:1/-1; } #bpd-root .bpd-form-group label { font-size:11px; font-weight:700; color:#444460; letter-spacing:0.05em; text-transform:uppercase; } #bpd-root .bpd-form-group input, #bpd-root .bpd-form-group select { border:1.5px solid #e2e2ee; border-radius:8px; padding:11px 13px; font-size:14px; font-family:’DM Sans’,sans-serif; color:#1a1a3a; transition:border-color 0.2s; background:#fff; } #bpd-root .bpd-form-group input:focus, #bpd-root .bpd-form-group select:focus { outline:none; border-color:#002f61; box-shadow:0 0 0 3px rgba(0,47,97,0.09); } #bpd-root .bpd-form-group input[readonly] { background:#f0f0f8; color:#444460; cursor:default; } #bpd-root .bpd-inr-display { padding:11px 13px; border-radius:8px; background:#f0f0f8; border:1.5px solid #e2e2ee; display:flex; flex-direction:column; gap:2px; } #bpd-root .bpd-inr-label { font-size:10px; font-weight:600; color:#9090b8; text-transform:uppercase; letter-spacing:0.04em; } #bpd-root .bpd-inr-value { font-size:16px; font-weight:700; color:#002f61; } #bpd-root .bpd-form-divider { height:1px; background:#e2e2ee; margin:22px 0; } #bpd-root .bpd-payment-section h4 { font-size:12px; font-weight:700; color:#444460; margin-bottom:14px; text-transform:uppercase; letter-spacing:0.06em; } #bpd-root .bpd-payment-methods { display:flex; gap:12px; flex-wrap:wrap; } #bpd-root .bpd-pay-btn { flex:1; min-width:130px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; border-radius:12px; cursor:pointer; border:2px solid #e2e2ee; background:#fff; font-family:’DM Sans’,sans-serif; transition:all 0.2s; } #bpd-root .bpd-pay-btn:hover { border-color:#002f61; background:#f8f8fc; transform:translateY(-2px); box-shadow:0 4px 24px rgba(0,47,97,0.10); } #bpd-root .bpd-pay-btn .bpd-icon { font-size:26px; } #bpd-root .bpd-pay-btn .bpd-label { font-size:13px; font-weight:700; color:#1a1a3a; } #bpd-root .bpd-pay-btn .bpd-sub { font-size:11px; color:#9090b8; text-align:center; } /* INNER PAGES */ #bpd-root .bpd-inner-main { flex:1; padding:36px 48px; display:flex; flex-direction:column; align-items:center; } #bpd-root .bpd-step-badge { display:inline-flex; align-items:center; gap:8px; background:#f0f0f8; border:1px solid #e2e2ee; border-radius:100px; padding:6px 16px; margin-bottom:20px; color:#002f61; font-size:13px; font-weight:600; } /* PAGE 3 */ #bpd-root #page3 { background:#f8f8fc; } #bpd-root .bpd-qr-card { background:#fff; border:1px solid #e2e2ee; border-radius:20px; box-shadow:0 12px 40px rgba(0,47,97,0.14); padding:32px; max-width:440px; width:100%; text-align:center; } #bpd-root .bpd-qr-card h2 { font-size:20px; font-weight:700; color:#1a1a3a; margin-bottom:5px; } #bpd-root .bpd-qr-card > p { color:#9090b8; font-size:13px; margin-bottom:24px; } #bpd-root .bpd-qr-frame { width:210px; height:210px; margin:0 auto 20px; border:2px solid #e2e2ee; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#f8f8fc; overflow:hidden; } #bpd-root .bpd-qr-frame img { width:100%; height:100%; object-fit:contain; } #bpd-root .bpd-qr-loading { display:flex; flex-direction:column; align-items:center; gap:10px; color:#9090b8; font-size:13px; } #bpd-root .bpd-qr-spinner { width:36px; height:36px; border:3px solid #e2e2ee; border-top-color:#002f61; border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } #bpd-root .bpd-guest-summary { background:#f8f8fc; border:1px solid #e2e2ee; border-radius:10px; padding:14px 16px; margin-bottom:18px; text-align:left; } #bpd-root .bpd-gs-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #e2e2ee; } #bpd-root .bpd-gs-row:last-child { border-bottom:none; } #bpd-root .bpd-gs-key { font-size:11px; color:#9090b8; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; } #bpd-root .bpd-gs-val { font-size:13px; font-weight:600; color:#1a1a3a; } #bpd-root .bpd-gs-val.amount { color:#002f61; font-size:15px; } #bpd-root .bpd-qr-instructions { font-size:13px; color:#444460; line-height:1.7; background:#f8f8fc; border:1px solid #e2e2ee; border-radius:8px; padding:14px 16px; text-align:left; } /* PAGE 4 */ #bpd-root #page4 { background:#f8f8fc; } #bpd-root .bpd-email-card { background:#fff; border:1px solid #e2e2ee; border-radius:20px; box-shadow:0 12px 40px rgba(0,47,97,0.14); padding:32px; max-width:480px; width:100%; } #bpd-root .bpd-email-card h2 { font-size:20px; font-weight:700; margin-bottom:5px; } #bpd-root .bpd-email-card > p { color:#9090b8; font-size:13px; margin-bottom:24px; } #bpd-root .bpd-email-preview { border:1.5px solid #e2e2ee; border-radius:12px; overflow:hidden; margin-bottom:20px; } #bpd-root .bpd-email-preview-head { background:#002f61; padding:14px 18px; color:#fff; font-size:13px; display:flex; flex-direction:column; gap:4px; } #bpd-root .bpd-email-preview-head .bpd-subject { font-weight:700; font-size:14px; } #bpd-root .bpd-email-preview-head .to { opacity:0.7; } #bpd-root .bpd-email-preview-body { padding:18px; font-size:13px; line-height:1.8; color:#444460; } #bpd-root .bpd-email-preview-body strong { color:#1a1a3a; } #bpd-root .bpd-email-preview-body .bpd-amount-highlight { font-size:22px; font-weight:700; color:#002f61; display:block; margin:10px 0; } #bpd-root .bpd-send-btn { width:100%; padding:14px; border:none; border-radius:10px; background:#002f61; color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:’DM Sans’,sans-serif; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:10px; } #bpd-root .bpd-send-btn:hover { background:#003f82; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,47,97,0.25); } #bpd-root .bpd-send-btn:disabled { opacity:0.6; cursor:default; transform:none; } #bpd-root .bpd-send-status { margin-top:14px; display:none; } #bpd-root .bpd-send-status.bpd-show { display:block; } #bpd-root .bpd-send-success { background:#f0fff4; border:1px solid #86efac; border-radius:10px; padding:14px; text-align:center; color:#166534; font-weight:600; font-size:14px; } #bpd-root .bpd-send-error { background:#fff0f0; border:1px solid #fca5a5; border-radius:10px; padding:14px; text-align:center; color:#991b1b; font-weight:600; font-size:14px; } /* PAGE 5 */ #bpd-root #page5 { background:#f8f8fc; } #bpd-root .bpd-agent-card { background:#fff; border:1px solid #e2e2ee; border-radius:20px; box-shadow:0 12px 40px rgba(0,47,97,0.14); padding:36px; max-width:540px; width:100%; text-align:center; } #bpd-root .bpd-agent-card h2 { font-size:22px; font-weight:700; color:#1a1a3a; margin-bottom:8px; } #bpd-root .bpd-agent-card p { color:#9090b8; font-size:14px; line-height:1.65; margin-bottom:28px; } #bpd-root .bpd-agent-icon { font-size:56px; margin-bottom:20px; } #bpd-root .bpd-agent-thumb { width:100%; border-radius:12px; overflow:hidden; margin-bottom:24px; border:1.5px solid #e2e2ee; background:#f0f0f8; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; } #bpd-root .bpd-agent-thumb-inner { text-align:center; color:#9090b8; } #bpd-root .bpd-agent-thumb-inner .bpd-play { font-size:48px; margin-bottom:8px; } #bpd-root .bpd-agent-thumb-inner p { font-size:13px; } #bpd-root .bpd-yt-btn { display:inline-flex; align-items:center; gap:12px; background:#FF0000; color:#fff; border:none; border-radius:10px; padding:16px 28px; font-size:16px; font-weight:700; cursor:pointer; font-family:’DM Sans’,sans-serif; transition:all 0.2s; text-decoration:none; } #bpd-root .bpd-yt-btn:hover { background:#cc0000; transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,0,0,0.3); } /* SHARED FOOTER */ #bpd-root .bpd-site-footer { padding:16px 48px; border-top:1px solid #e2e2ee; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#9090b8; font-size:11px; background:#fff; } #bpd-root .bpd-site-footer-top { display:flex; align-items:center; gap:6px; font-size:12px; } #bpd-root .bpd-site-footer-bottom { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } #bpd-root .bpd-site-footer-bottom .bpd-sep { color:#e2e2ee; } #bpd-root .bpd-site-footer img { height:18px; object-fit:contain; opacity:0.6; } /* Address display */ #bpd-root .bpd-address-display { padding:10px 13px; border-radius:8px; background:#f0f0f8; border:1.5px solid #e2e2ee; font-size:13px; color:#444460; line-height:1.6; } /* ── Mobile: tablets ── */ @media (max-width:768px) { /* Headers */ #bpd-root .bpd-p1-header { padding:16px 20px; } /* Inner page header – stack into 2 rows */ #bpd-root .bpd-site-header { padding:0 16px; height:auto; flex-wrap:wrap; gap:0; } #bpd-root .bpd-sh-logos { width:100%; padding:10px 0 8px; border-bottom:1px solid #e2e2ee; justify-content:flex-start; gap:14px; } #bpd-root .bpd-sh-logos img { height:20px; } #bpd-root .bpd-p1-logos img { height:28px; } /* Nav row: Home + staff pill */ #bpd-root .bpd-site-header > div:last-child { width:100%; padding:8px 0; justify-content:space-between; } /* Staff pill – show only name, no oval overflow */ #bpd-root .bpd-staff-pill { border-radius:8px; padding:5px 10px 5px 6px; max-width:calc(100% – 120px); } #bpd-root .bpd-staff-role { display:none; } #bpd-root .bpd-staff-name { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #bpd-root .bpd-staff-dot { flex-shrink:0; } /* Landing hero */ #bpd-root .bpd-p1-hero { padding:40px 20px 32px; } #bpd-root .bpd-p1-title { font-size:32px; } #bpd-root .bpd-p1-sub { font-size:15px; margin-bottom:32px; } #bpd-root .bpd-p1-features { gap:10px; } #bpd-root .bpd-p1-feat { padding:10px 14px; font-size:13px; } /* Form page */ #bpd-root .bpd-p2-main { padding:20px 16px; } #bpd-root .bpd-inner-main { padding:20px 16px; } #bpd-root .bpd-form-grid { grid-template-columns:1fr; } #bpd-root .bpd-form-body { padding:18px; } #bpd-root .bpd-p2-context { flex-wrap:wrap; gap:10px; padding:12px 14px; } #bpd-root .bpd-p2-context img { height:26px; } /* Payment buttons */ #bpd-root .bpd-payment-methods { flex-direction:column; } #bpd-root .bpd-pay-btn { flex-direction:row; justify-content:flex-start; gap:14px; padding:14px 16px; min-width:unset; } #bpd-root .bpd-pay-btn .bpd-sub { text-align:left; } /* Staff pill – compact */ #bpd-root .bpd-staff-pill { padding:4px 10px 4px 6px; } #bpd-root .bpd-staff-role { display:none; } /* QR card */ #bpd-root .bpd-qr-card { padding:20px 16px; } #bpd-root .bpd-qr-frame { width:180px; height:180px; } /* Email card */ #bpd-root .bpd-email-card { padding:20px 16px; } /* Agent card */ #bpd-root .bpd-agent-card { padding:24px 16px; } /* Overlay */ #bpd-root .bpd-payment-status-card { padding:24px 18px 20px; border-radius:16px; } #bpd-root .bpd-overlay-qr-frame { width:130px; height:130px; } /* Footer */ #bpd-root .bpd-site-footer { padding:12px 16px; } #bpd-root .bpd-p1-footer { padding:12px 16px; } #bpd-root .bpd-site-footer-bottom { gap:6px; font-size:10px; } #bpd-root .bpd-p1-footer .bpd-footer-bottom { gap:6px; font-size:10px; } } /* ── Mobile: phones ── */ @media (max-width:480px) { /* Landing header – stack logos */ #bpd-root .bpd-p1-header { flex-wrap:wrap; gap:12px; justify-content:center; } #bpd-root .bpd-p1-hilton { order:-1; width:100%; display:flex; justify-content:center; } #bpd-root .bpd-p1-logos { justify-content:center; } /* Inner header – hide Marriott logo to save space, keep BoxPay + RateGain */ #bpd-root .bpd-sh-logos img:last-of-type { display:none; } #bpd-root .bpd-sh-logos .bpd-divider:last-of-type { display:none; } /* Home button – compact */ #bpd-root .bpd-home-btn { padding:5px 10px; font-size:11px; } /* Hero */ #bpd-root .bpd-p1-title { font-size:26px; } #bpd-root .bpd-p1-sub { font-size:14px; } #bpd-root .bpd-btn-primary { padding:14px 36px; font-size:15px; } /* Features – stack vertically */ #bpd-root .bpd-p1-features { flex-direction:column; align-items:stretch; } #bpd-root .bpd-p1-feat { justify-content:center; } /* Context bar */ #bpd-root .bpd-p2-context { display:none; } /* redundant on mobile, save space */ /* Form */ #bpd-root .bpd-form-card-header { padding:12px 16px; } #bpd-root .bpd-form-card-header h3 { font-size:13px; } #bpd-root .bpd-form-body { padding:14px; } #bpd-root .bpd-form-group input, #bpd-root .bpd-form-group select { font-size:16px; } /* prevent iOS zoom */ /* Buttons – full width stack */ #bpd-root .bpd-home-btn { padding:6px 10px; font-size:12px; } /* QR */ #bpd-root .bpd-qr-card { padding:16px 12px; } #bpd-root .bpd-qr-frame { width:160px; height:160px; } #bpd-root .bpd-qr-card h2 { font-size:17px; } /* Email */ #bpd-root .bpd-email-card { padding:16px 12px; } #bpd-root .bpd-email-card h2 { font-size:17px; } #bpd-root .bpd-email-preview-body { padding:12px; font-size:12px; } /* Agent */ #bpd-root .bpd-agent-card { padding:20px 12px; } #bpd-root .bpd-agent-card h2 { font-size:18px; } #bpd-root .bpd-agent-icon { font-size:44px; } #bpd-root .bpd-yt-btn { padding:13px 20px; font-size:14px; } /* Overlay */ #bpd-root .bpd-payment-status-card { padding:20px 14px 16px; } #bpd-root .bpd-status-title { font-size:18px; } #bpd-root .bpd-overlay-qr-frame { width:110px; height:110px; } #bpd-root .bpd-countdown-ring { width:52px; height:52px; } #bpd-root .bpd-countdown-number { font-size:15px; } /* Footer – single column */ #bpd-root .bpd-site-footer-bottom { flex-direction:column; gap:4px; text-align:center; } #bpd-root .bpd-site-footer-bottom .bpd-sep { display:none; } #bpd-root .bpd-p1-footer .bpd-footer-bottom { flex-direction:column; gap:4px; text-align:center; } #bpd-root .bpd-p1-footer .bpd-footer-bottom .bpd-sep { display:none; } } /* Payment Status Overlay */ #bpd-root .bpd-payment-overlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:16px; } #bpd-root .bpd-payment-overlay.bpd-show { display:flex; } #bpd-root .bpd-payment-status-card { background:#fff; border-radius:24px; padding:32px 32px 28px; max-width:480px; width:100%; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,0.2); animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1); max-height:90vh; overflow-y:auto; position:relative; } /* Overlay close button */ #bpd-root .bpd-overlay-close { position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%; border:none; background:#f0f0f8; color:#444460; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:’DM Sans’,sans-serif; transition:all 0.2s; line-height:1; } #bpd-root .bpd-overlay-close:hover { background:#e2e2ee; color:#1a1a3a; } @keyframes popIn { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } } /* QR section inside overlay */ #bpd-root .bpd-overlay-qr-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e2e2ee; } #bpd-root .bpd-overlay-qr-label { font-size:11px; font-weight:700; color:#9090b8; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; } #bpd-root .bpd-overlay-qr-frame { width:160px; height:160px; margin:0 auto; border:2px solid #e2e2ee; border-radius:12px; overflow:hidden; background:#f8f8fc; display:flex; align-items:center; justify-content:center; } #bpd-root .bpd-overlay-qr-frame img { width:100%; height:100%; object-fit:contain; } /* Countdown ring */ #bpd-root .bpd-countdown-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:16px; } #bpd-root .bpd-countdown-ring { position:relative; width:64px; height:64px; } #bpd-root .bpd-countdown-ring svg { transform:rotate(-90deg); } #bpd-root .bpd-countdown-ring circle { fill:none; stroke-width:5; } #bpd-root .bpd-countdown-ring .bpd-track { stroke:#e2e2ee; } #bpd-root .bpd-countdown-ring .bpd-progress { stroke:#002f61; stroke-linecap:round; transition:stroke-dashoffset 1s linear; } #bpd-root .bpd-countdown-number { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#002f61; } #bpd-root .bpd-countdown-text { font-size:12px; color:#9090b8; } #bpd-root .bpd-status-icon { font-size:56px; margin-bottom:12px; display:block; } #bpd-root .bpd-status-title { font-size:22px; font-weight:700; margin-bottom:6px; } #bpd-root .bpd-status-title.bpd-success { color:#166534; } #bpd-root .bpd-status-title.bpd-failed { color:#991b1b; } #bpd-root .bpd-status-title.success { color:#166534; } #bpd-root .bpd-status-title.failed { color:#991b1b; } #bpd-root .bpd-status-sub { font-size:13px; color:#9090b8; line-height:1.65; margin-bottom:20px; } #bpd-root .bpd-status-detail { background:#f8f8fc; border:1px solid #e2e2ee; border-radius:12px; padding:12px 14px; margin-bottom:20px; text-align:left; } #bpd-root .bpd-status-detail .bpd-sd-row { display:flex; justify-content:space-between; padding:3px 0; } #bpd-root .bpd-status-detail .bpd-sd-key { font-size:11px; color:#9090b8; font-weight:600; text-transform:uppercase; } #bpd-root .bpd-status-detail .bpd-sd-val { font-size:13px; font-weight:600; color:#1a1a3a; } #bpd-root .bpd-status-new-btn { width:100%; padding:13px; border:none; border-radius:10px; background:#002f61; color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:’DM Sans’,sans-serif; transition:all 0.2s; } #bpd-root .bpd-status-new-btn:hover { background:#003f82; } #bpd-root .bpd-polling-indicator { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:#9090b8; margin-bottom:16px; } #bpd-root .bpd-polling-dot { width:7px; height:7px; border-radius:50%; background:#e2e2ee; animation:pulse 1.4s ease-in-out infinite; } #bpd-root .bpd-polling-dot:nth-child(2) { animation-delay:0.2s; } #bpd-root .bpd-polling-dot:nth-child(3) { animation-delay:0.4s; } @keyframes pulse { 0%,80%,100% { background:#e2e2ee; } 40% { background:#002f61; } } } (function() { const RATES = { INR: 94.58, SGD: 1.28, USD: 1.00, EUR: 0.92 }; const STATIC_PHONE = { India: ‘+919876543210’, Singapore: ‘+6587654321’, US: ‘+12125550180’, EUR: ‘+31201234567’ }; const CURRENCY_MAP = { India: ‘INR’, Singapore: ‘SGD’, US: ‘USD’, EUR: ‘EUR’ }; const TITLE_MAP = { INR: ‘Marriott Gurugram’, SGD: ‘Marriott Singapore’, USD: ‘Marriott New York Marquis’, EUR: ‘Marriott Amsterdam’ }; const ADDRESS_MAP = { INR: { address1:’BoxPay Technologies’, address2:’Golf Course Road’, city:’Gurugram’, state:’Haryana’, countryCode:’IN’, postalCode:’122001′ }, SGD: { address1:’BoxPay Technologies’, address2:’Marina Boulevard’, city:’Singapore’, state:’Singapore’, countryCode:’SG’, postalCode:’018981′ }, USD: { address1:’BoxPay Technologies’, address2:’5th Avenue’, city:’New York’, state:’NY’, countryCode:’US’, postalCode:’10001′ }, EUR: { address1:’BoxPay Technologies’, address2:’Herengracht’, city:’Amsterdam’, state:’North Holland’, countryCode:’NL’, postalCode:’1017′ } }; const API_BASE = (function() { const _h = ‘https://test-apis.box’; const _t = ‘pay.tech/v0/mercha’; const _e = ‘nts/FfqH4p3TCU’; return _h + _t + _e; })(); // Token reconstruction (obfuscated) function _rt() { var _k = [0x5A, 0x3F, 0x71, 0x4C]; var _p = [ [2, 19, 10, 18, 24, 23, 49, 53, 44, 56, 50, 43, 10, 63, 55, 48, 29, 35, 99, 53, 52], [74, 126, 89, 105, 12, 90, 92, 7, 112, 69, 115, 13, 107, 116, 106, 9, 118, 81, 79, 9, 73], [37, 55, 20, 60, 11, 56, 30, 40, 24, 66, 69, 72, 69, 18, 1, 52, 41, 65, 34, 40, 30], [43, 2, 8, 46, 34, 29, 7, 43, 37, 59, 22, 116, 61, 62, 47, 124, 120, 123, 10, 122, 7, 56, 36] ]; var result = ”; for (var i = 0; i < _p.length; i++) { for (var j = 0; j chars[Math.floor(Math.random() * chars.length)]).join(”); } function goToPage(id) { document.querySelectorAll(‘.bpd-page’).forEach(p => p.classList.remove(‘bpd-active’)); const pg = document.getElementById(id); pg.classList.add(‘bpd-active’); pg.classList.remove(‘bpd-page-fade’); void pg.offsetWidth; pg.classList.add(‘bpd-page-fade’); window.scrollTo(0,0); } function onCountryChange() { const country = document.getElementById(‘guestCountry’).value; state.guestCountry = country; state.guestPhone = STATIC_PHONE[country]; state.localCurrency = CURRENCY_MAP[country]; document.getElementById(‘guestPhone’).value = STATIC_PHONE[country]; const labels = { INR: { label:’Equivalent Amount (INR)’, note:’Auto-converted @ Rs.94.58 / $1′ }, SGD: { label:’Equivalent Amount (SGD)’, note:’Auto-converted @ SGD 1.28 / $1′ }, USD: { label:’Amount (USD)’, note:’No conversion – billed in USD’ }, EUR: { label:’Equivalent Amount (EUR)’, note:’Auto-converted @ EUR 0.92 / $1′ } }; const curr = CURRENCY_MAP[country]; document.getElementById(‘localCurrencyLabel’).textContent = labels[curr].label; document.getElementById(‘conversionNote’).textContent = labels[curr].note; convertAmount(); updateAddressDisplay(curr); } function convertAmount() { const usd = parseFloat(document.getElementById(‘amountUSD’).value) || 0; state.amountUSD = usd; const rate = RATES[state.localCurrency] || 1; state.amountLocal = usd * rate; const symbols = { INR:’Rs.’, SGD:’SGD’, USD:’$’, EUR:’EUR’ }; const symbol = symbols[state.localCurrency] || state.localCurrency; document.getElementById(‘localValue’).textContent = usd > 0 ? symbol + ‘ ‘ + state.amountLocal.toLocaleString(‘en-IN’, {minimumFractionDigits:2, maximumFractionDigits:2}) : ‘-‘; updateState(); } function updateState() { state.guestName = document.getElementById(‘guestName’).value; state.guestEmail = document.getElementById(‘guestEmail’).value; } function localAmountStr() { const symbols = { INR:’Rs.’, SGD:’SGD’, USD:’$’, EUR:’EUR’ }; const symbol = symbols[state.localCurrency] || state.localCurrency; return state.amountLocal > 0 ? symbol + ‘ ‘ + state.amountLocal.toLocaleString(‘en-IN’, {minimumFractionDigits:2, maximumFractionDigits:2}) : ‘-‘; } function updateAddressDisplay(currency) { const addr = ADDRESS_MAP[currency]; if (!addr) return; const section = document.getElementById(‘addressSection’); const display = document.getElementById(‘addressDisplay’); if (!section || !display) return; section.style.display = ‘block’; display.textContent = addr.address1 + ‘, ‘ + addr.address2 + ‘, ‘ + addr.city + ‘, ‘ + addr.state + ‘ – ‘ + addr.postalCode; } function summaryHTML(includePhone) { const rows = [ [‘Guest’, state.guestName || ‘-‘], [‘Email’, state.guestEmail || ‘-‘], [‘Country’, state.guestCountry], ]; if (includePhone) rows.push([‘Mobile’, state.guestPhone]); rows.push( [‘Amount (USD)’, ‘$’ + state.amountUSD.toFixed(2)], [‘Amount (‘ + state.localCurrency + ‘)’, localAmountStr()], [‘Reference’, state.refNum] ); return rows.map(([k,v]) => ‘\x3Cdiv class=”bpd-gs-row”>\x3Cspan class=”bpd-gs-key”>’+k+’\x3C/span>\x3Cspan class=”gs-val’+(k===’Amount (‘+state.localCurrency+’)’ ? ‘ amount’:”)+'”>’ +v+’\x3C/span>\x3C/div>’ ).join(”); } function validateForm(requireEmail) { updateState(); if (!state.guestName.trim()) { alert(‘Please enter guest name.’); return false; } if (requireEmail) { if (!state.guestEmail.trim()) { alert(‘Please enter guest email to send payment link.’); return false; } } if (!state.amountUSD || state.amountUSD ({})); throw new Error(errData.message || ‘API error: ‘ + response.status); } return response.json(); } // ── QR flow ── var _generatingQR = false; async function generateQR() { if (_generatingQR) return; _generatingQR = true; const loading = document.getElementById(‘qrLoading’); const img = document.getElementById(‘qrImage’); loading.style.display = ‘flex’; loading.innerHTML = ‘\x3Cdiv class=”bpd-qr-spinner”>\x3C/div>\x3Cspan>Generating QR…\x3C/span>’; img.style.display = ‘none’; try { const data = await createPaymentLink(false, true); const qrBase64 = data.trackingUrls ? data.trackingUrls.QR : null; if (qrBase64) { img.src = ‘data:image/png;base64,’ + qrBase64; loading.style.display = ‘none’; img.style.display = ‘block’; // Show overlay with QR + countdown, then start polling after delay _generatingQR = false; startQrOverlay(qrBase64); } else { throw new Error(‘QR code not returned in response’); } } catch(err) { _generatingQR = false; loading.innerHTML = ‘\x3Cspan style=”color:#991b1b;font-size:13px;text-align:center;”>Could not generate QR:\x3Cbr>’ + err.message + ‘\x3C/span>’; } } // ── QR overlay: show QR + countdown, then switch to polling state ── function startQrOverlay(qrBase64) { isQrFlow = true; stopPolling(); stopCountdown(); // Populate overlay QR image document.getElementById(‘overlayQrImage’).src = ‘data:image/png;base64,’ + qrBase64; // Show overlay in countdown state showOverlayState(‘countdown’); document.getElementById(‘paymentOverlay’).classList.add(‘bpd-show’); // Start the countdown let secondsLeft = QR_DELAY_SEC; updateCountdownRing(secondsLeft); countdownTimer = setInterval(() => { secondsLeft–; updateCountdownRing(secondsLeft); if (secondsLeft \x3Ccircle cx=”32″ cy=”32″ r=”32″ fill=”#dcfce7″/>\x3Ccircle cx=”32″ cy=”32″ r=”26″ fill=”#16a34a”/>\x3Cpolyline points=”20,33 28,41 44,24″ stroke=”white” stroke-width=”4.5″ stroke-linecap=”round” stroke-linejoin=”round” fill=”none”/>\x3C/svg>’; icon.style.lineHeight = ‘1’; title.className = ‘bpd-status-title bpd-success’; title.textContent = ‘Payment Successful!’; sub.textContent = ‘The guest payment has been received and confirmed.’; detail.style.display = ‘block’; polling.style.display = ‘none’; newBtn.style.display = ‘block’; } else if (mode === ‘failed’) { if (isQrFlow) qrSection.style.display = ‘block’; icon.style.display = ‘block’; icon.textContent = ‘❌’; title.className = ‘bpd-status-title bpd-failed’; title.textContent = ‘Payment Failed’; sub.textContent = ‘The payment was not completed. Please try again or use a different method.’; detail.style.display = ‘block’; polling.style.display = ‘none’; newBtn.style.display = ‘block’; } else if (mode === ‘retrying’) { if (isQrFlow) qrSection.style.display = ‘block’; icon.style.display = ‘block’; icon.textContent = ‘⚠️’; title.className = ‘bpd-status-title’; title.style.color = ‘#b45309’; title.textContent = ‘Payment Attempt Declined’; sub.textContent = ‘The last payment attempt was declined – but the guest can still retry on the payment page. Continuing to check for a successful retry…’; detail.style.display = ‘block’; polling.style.display = ‘flex’; // Update polling text to reflect retry context polling.innerHTML = ‘\x3Cdiv class=”bpd-bpd-polling-dot”>\x3C/div>\x3Cdiv class=”bpd-bpd-polling-dot”>\x3C/div>\x3Cdiv class=”bpd-bpd-polling-dot”>\x3C/div>\x3Cspan>Watching for retry…\x3C/span>’; newBtn.style.display = ‘block’; newBtn.textContent = ‘Initiate New Payment’; } } // ── Polling ── function startPollingOnly() { stopPolling(); pollStatus(); pollingTimer = setInterval(pollStatus, POLL_INTERVAL_MS); } function stopPolling() { if (pollingTimer) { clearInterval(pollingTimer); pollingTimer = null; } } async function pollStatus() { if (!currentOrderId) return; try { const response = await fetch(API_BASE + ‘/orders/’ + currentOrderId + ‘/transactions’, { headers: { ‘Content-Type’: ‘application/json’, ‘Authorization’: AUTH } }); if (!response.ok) return; const data = await response.json(); // API may return array directly or wrapped – normalise const transactions = Array.isArray(data) ? data : (data.transactions || data.data || []); if (!transactions.length) return; // Check ALL transactions for any approved one (retry may have succeeded) const approvedTxn = transactions.find(t => t.status ? (t.status.status ? t.status.status.toLowerCase() === ‘approved’ : false) : false ); if (approvedTxn) { stopPolling(); const statusObj = approvedTxn.status || {}; const detail = document.getElementById(‘statusDetail’); detail.innerHTML = ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Guest\x3C/span>\x3Cspan class=”bpd-sd-val”>’ + state.guestName + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Amount Paid\x3C/span>\x3Cspan class=”bpd-sd-val” style=”color:#002f61;font-size:15px;”>’ + localAmountStr() + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Reference\x3C/span>\x3Cspan class=”bpd-sd-val”>’ + state.refNum + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Status\x3C/span>\x3Cspan class=”bpd-sd-val” style=”color:#166534;”>’ + (statusObj.reason || ‘Approved’) + ‘\x3C/span>\x3C/div>’; showOverlayState(‘success’); return; } // Check if latest transaction is a decline – show retrying state but keep polling // Use last element as most recent attempt const latest = transactions[transactions.length – 1]; const latestStatus = (latest.status ? (latest.status.status ? latest.status.status.toLowerCase() : ”) : ”); const latestStatusObj = latest.status || {}; if ([‘rejected’,’failed’,’declined’].includes(latestStatus)) { // Keep polling – do NOT stop. Just update the UI to show last attempt failed. const detail = document.getElementById(‘statusDetail’); detail.innerHTML = ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Guest\x3C/span>\x3Cspan class=”bpd-sd-val”>’ + state.guestName + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Amount\x3C/span>\x3Cspan class=”bpd-sd-val”>’ + localAmountStr() + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Last Attempt\x3C/span>\x3Cspan class=”bpd-sd-val” style=”color:#b45309;”>’ + (latestStatusObj.reason || ‘Declined’) + ‘\x3C/span>\x3C/div>’ + ‘\x3Cdiv class=”bpd-sd-row”>\x3Cspan class=”bpd-sd-key”>Attempts\x3C/span>\x3Cspan class=”bpd-sd-val”>’ + transactions.length + ‘\x3C/span>\x3C/div>’; showOverlayState(‘retrying’); } // Any other status (pending etc) – keep polling silently } catch(e) { /* keep polling silently */ } } function closePaymentOverlay() { stopPolling(); stopCountdown(); document.getElementById(‘paymentOverlay’).classList.remove(‘bpd-show’); currentOrderId = null; isQrFlow = false; goToPage(‘page2’); } // ── Event delegation + direct binding (WP-safe) ── function bpdInit() { // 1. Document-level click delegation for data-bpd-action document.addEventListener(‘click’, function(e) { var el = e.target.closest(‘[data-bpd-action]’); if (!el) return; var action = el.getAttribute(‘data-bpd-action’); var target = el.getAttribute(‘data-bpd-target’); if (action === ‘goToPage’) goToPage(target); else if (action === ‘initiatePayment’) initiatePayment(target); else if (action === ‘sendEmail’) sendEmail(); else if (action === ‘closePaymentOverlay’) closePaymentOverlay(); }); document.addEventListener(‘input’, function(e) { var fn = e.target.getAttribute(‘data-bpd-oninput’); if (fn === ‘updateState’) updateState(); else if (fn === ‘convertAmount’) convertAmount(); }); document.addEventListener(‘change’, function(e) { var fn = e.target.getAttribute(‘data-bpd-onchange’); if (fn === ‘onCountryChange’) onCountryChange(); }); // 2. Direct JS onclick binding as WP fallback // WP can strip HTML attributes but cannot strip JS-assigned handlers bindButtons(); } function bindButtons() { var root = document.getElementById(‘bpd-root’); if (!root) return; // Map: [selector, handler] var bindings = [ [‘#page1 .bpd-btn-primary’, function() { goToPage(‘page2’); }], [‘#page2 .bpd-pay-btn:nth-child(1)’, function() { initiatePayment(‘qr’); }], [‘#page2 .bpd-pay-btn:nth-child(2)’, function() { initiatePayment(’email’); }], [‘#page2 .bpd-pay-btn:nth-child(3)’, function() { initiatePayment(‘agent’); }], [‘#sendEmailBtn’, function() { sendEmail(); }], [‘.bpd-overlay-close’, function() { closePaymentOverlay(); }], [‘#statusNewBtn’, function() { closePaymentOverlay(); }], ]; // Home/Back buttons root.querySelectorAll(‘[data-bpd-action=”goToPage”]’).forEach(function(el) { el.addEventListener(‘click’, function() { goToPage(el.getAttribute(‘data-bpd-target’)); }); }); bindings.forEach(function(pair) { var els = root.querySelectorAll(pair[0]); els.forEach(function(el) { el.addEventListener(‘click’, pair[1]); }); }); // Input/change bindings var amtInput = document.getElementById(‘amountUSD’); var nameInput = document.getElementById(‘guestName’); var emailInput = document.getElementById(‘guestEmail’); var countrySelect = document.getElementById(‘guestCountry’); if (amtInput) amtInput.addEventListener(‘input’, convertAmount); if (nameInput) nameInput.addEventListener(‘input’, updateState); if (emailInput) emailInput.addEventListener(‘input’, updateState); if (countrySelect) countrySelect.addEventListener(‘change’, onCountryChange); } if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, bpdInit); } else { bpdInit(); } // Expose to global scope function goToUC(type) { if (type === ‘agent’) { goToPage(‘page5’); return; } goToPage(‘page2’); } window.goToPage = goToPage; window.goToUC = goToUC; window.onCountryChange = onCountryChange; window.convertAmount = convertAmount; window.initiatePayment = initiatePayment; window.sendEmail = sendEmail; window.closePaymentOverlay = closePaymentOverlay; })(); (function() { if (window._bpdBound) return; window._bpdBound = true; function ready(fn) { if (document.readyState !== ‘loading’) { fn(); } else { document.addEventListener(‘DOMContentLoaded’, fn); } } ready(function() { document.addEventListener(‘click’, function(e) { var el = e.target; while (el) { if (el.getAttribute) { var action = el.getAttribute(‘data-bpd-action’); if (action) { var target = el.getAttribute(‘data-bpd-target’); if (action === ‘goToPage’) { if (window.goToPage) window.goToPage(target); } if (action === ‘goToUC’) { if (window.goToUC) window.goToUC(target); } if (action === ‘initiatePayment’) { if (window.initiatePayment) window.initiatePayment(target); } if (action === ‘sendEmail’) { if (window.sendEmail) window.sendEmail(); } if (action === ‘closePaymentOverlay’) { if (window.closePaymentOverlay) window.closePaymentOverlay(); } break; } } el = el.parentNode; if (!el || el === document) break; } }); document.addEventListener(‘input’, function(e) { var fn = e.target.getAttribute(‘data-bpd-oninput’); if (fn) { if (window[fn]) window[fn](); } }); document.addEventListener(‘change’, function(e) { var fn = e.target.getAttribute(‘data-bpd-onchange’); if (fn) { if (window[fn]) window[fn](); } }); }); }());