.btn-arrow{display:inline-block;position:relative;width:56px;height:56px;margin:0;overflow:hidden;outline:none;background-color:transparent;cursor:pointer;border:0;transition:all .3s ease}.btn-arrow:before,.btn-arrow:after{content:"";position:absolute;border-radius:50%;top:7px;right:7px;bottom:7px;left:7px}.btn-arrow:before{border:4px solid #f0eeef;transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms,transform .5s cubic-bezier(.455,.03,.515,.955) 80ms}.btn-arrow:after{border:4px solid #96daf0;transform:scale(1.3);transition:opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94);opacity:0}.btn-arrow:hover:before,.btn-arrow:focus:before{opacity:0;transform:scale(.7);transition:opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94)}.btn-arrow:hover:after,.btn-arrow:focus:after{opacity:1;transform:scale(1);transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms,transform .5s cubic-bezier(.455,.03,.515,.955) 80ms}.btn-arrow-box{display:flex;position:absolute;top:0;left:0}.btn-arrow-elem{display:block;width:20px;height:20px;margin:17px 18px 0;transform:rotate(180deg);fill:#f0eeef}.btn-arrow:hover .btn-arrow-box,.btn-arrow:focus .btn-arrow-box{transition:.4s;transform:translate(-56px)}.btn-transform{position:relative;overflow:hidden;border:1px solid #18181a;color:#18181a;display:inline-block;font-size:15px;line-height:15px;padding:18px 18px 17px;text-decoration:none;cursor:pointer;background:#fff;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-weight:600;border-radius:8px;transition:all .3s ease}.btn-transform .btn-text-primary{position:relative;transition:color .6s cubic-bezier(.48,0,.12,1);z-index:10}.btn-transform .btn-text-secondary{color:#fff;display:block;position:absolute;bottom:0;transition:all .5s cubic-bezier(.48,0,.12,1);z-index:100;opacity:0;top:50%;left:50%;transform:translateY(225%) translate(-50%);height:14px;line-height:13px;font-weight:600}.btn-transform:after{content:"";position:absolute;bottom:-50%;left:0;width:100%;height:100%;background-color:#000;transform-origin:bottom center;transition:transform .6s cubic-bezier(.48,0,.12,1);transform:skewY(9.3deg) scaleY(0);z-index:50}.btn-transform:hover:after{transform-origin:bottom center;transform:skewY(9.3deg) scaleY(2)}.btn-transform:hover .btn-text-secondary{transform:translate(-50%) translateY(-50%);opacity:1;transition:all .9s cubic-bezier(.48,0,.12,1)}.btn-ripple{position:relative;display:inline-block;padding:12px 24px;border:none;font-size:16px;background-color:inherit;border-radius:100px;font-weight:600;color:#ffffff40;box-shadow:0 0 0 2px #ffffff20;cursor:pointer;overflow:hidden;transition:all .6s cubic-bezier(.23,1,.32,1)}.btn-ripple .btn-ripple-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:#2196f3;border-radius:50%;opacity:0;transition:all .8s cubic-bezier(.23,1,.32,1)}.btn-ripple .btn-ripple-text{position:relative;z-index:1}.btn-ripple:hover{box-shadow:0 0 0 5px #2195f360;color:#fff}.btn-ripple:active{scale:.95}.btn-ripple:hover .btn-ripple-circle{width:150px;height:150px;opacity:1}.btn-heart{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:10px;cursor:pointer;border:none;background-color:transparent;position:relative;transition:all .3s ease}.btn-heart:after{content:"like";width:fit-content;height:fit-content;position:absolute;font-size:15px;color:#fff;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;opacity:0;visibility:hidden;transition:.2s linear;top:115%;background:#000c;padding:4px 8px;border-radius:4px;font-size:12px}.btn-heart-icon{width:30px;height:30px;transition:.2s linear}.btn-heart-icon path{fill:#fff;transition:.2s linear}.btn-heart:hover>.btn-heart-icon{transform:scale(1.2)}.btn-heart:hover>.btn-heart-icon path{fill:#b18bbd}.btn-heart:hover:after{visibility:visible;opacity:1;top:105%}.btn-cart-tooltip{--width: 120px;--height: 40px;--tooltip-height: 35px;--tooltip-width: 90px;--gap-between-tooltip-to-button: 18px;--button-color: #222;--tooltip-color: #fff;width:var(--width);height:var(--height);background:var(--button-color);position:relative;text-align:center;border-radius:.45em;font-family:Arial,sans-serif;transition:background .3s;border:none;cursor:pointer;color:#fff;font-weight:600;overflow:hidden}.btn-cart-tooltip:before{position:absolute;content:attr(data-tooltip);width:var(--tooltip-width);height:var(--tooltip-height);background-color:#555;font-size:.9rem;color:#fff;border-radius:.25em;line-height:var(--tooltip-height);bottom:calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);left:calc(50% - var(--tooltip-width) / 2)}.btn-cart-tooltip:after{position:absolute;content:"";width:0;height:0;border:10px solid transparent;border-top-color:#555;left:calc(50% - 10px);bottom:calc(100% + var(--gap-between-tooltip-to-button) - 10px)}.btn-cart-tooltip:after,.btn-cart-tooltip:before{opacity:0;visibility:hidden;transition:all .5s}.btn-cart-tooltip-content{display:flex;align-items:center;justify-content:center}.btn-cart-tooltip-wrapper,.btn-cart-tooltip-text,.btn-cart-tooltip-icon{overflow:hidden;position:absolute;width:100%;height:100%;left:0;color:#fff}.btn-cart-tooltip-text{top:0;display:flex;align-items:center;justify-content:center}.btn-cart-tooltip-text,.btn-cart-tooltip-icon{transition:top .5s}.btn-cart-tooltip-icon{color:#fff;top:100%;display:flex;align-items:center;justify-content:center}.btn-cart-tooltip-icon svg{width:24px;height:24px}.btn-cart-tooltip:hover{background:#333}.btn-cart-tooltip:hover .btn-cart-tooltip-text{top:-100%}.btn-cart-tooltip:hover .btn-cart-tooltip-icon{top:0}.btn-cart-tooltip:hover:before,.btn-cart-tooltip:hover:after{opacity:1;visibility:visible}.btn-cart-tooltip:hover:after{bottom:calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px)}.btn-cart-tooltip:hover:before{bottom:calc(var(--height) + var(--gap-between-tooltip-to-button))}.btn-slide-add{position:relative;width:150px;height:40px;cursor:pointer;display:flex;align-items:center;border:1px solid #34974d;background-color:#3aa856;border-radius:8px;overflow:hidden}.btn-slide-add,.btn-slide-add-icon,.btn-slide-add-text{transition:all .3s}.btn-slide-add .btn-slide-add-text{transform:translate(30px);color:#fff;font-weight:600}.btn-slide-add .btn-slide-add-icon{position:absolute;transform:translate(109px);height:100%;width:39px;background-color:#34974d;display:flex;align-items:center;justify-content:center}.btn-slide-add .btn-slide-add-svg{width:30px;stroke:#fff}.btn-slide-add:hover{background:#34974d}.btn-slide-add:hover .btn-slide-add-text{color:transparent}.btn-slide-add:hover .btn-slide-add-icon{width:148px;transform:translate(0)}.btn-slide-add:active .btn-slide-add-icon{background-color:#2e8644}.btn-slide-add:active{border:1px solid #2e8644}@media (max-width: 768px){.btn-cart-tooltip{--width: 100px;--height: 36px}.btn-slide-add{width:120px;height:36px}.btn-transform{padding:14px 16px 13px;font-size:14px}.btn-ripple{padding:10px 20px;font-size:14px}}.btn-pay-now{position:relative;padding:12px 24px;font-size:16px;background:#1a1a1a;color:#fff;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease;font-weight:600;font-family:system-ui,-apple-system,sans-serif}.btn-pay-now:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0006}.btn-pay-now:active{transform:translateY(0) scale(.98)}.btn-pay-icon-container{position:relative;width:24px;height:24px}.btn-pay-icon{position:absolute;top:0;left:0;width:24px;height:24px;color:#22c55e;opacity:0;visibility:hidden;transition:all .3s ease}.btn-pay-icon.default-icon{opacity:1;visibility:visible}.btn-pay-now:hover .btn-pay-icon{animation:none}.btn-pay-now:hover .btn-pay-icon.wallet-icon{opacity:0;visibility:hidden}.btn-pay-now:hover .btn-pay-icon.card-icon{animation:iconRotate 2.5s infinite;animation-delay:0s}.btn-pay-now:hover .btn-pay-icon.payment-icon{animation:iconRotate 2.5s infinite;animation-delay:.5s}.btn-pay-now:hover .btn-pay-icon.dollar-icon{animation:iconRotate 2.5s infinite;animation-delay:1s}.btn-pay-now:hover .btn-pay-icon.check-icon{animation:iconRotate 2.5s infinite;animation-delay:1.5s}.btn-pay-now:active .btn-pay-icon{animation:none!important;opacity:0;visibility:hidden;transition:all .3s ease}.btn-pay-now:active .btn-pay-icon.check-icon{animation:checkmarkAppear .6s ease forwards!important;visibility:visible}@keyframes iconRotate{0%{opacity:0;visibility:hidden;transform:translateY(10px) scale(.5)}5%{opacity:1;visibility:visible;transform:translateY(0) scale(1)}15%{opacity:1;visibility:visible;transform:translateY(0) scale(1)}20%{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.5)}to{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.5)}}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5) rotate(-45deg)}50%{opacity:.5;transform:scale(1.2) rotate(0)}to{opacity:1;transform:scale(1) rotate(0)}}.payment-card-container{background-color:#fff;display:flex;width:460px;height:120px;position:relative;border-radius:6px;transition:.3s ease-in-out;box-shadow:0 4px 12px #0000001a;overflow:hidden}.payment-card-container:hover{transform:scale(1.03);width:220px}.payment-card-container:hover .payment-left-side{width:100%}.payment-left-side{background-color:#5de2a3;width:130px;height:120px;border-radius:4px;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.3s;flex-shrink:0;overflow:hidden}.payment-right-side{width:calc(100% - 130px);display:flex;align-items:center;overflow:hidden;cursor:pointer;justify-content:space-between;white-space:nowrap;transition:.3s}.payment-right-side:hover{background-color:#f9f7f9}.payment-arrow{width:20px;height:20px;margin-right:20px;fill:#cfcfcf}.payment-new-text{font-size:23px;font-family:Lexend Deca,sans-serif;margin-left:20px;color:#333}.payment-card{width:70px;height:46px;background-color:#c7ffbc;border-radius:6px;position:absolute;display:flex;z-index:10;flex-direction:column;align-items:center;box-shadow:9px 9px 9px -2px #4dc88fb8}.payment-card-line{width:65px;height:13px;background-color:#80ea69;border-radius:2px;margin-top:7px}.payment-card-buttons{width:8px;height:8px;background-color:#379e1f;box-shadow:0 -10px #26850e,0 10px #56be3e;border-radius:50%;transform:rotate(90deg);margin:10px 0 0 -30px}.payment-card-container:hover .payment-card{animation:slide-top 1.2s cubic-bezier(.645,.045,.355,1) both}.payment-card-container:hover .payment-post{animation:slide-post 1s cubic-bezier(.165,.84,.44,1) both}@keyframes slide-top{0%{transform:translateY(0)}50%{transform:translateY(-70px) rotate(90deg)}60%{transform:translateY(-70px) rotate(90deg)}to{transform:translateY(-8px) rotate(90deg)}}.payment-post{width:63px;height:75px;background-color:#dddde0;position:absolute;z-index:11;bottom:10px;top:120px;border-radius:6px;overflow:hidden}.payment-post-line{width:47px;height:9px;background-color:#545354;position:absolute;border-radius:0 0 3px 3px;right:8px;top:8px}.payment-post-line:before{content:"";position:absolute;width:47px;height:9px;background-color:#757375;top:-8px}.payment-screen{width:47px;height:23px;background-color:#fff;position:absolute;top:22px;right:8px;border-radius:3px}.payment-numbers{width:12px;height:12px;background-color:#838183;box-shadow:0 -18px #838183,0 18px #838183;border-radius:2px;position:absolute;transform:rotate(90deg);left:25px;top:52px}.payment-numbers-line2{width:12px;height:12px;background-color:#aaa9ab;box-shadow:0 -18px #aaa9ab,0 18px #aaa9ab;border-radius:2px;position:absolute;transform:rotate(90deg);left:25px;top:68px}@keyframes slide-post{50%{transform:translateY(0)}to{transform:translateY(-70px)}}.payment-dollar{position:absolute;font-size:16px;font-family:Lexend Deca,sans-serif;width:100%;left:0;top:0;color:#4b953b;text-align:center}.payment-card-container:hover .payment-dollar{animation:fade-in-fwd .3s 1s backwards}@keyframes fade-in-fwd{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media only screen and (max-width: 480px){.payment-card-container{transform:scale(.7);width:320px}.payment-card-container:hover{transform:scale(.74);width:154px}.payment-new-text{font-size:18px}}.btn-primary-color{--button-color: #2196F3;--hover-color: #1976D2}.btn-success-color{--button-color: #4CAF50;--hover-color: #45a049}.btn-danger-color{--button-color: #f44336;--hover-color: #da190b}.btn-dark-color{--button-color: #333;--hover-color: #222}
/*# sourceMappingURL=/cdn/shop/t/16/assets/modern-buttons.css.map */