:root{--green: #0FA470;--gray: #D3D2D4;--text: #222;--dot: 26px;--line: 2px;--gap: 24px;--font: 14px}.stepper{display:flex;align-items:center;gap:0;padding:36px 8px;color:var(--text)}.stepper .step,.stepper .endpoint{flex:1 1 0;display:flex;justify-content:center;align-items:center;position:relative}.stepper .dot{width:var(--dot);height:var(--dot);border-radius:50%;background:var(--gray);z-index:1}.stepper .step:after{content:"";position:absolute;top:50%;inset-inline-start:calc(50% + var(--dot) / 2);height:var(--line);width:calc(100% - (var(--dot) / 2));background:var(--gray);transform:translateY(-50%);z-index:0}:dir(rtl) .stepper .step:after{inset-inline-end:auto;inset-inline-start:calc(50% + var(--dot) / 2)}.stepper .endpoint:after{display:none}.stepper .label{color:var(--gray);position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:var(--font);line-height:1.2;white-space:nowrap;user-select:none;text-align:center}.stepper .icon{width:16px;height:16px;fill:currentColor}.stepper .step:nth-of-type(odd) .label{bottom:calc(-1 * var(--gap))}.stepper .step:nth-of-type(even) .label{top:calc(-1 * var(--gap))}.stepper .endpoint .label{top:calc(-1 * var(--gap))}.stepper[data-active="1"] .step:nth-of-type(-n+1) .dot{background:var(--green)}.stepper[data-active="1"] .step:nth-of-type(-n+1):after{background:var(--green)}.stepper[data-active="2"] .step:nth-of-type(-n+2) .dot{background:var(--green)}.stepper[data-active="2"] .step:nth-of-type(-n+2):after{background:var(--green)}.stepper[data-active="3"] .step:nth-of-type(-n+3) .dot{background:var(--green)}.stepper[data-active="3"] .step:nth-of-type(-n+3):after{background:var(--green)}.stepper[data-active="4"] .step .dot,.stepper[data-active="4"] .endpoint .dot{background:var(--green)}.stepper[data-active="4"] .step:after{background:var(--green)}@media (max-width: 420px){.stepper{padding:40px 8px}.stepper .label{max-width:8rem}}.stepper[data-active="1"] .step:nth-of-type(-n+1) .label{color:var(--green)}.stepper[data-active="2"] .step:nth-of-type(-n+2) .label{color:var(--green)}.stepper[data-active="3"] .step:nth-of-type(-n+3) .label{color:var(--green)}.stepper[data-active="4"] .step .label,.stepper[data-active="4"] .endpoint .label{color:var(--green)}#otpForm{display:flex;flex-direction:column}:root{--size:48px;--radius:10px;--focus:#1565c0;--ok:#2dd55b;--border:#cfd8dc}.otp{display:flex;gap:18px;margin:.5rem 0}.otp input{width:var(--size);height:var(--size);text-align:center;font-size:22px;border:2px solid var(--border);border-radius:var(--radius);outline:0;caret-color:transparent;transition:border-color .15s,box-shadow .15s}.otp input:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 20%,transparent)}.otp.filled input:last-of-type{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}.otp button{padding:10px 16px;border:none;border-radius:10px;background:var(--focus);color:#fff;font-weight:600}.otp button:disabled{opacity:.6;cursor:not-allowed}@media (min-width: 768px){.opt-block,.forgot-password-block{width:425px;margin-right:auto;margin-left:auto}}@media (max-width: 767px){.otp{gap:8px;margin:0!important}.otp input{width:40px!important;height:40px!important;font-size:18px!important}}