{"id":19732,"date":"2026-01-13T07:41:37","date_gmt":"2026-01-13T07:41:37","guid":{"rendered":"https:\/\/marketplace-marketplace.com\/?page_id=19732"},"modified":"2026-04-01T15:55:03","modified_gmt":"2026-04-01T15:55:03","slug":"create-sponsored-post","status":"publish","type":"page","link":"https:\/\/marketplace-marketplace.com\/index.php\/create-sponsored-post\/","title":{"rendered":"Marketplace Platform &#8211; Create Sponsored Post"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19732\" class=\"elementor elementor-19732\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f907978 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f907978\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1c26f5b\" data-id=\"1c26f5b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91a66ee elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"91a66ee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n:root{\r\n  --primary:#1877f2;\r\n  --secondary:#42b72a;\r\n  --bg:#f5f7fb;\r\n  --card:#fff;\r\n  --muted:#6b7280;\r\n  --danger:#dc2626;\r\n  --warning:#f59e0b;\r\n  --shadow:0 10px 30px rgba(0,0,0,.06);\r\n}\r\n\r\n#mapDemoV3{\r\n  font-family:Inter,system-ui,sans-serif;\r\n  background:var(--bg);\r\n  padding:24px;\r\n  border-radius:14px;\r\n  max-width:1100px;\r\n  margin:auto;\r\n}\r\n\r\n.map-header{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  margin-bottom:18px;\r\n  gap:12px;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-header h2{margin:0;}\r\n\r\n.map-actions{\r\n  display:flex;\r\n  gap:10px;\r\n  align-items:center;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-btn{\r\n  background:var(--primary);\r\n  color:#fff;\r\n  border:none;\r\n  padding:12px 16px;\r\n  border-radius:12px;\r\n  font-weight:800;\r\n  cursor:pointer;\r\n}\r\n\r\n.map-btn.secondary{ background:#111827; }\r\n\r\n.map-btn.ghost{\r\n  background:transparent;\r\n  color:#111827;\r\n  border:1px solid #e5e7eb;\r\n}\r\n\r\n.map-btn:disabled{\r\n  opacity:.7;\r\n  cursor:not-allowed;\r\n}\r\n\r\n.map-grid{\r\n  display:grid;\r\n  grid-template-columns:2fr 1fr;\r\n  gap:20px;\r\n}\r\n\r\n.map-card{\r\n  background:var(--card);\r\n  border-radius:14px;\r\n  padding:20px;\r\n  box-shadow:var(--shadow);\r\n}\r\n\r\n.map-card h3{margin:0 0 14px;}\r\n\r\n.map-field{ margin-bottom:16px; }\r\n\r\n.map-field label{\r\n  font-weight:800;\r\n  font-size:13px;\r\n  margin-bottom:6px;\r\n  display:block;\r\n}\r\n\r\n.map-field input,\r\n.map-field textarea,\r\n.map-field select{\r\n  width:100%;\r\n  padding:10px 12px;\r\n  border-radius:10px;\r\n  border:1px solid #e5e7eb;\r\n  outline:none;\r\n  font-size:14px;\r\n  background:#fff;\r\n}\r\n\r\n.map-field input:focus,\r\n.map-field textarea:focus,\r\n.map-field select:focus{\r\n  border-color:#c7d2fe;\r\n  box-shadow:0 0 0 3px rgba(24,119,242,.12);\r\n}\r\n\r\n.map-row{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:12px;\r\n}\r\n\r\n.map-note{\r\n  font-size:12px;\r\n  color:var(--muted);\r\n  margin-top:-8px;\r\n  margin-bottom:14px;\r\n}\r\n\r\n.map-error{\r\n  display:none;\r\n  color:var(--danger);\r\n  font-size:12px;\r\n  margin-top:6px;\r\n  line-height:1.2;\r\n}\r\n\r\n.map-warn{\r\n  display:none;\r\n  color:#92400e;\r\n  font-size:12px;\r\n  margin-top:6px;\r\n  line-height:1.2;\r\n}\r\n\r\n.map-input-error{\r\n  border-color:rgba(220,38,38,.75) !important;\r\n  background:rgba(220,38,38,.04);\r\n}\r\n\r\n\/* PACKAGES *\/\r\n.map-packages{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:12px;\r\n}\r\n\r\n.map-package{\r\n  border:2px solid #e5e7eb;\r\n  border-radius:14px;\r\n  padding:16px;\r\n  cursor:pointer;\r\n  transition:.2s;\r\n  user-select:none;\r\n}\r\n\r\n.map-package.active{\r\n  border-color:var(--primary);\r\n  background:#eef4ff;\r\n}\r\n\r\n.map-package h4{ margin:0 0 4px; }\r\n\r\n\/* Budget *\/\r\n.map-budget{\r\n  display:grid;\r\n  gap:10px;\r\n  padding:12px;\r\n  border-radius:14px;\r\n  border:1px solid #e5e7eb;\r\n  background:#fbfdff;\r\n}\r\n\r\n.map-budget-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:10px;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-pill{\r\n  display:inline-flex;\r\n  gap:8px;\r\n  align-items:center;\r\n  padding:6px 10px;\r\n  border-radius:999px;\r\n  background:#eef4ff;\r\n  color:#1d4ed8;\r\n  font-weight:800;\r\n  font-size:12px;\r\n  border:1px solid rgba(29,78,216,.15);\r\n}\r\n\r\n.map-budget input[type=\"range\"]{\r\n  width:100%;\r\n}\r\n\r\n.map-mini{\r\n  font-size:12px;\r\n  color:var(--muted);\r\n  line-height:1.3;\r\n}\r\n\r\n\/* UPLOAD *\/\r\n.map-upload{\r\n  border:2px dashed #cbd5e1;\r\n  border-radius:14px;\r\n  padding:26px;\r\n  text-align:center;\r\n  color:var(--muted);\r\n  cursor:pointer;\r\n}\r\n\r\n.map-upload.dragover{\r\n  border-color:var(--primary);\r\n  background:#eef4ff;\r\n}\r\n\r\n.map-preview{\r\n  display:grid;\r\n  grid-template-columns:repeat(auto-fill,80px);\r\n  gap:10px;\r\n  margin-top:10px;\r\n}\r\n\r\n.map-thumb{\r\n  position:relative;\r\n  width:80px;\r\n  height:80px;\r\n}\r\n\r\n.map-thumb img{\r\n  width:80px;\r\n  height:80px;\r\n  object-fit:cover;\r\n  border-radius:10px;\r\n  display:block;\r\n}\r\n\r\n.map-thumb button{\r\n  position:absolute;\r\n  top:-8px;\r\n  right:-8px;\r\n  width:22px;\r\n  height:22px;\r\n  border-radius:999px;\r\n  border:none;\r\n  background:#111827;\r\n  color:#fff;\r\n  cursor:pointer;\r\n  font-weight:900;\r\n  line-height:22px;\r\n  padding:0;\r\n  box-shadow:0 8px 18px rgba(0,0,0,.2);\r\n}\r\n\r\n\/* STATS *\/\r\n.map-stats{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:12px;\r\n}\r\n\r\n.map-stat{\r\n  background:linear-gradient(135deg,var(--primary),var(--secondary));\r\n  color:#fff;\r\n  padding:16px;\r\n  border-radius:14px;\r\n}\r\n\r\n.map-stat strong{\r\n  font-size:20px;\r\n  letter-spacing:.2px;\r\n}\r\n\r\n.map-metrics{\r\n  margin-top:12px;\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:10px;\r\n}\r\n\r\n.map-metric{\r\n  background:#fff;\r\n  border:1px solid #e5e7eb;\r\n  border-radius:12px;\r\n  padding:10px;\r\n}\r\n\r\n.map-metric .k{ font-size:12px; color:var(--muted); margin-bottom:4px; }\r\n.map-metric .v{ font-weight:900; color:#111827; }\r\n\r\n.map-info{\r\n  margin-top:10px;\r\n  font-size:12px;\r\n  color:var(--muted);\r\n}\r\n\r\n\/* Social icons under Preview Stats *\/\r\n.map-social-wrap{\r\n  margin-top:14px;\r\n  padding-top:14px;\r\n  border-top:1px solid #eef2f7;\r\n}\r\n\r\n.map-social-title{\r\n  font-weight:900;\r\n  font-size:12px;\r\n  color:#111827;\r\n  margin:0 0 10px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n}\r\n\r\n.map-social{\r\n  display:flex;\r\n  gap:10px;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-social a{\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:12px;\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-decoration:none;\r\n  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;\r\n}\r\n\r\n.map-social a:hover{\r\n  transform:translateY(-1px);\r\n  box-shadow:0 10px 20px rgba(0,0,0,.08);\r\n  border-color:rgba(24,119,242,.25);\r\n}\r\n\r\n.map-social svg{\r\n  width:20px;\r\n  height:20px;\r\n  fill:#111827;\r\n}\r\n\r\n\/* LIBRARY *\/\r\n.map-library{\r\n  margin-top:20px;\r\n}\r\n\r\n.map-table{\r\n  width:100%;\r\n  border-collapse:separate;\r\n  border-spacing:0;\r\n  overflow:hidden;\r\n  border:1px solid #e5e7eb;\r\n  border-radius:14px;\r\n  background:#fff;\r\n}\r\n\r\n.map-table th, .map-table td{\r\n  padding:12px 10px;\r\n  border-bottom:1px solid #eef2f7;\r\n  font-size:13px;\r\n  vertical-align:top;\r\n}\r\n\r\n.map-table th{\r\n  background:#fbfdff;\r\n  color:#111827;\r\n  font-weight:900;\r\n  text-align:left;\r\n}\r\n\r\n.map-table tr:last-child td{ border-bottom:none; }\r\n\r\n.map-tag{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:6px;\r\n  padding:4px 8px;\r\n  border-radius:999px;\r\n  font-size:12px;\r\n  font-weight:900;\r\n  border:1px solid rgba(29,78,216,.15);\r\n  background:#eef4ff;\r\n  color:#1d4ed8;\r\n}\r\n\r\n.map-tag.ok{\r\n  border-color:rgba(66,183,42,.2);\r\n  background:rgba(66,183,42,.12);\r\n  color:#14532d;\r\n}\r\n\r\n.map-actions-inline{\r\n  display:flex;\r\n  gap:8px;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-mini-btn{\r\n  padding:8px 10px;\r\n  border-radius:10px;\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n  cursor:pointer;\r\n  font-weight:900;\r\n  font-size:12px;\r\n}\r\n\r\n.map-mini-btn.primary{\r\n  border-color:rgba(24,119,242,.25);\r\n  background:#eef4ff;\r\n  color:#1d4ed8;\r\n}\r\n\r\n.map-mini-btn.danger{\r\n  border-color:rgba(220,38,38,.25);\r\n  background:rgba(220,38,38,.06);\r\n  color:#991b1b;\r\n}\r\n\r\n\/* MODALS *\/\r\n.map-modal{\r\n  position:fixed;\r\n  inset:0;\r\n  background:rgba(0,0,0,.6);\r\n  display:none;\r\n  align-items:center;\r\n  justify-content:center;\r\n  z-index:9999;\r\n  padding:18px;\r\n}\r\n\r\n.map-modal.active{display:flex;}\r\n\r\n.map-modal-content{\r\n  background:#fff;\r\n  max-width:900px;\r\n  width:100%;\r\n  border-radius:16px;\r\n  padding:22px;\r\n  box-shadow:0 20px 60px rgba(0,0,0,.25);\r\n  position:relative;\r\n}\r\n\r\n.map-modal-content.small{ max-width:520px; }\r\n\r\n.map-modal-close{\r\n  position:absolute;\r\n  top:10px;\r\n  right:10px;\r\n  width:34px;\r\n  height:34px;\r\n  border-radius:999px;\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n  cursor:pointer;\r\n  font-size:16px;\r\n  font-weight:900;\r\n}\r\n\r\n.map-badge{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  padding:6px 10px;\r\n  border-radius:999px;\r\n  font-size:12px;\r\n  background:#eef4ff;\r\n  color:#1d4ed8;\r\n  border:1px solid rgba(29,78,216,.15);\r\n  font-weight:900;\r\n}\r\n\r\n.map-preview-grid{\r\n  display:grid;\r\n  grid-template-columns:1.2fr .8fr;\r\n  gap:16px;\r\n}\r\n\r\n.map-preview-box{\r\n  border:1px solid #eef2ff;\r\n  border-radius:14px;\r\n  padding:14px;\r\n  background:#fbfdff;\r\n}\r\n\r\n.map-preview-title{\r\n  font-size:18px;\r\n  font-weight:900;\r\n  margin:0 0 6px;\r\n}\r\n\r\n.map-preview-desc{\r\n  margin:0;\r\n  color:#374151;\r\n  line-height:1.4;\r\n  font-size:14px;\r\n  white-space:pre-wrap;\r\n}\r\n\r\n.map-kv{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:10px;\r\n  margin-top:12px;\r\n}\r\n\r\n.map-kv .item{\r\n  background:#fff;\r\n  border:1px solid #e5e7eb;\r\n  border-radius:12px;\r\n  padding:10px;\r\n}\r\n\r\n.map-kv .item .k{ font-size:12px; color:var(--muted); margin-bottom:4px; }\r\n.map-kv .item .v{ font-weight:900; color:#111827; }\r\n\r\n.map-gallery{\r\n  display:grid;\r\n  grid-template-columns:1fr;\r\n  gap:10px;\r\n}\r\n\r\n.map-gallery-main{\r\n  width:100%;\r\n  height:260px;\r\n  border-radius:14px;\r\n  border:1px solid #e5e7eb;\r\n  background:#f3f4f6;\r\n  overflow:hidden;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:var(--muted);\r\n  font-weight:900;\r\n}\r\n\r\n.map-gallery-main img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n}\r\n\r\n.map-gallery-row{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  gap:8px;\r\n}\r\n\r\n.map-gallery-row img{\r\n  width:100%;\r\n  height:54px;\r\n  border-radius:10px;\r\n  object-fit:cover;\r\n  border:1px solid #e5e7eb;\r\n  cursor:pointer;\r\n}\r\n\r\n.map-modal-footer{\r\n  display:flex;\r\n  justify-content:flex-end;\r\n  gap:10px;\r\n  margin-top:16px;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.map-card-icons{\r\n  display:flex;\r\n  gap:10px;\r\n  margin:8px 0 10px;\r\n  align-items:center;\r\n}\r\n\r\n.map-card-icons img{height:28px;}\r\n\r\n.map-pay-btn{\r\n  width:100%;\r\n  background:var(--secondary);\r\n  color:#fff;\r\n  border:none;\r\n  padding:14px;\r\n  border-radius:12px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  margin-top:10px;\r\n}\r\n\r\n.map-pay-btn:disabled{ opacity:.7; cursor:not-allowed; }\r\n\r\n.map-toast{\r\n  display:none;\r\n  margin-top:12px;\r\n  padding:10px 12px;\r\n  border-radius:12px;\r\n  font-size:13px;\r\n  background:rgba(66,183,42,.12);\r\n  border:1px solid rgba(66,183,42,.3);\r\n  color:#14532d;\r\n}\r\n\r\n\/* Launching *\/\r\n.map-progress{\r\n  width:100%;\r\n  height:12px;\r\n  border-radius:999px;\r\n  background:#eef2ff;\r\n  overflow:hidden;\r\n  border:1px solid rgba(29,78,216,.12);\r\n}\r\n\r\n.map-progress > div{\r\n  height:100%;\r\n  width:0%;\r\n  background:linear-gradient(90deg,var(--primary),var(--secondary));\r\n  border-radius:999px;\r\n  transition:width .18s ease;\r\n}\r\n\r\n.map-steps{\r\n  margin-top:14px;\r\n  display:grid;\r\n  gap:8px;\r\n}\r\n\r\n.map-step{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:10px 12px;\r\n  border-radius:12px;\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n}\r\n\r\n.map-dot{\r\n  width:12px;\r\n  height:12px;\r\n  border-radius:999px;\r\n  background:#d1d5db;\r\n}\r\n\r\n.map-step.active .map-dot{\r\n  background:var(--warning);\r\n  box-shadow:0 0 0 4px rgba(245,158,11,.18);\r\n}\r\n\r\n.map-step.done .map-dot{\r\n  background:var(--secondary);\r\n  box-shadow:0 0 0 4px rgba(66,183,42,.16);\r\n}\r\n\r\n.map-spinner{\r\n  width:18px;\r\n  height:18px;\r\n  border-radius:999px;\r\n  border:2px solid rgba(24,119,242,.18);\r\n  border-top-color:var(--primary);\r\n  animation:spin .85s linear infinite;\r\n  display:inline-block;\r\n  vertical-align:middle;\r\n  margin-right:8px;\r\n}\r\n\r\n@keyframes spin{to{transform:rotate(360deg);}}\r\n\r\n\/* Sponsored Post Preview *\/\r\n.sp-card{\r\n  max-width:520px;\r\n  margin:0 auto;\r\n  background:#fff;\r\n  border:1px solid #e5e7eb;\r\n  border-radius:16px;\r\n  overflow:hidden;\r\n  box-shadow:0 14px 40px rgba(0,0,0,.12);\r\n}\r\n\r\n.sp-top{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  padding:14px 14px 10px;\r\n}\r\n\r\n.sp-avatar{\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:999px;\r\n  background:linear-gradient(135deg,var(--primary),var(--secondary));\r\n}\r\n\r\n.sp-meta{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:2px;\r\n}\r\n\r\n.sp-name{\r\n  font-weight:900;\r\n  color:#111827;\r\n  font-size:14px;\r\n}\r\n\r\n.sp-sub{\r\n  font-size:12px;\r\n  color:var(--muted);\r\n}\r\n\r\n.sp-sub b{ color:#111827; }\r\n\r\n.sp-media{\r\n  width:100%;\r\n  height:300px;\r\n  background:#f3f4f6;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:var(--muted);\r\n  font-weight:900;\r\n  overflow:hidden;\r\n}\r\n\r\n.sp-media img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n}\r\n\r\n.sp-thumbs{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  gap:8px;\r\n  padding:10px 14px 0;\r\n}\r\n\r\n.sp-thumbs img{\r\n  width:100%;\r\n  height:54px;\r\n  object-fit:cover;\r\n  border-radius:10px;\r\n  border:1px solid #e5e7eb;\r\n  cursor:pointer;\r\n}\r\n\r\n.sp-body{\r\n  padding:12px 14px 14px;\r\n}\r\n\r\n.sp-title{\r\n  font-weight:900;\r\n  font-size:16px;\r\n  color:#111827;\r\n  margin:0 0 6px;\r\n}\r\n\r\n.sp-desc{\r\n  margin:0;\r\n  color:#374151;\r\n  font-size:14px;\r\n  line-height:1.45;\r\n  white-space:pre-wrap;\r\n}\r\n\r\n.sp-cta{\r\n  display:flex;\r\n  gap:10px;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  margin-top:12px;\r\n  padding-top:12px;\r\n  border-top:1px solid #eef2f7;\r\n}\r\n\r\n.sp-cta .left{\r\n  font-size:12px;\r\n  color:var(--muted);\r\n}\r\n\r\n.sp-cta button{\r\n  background:var(--primary);\r\n  color:#fff;\r\n  border:none;\r\n  padding:10px 12px;\r\n  border-radius:12px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n}\r\n\r\n.sp-reactions{\r\n  display:flex;\r\n  gap:10px;\r\n  margin-top:10px;\r\n  font-size:12px;\r\n  color:var(--muted);\r\n}\r\n\r\n\/* Payment method tabs *\/\r\n.pm-tabs{\r\n  display:flex;\r\n  gap:8px;\r\n  flex-wrap:wrap;\r\n  margin-top:12px;\r\n}\r\n\r\n.pm-tab{\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n  color:#111827;\r\n  border-radius:12px;\r\n  padding:10px 12px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  font-size:13px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n}\r\n\r\n.pm-tab.active{\r\n  border-color:rgba(24,119,242,.25);\r\n  background:#eef4ff;\r\n  color:#1d4ed8;\r\n}\r\n\r\n.pm-pane{\r\n  display:none;\r\n  margin-top:12px;\r\n}\r\n\r\n.pm-pane.active{ display:block; }\r\n\r\n.pm-crypto-box{\r\n  border:1px dashed #cbd5e1;\r\n  background:#fbfdff;\r\n  border-radius:14px;\r\n  padding:12px;\r\n}\r\n\r\n.pm-addr{\r\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\r\n  font-size:12px;\r\n  word-break:break-all;\r\n  background:#fff;\r\n  border:1px solid #e5e7eb;\r\n  border-radius:12px;\r\n  padding:10px;\r\n  margin-top:8px;\r\n}\r\n\r\n.pm-copy{\r\n  margin-top:10px;\r\n  width:100%;\r\n  border:1px solid #e5e7eb;\r\n  background:#fff;\r\n  padding:10px 12px;\r\n  border-radius:12px;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n}\r\n\r\n.pm-check{\r\n  display:flex;\r\n  gap:10px;\r\n  align-items:flex-start;\r\n  margin-top:10px;\r\n  font-size:12px;\r\n  color:#374151;\r\n}\r\n\r\n.pm-check input{ margin-top:2px; }\r\n\r\n\/* Footer *\/\r\n.map-footer{\r\n  margin-top:18px;\r\n  text-align:center;\r\n  font-size:12px;\r\n  color:var(--muted);\r\n}\r\n.map-footer a{\r\n  color:#111827;\r\n  text-decoration:none;\r\n  font-weight:900;\r\n}\r\n.map-footer a:hover{ text-decoration:underline; }\r\n\r\n\/* Mobile *\/\r\n@media(max-width:900px){\r\n  .map-grid{grid-template-columns:1fr;}\r\n  .map-preview-grid{grid-template-columns:1fr;}\r\n  .map-gallery-row{grid-template-columns:repeat(4,1fr);}\r\n  .map-row{grid-template-columns:1fr;}\r\n}\r\n<\/style>\r\n\r\n<div id=\"mapDemoV3\">\r\n  <div class=\"map-header\">\r\n    <div>\r\n      <h2>Marketplace Ads Pro<\/h2>\r\n      <div class=\"map-note\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"map-actions\">\r\n     <button class=\"map-btn ghost\" id=\"link\" type=\"button\" onclick=\"document.location='https:\/\/marketplace-marketplace.com\/sponsored-offer.html'\" >Sponsored Advertisements on the Marketplace Platform<\/button>\r\n      <button class=\"map-btn ghost\" id=\"clearDraftBtn\" type=\"button\">Clear Draft<\/button>\r\n      <button class=\"map-btn secondary\" id=\"seeSponsoredPost\" type=\"button\">See Your Sponsored Post<\/button>\r\n      <button class=\"map-btn\" id=\"launchCampaign\" type=\"button\">Launch Campaign<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"map-grid\">\r\n    <!-- LEFT -->\r\n    <div class=\"map-card\">\r\n      <h3>Create Campaign<\/h3>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Campaign Title <span style=\"color:#dc2626\">*<\/span><\/label>\r\n        <input type=\"text\" id=\"campaignTitle\" placeholder=\"Summer Sale\">\r\n        <div class=\"map-error\" id=\"errTitle\">Campaign Title is required.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Description <span style=\"color:#dc2626\">*<\/span><\/label>\r\n        <textarea rows=\"3\" id=\"campaignDesc\" placeholder=\"Write a short description for your campaign...\"><\/textarea>\r\n        <div class=\"map-error\" id=\"errDesc\">Description is required.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Select Package<\/label>\r\n        <div class=\"map-packages\">\r\n          <div class=\"map-package active\" data-plan=\"Starter\" data-price=\"100\" data-days=\"10\">\r\n            <h4>Starter<\/h4>\r\n            <strong>$100<\/strong><br>\r\n            <small>10 days \u00b7 Basic reach<\/small>\r\n          <\/div>\r\n\r\n          <div class=\"map-package\" data-plan=\"Starter\" data-price=\"200\" data-days=\"20\">\r\n            <h4>Starter<\/h4>\r\n            <strong>$200<\/strong><br>\r\n            <small>20 days \u00b7 Better reach<\/small>\r\n          <\/div>\r\n\r\n          <div class=\"map-package\" data-plan=\"Starter\" data-price=\"500\" data-days=\"45\">\r\n            <h4>Starter<\/h4>\r\n            <strong>$500<\/strong><br>\r\n            <small>45 days \u00b7 Strong reach<\/small>\r\n          <\/div>\r\n\r\n          <div class=\"map-package\" data-plan=\"Growth\" data-price=\"1000\" data-days=\"30\">\r\n            <h4>Growth<\/h4>\r\n            <strong>$1000<\/strong><br>\r\n            <small>30 days \u00b7 High reach<\/small>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Targeting<\/label>\r\n        <div class=\"map-row\">\r\n          <div>\r\n            <label style=\"font-weight:900;font-size:12px;color:var(--muted);margin-bottom:6px;display:block;\">Objective<\/label>\r\n            <select id=\"objective\">\r\n              <option value=\"conversions\">Conversations<\/option>\r\n              <option value=\"traffic\">Traffic<\/option>\r\n              <option value=\"awareness\">Awareness<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div>\r\n            <label style=\"font-weight:900;font-size:12px;color:var(--muted);margin-bottom:6px;display:block;\">Location<\/label>\r\n            <select id=\"geo\">\r\n              <option value=\"national\">National<\/option>\r\n              <option value=\"local\">Local<\/option>\r\n              <option value=\"international\">International<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"map-row\" style=\"margin-top:12px;\">\r\n          <div>\r\n            <label style=\"font-weight:900;font-size:12px;color:var(--muted);margin-bottom:6px;display:block;\">Age<\/label>\r\n            <select id=\"age\">\r\n              <option value=\"25-34\">25\u201334<\/option>\r\n              <option value=\"18-24\">18\u201324<\/option>\r\n              <option value=\"35-44\">35\u201344<\/option>\r\n              <option value=\"45+\">45+<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div>\r\n            <label style=\"font-weight:900;font-size:12px;color:var(--muted);margin-bottom:6px;display:block;\">Interest<\/label>\r\n            <select id=\"interest\">\r\n              <option value=\"shopping\">Shopping<\/option>\r\n              <option value=\"fitness\">Fitness<\/option>\r\n              <option value=\"tech\">Technology<\/option>\r\n              <option value=\"travel\">Travel<\/option>\r\n              <option value=\"food\">Food & Drinks<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"map-mini\" style=\"margin-top:10px;\">\r\n          Targeting affects estimates (Reach\/Clicks\/Conversations + CPM\/CPC\/CPA).\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Budget<\/label>\r\n        <div class=\"map-budget\">\r\n          <div class=\"map-budget-top\">\r\n            <div class=\"map-pill\">Daily Budget: <span id=\"dailyBudgetLabel\">$10<\/span><\/div>\r\n            <div class=\"map-pill\">Total: <span id=\"totalBudgetLabel\">$100<\/span><\/div>\r\n          <\/div>\r\n          <input type=\"range\" id=\"dailyBudget\" min=\"3\" max=\"60\" step=\"1\" value=\"10\">\r\n          <div class=\"map-mini\">\r\n            Total Budget = Daily Budget \u00d7 Duration. Default matches the selected package price.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Upload Images<\/label>\r\n        <div class=\"map-upload\" id=\"dropZone\">\r\n          \ud83d\udce4 Drag & drop images or click\r\n          <input type=\"file\" id=\"fileInput\" multiple accept=\"image\/*\" hidden>\r\n        <\/div>\r\n        <div class=\"map-warn\" id=\"warnImages\">Tip: Upload at least 1 image for a more realistic preview.<\/div>\r\n        <div class=\"map-preview\" id=\"preview\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT -->\r\n    <div class=\"map-card\">\r\n      <h3>Preview Stats<\/h3>\r\n      <div class=\"map-stats\">\r\n        <div class=\"map-stat\">Reach<br><strong id=\"statReach\">21,600<\/strong><\/div>\r\n        <div class=\"map-stat\">Clicks<br><strong id=\"statClicks\">10,300<\/strong><\/div>\r\n        <div class=\"map-stat\">Spend<br><strong id=\"spend\">$100<\/strong><\/div>\r\n        <div class=\"map-stat\">Conversations<br><strong id=\"statConversations\">9,100<\/strong><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-metrics\">\r\n        <div class=\"map-metric\"><div class=\"k\">Estimated CPM<\/div><div class=\"v\" id=\"mCPM\">$4.76<\/div><\/div>\r\n        <div class=\"map-metric\"><div class=\"k\">Estimated CPC<\/div><div class=\"v\" id=\"mCPC\">$0.05<\/div><\/div>\r\n        <div class=\"map-metric\"><div class=\"k\">Estimated CPA<\/div><div class=\"v\" id=\"mCPA\">$0.62<\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-info\">Numbers change based on package, targeting and budget. (Simulation)<\/div>\r\n\r\n      <div class=\"map-social-wrap\">\r\n        <div class=\"map-social-title\">Platforms<\/div>\r\n        <div class=\"map-social\">\r\n          <a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook official website\" title=\"Facebook\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.5V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram official website\" title=\"Instagram\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3z\"\/><path d=\"M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z\"\/><path d=\"M17.5 6.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/x.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"X official website\" title=\"X\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.3-8.4L1 2h7l4.8 6.3L18.9 2zm-1.2 18h1.7L8.1 4H6.3l11.4 16z\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Pinterest official website\" title=\"Pinterest\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.7-7.2s-.4-.8-.4-2c0-1.9 1.1-3.3 2.5-3.3 1.2 0 1.7.9 1.7 2 0 1.2-.8 3-1.2 4.6-.3 1.3.6 2.3 1.9 2.3 2.3 0 4-2.9 4-6.3 0-2.6-1.7-4.6-5-4.6-3.6 0-5.8 2.7-5.8 5.6 0 1.1.3 1.8.7 2.4.2.2.2.3.1.6l-.3 1c-.1.3-.3.4-.6.3-1.2-.5-1.9-2-1.9-3.7 0-3.4 2.3-7.4 8.5-7.4 5 0 8.3 3.6 8.3 7.4 0 5.1-2.8 8.9-6.9 8.9-1.4 0-2.7-.8-3.1-1.7l-.8 3.1c-.3 1-1 2.4-1.5 3.2.9.3 1.8.4 2.8.4A10 10 0 0 0 12 2z\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"https:\/\/www.linkedin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn official website\" title=\"LinkedIn\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V23h-4V8.5z\"\/><path d=\"M8.5 8.5h3.8v2h.1c.5-1 1.9-2.1 3.9-2.1 4.2 0 5 2.8 5 6.4V23h-4v-6.7c0-1.6 0-3.7-2.3-3.7-2.3 0-2.7 1.7-2.7 3.6V23h-4V8.5z\"\/><\/svg>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Campaign Library -->\r\n  <div class=\"map-library map-card\" style=\"margin-top:20px;\">\r\n    <div style=\"display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\">\r\n      <h3 style=\"margin:0;\">Campaign Library<\/h3>\r\n      <div class=\"map-note\" style=\"margin:0;\">Stored in LocalStorage \u00b7 last 10 launches<\/div>\r\n    <\/div>\r\n\r\n    <div style=\"margin-top:12px; overflow:auto;\">\r\n      <table class=\"map-table\" aria-label=\"campaign library\">\r\n        <thead>\r\n          <tr>\r\n            <th style=\"min-width:220px;\">Title<\/th>\r\n            <th style=\"min-width:160px;\">Package<\/th>\r\n            <th style=\"min-width:120px;\">Budget<\/th>\r\n            <th style=\"min-width:160px;\">Targeting<\/th>\r\n            <th style=\"min-width:110px;\">Status<\/th>\r\n            <th style=\"min-width:170px;\">Launched<\/th>\r\n            <th style=\"min-width:220px;\">Actions<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"libraryBody\">\r\n          <tr><td colspan=\"7\" style=\"color:var(--muted);\">No launched campaigns yet. Launch one to see it here.<\/td><\/tr>\r\n        <\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- FOOTER EMAIL -->\r\n  <div class=\"map-footer\">\r\n    <a href=\"mailto:createsponsoredpost@marketplace-marketplace.com\">createsponsoredpost@marketplace-marketplace.com<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- PREVIEW MODAL -->\r\n<div class=\"map-modal\" id=\"previewModal\" aria-hidden=\"true\">\r\n  <div class=\"map-modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"previewTitle\">\r\n    <button class=\"map-modal-close\" type=\"button\" data-close=\"previewModal\">\u2715<\/button>\r\n\r\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;\">\r\n      <div>\r\n        <div class=\"map-badge\"><span>\ud83d\udc40<\/span> Campaign Preview<\/div>\r\n        <h3 id=\"previewTitle\" style=\"margin:10px 0 0;\">Review your campaign before payment<\/h3>\r\n      <\/div>\r\n      <div style=\"text-align:right;\">\r\n        <div style=\"font-weight:900;font-size:18px;\" id=\"previewTotal\">$100<\/div>\r\n        <div style=\"color:var(--muted);font-size:12px;\" id=\"previewPkg\">Starter ($100) \u00b7 10 days<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"map-preview-grid\" style=\"margin-top:14px;\">\r\n      <div class=\"map-preview-box\">\r\n        <div class=\"map-preview-title\" id=\"pvTitle\">Campaign Title<\/div>\r\n        <p class=\"map-preview-desc\" id=\"pvDesc\">Campaign description...<\/p>\r\n\r\n        <div class=\"map-kv\">\r\n          <div class=\"item\"><div class=\"k\">Package<\/div><div class=\"v\" id=\"pvPackage\">Starter ($100)<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Duration<\/div><div class=\"v\" id=\"pvDuration\">10 days<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Daily Budget<\/div><div class=\"v\" id=\"pvDaily\">$10<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Total Budget<\/div><div class=\"v\" id=\"pvSpend\">$100<\/div><\/div>\r\n\r\n          <div class=\"item\"><div class=\"k\">Objective<\/div><div class=\"v\" id=\"pvObj\">Conversations<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Audience<\/div><div class=\"v\" id=\"pvAud\">National \u00b7 25\u201334 \u00b7 Shopping<\/div><\/div>\r\n\r\n          <div class=\"item\"><div class=\"k\">Estimated Reach<\/div><div class=\"v\" id=\"pvReach\">21,600<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Estimated Clicks<\/div><div class=\"v\" id=\"pvClicks\">10,300<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">Estimated Conversations<\/div><div class=\"v\" id=\"pvConv\">9,100<\/div><\/div>\r\n          <div class=\"item\"><div class=\"k\">CPM \/ CPC \/ CPA<\/div><div class=\"v\" id=\"pvCosts\">$4.76 \/ $0.05 \/ $0.62<\/div><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"map-info\">Metrics are simulated.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-preview-box\">\r\n        <div style=\"font-weight:900;margin-bottom:10px;\">Creatives<\/div>\r\n\r\n        <div class=\"map-gallery\">\r\n          <div class=\"map-gallery-main\" id=\"galleryMain\">No images uploaded<\/div>\r\n          <div class=\"map-gallery-row\" id=\"galleryRow\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"map-modal-footer\">\r\n      <button class=\"map-btn ghost\" type=\"button\" data-close=\"previewModal\">Back to edit<\/button>\r\n      <button class=\"map-btn\" type=\"button\" id=\"proceedToPayment\">Proceed to payment<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- SPONSORED POST MODAL -->\r\n<div class=\"map-modal\" id=\"postModal\" aria-hidden=\"true\">\r\n  <div class=\"map-modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"postModalTitle\">\r\n    <button class=\"map-modal-close\" type=\"button\" data-close=\"postModal\">\u2715<\/button>\r\n\r\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;\">\r\n\r\n      <div>\r\n        <div class=\"map-badge\"><span>\ud83d\udce3<\/span> Sponsored Post Preview<\/div>\r\n        <h3 id=\"postModalTitle\" style=\"margin:10px 0 0;\">This is how your sponsored post will look<\/h3>\r\n      <\/div>\r\n      <div style=\"text-align:right;\">\r\n        <div style=\"font-weight:900;font-size:18px;\" id=\"postBudgetLabel\">$100<\/div>\r\n        <div style=\"color:var(--muted);font-size:12px;\" id=\"postMetaLabel\">Starter ($100) \u00b7 10 days<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div style=\"margin-top:14px;\">\r\n      <div class=\"sp-card\">\r\n        <div class=\"sp-top\">\r\n          <div class=\"sp-avatar\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"sp-meta\">\r\n            <div class=\"sp-name\" id=\"spPageName\">Marketplace Ads Pro<\/div>\r\n            <div class=\"sp-sub\"><b>Sponsored<\/b> \u00b7 <span id=\"spTime\">Just now<\/span> \u00b7 \ud83c\udf10<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sp-media\" id=\"spMainMedia\">No image<\/div>\r\n        <div class=\"sp-thumbs\" id=\"spThumbs\" style=\"display:none;\"><\/div>\r\n\r\n        <div class=\"sp-body\">\r\n          <div class=\"sp-title\" id=\"spTitle\">Campaign title<\/div>\r\n          <p class=\"sp-desc\" id=\"spDesc\">Campaign description<\/p>\r\n\r\n          <div class=\"sp-cta\">\r\n            <div class=\"left\" id=\"spSmallMeta\">Estimated performance preview<\/div>\r\n            <button class=\"map-btn\" type=\"button\" id=\"spProceedToPayment\">Proceed to payment<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"sp-reactions\" id=\"spReactions\">\ud83d\udc4d 0 \u00b7 \ud83d\udcac 0 \u00b7 \u2197 0<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"map-modal-footer\">\r\n      <button class=\"map-btn ghost\" type=\"button\" data-close=\"postModal\">Close<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- PAYMENT MODAL -->\r\n<div class=\"map-modal\" id=\"paymentModal\" aria-hidden=\"true\">\r\n  <div class=\"map-modal-content small\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"payTitle\">\r\n    <button class=\"map-modal-close\" type=\"button\" data-close=\"paymentModal\">\u2715<\/button>\r\n\r\n    <h3 id=\"payTitle\" style=\"margin:0;\">Pay $100<\/h3>\r\n    <div class=\"map-info\">(Card \/ Payoneer \/ Crypto)<\/div>\r\n\r\n    <div class=\"pm-tabs\" role=\"tablist\" aria-label=\"payment methods\">\r\n      <button class=\"pm-tab active\" type=\"button\" data-method=\"card\">\ud83d\udcb3 Card<\/button>\r\n      <button class=\"pm-tab\" type=\"button\" data-method=\"payoneer\">\ud83d\udfe0 Payoneer<\/button>\r\n      <button class=\"pm-tab\" type=\"button\" data-method=\"crypto\">\ud83e\ude99 Crypto<\/button>\r\n    <\/div>\r\n\r\n    <!-- CARD -->\r\n    <div class=\"pm-pane active\" id=\"pmCard\">\r\n      <div class=\"map-card-icons\">\r\n        <img decoding=\"async\" alt=\"Visa\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/f\/fe\/Visa_Inc._logo_%281992%E2%80%931999%29.svg\/250px-Visa_Inc._logo_%281992%E2%80%931999%29.svg.png\">\r\n        <img decoding=\"async\" alt=\"Mastercard\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2a\/Mastercard-logo.svg\">\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Card Number<\/label>\r\n        <input type=\"text\" id=\"cardNumber\" placeholder=\"1234 5678 9012 3456\" inputmode=\"numeric\" autocomplete=\"cc-number\">\r\n        <div class=\"map-error\" id=\"errCard\">Enter a valid card number (digits only).<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-row\">\r\n        <div class=\"map-field\" style=\"margin-bottom:0;\">\r\n          <label>Expiry<\/label>\r\n          <input type=\"text\" id=\"cardExpiry\" placeholder=\"MM \/ YY\" inputmode=\"numeric\" autocomplete=\"cc-exp\">\r\n          <div class=\"map-error\" id=\"errExpiry\">Enter a valid expiry date (MM\/YY) that is not expired.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"map-field\" style=\"margin-bottom:0;\">\r\n          <label>CVC<\/label>\r\n          <input type=\"text\" id=\"cardCvc\" placeholder=\"123\" inputmode=\"numeric\" autocomplete=\"cc-csc\">\r\n          <div class=\"map-error\" id=\"errCvc\">CVC must be 3\u20134 digits.<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- PAYONEER -->\r\n    <div class=\"pm-pane\" id=\"pmPayoneer\">\r\n      <div class=\"map-field\">\r\n        <label>Payoneer Email<\/label>\r\n        <input type=\"email\" id=\"payoneerEmail\" placeholder=\"name@company.com\" autocomplete=\"email\">\r\n        <div class=\"map-error\" id=\"errPayoneerEmail\">Enter a valid email address.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\">\r\n        <label>Payoneer Reference \/ Transaction ID (optional)<\/label>\r\n        <input type=\"text\" id=\"payoneerRef\" placeholder=\"e.g. PN-48291A\">\r\n        <div class=\"map-info\">Store a reference for your future backend integration.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pm-check\">\r\n        <input type=\"checkbox\" id=\"payoneerConfirm\">\r\n        <label for=\"payoneerConfirm\">\r\n          I confirm I will complete the Payoneer payment for <strong id=\"pmPayoneerAmount\">$100<\/strong> (simulation).\r\n        <\/label>\r\n      <\/div>\r\n      <div class=\"map-error\" id=\"errPayoneerConfirm\">Please confirm Payoneer payment.<\/div>\r\n    <\/div>\r\n\r\n    <!-- CRYPTO -->\r\n    <div class=\"pm-pane\" id=\"pmCrypto\">\r\n      <div class=\"pm-crypto-box\">\r\n        <div style=\"font-weight:900;\">Crypto Payment Address<\/div>\r\n        <div class=\"map-info\">Show address + collect a transaction hash for verification later.<\/div>\r\n\r\n        <div class=\"map-mini\"><strong>Amount:<\/strong> <span id=\"pmCryptoAmount\">$100<\/span> \u00b7 <strong>Network:<\/strong> EVM (e.g. Ethereum \/ compatible)<\/div>\r\n        <div class=\"pm-addr\" id=\"cryptoAddress\">0xF44551D7FF4a0D061c885Ca18DeCd1d53CbD2e44<\/div>\r\n        <button class=\"pm-copy\" type=\"button\" id=\"copyCrypto\">Copy Address<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"map-field\" style=\"margin-top:12px;\">\r\n        <label>Transaction Hash<\/label>\r\n        <input type=\"text\" id=\"cryptoTx\" placeholder=\"0x...\">\r\n        <div class=\"map-error\" id=\"errCryptoTx\">Enter a valid transaction hash (0x + 64 hex chars).<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pm-check\">\r\n        <input type=\"checkbox\" id=\"cryptoConfirm\">\r\n        <label for=\"cryptoConfirm\">\r\n          I confirm I sent <strong id=\"pmCryptoAmount2\">$100<\/strong> to the address above (simulation).\r\n        <\/label>\r\n      <\/div>\r\n      <div class=\"map-error\" id=\"errCryptoConfirm\">Please confirm the crypto payment.<\/div>\r\n    <\/div>\r\n\r\n    <button class=\"map-pay-btn\" id=\"payBtn\" type=\"button\">Pay $100<\/button>\r\n    <div class=\"map-toast\" id=\"payToast\">\u2705 Payment approved (simulation). Launching campaign\u2026<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- LAUNCHING MODAL -->\r\n<div class=\"map-modal\" id=\"launchModal\" aria-hidden=\"true\">\r\n  <div class=\"map-modal-content small\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"launchTitle\">\r\n    <button class=\"map-modal-close\" type=\"button\" data-close=\"launchModal\" id=\"launchCloseBtn\" style=\"display:none;\">\u2715<\/button>\r\n\r\n    <h3 id=\"launchTitle\" style=\"margin:0 0 8px;\">\r\n      <span class=\"map-spinner\" id=\"launchSpinner\"><\/span>\r\n      <span id=\"launchHeading\">Launching\u2026<\/span>\r\n    <\/h3>\r\n\r\n    <div>\r\n      <div class=\"map-progress\" aria-label=\"progress\">\r\n        <div id=\"progressBar\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-steps\">\r\n        <div class=\"map-step active\" id=\"step1\"><div class=\"map-dot\"><\/div><div><strong>Validating payment<\/strong><div style=\"font-size:12px;color:var(--muted);\">Final checks<\/div><\/div><\/div>\r\n        <div class=\"map-step\" id=\"step2\"><div class=\"map-dot\"><\/div><div><strong>Uploading creatives<\/strong><div style=\"font-size:12px;color:var(--muted);\">Preparing assets<\/div><\/div><\/div>\r\n        <div class=\"map-step\" id=\"step3\"><div class=\"map-dot\"><\/div><div><strong>Activating campaign<\/strong><div style=\"font-size:12px;color:var(--muted);\">Publishing to marketplace<\/div><\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"map-toast\" id=\"launchDone\">\u2705 Campaign launched successfully! (simulation)<\/div>\r\n\r\n      <div class=\"map-modal-footer\" style=\"justify-content:flex-end;margin-top:14px;\">\r\n        <button class=\"map-btn\" type=\"button\" id=\"doneBtn\" style=\"display:none;\">Done<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(() => {\r\n  const DRAFT_KEY = \"map_demo_draft_v3\";\r\n  const LIB_KEY   = \"map_demo_library_v3\";\r\n  const CRYPTO_ADDRESS = \"0xF44551D7FF4a0D061c885Ca18DeCd1d53CbD2e44\";\r\n\r\n  const el = (id) => document.getElementById(id);\r\n  const nfInt = new Intl.NumberFormat(\"en-US\");\r\n  const nf2 = new Intl.NumberFormat(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n\r\n  const clamp = (n, a, b) => Math.max(a, Math.min(b, n));\r\n  const safeJsonParse = (s) => { try { return JSON.parse(s); } catch { return null; } };\r\n\r\n  function openModal(id){\r\n    const m = el(id);\r\n    if(!m) return;\r\n    m.classList.add(\"active\");\r\n    m.setAttribute(\"aria-hidden\",\"false\");\r\n    document.body.style.overflow = \"hidden\";\r\n  }\r\n  function closeModal(id){\r\n    const m = el(id);\r\n    if(!m) return;\r\n    m.classList.remove(\"active\");\r\n    m.setAttribute(\"aria-hidden\",\"true\");\r\n    if(!document.querySelector(\".map-modal.active\")) document.body.style.overflow = \"\";\r\n  }\r\n\r\n  function setError(input, errEl, msg, show){\r\n    if(msg) errEl.textContent = msg;\r\n    if(show){\r\n      errEl.style.display=\"block\";\r\n      input && input.classList && input.classList.add(\"map-input-error\");\r\n    }else{\r\n      errEl.style.display=\"none\";\r\n      input && input.classList && input.classList.remove(\"map-input-error\");\r\n    }\r\n  }\r\n\r\n  \/\/ --- State ---\r\n  let selectedPlan = \"Starter\";     \r\n  let selectedTierPrice = 100;      \r\n  let durationDays = 10;\r\n\r\n    \/\/ FIXED Reach by package price (as you requested)\r\n  const reachByPrice = {\r\n    100: 21600,\r\n    200: 42500,\r\n    500: 110000,\r\n    1000: 220000\r\n  };\r\n\r\n  \/\/ FIXED Conversations by package price (base values at the package total)\r\n  const convByPrice = {\r\n    100: 9100,\r\n    200: 18500,\r\n    500: 42000,\r\n    1000: 102000\r\n  };\r\n\r\n  \/\/ FIXED Clicks by package price (base values at the package total)\r\n  const clickByPrice = {\r\n    100: 10300,\r\n    200: 20600,\r\n    500: 53200,\r\n    1000: 110000\r\n  };\r\n\r\n  \/\/ Baseline rates (per reach) for realism\r\n  \/\/ Starter baseline from old demo: 12000 reach -> 1120 clicks, 92 conversations\r\n  const starterRates = { clickRate: 1120\/12000, convRate: 92\/12000 };\r\n  \/\/ Growth baseline from old demo: 36000 reach -> 3800 clicks, 360 conversations\r\n  const growthRates  = { clickRate: 3800\/36000, convRate: 360\/36000 };\r\n\r\n  let images = []; \/\/ {id, dataUrl}\r\n\r\n  \/\/ Controls\r\n  const campaignTitle = el(\"campaignTitle\");\r\n  const campaignDesc  = el(\"campaignDesc\");\r\n  const errTitle      = el(\"errTitle\");\r\n  const errDesc       = el(\"errDesc\");\r\n\r\n  const objective = el(\"objective\");\r\n  const geo = el(\"geo\");\r\n  const age = el(\"age\");\r\n  const interest = el(\"interest\");\r\n\r\n  const dailyBudget = el(\"dailyBudget\");\r\n  const dailyBudgetLabel = el(\"dailyBudgetLabel\");\r\n  const totalBudgetLabel = el(\"totalBudgetLabel\");\r\n\r\n  const warnImages = el(\"warnImages\");\r\n  const previewGrid = el(\"preview\");\r\n  const dropZone = el(\"dropZone\");\r\n  const fileInput = el(\"fileInput\");\r\n\r\n  const statReach = el(\"statReach\");\r\n  const statClicks = el(\"statClicks\");\r\n  const statConversations = el(\"statConversations\");\r\n  const spend = el(\"spend\");\r\n  const mCPM = el(\"mCPM\");\r\n  const mCPC = el(\"mCPC\");\r\n  const mCPA = el(\"mCPA\");\r\n\r\n  const clearDraftBtn = el(\"clearDraftBtn\");\r\n  const launchBtn = el(\"launchCampaign\");\r\n  const seeSponsoredPostBtn = el(\"seeSponsoredPost\");\r\n\r\n  \/\/ Preview modal fields\r\n  const previewTotal = el(\"previewTotal\");\r\n  const previewPkg = el(\"previewPkg\");\r\n  const pvTitle = el(\"pvTitle\");\r\n  const pvDesc = el(\"pvDesc\");\r\n  const pvPackage = el(\"pvPackage\");\r\n  const pvDuration = el(\"pvDuration\");\r\n  const pvDaily = el(\"pvDaily\");\r\n  const pvSpend = el(\"pvSpend\");\r\n  const pvObj = el(\"pvObj\");\r\n  const pvAud = el(\"pvAud\");\r\n  const pvReach = el(\"pvReach\");\r\n  const pvClicks = el(\"pvClicks\");\r\n  const pvConv = el(\"pvConv\");\r\n  const pvCosts = el(\"pvCosts\");\r\n  const galleryMain = el(\"galleryMain\");\r\n  const galleryRow = el(\"galleryRow\");\r\n  const proceedToPayment = el(\"proceedToPayment\");\r\n  const spProceedToPayment = el(\"spProceedToPayment\");\r\n\r\n  \/\/ Sponsored post modal fields\r\n  const postBudgetLabel = el(\"postBudgetLabel\");\r\n  const postMetaLabel = el(\"postMetaLabel\");\r\n  const spMainMedia = el(\"spMainMedia\");\r\n  const spThumbs = el(\"spThumbs\");\r\n  const spTitle = el(\"spTitle\");\r\n  const spDesc = el(\"spDesc\");\r\n  const spSmallMeta = el(\"spSmallMeta\");\r\n  const spReactions = el(\"spReactions\");\r\n\r\n  \/\/ Payment modal\r\n  const payTitle = el(\"payTitle\");\r\n  const payBtn = el(\"payBtn\");\r\n  const payToast = el(\"payToast\");\r\n\r\n  \/\/ Payment method tabs + panes\r\n  const pmTabs = [...document.querySelectorAll(\".pm-tab\")];\r\n  const pmCard = el(\"pmCard\");\r\n  const pmPayoneer = el(\"pmPayoneer\");\r\n  const pmCrypto = el(\"pmCrypto\");\r\n\r\n  let paymentMethod = \"card\";\r\n\r\n  \/\/ Card inputs\r\n  const cardNumber = el(\"cardNumber\");\r\n  const cardExpiry = el(\"cardExpiry\");\r\n  const cardCvc = el(\"cardCvc\");\r\n  const errCard = el(\"errCard\");\r\n  const errExpiry = el(\"errExpiry\");\r\n  const errCvc = el(\"errCvc\");\r\n\r\n  \/\/ Payoneer inputs\r\n  const payoneerEmail = el(\"payoneerEmail\");\r\n  const payoneerRef = el(\"payoneerRef\");\r\n  const payoneerConfirm = el(\"payoneerConfirm\");\r\n  const errPayoneerEmail = el(\"errPayoneerEmail\");\r\n  const errPayoneerConfirm = el(\"errPayoneerConfirm\");\r\n  const pmPayoneerAmount = el(\"pmPayoneerAmount\");\r\n\r\n  \/\/ Crypto inputs\r\n  const cryptoAddress = el(\"cryptoAddress\");\r\n  const copyCrypto = el(\"copyCrypto\");\r\n  const cryptoTx = el(\"cryptoTx\");\r\n  const cryptoConfirm = el(\"cryptoConfirm\");\r\n  const errCryptoTx = el(\"errCryptoTx\");\r\n  const errCryptoConfirm = el(\"errCryptoConfirm\");\r\n  const pmCryptoAmount = el(\"pmCryptoAmount\");\r\n  const pmCryptoAmount2 = el(\"pmCryptoAmount2\");\r\n\r\n  \/\/ Launch modal\r\n  const launchHeading = el(\"launchHeading\");\r\n  const launchSpinner = el(\"launchSpinner\");\r\n  const progressBar = el(\"progressBar\");\r\n  const step1 = el(\"step1\");\r\n  const step2 = el(\"step2\");\r\n  const step3 = el(\"step3\");\r\n  const launchDone = el(\"launchDone\");\r\n  const doneBtn = el(\"doneBtn\");\r\n  const launchCloseBtn = el(\"launchCloseBtn\");\r\n\r\n  \/\/ Library\r\n  const libraryBody = el(\"libraryBody\");\r\n\r\n  cryptoAddress.textContent = CRYPTO_ADDRESS;\r\n\r\n  \/\/ --- Targeting multipliers (defaults are 1.00 so package reach matches exactly) ---\r\n  function multipliers(){\r\n    const obj = objective.value;\r\n    const objMul = {\r\n      conversions: { reach: 1.00, clicks: 1.00, conv: 1.00 },\r\n      traffic:     { reach: 1.05, clicks: 1.15, conv: 0.85 },\r\n      awareness:   { reach: 1.25, clicks: 0.75, conv: 0.60 }\r\n    }[obj] || { reach:1, clicks:1, conv:1 };\r\n\r\n    const g = geo.value;\r\n    const geoMul = {\r\n      local:         { reach: 0.80, clicks: 1.05, conv: 1.10 },\r\n      national:      { reach: 1.00, clicks: 1.00, conv: 1.00 },\r\n      international: { reach: 1.35, clicks: 0.95, conv: 0.85 }\r\n    }[g] || { reach:1, clicks:1, conv:1 };\r\n\r\n    const a = age.value;\r\n    const ageMul = {\r\n      \"25-34\": { reach: 1.00, clicks: 1.00, conv: 1.00 },\r\n      \"18-24\": { reach: 1.05, clicks: 1.12, conv: 0.90 },\r\n      \"35-44\": { reach: 0.95, clicks: 0.95, conv: 1.10 },\r\n      \"45+\":   { reach: 0.90, clicks: 0.82, conv: 0.95 }\r\n    }[a] || { reach:1, clicks:1, conv:1 };\r\n\r\n    const i = interest.value;\r\n    const intMul = {\r\n      shopping: { reach: 1.00, clicks: 1.00, conv: 1.00 },\r\n      fitness:  { reach: 0.95, clicks: 1.00, conv: 0.95 },\r\n      tech:     { reach: 1.05, clicks: 1.02, conv: 0.92 },\r\n      travel:   { reach: 1.10, clicks: 0.98, conv: 0.90 },\r\n      food:     { reach: 0.98, clicks: 1.04, conv: 1.00 }\r\n    }[i] || { reach:1, clicks:1, conv:1 };\r\n\r\n    return { objMul, geoMul, ageMul, intMul };\r\n  }\r\n\r\n  function setBudgetRange(){\r\n    if(selectedPlan === \"Starter\"){\r\n      dailyBudget.min = \"3\";\r\n      dailyBudget.max = \"60\";\r\n    }else{\r\n      dailyBudget.min = \"10\";\r\n      dailyBudget.max = \"120\";\r\n    }\r\n  }\r\n\r\n  function getDailyBudget(){ return Number(dailyBudget.value || 0); }\r\n  function getTotalBudget(){ return getDailyBudget() * durationDays; }\r\n\r\n  function pkgLabel(){\r\n    return `${selectedPlan} ($${selectedTierPrice})`;\r\n  }\r\n\r\n  \/\/ Compute estimates (reach fixed per package, then budget\/targeting influence)\r\n  function computeEstimates(){\r\n    const baseReach = reachByPrice[selectedTierPrice] || 12000;\r\n    const rates = (selectedPlan === \"Growth\") ? growthRates : starterRates;\r\n\r\n    \/\/ baseline at package total = selectedTierPrice\r\n    const total = Math.max(1, getTotalBudget());\r\n    const baseTotal = Math.max(1, selectedTierPrice);\r\n\r\n    \/\/ scale with budget (if user moves slider)\r\n    const budgetFactor = Math.pow(total \/ baseTotal, 0.90);\r\n\r\n    const { objMul, geoMul, ageMul, intMul } = multipliers();\r\n\r\n    let reach = baseReach * budgetFactor * objMul.reach * geoMul.reach * ageMul.reach * intMul.reach;\r\n    reach = Math.max(500, Math.round(reach));\r\n\r\n    \/\/ clicks proportional to reach using package-specific base ratios\r\n    \/\/ (so: $100\u219210,300 \u00b7 $200\u219220,600 \u00b7 $500\u219253,200 \u00b7 $1000\u2192110,000 at default settings)\r\n    const baseClicks = clickByPrice[selectedTierPrice];\r\n    const baseClickRate = (typeof baseClicks === \"number\" && baseReach > 0)\r\n      ? (baseClicks \/ baseReach)\r\n      : rates.clickRate;\r\n\r\n    let clicks = reach * baseClickRate * objMul.clicks * geoMul.clicks * ageMul.clicks * intMul.clicks;\r\n\r\n    \/\/ conversations proportional to reach using package-specific base ratios\r\n    \/\/ (so: $100\u21929,100 \u00b7 $200\u219218,500 \u00b7 $500\u219242,000 \u00b7 $1000\u2192102,000 at default settings)\r\n    const baseConv = convByPrice[selectedTierPrice];\r\n    const baseConvRate = (typeof baseConv === \"number\" && baseReach > 0)\r\n      ? (baseConv \/ baseReach)\r\n      : rates.convRate;\r\n\r\n    let conv = reach * baseConvRate * objMul.conv * geoMul.conv * ageMul.conv * intMul.conv;\r\n\r\n    clicks = Math.max(10, Math.round(clicks));\r\n    conv   = Math.max(1, Math.round(conv));\r\n\r\n    const cpm = (total \/ reach) * 1000;\r\n    const cpc = total \/ clicks;\r\n    const cpa = total \/ conv;\r\n\r\n    return { reach, clicks, conv, total, cpm, cpc, cpa };\r\n  }\r\n\r\n  function refreshUI(){\r\n    const daily = getDailyBudget();\r\n    const total = getTotalBudget();\r\n\r\n    dailyBudgetLabel.textContent = `$${daily}`;\r\n    totalBudgetLabel.textContent = `$${total}`;\r\n\r\n    const est = computeEstimates();\r\n\r\n    statReach.textContent = nfInt.format(est.reach);\r\n    statClicks.textContent = nfInt.format(est.clicks);\r\n    statConversations.textContent = nfInt.format(est.conv);\r\n    spend.textContent = `$${est.total}`;\r\n\r\n    mCPM.textContent = `$${nf2.format(est.cpm)}`;\r\n    mCPC.textContent = `$${nf2.format(est.cpc)}`;\r\n    mCPA.textContent = `$${nf2.format(est.cpa)}`;\r\n\r\n    warnImages.style.display = (images.length === 0) ? \"block\" : \"none\";\r\n  }\r\n\r\n  function setPackage(plan, price, days){\r\n    selectedPlan = plan;\r\n    selectedTierPrice = Number(price);\r\n    durationDays = Number(days);\r\n\r\n    document.querySelectorAll(\"#mapDemoV3 .map-package\").forEach(p => {\r\n      p.classList.toggle(\"active\", (p.dataset.plan === selectedPlan && Number(p.dataset.price) === selectedTierPrice));\r\n    });\r\n\r\n    setBudgetRange();\r\n\r\n    \/\/ Default daily budget so total matches package price\r\n    const defaultDaily = Math.max(Number(dailyBudget.min), Math.min(Number(dailyBudget.max), Math.round(selectedTierPrice \/ durationDays)));\r\n    dailyBudget.value = String(defaultDaily);\r\n\r\n    refreshUI();\r\n    scheduleSave();\r\n  }\r\n\r\n  document.querySelectorAll(\"#mapDemoV3 .map-package\").forEach(pkg => {\r\n    pkg.addEventListener(\"click\", () => setPackage(pkg.dataset.plan, pkg.dataset.price, pkg.dataset.days));\r\n  });\r\n\r\n  function renderThumbs(){\r\n    previewGrid.innerHTML = \"\";\r\n    images.forEach(imgObj => {\r\n      const wrap = document.createElement(\"div\");\r\n      wrap.className = \"map-thumb\";\r\n\r\n      const img = document.createElement(\"img\");\r\n      img.src = imgObj.dataUrl;\r\n      img.alt = \"creative\";\r\n\r\n      const btn = document.createElement(\"button\");\r\n      btn.type = \"button\";\r\n      btn.textContent = \"\u00d7\";\r\n      btn.addEventListener(\"click\", () => {\r\n        images = images.filter(x => x.id !== imgObj.id);\r\n        renderThumbs();\r\n        refreshUI();\r\n        scheduleSave();\r\n      });\r\n\r\n      wrap.appendChild(img);\r\n      wrap.appendChild(btn);\r\n      previewGrid.appendChild(wrap);\r\n    });\r\n\r\n    refreshUI();\r\n  }\r\n\r\n  function fileToThumbDataUrl(file, maxSize = 520, quality = 0.82){\r\n    return new Promise((resolve, reject) => {\r\n      const fr = new FileReader();\r\n      fr.onerror = reject;\r\n      fr.onload = () => {\r\n        const img = new Image();\r\n        img.onload = () => {\r\n          const w = img.width, h = img.height;\r\n          const scale = Math.min(1, maxSize \/ Math.max(w, h));\r\n          const cw = Math.max(1, Math.round(w * scale));\r\n          const ch = Math.max(1, Math.round(h * scale));\r\n\r\n          const canvas = document.createElement(\"canvas\");\r\n          canvas.width = cw;\r\n          canvas.height = ch;\r\n          const ctx = canvas.getContext(\"2d\");\r\n          ctx.drawImage(img, 0, 0, cw, ch);\r\n\r\n          resolve(canvas.toDataURL(\"image\/jpeg\", quality));\r\n        };\r\n        img.onerror = reject;\r\n        img.src = fr.result;\r\n      };\r\n      fr.readAsDataURL(file);\r\n    });\r\n  }\r\n\r\n  async function addFiles(fileList){\r\n    const files = [...fileList].filter(f => f && f.type && f.type.startsWith(\"image\/\"));\r\n    if(!files.length) return;\r\n\r\n    const remaining = Math.max(0, 6 - images.length);\r\n    const toAdd = files.slice(0, remaining);\r\n\r\n    for(const f of toAdd){\r\n      try{\r\n        const dataUrl = await fileToThumbDataUrl(f);\r\n        images.push({ id: \"img_\" + Math.random().toString(16).slice(2), dataUrl });\r\n      }catch(e){}\r\n    }\r\n    renderThumbs();\r\n    scheduleSave();\r\n  }\r\n\r\n  dropZone.addEventListener(\"click\", () => fileInput.click());\r\n  dropZone.addEventListener(\"dragover\", (e) => { e.preventDefault(); dropZone.classList.add(\"dragover\"); });\r\n  dropZone.addEventListener(\"dragleave\", () => dropZone.classList.remove(\"dragover\"));\r\n  dropZone.addEventListener(\"drop\", async (e) => {\r\n    e.preventDefault();\r\n    dropZone.classList.remove(\"dragover\");\r\n    await addFiles(e.dataTransfer.files);\r\n  });\r\n  fileInput.addEventListener(\"change\", async () => {\r\n    await addFiles(fileInput.files);\r\n    fileInput.value = \"\";\r\n  });\r\n\r\n  function validateCampaignFields(){\r\n    const t = campaignTitle.value.trim();\r\n    const d = campaignDesc.value.trim();\r\n\r\n    const okTitle = t.length > 0;\r\n    const okDesc  = d.length > 0;\r\n\r\n    setError(campaignTitle, errTitle, \"Campaign Title is required.\", !okTitle);\r\n    setError(campaignDesc, errDesc, \"Description is required.\", !okDesc);\r\n\r\n    return okTitle && okDesc;\r\n  }\r\n\r\n  \/\/ --- Draft autosave ---\r\n  let saveTimer = null;\r\n  function scheduleSave(){\r\n    clearTimeout(saveTimer);\r\n    saveTimer = setTimeout(saveDraft, 350);\r\n  }\r\n\r\n  function getDraftPayload(){\r\n    return {\r\n      title: campaignTitle.value.trim(),\r\n      desc: campaignDesc.value.trim(),\r\n      pkg: { plan: selectedPlan, price: selectedTierPrice, days: durationDays },\r\n      targeting: {\r\n        objective: objective.value,\r\n        geo: geo.value,\r\n        age: age.value,\r\n        interest: interest.value\r\n      },\r\n      budget: { daily: getDailyBudget() },\r\n      images: images.slice(0,6),\r\n      updatedAt: new Date().toISOString()\r\n    };\r\n  }\r\n\r\n  function saveDraft(){\r\n    try{ localStorage.setItem(DRAFT_KEY, JSON.stringify(getDraftPayload())); }catch(e){}\r\n  }\r\n\r\n  function loadDraft(){\r\n    let raw=null;\r\n    try{ raw = localStorage.getItem(DRAFT_KEY); }catch(e){}\r\n    if(!raw) return;\r\n\r\n    const data = safeJsonParse(raw);\r\n    if(!data) return;\r\n\r\n    if(typeof data.title===\"string\") campaignTitle.value = data.title;\r\n    if(typeof data.desc===\"string\") campaignDesc.value = data.desc;\r\n\r\n    if(data.pkg){\r\n      const plan = (data.pkg.plan === \"Growth\") ? \"Growth\" : \"Starter\";\r\n      const price = Number(data.pkg.price) || (plan===\"Growth\"?1000:100);\r\n      const days = Number(data.pkg.days) || (plan===\"Growth\"?30:10);\r\n      selectedPlan = plan;\r\n      selectedTierPrice = price;\r\n      durationDays = days;\r\n\r\n      document.querySelectorAll(\"#mapDemoV3 .map-package\").forEach(p => {\r\n        p.classList.toggle(\"active\", (p.dataset.plan === selectedPlan && Number(p.dataset.price) === selectedTierPrice));\r\n      });\r\n      setBudgetRange();\r\n    }\r\n\r\n    if(data.targeting){\r\n      if(data.targeting.objective) objective.value = data.targeting.objective;\r\n      if(data.targeting.geo) geo.value = data.targeting.geo;\r\n      if(data.targeting.age) age.value = data.targeting.age;\r\n      if(data.targeting.interest) interest.value = data.targeting.interest;\r\n    }\r\n\r\n    if(data.budget && typeof data.budget.daily === \"number\"){\r\n      dailyBudget.value = String(clamp(data.budget.daily, Number(dailyBudget.min), Number(dailyBudget.max)));\r\n    }else{\r\n      dailyBudget.value = String(Math.round(selectedTierPrice \/ durationDays));\r\n    }\r\n\r\n    if(Array.isArray(data.images)){\r\n      images = data.images\r\n        .filter(x => x && typeof x.dataUrl === \"string\")\r\n        .slice(0,6)\r\n        .map(x => ({ id: x.id || (\"img_\" + Math.random().toString(16).slice(2)), dataUrl: x.dataUrl }));\r\n    }\r\n\r\n    renderThumbs();\r\n    refreshUI();\r\n  }\r\n\r\n  function clearDraft(){\r\n    try{ localStorage.removeItem(DRAFT_KEY); }catch(e){}\r\n    campaignTitle.value = \"\";\r\n    campaignDesc.value = \"\";\r\n    images = [];\r\n    objective.value=\"conversions\";\r\n    geo.value=\"national\";\r\n    age.value=\"25-34\";\r\n    interest.value=\"shopping\";\r\n    setPackage(\"Starter\", 100, 10);\r\n    renderThumbs();\r\n    refreshUI();\r\n    scheduleSave();\r\n  }\r\n\r\n  campaignTitle.addEventListener(\"input\", () => { setError(campaignTitle, errTitle, \"\", false); scheduleSave(); });\r\n  campaignDesc.addEventListener(\"input\",  () => { setError(campaignDesc, errDesc, \"\", false); scheduleSave(); });\r\n\r\n  [objective, geo, age, interest].forEach(s => s.addEventListener(\"change\", () => { refreshUI(); scheduleSave(); }));\r\n  dailyBudget.addEventListener(\"input\", () => { refreshUI(); scheduleSave(); });\r\n\r\n  \/\/ --- Preview modal fill ---\r\n  function fillPreviewModal(){\r\n    const t = campaignTitle.value.trim() || \"Untitled campaign\";\r\n    const d = campaignDesc.value.trim() || \"No description provided.\";\r\n    const est = computeEstimates();\r\n\r\n    pvTitle.textContent = t;\r\n    pvDesc.textContent = d;\r\n\r\n    pvPackage.textContent = pkgLabel();\r\n    pvDuration.textContent = `${durationDays} days`;\r\n    pvDaily.textContent = `$${getDailyBudget()}`;\r\n    pvSpend.textContent = `$${est.total}`;\r\n\r\n    const objLabel = (objective.value === \"conversions\") ? \"Conversations\" : (objective.value.charAt(0).toUpperCase() + objective.value.slice(1));\r\n    pvObj.textContent = objLabel;\r\n    pvAud.textContent = `${geo.options[geo.selectedIndex].text} \u00b7 ${age.options[age.selectedIndex].text} \u00b7 ${interest.options[interest.selectedIndex].text}`;\r\n\r\n    pvReach.textContent = nfInt.format(est.reach);\r\n    pvClicks.textContent = nfInt.format(est.clicks);\r\n    pvConv.textContent = nfInt.format(est.conv);\r\n    pvCosts.textContent = `$${nf2.format(est.cpm)} \/ $${nf2.format(est.cpc)} \/ $${nf2.format(est.cpa)}`;\r\n\r\n    previewTotal.textContent = `$${est.total}`;\r\n    previewPkg.textContent = `${pkgLabel()} \u00b7 ${durationDays} days`;\r\n\r\n    galleryRow.innerHTML = \"\";\r\n    if(images.length === 0){\r\n      galleryMain.textContent = \"No images uploaded\";\r\n    }else{\r\n      const setMain = (src) => {\r\n        galleryMain.innerHTML = \"\";\r\n        const im = document.createElement(\"img\");\r\n        im.src = src;\r\n        im.alt = \"main creative\";\r\n        galleryMain.appendChild(im);\r\n      };\r\n      setMain(images[0].dataUrl);\r\n      images.forEach((imgObj) => {\r\n        const im = document.createElement(\"img\");\r\n        im.src = imgObj.dataUrl;\r\n        im.alt = \"creative\";\r\n        im.addEventListener(\"click\", () => setMain(imgObj.dataUrl));\r\n        galleryRow.appendChild(im);\r\n      });\r\n    }\r\n\r\n    saveDraft();\r\n  }\r\n\r\n  \/\/ --- Sponsored Post fill ---\r\n  function fillSponsoredPostModal(){\r\n    const t = campaignTitle.value.trim() || \"Untitled Sponsored Post\";\r\n    const d = campaignDesc.value.trim() || \"No description provided.\";\r\n    const est = computeEstimates();\r\n\r\n    spTitle.textContent = t;\r\n    spDesc.textContent = d;\r\n\r\n    postBudgetLabel.textContent = `$${est.total}`;\r\n    postMetaLabel.textContent = `${pkgLabel()} \u00b7 ${durationDays} days`;\r\n\r\n    spSmallMeta.textContent = `Est. Reach ${nfInt.format(est.reach)} \u00b7 Clicks ${nfInt.format(est.clicks)} \u00b7 Conversations ${nfInt.format(est.conv)}`;\r\n\r\n    const likes = Math.max(0, Math.round(est.clicks * 0.18));\r\n    const comments = Math.max(0, Math.round(est.conv * 0.35));\r\n    const shares = Math.max(0, Math.round(est.clicks * 0.04));\r\n    spReactions.textContent = `\ud83d\udc4d ${nfInt.format(likes)} \u00b7 \ud83d\udcac ${nfInt.format(comments)} \u00b7 \u2197 ${nfInt.format(shares)}`;\r\n\r\n    spThumbs.innerHTML = \"\";\r\n    if(images.length === 0){\r\n      spMainMedia.innerHTML = \"No image\";\r\n      spThumbs.style.display = \"none\";\r\n    }else{\r\n      const setMain = (src) => {\r\n        spMainMedia.innerHTML = \"\";\r\n        const im = document.createElement(\"img\");\r\n        im.src = src;\r\n        im.alt = \"sponsored creative\";\r\n        spMainMedia.appendChild(im);\r\n      };\r\n\r\n      setMain(images[0].dataUrl);\r\n\r\n      images.slice(0, 6).forEach(imgObj => {\r\n        const im = document.createElement(\"img\");\r\n        im.src = imgObj.dataUrl;\r\n        im.alt = \"thumb\";\r\n        im.addEventListener(\"click\", () => setMain(imgObj.dataUrl));\r\n        spThumbs.appendChild(im);\r\n      });\r\n\r\n      spThumbs.style.display = \"grid\";\r\n    }\r\n\r\n    saveDraft();\r\n  }\r\n\r\n  \/\/ Launch click -> preview\r\n  launchBtn.addEventListener(\"click\", () => {\r\n    if(!validateCampaignFields()){\r\n      if(!campaignTitle.value.trim()) campaignTitle.focus();\r\n      else campaignDesc.focus();\r\n      return;\r\n    }\r\n    fillPreviewModal();\r\n    openModal(\"previewModal\");\r\n  });\r\n\r\n  \/\/ Sponsored Post click\r\n  seeSponsoredPostBtn.addEventListener(\"click\", () => {\r\n    if(!validateCampaignFields()){\r\n      if(!campaignTitle.value.trim()) campaignTitle.focus();\r\n      else campaignDesc.focus();\r\n      return;\r\n    }\r\n    fillSponsoredPostModal();\r\n    openModal(\"postModal\");\r\n  });\r\n\r\n  \/\/ proceed to payment\r\n  proceedToPayment.addEventListener(\"click\", () => {\r\n    closeModal(\"previewModal\");\r\n    payToast.style.display=\"none\";\r\n    const est = computeEstimates();\r\n    payTitle.textContent = `Pay $${est.total} (${pkgLabel()})`;\r\n    payBtn.textContent = `Pay $${est.total}`;\r\n\r\n    \/\/ update amounts inside method panes\r\n    pmPayoneerAmount.textContent = `$${est.total}`;\r\n    pmCryptoAmount.textContent = `$${est.total}`;\r\n    pmCryptoAmount2.textContent = `$${est.total}`;\r\n\r\n    openModal(\"paymentModal\");\r\n  });\r\n\r\n  spProceedToPayment.addEventListener(\"click\", () => {\r\n    closeModal(\"postModal\");\r\n    payToast.style.display=\"none\";\r\n    const est = computeEstimates();\r\n    payTitle.textContent = `Pay $${est.total} (${pkgLabel()})`;\r\n    payBtn.textContent = `Pay $${est.total}`;\r\n\r\n    \/\/ update amounts inside method panes\r\n    pmPayoneerAmount.textContent = `$${est.total}`;\r\n    pmCryptoAmount.textContent = `$${est.total}`;\r\n    pmCryptoAmount2.textContent = `$${est.total}`;\r\n\r\n    openModal(\"paymentModal\");\r\n  });\r\n\r\n  \/\/ ---- Payment Method Switch ----\r\n  function setPaymentMethod(method){\r\n    paymentMethod = method;\r\n\r\n    pmTabs.forEach(t => t.classList.toggle(\"active\", t.dataset.method === method));\r\n\r\n    pmCard.classList.toggle(\"active\", method === \"card\");\r\n    pmPayoneer.classList.toggle(\"active\", method === \"payoneer\");\r\n    pmCrypto.classList.toggle(\"active\", method === \"crypto\");\r\n\r\n    \/\/ clear errors\r\n    setError(cardNumber, errCard, \"\", false);\r\n    setError(cardExpiry, errExpiry, \"\", false);\r\n    setError(cardCvc, errCvc, \"\", false);\r\n\r\n    setError(payoneerEmail, errPayoneerEmail, \"\", false);\r\n    setError(null, errPayoneerConfirm, \"\", false);\r\n\r\n    setError(cryptoTx, errCryptoTx, \"\", false);\r\n    setError(null, errCryptoConfirm, \"\", false);\r\n\r\n    payToast.style.display=\"none\";\r\n  }\r\n\r\n  pmTabs.forEach(t => t.addEventListener(\"click\", () => setPaymentMethod(t.dataset.method)));\r\n\r\n  \/\/ --- Payment validation helpers ---\r\n  function onlyDigits(str){ return (str || \"\").replace(\/\\D\/g, \"\"); }\r\n  function luhnCheck(numStr){\r\n    let sum=0, shouldDouble=false;\r\n    for(let i=numStr.length-1;i>=0;i--){\r\n      let digit=numStr.charCodeAt(i)-48;\r\n      if(digit<0||digit>9) return false;\r\n      if(shouldDouble){ digit*=2; if(digit>9) digit-=9; }\r\n      sum+=digit; shouldDouble=!shouldDouble;\r\n    }\r\n    return (sum%10)===0;\r\n  }\r\n\r\n  \/\/ Card formatting\r\n  cardNumber.addEventListener(\"input\", () => {\r\n    const d = onlyDigits(cardNumber.value).slice(0,19);\r\n    const parts = d.match(\/.{1,4}\/g) || [];\r\n    cardNumber.value = parts.join(\" \");\r\n    setError(cardNumber, errCard, \"\", false);\r\n  });\r\n  cardExpiry.addEventListener(\"input\", () => {\r\n    const d = onlyDigits(cardExpiry.value).slice(0,4);\r\n    if(d.length<=2) cardExpiry.value=d;\r\n    else cardExpiry.value=d.slice(0,2)+\" \/ \"+d.slice(2);\r\n    setError(cardExpiry, errExpiry, \"\", false);\r\n  });\r\n  cardCvc.addEventListener(\"input\", () => {\r\n    cardCvc.value = onlyDigits(cardCvc.value).slice(0,4);\r\n    setError(cardCvc, errCvc, \"\", false);\r\n  });\r\n\r\n  payoneerEmail.addEventListener(\"input\", () => setError(payoneerEmail, errPayoneerEmail, \"\", false));\r\n  cryptoTx.addEventListener(\"input\", () => setError(cryptoTx, errCryptoTx, \"\", false));\r\n\r\n  function validateCard(){\r\n    let ok=true;\r\n\r\n    const digits = onlyDigits(cardNumber.value);\r\n    const okCard = digits.length>=13 && digits.length<=19 && luhnCheck(digits);\r\n    setError(cardNumber, errCard, \"Enter a valid card number (digits only).\", !okCard);\r\n    ok = ok && okCard;\r\n\r\n    const exp = cardExpiry.value.replace(\/\\s\/g,\"\");\r\n    const match = exp.match(\/^(\\d{2})\\\/?(\\d{2})$\/);\r\n    let okExp=false;\r\n    if(match){\r\n      const mm=parseInt(match[1],10), yy=parseInt(match[2],10);\r\n      if(mm>=1 && mm<=12){\r\n        const now=new Date();\r\n        const curYY=now.getFullYear()%100;\r\n        const curMM=now.getMonth()+1;\r\n        if(yy>curYY || (yy===curYY && mm>=curMM)) okExp=true;\r\n      }\r\n    }\r\n    setError(cardExpiry, errExpiry, \"Enter a valid expiry date (MM\/YY) that is not expired.\", !okExp);\r\n    ok = ok && okExp;\r\n\r\n    const cvcDigits = onlyDigits(cardCvc.value);\r\n    const okCvc = (cvcDigits.length===3 || cvcDigits.length===4);\r\n    setError(cardCvc, errCvc, \"CVC must be 3\u20134 digits.\", !okCvc);\r\n    ok = ok && okCvc;\r\n\r\n    return ok;\r\n  }\r\n\r\n  function validatePayoneer(){\r\n    const email = (payoneerEmail.value || \"\").trim();\r\n    const emailOk = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n    setError(payoneerEmail, errPayoneerEmail, \"Enter a valid email address.\", !emailOk);\r\n\r\n    const confOk = !!payoneerConfirm.checked;\r\n    setError(null, errPayoneerConfirm, \"Please confirm Payoneer payment.\", !confOk);\r\n\r\n    return emailOk && confOk;\r\n  }\r\n\r\n  function validateCrypto(){\r\n    const tx = (cryptoTx.value || \"\").trim();\r\n    const txOk = \/^0x[a-fA-F0-9]{64}$\/.test(tx);\r\n    setError(cryptoTx, errCryptoTx, \"Enter a valid transaction hash (0x + 64 hex chars).\", !txOk);\r\n\r\n    const confOk = !!cryptoConfirm.checked;\r\n    setError(null, errCryptoConfirm, \"Please confirm the crypto payment.\", !confOk);\r\n\r\n    return txOk && confOk;\r\n  }\r\n\r\n  copyCrypto.addEventListener(\"click\", async () => {\r\n    const text = CRYPTO_ADDRESS;\r\n    try{\r\n      if(navigator.clipboard && navigator.clipboard.writeText){\r\n        await navigator.clipboard.writeText(text);\r\n      }else{\r\n        const ta = document.createElement(\"textarea\");\r\n        ta.value = text;\r\n        document.body.appendChild(ta);\r\n        ta.select();\r\n        document.execCommand(\"copy\");\r\n        document.body.removeChild(ta);\r\n      }\r\n      copyCrypto.textContent = \"Copied \u2705\";\r\n      setTimeout(() => copyCrypto.textContent = \"Copy Address\", 1200);\r\n    }catch(e){\r\n      copyCrypto.textContent = \"Copy failed\";\r\n      setTimeout(() => copyCrypto.textContent = \"Copy Address\", 1200);\r\n    }\r\n  });\r\n\r\n  \/\/ --- Launch simulation + library ---\r\n  function readLibrary(){\r\n    let raw=null;\r\n    try{ raw = localStorage.getItem(LIB_KEY); }catch(e){}\r\n    const data = raw ? safeJsonParse(raw) : [];\r\n    return Array.isArray(data) ? data : [];\r\n  }\r\n\r\n  function writeLibrary(list){\r\n    try{ localStorage.setItem(LIB_KEY, JSON.stringify(list)); }catch(e){}\r\n  }\r\n\r\n  function escapeHtml(s){\r\n    return String(s).replace(\/[&<>\"']\/g, m => ({ \"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\" }[m]));\r\n  }\r\n\r\n  function renderLibrary(){\r\n    const list = readLibrary();\r\n\r\n    if(!list.length){\r\n      libraryBody.innerHTML = `<tr><td colspan=\"7\" style=\"color:var(--muted);\">No launched campaigns yet. Launch one to see it here.<\/td><\/tr>`;\r\n      return;\r\n    }\r\n\r\n    libraryBody.innerHTML = \"\";\r\n    list.forEach(item => {\r\n      const tr = document.createElement(\"tr\");\r\n\r\n      const targetingText = `${item.targeting?.objective || \"\"} \u00b7 ${item.targeting?.geo || \"\"} \u00b7 ${item.targeting?.age || \"\"} \u00b7 ${item.targeting?.interest || \"\"}`.trim();\r\n      const launchedAt = item.launchedAt ? new Date(item.launchedAt) : null;\r\n      const launchedStr = launchedAt ? launchedAt.toLocaleString(\"en-GB\") : \"-\";\r\n\r\n      const pkgText = `${item.pkg?.plan || \"\"} ($${item.pkg?.price || 0})`;\r\n\r\n      tr.innerHTML = `\r\n        <td><strong>${escapeHtml(item.title || \"Untitled\")}<\/strong><div style=\"color:var(--muted);font-size:12px;margin-top:4px;\">${escapeHtml((item.desc||\"\").slice(0,70))}${(item.desc||\"\").length>70?\"\u2026\":\"\"}<\/div><\/td>\r\n        <td><span class=\"map-tag\">${escapeHtml(pkgText)}<\/span><div style=\"color:var(--muted);font-size:12px;margin-top:4px;\">${escapeHtml(String(item.pkg?.days || \"\"))} days<\/div><\/td>\r\n        <td><strong>$${escapeHtml(String(item.budget?.total || 0))}<\/strong><div style=\"color:var(--muted);font-size:12px;margin-top:4px;\">$${escapeHtml(String(item.budget?.daily || 0))}\/day<\/div><\/td>\r\n        <td style=\"text-transform:capitalize;\">${escapeHtml(targetingText)}<\/td>\r\n        <td><span class=\"map-tag ok\">Launched<\/span><\/td>\r\n        <td>${escapeHtml(launchedStr)}<\/td>\r\n        <td>\r\n          <div class=\"map-actions-inline\">\r\n            <button class=\"map-mini-btn primary\" type=\"button\" data-act=\"load\" data-id=\"${escapeHtml(item.id)}\">Load<\/button>\r\n            <button class=\"map-mini-btn\" type=\"button\" data-act=\"dup\" data-id=\"${escapeHtml(item.id)}\">Duplicate<\/button>\r\n            <button class=\"map-mini-btn danger\" type=\"button\" data-act=\"del\" data-id=\"${escapeHtml(item.id)}\">Delete<\/button>\r\n          <\/div>\r\n        <\/td>\r\n      `;\r\n      libraryBody.appendChild(tr);\r\n    });\r\n  }\r\n\r\n  function upsertLaunchToLibrary(entry){\r\n    const list = readLibrary();\r\n    list.unshift(entry);\r\n    writeLibrary(list.slice(0,10));\r\n    renderLibrary();\r\n  }\r\n\r\n  function deleteFromLibrary(id){\r\n    writeLibrary(readLibrary().filter(x => x && x.id !== id));\r\n    renderLibrary();\r\n  }\r\n\r\n  function loadCampaignToEditor(item, duplicate=false){\r\n    campaignTitle.value = duplicate ? (item.title + \" (Copy)\") : (item.title || \"\");\r\n    campaignDesc.value  = item.desc || \"\";\r\n\r\n    selectedPlan = (item.pkg && item.pkg.plan === \"Growth\") ? \"Growth\" : \"Starter\";\r\n    selectedTierPrice = Number(item.pkg?.price) || (selectedPlan===\"Growth\" ? 1000 : 100);\r\n    durationDays = Number(item.pkg?.days) || (selectedPlan===\"Growth\" ? 30 : 10);\r\n\r\n    document.querySelectorAll(\"#mapDemoV3 .map-package\").forEach(p => {\r\n      p.classList.toggle(\"active\", (p.dataset.plan === selectedPlan && Number(p.dataset.price) === selectedTierPrice));\r\n    });\r\n\r\n    setBudgetRange();\r\n\r\n    if(item.targeting){\r\n      if(item.targeting.objective) objective.value = item.targeting.objective;\r\n      if(item.targeting.geo) geo.value = item.targeting.geo;\r\n      if(item.targeting.age) age.value = item.targeting.age;\r\n      if(item.targeting.interest) interest.value = item.targeting.interest;\r\n    }\r\n\r\n    const d = item.budget && typeof item.budget.daily === \"number\" ? item.budget.daily : Math.round(selectedTierPrice \/ durationDays);\r\n    dailyBudget.value = String(clamp(d, Number(dailyBudget.min), Number(dailyBudget.max)));\r\n\r\n    images = Array.isArray(item.images) ? item.images.slice(0,6).map(x => ({ id: x.id || (\"img_\"+Math.random().toString(16).slice(2)), dataUrl: x.dataUrl })) : [];\r\n    renderThumbs();\r\n    refreshUI();\r\n    scheduleSave();\r\n\r\n    window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n  }\r\n\r\n  libraryBody.addEventListener(\"click\", (e) => {\r\n    const btn = e.target.closest(\"button[data-act]\");\r\n    if(!btn) return;\r\n    const act = btn.getAttribute(\"data-act\");\r\n    const id = btn.getAttribute(\"data-id\");\r\n    const list = readLibrary();\r\n    const item = list.find(x => x && x.id === id);\r\n    if(!item) return;\r\n\r\n    if(act === \"del\") deleteFromLibrary(id);\r\n    if(act === \"load\") loadCampaignToEditor(item, false);\r\n    if(act === \"dup\") loadCampaignToEditor(item, true);\r\n  });\r\n\r\n  let launchTimer=null;\r\n\r\n  function resetLaunchUI(){\r\n    progressBar.style.width=\"0%\";\r\n    launchDone.style.display=\"none\";\r\n    doneBtn.style.display=\"none\";\r\n    launchCloseBtn.style.display=\"none\";\r\n\r\n    step1.className=\"map-step active\";\r\n    step2.className=\"map-step\";\r\n    step3.className=\"map-step\";\r\n\r\n    launchSpinner.style.display=\"inline-block\";\r\n    launchHeading.textContent=\"Launching\u2026\";\r\n  }\r\n\r\n  function runLaunchSimulation(onDone){\r\n    resetLaunchUI();\r\n    openModal(\"launchModal\");\r\n    let p=0;\r\n\r\n    clearInterval(launchTimer);\r\n    launchTimer = setInterval(() => {\r\n      p = clamp(p + (Math.random()*6 + 2), 0, 100);\r\n      progressBar.style.width = p.toFixed(0) + \"%\";\r\n\r\n      if(p >= 25){\r\n        step1.classList.remove(\"active\");\r\n        step1.classList.add(\"done\");\r\n        step2.classList.add(\"active\");\r\n      }\r\n      if(p >= 65){\r\n        step2.classList.remove(\"active\");\r\n        step2.classList.add(\"done\");\r\n        step3.classList.add(\"active\");\r\n      }\r\n      if(p >= 100){\r\n        clearInterval(launchTimer);\r\n\r\n        step3.classList.remove(\"active\");\r\n        step3.classList.add(\"done\");\r\n\r\n        launchSpinner.style.display=\"none\";\r\n        launchHeading.textContent=\"Campaign launched!\";\r\n        launchDone.style.display=\"block\";\r\n        doneBtn.style.display=\"inline-flex\";\r\n        launchCloseBtn.style.display=\"inline-flex\";\r\n\r\n        if(typeof onDone === \"function\") onDone();\r\n      }\r\n    }, 140);\r\n  }\r\n\r\n  \/\/ Pay button\r\n  payBtn.addEventListener(\"click\", () => {\r\n    payToast.style.display=\"none\";\r\n\r\n    let valid = false;\r\n    if(paymentMethod === \"card\") valid = validateCard();\r\n    if(paymentMethod === \"payoneer\") valid = validatePayoneer();\r\n    if(paymentMethod === \"crypto\") valid = validateCrypto();\r\n\r\n    if(!valid) return;\r\n\r\n    payToast.style.display=\"block\";\r\n    payBtn.disabled=true;\r\n    payBtn.textContent=\"Processing\u2026\";\r\n\r\n    setTimeout(() => {\r\n      payBtn.disabled=false;\r\n      const est = computeEstimates();\r\n      payBtn.textContent = `Pay $${est.total}`;\r\n\r\n      closeModal(\"paymentModal\");\r\n\r\n      cardNumber.value=\"\"; cardExpiry.value=\"\"; cardCvc.value=\"\";\r\n      if(payoneerEmail) payoneerEmail.value=\"\";\r\n      if(payoneerRef) payoneerRef.value=\"\";\r\n      if(payoneerConfirm) payoneerConfirm.checked=false;\r\n      if(cryptoTx) cryptoTx.value=\"\";\r\n      if(cryptoConfirm) cryptoConfirm.checked=false;\r\n      setPaymentMethod(\"card\");\r\n\r\n      runLaunchSimulation(() => {\r\n        const est2 = computeEstimates();\r\n\r\n        const entry = {\r\n          id: \"c_\" + Date.now(),\r\n          title: campaignTitle.value.trim() || \"Untitled\",\r\n          desc: campaignDesc.value.trim() || \"\",\r\n          pkg: { plan: selectedPlan, price: selectedTierPrice, days: durationDays },\r\n          targeting: {\r\n            objective: objective.value,\r\n            geo: geo.value,\r\n            age: age.value,\r\n            interest: interest.value\r\n          },\r\n          budget: { daily: getDailyBudget(), total: est2.total },\r\n          results: { reach: est2.reach, clicks: est2.clicks, conversations: est2.conv, cpm: est2.cpm, cpc: est2.cpc, cpa: est2.cpa },\r\n          images: images.slice(0,6),\r\n          launchedAt: new Date().toISOString()\r\n        };\r\n\r\n        upsertLaunchToLibrary(entry);\r\n        saveDraft();\r\n      });\r\n    }, 650);\r\n  });\r\n\r\n  doneBtn.addEventListener(\"click\", () => closeModal(\"launchModal\"));\r\n\r\n  \/\/ Modal close\r\n  document.querySelectorAll(\".map-modal\").forEach(m => {\r\n    m.addEventListener(\"click\", (e) => { if(e.target === m) closeModal(m.id); });\r\n  });\r\n  document.querySelectorAll(\"[data-close]\").forEach(btn => {\r\n    btn.addEventListener(\"click\", () => closeModal(btn.getAttribute(\"data-close\")));\r\n  });\r\n  document.addEventListener(\"keydown\", (e) => {\r\n    if(e.key !== \"Escape\") return;\r\n    const openModals = [...document.querySelectorAll(\".map-modal.active\")];\r\n    if(openModals.length){\r\n      closeModal(openModals[openModals.length - 1].id);\r\n    }\r\n  });\r\n\r\n  clearDraftBtn.addEventListener(\"click\", () => clearDraft());\r\n\r\n  \/\/ Init default package\r\n  setPackage(\"Starter\", 100, 10);\r\n\r\n  \/\/ Load saved draft + library\r\n  loadDraft();\r\n  renderLibrary();\r\n  refreshUI();\r\n\r\n})();\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marketplace Ads Pro Sponsored Advertisements on the Marketplace Platform Clear Draft See Your Sponsored Post Launch Campaign Create Campaign Campaign Title * Campaign Title is required. Description * Description is required. Select Package Starter $100 10 days \u00b7 Basic reach Starter $200 20 days \u00b7 Better reach Starter $500 45 days \u00b7 Strong reach Growth [&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-19732","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/pages\/19732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/comments?post=19732"}],"version-history":[{"count":266,"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/pages\/19732\/revisions"}],"predecessor-version":[{"id":20345,"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/pages\/19732\/revisions\/20345"}],"wp:attachment":[{"href":"https:\/\/marketplace-marketplace.com\/index.php\/wp-json\/wp\/v2\/media?parent=19732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}