From d35b7657b06aec6656cfd1034fe685d407f426a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hern=C3=A2ni=20Marques?= <hernani+magikoopa@vecirex.net>
Date: Fri, 10 Jul 2026 19:57:42 +0200
Subject: [PATCH] merchant landing: shop pay popup CSS (DD 90 frame)

---
 configs/merchant-landing/shop-pay.css | 203 ++++++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 configs/merchant-landing/shop-pay.css

diff --git a/configs/merchant-landing/shop-pay.css b/configs/merchant-landing/shop-pay.css
new file mode 100644
index 0000000..7694e4c
--- /dev/null
+++ b/configs/merchant-landing/shop-pay.css
@@ -0,0 +1,203 @@
+/* GOA shop pay popup — DD 90 inspired QR frame + logo */
+.shop-item[data-product] {
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.12s, background 0.15s;
+}
+.shop-item[data-product]:hover,
+.shop-item[data-product]:focus-visible {
+  border-color: rgba(196, 181, 253, 0.75);
+  background: rgba(0, 0, 0, 0.4);
+  transform: translateY(-1px);
+  outline: none;
+}
+button.shop-item {
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.goa-pay-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(8, 6, 14, 0.75);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.goa-pay-modal.open {
+  display: flex;
+}
+.goa-pay-card {
+  position: relative;
+  background: rgba(36, 28, 48, 0.98);
+  border: 1px solid rgba(167, 139, 250, 0.45);
+  border-radius: 16px;
+  padding: 1.25rem 1.2rem 1.2rem;
+  max-width: 22rem;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+  max-height: 92vh;
+  overflow-y: auto;
+}
+.goa-pay-x {
+  position: absolute;
+  top: 0.45rem;
+  right: 0.55rem;
+  border: 0;
+  background: transparent;
+  color: #c4b5fd;
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.2rem 0.45rem;
+}
+.goa-pay-card h3 {
+  margin: 0 0 0.2rem;
+  font-size: 1.08rem;
+  color: #faf5ff;
+  padding-right: 1.5rem;
+}
+.goa-pay-amount {
+  margin: 0 0 0.85rem;
+  font-weight: 750;
+  color: #c4b5fd;
+  font-variant-numeric: tabular-nums;
+}
+/* DD 90 frame */
+.goa-pay-frame {
+  position: relative;
+  width: 16rem;
+  max-width: 100%;
+  margin: 0 auto 0.65rem;
+  padding: 6.25%; /* (100-87.5)/2 */
+  background: #f1f1f4;
+  border-radius: 8%;
+  box-sizing: border-box;
+}
+.goa-pay-qr {
+  background: #fff;
+  border-radius: 4px;
+  padding: 0;
+  line-height: 0;
+}
+.goa-pay-qr canvas,
+.goa-pay-qr img,
+.goa-pay-qr table {
+  display: block !important;
+  width: 100% !important;
+  height: auto !important;
+  margin: 0 auto;
+}
+.goa-pay-logo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 22%;
+  height: auto;
+  background: #fff;
+  padding: 2%;
+  border-radius: 4px;
+  pointer-events: none;
+  box-shadow: 0 0 0 2px #fff;
+}
+.goa-pay-hint {
+  margin: 0 0 0.75rem;
+  font-size: 0.82rem;
+  color: #b8a8c9;
+}
+.goa-pay-cta {
+  display: block;
+  text-decoration: none;
+  font-weight: 750;
+  padding: 0.65rem 1rem;
+  border-radius: 11px;
+  background: linear-gradient(135deg, #a78bfa, #6366f1);
+  color: #0f0a1a;
+  margin-bottom: 0.75rem;
+}
+.goa-pay-cta:hover {
+  filter: brightness(1.06);
+}
+.goa-pay-label {
+  margin: 0.55rem 0 0.2rem;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #b8a8c9;
+}
+.goa-pay-line {
+  margin: 0;
+  text-align: left;
+}
+.goa-pay-uri {
+  display: inline;
+  font-size: 0.65rem;
+  word-break: break-all;
+  color: #e9d5ff;
+  background: rgba(0, 0, 0, 0.35);
+  padding: 0.2rem 0.35rem;
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.goa-pay-https {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #93c5fd;
+  text-decoration: none;
+  white-space: nowrap;
+  margin-left: 0.25rem;
+}
+.goa-pay-https:hover {
+  text-decoration: underline;
+}
+.goa-pay-payto-link {
+  display: inline-block;
+  margin-top: 0.4rem;
+  font-size: 0.82rem;
+  font-weight: 650;
+  color: #93c5fd;
+}
+.goa-pay-close {
+  display: block;
+  width: 100%;
+  margin-top: 0.85rem;
+  border: 1px solid rgba(167, 139, 250, 0.45);
+  background: transparent;
+  color: #c4b5fd;
+  font-weight: 650;
+  padding: 0.5rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+/* Bank (gold/teal) overrides when body is bank palette */
+body .goa-pay-card.bank-theme,
+.goa-pay-modal.bank-theme .goa-pay-card {
+  background: rgba(42, 32, 24, 0.98);
+  border-color: rgba(232, 168, 56, 0.4);
+}
+.goa-pay-modal.bank-theme .goa-pay-amount {
+  color: #5eead4;
+}
+.goa-pay-modal.bank-theme .goa-pay-cta {
+  background: linear-gradient(135deg, #5eead4, #0d9488);
+  color: #042f2e;
+}
+.goa-pay-modal.bank-theme .goa-pay-uri {
+  color: #f0d090;
+}
+.goa-pay-modal.bank-theme .goa-pay-payto-link,
+.goa-pay-modal.bank-theme .goa-pay-x,
+.goa-pay-modal.bank-theme .goa-pay-close {
+  color: #e8c878;
+  border-color: rgba(232, 168, 56, 0.35);
+}