/* Embryo Pay Popup: card button (middle right, every page but the payment page) + payment dialog. Colors and fonts come from Settings > Pay Popup. Timing uses golden-ratio steps (0.382, 0.618, 1.618, 2.618, 4.236, 6.854s). */
.epp *,.epp *::before,.epp *::after{box-sizing:border-box}
.epp-fab,.epp{--epp-grad:linear-gradient(110deg,var(--epp-a) 0%,var(--epp-b) 100%);--epp-line:rgba(255,255,255,.1);--epp-text:#f6f4ef;--epp-muted:rgba(246,244,239,.66);--epp-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- card button ---------- */
.epp-fab{position:fixed;right:20px;top:50%;z-index:99989;width:58px;height:58px;margin-top:-29px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--epp-ink) 70%,#fff 12%),var(--epp-ink) 70%);box-shadow:0 14px 34px -10px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--epp-a) 45%,transparent),0 0 26px -6px color-mix(in srgb,var(--epp-b) 70%,transparent);cursor:pointer;display:grid;place-items:center;transition:transform .618s var(--epp-ease),box-shadow .618s var(--epp-ease),opacity .382s;-webkit-tap-highlight-color:transparent;perspective:200px}
.epp-fab:hover,.epp-fab:focus-visible{transform:translate(-3px,-3px) scale(1.06);box-shadow:0 18px 40px -10px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--epp-a) 75%,transparent),0 0 40px -4px color-mix(in srgb,var(--epp-b) 90%,transparent)}
.epp-fab:focus-visible{outline:2px solid var(--epp-b);outline-offset:4px}
/* two soft rings breathing out, drifting slightly up and right */
.epp-fab__pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--epp-a);opacity:0;pointer-events:none;animation:eppPulse 4.236s var(--epp-ease) infinite}
.epp-fab__pulse--b{animation-delay:1.618s;border-color:var(--epp-b)}
@keyframes eppPulse{0%{transform:translate(0,0) scale(1);opacity:.7}100%{transform:translate(4px,-4px) scale(1.85);opacity:0}}
.epp-fab__card{position:relative;width:34px;height:34px;transform-style:preserve-3d;animation:eppFlip 6.854s var(--epp-ease) infinite}
.epp-fab__card svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--epp-b) 55%,transparent))}
.epp-fab__glint{opacity:0;stroke-dasharray:10 40;animation:eppGlint 4.236s ease-in-out infinite}
@keyframes eppFlip{0%,76%,100%{transform:rotateY(0)}88%{transform:rotateY(360deg)}}
@keyframes eppGlint{0%,100%{stroke-dashoffset:10;opacity:0}40%{opacity:.8}60%{stroke-dashoffset:-30;opacity:0}}
.epp-fab:hover .epp-fab__card{animation:none;transform:rotate(-8deg) translate(1px,-1px)}
.epp-fab.is-calm .epp-fab__pulse{display:none}
.epp-fab.is-calm .epp-fab__card{animation-duration:11.09s}
.epp-fab__tip{position:absolute;right:calc(100% + 14px);top:50%;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--epp-ink) 92%,transparent);border:1px solid var(--epp-line);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);white-space:nowrap;text-align:left;font:500 12px/1.2 var(--epp-body);color:var(--epp-muted);opacity:0;transform:translate(10px,-50%);pointer-events:none;transition:opacity .382s var(--epp-ease),transform .618s var(--epp-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.epp-fab__tip b{font:600 15px/1.1 var(--epp-head);color:var(--epp-text)}
.epp-fab:hover .epp-fab__tip,.epp-fab:focus-visible .epp-fab__tip{opacity:1;transform:translate(0,-50%)}
html.epp-open .epp-fab{transform:scale(.6);opacity:0;pointer-events:none}

/* ---------- dialog ---------- */
.epp{box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--epp-text);overflow:hidden auto;overscroll-behavior:contain}
.epp[open]{display:grid;place-items:center}
.epp::backdrop{background:rgba(6,5,10,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.epp__box{position:relative;width:min(500px,100%);padding:40px 40px 30px;border-radius:24px;text-align:center;background:radial-gradient(420px 260px at 85% 0%,color-mix(in srgb,var(--epp-a) 26%,transparent),transparent 65%),radial-gradient(380px 260px at 0% 100%,color-mix(in srgb,var(--epp-b) 18%,transparent),transparent 65%),var(--epp-ink);border:1px solid var(--epp-line);box-shadow:0 40px 120px -30px rgba(0,0,0,.85);font:400 15px/1.55 var(--epp-body)}
.epp__box::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--epp-grad);opacity:.8}
.epp[open] .epp__box{animation:eppIn .618s var(--epp-ease) both}
.epp.is-closing .epp__box{animation:eppOut .382s var(--epp-ease) both}
.epp.is-closing::backdrop{opacity:0;transition:opacity .382s}
@keyframes eppIn{from{opacity:0;transform:translate(-10px,26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes eppOut{to{opacity:0;transform:translate(8px,-14px) scale(.98)}}
.epp__view.is-in{animation:eppView .618s var(--epp-ease) both}
@keyframes eppView{from{opacity:0;transform:translateY(12px)}}
.epp__x{position:absolute;top:16px;right:16px;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--epp-line);background:rgba(255,255,255,.04);color:var(--epp-text);display:grid;place-items:center;cursor:pointer;transition:transform .618s var(--epp-ease),background .382s,border-color .382s}
.epp__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.epp__x:hover,.epp__x:focus-visible{transform:rotate(90deg);background:color-mix(in srgb,var(--epp-b) 18%,transparent);border-color:color-mix(in srgb,var(--epp-b) 55%,transparent)}
/* receipt + card: the card floats up and to the right, the check mark pops in */
.epp__art{width:120px;margin:-6px auto 8px}
.epp__art svg{display:block;width:100%;height:auto;overflow:visible}
.epp__receipt{animation:eppFloat 6.854s ease-in-out infinite alternate}
.epp__cardart{animation:eppCard 4.236s var(--epp-ease) infinite alternate}
.epp__check{transform-origin:92px 22px;animation:eppCheck 4.236s var(--epp-ease) infinite}
.epp__check path{stroke-dasharray:20;animation:eppDraw 4.236s var(--epp-ease) infinite}
@keyframes eppFloat{to{transform:translate(1px,-3px)}}
@keyframes eppCard{from{transform:translate(-4px,4px) rotate(-3deg)}to{transform:translate(3px,-4px) rotate(2deg)}}
@keyframes eppCheck{0%,20%{transform:scale(.4);opacity:0}38%,85%{transform:scale(1);opacity:1}100%{transform:scale(1) translate(2px,-2px);opacity:0}}
@keyframes eppDraw{0%,32%{stroke-dashoffset:20}52%,100%{stroke-dashoffset:0}}
.epp .epp__eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;padding:0;font:600 12px/1 var(--epp-body);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--epp-b) 60%,#fff)}
.epp__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--epp-b);box-shadow:0 0 10px var(--epp-b);animation:eppDot 2.618s ease-in-out infinite}
@keyframes eppDot{50%{opacity:.35}}
.epp .epp__title{margin:0;padding:0;font:600 clamp(32px,4.6vw,44px)/1.04 var(--epp-head);letter-spacing:-.02em;color:var(--epp-text)}
.epp__title em{font:italic 400 1.08em/1 var(--epp-serif);letter-spacing:0;padding-right:.06em;background:var(--epp-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:eppShift 6.854s ease-in-out infinite alternate}
@keyframes eppShift{to{background-position:100% 0}}
.epp .epp__lead{margin:14px auto 24px;padding:0;max-width:390px;color:var(--epp-muted);font-size:16px;line-height:1.6}
.epp .epp__go{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 24px;border-radius:999px;background:var(--epp-grad);background-size:160% 100%;color:#fff !important;font:700 16px/1 var(--epp-body);text-decoration:none !important;box-shadow:0 22px 50px -18px color-mix(in srgb,var(--epp-b) 85%,transparent);transition:transform .618s var(--epp-ease),box-shadow .618s var(--epp-ease);animation:eppBtn 6.854s ease-in-out infinite alternate}
.epp .epp__go span{transition:transform .618s var(--epp-ease)}
.epp .epp__go:hover,.epp .epp__go:focus-visible{transform:translate(2px,-3px);box-shadow:0 30px 60px -20px color-mix(in srgb,var(--epp-b) 100%,transparent)}
.epp .epp__go:hover span{transform:translate(3px,-3px)}
.epp .epp__go:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes eppBtn{to{background-position:100% 0}}
.epp__later{display:inline-block;margin:14px 0 0;padding:6px 10px;border:0;background:none;color:var(--epp-muted);font:500 13.5px/1.2 var(--epp-body);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(246,244,239,.3);text-underline-offset:4px;transition:color .382s,text-decoration-color .382s}
.epp__later:hover,.epp__later:focus-visible{color:var(--epp-text);text-decoration-color:var(--epp-b)}
html.epp-open,html.epp-open body{overflow:hidden}

@media (max-width:640px){
	.epp-fab{right:12px;width:48px;height:48px;margin-top:-24px}
	.epp-fab__card{width:28px;height:28px}
	.epp-fab__tip{display:none}
	.epp{padding:12px}
	.epp__box{padding:34px 20px 22px;border-radius:20px}
	.epp__box::before{left:20px;right:20px}
	.epp__x{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
	.epp-fab__pulse{display:none}
	.epp-fab__card,.epp-fab__glint,.epp__receipt,.epp__cardart,.epp__check,.epp__check path,.epp__eyebrow i,.epp__title em,.epp .epp__go{animation:none}
	.epp[open] .epp__box,.epp.is-closing .epp__box,.epp__view.is-in{animation:none}
	.epp-fab,.epp__x,.epp .epp__go,.epp .epp__go span{transition:none}
}