/* ── Landing design tokens (version2) ── */ :root{--p:#806DD9CD;--p2:#b09ee0;--m:#4E9490;--pink:#ff6bb6;--o:#ff9d3b;--d:#10182f;--muted:#667085;--line:#ede8fb;--soft:#f5f2ff} html,body{overflow-x:clip}html{scroll-behavior:smooth} /* Landing-only styles */ #qrow-landing body,#qrow-landing{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--d)} #qrow-landing{background:radial-gradient(circle at 10% 7%,rgba(128,109,217,.13),transparent 28rem),radial-gradient(circle at 85% 18%,rgba(67,184,165,.13),transparent 30rem),#fff} .nav-landing{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(235,231,251,.9)} .nav-landing .dropdown-menu{box-shadow:0 8px 30px rgba(16,24,47,.10);padding:.35rem} .nav-landing .dropdown-menu.show{animation:langDrop .18s ease} @keyframes langDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .nav-landing .lang-opt{border-radius:10px;padding:.45rem .85rem;color:var(--d);transition:.12s;font-size:.9rem} .nav-landing .lang-opt:hover{background:var(--soft);color:var(--p)} .nav-landing .lang-opt.active,.nav-landing .lang-opt.active:hover{background:rgba(128,109,217,.13);color:var(--p);pointer-events:none} .nav-link-land{font-weight:650;color:#29324a;transition:color .1s ease!important}.nav-link-land:hover,.nav-link-land.active{color:var(--p)!important}.nav-link-land:focus,.nav-link-land:focus-visible,.nav-link-land:active{color:#29324a;outline:none;box-shadow:none!important}body.qrow .nav-link-land:hover.nav-link:hover,body.qrow .nav-link-land:focus{border:none!important;box-shadow:none!important} .brand-mark{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.35rem;font-weight:900;background:conic-gradient(from 180deg,var(--p),var(--m),var(--p));box-shadow:0 14px 34px rgba(128,109,217,.22)} .btn-q{border:0;color:#fff!important;font-weight:800;background:linear-gradient(135deg,var(--p),#5a4ab0);box-shadow:0 16px 36px rgba(128,109,217,.26);transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden} .btn-q:hover{color:#fff!important;transform:translateY(-2px);box-shadow:0 22px 48px rgba(128,109,217,.38)} .btn-q .btn-qt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem} .btn-glow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none} .btn-glow div{background:linear-gradient(90deg,rgba(180,155,255,.85) 0%,rgba(255,255,255,.95) 49%,rgba(67,184,165,.85) 100%);border-radius:40rem;width:10rem;height:10rem;filter:blur(20px);animation:btnGlow 3s linear infinite;opacity:0;transition:opacity .35s,width .4s,height .4s} .btn-q:hover .btn-glow div{opacity:.7;width:8rem;height:8rem} @keyframes btnGlow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .btn-q:focus,.btn-q:focus-visible{outline:none;box-shadow:0 16px 36px rgba(128,109,217,.26)!important} .btn-q:active{transform:scale(0.95)!important;box-shadow:0 6px 14px rgba(128,109,217,.18)!important;transition:.08s!important} .btn-soft{border:1px solid var(--line);background:#fff;color:var(--d);font-weight:800;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease} .btn-soft:hover{border-color:rgba(128,109,217,.4);color:var(--p);background:rgba(128,109,217,.05);transform:translateY(-2px);box-shadow:0 8px 24px rgba(128,109,217,.12)} .btn-soft:active{transform:scale(0.96);transition:.08s!important} .nav-landing .btn-link{border-radius:10px;transition:color .1s ease,background .15s ease} .nav-landing .btn-link:hover{color:var(--p)!important;background:rgba(128,109,217,.08)} #qrow-landing .btn:focus,#qrow-landing .btn:focus-visible{outline:none;box-shadow:none!important} #qrow-landing .btn-link:active{opacity:.65;transition:.08s!important} .badge-q{background:rgba(128,109,217,.10);color:var(--p);border:1px solid rgba(128,109,217,.14);font-weight:800} .hero{padding:8rem 0 5rem}.hero-title{font-size:clamp(2.4rem,4vw,4rem);line-height:1.08;letter-spacing:-0.03em;font-weight:700} .gradient-text{background:linear-gradient(135deg,var(--p),var(--m));-webkit-background-clip:text;background-clip:text;color:transparent} .lead-land{color:var(--muted)} .mini-feature{display:flex;align-items:center;gap:.85rem} .licon{width:48px;height:48px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(128,109,217,.10);color:var(--p);font-size:1.35rem;flex:0 0 auto} .licon.mint{background:rgba(67,184,165,.12);color:var(--m)}.licon.pink{background:rgba(255,107,182,.13);color:var(--pink)}.licon.orange{background:rgba(255,157,59,.14);color:var(--o)} .phone-stage{position:relative;min-height:630px}.phone{width:min(326px,82vw);margin:auto;border:12px solid #121212;border-radius:46px;background:#fff;overflow:hidden;box-shadow:0 36px 95px rgba(16,24,47,.22)} .notch{width:120px;height:24px;background:#121212;border-radius:0 0 17px 17px;margin:auto} .qr-real{width:168px;height:168px;margin:auto;border-radius:20px;box-shadow:0 10px 26px rgba(128,109,217,.2);overflow:hidden;background:#fff} .side-card{position:absolute;right:0;width:250px;border:1px solid var(--line);border-radius:22px;padding:1.1rem;background:rgba(255,255,255,.90);box-shadow:0 22px 58px rgba(16,24,47,.10);backdrop-filter:blur(16px)} .side-card:before{display:none}.sc1{top:45px}.sc2{top:185px}.sc3{top:325px}.sc4{top:465px} .lsection{padding:5.5rem 0}.section-title{font-weight:950;letter-spacing:-.045em} #landing-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:1040;padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(255,255,255,.97) 55%,transparent);pointer-events:none} #landing-cta-bar .btn{pointer-events:auto;touch-action:manipulation;box-shadow:0 8px 32px rgba(128,109,217,.45),0 2px 8px rgba(0,0,0,.18)!important} @keyframes ctaPop{0%{transform:scale(1)}30%{transform:scale(.91)}65%{transform:scale(1.06)}85%{transform:scale(.98)}100%{transform:scale(1)}} #landing-cta-bar .btn.btn-pop{animation:ctaPop .45s cubic-bezier(.36,.07,.19,.97) both!important;transition:none!important} @media(max-width:991.98px){body.qrow #qrow-landing{padding-bottom:5rem}} .card-q{height:100%;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 22px 60px rgba(16,24,47,.065);transition:.2s ease;display:flex;flex-direction:column;align-items:center}.card-q:hover{transform:translateY(-3px);box-shadow:0 28px 80px rgba(16,24,47,.10)} @keyframes svcF1{0%,100%{transform:translateY(0) rotate(0deg)}42%{transform:translateY(-7px) rotate(.16deg)}75%{transform:translateY(-3px) rotate(-.08deg)}} @keyframes svcF2{0%,100%{transform:translateY(0) rotate(0deg)}38%{transform:translateY(-8px) rotate(-.18deg)}68%{transform:translateY(-4px) rotate(.1deg)}} @keyframes svcF3{0%,100%{transform:translateY(0) rotate(0deg)}52%{transform:translateY(-6px) rotate(.13deg)}} .svc-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2rem;padding-bottom:4rem;max-width:980px;margin-left:auto;margin-right:auto} .svc-col{flex:0 0 auto;width:218px;position:relative}.svc-col:hover{animation-play-state:paused;z-index:10} .svc-col:nth-child(1){animation:svcF2 8.4s ease-in-out infinite 0s} .svc-col:nth-child(2){animation:svcF1 7.1s ease-in-out infinite 2.1s} .svc-col:nth-child(3){animation:svcF3 9.6s ease-in-out infinite .7s} .svc-col:nth-child(4){animation:svcF2 8.0s ease-in-out infinite 3.5s} .svc-col:nth-child(5){animation:svcF1 6.7s ease-in-out infinite 1.3s} .svc-col:nth-child(6){animation:svcF3 9.1s ease-in-out infinite 4.2s} .svc-col:nth-child(7){animation:svcF1 7.8s ease-in-out infinite .4s} .svc-col:nth-child(8){animation:svcF2 9.3s ease-in-out infinite 2.8s} #teenused .card-q{height:auto} @media(max-width:767px){.svc-grid{gap:1rem;padding-bottom:2rem}.svc-col{width:calc(50% - .5rem);margin-top:0!important;margin-left:0!important}} @media(prefers-reduced-motion:reduce){.svc-col{animation:none!important;margin-top:0!important}} .svc-future-card{border:2px dashed var(--line)!important;background:rgba(255,255,255,.5)!important;transition:.22s ease;min-height:160px;justify-content:center} .svc-future-card:hover{background:rgba(255,255,255,.86)!important;border-color:#cdc8e0!important;transform:translateY(-3px);box-shadow:0 28px 80px rgba(16,24,47,.10)} .svc-future-icon{background:rgba(128,109,217,.06)!important;border:2px dashed var(--line)!important;font-size:1.6rem!important} .svc-col a{color:var(--d)} .rv,.rvl,.rvr{opacity:0;transition:opacity .6s ease,transform .6s ease} .rv{transform:translateY(22px)}.rvl{transform:translateX(-26px)}.rvr{transform:translateX(26px)} .rv.in,.rvl.in,.rvr.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv,.rvl,.rvr{opacity:1;transform:none;transition:none}} @keyframes heroLeft{0%{opacity:0;transform:translateX(-36px)}100%{opacity:1;transform:translateX(0)}} @keyframes heroRight{0%{opacity:0;transform:translateX(36px)}100%{opacity:1;transform:translateX(0)}} #avaleht .col-lg-6:first-child{animation:heroLeft .75s cubic-bezier(.22,.68,0,1.1) both} #avaleht .col-lg-6:last-child{animation:heroRight .75s cubic-bezier(.22,.68,0,1.1) .12s both} @media(prefers-reduced-motion:reduce){#avaleht .col-lg-6{animation:none!important}} .svc-info-wrap{position:relative;display:inline-flex;justify-content:center;margin-top:auto;padding-top:1rem} .svc-info-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(128,109,217,.1);color:var(--p);transition:.18s;font-size:1rem} .card-q:hover .svc-info-btn{background:rgba(128,109,217,.22)} .svc-tip{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);width:250px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;z-index:300;pointer-events:none} .card-q:hover .svc-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .svc-tip-inner{position:relative;padding:1.1rem 1.2rem;background:rgba(248,246,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;border:1px solid rgba(128,109,217,.25);box-shadow:0 0 28px rgba(128,109,217,.14),0 8px 32px rgba(16,24,47,.1);overflow:hidden} .svc-tip-inner p{margin:0;font-size:.875rem;color:var(--d);line-height:1.6} .svc-tip-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(128,109,217,.07) 0%,rgba(67,184,165,.05) 100%);pointer-events:none} .svc-tip-arrow{position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(248,246,255,.98);border-left:1px solid rgba(128,109,217,.25);border-top:1px solid rgba(128,109,217,.25)} .step-card{position:relative;text-align:center;padding:2.3rem 1.15rem 1.6rem}.step-no{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--p),#5a4ab0);color:#fff;font-weight:950;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(128,109,217,.32)} .step-arrow{position:absolute;right:-27px;top:50%;transform:translateY(-50%);color:var(--p);font-size:2.1rem;z-index:3} .future-card{overflow:hidden;position:relative;min-height:230px}.future-card:after{content:"";position:absolute;right:-55px;bottom:-70px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(128,109,217,.20),transparent 70%)} .future-card .badge{color:#111!important;background:#f0eff5!important;border-color:#ccc!important;font-weight:700;letter-spacing:.01em} .stats-band{background:linear-gradient(135deg,rgba(128,109,217,.08),rgba(67,184,165,.08));border:1px solid var(--line);border-radius:28px}.lcheck{color:#18a66a} .price-main{border:2px solid rgba(128,109,217,.20);background:linear-gradient(180deg,#fff,rgba(247,243,255,.88))} .faq .accordion-item{border:1px solid var(--line)!important;border-radius:20px!important;overflow:hidden;margin-bottom:1rem;box-shadow:0 12px 34px rgba(16,24,47,.04)} .accordion-button{font-weight:850}.accordion-button:not(.collapsed){background:var(--soft);color:var(--p)} @media(min-width:992px){#kuidas .col-lg{flex:0 0 20%!important;max-width:20%!important}} @media(max-width:991.98px){.hero{padding:6.5rem 0 3.5rem}.phone-stage{min-height:auto;margin-top:3rem}.side-card{display:none}.step-arrow{display:none}} .btn-close:focus,.btn-close:focus-visible{outline:none;box-shadow:none!important} /* ── Login errors ── */ .login-card-inner .alert{border-radius:14px;font-size:.88rem;font-weight:600;padding:.7rem 1rem .7rem 2.6rem;position:relative;border:none} .login-card-inner .alert::before{font-family:"bootstrap-icons";position:absolute;left:.9rem;top:50%;transform:translateY(-50%);font-size:1rem} .login-card-inner .alert-warning{background:rgba(220,53,69,.07);color:#b02a37;border:1px solid rgba(220,53,69,.15)} .login-card-inner .alert-warning::before{content:"\F33A";color:#dc3545} /* ── Login modal ── */ .login-card-inner{border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.96);padding:2rem} .tab-bar{display:flex;gap:.25rem;background:var(--soft);border-radius:12px;padding:.25rem;margin-bottom:1.75rem} .tab-btn{flex:1;border:none;background:none;font-weight:700;color:var(--muted);padding:.5rem;border-radius:9px;cursor:pointer;font-size:.88rem;transition:.15s} .tab-btn.active{background:#fff;color:var(--d);box-shadow:0 2px 8px rgba(16,24,47,.08)} .login-input-prefix{background:var(--soft);border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;font-weight:700;font-size:.95rem;padding:.75rem 1rem;color:var(--d)} .login-input{border:1px solid var(--line);border-radius:0 12px 12px 0;padding:.75rem 1rem;font-size:.95rem;transition:.15s} .login-input.full-radius{border-radius:12px} .login-input:focus{border-color:rgba(128,109,217,.7);box-shadow:0 0 0 3px rgba(128,109,217,.12);outline:none} .code-wrap{display:flex;gap:.5rem;justify-content:center;margin:1.25rem 0} .code-wrap input{width:46px;height:54px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-size:1.35rem;font-weight:800;outline:none;transition:.15s;-moz-appearance:textfield} .code-wrap input::-webkit-outer-spin-button,.code-wrap input::-webkit-inner-spin-button{-webkit-appearance:none} .code-wrap input:focus{border-color:rgba(128,109,217,.8);box-shadow:0 0 0 3px rgba(128,109,217,.12)} .info-box-login{background:var(--soft);border-radius:14px;padding:.85rem 1rem;font-size:.88rem;color:var(--muted);margin-bottom:1rem} /* ── App shell ── */ #qrow-app header{margin:0!important;padding:0!important;border:none!important} body.qrow{background:#fff} #qrow-app .container{max-width:660px;padding-bottom:3rem;margin-top:76px!important} #qrow-app #mainsection{padding-top:0!important} /* Nav */ #qrow-app nav.navbar{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(128,109,217,.12)!important;box-shadow:0 1px 16px rgba(16,24,47,.06);padding-top:.75rem!important;padding-bottom:.75rem!important;min-height:unset!important} #qrow-app nav.navbar .navbar-brand{padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important} #qrow-app nav.navbar .app-main-logo{max-height:32px!important;width:auto!important} #qrow-app nav.navbar .container{margin-top:0!important;padding-top:0!important;padding-bottom:0!important} #qrow-app .nav-pills .nav-link{border-radius:10px;font-weight:700;color:#667085;padding:.4rem .7rem;font-size:1.2rem;line-height:1;transition:.15s} #qrow-app .nav-pills .nav-link.active,#qrow-app .nav-pills .nav-link:hover{background:rgba(128,109,217,.12);color:#806dd9} /* CTA cards (ettevõte / jootraha) */ #qrow-app .card{border:none!important;border-radius:22px!important;box-shadow:0 4px 24px rgba(16,24,47,.07)!important;margin-bottom:1rem;background:#fff!important} #qrow-app .card .btn-outline-secondary{border-radius:12px;font-weight:700;font-size:.82rem;border-color:#d5cef5;color:#806dd9;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} #qrow-app .card .btn-outline-secondary:hover{transform:scale(1.03);background:transparent;border-color:#806dd9;color:#806dd9;box-shadow:0 6px 24px rgba(128,109,217,.3)} #qrow-app .card .btn-outline-primary{border-radius:12px!important;font-weight:700!important;border:1px solid #806dd9!important;color:#806dd9!important;background:rgba(128,109,217,.08)!important;box-shadow:none!important;transition:transform .15s ease,box-shadow .15s ease} #qrow-app .card .btn-outline-primary:hover{transform:scale(1.03);background:rgba(128,109,217,.08)!important;border-color:#806dd9!important;color:#806dd9!important;box-shadow:0 6px 24px rgba(128,109,217,.45)!important} #qrow-app .card .btn-warning{border-radius:12px;font-weight:800;background:#f5a623;border-color:#f5a623} /* Accordion → wallet cards */ #qrow-app .accordion{display:flex;flex-direction:column;gap:.65rem} #qrow-app .accordion-item{border:none!important;border-radius:22px!important;overflow:hidden;box-shadow:0 4px 24px rgba(16,24,47,.07);background:#fff} #qrow-app .accordion-button{background:#fff!important;color:#10182f!important;font-weight:800;font-size:.97rem;padding:1rem 1.2rem;gap:.7rem;box-shadow:none!important;border-radius:22px!important} #qrow-app .accordion-button:not(.collapsed){border-radius:22px 22px 0 0!important;border-bottom:1px solid #f0eeff} #qrow-app .accordion-button i.bi{font-size:1.1rem;color:#806dd9;flex-shrink:0;width:22px;text-align:center} #qrow-app .accordion-button b{font-weight:800} #qrow-app .accordion-body{padding:1rem 1.2rem;background:#fff} #qrow-app .accordion-button::after{filter:invert(37%) sepia(71%) saturate(500%) hue-rotate(222deg)} /* Personal section (identity card — only where MINU QR button exists) */ #qrow-app .accordion-item:has(.showMyQR){background:#fff!important;border:2px solid rgba(124,107,214,.25)!important;box-shadow:0 0 0 4px rgba(124,107,214,.07),0 8px 32px rgba(124,107,214,.18)} #qrow-app .accordion-item:has(.showMyQR) .accordion-button{background:#fff!important;color:#5e4fbb!important} #qrow-app .accordion-item:has(.showMyQR) .accordion-button b{color:#5e4fbb} #qrow-app .accordion-item:has(.showMyQR) .accordion-button i.bi{color:#7c6bd6} #qrow-app .accordion-item:has(.showMyQR) .accordion-button::after{filter:none} #qrow-app .accordion-item:has(.showMyQR) .accordion-button:not(.collapsed){border-bottom:1px solid rgba(124,107,214,.15)!important} #qrow-app .accordion-item:has(.showMyQR) .accordion-body{background:#fff!important;padding-top:.5rem} /* Layout picker (settings tab only) */ #qrow-app .layout-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.55rem} #qrow-app .layout-opt{border:2px solid #f0eeff;border-radius:14px;padding:.65rem .5rem .55rem;cursor:pointer;text-align:center;transition:.15s;background:#fafafe;user-select:none} #qrow-app .layout-opt:hover{border-color:rgba(128,109,217,.4)} #qrow-app .layout-opt.lo-active{border-color:#806dd9;background:rgba(128,109,217,.07)} #qrow-app .lo-preview{height:44px;border-radius:8px;background:#f4f2fd;margin-bottom:.4rem;padding:.35rem .4rem;display:flex;flex-direction:column;gap:4px;justify-content:center} #qrow-app .lo-bar{height:7px;border-radius:4px;background:rgba(128,109,217,.2)} #qrow-app .lo-bar.lo-tall{height:14px} #qrow-app .layout-opt.lo-active .lo-bar{background:rgba(128,109,217,.45)} #qrow-app .lo-name{font-size:.73rem;font-weight:700;color:#667085} #qrow-app .layout-opt.lo-active .lo-name{color:#806dd9} /* Layout: QR kaart — suure QR placeholder nupuga */ #qrow-app.qlayout-qr .btn.btn-primary.showMyQR{position:relative;height:200px;padding:0;border-radius:20px!important;overflow:hidden;border:2px solid rgba(124,107,214,.3)!important;font-size:0!important;cursor:pointer;background:#fff!important;box-shadow:0 0 0 4px rgba(124,107,214,.08),0 8px 32px rgba(124,107,214,.22)!important;transition:transform .2s ease,box-shadow .2s ease!important;display:block!important;width:100%!important} #qrow-app.qlayout-qr .btn.btn-primary.showMyQR:hover{transform:scale(1.015)!important;box-shadow:0 0 0 5px rgba(124,107,214,.18),0 12px 40px rgba(124,107,214,.38)!important} #qrow-app.qlayout-qr .btn.btn-primary.showMyQR::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(rgba(124,107,214,.07) 0% 25%,transparent 0% 50%) 0 0/18px 18px} #qrow-app.qlayout-qr .btn.btn-primary.showMyQR::after{content:'Vajuta QR kuvamiseks';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.82rem!important;font-weight:800!important;color:#7c6bd6;letter-spacing:.08em;text-transform:uppercase} /* qlayout-bottom: sticky QR kaart + bottom sheet */ #qrow-app.qlayout-bottom .qr-sticky-card{display:flex;align-items:center;gap:.85rem;background:#fff;border:2px solid rgba(124,107,214,.2);border-radius:20px;padding:.85rem 1rem;cursor:pointer;box-shadow:0 4px 24px rgba(16,24,47,.07);transition:.15s;user-select:none} #qrow-app.qlayout-bottom .qr-sticky-card:active{transform:scale(.98)} #qrow-app.qlayout-bottom .qr-sticky-thumb{width:50px;height:50px;border-radius:12px;background:#f4f2fd;flex-shrink:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} #qrow-app.qlayout-bottom .qr-sticky-thumb::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(rgba(124,107,214,.18) 0% 25%,transparent 0% 50%) 0 0/8px 8px;filter:blur(1.5px)} #qrow-app.qlayout-bottom .qr-sticky-thumb i{position:relative;font-size:1.3rem;color:#806dd9;z-index:1} #qrow-app.qlayout-bottom .qr-sticky-info{flex:1;min-width:0} #qrow-app.qlayout-bottom .qr-sticky-title{font-weight:800;font-size:.93rem;color:#10182f} #qrow-app.qlayout-bottom .qr-sticky-sub{font-size:.78rem;color:#667085;margin-top:.1rem} #qrow-app.qlayout-bottom .qr-sticky-arrow{color:#c5bef2;font-size:1rem;flex-shrink:0} /* Mobiil: QR kaart fixed ekraani alla, accordion + scan peidetud */ @media(max-width:767.98px){ #qrow-app.qlayout-bottom .btn.btn-primary.showMyQR{position:absolute!important;width:0!important;height:0!important;padding:0!important;border:0!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important} #qrow-app.qlayout-bottom .accordion-item:has(.showMyQR){display:none!important} #qrow-app.qlayout-bottom .btn-scan-qr-code{display:none!important} #qrow-app.qlayout-bottom .qr-sticky-card{position:fixed!important;bottom:calc(.8rem + env(safe-area-inset-bottom));left:.75rem;right:.75rem;margin:0!important;border-radius:20px!important;padding:.85rem 1rem!important;z-index:1020;box-shadow:0 8px 32px rgba(16,24,47,.16),0 2px 12px rgba(124,107,214,.18)!important} #qrow-app.qlayout-bottom .container{padding-bottom:calc(100px + env(safe-area-inset-bottom))!important} } /* Desktop: sticky kaart peidetud, QR jääb accordion sisse */ @media(min-width:768px){ #qrow-app.qlayout-bottom .qr-sticky-card{display:none!important} } /* Bottom sheet overlay */ .qr-bs-overlay{position:fixed;inset:0;background:rgba(10,8,30,.45);z-index:1040;opacity:0;pointer-events:none;transition:opacity .3s} .qr-bs-overlay.qs-open{opacity:1;pointer-events:auto} .qr-bs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:28px 28px 0 0;z-index:1050;padding:0 1.4rem 2.2rem;max-height:90vh;overflow-y:auto;transform:translateY(105%);transition:transform .42s cubic-bezier(.22,.8,.32,1)} .qr-bs.qs-open{transform:translateY(0)} .qr-bs-handle{width:40px;height:4px;background:#e4e1f5;border-radius:2px;margin:1rem auto .6rem} .qr-bs-close{position:absolute;top:.9rem;right:1rem;background:rgba(128,109,217,.1);border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#806dd9;font-size:1.1rem;line-height:1;padding:0} .qr-bs-title{text-align:center;font-weight:800;font-size:1.1rem;color:#10182f;margin-bottom:.25rem} .qr-bs-sub{text-align:center;font-size:.83rem;color:#667085;margin-bottom:1.1rem;line-height:1.45} .qr-bs-img{text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;padding:.25rem 0 .85rem} .qr-bs-img img,.qr-bs-img .qr-reveal{width:300px;max-width:92%;border-radius:12px;animation:qrIn .42s cubic-bezier(.2,.8,.3,1) both} .qr-bs-loading{color:#9887e8;font-size:.85rem;display:flex;align-items:center;gap:.5rem} .qr-bs-loading::before{content:'';width:16px;height:16px;border:2px solid #e0ddf5;border-top-color:#806dd9;border-radius:50%;animation:qrSpin .7s linear infinite;flex-shrink:0} @keyframes qrSpin{to{transform:rotate(360deg)}} .qr-bs-user{display:flex;align-items:center;gap:.7rem;padding:.8rem 0 .7rem;border-top:1px solid #f0eeff;margin-top:.15rem;cursor:pointer} .qr-bs-user-icon{width:36px;height:36px;border-radius:50%;background:#f4f2fd;display:flex;align-items:center;justify-content:center;flex-shrink:0} .qr-bs-user-icon i{font-size:1.1rem;color:#806dd9} .qr-bs-user-info{flex:1;min-width:0} .qr-bs-user-info strong{display:block;font-size:.88rem;font-weight:800;color:#10182f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qr-bs-user-info span{font-size:.74rem;color:#9887e8} .qr-bs-user>.bi-chevron-right{color:#d0c8f5;font-size:.8rem;flex-shrink:0} .qr-bs-hide{display:block;width:100%;background:#f4f2fd;border:none;border-radius:16px;color:#806dd9;font-weight:800;padding:.88rem;font-size:.93rem;cursor:pointer;transition:.15s;margin-top:.25rem} .qr-bs-hide:hover{background:#ece8fb} /* QR card & hide button */ @keyframes qrIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}} #qrow-app .qr-wrap{text-align:center;background:#fff;border-radius:20px;padding:1.1rem 1rem .75rem;border:2px solid rgba(124,107,214,.25);box-shadow:0 0 0 4px rgba(124,107,214,.08),0 8px 32px rgba(124,107,214,.2)} #qrow-app .qr-reveal{display:block;width:240px;max-width:100%;border-radius:12px;animation:qrIn .45s cubic-bezier(.2,.8,.3,1) both} #qrow-app .qr-hide-btn{display:block;margin:.7rem auto 0;background:transparent;border:1.5px solid rgba(124,107,214,.35);color:#7c6bd6;border-radius:12px;font-size:.78rem;font-weight:700;padding:.38rem 1rem;transition:.15s} #qrow-app .qr-hide-btn:hover{background:rgba(124,107,214,.08);border-color:#7c6bd6} #qrow-app .btn.btn-secondary.tab-click{background:rgba(0,0,0,.18);border:1.5px solid rgba(255,255,255,.15);color:#fff;border-radius:16px;font-weight:900;font-size:1.05rem;padding:.85rem;letter-spacing:.06em;transition:.18s} #qrow-app .btn.btn-secondary.tab-click:hover{background:rgba(0,0,0,.28)} #app-logout-slot{margin-top:1.5rem;padding-bottom:2rem} #app-logout-slot:empty{display:none} #app-logout-slot button,#app-logout-slot a.btn{display:block!important;width:100%!important;padding:.85rem!important;border-radius:16px!important;font-weight:800!important;font-size:.95rem!important;background:transparent!important;border:1.5px solid rgba(220,53,69,.35)!important;color:#dc3545!important;transition:.15s!important} #app-logout-slot button:hover,#app-logout-slot a.btn:hover{background:rgba(220,53,69,.06)!important;border-color:#dc3545!important} /* Maksed buttons */ #qrow-app .accordion-body .btn-primary:not(.showMyQR){background:#806dd9;border-color:#806dd9;border-radius:14px;font-weight:800;padding:.75rem;font-size:.95rem;transition:.15s} #qrow-app .accordion-body .btn-primary:not(.showMyQR):hover{background:#6d5bc4;border-color:#6d5bc4} /* List group items (services) */ #qrow-app .list-group{display:flex;flex-direction:column;gap:.45rem} #qrow-app .list-group-item{border-radius:14px!important;border:1.5px solid #f0eeff!important;padding:.85rem 1rem;transition:background .14s,transform .12s;background:#fff} #qrow-app .list-group-item:hover{background:#f8f6ff;transform:translateX(3px)} #qrow-app .list-group-item h5{font-size:.93rem;font-weight:800;margin-bottom:.15rem;color:#10182f} #qrow-app .list-group-item p{font-size:.8rem;margin-bottom:0;color:#667085} /* Badges */ #qrow-app .badge{border-radius:8px;font-weight:700;font-size:.75rem} /* Table inside accordion */ #qrow-app .table{font-size:.88rem} #qrow-app .table thead th{font-weight:800;color:#667085;border-bottom:2px solid #f0eeff} #qrow-app .btn-success.hasevent{border-radius:10px;font-weight:800} /* ══ BEETA: 5-tab bottom nav ══ */ #qrow-app .qrow-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;align-items:flex-end;justify-content:space-around; background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid rgba(128,109,217,.1);box-shadow:0 -2px 20px rgba(16,24,47,.06); padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom))} /* IDLE: tundmatu skännija (qrowNoUser) — alariba nupud kuvatud aga klikitavad pole (väldi vana sisu) */ #qrow-app .qrow-bottomnav.qbn-idle .qbn-item,#qrow-app .qrow-bottomnav.qbn-idle .qbn-center{opacity:.4;pointer-events:none} /* …AGA ostufooter (qbn-buyflow) on KLIKITAV ka tundmatul (idle) — Kodu/Skänner/Korv on talle mõttekad */ #qrow-app .qrow-bottomnav.qbn-idle.qbn-buyflow .qbn-item,#qrow-app .qrow-bottomnav.qbn-idle.qbn-buyflow .qbn-center{opacity:1;pointer-events:auto} #qrow-app .qbn-item{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:.12rem; color:#98a2b3;font-size:.66rem;font-weight:700;padding:.3rem 0;transition:.15s;cursor:pointer} #qrow-app .qbn-item i{font-size:1.28rem;line-height:1} #qrow-app .qbn-item.active,#qrow-app .qbn-item:hover{color:#806dd9} /* OSTJA ostukonteksti riba (qbn-buyflow): peida Teenused/Statistika/Profiil, kuva Korv */ #qrow-app .qrow-cart-nav{display:none;position:relative} #qrow-app .qrow-bottomnav.qbn-buyflow .qrow-cart-nav{display:flex;color:#806dd9} #qrow-app .qrow-bottomnav.qbn-buyflow .qrow-beta-services, #qrow-app .qrow-bottomnav.qbn-buyflow .qrow-beta-stats, #qrow-app .qrow-bottomnav.qbn-buyflow .qrow-beta-profile{display:none} #qrow-app .qbn-cart-badge{position:absolute;top:-1px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e8484f;color:#fff;font-size:.6rem;font-weight:800;line-height:16px;text-align:center} #qrow-app .qbn-center{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:4px solid #fff; background:linear-gradient(135deg,#806dd9,#6c5ce7);color:#fff;font-size:1.55rem;cursor:pointer; display:flex;align-items:center;justify-content:center;margin:0 .3rem 14px; box-shadow:0 8px 22px rgba(124,107,214,.5);transition:.15s} #qrow-app .qbn-center:active{transform:scale(.93)} /* BEETA rollivahetuse chip (header) */ #qrow-app .qrow-role-chip{width:38px;height:38px;border-radius:50%;border:none;flex-shrink:0; background:linear-gradient(135deg,#806dd9,#6c5ce7);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em; display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(124,107,214,.35);transition:.15s} #qrow-app .qrow-role-chip:active{transform:scale(.92)} #qrow-app .qrow-role-chip.is-personal{background:#eef0f6;color:#806dd9;box-shadow:0 2px 8px rgba(16,24,47,.08)} #qrow-app .qrow-role-chip i{font-size:1.15rem;line-height:1} /* mobiilis Skänner-label peidus (näha ainult desktop-sidebar'is) */ #qrow-app .qbn-center-label{display:none} /* ══ BEETA DESKTOP (≥992px): bottom nav → vasak sidebar, sisu paremale (kontoritöö) ══ */ @media(min-width:992px){ #qrow-app .qrow-bottomnav{ flex-direction:column;justify-content:flex-start;align-items:stretch; top:76px;bottom:0;left:0;right:auto;width:240px; border-top:none;border-right:1px solid rgba(128,109,217,.12); box-shadow:2px 0 22px rgba(16,24,47,.04);padding:1.4rem .8rem;gap:.25rem} #qrow-app .qbn-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:.9rem; padding:.72rem 1rem;border-radius:12px;font-size:.95rem} #qrow-app .qbn-item i{font-size:1.3rem} #qrow-app .qbn-item:hover{background:rgba(128,109,217,.07)} #qrow-app .qbn-item.active{background:rgba(128,109,217,.12)} #qrow-app .qbn-center{width:auto;height:auto;border-radius:12px;border:none;margin:.5rem 0; flex-direction:row;justify-content:flex-start;gap:.9rem;padding:.8rem 1rem;font-size:1.3rem; align-self:stretch;box-shadow:0 6px 16px rgba(124,107,214,.4)} #qrow-app .qbn-center-label{display:inline;font-size:.95rem;font-weight:700} /* Sisu-nihe ROBUSTSELT: padding kogu voo-alale (fixed sidebar jääb 0..240 gutterisse), sisu tsentreerub ise sidebari-järgses ruumis. Varem oli `margin-left:240!important` + `margin-right:auto` — see hack jättis laiadel ekraanidel sisu sidebari külge liibuma ja kitsastel iPad-laiustel võis vasak serv jääda sidebari alla („cut off"). padding-l on kindel: sisu ei saa KUNAGI sidebari alla sattuda. */ #qrow-app{padding-left:240px} #qrow-app nav.navbar{padding-left:240px} /* fixed header ei päri #qrow-app paddingut → nihuta eraldi */ #qrow-app .container{margin-left:auto!important;margin-right:auto!important;max-width:1040px;padding-left:2rem;padding-right:2rem} /* header full-laius: logo vasakule (sidebar'i kohale), chip paremale */ #qrow-app .header-container{margin-left:auto!important;margin-right:auto!important;max-width:none!important;padding-left:1.5rem;padding-right:2rem} } /* ══ BEETA: #qrow-popup = detaili full-screen layer (mobiilis kogu ekraan; sisu scrollitav; nupud sticky footeris) ══ */ #qrow-popup{position:fixed;inset:0;z-index:1090;display:flex;align-items:center;justify-content:center;padding:1.25rem} #qrow-popup .qpop-backdrop{position:absolute;inset:0;background:rgba(16,24,47,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} /* login-popupi moodi valge ümar kaart; suurus sisu järgi, max viewport (ei lähe kunagi üle ekraani) */ #qrow-popup .qpop-panel{position:relative;z-index:1;width:100%;max-width:460px; display:flex;flex-direction:column;max-height:calc(100vh - 2.5rem);max-height:calc(100dvh - 2.5rem); background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:28px; overflow:hidden;box-shadow:0 24px 60px rgba(16,24,47,.32);animation:qrowLayerIn .2s ease} #qrow-popup .qpop-x{position:absolute;top:14px;right:14px;z-index:5;background-color:#fff;border-radius:50%; padding:.65rem;opacity:.92;box-shadow:0 2px 12px rgba(16,24,47,.22)} #qrow-popup .qpop-x:hover{opacity:1} #qrow-popup .qpop-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.85rem 1.5rem 1.5rem} /* sisemised kaardid lamedaks — panel ISE on kaart, ei teki kaart-kaardis */ #qrow-popup .qpop-body .card{border:none!important;box-shadow:none!important;background:transparent!important;margin:0!important} #qrow-popup .qpop-body .card-body{padding:0!important} #qrow-popup .qpop-body img{width:100%!important;max-width:340px!important;height:auto;margin:.6rem auto!important;display:block} #qrow-popup .qpop-body .d-flex.gap-2.flex-wrap, #qrow-popup .qpop-body .noclicktoremove{position:sticky;bottom:-1.5rem;z-index:3;background:#fff; padding:.85rem 0 1.5rem;margin-bottom:-1.5rem;box-shadow:0 -14px 18px -12px rgba(16,24,47,.16)} @keyframes qrowLayerIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* sisu jätab bottom nav'ile ruumi */ #qrow-app .container{padding-bottom:96px!important} /* top nav-pills asendatud bottom nav'iga */ #qrow-app .nav-pills{display:none!important} /* ── QROW lilla brand-värv kõigile Bootstrap "primary"/link elementidele (asendab BS sinise: .text-primary, .btn-link, .bg-primary-subtle, .border-primary-subtle, jne) ── */ #qrow-app, #qrow-popup{ --bs-primary:#806dd9; --bs-primary-rgb:128,109,217; --bs-primary-text-emphasis:#5e4fbb; --bs-primary-bg-subtle:#efe9fc; --bs-primary-border-subtle:#d8cef5; --bs-link-color:#6d5bc4; --bs-link-color-rgb:109,91,196; --bs-link-hover-color:#5e4fbb; --bs-link-hover-color-rgb:94,79,187; } /* Lingid + .btn-link → QROW süvalilla (mitte BS sinine). !important lööb üle BS .btn-link hardcode'i (mis ei loe --bs-link-color muutujat). .text-secondary (× sulge) jääb halliks. */ #qrow-app a:not(.btn):not([class*="nav"]), #qrow-popup a:not(.btn), #qrow-app .btn-link:not(.text-secondary), #qrow-popup .btn-link:not(.text-secondary){color:#6d5bc4!important} #qrow-app a:not(.btn):not([class*="nav"]):hover, #qrow-popup a:not(.btn):hover, #qrow-app .btn-link:not(.text-secondary):hover, #qrow-popup .btn-link:not(.text-secondary):hover{color:#5e4fbb!important} /* Listi-ridade pealkirjad (teenuse-/tehingu-nimi) → QROW lilla. Kõik list-read on button[event] > .flex-grow-1 > .fw-semibold; CTA-kaardid kasutavad .fw-bold → ei mõjuta. */ #qrow-app button[event] > .flex-grow-1 > .fw-semibold, #qrow-popup button[event] > .flex-grow-1 > .fw-semibold{color:#6d5bc4} /* Eemalda BS vaikimisi sinine fookus-outline/box-shadow KOIGILT nuppudelt (sh tagasinooled) - puudutusel/klikil jäi sinine "glow" nähtavaks, kuna .btn ei kanna primary/outline-varianti. */ #qrow-app .btn, #qrow-popup .btn{-webkit-tap-highlight-color:transparent} #qrow-app .btn:focus, #qrow-app .btn:focus-visible, #qrow-app .btn.focus, #qrow-popup .btn:focus, #qrow-popup .btn:focus-visible, #qrow-popup .btn.focus{ outline:none; box-shadow:none!important; } /* Sama BS vaikimisi sinine fookus-glow tekstiväljadel (nt "Otsi toodet…") JA rippmenüüdel (form-select — BS annab neile eraldi klassi, form-control reegel ei kata neid) → QROW lilla. */ #qrow-app .form-control:focus, #qrow-popup .form-control:focus, #qrow-app .form-select:focus, #qrow-popup .form-select:focus{ border-color:rgba(128,109,217,.7)!important; box-shadow:0 0 0 3px rgba(128,109,217,.12)!important; outline:none; } /* GLOBAALNE turvavõrk: iga natiivne checkbox/radio app'is (ka kohad, kus pole veel kohandatud Uiverse-stiili .checkbox-container/.radio-container'it — vt betaprofile::_formStyle) → QROW lilla, mitte BS vaikimisi sinine. Puhas accent-color, ei puutu layout'i/käitumist. */ #qrow-app input[type="checkbox"], #qrow-app input[type="radio"], #qrow-popup input[type="checkbox"], #qrow-popup input[type="radio"]{ accent-color:#806dd9; } /* Bootstrap 5-s PUUDUB .min-width-0 utiliit, aga koodis kasutatakse seda flex-item'i kahandamiseks, et text-truncate töötaks (nt ostukorvi/arve pikad tootenimed ei jookseks üle ekraani serva). Ilma selleta on flex-item'i min-width:auto → ei kahane → ellipsis ei rakendu. Defineeri globaalselt. */ .min-width-0{min-width:0!important} /* sticky "Minu QR-kood" kaart istub bottom nav'i kohal */ @media(max-width:991.98px){ #qrow-app.qlayout-bottom .qr-sticky-card{bottom:calc(86px + env(safe-area-inset-bottom))!important} #qrow-app.qlayout-bottom .container{padding-bottom:170px!important} } /* ── Skeleton-loader (dünaamiline vaate järgi, vt qrowSkeletonFor js-is) ── */ @keyframes qrowSkelIn{from{opacity:0}to{opacity:1}} @keyframes qrowShimmer{0%{background-position:-300px 0}100%{background-position:300px 0}} .qrow-skel{animation:qrowSkelIn .15s ease both} .qrow-skel-card{background:#fff;border-radius:18px;box-shadow:0 1px 3px rgba(16,24,47,.06);padding:1rem} .qrow-skel-row{display:flex;align-items:center;padding:.6rem 0} .qrow-skel-row + .qrow-skel-row{border-top:1px solid #f4f2fd} .qrow-skel-b{background:linear-gradient(90deg,#eee9fb 25%,#f6f4fd 37%,#eee9fb 63%); background-size:300px 100%;animation:qrowShimmer 1.3s ease-in-out infinite;border-radius:8px;flex-shrink:0} @media(prefers-reduced-motion:reduce){.qrow-skel-b{animation:none;background:#eee9fb}} /* ── QROW kohandatud dropdown: natiivne