main.login{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--sixty-percent)}main.login form.login-wrapper{width:clamp(0px,100%,500px);height:600px;border-radius:1rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin-top:-100px;background-color:#fff;position:relative;z-index:1;transition:.2s ease}main.login form.login-wrapper.loading{pointer-events:none;filter:blur(2px)}main.login form.login-wrapper .go-back{position:absolute;top:0;left:0;padding:1.5rem;opacity:0;pointer-events:none;transition:.2s opacity ease}main.login form.login-wrapper header{flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:1rem}main.login form.login-wrapper header img{width:100px;height:100px;object-fit:contain}main.login form.login-wrapper header p{margin-top:.2rem;opacity:.7}main.login form.login-wrapper .sections{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;overflow:hidden}main.login form.login-wrapper .sections section{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 2rem;transition:transform .5s ease}main.login form.login-wrapper .sections .code-section{position:absolute;inset:0;transform:translateX(200%)}main.login form.login-wrapper .sections .code-section .input-container{margin-top:-60px}main.login form.login-wrapper .sections .code-section .counter{display:flex;align-items:center;justify-content:center;gap:.5rem;opacity:0;transition:.3s opacity ease}main.login form.login-wrapper .sections .code-section .counter.active{opacity:1}main.login form.login-wrapper .sections .infos-section{position:absolute;inset:0;gap:2.5rem;transform:translateX(200%);direction:rtl;padding-top:2rem;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}main.login form.login-wrapper .sections .infos-section .input-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}main.login form.login-wrapper .sections .infos-section .input-container textarea{width:100%;padding:1rem;border-radius:1rem;border:1px solid #c5c5c5;margin-top:1rem;resize:none;line-height:1.8em}main.login form.login-wrapper .sections .infos-section .holder{opacity:.7}main.login form.login-wrapper .sections .infos-section input{padding:.7em 0}main.login form.login-wrapper .sections .infos-section input.name,main.login form.login-wrapper .sections .infos-section input.lname{direction:rtl}main.login form.login-wrapper .sections .phone-section .input-container{margin-top:-60px}main.login form.login-wrapper .sections .input-container{width:clamp(0px,100%,500px);display:flex;align-items:center;flex-direction:column;gap:1rem;position:relative;z-index:1}main.login form.login-wrapper .sections .input-container input{width:100%;padding:1em 0;border:0;border-bottom:1px solid rgba(0,0,0,.2);text-align:right;direction:ltr}main.login form.login-wrapper .sections .input-container input::placeholder{font-family:yekan}main.login form.login-wrapper .sections .input-container .holder{position:absolute;right:-1rem;top:-1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:#fff;transform:translateY(65%) translateX(-0.5rem);padding-inline:.5rem;transform:translateY(-20%);opacity:1;scale:.9}main.login form.login-wrapper .sections .input-container .inp-error{width:100%;display:flex;gap:.5rem;color:var(--alert-error);pointer-events:none;opacity:0;transition:.2s opacity ease}main.login form.login-wrapper .sections .input-container .inp-error.active{opacity:1}main.login form.login-wrapper .sections .input-container .inp-error svg{width:20px;height:20px}main.login form.login-wrapper .cta-wrapper{flex-shrink:0;width:100%;display:flex;align-items:center;justify-content:center;padding:1rem}main.login form.login-wrapper .cta-wrapper button{width:100%;background-color:#4f65ff;color:#fff;padding:.7rem;border-radius:.5rem;transition:.2s ease}main.login form.login-wrapper .cta-wrapper button:active{scale:.97}main.login form.login-wrapper.active .go-back{pointer-events:all;opacity:1}main.login form.login-wrapper.active .sections .code-section{transform:translateX(0%)}main.login form.login-wrapper.active .sections .phone-section{transform:translateX(-200%)}main.login form.login-wrapper.info .sections .code-section{transform:translateX(-200%)}main.login form.login-wrapper.info .sections .phone-section{transform:translateX(-200%)}main.login form.login-wrapper.info .sections .infos-section{transform:translateX(0%)}/*# sourceMappingURL=login.css.map */