/* Qget merchant sign-in — espresso, cream and copper */
:root{--copper:#c88a57;--copper-2:#e2b07e;--copper-3:#9a6238;--cream:#f5ede0;--esp:#0e0b09;--esp-2:#17120e;--ease:cubic-bezier(.2,.8,.2,1);
  --font:"IBM Plex Sans Arabic","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Reem Kufi","IBM Plex Sans Arabic",serif;--latin:"Manrope","IBM Plex Sans Arabic",sans-serif}
[data-theme=dark]{--bg:#0e0b09;--panel:rgb(30 23 18/.42);--panel-solid:#1a1511;--ink:#f5ede0;--muted:#b8a996;--faint:#7d7062;--line:rgb(245 237 224/.12);--field:rgb(245 237 224/.06);--field-focus:rgb(245 237 224/.1);--shadow:0 40px 90px -40px rgb(0 0 0/.9)}
[data-theme=light]{--bg:#f6f0e6;--panel:rgb(255 252 247/.5);--panel-solid:#fffcf7;--ink:#1d1611;--muted:#6f6355;--faint:#a39684;--line:rgb(29 22 17/.12);--field:rgb(255 255 255/.7);--field-focus:#fff;--shadow:0 40px 90px -46px rgb(80 50 20/.45)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
button,input{font:inherit;color:inherit}
.lux{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid}

/* ── animated background ── */
.lux-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#24180f 0%,var(--esp) 60%)}
[data-theme=light] .lux-bg{background:radial-gradient(120% 90% at 50% 0%,#fff8ee 0%,#efe4d3 70%)}
.lux-bg i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.75;will-change:transform}
.lux-bg i:nth-child(1){width:52vmax;height:52vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#b8743f,transparent 68%);animation:blobA 26s ease-in-out infinite alternate}
.lux-bg i:nth-child(2){width:46vmax;height:46vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(circle,#7a4422,transparent 68%);animation:blobB 32s ease-in-out infinite alternate}
.lux-bg i:nth-child(3){width:30vmax;height:30vmax;left:55%;top:8%;background:radial-gradient(circle,#e2b07e,transparent 70%);opacity:.38;animation:blobC 22s ease-in-out infinite alternate}
.lux-bg i:nth-child(4){width:26vmax;height:26vmax;left:12%;bottom:4%;background:radial-gradient(circle,#c88a57,transparent 70%);opacity:.35;animation:blobD 28s ease-in-out infinite alternate}
[data-theme=light] .lux-bg i{opacity:.45}[data-theme=light] .lux-bg i:nth-child(2){background:radial-gradient(circle,#d9a46f,transparent 68%)}
@keyframes blobA{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes blobB{to{transform:translate(-16vmax,-12vmax) scale(1.1)}}
@keyframes blobC{to{transform:translate(-22vmax,26vmax) scale(.85)}}
@keyframes blobD{to{transform:translate(28vmax,-18vmax) scale(1.2)}}
.lux-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(245 237 224/.04) 1px,transparent 1px),linear-gradient(90deg,rgb(245 237 224/.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 85%);-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 85%)}
[data-theme=light] .lux-bg::after{background-image:linear-gradient(rgb(60 40 20/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(60 40 20/.05) 1px,transparent 1px)}
.lux-noise{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* ── access side ── */
.lux-access{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:84px 16px calc(24px + env(safe-area-inset-bottom))}
.lux-tools{position:absolute;top:24px;inset-inline-end:28px;display:flex;gap:8px}
.lux-tool{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;font:700 13px var(--latin);transition:border-color .2s,transform .2s}
.lux-tool:hover{border-color:var(--copper)}.lux-tool:active{transform:scale(.94)}.lux-tool svg{width:18px;height:18px}
.lux-panel{width:min(420px,100%);padding:40px 36px 30px;border-radius:30px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);box-shadow:var(--shadow),inset 0 1px 0 rgb(255 255 255/.08);position:relative;animation:up .8s .1s var(--ease) both}
.lux-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgb(226 176 126/.55),transparent 35%,transparent 70%,rgb(226 176 126/.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lux-mark{display:block;width:64px;height:64px;margin:0 auto 12px;background:linear-gradient(140deg,#f3cf9f,var(--copper) 55%,#8d5730);-webkit-mask:url(/assets/qget-logo-dark.png) center/contain no-repeat;mask:url(/assets/qget-logo-dark.png) center/contain no-repeat;filter:drop-shadow(0 6px 16px rgb(200 138 87/.35))}
.lux-panel h2{margin:0;text-align:center;font:600 30px/1.2 var(--display)}
.lux-sub{margin:8px 0 28px;text-align:center;color:var(--muted);font-size:14px}
/* fields with floating labels */
.lux-field{position:relative;display:block;margin-bottom:14px}
.lux-field>svg{position:absolute;inset-inline-start:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--faint);pointer-events:none;transition:color .2s}
.lux-field input{width:100%;height:60px;padding:22px 48px 6px;border-radius:16px;border:1.5px solid var(--line);background:var(--field);outline:none;font-size:15.5px;transition:border-color .2s,background .2s,box-shadow .2s;text-align:start}
[dir=rtl] .lux-field input{text-align:right}
.lux-field>span{position:absolute;inset-inline-start:48px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14.5px;pointer-events:none;transition:all .2s var(--ease)}
.lux-field input:focus,.lux-field input:not(:placeholder-shown){border-color:rgb(200 138 87/.6);background:var(--field-focus)}
.lux-field input:focus{border-color:var(--copper);box-shadow:0 0 0 4px rgb(200 138 87/.16)}
.lux-field input:focus~span,.lux-field input:not(:placeholder-shown)~span{top:17px;font-size:11.5px;font-weight:600;color:var(--copper-2)}
[data-theme=light] .lux-field input:focus~span,[data-theme=light] .lux-field input:not(:placeholder-shown)~span{color:var(--copper-3)}
.lux-field input:focus~svg,.lux-field:focus-within>svg{color:var(--copper)}
.lux-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--panel-solid) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.lux-eye{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:11px;border:0;background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center;transition:color .2s,background .2s}
.lux-eye:hover{color:var(--ink);background:var(--field-focus)}.lux-eye svg{width:19px;height:19px}
.lux-caps{margin:-6px 4px 10px;color:#e8a33d;font-size:12.5px;font-weight:600}
.lux-challenge{display:flex;justify-content:center;margin:4px 0 6px;min-height:0}
.lux-challenge:empty{display:none}
/* submit */
.lux-submit{position:relative;overflow:hidden;width:100%;height:58px;margin-top:8px;border:0;border-radius:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700;color:#1d1209;background:linear-gradient(135deg,#f0c896 0%,var(--copper-2) 30%,var(--copper) 70%,#a86c3f 100%);box-shadow:0 18px 36px -16px rgb(200 138 87/.75),inset 0 1px 0 rgb(255 255 255/.45);transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.lux-submit::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgb(255 255 255/.45) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4s 1.5s infinite}
@keyframes shine{25%,100%{transform:translateX(120%)}}
.lux-submit:hover{transform:translateY(-1px);box-shadow:0 22px 40px -16px rgb(200 138 87/.85),inset 0 1px 0 rgb(255 255 255/.45)}
.lux-submit:active{transform:scale(.985)}
.lux-arrow{transition:transform .25s var(--ease)}.lux-submit:hover .lux-arrow{transform:translateX(-4px)}[dir=ltr] .lux-arrow{transform:scaleX(-1)}[dir=ltr] .lux-submit:hover .lux-arrow{transform:scaleX(-1) translateX(-4px)}
.lux-spin{display:none;width:20px;height:20px;border-radius:50%;border:2.5px solid rgb(29 18 9/.25);border-top-color:#1d1209;animation:spin .8s linear infinite}
.lux-submit:disabled{cursor:progress;filter:saturate(.8)}.lux-submit:disabled .lux-spin{display:block}.lux-submit:disabled .lux-arrow{display:none}.lux-submit:disabled::before{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lux-text{display:block;margin:14px auto 0;border:0;background:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}.lux-text:hover{color:var(--ink)}
.lux-status{min-height:22px;margin:14px 0 0;text-align:center;color:#ff8a7a;font-size:13.5px;font-weight:600}
[data-theme=light] .lux-status{color:#c2412d}
.lux-status.ok{color:#3ccf8e}
.shake{animation:shake .45s var(--ease)}@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
/* otp */
.lux-otp-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px 14px;border-radius:16px;background:var(--field);border:1px solid var(--line)}
.lux-shield{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgb(200 138 87/.16);font-size:18px}
.lux-otp-head b{display:block}.lux-otp-head small{display:block;color:var(--muted);font-size:12.5px}
.lux-otp{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:6px}
.lux-otp span{width:10px;height:2px;background:var(--line)}
.lux-otp input{width:48px;height:58px;border-radius:14px;border:1.5px solid var(--line);background:var(--field);text-align:center;font:800 22px var(--latin);outline:none;transition:border-color .2s,box-shadow .2s,transform .15s}
.lux-otp input:focus{border-color:var(--copper);box-shadow:0 0 0 4px rgb(200 138 87/.16);transform:translateY(-2px)}
.lux-otp input.filled{border-color:rgb(200 138 87/.55)}
/* register */
.lux-register{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.lux-register summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--copper-2);font-weight:600;font-size:14px}
[data-theme=light] .lux-register summary{color:var(--copper-3)}
.lux-register summary::-webkit-details-marker{display:none}.lux-register summary b{transition:transform .25s}.lux-register[open] summary b{transform:rotate(180deg)}
.lux-register p{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:var(--field);color:var(--muted);font-size:13px;line-height:1.75;text-align:center}
.lux-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;color:var(--faint);font-size:12px}.lux-secure svg{width:15px;height:15px;color:var(--copper)}
.lux-foot{display:flex;gap:14px;justify-content:center;margin-top:28px;color:var(--faint);font-size:12px}
@keyframes up{from{opacity:0;transform:translateY(18px)}}

/* ── responsive ── */
@media(max-width:520px){.lux-panel{padding:32px 22px 24px;border-radius:26px}.lux-panel h2{font-size:27px}.lux-tools{top:16px;inset-inline-end:16px}}
@media(max-width:380px){.lux-otp input{width:40px;height:52px;font-size:19px}.lux-otp{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* ── 2FA animations ── */
.lux-otp input{--i:0}
.lux-otp input:nth-of-type(1){--i:0}.lux-otp input:nth-of-type(2){--i:1}.lux-otp input:nth-of-type(3){--i:2}.lux-otp input:nth-of-type(4){--i:3}.lux-otp input:nth-of-type(5){--i:4}.lux-otp input:nth-of-type(6){--i:5}
.lux-otp input:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}
/* verifying: copper wave runs across the digits */
.lux-otp.verifying input{animation:otpWave 1s calc(var(--i)*90ms) ease-in-out infinite;border-color:rgb(200 138 87/.7)}
@keyframes otpWave{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgb(200 138 87/0)}40%{transform:translateY(-7px);box-shadow:0 10px 22px -10px rgb(200 138 87/.9),0 0 0 3px rgb(200 138 87/.18)}}
/* success: each box flips to green in a wave */
.lux-otp.success input{animation:otpOk .5s calc(var(--i)*70ms) cubic-bezier(.3,1.6,.5,1) both}
@keyframes otpOk{0%{transform:scale(1)}45%{transform:scale(1.18) rotateX(180deg);background:#21a36b;border-color:#21a36b;color:#fff;-webkit-text-fill-color:#fff}100%{transform:scale(1);background:rgb(33 163 107/.18);border-color:#3ccf8e;color:#3ccf8e;-webkit-text-fill-color:#3ccf8e;box-shadow:0 0 0 4px rgb(60 207 142/.18),0 10px 26px -12px #3ccf8e}}
.lux-otp.success span{background:#3ccf8e;transition:background .3s .2s}
/* error: boxes turn red, jolt one by one and the row shakes */
.lux-otp.error{animation:otpRow .5s cubic-bezier(.36,.07,.19,.97) both}
.lux-otp.error input{animation:otpBad .5s calc(var(--i)*45ms) ease both;border-color:#ff6b5b;background:rgb(255 107 91/.12);color:#ff6b5b;-webkit-text-fill-color:#ff6b5b}
@keyframes otpRow{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
@keyframes otpBad{0%{transform:none}30%{transform:translateY(-6px) rotate(-6deg)}60%{transform:translateY(2px) rotate(5deg)}100%{transform:none}}
.lux-otp.error span{background:#ff6b5b}
/* verified overlay inside the card */
.lux-panel.verified>*:not(.lux-verified){transition:opacity .35s,filter .35s;opacity:.08;filter:blur(3px)}
.lux-verified{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;border-radius:inherit;animation:otpFade .3s ease both}
@keyframes otpFade{from{opacity:0}}
.lux-verified svg{width:108px;height:108px;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 12px 30px rgb(60 207 142/.45))}
.lux-verified circle{stroke:#3ccf8e;stroke-width:4;stroke-dasharray:220;stroke-dashoffset:220;animation:otpDraw .6s .05s cubic-bezier(.65,0,.35,1) forwards;fill:rgb(60 207 142/.1)}
.lux-verified path{stroke:#3ccf8e;stroke-width:6;stroke-dasharray:60;stroke-dashoffset:60;animation:otpDraw .4s .55s cubic-bezier(.65,0,.35,1) forwards}
@keyframes otpDraw{to{stroke-dashoffset:0}}
.lux-verified b{margin-top:8px;font:600 26px/1.2 var(--display);animation:up .5s .7s var(--ease) both}
.lux-verified small{color:var(--muted);animation:up .5s .8s var(--ease) both}
.lux-burst{position:absolute;left:50%;top:calc(50% - 30px);width:0;height:0}
.lux-burst i{position:absolute;width:6px;height:16px;margin:-8px -3px;border-radius:3px;background:linear-gradient(#f3cf9f,var(--copper));transform:rotate(calc(var(--k)*30deg)) translateY(0);opacity:0;animation:otpBurst .8s .65s cubic-bezier(.2,.8,.2,1) forwards}
.lux-burst i:nth-child(odd){background:linear-gradient(#7ff0bd,#21a36b)}
.lux-burst i:nth-child(1){--k:0}.lux-burst i:nth-child(2){--k:1}.lux-burst i:nth-child(3){--k:2}.lux-burst i:nth-child(4){--k:3}.lux-burst i:nth-child(5){--k:4}.lux-burst i:nth-child(6){--k:5}.lux-burst i:nth-child(7){--k:6}.lux-burst i:nth-child(8){--k:7}.lux-burst i:nth-child(9){--k:8}.lux-burst i:nth-child(10){--k:9}.lux-burst i:nth-child(11){--k:10}.lux-burst i:nth-child(12){--k:11}
@keyframes otpBurst{0%{opacity:1;transform:rotate(calc(var(--k)*30deg)) translateY(-40px) scaleY(.4)}100%{opacity:0;transform:rotate(calc(var(--k)*30deg)) translateY(-96px) scaleY(1)}}
.lux-panel.verified{border-color:rgb(60 207 142/.4);box-shadow:var(--shadow),0 0 0 1px rgb(60 207 142/.25),0 0 80px -20px rgb(60 207 142/.45);transition:box-shadow .5s,border-color .5s}
/* leaving: card lifts away, background zooms in */
.lux-leaving .lux-panel{transition:transform .45s cubic-bezier(.6,0,.4,1),opacity .45s;transform:translateY(-14px) scale(.96);opacity:0}
.lux-leaving .lux-bg{transition:transform .6s cubic-bezier(.6,0,.4,1),opacity .6s;transform:scale(1.12);opacity:.6}
.lux-leaving .lux-tools,.lux-leaving .lux-foot{transition:opacity .3s;opacity:0}