@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fredoka:wght@700&display=swap');
:root{--primary:#7548de;--primary-hover:#6034c8;--text:#332740;--muted:#756b80;--border:#e9e1f2}
*{box-sizing:border-box}
html{min-height:100%;background:#f3eef9}
body{margin:0;min-height:100vh;min-height:100svh;padding:40px 18px 100px;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(ellipse at 5% 0%,#dfd5ff 0,transparent 52%),radial-gradient(ellipse at 100% 50%,#ffdfed 0,transparent 50%),radial-gradient(ellipse at 15% 100%,#d9f3f0 0,transparent 48%),#f7f3fc;color:var(--text);font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}
.container{width:100%;max-width:410px;margin:0 auto;background:#fffffff5;border:1px solid #fff;border-radius:28px;padding:34px 28px 28px;text-align:center;box-shadow:0 22px 65px #57317812,0 3px 12px #57317805}
.container>br,.styled-form>br{display:none}
h3{font-family:'Fredoka','Poppins',sans-serif;font-size:32px;line-height:1.22;letter-spacing:.15px;font-weight:700;color:#ee83b4;-webkit-text-stroke:3.5px #291b2b;paint-order:stroke fill;text-shadow:0 2px 0 #291b2b;margin:0 0 20px;overflow-wrap:anywhere;text-wrap:balance}
p{font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 25px;font-weight:400;text-wrap:pretty}
.styled-form{width:100%;margin:0}
.input-field{display:block;width:100%;min-height:54px;padding:15px 17px;border:1px solid #e0d6ec;border-radius:14px;background:#faf8fd;color:var(--text);font:inherit;font-size:16px;margin:0;outline:none;box-shadow:inset 0 2px 4px #4d2f7003;transition:border-color .2s,box-shadow .2s,background .2s}
.input-field::placeholder{color:#91849f;font-size:14px}
.input-field:hover{border-color:#c6b5dc}
.input-field:focus{background:#fff;border-color:#9b79d0;box-shadow:0 0 0 4px #8d61cb14}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:53px;padding:15px 18px;margin-top:13px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(115deg,#8855e8,#6741ce);color:#fff;font:inherit;font-size:14px;font-weight:600;letter-spacing:.35px;text-decoration:none;cursor:pointer;line-height:1.5;box-shadow:0 7px 17px #7752c426,inset 0 1px 0 #ffffff24;transition:box-shadow .2s,transform .2s,filter .2s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 9px 20px #7752c434}
.btn:active{transform:translateY(1px);box-shadow:0 3px 8px #7752c420}
#shareBtn{margin-top:2px;background:linear-gradient(115deg,#168863,#12694f);box-shadow:0 7px 17px #32846124;letter-spacing:0}
.container>a[href*="play.google.com"]{width:100%;min-width:0!important;min-height:40px;margin-top:15px;padding:7px 20px!important;border:1px solid #ffffff18!important;border-radius:14px!important;background:linear-gradient(120deg,#3d344c,#2c2438)!important;box-shadow:0 4px 12px #30243912!important;transition:transform .2s,filter .2s!important}
.container>a[href*="play.google.com"]:hover{filter:brightness(1.15);transform:translateY(-1px)}
.language-select{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 6px;margin-top:27px;padding-top:23px;border-top:1px solid var(--border)}
.language-select a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border:1px solid #eee8f5;border-radius:9px;background:#faf8fc;font-size:11px;line-height:1.7;color:#75618e;text-decoration:none;transition:color .2s,background .2s,border-color .2s}
.language-select a:hover{background:#eee5f9;border-color:#d4c1ed;color:#654199}
.sticky-whatsapp{position:fixed;bottom:0;left:0;width:100%;padding:15px 16px;padding-bottom:max(15px,env(safe-area-inset-bottom));background:#f9f6fceF;border-top:1px solid #e4d9ee;text-align:center;z-index:10;box-shadow:0 -5px 22px #55327706;backdrop-filter:blur(14px)}
.whatsapp-link{color:#695181;text-decoration:none;display:block;width:fit-content;margin:auto;border-radius:8px}
.whatsapp-text h4{font-size:13px;font-weight:600;margin:0;line-height:1.5}
.whatsapp-link:hover{color:#422965}
.container>button[onclick="openSupportPopup()"]{margin-top:24px;background:#f6f0fb!important;color:#795a99!important;border:1px solid #e9dcf3!important;border-radius:12px!important;padding:11px 20px!important;font:inherit!important;font-size:12px!important;cursor:pointer;transition:background .2s,transform .2s}
.container>button[onclick="openSupportPopup()"]:hover{background:#eee2f7!important;transform:translateY(-1px)}
#supportPopup{z-index:100!important;background:#30213f80!important;backdrop-filter:blur(6px);overflow-y:auto}
#supportPopup>div{max-height:calc(100svh - 40px);overflow-y:auto;border:1px solid #fff;border-radius:24px!important;padding:34px 26px 27px!important;box-shadow:0 24px 80px #24183335;font-family:inherit!important;background:#fffdff!important}
#supportPopup h2{font-size:22px;color:#614482;line-height:1.45;margin:12px 0 18px;letter-spacing:-.5px}
#supportPopup p{font-size:14px!important;color:var(--muted)!important;line-height:1.8!important;margin-bottom:20px}
#supportPopup a{background:linear-gradient(115deg,#8855e8,#6741ce)!important;color:white!important;font-size:14px;border-radius:13px!important;box-shadow:0 6px 15px #7752c420}
#supportPopup button[onclick="closeSupportPopup()"]{width:34px;height:34px;display:grid;place-items:center;background:#f4eef9!important;border-radius:50%;color:#846999;line-height:1;font-size:24px!important}
a:focus-visible,button:focus-visible{outline:3px solid #aa8bd5;outline-offset:4px}
button,a,input{-webkit-tap-highlight-color:transparent}
@media(max-width:440px){body{padding:20px 14px 94px}.container{padding:29px 23px 24px;border-radius:24px}h3{font-size:30px;letter-spacing:.1px}p{font-size:13px;line-height:1.85}.language-select{gap:6px}.language-select a{padding:6px 9px}.sticky-whatsapp{padding-top:12px}}
@media(max-width:340px){.container{padding:26px 18px}h3{font-size:28px;-webkit-text-stroke:3px #291b2b}.whatsapp-text h4{font-size:12px}}
/* Keep motion subtle, with pauses between WhatsApp shakes. */
.styled-form .btn{width:68%;max-width:230px;min-width:150px;margin-top:18px;animation:submit-zoom 2.6s ease-in-out infinite;will-change:transform}
#shareBtn{animation:whatsapp-shake 3.8s ease-in-out infinite;will-change:transform}
.styled-form .btn:hover,.styled-form .btn:focus-visible,#shareBtn:hover,#shareBtn:focus-visible{animation-play-state:paused}
.styled-form .btn:active,#shareBtn:active{animation:none;transform:scale(.98)}
@keyframes submit-zoom{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes whatsapp-shake{0%,64%,100%{transform:translateX(0) rotate(0)}69%,79%{transform:translateX(-3px) rotate(-.6deg)}74%,84%{transform:translateX(3px) rotate(.6deg)}89%{transform:translateX(-1px) rotate(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.btn:hover,.btn:active,.container>a:hover,.container>button:hover{transform:none!important}}

.intro-message{font-weight:700;font-size:16px;line-height:1.8}

/* Match the submit button to the outlined pink title. */
.styled-form .btn{background:#ee83b4;color:#291b2b;border:2px solid #291b2b;box-shadow:0 4px 0 #291b2b,0 8px 18px #ee83b42b;font-weight:700}
.styled-form .btn:hover{background:#f49bc4;filter:none;box-shadow:0 4px 0 #291b2b,0 9px 20px #ee83b438}
.styled-form .btn:active{box-shadow:0 2px 0 #291b2b}

.share-instruction{font-size:16px;line-height:1.8}

/* A prominent channel action within the existing fixed footer. */
.sticky-whatsapp{padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:#faf7fcef}
.whatsapp-link{width:100%;max-width:378px;padding:13px 18px;border:1px solid #ffffff24;border-radius:16px;background:linear-gradient(115deg,#19875d,#116a4a);color:#fff;box-shadow:0 5px 15px #166c4d25,inset 0 1px 0 #ffffff24;transition:background .2s,box-shadow .2s,transform .2s}
.whatsapp-link-content{display:flex;align-items:center;justify-content:center;gap:11px}
.whatsapp-link img{flex-shrink:0;filter:drop-shadow(0 2px 3px #073d3820)}
.whatsapp-text h4{font-size:14px;font-weight:700;line-height:1.45;letter-spacing:.1px}
.whatsapp-link:hover{color:#fff;background:linear-gradient(115deg,#20986b,#177d59);box-shadow:0 7px 20px #166c4d35;transform:translateY(-2px)}
.whatsapp-link:active{transform:translateY(0);box-shadow:0 2px 6px #166c4d25}
.whatsapp-link:focus-visible{outline-color:#16835b;outline-offset:3px}
@media(max-width:340px){.whatsapp-link{padding:12px}.whatsapp-link-content{gap:8px}.whatsapp-text h4{font-size:12px}}
@media(prefers-reduced-motion:reduce){.whatsapp-link:hover,.whatsapp-link:active{transform:none}}

/* Start as a floating logo; reveal the channel label after scrolling. */
.sticky-whatsapp{left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));transform:none;width:auto;max-width:calc(100% - 28px);padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.sticky-whatsapp .whatsapp-link{width:56px;max-width:calc(100vw - 28px);height:56px;padding:13px;border-radius:28px;overflow:hidden;transition:width .4s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .2s,transform .2s}
.sticky-whatsapp .whatsapp-link-content{height:28px;gap:0;justify-content:center}
.sticky-whatsapp .whatsapp-text{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .2s,margin-inline-start .4s}
.sticky-whatsapp.is-expanded .whatsapp-link{width:350px}
.sticky-whatsapp.is-expanded .whatsapp-text{max-width:270px;opacity:1;margin-inline-start:11px;transition-delay:0s,.1s,0s}
@media(prefers-reduced-motion:reduce){.sticky-whatsapp .whatsapp-link,.sticky-whatsapp .whatsapp-text{transition:none!important}}
