*{box-sizing:border-box;font-family:Arial}
body{background:#f5f6f8}
.form-wrapper{max-width:420px;margin:50px auto;background:#fff;padding:30px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.progress{display:flex;justify-content:center;margin-bottom:30px}
.circle{width:34px;height:34px;border-radius:50%;background:#ddd;display:flex;align-items:center;justify-content:center;font-weight:bold}
.circle.active{background:#000;color:#fff}
.line{width:50px;height:3px;background:#ddd;margin-top:16px}
.step{display:none}.step.active{display:block}
input,select{width:100%;height:52px;padding:0 16px;margin-bottom:14px;border-radius:10px;border:1px solid #dcdcdc;font-size:15px}
select.readonly{pointer-events:none;background:#f2f2f2;color:#777}

.btn{width:100%;padding:14px;border-radius:10px;border:none;cursor:pointer;margin-bottom:10px;transition:.25s;position:relative}
.btn.primary{background:#000;color:#fff}
.btn.secondary{background:#eee}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* LOADING SPINNER */
.btn.loading::after{
  content:"";
  width:18px;height:18px;
  border:2px solid #fff;
  border-top:2px solid transparent;
  border-radius:50%;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:spin .7s linear infinite
}

/* SUCCESS */
.btn.success{background:#22c55e!important}

/* SHAKE */
.shake{animation:shake .35s}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

/* TOAST */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:14px 22px;border-radius:10px;opacity:0;transition:.3s;z-index:9999}
.toast.show{opacity:1;top:40px}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:9999}
.modal.show{display:flex}
.modal-box{background:#fff;padding:25px;border-radius:14px;width:300px;text-align:center}
.hidden{display:none}