.otp-confirmation{display:flex;flex-direction:column;align-items:center;row-gap:32px;overflow-y:auto;width:100%;padding:32px 40px;background-color:rgb(var(--color-background));animation-name:fadeIn;animation-duration:.3s}.otp-confirmation__heading{margin-top:0;margin-bottom:0;font-family:Encode Sans,sans-serif;font-size:24px;font-weight:800;line-height:1.333;letter-spacing:.07em;color:#0f1010;text-align:center}.otp-confirmation__text-wrapper{display:flex;flex-direction:column;align-items:center;margin-top:-16px;line-height:1.5;text-align:center;color:#6d6d6d}.otp-confirmation__email{font-weight:700;word-break:break-all}.otp-confirmation__form-success-message,.otp-confirmation__error-message{font-size:16px;line-height:1.5;text-align:center;animation-name:fadeIn;animation-duration:.3s}.otp-confirmation__form-success-message{margin-top:8px;margin-bottom:0;color:#198754}.otp-confirmation__form-success-message .icon-checkmark{margin-right:6px;width:1.8rem;vertical-align:middle}.otp-confirmation__error-message{margin-top:-16px;color:#e63f3f}.otp-confirmation__error-message p{margin:0}.otp-confirmation__form{width:100%}.otp-confirmation__form.loading{pointer-events:none}.otp-confirmation__form.loading .otp-confirmation__form-spinner{display:flex}.otp-confirmation__form-spinner{display:none;position:absolute;top:50%;left:50%;z-index:2;align-items:center;justify-content:center;width:100%;height:100%;background:#76d2fa;transform:translate(-50%,-50%)}.otp-confirmation__form-spinner svg{width:1.8rem}.otp-confirmation__form-inputs{display:flex;justify-content:center;column-gap:8px}.otp-confirmation__form-otp-input{display:flex;justify-content:center;align-items:center;padding:19px;width:64px;height:64px;font-size:16px;font-weight:600;line-height:1.5;text-align:center;color:#0f1010;border:1px solid #CBD5DE;border-radius:16px}.otp-confirmation__form-otp-input:focus-visible{border-color:#0f1010}.otp-confirmation__form-button{display:block;position:relative;margin:24px auto 0;padding:8px 16px 8px 32px;font-family:var(--font-body-family);font-style:normal;font-weight:600;font-size:16px;line-height:1.25;letter-spacing:0;text-decoration:none;background-color:#35afe4;border-radius:56px;border:none;overflow:hidden;cursor:pointer;transition:border-color .2s ease}.otp-confirmation__form-button:focus-visible{outline:1px solid #0F1010}.otp-confirmation__form-button:before{content:"";position:absolute;top:50%;right:-40px;width:40px;height:40px;background-color:#0f1010;border-radius:50%;transform:translateY(-50%) scale(1);transition:top .4s ease,right .5s ease,transform .6s ease}@media(-moz-touch-enabled:0),(hover:hover),(pointer:fine){.otp-confirmation__form-button:hover .otp-confirmation__form-button-text{color:#fff}.otp-confirmation__form-button:hover:before{right:0;top:50%;transform:translateY(-50%) scale(9)}.otp-confirmation__form-button:hover .otp-confirmation__form-button-icon-wrapper{background-color:#76d2fa}.otp-confirmation__form-button:hover .otp-confirmation__form-button-icon{-webkit-transform:translateX(-100%);transform:translate(100%)}.otp-confirmation__form-button:hover .otp-confirmation__form-button-icon:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.3335 8H12.6668' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33334L12.6667 8.00001L8 12.6667' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.otp-confirmation__form-button:hover .otp-confirmation__form-button-icon svg path{stroke:#000}}.otp-confirmation__form-button-text{color:#fff;z-index:1;transition:color .3s ease}.otp-confirmation__form-button-hover{display:flex;align-items:center;overflow:hidden}.otp-confirmation__form-button-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;margin-left:24px;width:40px;height:40px;border-radius:100%;background-color:#0f1010;padding:0;overflow:hidden;transition:background-color .4s ease}.otp-confirmation__form-button-icon{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:-webkit-transform .3s;transition:transform .3s ease;color:#fff}.otp-confirmation__form-button-icon:before{content:"";position:absolute;left:-100%;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.3335 8H12.6668' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33334L12.6667 8.00001L8 12.6667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50% 50%;-webkit-transform:translate3d(0,0,0);transform:translateZ(0);color:#fff}.otp-confirmation__form-button-icon svg path{stroke:#fff}.otp-confirmation__resend-text-wrapper{display:flex;flex-direction:column;align-items:center;row-gap:8px;margin-top:-8px;color:#0f1010}.otp-confirmation__resend-text{margin:0}.otp-confirmation__resend-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;line-height:1.25;border:none;background-color:transparent;padding:0;color:#0f1010;cursor:pointer;transition-property:opacity;transition-duration:.3s}.otp-confirmation__resend-button:focus-visible{outline:1px solid #0f1010}.otp-confirmation__resend-button.loading{cursor:default}.otp-confirmation__resend-button.loading .otp-confirmation__resend-button-text{visibility:hidden;opacity:0}.otp-confirmation__resend-button.loading .loader{display:flex;background:none}@media(-moz-touch-enabled:0),(hover:hover),(pointer:fine){.otp-confirmation__resend-button:hover{opacity:.7}}@media(max-width:575px){.otp-confirmation__form{margin-top:-8px}.otp-confirmation__form-otp-input{padding:4px;width:52px;height:52px;border-radius:12px}}@media(max-width:480px){.otp-confirmation__form-otp-input{width:42px;height:42px}}@media(max-width:360px){.otp-confirmation__form-otp-input{width:36px;height:36px;border-radius:8px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/427/assets/otp-confirmation.css.map */